[]
readme
course(s)
preface
I
1
2
II
3
4
III
5
6
7
IV
8
9
10
V
11
12
afterthought(s)
appendix
reference(s)
example(s)
resource(s)
_
tutorial(s) -- web [html/css/js]
help / lookat(s) / chart(s)
section(s) -- 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9
- 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)
chart(s) / help / lookat(s) / tutorial(s)
section 0 -- getting started
section 0 -- getting started
- lookat -- www.alexa.com/topsites
- read -- about firefox 3.5
- explore -- www.google.nl/search?q=web+technology
select (y)our browser(s)
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)
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)
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)
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)
other course(s)
- course(s) -- web technology @ VU (*)
- search -- www.google.nl/search?q=course+webtechnology
- resource(s) -- web design / tool(s)
chart(s) / help / lookat(s) / tutorial(s)
section 1 -- rise of the web(s)
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)
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)
(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
(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)
chart(s) / help / lookat(s) / tutorial(s)
section 2 -- html basics
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)
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
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)
(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)
chart(s) / help / lookat(s) / tutorial(s)
section 3 -- styling with css
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)
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)
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)
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)
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)
chart(s) / help / lookat(s) / tutorial(s)
section 4 -- javascript programming
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)
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
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)
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
learning advanced javascript
- read -- ejohn.org/apps/learn / processing / closure(s)
- explore -- wellstyled.com/en / article(s) / inheritance
chart(s) / help / lookat(s) / tutorial(s)
section 5 -- coding principle(s) & practice(s)
section 5 -- coding principle(s) & practice(s)
- consult -- reference material(s)
- read -- about augmentative authoring
- explore -- style guide(s)
select (a) framework(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)
addon(s) & plugin(s)
- X3D/VRML -- resource(s)
- firefox -- addons.mozilla.org/en-US/firefox
chart(s) / help / lookat(s) / tutorial(s)
section 6 -- graphics with canvas
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)
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)
processing (on) canvas
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)
chart(s) / help / lookat(s) / tutorial(s)
section 7 -- server-side coding
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
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
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
code & security issues
- lookat -- creative cube(s) [proxy/server(s)] / policy
- read -- about security
- explore -- anatomy of (a) web server(s) / client(s)
chart(s) / help / lookat(s) / tutorial(s)
section 8 -- rich internet application frameworks
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)
(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
getting started with flex/as3
- lookat -- ximpel.net / example(s)
- explore -- tutorial(s) / getting started
AJAX/HTML5 development(s)
AJAX/HTML5 development(s)
- canvas, audio & video -- documentation(s) / feature(s) / geolocation(s)
- O3D -- API / example(s)
(ahead with) AJAX
(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)
(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
chart(s) / help / lookat(s) / tutorial(s)
section 9 -- wrap up(s)
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)
[]
readme
course(s)
preface
I
1
2
II
3
4
III
5
6
7
IV
8
9
10
V
11
12
afterthought(s)
appendix
reference(s)
example(s)
resource(s)
_
(C) Æliens 04/09/2009
You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.