Casa Basa ˜ blending art with technology

Week 1: Tuesday January 10, 2012

Complete the student survey.

Lecture: Creating layouts for web pages. What kind of sites do you do? We will look at inspiration web sites: Example 1 and Example 2 and discuss the mechanics. Web Style Guide, the web page layout.

How to Wireframe and organize and present your content is discussed.

The Gestalt principles as they pertain to web design is reviewed.

Lab:

Back-to-basics: A review of web page development. Creating a css sheet from scratch.

Create a blog for your homework. Each week you will post to this site. For full credit, give me this address before you leave class today.

Homework:

Read chapter 1 of text, The CSS3 Lowdown, paying special attention to the Case Study. Then submit your current site to http://www.websiteoptimization.com/services/analyze/. Improve some quality of your site that will decrease your page upload time. Blog results of before and after.

Useful links:

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

http://dribbble.com/

• Smashing Magazine
• mastering-css-styling-design-elements/
• The perfect 3-col layout
• 45 step by step web designs with Photoshop
• Simplicity in Good Web Design (thanks, Franky!)
• What Copyright Means for your Website: http://www.sitepoint.com/blogs/2009/03/11/what-it-means-to-copyright-a-website/ submitted by Nick Dyzkeul, former AI student and currently Web Developer for Gallo Winery
• Free FTP: http://www.smartftp.com/
• An Ebay-like site for artists: http://www.etsy.com/
• http://www.cssdrive.com/

Week 2:

Lecture:

How to Convert Rgb to Pantone in Photoshop | eHow.com tutorial and Pantone conversion chart.

http://kuler.adobe.com/#themes/rating?time=30

Review of the box model. http://www.w3schools.com/css/css_boxmodel.asp

Lab:

Flexible text: setting a base font; using keywords and percentages. Creating a flexible layout. Box Model - what is it?

• Creating rounded corners, transparency, gradients and drop shadows. Open this page and save it to your root folder. Access to the images can be found on pg. xiv of the Introduction section within your text.
• Creating CSS @media. Different style sheets for different needs: As a group, research best practices to create a print stylesheet. Download this page to work with. Help each other.

Homework:

Complete your print stylesheet from lab. Be sure to save as it is a requirement for Portfolio I.

Complete chapter 2 of your book, Creating speech bubbles, and link to your site. Make it your own by "tweaking" parts of the code. Experiment but take screenshots of before and after. Post images and thoughts to your blog. Along with the next paragraph, of course.

Blog about both the design qualities (ch. 2) and technical abilities (printing the url on the print stylesheet) that css gives a designer. Let me know once you post.

Useful links:

http://simplebits.com/publications/bulletproof/code/ - many of my best practices comes from the recommended book, Bulletproof Web Design by Dan Cederholm. This is the code cited in the book though I urge you to visit his simplebits site itself. Better yet, BUY THE BOOK. Many WDIM students were grateful to own.

http://webdesign.about.com/od/beginningcss/f/css_import_link.htm @import or <link>?

box-sizing: border-box
box-sizing: content-box

-moz-box-sizing: border-box;
-moz-box-sizing: content-box;
-moz-box-sizing: padding-box;

-ms-box-sizing: border-box
-ms-box-sizing: content-box;

div.test {
	width: 300px;
	padding: 10px;
	border: 5px solid #000000;
	margin-left: 10%;
	margin-bottom: 10px;
	margin-top: 10px;
}

Week 3

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:

Practicing css. Accessing and installing social media: Facebook, LinkedIn, Twitter are examined.

http://cookbooks.adobe.com/post_Scale_Background_image_to_browser_size-17590.html

• Homework:

  Chapter 3, Notebook Paper, from book. Create a page based on the chapter using multiple backgrounds. Add a Google font. Link on your blog and discuss the process. Email me when ready for grading.

Useful links:

http://www.adobe.com/cfusion/exchange/index.cfm?event=productHome&exc=3&loc=en_us - Dreamweaver exchange.

http://960.gs/

http://compass-style.org/

http://sass-lang.com/

http://www.google.com/webfonts

http://1kbgrid.com/

http://www.modernizr.com/

http://basecamphq.com/

Week 4: Wedneday October 26, 2011

Lecture:

Creating a template in Dreamweaver. Essential parts of a web page are discussed, blocked out visually, then created as a wireframe.

Selectors review: extending .css to get the results you want

Which one? import, external, internal or inline?

• 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

http://www.crazyleafdesign.com/blog/top-40-beautiful-and-inspirational-website-designs-of-2008/

http://tv.adobe.com/watch/inside-the-dreamlabs/dreamweaver-cs5-css-inspect/ - working with the box model

If you own CS5.5 or installed the plugin from Adobe's Exchange, there is now increased control of CSS3 in Dreamweaver: http://tv.adobe.com/watch/cs-55-web-premium-feature-tour-/dreamweaver-cs-55-css-authoring/

Lab:

Positioning: Absolute, Fixed, Relative and Static.

Homework:

• Create a web page tutorial using a css3 standard. Due week 6.

Week 5:

[Midterm] in class quiz.

Css position: position static, absolute, relative and fixed of an element

