Fri Sep 22

preliminaries

Questions about anything ...

Today:
- Design :
  - Good vs Bad websites : discussion and examples
  - Discuss assignment 1
  - Jim's website for the week
- Technology : XHTML and CSS part 1

upcoming 2-part assignment :
- for 2 wks from now, plan and begin a set 'real' XHTML/CSS pages
- for 4 wks from now, submit finished 'real' XHTML/CSS site (no JavaScript yet)
- for both you'll need to descibe your choices and development process, i.e. what layout and why, what's your audience and their expectations, and how this addresses the "Good" vs "Bad" issues we've discussed.
- plus oodles of readings
- see the assignments page for the details

Miscellaneous 'gotchas' :
- URL names and organizing your work
- filenames across multiple computer OS's
- file extensions and Windows desktop preferences
- newlines and text editors - wikipedia:newline
- encodings and HTML characters
  1. what they are - wikipedia:character encoding
  2. what your editor is creating
  3. what the webserver is saying - check the headers
  4. what your webpage says explicitly - (optional) meta tag in header

Background readings for this week (first parts of Nutshell and Zeldman) - discuss

Copyright issues
- wikipedia:copyright
  - © is not needed - it's still theirs (or yours) unless stated otherwise
  - 'fair use' - complicated; read the article
  - creative commons, open source, and all that
- patents, trademarks, ...
- legal vs moral
  - will you get sued? (prob'ly not)
  - is it academic plagiarisim (yes, if you don't cite your sources)
  - what would I think if I made it?
  - allofmp3.com , png, gif, mp3, ogg, ...
- applies to: designs, images, ...
- digital rights management
- digital watermarks
- varies by country

Design

good examples
bad examples
assignment 1 - our work
exhortations :
- Common sense
- Steve Krug's book :
  - Don't Make Me Think
  - Billboard Design 101
  - expectations and re-inventing the wheel
  - navigation: consistency, tabs, and all that
  - You're dumped on a page you've never seen.
    - What site is this? Which page am I on?
    - Where can I go? How old is this? Who's is it?
  - user testing
- Web Page that Suck:
  - "You know the design is a success when people complain about..."
    - It's too easy to find the stuff on your site.
    - Your site loads too quickly.
    - Your site is too easy to navigate.
    - Your site is too informative.
overall issues (edit this list in class):
- who's the audience? and what are their expectations?
- what's the content? (And how will it be maintained ... but that's another story.)
- organization: linear vs tree vs all connected
- what is this?
- Legibility
- Consistent navigation : where am I? where can I go now?
- author, date, copyright
- presentation style: images, colors, sizes

My demo for this week: http://cs.marlboro.edu/projects/component_computer/home.html
- http://www.browsercam.com/public.aspx?proj_id=286140
- http://www.browsercam.com/ with class user/pass

XHTML take 1

First, what is XML?

Answer: text like this.

 <person>
   <name>Jim Mahoney</name>
   <zip>05344</zip>
   <contact phone='xxx xxxx' email='yyy@yyyy' />
 </person>

Lots of examples on the web: XHTML, RSS, RDF, SVG, SMIL, MathML, ...
Each XML dialect has a machine-readable DTD spec.
We'll focus on 'XHTML 1.0 Transitional' whose DTD is at
- http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd

XHTML take 1

see wikipedia:xhtml and W3C XHTML 1.0 spec
XHTML is for the structure (meaning) of the pieces - not their presentation (look)
chap 8 in Nutshell; chap 6 in Zeldman
XHTML requires

 lowercase :               <h1>This is the title</h1>

 closing slash:            <hr />

 close all tags:           <p>This is a paragraph.</p>

 quotes on attributes:     <div name="george"><img src="logo.gif" /></div>

 attribute have values:     HTML:    <INPUT TYPE=checkbox CHECKED>

                            XHTML:   <input type="checkbox" checked="checked" />

 proper nesting:           <p>It <strong>works!</strong></p>

 no '<' or '>' or '&'       HTML:     A < B & B > C 
                            XHTML:    A &lt; B &amp; B &gt; C

 No '--' in comments        HTML:     <!-- --------- -->
                            XHTML:    <!-- - - - - - - -->

 first thing in .html file:         
     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Questions?

An example (chap 9 in Nutshell)

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <head>
 <title> ... Your Title Here ... </title>
 <link rel="stylesheet" href="styles.css" type="text/css" /> 
 <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
 </head>
 <body>
  <div id="enclosure">
    <h1> ... Your Title Here ... </h1>
    <img src="logo.png" alt="Company Logo" />
    <p> ... your text goes here ... </p>
    <p> ... and some more text ...</p>
  </div> <!-- end enclosure -->
 </body>

CSS take 1

see wikipedia:cascading style sheets and W3 CSS specs
We'll use v2.1 (common current choice given power and browser support )
Start by looking at an example, say, my website for this week
CSS is a new language entirely different from HTML or XHTML
- Used for attaching presentation choices (fonts, colors, backgrounds, position) to tags
- Same XHTML document may have multiple appearences for screen, printer, handheld, etc
Document structure : children, parents, inheritence
several ways to specify a style :

in another file (as shown above)

in a style section

 <style type="text/css">
  body {
   color: purple;               /* yuch */
   background-color: #d8da3d;
  }
 </style>

in a style attribute within a single tag

 <span style="color:red; background-color:black">Hi there.</span>

by importing a 2nd .css file within a first .css file

 /* form styles */
 @import url("forms.css");

selectors
- tag names
- class (.) - may be used for many tags
- id (#) - should be for only one tag

 <style>
   p { 
     color: red;
   }
   .big { 
     font-size: 200%; 
   }
   #first { 
     padding: 10em; 
   }
 </style>

 <p id="first">This one has padding.</p>
 <p>This one will be red</p>
 <p class="big">This one is big.</p>
 <p class="big">And so is this.</p>

basic layout ideas
- two column vs three column
- header and footer
- fixed vs 'liquid' width

Seeing it in action

Using WebDeveloper in Firefox
Using the W3C validator

More depending on available time

CSS concepts

inline vs blocks
box model - chap 19 in nutshell
fonts - chap 18 in nutshell
floating and positions - chap 21
lists and tables - chap 22 and 23
layouts - chap 24
bugs - chap 25

more XML

span, div
links
lists
tables (and when to use 'em)
imgs, objects, media (including flash, audio, video)
frames (which Jim doesn't like)

http://cs.marlboro.edu/ courses/ fall2006/web_design/ notes/ sep_22
last modified Friday September 29 2006 4:22 pm EDT

attachments

name last modified size

WebDesign

course

navigation

Fri Sep 22

preliminaries

Design

XHTML take 1

First, what is XML?

XHTML take 1

CSS take 1

Seeing it in action

More depending on available time

CSS concepts

more XML

attachments

Web
Design