Intermediate Web Design

Fall 2011
http://bit.ly/smfa-f2011

Order of Business

    1. Welcome - Who, What, How

    2. Administrivia

    3. What is the Web

    4. Open and closed source

    5. HTML/CSS/JS

    6. State of the Web/Cutting Edge

Who am I?

Me = Pascal Rettig

  1. B.S and Masters from MIT in Computer Science

  2. 15+ years of Web Development Experience

  3. Run Boston-based Web Consultancy Cykod

  4. Run a couple of Boston Web Development Meetups

I ♥ the Web

My goal is to get some of the excitement about the current state of the web across in this class

Course Goals

Goal 1:
Cover the basics

You've got to get your HTML, CSS, & Javsacript down pat. They aren't going anywhere.

Goal 2:
Learn how to
learn this stuff

There's material out there for 1000 courses. We want to get you over the hump so that you can incrementally learn on your own.

Goal 3:*
Get your building

To be able to turn ideas and designs into functioning web pages.
* most important goal

How we're going to accomplish this

  1. Lots of Hands-on exercises.

  2. Lots of Critical evaluation of websites.

  3. Just enough lecture and theory to get by.

  4. Not a one-size-fits-all approach.

Administrivia

Required Reading

One required textbook and weekly reading assignments from online sources.

Design with Web Standards, 3rd Edition. Amazon, B&N

Grading

By default everyone will be graded on Pass/Fail. If you need a grade talk to me.

More than 2 unexcused absences and you'll lose a letter grade. Attendance is mandatory.

Mailing List

Part of your homework is to sign up this week.

http://groups.google.com/group/smfa-iwd-f2011

Design Reviews

Critical Analysis of your work from the week before,
along with occasional analysis of other websites.

Class Content

What is the Web?

The world wide web is a system of interlinked hypertext documents accessed via the Internet. With a web browser, one can view web pages that may contain text, images, videos, and other multimedia and navigate between them via hyperlinks.

The Web is Content

What can you do
on the web?

Just about anything...

What can you do on the web? Just about anything.

  1. "Brochure" websites: whitehouse.gov

  2. E-commerce: amazon.com

  3. Social Networking: twitter.com facebook.com

  4. Online/IRL Communities: meetup.com yelp.com

  5. Interactive Information Applications: maps.google.com

  6. Interactive Games: farmville.com

The Good:

If you can dream it, you can build it

The Bad:

There's a lot to learn

A Good Web designer needs to understand:

  1. HTML

  2. CSS

  3. JavaScript

But also...

  1. Design Layout fundamentals

  2. Typography

  3. User interaction

  4. Marketing

  5. Content Strategy

  6. Search engines

Who runs the internet?

Nobody

(The lunatics are running the asylum)

By General Agreement, the players:

  1. Carriers have peering arrangements to deliver bandwidth (Comcast, Verizon)

  2. Standards groups promote “best” practices (W3C, WHATWG)

  3. Browser Makers implement whatever they want (Microsoft, Mozilla, Google, Opera)

  4. Servers serve pages (Apache, IIS, Nginx)

  5. Scripting languages talk to servers (PHP, C#, Python)

What is open-source?

Open and closed source

  1. Free as in “Beer” vs. Free as in “Speech”

  2. Open-source does not mean without cost

  3. Closed source does not mean expensive

  4. (But usually that’s the case)

Know your license!

A sure way to fail this class and/or be kicked out of school and/or be sued is to use copyrighted works illegally

 

  1. CC BY, CC BY-SA, CC BY-ND, CC BY-NC, CC BY-NC-SA, CC BY-NC-ND

    Attribution, Share-Alike, No-Derivitives, Non Commercial

    (http://creativecommons.org/licenses/)

  2. Unlicenses, public domain

  3. GPL, LGPL, AGPL

  4. BSD, MIT

HTML / CSS / Javascript

What's the point of each?

  1. HTML - Semantics, Content, Information, Data

  2. CSS - Layout and Styling

  3. Javascript - Creating Dynamism, interaction

A Simple walk through a basic HTML site

<!DOCTYPE html>
<html>
  <head> .. Head Goes Here ... </head>
  <body>
    <header id='site-header'>
        <h1 class='logo'>My Awesome Website</h1>
        <nav id='main-nav'>
           <ul> 
              <li><a href='item1.html'>Item 1</a></li>
              <li><a href='item2.html'>Item 2</a></li>
	   </ul>
        </nav>
    </header>
    <div id='site-wrapper'>
      <section id='site-content'>
	 <article>
	   <h1>Header</h1>
	   <p>Lorem Ipsum</p>
	</article>
      </section>
    </div>
    <footer id='site-footer'> ... Footer Content ... </footer>
  </body>
</html>

What's in the head?

<head>
    <title>My Web Page</title>
    <link rel='stylesheet' href='style.css'>
    <script src='jquery.min.js'></script>

    <script src='application.js'></script>
</head>
... Site Content ...

What don't you see? (Hint)

Which brings us to...

Best Practices

  1. Semantics: separate content from design

  2. Progressive Enhancement

  3. Capabilities, not browsers

  4. Responsive Design, beyond the desktop

State o' the art

  1. Financial Times

  2. Sencha Touch

  3. http://webglsamples.googlecode.com/hg/aquarium/aquarium.html

  4. http://webglsamples.googlecode.com/hg/spacerocks/spacerocks.html

  5. Ro.me

Homework: Just reading this time

  1. Buy the book and read DWWS Chapters 1 & 2

  2. Mailing list

  3. http://www.alistapart.com/articles/understandingwebdesign/

  4. http://www.smashingmagazine.com/2008/01/31/10-principles-of-effective-web-design/

  5. http://www.smashingmagazine.com/2010/03/02/web-design-criticism-a-how-to/

  6. http://www.alistapart.com/articles/design-criticism-creative-process/

  7. http://eng.designerbreak.com/2009/tutorial/wireframes-and-concept-planning-a-website

  8. http://userpathways.com/2008/06/the-what-when-and-why-of-wireframes/