Exercises & Group Project for Web Design Summer 2014
- Quizzes: Due Week 2 on 6/8 | Week 4 on 6/22 | Week 7 on 7/13
- Short Assignment 1 | Due Week 2 on 6/6
- Exercise 1 | Due Week 3 on 6/13 | Revision Due Week 4 on 6/22
- Group Competitive Site Analysis | Due Week 3 on 6/15 | Revision Due Week 5 on 6/29
- Exercise 2 | Due Week 5 on 6/27 | Revision Due Week 6 on 7/6
- Short Assignment 2 | Due Week 7 on 7/9
- Group Website | Due Week 8 on 7/18
- Post-Mortem Paper & 360 Evaluation | Due Week 8 on 7/18
Quizzes (10% of Course Grade)
- Week 2 - Web Design Basics: Due Sun Jun 8 at 11:55pm.
- Week 4 - CSS & Layout Basics: Due Sun Jun 22 at 11:55pm.
- Week 7 - Dynamic Web Basics: Due Sun Jul 13 at 11:55pm.
Short Assignment 1: XHTML – Create & Upload Simple Web Page (5% of Course Grade)
- Please read the complete Chapter 4 in Learning Web Design book by Robbins (accessible in Resources in Sakai and attached to Assignment in Sakai). Go through the exercise mentioned in Chapter 4, where the exercise is described in a step-by-step fashion in their respective text boxes.
- You need to upload the first assignment into a new folder on the Eden server and submit the URL via the Short Assignment in Sakai.
- Make sure you place this folder inside of the public_html folder and that the permissions are set to 755. It should look like this: http://eden.rutgers.edu/~youredenusername/320/assign1/
- Check that the page displays correctly in your browser at that URL before you submit it.
- A forum will be created in the Sakai Discussion tool so that you can help each other if need be.
- E-mail attachments are not accepted as a completed assignment. Part of the assignment is getting to practice how to create site definitions in Dreamweaver, and most importantly, how to upload files to a remote server. We will cover how to do this in the video demos in Lec 2 and Lec 3.
- Gameplan
- Create NetID and/or Eden server account if does not yet exist; Create public_html folder if needed and set permissions: NetID & Eden server account (4:06)
- Create and complete your page and related files by the start of Week 2. You can use Dreamweave or a simple text editor, such as Notepad or NotePad++ to do all the steps.
- In Week 2, you will pratice how to create a site definition in Dreamweaver and you can upload your files to the Eden server to complete this short assignment: Site Definition in Dreamweaver CS5/6/CC (5:08)
- Due Week 2 = Fri Jun 6 by 11:55pm.
Exercise 1: XHTML & CSS – Create Website Evaluation (15% of Course Grade)
- Write a detailed evaluation of a website of your choice.
You can choose a site that you like or that you analyzed for the Group Competitive Site Analysis. - You need to use and address all the set of evaluation questions listed below.
Incorporate your own insights and provide specific examples that you understand the issues addressed by each question (incorporate at least two relevant screenshots and hyperlinks to the specific parts of the website in your evaluation). Provide brief and concise answers. - Publish your evaluation as a set of web pages.
Create a summary page that contains a brief summary of your evaluation and include a hyperlink to the site's home page you are evaluating. - Many of the video demos from Creating a First Web Site with Dreamweaver CS6 (LyndaCampus) form the basis for creating this exercise (see Lectures page for the video demos (highlighted in green) that need to be reviewed and have also been discussed in the course; links to relevant individual vidoes are also included in the requirements below and a Step-by-Step Ex1 Demos are provided below and include CC specific videos when needed).
- Layout
- The main elements of the web page (navigation, header, main content) need to:
- Use the appropriate HTML5 tags (see Creating an HTML5 layout (6:50))
- Be either positioned in an absolute or relative way (see Positioning elements (6:47) and Positioning in CC (13:48)).
- Have a left position of at least 15 pixels, except for the main content which has a left position of at least 30 pixels.
- Each page needs a background image (see Adding content (6:55)) that is appropriate for the content of the page (e.g. a relevant screenshot of the site being evaluated and can be the same or different background images for the pages).
- The element containing the main content needs to:
- Have rounded corners (see Customizing the style (9:20))
- Its background needs to have a transparency of 85% (see Customizing the style (9:20)).
- Navigation
- The primary navigation structure needs to consist of: Summary | Audience | Task | Navigation | Functionality
and use relative navigation hyperlinks (see Creating and linking multiple pages (8:52)) and be left-aligned. - The navigation structure will: use a Spry Menu Bar (see Adding a menu bar (4:08) and Spry Menu Bar in CC (8:00) and starter page & Spry Asset folder can be downloaded in Sakai > Resources > Ex1)) and list as secondary choices the relevant abbreviated evaluation questions (at most three words) and named anchor links (see Using named anchors (6:41)) will take the user to relevant question / answer on a web page. Dreamweaver Help: Spry-Menu-Bar.html.
- Make sure that the needed JavaScript and CSS files for the Spy Menu Bar are stored in the Exercise 1 folder.
- You will need to customize the apprearance of Spry Menu Bar by modifying the relevant CSS rules (see Customizing the menu bar (7:29)).
- The primary navigation needs to have a clear "you are here" indicator.
You will need to create and apply CSS class to the relevant primary navigation link and create & customize the appropriate CSS rules (as shown in class demo). - Content
- You need to structure the main content so that it follows a question & answer format where the question is shown in bold and the answer follows right after.
In particular, make sure that vertical gap between question and its related answer is less than the vertical gap between answer and the next question.
Here is an example, which does not use AP elements or a Spry Menu Bar and uses a very simple layout, but it shows you how display the questions and your concise answers. - You need to specify CSS rules for formatting the questions and/or answers in a specific way: questions need to be shown in bold and the related answer needs to be spatially close (see Customizing the style (9:20)).
- You need to insert at least two screenshot images (cropped and scaled if needed) that are annotated (see Capture, Edit Screenshot in Fireworks; Insert Image in Dreamweaver (4:29)) to support what you are describing where appropriate. Sometimes, a screenshot will span the whole width of the main content element, otherwise it will be a smaller screenshot. In the latter case, you need to make use of the "float" property in CSS and appropriately structure the page so that you have a balanced layout that applies what we have covered so far in terms of design principles and CSS techniques in the course.
- CSS
- The CSS code controlling the appearance of the pages needs to be stored in an external style sheet (see Making CSS more flexible (5:37))
- You are the designer: you create and/or modify the needed CSS rules to achieve the "look & feel" you want.
- Upload | FTP your pages to your Rutgers account and Submit the URL in Sakai.
- Make sure to upload needed pages, images, CSS and JavaScriptr files and set permission for all of them appropriately.
- Test your pages in the Browser.
- Due Week 3 = Fri Jun 13 by 11:55pm. (Revision Due Sun Jun 22)
- Exercise 1 Demo: slides in Lec 4 Handout describe in detail the steps needed for creating this exercise:
- Exercise 1 Overview (2:15) Describing the key steps & tasks to be performed to complete Ex1.
- Exercise 1 Reminders (3:16) Key Steps & Things to Remember
- Step 1 (4:32) Set up Local / Remote Site - Step 1 using CC (5:08) Modify Local / Remote Site, Upload Files.
- Step 2 (2:12) Create First Page, Initialize DW and Page.
- Step 3 (6:30) Create Page Layout using AP Elements - Creating AP Elements in CC (13:48).
- Step 4 (2:40) Convert Layout to HTML5 tags.
- Step 5 (2:05) Move Internal CSS to Exernal CSS file.
- Step 6a (9:14) Create Navigation Structure using Spry Menu Bar and CC users: Spry Menu Bar in CC (8:00). Dreamweaver Help: Spry-Menu-Bar.html.
- Step 6b (5:38) Customize Spry Menu Bar & Create “You are here”.
- Step 6c (1:00) Create Other Pages and Customize “You Are Here”.
- Step 7 (3:59) Structure Text, Create Anchor & Format Text.
- Step 8 (1:29) Insert Screenshots.
- Step 9 (3:34) Upload Files to Remote Site.
- Evaluation Questions
- Evaluation - Audience
- Who is the site for? Who are the intended users?
- What do users want to accomplish?
- What are the needed skills? Good fit with skills of intended users?
- What tasks are users trying to accomplish?
- Evaluation - Task
- Support tasks users need to accomplish?
- Support both experienced and inexperienced users?
- User expectations meet?
- Evaluation - Navigation
- What site is this? (Site ID)
- What page am I on? (Page name)
- What are the major sections of this site? (Sections - tabs)
- What are my options at this level? (Local navigation)
- Where I am? ("You are here" indicators or breadcrumbs)
- Can you easily find your way? back home? other sections?
- How can I search?
- Evaluation - Functionality
- Instantly understand what the site is about?
- Understand what you can do there?
- "Look & feel" entice you to stay and explore?
- Main functions easily accessible? Easy to use?
- Links clear where they will take you?
- Instant visual hierarchy? Or visually too busy?
- Text easy to read?
- Graphics easy to understand?
- Large site has a site map, index or search function?
- Help available and useful?
- Download times reasonable?
Group Competitive Site Analysis: Competitive Analysis – Analyze Site, Identify Sites to Emulate and Develop Wireframe of Revised Site (15% of Course Grade)
- Team of Three: email me group members by Wed Jun 4 at 11:55pm.
- Group Analysis of whereRU content and site
- Use framework of questions presented in class to identify issues and offer brief solutions.
- What should be the primary and secondary navigation categories? Why? (see below for a list of navigation categories being considered by the whereRU team)
- Each team member selects a different site to analyze
- Select site to emulate / learn from for these three types of pages: Home Page | Browse Page | Individual Item Page
- Identify Layout elements, Content items and Interactions supported
- Create schematic wireframe of pages and annotate elements to describe their purposes and interactions supported
- http://en.wikipedia.org/wiki/Website_wireframe
- http://www.gdoss.com/web_info/web-site-wireframe.php
- Explain why to you think the layout, content items and/or interactions are well designed and should be emulated by whereRU
- Group Recommendation
- Which site(s) should whereRU emulate for home, browse and item pages and why?
- Provide wireframe sketches for how whereRU can emulate the selected site(s) with brief explanations
- Group Report Format
- Review of whereRU site (2-3 pages)
- Use framework of questions presented in class to identify issues and offer brief solutions
- Individual Site Analysis of a site for whereRU to emulate (4 pages per group member)
- 1 page intro & summary: why selected it? what do you think is specially well done
- 1 page wireframe for Home page
- 1 page wireframe for Browse page
- 1 page wireframe for Individual Item page
- Group Recommendation (4 pages)
- 1-2 page(s) intro & summary: which site(s) should whereRU emulate for home, browse and item pages and why?
- Provide wireframe sketches with brief explanations for how whereRU can emulate the selected site(s):
- 1 page wireframe for Home page
- 1 page wireframe for Browse page
- 1 page wireframe for Individual Item page
- The report (in the form of Word document) will be in total 18 to 20 pages long (assuming 3 group members)
- Online Lectures
- Group Competitive Site Analysis (7:00) whereRU requirements, Competitve Site Analysis to-dos.
- Competitive Site Analysis (6:32) Recap of Key Steps and Requirements.
- Background Information
- http://whereru.rutgers.edu
- Target audience?
- Prospective Student
- Rutgers Community : bring it together
- Alumni
- What do you want the site to accomplish?
- Rich Visual Experience
- Experience Rutgers Virtually
- Put Rutgers on the Map
- Break Site into Categories
- Location: University | Camden | Newark | New Brunswick
- Media Types: Gigapan | Photosynth | Video | Virtual Tours
- Display Types: Showcase | Map | Browse | Individual Item
- Categories: Architecture & History | Arts & Culture | Athletics | Events | Libraries | Research | Student Life
- Sites to Emulate? Learn from? for the redesign of whereRU site
- Specific questions to address:
- whereRU - Home Page
- Identity & Mission: how best to communicate it? sentences to use?
- How can the Home Page easily answer: What can I do here?
- How best to explain whereRU concept in concise way?
- Timely Content: how best to do it?
- Due Week 3 = Sun Jun 15 by 11:55pm. (Revision Due Sun Jun 29)
Exercise 2: Rollovers & Advanced CSS – Create Advanced Website (15% of Course Grade)
- This exercise builds on what you created in Exercise 1 and you don't need to create new textual content.
- Responsive Layout
- Create Media Query so that page layout will be adapted for a mobile device that has max-width of 750px
(see Creating a mobile layout (12:28) - Creating Media Query in CC (6:00)) - Navigation Design
- Navigation - Home for Large Screen
- Create animated navigation structure using jQuery (see Creating jQuery animated image menus (7:45) and example)
- Create images for UP and UP While Over states of navigation structure.
- Navigation for Mobile Device
- Use lists and CSS to create the primary navigation (as discussed in CSS Navigation (7:34) in Lec 8 and shown how to do in Converting lists to menus (7:56))
- Incorporate this CSS file simple_nav.css and you need to create your own customized look & feel for the mobile navigation (at least background color and text color are different from provided example).
- Image Map and Absolutely Positioned Element:
- Incorporate at least one rollover effect in an image map (see Create Imagemap and Behavior triggered by Mouse Click(7:05)) that displays an AP element on top of page that contains a enlarged detail or related small image and the AP element disappears on mouse out (see Create Disjointed Rollover by Attaching "Show-Hide Elements" Behavior to Images (7:17).
- CSS
- Format question & answer pairs so that they have a shared border and a pleasing background color.
- Make sure that there are suffcient margins between question & answer pairs and sufficient padding inside question & answer pairs.
- CSS rules used on all pages need to be stored in an external style sheet.
- Due Week 5 = Fri Jun 27 by 11:55pm. (Revision Due Sun Jul 6)
- Exercise 2 Demo: slides in Lec 8 Handout describe in detail the steps needed for creating this exercise:
- Exercise 2 Overview (6:40) Describing the key steps & tasks to be performed to complete Ex2.
- Step 1 (9:46) Create Responsive Layout - Create Media Query in CC (6:00)
- Step 2 (7:28) Create Responsive Navigation Structure.
- Step 3 (13:46) Create Animated Navigation using jQuery for Summary.
- Step 4 (6:08) Create Simple Navigation for Mobile Pages.
- Step 5 (6:06) Create AP Element that contains Image of Detail, Create Image Map and Attach Show / Hide Behavior.
- Step 6 (3:06) Create Structure and CSS for Question / Answer Pairs.
Short Assignment 2: PHP & MySQL – Create PHP Page to Display Contents of MySQL Database (5% of Course Grade)
- In this short assignment, you get to practice how to connect to the whereru database and display data from the whereru_gigapan table in a dynamic web page.
- Several php files have been uploaded to Sakai > Resources > PHP that show you how to connect to a MySQL database and retrieve data and then dynamically display it in a web page.
- This short assignment, which can not be resubmitted, will require you to use the basic PHP operations covered in the class lectures and make use of your basic programming experience gained in previous classes, such as how to use arrays, construct "for" loops and develop program logic using "if", "elseif" and "else" statements.
- Use login_lastname.php and databaseConnect_table_gigapan_lastname.php (can download them from Sakai > Resources > PHP Files) as your starting point.
- Your tasks are:
- For each campus, embed the most recent Gigapan inside a large box with a border and appropriate backgound color. Show above this embedded Gigapan the name of the campus and below the title and category of the embedded Gigapan.
- Inside this box also show below the embedded Gigapan a 2x5 table that contains thumbnails of the next 10 most recent Gigapans in two rows, where the table and the thumbnails have borders properties and you decide how to specify the padding / margin / background color properties.
- You will have to develop CSS classes so that you can achieve the desired dynamic layout and store these CSS rules in an external CSS file. I have attached a wireframe of the basic layout that you need to create and refine in terms of the box properties that you specify.
- This wireframe shows the basic layout that you need to create and refine in terms of the box properties that you specify.
- Due Week 7 = Fri Jul 11 by 11:55pm.
- PHP & MySQL Demo
- Create Site Definition & Testing Server in DW (4:54)
- Download PHP Files from Sakai (0:36)
- login.php (3:06) MySQL username and password.
- Step4 (3:13) Display query results using FOR loop.
- Short Assignment 2 Overview (15:18) Short Assignment 2 Overview and Tips, How to use CSS to control appearance of page.
Group Website: Dynamic Web – Create Dynamic Website using XHTML, CSS, PHP and MySQL (25% of Course Grade)
The term project brings together what has been covered in this course and what you have practiced in the exercises:
- Work Organization
- Start by reviewing the wireframes that you created in the Group Competitive Site Analysis.
- Decide what exactly you will want and are able to implement in your group website prototype.
- Assign tasks to specific group members and email instructor a short report about "who will do what" by Jul 11 of class) and this report will serve as your "group contract" (see "What to Do in Week 7" annoucement in Sakai with specific quidelines about what you need to address in your "group contract").
- Prototype Deliverables
- Web pages to Design
- Home page.
- Browse page(s) : depending on the primary categories you select, different types of browse pages might need to be created.
- Individual pages for specific Gigapan, Photosynth or Video item.
- Navigation Structure
- Specify primary categories (such as campuses, media types or categories etc … you need to decide) o Interactive (changes appearance on mouse over for both UP and DOWN states).
- Clear "you are here" indicator You can use CSS or image swap behaviors to create the navigation structure.
- Consistent and Attractive Look & Feel
- Hierarchical HTML Page Structure needs to be created and elements appropriately named so that they can be controlled by CSS rules.
- CSS rules need to be created to control the appearance of different page elements and stored in an external CSS file (Headlines and text; Description, categories, tags associated with a media item; Embedded media item; Thumbnails; etc).
- Database Communication
- PHP code and MySQL queries need to be created to dynamically generate required web pages using content stored in the whereRU database.
- Grading
- Technical Quality of Deliverables
- Have the required types of pages been created, are they dynamically generated using PHP code & MySQL queries and does it all work (hyperlinks, content and images etc).
- Design Quality of Deliverables
- Does the prototype have an attractive look & feel and have the design principles covered in class been implemented, such as do the pages have a clear visual hierarchy (review lectures slides for more specific information).
- Due Week 8 = Fri Jul 18 by 11:55pm.
- Complete on Sat Jul 19 the online survey to select top 3 group prototypes – Participation is Mandatory.
- Lectures and Online Videos
- PHP & MySQL Files Overview (13:25) HTML Forms, Dynamic Browse Page based on supplied parameters in URL, Dynamic Browse Page with Menus.
- Review PHP & MySQL Files (13:50) Dynamic Browse Page based on supplied parameters in URL, Dynamic Browse Page with Menus.
- Big Picture for Group Project (3:22) Group Project Deliverables, Main Tasks for Group Project.
- Key MySQL & PHP Concepts for Group Project (10:16) Get & Display Data, $query, Parameters via URL, Thumbnails,
Embed Media, HTML in PHP, Browse, Individual Page, Troubleshooting Tips.
Group Project Analysis: Group Reflection & Feedback – Post-Mortem Paper & 360 Evaluation (10% of Course Grade)
- Group Post-Mortem Paper
- One paper due per group - only one student per group needs to submit this.
- Describe three things that went well in your project and three things that didn't go so well.
- When writing about the things that went well, be sure to mention what your group did to affect them.
- When talking about the things that didn't go so well, be sure to mention the things that your group could have done better.
- Two paragraphs on each subject and there are three "what went well" subjects and three "what did not go well) subjects = 2 paragraphs * (3 + 3) subjects = 12 paragraphs.
- The paper should visually look like this:
[Title of thing that went well/bad]
Two paragraphs on each subject. - I'd like you to focus more on the technical aspects of your website on this paper, though, I would also be interested to hear about group dynamics. If you feel like your team worked very well together, for example, talk about that as one of your subjects.
- Due Week 8 = Fri Jul 18 by 11:55pm.
- 360° Evaluation
- This is an individual assignment.
- Please write a brief summary of each group member's performance. This includes yourself. If there are three members in your group, your paper should be three paragraphs long.
- This short evaluation helps me understand how each member contributed to or detracted from the group's performance.
- This is different from the post-mortem paper, please do not confuse the two.
- For this evaluation, I am looking for very specific feedback from group members as to how other team members performed during the past several weeks.
- Due Week 8 = Fri Jul 18 by 11:55pm.