Web Design 1

CDGD304 - Fall 2011

Mondays 2:00pm - 6:00pm
http://bit.ly/massart-304

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. GitHubbery

    7. State of the Web/Cutting Edge

Who are We?

We = Martha & Pascal Rettig

Run Boston-based Web Consultancy Cykod

Martha Rettig / Designer

Pascal Rettig

we ♥ the web

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

Course Goals

Goal 1

Get you comfortable with the basics

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

Goal 2

Teach you to drink from a firehose

Web design is too big and changes far to fast to know everything, you need to feel comfortable “winging it” and be able to learn on your own.

Goal 3

No voodoo

There is no magic.
I repeat: there is no Magic.

Most Important Goal

Get you building stuff

To be able to turn ideas and designs into functioning web pages.

How we're going to accomplish this

Administrivia

Syllabus

Weekly Reading, Assignments, & Critiques,

Class Content

What is the web?

Wikipedia Says:

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...

The web is...

The web is....

Whatever you want to build.

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

How do you get your stuff online?

Let's try it now - create a GitHub account and launch a page

Some hardcore forking action

GitHub for Mac

Your Done!

Go to yourname.github.com/web304/class1

wasn't that easy?
(don't worry we'll do it all over again next week)

now for some fun

(at least what we call fun)

State o' the art

  1. Lost World's Fairs

  2. 20 Things I Learned About Browsers and the Web

  3. This Shell

  4. The Art of Stars

  5. Ro.me

  6. The Wilderness Downtown

  7. Ben the Bodyguard

  8. Financial Times

  9. Sencha Touch

  10. SpaceRocks

  11. Google Aquarium

Homework

Reading

Coding