• featured
• portfolio
• resume
• teaching
• et cetera
• contact

1. Introductions

What is your name? What is your background? What do you do right now? Why did you take this class?

2. What are the differences
between print and web

• Resolution (72dpi)
• Color (RGB colorspace) Adobe Kuler
• Bandwidth (Varying bandwidth)
• Different user requirements/Accessibility Creating Accessible Web Pages
• Lack of typographic control Common Fonts for Mac and PC
• Different attention span, purpose and intent
  (Searching and Browsing)
• Differing Devices (TV Set-top Box, Mobile Phone, Tablet) | Eyetracking
• The web is a Non-Linear Experience | Sitemap
• Not Web Designer, but Interactive Designer.
  5 Senses | Touch Devices | Surface | Location based services

3. How the web works (Handout)

• Servers & Clients (HTTP - Hypertext Transfer Protocol )
• Servers wait to fulfill Client requests
• Clients request pages over your internet connection
• Others requests: Youtube videos, VOIP, IM, FTP, email, on demand movies
• What is HTML? | Basic HTML page
• Can you show me an example? Viewing Source
• What do the colors mean?

4. What is HTML and why do I care? (Handout)

• HTML: it used to be worse
• HTML is the backbone of the internet; it's not going anywhere
• Push for standards W3C (World Wide Web Consortium)
• Separation of Content from Presentation Image
• What does Markup mean? | Example
• Introducing CSS (Cascading Style Sheets)
• Varying adoption of CSS, not mandatory, IE6 dilemma
  The Life and Death of IE 6
• A look at some browsers statistics
• Why you should use and love Firefox | add-ons | Download Firefox
• Browser Basics: history, cookies, cache, tabs, add-ons

5. Let's write some HTML!

• TextEdit (no rich text, save as plain text)
• The three amigos: HTML, HEAD, BODY
  Russian Nesting Dolls
• Some content: headline and paragraph, picture
• Adding the markup | HTML CHeat Sheet
• Viewing your first page in a browser
• Why didn't it work?
  Spelling, Forgetting a tag, not closing a tag, nesting tags improperly
• Awesome it worked!

5. Let's FTP

• CyberDuck
• You need a server/host
• You need a username/login
• You need a password
• Navigating around in FTP
• Local and Remote File Structures
• Where do I put my files?
• What do I call my homepage?

6. Examples of Interactive Projects

• Brochure Website Example
• Small Business Website - Threadless
• Portofolio Website - DesignBum
• Enterprise Website - Amazon.com
• Rich Media/Flash website
  hulu.com | thefwa.com | silenzio.fr
• Banner Ads
  Examples: Banner Ad Sizes | cnet.com | gamespot.com

• Grab a domain name | 12 Rules for Picking a Domain Name | Checking domain name availability
• Get some hosting somewhere | Selecting a web host | free hosting | bluehost.com
• Post something, anything to your site
• Check out sample.html
• View the source behind the above sample.html page
• Bring questions to class

9. Extra Credit

• Meet the Hyper in HyperText
• Anatomy of a link tag
• Absolute and Relative links
• Site structure and file structure
• Syntax error... WTF! Browsers are stupid.