Casa Basa ˜ blending art with technology

Syllabus

Course Description: An exploration of the process of web design from proposal to production. Students design and produce web sites with web editing software.

Download the Word version of your syllabus here

Course Length: Summer 2010. Section A, 11 weeks. Tuesday, July 13, 2010 to Tuesday, September 16, 2010, from 8 a.m. – 12 noon, Room 309. Punctuality and attendance is expected. Points are deducted for excessive (more than 3) tardies.

Course Prerequisites: MM1123 Fundamentals of Web-based Programming

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

• Design layouts for a web page.
• Successfully convert Pantone colors into web colors.
• Develop logically-structured web pages in Dreamweaver or similar program.
• Identify the essential elements of successful page navigation.
• Create workable links between portions of a page.
• Animate graphical content.
• Construct a form document.

Required Texts: 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

Materials and Supplies: Storage drive, notepad and pencil or pen

Estimated Homework Hours: 4 Hours per week

Technology Needed: Access to necessary software and hardware to complete required assignments.

Process for Evaluation:       
Attendance and Participation                                                                                      25%
Assignments and Exercises                                                                                        45%
Mid-Term Project/Examination                                                                                    15%
Final Project/Examination                                                                                           15%

Top of page

List of lectures and labs

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

Students should check this section weekly prior to class. Updated lectures, homework, and points are listed below. Feel free to email me at sharon@casabasa.com if you have any questions.

Week 1: Tuesday, July 13, 2010

Please complete my student survey.

Lecture:

• Back-to-basics: A review of web page development
  • best practices
  • XHTML
  • Web graphics
  • CSS
  • JavaScript
  • Web 2.0
• about div, span, id and class

Lab: Creating layouts for web pages. Inspiration web sites: Example 1 and Example 2 are discussed and the mechanics broken down. Creating a blog: students sign up for WordPress or Blogger, or create blog section in personal website. Web Style Guide, the web page layout. Wireframe - organize and present your content. The Gestalt principles

Homework: Research interesting ideas for your homework page and sketch two examples. Must be paper and pencil. Scan image then use Photoshop to block out content via grids. Print this version and, again using pencil, note navigation, technology, purpose, etc. on this image. Scan and upload to blog. Email me the url.

Create a timeline and/or schedule for your homework assignments and post to your blog.

• 

Week 2: Tuesday, July 20, 2010

Lecture: Flexible text: setting a base font; using keywords and percentages. Creating an external stylesheet using Dreamweaver. Process, design & color schemes. Elements of design.

Lab:

How to Convert Rgb to Pantone in Photoshop | eHow.com tutorial and Pantone conversion chart. Review of student designs and critique. Sample layouts are blocked out for coding: semantic markup and standards based. Box model is reviewed.

• Box Model
• Selectors review: extending .css to get the results you want
• Creating CSS @media. Different style sheets for different users. example We will create a print and small screen style sheets.

Homework:

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. Post to blog. Due week 4.

Color practice: on this same blog, list 3 pantone colors and their RGB equivalent. Should relate to your layout. Due beginning class next week.

Read Chapter 1 of Bulletproof Web Design and create the same stylesheet using Ems (page 22). Link on your blog. Due beginning class next week.

 

Week 3: Tuesday, July 27, 2010

Coding and the structure: what are Web Standards? Today we discuss creating pages usable by all.

I have an existential map. It has "you are here" written all over it.
- Steven Wright

Lecture:

• Web standards - accessibility and usability. Standards 508
• http://css-tricks.com/what-beautiful-html-code-looks-like/ - with a big thank you to Franky for this link.

Lab: Creating scalable navigation that is accessible by browsers, smart devices and assistive learning software.

Subcide Tutorial: http://www.subcide.com/articles/creating-a-css-layout-from-scratch/

• Homework:
  • Converting tables to divs - separating content from style. Deconstructing a page: Take this web page and reconstruct it using an embedded style sheet. You don't have to use all content, but enough to show your work. Your guidelines will be chapter 3 of the book called "Expandable Rows". As a goal, try to use as few div's as possible. Discuss on your blog and provide a link to the finished page. [Note: embed your .css on the page. Do not link as an external stylesheet. I want to see your work displayed with the .xhtml.]

Week 4: Tuesday, August 3, 2010

Lecture: Discussion and critique of tables to divs exercise. Creating a template in Dreamweaver. Essential parts of a web page are discussed, blocked out visually, then created as templates and assets in Dreamweaver.

Lab: in class assignment - how do you get inspired? Students brainstorm various ways to get creative. Mind map drawn on board.

• Creating a CSS site using built in Dreamweaver templates
• http://www.webreference.com/authoring/style/sheets/layout/advanced/
• step-by-step Dreamweaver and CSS palettes

