Week 15
12/17
Final exhibition of your work. Class discussion, critique and celebration of your new found powers to build anything you can dream, on the web.
Homework
Final Assessment: You will have an extra 5 days to complete all of your assignments.
Have a great NEW YEAR!!
Class Evaluation
- 15 minutes to fill out the course evaluation.
Materials
Additional materials for this unit can be found by following these links:
Goal
The goal of this unit is to:
- provide each student with the time to exhibit their work to the rest of the class.
- receive feedback from everyone.
- to celebrate that you have learned a new and imminently usable skill and now belong to the modern world wide web culture.
Outcomes
At the end of this unit, students will have:
- spent about ten minutes each presenting their final assignment.
- expressed the UX and IA decisions that went into the project
- explained the problems they set out to solve
- show the way that they tackled those problems.
- used the work-sheets to help present and express themselves.
Final Assignment Links
Updated links that I expect to be up and live as they will be graded for your final grade.
| Date Due | Percent | |
|---|---|---|
| 2/7/14 | Website Analysis | 5% |
| 2/14/14 | Midterm Worksheet | 5% |
| 2/14/14 | HTML markup | 5% |
| 2/21/14 | PhotoShop Comp | 5% |
| 2/28/14 | CSS selections | 5% |
| 3/7/14 | CSS Layout Strategies | 5% |
| 3/21/14 | Typography Poster | 5% |
| 3/14/14 | Portfolio: Midterm | 10% |
| 3/7/14 | class Presentation | 5% |
| 3/7/14 | Quiz: | |
| 4/4/14 | Final: Worksheet | 5% |
| 4/4/14 | Responsive Redesign of Portfolio | 5% |
| 4/11/14 | CSS3 Collateral | 5% |
| 4/18/14 | CSS3 Animatic | 5% |
| 4/25/14 | Final: Modular Navigation | 5% |
| 5/2/14 | HTML5 Multimedia | 5% |
| 5/9/14 | Final: User Testing | 5% |
| 5/9/14 | Final: Peer Review | 5% |
| 5/9/14 | Forms | 5% |
| 5/16/14 | WordPress CMS | 5% |
| 5/16/14 | Final: Presentation | 10% |
Each assignment exhibits a skill. If you have used that skill in building your portfolio, link to that page and explain how it satisfies the homework. For example, for Week 11 CSS Animatics, if you used a hover that fades in your final, point to a page that exhibits that and let me know to look for if it is not completely obvious.
The final website sells something. It does not have to be lots of pages, but the quality has to be ready for public scrutiny. It should have many of the assessable tasks we’ve covered in the course, like CSS3, Multimedia, PHP, forms media queries, etc.
Use the peer review criteria to make sure everything is as it should be. I will use that criteria to grade your final, and can take off for every aspect that does not meet expectations.
Final Grade Calculation
The final grade adds up to a possible 110%, allowing some leeway in the satisfactory completion of all assignments, as long as the student attends and participates in class. 3 Absences are ground for Failure.
* Does not require coding. No Late Assignments accepted.
Send me a zipped version of your final project before the due day, 5 days after the last class.
Grade calculation:
| Date Due | Percent | |
|---|---|---|
| 2/6/15 | Website Analysis* | 5% |
| 2/13/15 | Landing Page | 5% |
| 2/13/15 | HTML markup of Analysis | 5% |
| 2/20/15 | 7 Steps — Midterm Worksheet* | 5% |
| 2/27/15 | CSS selections | 5% |
| 2/27/15 | Photoshop comp/ HTML Wire Frame | 5% |
| First Quarter Assessment | ||
| 2/27/15 | incorporate CSS Layout Strategies in web site | 5% |
| 2/27/15 | Quiz: | |
| 3/6/15 | Peer Review | 5% |
| Official Midterm Review | ||
| 3/13/15 | Typography Poster | 5% |
| 3/13/15 | Portfolio: Midterm | 10% |
| 3/13/15 | class Presentation | 5% |
| Second Quarter Assessment | ||
| 3/20/15 | Final: Worksheet* | 5% |
| 4/3/15 | Responsive Redesign of Portfolio | 5% |
| 4/10/15 | CSS3 Collateral | 5% |
| 4/17/15 | CSS3 Animatic | 5% |
| 4/24/15 | Final: Modular Navigation | 5% |
| Third Quarter Assessment | ||
| 5/1/15 | HTML5 Multimedia | 5% |
| 5/8/15 | Final: Peer Review | 5% |
| 5/8/15 | Forms | 5% |
| 5/15/15 | WordPress CMS | 5% |
| 15/15/15 | Final: Presentation | 5% |
| Final Quarter Assessment | ||
| Two assignments dropped: | -10% | |
| Total: | 100% |
Grading Criteria
- Grading is to determine how well you succeeded in satisfying the requirements for each assessable task. You either failed to meet the requirements, met the requirements or exceeded the requirements.
- The assessable tasks have a life of their own, meaning that how well you do one or another task does not always correspond with the final grade that you receive, as a lot of factors go into the final grade. Generally speaking, however, it is better to exceed expectations than to fail to meet them.
- Some tasks are clearly assessable, like the technical merits of your work. How semantic and well formed is the markup? Did you use selectors effectively? Does your code validate?
- Other tasks have more wiggle room. The quality of your communication, how well you address your target audience, design decisions or the content you chose to show in your portfolio.
- For these tasks, the work-sheet becomes important in revealing your thought process. How did you approach your creative work? Did you assess the problems rationally? Does your response and solution to solving these problems show creative problem solving?
- Some tasks are clearly defined. Others are not so clear. In each case, I will be grading you on levels of confidence, consistency, creativity, innovation, precision, accuracy, efficiency and the ingenuity by which you are able to solve the problems.
Assessable Tasks
Assessable tasks are those core tasks required to create modern web design.
| Tasks / Activities | Date | Requirements/Indicators |
|---|---|---|
| Marking-up Content | Week 2 | Is the markup valid and semantically correct HTML5? |
| Styling the Content | Week 4 | Is the CSS valid, clean, and using structural selectors when possible? Are various layout strategies used to construct the pages? |
| Constructing the Portfolio Site | Week 6 | Information Architecture Is the site logically laid out? Is it SEO friendly? Is it tracked using Google Analytics? |
| Is the web site Future Proof? | Week 8 | Is the website responsive to a change in viewport size, from an iPhone to the standard web browser? |
| Explore CSS3 and HTML5 | Week 9-11 | Are CSS3 & HTML5 being used to create the final website? |
| Modularity and Interactivity | Week 12-14 | Are PHP and Javascript being used in the final website? |
| Forms | Week 12-14 | Are forms being used in the final website? |
Assessable Tasks Rubric
Assessable tasks are those core tasks required to create modern web design.
| Tasks / Activities | has not met expectations | just met expectations | met expectations | surpassed expectations |
|---|---|---|---|---|
| Marking-up Content | ||||
| Is the markup valid? | ||||
| Semantically Correct HTML5? | ||||
| Styling the Content | ||||
| Is the CSS valid? | ||||
| Is the CSS clean? | ||||
| Structural Selectors? | ||||
| Effective use of Layout Strategies | ||||
| Constructing the Portfolio Site | ||||
| Information Architecture | ||||
| SEO | ||||
| Google Analytics | ||||
| Is the web site Future Proof? | ||||
| Media Queries | ||||
| Responsive Design | ||||
| Explore CSS3 and HTML5 | ||||
| CSS3 basics | ||||
| CSS3 advanced | ||||
| HTML5 Canvas | ||||
| HTML5 Video | ||||
| Modularity and Interactivity | ||||
| PHP | ||||
| Javascript | ||||
| Forms |
Definitions
These are the general criteria that The Webby Awards use to evaluate web sites. You should be familiar with them.
- Content
- Content is the information provided on the site. It is not just text, but music, sound, animation, or video — anything that communicates a sites body of knowledge. Good content should be engaging, relevant, and appropriate for the audience. You can tell it’s been developed for the Web because it’s clear and concise and it works in the medium. Good content takes a stand. It has a voice, a point of view. It may be informative, useful, or funny but it always leaves you wanting more.
- Structure and Navigation
- Structure and navigation refers to the framework of a site, the organization of content, the prioritization of information, and the method in which you move through the site. Sites with good structure and navigation are consistent, intuitive and transparent. They allow you to form a mental model of the information provided, where to find things, and what to expect when you click. Good navigation gets you where you want to go quickly and offers easy access to the breadth and depth of the site’s content.
- Visual Design
- Visual design is the appearance of the site. It’s more than just a pretty homepage and it doesn’t have to be cutting edge or trendy. Good visual design is high quality, appropriate, and relevant for the audience and the message it is supporting. It communicates a visual experience and may even take your breath away.
- Functionality
- Functionality is the use of technology on the site. Good functionality means the site works well. It loads quickly, has live links, and any new technology used is functional and relevant for the intended audience. The site should work cross-platform and be browser independent. Highly functional sites anticipate the diversity of user requirements from file size, to file format and download speed. The most functional sites also take into consideration those with special access needs. Good functionality makes the experience center stage and the technology invisible.
- Interactivity
- Interactivity is the way that a site allows you to do something. Good interactivity is more than a rollover or choosing what to click on next; it allows you, as a user, to give and receive. It insists that you participate, not spectate.
- It’s input/output, as in searches, chat rooms, e-commerce and gaming or notification agents, peer-to-peer applications and real-time feedback. It’s make your own, distribute your own, or speak your mind so others can see, hear or respond. Interactive elements are what separates the Web from other media. Their inclusion should make it clear that you aren’t reading a magazine or watching TV anymore.
- Overall Experience
- Demonstrating that sites are frequently more — or less than the sum of their parts, the overall experience encompasses content, structure and navigation, visual design, functionality, and interactivity, but it also includes the intangibles that make one stay or leave. One has probably had a good overall experience if (s)he comes back regularly, places a bookmark, signs up for a newsletter, participates, emails the site to a friend, or stays for a while, intrigued.