Exercises & Group Project for Web Design

Quizzes: Due Week 3 on 9/22 | Week 6 on 10/13 | Week 12 on 11/24

Short Assignment 1 | Due Week 3 on 9/20
Exercise 1 | Due Week 5 on 10/4 | Revision Due Week 8 on 10/27
Group Competitive Site Analysis | Due Week 6 on 10/11 | Revision Due Week 9 on 11/3
Exercise 2 | Due Week 9 on 11/1 | Revision Due Week 12 on 11/24
Short Assignment 2 | Due Week 12 on 11/22

Group Website | Due Week 15 on 12/10
Post-Mortem Paper & 360 Evaluation | Due Week 15 on 12/10

Quizzes (10% of Course Grade)

Week 3 - Web Design Basics: Due Sun Sept 22 at 11:55pm.
Week 6 - CSS & Layout Basics: Due Sun Oct 13 at 11:55pm.
Week 13 - Dynamic Web Basics: Due Sun Nov 24 at 11:55pm.

Short Assignment 1: XTHML – 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 lectures in Week 3.
Gameplan
Create and complete your page and related files by Thursday Sept 19 at 6pm. You can use Dreamweave or a simple text editor, such as Notepad or NotePad++ to do all the steps. Bring your files on a memory stick to class.
In class on Thursday Sept 19, we 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.
Due Week 3 = Friday Sept 20 by 11:55pm.

Exercise 1: XHTML / HTML5 & 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).

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))
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 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.
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 5 = Friday Oct 4 by 11:55pm. (Revision Due Sun Oct 27)
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 2 (2:12) Create First Page, Initialize DW and Page.
Step 3 (6:30) Create Page Layout using AP Elements.
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.
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 Tuesday Sept 17 at 6pm.
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 6 = Friday Oct 11 by 11:55pm.

Exercise 2: Animated Navigation & 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))
Create CSS class and apply so that images are not visible in the mobile layout.
Make that the background image is not visible in the mobile layout.
Navigation Design
Navigation - Summary for Large Screen
Create animated navigation structure using jQuery (see Creating jQuery animated image menus (7:45) and see example).
Incorporate this CSS file animated_nav.css and these JavaScript files: jquery-easing.js and jquery-easing-compatibility.js
Create your own images for UP and Over While UP for Audience, Task, Navigation and Functionality pages and DOWN and Over While DOWN for Summary page.
Example of PNG file with all the different needed images and you need to save as .jpg individual images by controlling which layers are visible and adhere to naming convention for images ("dw_one", "dw_two" etc).
(These video show you how to create and edit images to be used in an interactive navigation structure using Fireworks: Create Images for Different States of Navigation Categories in Fireworks (14:56) and Export Image for "UP", "Over", "DOWN" and "Over DOWN" (8:28)).
Navigation - Audience | Task | Navigation | Functionality for Large Screen
Use Spry Menu Bar you used on these pages in Exercise 1.
If you want to use the jQuery animated navigation on these pages then you need to create Up, UpOver, Down and DownOver images for all primary categories (20 images in total) and move the CSS rules that load the required images have to be moved to internal CSS so that it can be customized for each page to have the right images loaded.
Navigation for Mobile Device
Use lists and CSS to create the primary navigation (as discussed in CSS Navigation (7:34) in Week 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
Structure and format question & answer pairs so that they are surrounded by and "sit inside" a rounded border and have a pleasing background color.
Make sure that there are sufficient 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 9 = Fri Nov 1 by 11:55pm. (Revision is Due Sun Nov 24 by 11:55pm).

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.
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 Files 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 (in bold) and below the title and category of the embedded Gigapan, using a sans-serif font.
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 12 = Fri Nov 22 by 11:55pm.
Note: If you submit by Wed Nov 20, then you will be able to resubmit.
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 Nov 26 of class) and this report will serve as your "group contract" (see "Who Does What" 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 15 = Tuesday Dec 10 by 3pm
Meet 6:10-7:30pm on Dec 10 to review group prototypes – Attendance 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 x six 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 15 = Tuesday Dec 10 by 5pm
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 15 = Tuesday Dec 10 by 6pm