MM2213 Intermediate Web Design

MM2213 Intermediate Web Design

Session/Year: Winter 2009

Section/Meeting Time: Section A. 11 weeks. Wednesday, January 14, 2009 - Wednesday, March 25, 2009, 1 p.m. to 5 p.m., room 403. Punctuality is expected. Points are deducted for excessive (more than 2) tardies.

Course Prerequisites: MM2203 Introduction to Web Design

Required Textbooks:
"Bulletproof Web Design" by Dan Cederholm. New Riders Press; 2 edition (August 19, 2007). ISBN: 0-321-50902-1
http://www.simplebits.com/publications/bulletproof/

"Transcending CSS: the fine art of web design" by Andy Clarke. New Riders Press. Copyright © 2007. ISBN: 0-321-41097-1
http://www.transcendingcss.com/

Recommended Textbook:
"Dreamweaver CS3 Bible" by Joseph W. Lowery. (Wiley Publishing, Inc.) ©2007. ISBN: 9780470122.
"Cascading Style Sheets: The Definitive Guide" by Eric A. Meyer (O'Reilly), 2nd Edition. January 2004. ISBN: 0596005
"Eric Meyer on CSS: Mastering the Language of Web Design" by Eric A. Meyer (New Riders Publishing) Copyright 2002. ISBN:073571245x
"Website Optimization Speed, Search Engine & Conversion Rate Secrets" by Andrew B. King; July 2008.
ISBN 10: 0-596-51508-1 | ISBN 13: 9780596515089

Technology Needed: Access to a computer with an Internet connection and installed software. Storage media to save work.

Course Description:
An exploration of intermediate web editing techniques and production strategies for the development of comprehensive web sites.

Core Course Competencies:
Upon successful completion of this course, the student should be able to:

• Create and modify dynamic web assets.
• Implement local styles within html documents
• Create global Cascading Style Sheets for use throughout a website
• Apply site management strategies
• Effectively manage assets, templates, and libraries in website development.
• Develop proposal and production plan for comprehensive web site.

Download Microsoft Word version of syllabus

Top of page

Student Evaluation Methods of Assessment:

• Tardies, as well as attendance, will affect your grade.
• Class time will be spent in a productive manner.
• Grading will be done on a point system.
• Points for individual activities will be announced.
• All work must be received by the set deadlines.
• Late work, if accepted, receives partial credit. Please discuss any inability to meet the posted deadlines with your instructor.
• On-time projects may be redone with instructor approval.
• ABSOLUTELY NO WORK WILL BE ACCEPTED AFTER THE FINAL CLASS MEETS WEEK 11.

Instructor Name: Sharon Kaitner, M. Ed.

Instructor Contact Information: skaitner@aii.edu or Sharon@casabasa.com

Instructor Availability Outside of Class: Tuesdays at noon, room 015, or immediately following class. Please let me know if you need additional assistance. I may leave for lunch if no students appear (by 12:15).

Grading:

Grading Scale
25%	Professional Conduct: Class Attendance, Discussion, Participation and Teamwork
45%	Lab Assignments and Homework
15%	Midterm Project/Test
15%	Final Project
A	100-93		C	76-73
A-	92-90		C-	72-70
B+	89-87		D+	69-67
B	86-83		D	66-65
B-	82-80		F	64 or below
C+	79-77		Late work, if accepted, 50% or less

Back to the top

MM2213 Weekly Schedule

Top of page

Weeks: 1 2 3 4 5 6 7 8 9 10 11

Week 1: Wednesday, January 14, 2009

Complete the student survey. Review of the school’s emergency evacuation procedures.

Lecture: Web 2.0: review and discussion of the changes since the advent of the World Wide Web. Quiz.

Review web standards and creating for accessibility and usability. XHTML rules. SEO.

http://dean.edwards.name/weblog/2008/01/ie7-2/

Tuning IE7 for faster download: http://reliancepc.com/menu/tips/IE7tuning/index.php

Website page optimization: http://en.wikipedia.org/wiki/Search_engine_optimization

Good AdSense Hacks - tips to improve your Google AdSense

Lab: Practice designing from the Content Out.

In order to get a clearer idea of semantic naming conventions and to review semantic markup, take this web page and reconstruct it. Get rid of the table used for layout and replace with div tags (you may use Tables only for data.) Sematically name each div as demonstrated in class. Use Dreamweaver to validate the document to XHTML strict standards.

Homework:

Complete the lab exercise. Read Part 1 of Transcending CSS and Chapters 1 & 2 of Bulletproof Web Design. Quiz on reading next week. Read: http://www.sitepoint.com/article/liquid-design/

Extra credit: Find a CSS3 specification and implement it within the document, like text-transform or CSS drop shadow.

Useful links:

CSS ZenGarden

http://personalweb.about.com/od/basichtml/a/409xhtml.htm

http://en.wikipedia.org/wiki/Cascading_Style_Sheets

http://www.webteacher.ws/2008/02/15/attribute-selectors-in-css/

http://meyerweb.com/eric/articles/webrev/200006b.html

http://css.maxdesign.com.au/selectutorial/selectors_adjacent.htm

http://www.expertrating.com/courseware/CSSCourse/CSS-Pseudo-1.asp

http://abulletproofidea.com/?p=65 Semantic Naming Conventions from Bulletproof Web Design

http://microformats.org/

http://en.wikipedia.org/wiki/Microformats

http://www.addedbytes.com/cheat-sheets/microformats-cheat-sheet/

http://en.wikipedia.org/wiki/Search_engine_optimization

Week 2: Wednesday, January 21, 2009

Lecture: Document tree. Attribute selectors, child selectors, adjacent sibling selectors, pseudo-classes and pseudo-elements. Box model. Link specificity.

http://www.w3.org/TR/CSS21/conform.html#doctree - the document tree

http://www.w3.org/TR/CSS21/selector.html - selectors

CSS Selectors

Contextual selector		This type of selector is used when defining a tag nested within another tag. It gives you the ability to change the way a tag looks in context. The selectors are separated by spaces, not commas. ex: p strong {background: tan;} Above would put a tan background to an area defined to be bold, when it is within a paragraph tag.
Universal selector	*	Matches all elements ex: * {background:tan;} Everything would have a tan background, including descendents and children.
Child selector	>	This matches direct descendents. ex: body > p {color: #CCC;} Here, a paragraph within a div would be colored grey, but not if it is within a table or div
Adjacent-Sibling	+	This applies styles to elements based on the elements which immediately precede them ex: h1 p {background: tan;} Here, when a paragraph follows an h1 tag, it will have a background color of tan Finding adjacent selectors using a document tree

 

Lab: Deconstructing for Content Out: review of last week's homework. One persons reasoning for removing target="_blank", and what Jakob Nielsen has been saying since 1999. Only .pdf or non web links should use this, since they open an application. What do you think?

And Yet...http://www.webpagesthatsuck.com/biggest-web-design-mistakes-in-2004.html

Homework:

• Using the naming conventions from Transcending CSS, page 35, create an external css page linked to your own homepage. If you don't have one, you may use last week's assignment.
• Create a tutorial page on the Box Model. Be sure that a newbie would be able to understand the difference between content, padding, margin, and border areas.
• Read: http://meyerweb.com/eric/articles/webrev/200006a.html, http://meyerweb.com/eric/articles/webrev/200006b.html and http://meyerweb.com/eric/articles/webrev/200007a.html
• Float basics tutorial: http://css.maxdesign.com.au/floatutorial/introduction.htm

Helpful Links: http://www.subcide.com/tutorials/csslayout/index.aspx and http://www.pebbleroad.com/article/creating_maintaining_a_web_style_guide/

Section 508 tutorial: http://www.jimthatcher.com/webcourse1.htm

One of my favorite blogs, an article forwarded by Nick Dykzeul: http://www.alistapart.com/articles/brighterhorizonsforwebeducation

Extra credit: how can you get a row to align without resorting to tables?

Week 3: Wednesday, January 28, 2009

Lecture: Review of homework solutions and new CSS. Questions on layout and reading are discussed as a class. Semantic naming conventions and microformats. Section 508 review. Best Practices for Speeding Up Your Website: http://developer.yahoo.com/performance/rules.html

Lab: Swapping CSS exercise & critique. XHTML compounds. Creating navigation from lists. Chrome CSS Dropdown menu.

Important update for inserting Flash: Read Adobe's Technotes

Homework:

• Read this article on Web 2.0 style and be prepared to discuss next week.
• Read the 2nd section of Transcending CSS and chapters 3 & 4 of Bulletproof Web Design (2 weeks time but try to get through asap.)
• From the book, Bulletproof Web Design, create a scalable navigation.

Back to the top

Week 4: Wednesday, February 4, 2009

Lecture: Finding inspiration in unexpected places. CSSZenGarden is reviewed.

Lab: Designing with grids. Wireframes. CSS2.1 specifications. In groups of 3-4, read through the links below and discuss. Take the homework assignment of week 1 (or your own homework page) and redesign using the grid system. What is its visual hierarchy? How can you better lay out the information to aid in learning? Present ideas for discussion. Begin work on your midterm. Share thoughts and concerns with your group. Fitts' Law

Homework: Begin work on your midterm. Take your homework page and divide it into the following steps:

1. Gather your content (add anything more you want to present)
2. Wireframe - organize and present your content
3. Create the static design that demonstrate your layout ideas
4. Write the meaningful semantic markup to structure your content
5. Add the CSS to implement your design

Write in your blog about your process.

Helpful links:

• http://tutorialblog.org/grid-systems-in-web-design/
• Mark Boulton - 5 simple steps to designing with grids
• Smashing Magazine - Designing with grids
• Subtraction.com - Grids are good
• Ask Tog: http://www.asktog.com/basics/firstPrinciples.html#fittsLaw
• Web Style Guide (should be part of your library)

Week 5: Wednesday, February 11, 2009

Lecture: Practicing the process: implementing the static design with CSS. Working with navigation using lists. Fine art activities – taking the focus off technology.

Final project is discussed and roles assigned. Noel-Levitz survey to be administrated (about 40 minutes of your time.)

Lab: Lab time to meet with instructor and to work on Midterm: CSS Zen Garden submittal.

• CSS Styles: http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html

Homework: Complete midterm and submitt to CSSZenGarden. Email me a link to final project.

Helpful Links:

• Installing Word Press on your OLS by Travis Guilley
• So You Want To Create a WordPress Theme

Week 6: Wednesday, February 18, 2009

Lecture: Submitted midterm due. Everyone to submit code according to rules stated at CSSZenGarden.com. Transcendent CSS discussed. Best Practices for Speeding Up Your Website: http://developer.yahoo.com/performance/rules.html

Lab: Scheduled presentations of final project:

Create contract to include expected person-hours and the date work is expected to be completed for user-testing (Producer). Contract is due week 7; finished site for user-testing due week 10.

Instructional Designer and Content Editor begin work on Design Document, due week 8 with revisions completed by week 9. General target audience and client needs will be discussed.

Production team will present storyboard layouts of anticipated completed product, with the help of the Art Director.

Art Director will present wireframe sketches of overall page layout.

Technical Director will discuss anticipated technical challenges.

As a group, I expect you to answer these questions posed last week:

• What is the mission or general philosophy of this site?
• Describe its primary goals, services or products.
• Is there a tag line or slogan that can be incorporated within the general theme?
• How does this site differ from its competitors? What do you offer that will make you stand apart from the competition?
• List 2-3 similar organizations and describe their look and feel. Come up with at least one shortcoming that you will address within your design.
• List primary goal of design and what you hope to accomplish as a team.
• Who are your target audience? What do you wish for them to do with this site?
• How do you want this site to make the audience feel? How would you wish the site to be described?

Homework: Work on final project.

Back to the top

Week 7: Wednesday, February 25, 2009

Lecture: Contracts, managing a client. The design document process.

Contracts:

• http://www.wilsonweb.com/worksheet/pkg-con.htm
• http://www.ecommerceattorney.com/webcontract.html
• http://www.allgraphicdesign.com/graphicdesign-contractsforms.html
• http://provider.com/contracts.htm

Other Forms:

• Model Release: http://www.dpcorner.com/all_about/releases.shtml
• Model Release: http://www.baja.com/sensuousline/sline0799/mag4-6model_releases.shtml
• Sample Business Plans: http://www.bplans.com/sample_business_plans/all_plans.cfm
• A sample business plan can be found starting on page 397 of book. You can also download from www.creativebusiness.com/bizbook.html.
• Sample Business Plans: http://www.bulletproofbizplans.com/bpsample/Sample_Plan/sample_plan.html
• Miscellaneous Forms: http://www.creativebusiness.com/forms.lasso

Design Documentation:

• http://cat.xula.edu/tutorials/planning/designdoc
• http://www.kaitiaki.org.nz/matou/web-des.shtml
• http://www.library.cornell.edu/design/dsigndoc.html
• http://en.wikipedia.org/wiki/Web_design
• http://www.lindajiang.net/document.php
• http://www.rit.edu/~jet5229/409/final/designdoc.html

Estimating Timelines:

• http://www.publicaffairs.uiuc.edu/web/projectmanage/estimates.html

Lab: Scheduled presentations:

Design comps and layout due (Art Director) for approval. If any revisions are necessary, due week 8. These will be prepared both on an 11"x17" board and via Photoshop layers.

Rough of technical plan to include technical issues, page size targets and planned tools due (Technical Director). Work with Content Editor to develop site directory structure.

Homework: Work on final project.

Week 8: Wednesday, March 4, 2009

Lecture: Backend Production

Lab: Post to one url (emailed to me!) the following homework due information:

Production team will present list of assets, with project 70% completed. Expected will be navbar, template and any library and/or includes built.

Content Editor will present XHTML layout, semantic naming conventions and content for all main pages.

Art Director will present logo design and navigation icons for approval.

Technical Director will present for final approval navigation design, naming conventions, and revision naming conventions and assignments.

Box model. Creative floating. Fluid and elastic layouts. Time management in site design.

Elastic layout using floats and percentages:

 

Homework: Continue work on final project.

Week 9: Wednesday, March 11, 2009

Lecture: Putting it all together. Working with Captivate. Business Plans. http://www.d.umn.edu/~jvileta/businessplans.html. Getting your clients to pay: http://www.emilycohen.com/articles.html

Lab: Scheduled presentations: Completed Design Document due.

Content Editor and Instructional Designer present completed Design Documents: Target Audience, Project Scope, cited resources and research, flowchart, information design and flow, inventory of content and media used, and complete user persona.

Producer presents state of project.

Homework: Work on final project. As a team, decide what user-testing you will present for testing on your audience. To be presented next week. One more article on contracts, from the SWAP user group.

Interesting Links (CSS):

• Rendering Modes: http://www.ericmeyeroncss.com/bonus/render-mode.html
• Hide your CSS from certain browsers: http://w3development.de/css/hide_css_from_browsers/summary/ and http://www.ericmeyeroncss.com/bonus/trick-hide.html
• On printing: http://www.alistapart.com/articles/alaprintstyles
• Doctype switching: http://gutfeldt.ch/matthias/articles/doctypeswitch.html

Back to the top

Week 10: Wednesday, March 18, 2009

Lecture: Alternative interactivity. Javascript.

Lab: Presentations and in-class critiques. You will present your final project to the class. Speak about technical, design and creative challenges. Test your design on different browsers: http://browsershots.org/ from our own John Johnson.

Production team presents finished project for user testing. Class critique using this rubric follows, with revisions due week 11.

Homework: Continue work on final project.

Week 11: Wednesday, March 24, 2009

Lecture: [Final Exam]

Lab: Presentation of final project and evaluations.

Homework: None.

Back to the top

Student Information

Click on this individual score link to access scoring information on your completed projects.  Enter your name and id (password) exactly as you provided in the student survey.

I upgrade my grades every Sunday, usually no later than 2 p.m. I may update points for work received after this time, but before 7 p.m. only.

If there are any questions at all, please feel free to email me. I usually respond the same day and sometimes immediately, or at least within the hour.

If you have any problems, email me.

ID	T	Abs	Final Grade
273331	0	0	89.0%	B+
150641	0	0	87.0%	B+
1396	0	2	84.0%	B
272	2	2	82.0%	B-

Back to the top

Winter 2009

Student Web Information

 

 

 

---

Past Students ~

Summer 2008 Final Project: Project Manager, Lauren Merka

Don't Get Frank'd: http://dgfed.xyentific.com/
Adam Kirkwood- Art director
Isabel Gonzales -Content editor
Philip Ybay-Production team
Rizal Dinglasan -Production Team
Paul Marinko-Wild Card
Jacob Morgan -Instructional Designer
Michael Sam-Technical Director

AI Student Orientation: http://nlw371.aisites.com/final/
Cyrus Evanado- Art director
Gary Lovely -Content editor
Martin Figueroa -Production team
Danny Robbins -Production Team
John Johnson -Wild Card
Kristina Snell-Instructional Designer
Nick Wogberg-Technical Director

Back to the top

Summer 2008

Student		Website & Blog Don't Get Frank'd: http://dgfed.xyentific.com/ AI Student Orientation: http://nlw371.aisites.com/final/
kristina snell		website | blog CSSZenGarden submit
Philip Ybay		website | blog CSSZenGarden submit
paul marinko		website | blog | tutorials CSSZenGarden submit
Nick Wogberg		website | blog CSSZenGarden submit
Adam Kirkwood		website | blog CSSZenGarden submit
Lauren Merka		website | blog CSSZenGarden submit
Isabel Gonzales		website | blog CSSZenGarden submit
Rizal Dinglasan		website | blog CSSZenGarden submit
Cyrus Evanado		website | blog CSSZenGarden submit
Martin Figueroa		website | blog CSSZenGarden submit
Michael Sam		website | blog CSSZenGarden submit
Jacob Morgan		website | blog CSSZenGarden submit
Gary Lovely		website | blog CSSZenGarden submit
Danny Robbins		website | blog CSSZenGarden submit
John 'The Johnson' Johnson		website | blog CSSZenGarden submit