Casa Basa ˜ blending art with technology
MM2213 Intermediate Web Design
Course Description: this course is an exploration of intermediate Web editing techniques and production strategies for the development of comprehensive Web sites.
Course Length: s 2010. Section A, 11 weeks. Wednesday, April 7, 2010 to Wednesday, June 16, 2010, from 1 p.m. – 5 p.m., Room 309. Punctuality is expected. Points are deducted for excessive (more than 2) tardies.
Course Prerequisites: MM2203 Introduction to Web Design
Course Competencies:
Upon successful completion of this course, the student should be able to:
Download Microsoft Word version of syllabus
Required text: Bulletproof Web Design: Improving flexibility and protecting against worst-case scenarios with XHTML and CSS, 2nd Edition. Published Aug 9, 2007 by New Riders. Part of the Voices That Matter series. ISBN-10: 0-321-50902-1
Week 1: Wednesday, April 7, 2010
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.
Review web standards and creating for accessibility and usability. XHTML rules. SEO.
http://dean.edwards.name/weblog/2008/01/ie7-2/
Website page optimization: http://en.wikipedia.org/wiki/Search_engine_optimization
Good AdSense Hacks - tips to improve your Google AdSense
Lab: Teams are selected to create group site. Potential web sites are discussed and narrowed to two choices. Research competition and target audience. Download and read on by the authors of Transcendent CSS. http://www.friendsofed.com/samples/1590598032.pdf
Final project is discussed and roles assigned. Noel-Levitz survey to be administrated (about 40 minutes of your time.)
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
| 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 |
Lab: Discussion of homework, in teams. First draft of design document is uploaded to team website. Work on second chapter of .pdf
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
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: Web assignments are finalized. Begin wireframes of proposed site. Presentation next week.
Lecture: Designing with grids. Wireframes. CSS2.1 specifications. Finding inspiration in unexpected places. Web site favorites ares reviewed and discussed.
Lab: in class assignment - how do you get inspired? Students brainstorm various ways to get creative. Mind map drawn on board.
You must email me today that you have attended or you will be marked absent.
I will go to the school to make sure you all received the message and are attending or working. Be sure to see what's available here: http://www.web2expo.com/webexsf2010/public/content/free, especially the sessions. And don't forget to network and absorb the experience.
Lecture: Be sure you have pre-registered: http://www.web2expo.com for the Expo Hall Only pass ($100). Enter the code "fb101" or "expopass" and you will get that free, plus be emailed a code. Bring the code to the Expo at Moscone Center and enter at one of the computers you see (follow the signs.) Attend keynotes, sessions, the expo -
Lab: Document the experience in your blog or web site. Include pictures (with you in at least one). Make me glad you went to this field trip. Read http://www.myinkblog.com/2010/02/22/5-reasons-why-i-love-being-a-web-designer/
Lecture: [in-class] Chapter 3 of Bulletproof Web Design. Do exercise and upload to homework site, under title "Creative Floating". Website: http://developer.yahoo.com/performance/rules.html and the sad story of IE6.
Lab: Scheduled presentations of project, Taylor Holst will present on writing a successful contract.
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?
Exploring HTML 5.0: In 2004, Apple, Mozilla, and Opera formed the Web Hypertext Application Technology Working Group (WHATWG) to improve HTML, dubbing it HTML 5. The language of the web is changing again, taking a more interactive approach: web sites as apps vs web docs. How can we extend sites with client-side applications? Part of this derives from HTML5's use of offline storage. Using session storage objects, large amounts of information can be stored locally, and instead of a web site being thought of as a collection of documents, it adds the ability of storing large amounts of information, by storing key-value pairs that can have any value locally. A session gets a temporary storage object, and a site will receive a more permanent one. (information in large part from the author, David Chisnall). For your consideration: since these sessions include the ability to interact across multiple tabs, the idea of a single web page is now evolving.
HTML5 vs Flash? Largely because some of the tags in html 5 overlap in functionality, like <canvas>, there is much discussion on whether html 5 will be a Flash killer. Largely, it gives a lot of the lower level drawing/scripting of Flash, but will not replace what Flash does best, in its higher uses.
http://www.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/
From the W3C specifications:
"The following areas / features defined in HTML5 are believed to impact the Web architecture:
- The use of the DOM as a basis for defining the language.
- The concept of browsing contexts.
- The distinction between user agent requirements and authoring requirements.
- The use of imperative definitions rather than abstract definitions with the requirement of black-box equivalence in implementations.
- The new content model concepts (replacing HTML4's block and inline concepts).
- The focus on accessibility as a built-in concept for new features (such as the hidden attribute, the progress element, et cetera) instead of an add-on (like the alt attribute).
- The focus on defining the semantics in detail (e.g. the outline algorithm, replacing the vague semantics in HTML4).
- The menu and command elements.
- The origin concept.
- Offline Web application caches.
- The definition of the browsing context "navigation" algorithm and the related session history traversal algorithms.
- The content-type sniffing and character encoding sniffing.
- The very explicit definition of a parser.
- The contentEditable feature and the UndoManager feature.
- The Drag and Drop and Copy and Paste architecture.
- The new sandboxing features for iframe."
http://www.gamehousefusion.com/
Lecture: Guest educator, Bonnie O'Neill
Scheduled presentation by Taylor Holst will present on writing a successful contract.
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.
Lab:
Please meet in your groups and assess your project to date. Has a timeline been followed (set by project manager)? Are assigned roles followed? Is work shared equally? Now is the time to decide if this group is working or if changes need to be made. Learning to address problems, deal with them, and move on is part of the group process. Each person will be graded separately. Here is the grading rubric I will use for the final project.
Lecture: Backend Production. Group time. Time line is updated and status given. Chapter 6 of Bulletproof Web Design, and "No images? No CSS? No Problem!" Chapter 7 "Convertible Boxes"
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:
<div style="float:left; width:45%; padding:2px;">
some info
</div>
<div style="float:left; width:5px;"> </div>
<div style="float:left; width:45%; padding:2px;">
some info
</div>
Lecture: Style guides. 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.
Lecture: Client meeting and approval
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.
Lecture: [Final Exam]
Lab: Presentation of final project and evaluations.
Homework:
Complete chapter 4 - Download and read by the authors of Transcendent CSS.. Upload completed work, under title "Web Standards Creativity, pt. 1". Send homework url to me. http://www.friendsofed.com/samples/1590598032.pdf
Extra credit: Find a CSS3 specification and implement it within the document, like text-transform or CSS drop shadow.
For groups:
Gather your content (add anything more you want to present)
For individuals: Read Chapter 2 of Bulletproof Web Design. Do exercise and upload to homework site, under title "Scalable Navigation".
Write in your blogs your reaction to today's lab exercise.
It will be your option to share with class.
Criteria by which you and your projects are graded for this course. Please see me if you have any questions.
Attendance and Class Participation Policy - Attendance and class participation are 25% of the final grade for the course. Students will be expected to attend class as well as act as active participants in class lectures. This is worth 10% of your overall grade. 5% is awarded for perfect attendance, recognizing that you cannot learn if you do not attend, and how difficult it is to do. This is a sign of excellence.
Assignments and homework are graded by points for a total of 45% of your grade.
- 35% homework assignments, completing assigned tutorials
- 10% will be in-class presentations
Tests are a check for knowledge on both our parts. This is worth 30%, and is divided between your final project and its documentation.
Final Project Requirements:
Score weight: 10%
Design documentation: wireframes, mood board, style guide, declaration of audience, objective, research (written documentation) and creation of separate documents section of site.
Site Development
Attention to information architecture design. Use of Web graphics and icons in visual design. Scripts properly externalized. Appropriateness for target audience.
Criteria
Create some kind of interactive media or tool for the site. It must be well constructed and follow the Section 508 recommendations. Use must clearly demonstrate appropriateness for your site.
Criteria
5 points: included, appropriate to theme, without bugs, adherence to Web standards (2 pts)
Logging into your personal grade
Please remember that the software I use only talles total points of a possible 100. You will not see the grade of "F" change until you are way into the quarter, somewhere around week 8 or 9.
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.
Your class standings listed below are meant to show how you compare, on average, with your fellow classmates. Items influencing your points include attendance, active participation, and timely (and accurate!) homework received. Plus your grades on tests and the final project.
Project Manager, both teams: Kevin Mann
A-Team: Royal Silk Catering
Mark Bugay, Art Director
Jen Van der Henst, Content Editor and Client Liaison
Scott Cooksey, Instructional Designer
Joanne Frijas, Production Developer
Ryan Conrad, Production Developer
Adriana Nottestad, Technical Director
Design documentation (.pdf) on Royal Silk Catering
BInteractive: Bistro 10UN
Chris Haines, Technical Director (technical documents)
Meredith Picerno, Content Editor
Max Harris, Development Team
Keely Graham, Development Team
Taylor Holst, Art Director
Sandeep Malireddy, Instructional Designer
Design documentation (.pdf) on Bistro 10UN
Student class standings (yes, really this time!)
| ID | T | Abs | Final Grade | |
| 351490 | 0 | 0 | 100.0% | A+ |
| 354303 | 0 | 0 | 98.5% | A+ |
| 123 | 0 | 0 | 98.0% | A+ |
| 282436 | 0 | 0 | 97.5% | A+ |
| 354462 | 0 | 0 | 96.0% | A |
| 284504 | 1 | 0 | 94.0% | A |
| 286756 | 1 | 0 | 93.5% | A |
| 287614 | 0 | 0 | 90.5% | A- |
| 314226 | 0 | 2 | 84.0% | B |
| 110842 | 0 | 1 | 79.0% | C+ |
| 254512 | 0 | 0 | 74.3% | C |
| 346840 | 2 | 1 | 74.0% | C |
| 347153 | 0 | 1 | 71.0% | C- |
Useful Links:
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://en.wikipedia.org/wiki/Microformats
http://www.addedbytes.com/cheat-sheets/microformats-cheat-sheet/
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
Helpful Links:
Helpful Links:
Helpful Links: About HTML 5.0 (a history from the beginning of web documents)
How To Make Money with Free Software by David Chisnall
Contracts:
Other Forms:
Design Documentation:
Estimating Timelines:
Links of Interest:
Interesting Links (CSS):
www.casabasa.com | email me sharon{at}casabasa.com | © copyright 1999-2010 | date last revised:
June 17, 2010
