Functional by Human Consensus / Standards / httProtocols ... "word magic"
Text that controls text ... layers upon layers!
The html is interpreted by the Browser/Client (which runs in the OS).
The browser knows where to render the <title>

Human readable! and you only need a text editor and a browser as development tools.

First syntax: element/container; attribute/value pairs

<html> tags: body; p, i, code, h1 ... em ... Inline vs. Block

a = HYPERTEXT : text as interface!

img = HYPERMEDIA (already interpenetrating the net; one document, multiple sources)

Device Independence ... the bane of designers ... table, pre tag abuse

THE PAGE METAPHOR still holds ... pages in folders/directories ... static pages in static places

FORM : you could POST info to a server (change model) and on the server Pages are Constructed.

Nuke Links

As If

Steve Space

Museum of Atomic perMutation

Nukes.org

“Easy” HTML reference

The World Wide Web Consortium (W3C)

Lorem Ipsum

EVENTS! INTERACTION

Elements of documents can be controlled by Script. Loosening of the static page.

Second, Dot, Syntax: DOM (Document Object Model)

<img src="http://nukes.org/boom1.jpg" onmouseover="this.src='http://nukes.org/boom2.jpg'" align="left" />

Developed by Netscape ... not a purely Scientific development process once www gains a public, commerce drives it. Unfortunately, in different directions (i.e. Internet Explorer took awhile to adopt JS).

Dot Syntax parody:

cca.programs.graduate.design.courses.desgn611.teacher = me;

cca.programs.graduate.design.courses.desgn611.teacher.assign( research );

Truths

Nuclear Rocket to the Stars

Messages from Space

As www grew in popularity, designers weren't so happy with "Device Independence"

Flat grid design with few rendering options --> css richness

Third syntax : still attribute value pairs, but different syntax.
... also introduction of new, meaningless tags DIV(block) & SPAN(inline)

Form v. Content separation (all View) .

CSS for text style

Selected CSS Properties and Syntax

CSS Methods

CSS bookmarks

W3 recommendation: "a rich set of rendering effects"

One Model/data source, multiple views/presentations ... back to device independence!

Revisionist history: HTML, which came first, is conceived as a subset of XML, which came later.

Arbitrary Markup Definitions: make up your own tags and attributes

XML is computer readable. But, also, like HTML human-readable and easy to create

PROBLEM: HTML is not really STRUCTURED DATA, not good for communicating with Computers
... is still the delivery language for browsers ... ( or is it? nukehistory.xml + xslt )

GOOD: used everywhere, e.g., plist on Mac ... OpenOffice.org file formats

NukeHistory : .xml

OmniViewer : Itinerary

XML parser/drawer : data.xml (.zip file) this simple tool

W3 schools example

Apple Developer Example

"Pages" are no longer static

Javascript as Controller:

Change the View:
Control CSS properties : "Gesture" comes into interface... things can move in response to interaction.

Change the Model:
Manipulate HTML as XML, i.e., as a Tree structure of nodes (parent-child)
Now with AJAX (Asynchronous Javascript and XML), data changes made to the web page can be sent to the server where the "real" Model resides without reloading the page.

Flash

begins as vector animation for web, expands to engulf the universe.

Less necessary today as DOM compatibility across browsers has become normal.
Still good for sound.

Also has it's bad metaphors: stage, library ...

MonkeyTypewriter

Expanding Div Menu

Flash:

Mouse Move

Mouse Move: Actual v. Potential

Mouse Move Massive Sine Series

Intercalate

Circle of Fifths

Director Stuff:

Alien Personality Test

Back Talk : digital video

Customizable views (not just increase font size, ADD DATA WIDGETS see MyYahoo)
Customizable data sources COMBINED in Dynamic Pages

SPA: single page applications : Online (see, e.g. Zoho, Google docs)

Scripting not just confined to Browser, e.g., you can use JS to control Illustrator, Dreamweaver ...

Browsers and Computers themselves also become interpenetrated with scriptable control
-Firefox extensions: web developer, firebug, yslow, RSS feeds
-Gadgets and Widgets access online datasources

Web pages become Computing Environments

Black Boxes

Finally: NOW the trend is toward tools that don't require coding. UIs e.g. in our Group ... google pages

Also, WYSIWIG s ...

Netvibes

Zoho: Online Office

Google Gadgets for your webpage