Homework:

• Read Chapter 4 "Creative Floating" of Bulletproof Web Design, do the exercise, and toggle the float direction (page 102). Post link to blog.

Extra credit: Write one style that combines selectors (compound selector) to save code. Post to blog.

Write in your blogs your best advice for getting creative.

Week 5: Tuesday, August 10, 2010

 

[Midterm] in class quiz

Lecture: Stylesheets: Using stylesheets to make your site more flexible. Print, smartphones css.

Lab: http://tomw.net.au/2006/wd/smartphone.shtml. A world without stylesheets? We will view and discuss various web pages online, while turning stylesheets on and off.

Homework:

• Read chapters 5 and 6 of the book and create a page using elements of both. Use can use CSS3 to create your rounded corners but make sure your layout uses "Indestructible Boxes" and can pass the 10-second usability test. This is your [take home midterm] and is due beginning of next class.

Week 6: Tuesday, August 17, 2010

Lecture: Chapter 6 of Bulletproof Web Design "Fluid and Elastic Layouts". Discussion of user-experience with a web page. http://developer.yahoo.com/performance/rules.html and the sad story of IE6.

Lab: Creating a web page and linking to an external stylesheet using Dreamweaver. Practice using your tools.

Homework:

• Create a possible portfolio home page using chapter 9 "Putting It All Together" as a source. This is due week 8 at the beginning of class.

Back to the top

Week 7: Tuesday, August 24, 2010

Lecture:

• Field trip TBD

Lab: Blog by end of day (any time after will be subjected to point reduction) your answers to these three questions: "what did you learn as an artist?" "how can you apply the use of signage within the exhibits to navigation within your website?" "what were the three colors (listed in hexadecimal numbers) of the day?"

• Homework:
  • Continue work on possible portfolio page, chapter 9. Blog its target audience and design objective. This blog (as opposed to the lab above that is due today) is due by beginning of next class.

 

Week 8: Tuesday, August 31, 2010

Lecture: CSS Zen Garden (final project). Design list.

• Testing your site. https://browserlab.adobe.com/index.htm.

Lab: Labtime to begin work on your final project, re-creating and submitting a project to CSS Zen Garden.

Homework:

• Create wireframe of final project and post to blog.

 

Week 9: Tuesday, September 7, 2010

Lecture:

• Animation
• http://960.gs/
• http://www.456bereastreet.com/archive/200601/css_3_selectors_explained/

Lab:

• Discussion of projects, and what you need for successful completion. Web animation is inserted into your blog. ;-)

Homework:

• Work on final project. Blog how you are creating your project to stand out from all the other submissions. Reflect on how you might use the allowed .css code to give a different look to your page. How can you incorporate what you've learned from Bulletproof Web Design?

Week 10: Tuesday, September 14, 2010

Lecture:

• Documenting your project.

Lab: html 5 introduction and discussion

Homework:

• Work on project. Create a blog posting that is a sample of a possible process page for your final project. Include screenshots and images. How would you present to potential employers to demonstrate your knowledge? Email me once you have blogged.

 

Week 11: Tuesday, September 21, 2010

Presentation and Critiques

Lecture:

• Formal presentation and critique of Student Projects.

Lab:

• final quiz

Homework:

• none

How you are graded and points assigned:

Points are given for completion of certain tasks, including your portfolio and process book. Grading rubric - this is the worksheet that I use to grade your final project. It is a combination of this and individual assignments, attendance and participation that equals your grade.

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. The remainder 10% is given for posts that you make to your production log.

Assignments and homework are graded by points for a total of 45% of your grade. Usually the homework is to demonstrate skill, or as a check of knowledge, or to encourage exploration and higher level of thinking. In this course, 25 points are awarded for several smaller projects like creating a preloader, or doing research. The remaining 20% is your final project, as it will demonstrate your understanding of the class and its goals.

Midterm and Final tests and presentations are a combination of tests and projects. The midterm test is a check for knowledge on both our parts. The final test demonstrates your hard work, skill and knowledge gained in this class. Because this class produces a final project, part of that demonstration includes using the software, xhtml, css and web graphics, and part of that demonstration is the actual final project, your portfolio. These items total 30% of your grade.

Class Standings

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	Standings
130259	0	0	18.1%
333873	0	0	17.0%
350907	0	0	15.0%
xxxx	0	0	13.0%
323327	0	0	13.0%
303562	0	0	12.6%
344271	1	0	11.7%
344141	0	0	11.7%
348353	1	0	11.5%
861	0	0	11.4%
206176	0	0	11.0%
517	0	0	10.5%
298159	0	0	10.3%
332727	0	0	10.0%