Æliens

• 0: getting started
• 1: rise of the web(s)
• 2: html basics
• 3: styling with css
• 4: javascript programming
• 5: coding principle(s) & practice(s)
• 6: graphics with canvas
• 7: server-side coding
• 8: rich internet application frameworks
• 9: wrap up(s)

section 0 -- getting started

• lookat -- www.alexa.com/topsites
• read -- about firefox 3.5
• explore -- www.google.nl/search?q=web+technology

choose (y)our browser(s)

• firefox 3.5 (*) -- www.mozilla-europe.org/en/firefox
• safari -- www.apple.com/safari/download
• opera -- www.opera.com/download
• chrome -- www.google.com/chrome
• iexplorer (6/7/8) -- www.microsoft.com/windows/internet-explorer

(*) FF 3.5 is (y)our reference browser!

install the tool(s)

• edit & debug -- getfirebug.com / web developer
• inspector -- view source / debugger [optional]
• editor(s) -- www.winedt.com / www.flashdevelop.org
• tool(s) -- filezilla / classic ftp
• IDE [optional] -- netbeans / visual studio express / web developer
• server(s) [optional] -- WAMP / LAMP
• analyser(s) [optional] -- packet sniffer(s)

learning (with/by/from) example(s)

• hands on experience -- explore, copy & paste, understand, adapt
• read what you need-- see other course(s) / wikipedia
• search & explore -- www.google.nl/search?q=web+code+example
• focus -- basic exercise(s) / final application(s)
• reflect -- write essay(s) / blog(s)

a touch of style(s) & behavior(s)

• lookat -- bubble(s) / cupid(s) / bat(s) / timer(s) / game(s) / heart(s) / snake(s)
• explore -- canvas / parallax / processing / S5 / math(s) / presentation(s) / bullit(s) / tool(s)
• meet -- the blob(s) again / play(s) / eliza

other course(s)

• course(s) -- web technology @ VU (*)
• search -- www.google.nl/search?q=course+webtechnology
• resource(s) -- web design / tool(s)

(*) with kind permission of Jacco van Ossenbruggen and Guus Schreiber

section 1 -- rise of the web(s)

• lookat -- wwwwwwwww.jodi.org
• read -- a little history of the world wide web / social web
• explore -- museum of web art / the machine is us/ing us

the next generation(s)

• 1.0 -- en.wikipedia.org/wiki/Web_1.0
• 2.0 -- en.wikipedia.org/wiki/Web_2.0
• 3.0 -- en.wikipedia.org/wiki/Special:Search/Web_3.0
• 4.0 -- start planning now / at intel! / near you!
• 5.0 -- where will it end?

(non) exhaustive question(s)

• what is -- the semantic web?
• how to -- understand the web as media?
• do you participate in -- a social web?
• do you know (y)our -- web protocol(s)? / really?
• why use -- web services?

(more) tutorial(s) about

• essential(s) -- clients, servers & communication / markup language(s) / style sheets
• in-depth -- scripting (1) / scripting (2) / server(s)
• evaluation(s) -- user studies & analytic(s)

section 2 -- html basics

• lookat -- miles davis / basic(s)
• read -- getting started / learning by example(s) / tutorial(s)
• explore -- element(s) / validator.w3.org

basic (html) element(s)

• document(s) -- page(s) / heading(s) / break(s) / emphasis / block(s)
• list(s) -- bullet(s) / number(s) / definition(s) / nesting(s) / example(s)
• link(s) -- destination(s) / anchor(s) / menu(s) / example(s)
• image(s) -- apple(s) / link(s) / map(s) / example(s)
• table(s) -- basic(s) / span(s) / cinema / example(s)
• form(s) -- example(s) / query?
• frame(s) -- fruit / preview(s) / example(s)
• deprecated -- beware(s)!

objects, images & applets

• lookat -- net art / page(s) / config(s) / display(s) / math
• read -- objects, images & applets / embedding video / iframe(s)
• explore -- draw / bridge(s) / flowplayer.org/demo / jsobject

(future) development(s)

• consider -- XML / video tag(s) / SVG / MathML
• read -- about HTML 4.0 / HTML 5 / XHTML
• study -- www.w3schools.com/xhtml / reference(s)

section 3 -- styling with css