http://www.w3.org/TR/xhtml1/ - the rules of a well-formed xhtml document

Lecture: Stylesheets: Using stylesheets to make your site more flexible.

Understanding the beauty of structual pseudo-classes: the nth child. http://www.youtube.com/watch?v=nuCoBOdY2Qk

Lab:

A tutorial using the nth child. Individual evaluations and assistance.

Homework: Post comments to blog about today's classwork. Complete your tutorial for next week. Be sure to have either handouts and/or a web page to augment your teaching.

Useful links: http://www.ecsspert.com/atari.php | http://www.w3schools.com/html5/html5_canvas.asp | http://thinkvitamin.com/code/how-to-draw-with-html-5-canvas/ | https://developer.mozilla.org/en/Canvas_tutorial

Week 6:

Lecture:

The importance of designing for your user. Discussion of user-experience with a web page. Student and instructor provided websites are discussed.

Discussion of your final project, CSS Zen Garden.

Lab:

 We will review http://www.gdoss.com/web_info/PRI_wireframes.pdf how to wireframe.

(time allowing) Chapter 4 of text, Styling Images and Links by Type. Following the reference to using attribute selectors to target by type, change an image on a webpage to look like it is a Polaroid.

Homework:

• Conduct research on your final project. Create wireframe of final project (Zen Garden) proposed page and post to blog.

Helpful Links:

Wireframes: http://www.smashingmagazine.com/2011/11/09/establishing-your-grid-in-photoshop/

http://sixrevisions.com/user-interface/website-wireframing/

Personas: How To Understand Your Users With Personas | Another view (marketing) on personas

• http://developer.yahoo.com/performance/rules.html
• sad story of IE6.
• Submission by Justin Mahon http://www.internetonlinewebsite.com/

Another "look" submitted by Scott Cooksey - be sure to View > Source: http://www.kulturbanause.de/

http://earth.google.com/outreach/tutorial_user_experience.html

• http://thinkvitamin.com/features/top-web-designers-to-follow-on-twitter/
• Creating web apps:
  • http://css-tricks.com/app-from-scratch-1-design/
  • http://iwebkit.net/
  • http://www.readwriteweb.com/archives/how_to_create_a_web_app.php
  • http://www.microsoft.com/windowsazure
  • http://mochaui.com/demo/
  • http://gamesalad.com/ - design your own game
  • HTML 5 cheatsheet
  • http://www.webresourcesdepot.com/3d-flash-image-viewer-tiltviewer/

  Week 10, a design document will be due that will state: Research, Objective, Wireframe, Persona and Sitemap of your final Zen Garden project.

Week 7:

Lecture:

http://webdesignerwall.com/trends/47-amazing-css3-animation-demos - Some more uses for CSS3.

We will continue with the tutorial presentations.

Lab:

• If there is any time left, open lab to work on CSS Zen Garden, your final project.

   

Homework:

• Research your final project and post 2 credible references to your blog. They can be about your target audience, proposed design, how to create, or anything else relevant to finishing up a portfolio project.

Useful Links:

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.

http://css-discuss.incutio.com/wiki/Handheld_Stylesheets

Mobile Web Best Practices 1.0 (W3C)

Read this article from another famous blog, AListApart: http://www.alistapart.com/articles/return-of-the-mobile-stylesheet

Week 8:

Lecture:

A peek at HTML5. Be sure you come to class.

Lab:

Lab time to complete final project. Presentation of project-to-date next week.

Homework:

• Finish final project due next week. Upload your mobile .css page and let me know where it is.

Useful Links (from today):

• http://html5test.com/
• http://caniuse.com/#
• http://www.modernizr.com/
• ctrl+shift+j open Chrome developer pc and cmd+opt+j on a mac
• http://html5boilerplate.com/
• http://www.blueprintcss.org/
• http://lessframework.com/

Week 9:

Lecture:

Presentations of CSS Zen Garden - this is of your progress to date. Students have commented that this helped them tremendously to finalize design and perhaps learn new tricks from each other.

Lab:

• Creating a form document with validation and php mailer. Smashing Magazine's Coding a HTML5 Layout from Scratch. Practice using your tools: Google Analytics.

Homework:

• Complete the HTML5 exercise to the best of your ability and post to blog. Read complete-beginners-guide-to-interaction-design/

Week 10:

Lecture:

Creating animated content. Design documentation due (see week 6) as a .pdf. You can use material posted to blog. http://blogs.adobe.com/jnack/2011/11/check-out-flash-pro-generating-html5.html

Lab:

General discussion of usability assessment, design and evaluation. http://slodive.com/freebies/jquery-animate/ | http://www.webappers.com/2011/03/21/how-to-create-a-slick-animated-content-menu-with-jquery/ | http://www.emanueleferonato.com/2010/03/03/create-a-dynamic-content-animated-footer-ad-for-your-site-in-just-15-jquery-lines/

Homework:

Add an animation to your site.

Week 11:

Presentation and Critiques

Lecture: [final exam] Formal presentation and critique of student projects.

Lab: None.

Homework: None but wrap up your online production log with your final thoughts.

Student information - Winter 2012