• lookat -- first / font(s) / table(s) / style(s) / attribute(s) / thinking inside
• read -- style sheet(s) / www.w3schools.com/css / transition(s)
• explore -- www.wellstyled.com/links.html / example(s) / basic(s) / menu(s)

css element(s)

• font(s) -- properties / size(s) / weight(s) / style(s)
• text -- color(s) / align(s) / vertical / decoration(s) / spacing(s) / test(s)
• selector(s) -- child(s) & sibling(s) / attribute(s)
• box model -- border(s) / padding(s) / margin(s) / size(s) / overflow(s)
• html -- heading(s) / div(s) / link(s) / table(s) / list(s) / cursor(s) / element(s)

switching style(s)

• lookat -- chrismas carol(s) / reset(s)
• read -- jquery for designer(s) / tutorial(s)
• explore -- jquery.com / docs.jquery.com/Selectors

presenting (the) slide(s)

• lookat -- presenting with s5 [s5] / math(s)
• read & download -- meyerweb.com/eric/tools/s5
• explore & adapt -- selection(s) [slide]
• reflect on -- powerpoint is evil / resource(s)

how (not) to (design) style(s)

• lookat -- icant.co.uk/csstablegallery / www.freecsstemplates.org / bullet(s)
• read -- web 2.0: design & layout trend(s) / design guide / visual design
• explore -- www.csszengarden.com / resource(s) / layer(s) / tool(s)

section 4 -- javascript programming

• lookat -- random content / hit the dot(s) / move(s) / slogan(s) / math(s)
• read -- www.w3schools.com/JS / development(s) / terminal(s)
• explore -- lookat(s) / example(s) / basic(s) / professional(s) / eliza(s)

javascript element(s)

• function(s) -- function name( args ) { ... }
• event(s) -- onload, mouse, key, timer
• variable(s) -- var x = expression;
• constructor(s) -- function object() { attribute: value; }
• closure(s) -- x = function () { ... }
• meta-programming -- x = eval(string)

accessing the DOM

• object(s) -- window, navigator, screen, history, location
• accessor(s) -- getElementByID() / getElementsByTagName()
• attribute(s) -- innerHTML, id, class, href, width, height, ...

look at (the) example(s)

• health -- BMI / heart rate / weight watch / BAC
• effect(s) -- fading(s) / rgb / wheel / banner(s)
• math -- function(s) / integer(s) / fraction(s) / equation(s) / challenge(s)
• calculator(s) -- area(s) / circle / volume(s) / prime(s) / function(s)
• game(s) -- memory / face(s) / react / invader(s) / poker / stop the clock
• explore -- example(s) / graphic(s) / jquery

learning advanced javascript

• read -- ejohn.org/apps/learn / processing / closure(s)
• explore -- wellstyled.com/en / article(s) / inheritance

section 5 -- coding principle(s) & practice(s)

• consult -- reference material(s)
• read -- about augmentative authoring
• explore -- style guide(s)

select (a) framework(s)

• consider -- jquery.com / script.aculo.us / www.prototypejs.org / www.dojotoolkit.org
• explore -- docs.jquery.com / jqueryui.com / plugins.jquery.com

addon(s) & plugin(s)

• X3D/VRML -- resource(s)
• firefox -- addons.mozilla.org/en-US/firefox

section 6 -- graphics with canvas

• lookat -- sketch / particle(s) / mix
• read -- basic(s) / tutorial(s) / blog(s)
• explore -- ff3.5: video with canvas: [resource(s)]

graphic framework(s)

• raphaeljs.com -- boid(s) / reflection(s) / pie / clock
• processingjs.org -- link(s) / snake / barchart / intersection(s)
• read -- wikipedia / wii SK / SVG?
• explore -- www.c3dl.org / addon(s) / gamejs
• lookat -- canvascape(s) / beautytip(s) / raytracer / painter / liquid(s) / pixastic(s) / ray(s) / draw tool / selection(s)

basic(s): processing (on) canvas

• array -- simple / object(s)
• color -- brightness / wheel / square(s) / hue / gradient(s) / relative(s) / saturation(s)
• control -- conditional(0) / conditional(s) / interaction(s) / iteration(double) / operator(s)
• data -- conversion(s) / (true|false) / scope(s) /
• form -- bezier / bezier/ellipse / piechart(s) / point(s)/line(s) / primitive(s) / curve(s) / strip(s) / vertices
• image -- ???
• input -- constraint(s) / easing / second(s) / mouse/1D / mouse/2D / mouse(s) / press / signal(s) / storing(s)
• math -- wave(s) / arctangent / distance(s) / distance/2D / random / graphing / dec/inc / modulo / noise / noise/2D / noise/wave / precedence / polar/cartesian / random / sine / sin/cos / sin/sin
• object(s) -- composite(s) / inheritance / constructor(s) / neighbour(s) / object(s)
• shape(s) -- scale
• structure(s) -- coordinate(s) / graphic(s) / function(s) / loop(s) / no loop(s) / recursion(0) / recursion(s) / redraw / draw(s) / comment(s) / width/height
• transform(s) -- arm / rotation(s) / scale / flower(s)
• typography -- letter(s) / word(s)
• web -- links(s)

topic(s): processing (on) canvas

• interaction -- tickle
• motion -- brownian / curve(s) / puff(s)
• simulate -- chain(s) / softbody / spring(s)

learning(s): processing (on) canvas

• 1: setup & shape(s) -- square / outline / ellipse(s) / color(s) / zoog(s)
• 3: interaction(s) -- square / follow(s) / draw(s) / click(s) / zoog
• 4: variable(s) -- circle / motion / square(s) / ellipse / dot(s) / zoog
• 5: conditional(s) -- mood(s) / single(s) / square(s) / alternate(s) / motion(s) / color(s) / loop(s) / bounce(s) / zoog
• 6: loop(s) -- space(s) / (2) / (3) / black / (4) / vertical / line(s) / gradient(s) / motion(s) / zoog(s)
• 7: function(s) -- dot / motion(s) / square(s) / jiggle(s)
• 8: class(es) -- move(s) / object(s) / jiggle(s)
• 9: array(s) -- follow
• 10: timer(s) & drop(s) -- timer / rain / drop
• 13: random -- gray(s) / track(s) / fill(s) / dot / round / pendulum / wave(s) / circle(s) / point(s)
• 14: transform(s) -- zoom(s) / grab(s) / rotation(s) / solar / angle(s)
• 15: pixel(s) -- random / load
• 16: walk(s) -- grid / scribble(s) / path(s)
• []: graphic(s)

section 7 -- server-side coding

• lookat -- inspiration(s) / resource(s)
• read -- www.w3schools.com/hosting / portal(s) / wiki(s) / CMS
• explore -- wiki(s) / professional(s) / climate-portal.nl

using php/(my)sql

• lookat -- CD / login(s)
• read -- www.w3schools.com/php / www.w3schools.com/sql
• explore -- basic(s) / service(s) / selection(s) / graphic(s) / professional(s)

developing web services

• read -- about web service(s) / www.service-architecture.com / aws.amazon.com
• explore -- webapi(s) / RIA(s) / mashup(s)
• consider -- oxygen / eXist

code & security issues

• lookat -- creative cube(s) [proxy/server(s)] / policy
• read -- about security
• explore -- anatomy of (a) web server(s) / client(s)

section 8 -- rich internet application frameworks

• Adobe Flex -- www.adobe.com/products/flex
• HTML5 + Ajax -- www.ajaxwith.com/HTML-5-and-Ajax.html
• Sun JavaFX -- www.sun.com/software/javafx
• Microsoft Silverlight -- www.microsoft.com/silverlight

(requirements for) rich media application(s)

• integration with data services / connection to media servers
• libraries & components / 2D, 3D effects & drawing API
• skinning & style sheets / multi-modal (media) input

getting started with flex/as3

• lookat -- ximpel.net / example(s)
• explore -- tutorial(s) / getting started

AJAX/HTML5 development(s)

• canvas, audio & video -- documentation(s) / feature(s) / geolocation(s)
• O3D -- API / example(s)

(ahead with) AJAX

• lookat -- relay(s) / car(s) / hint(s)
• explore -- www.w3schools.com/ajax / tutorial(s) / professional(s)

(new) wave(s) of web 2.0 (media)

• yahoo -- developer.yahoo.com
• del.icio.us -- del.icio.us/help/api
• technorati -- www.technorati.com/developers
• flickr -- www.flickr.com/services
• google -- code.google.com
• ebay -- developer.ebay.com

section 9 -- wrap up(s)

• consider -- jetpack(s) / (y)our skill(s) & understanding
• read -- about webscience.org / extra(s) / math education
• explore -- www.googlelabs.com / dream(s)