Æliens

example(s)

• tool(s) -- www.aptana.com / firefox addon(s)
• example(s) -- javascript.internet.com / openjsan.org / code.google.com/apis/ajax/playground
• ajax -- softwareas.com/ajaxjavascript-8-ways-to-create-graphics-on-the-fly
• graphic(s) -- raphaeljs.com/reference.html / me.eae.net/archive/2005/12/29/canvas-in-ie
• css -- nubyonrails.com/pages/css_graphs / codepunk.hardwar.org.uk/css2js.htm
• javascript -- tool-man.org
• dynamic(s) -- www.hunlock.com/blogs/Howto_Dynamically_Insert_Javascript_And_CSS
• menu(s) -- www.noupe.com/css/13-awesome-java-script-css-menu.html
• processing -- ejohn.org/blog/processingjs
• physic(s) -- box2d-js.sourceforge.net
• adventure(s) -- zproxy.wordpress.com/2007/11/11/javascript-2d-adventure-game-demo
• dream(s) -- jsc.sourceforge.net
• server(s) -- www.softintegration.com/webservices

health

• run -- www.runnersworld.com
• nike+ipod -- nikeplus.nike.com/nikeplus/?locale=euen_eu
• sport -- www.digifit.eu
• moral(s) -- morale.erikbenson.com/person/erik

NM1 target(s)

• skill(s) -- scripting, styling, configuration
• knowledge -- html, javascript, css, xml, php
• theory -- basic(s) of web 2.0
• experience(s) -- small scale multi-language web application development
• attitude -- understanding, craftmanship, discovery

web technology -- content, form, style, dynamics

• canonical example(s) -- game / calculator / slogan(s) / lookat(s)
• (online) reference material(s) -- standard(s) / javascript / www.w3schools.com / kit(s)
• challenging target(s) -- heart(s) / labs.google.com (edu / code)

course structure

1. introduction of language(s), tool(s) & technology
2. scripting -- basic assignment(s)
3. web standard(s) -- client-side
4. styling -- basic assignment(s)
5. web standard(s) -- server-side
6. interaction -- basic assignemnt(s)
7. advanced topic(s) -- ajax, dhtml, plugin(s), addon(s)
8. presentation of final assignment(s)

basic(s) -- web technology

1. style -- adapt three basic example(s) in style and functionality
2. form -- construct a simple calculator or converter in a domain of choice
3. chaos -- create the worst, that is visually confusing, web page possible, in an aesthetic way though
4. portal -- make a small information site about some topic of choice
5. mimic -- evaluate and mimic, e.g. from best of the web

final(s) -- web technology

• health information site -- www.digifit.eu
• collection of javascript math games -- www.cut-the-knot.com
• javascript (visual) adventure game -- www.astoundme.com/scottadams
• alternative(s) -- submit a proposal

reference(s)

There are many books dealing in one way or another with web technology. In particular the Programmer to Programmer series of Wrox (www.wrox.com) is highly recommended, especially for learning specific technologies in a practical way.

1. JavaScript: The Definitive Guide by David Flanagan -- (amazon)
2. CSS: The Definitive Guide by Eric Meyer -- (amazon)
3. Professional Web 2.0 Programming (Wrox Professional Guides) by Eric van der Vlist, Danny Ayers, Erik Bruchez, Joe Fawcett, Alessandro Vernet -- (amazon)
4. business model(s) -- www.oreillynet.com/pub/a/oreilly/tim/news/2005/09/30/what-is-web-20.html
5. Webbots, Spiders, and Screen Scrapers: A Guide to Developing Internet Agents with PHP/CURL by Michael Schrenk -- amazon)
6. The Web Application Hacker's Handbook: Discovering and Exploiting Security Flaws, by Dafydd Stuttard amd Marcus Pinto -- amazon)
7. A. Eliëns, topical media & game development -- media.eliens.net

NM1 -- resource(s) / inspiration(s)

inspiration(s)

• learn -- smart.fm
• browser(s) -- www.armorsurf.com
• standard(s) -- www.indelv.com
• javascript game(s) -- www.eyehook.com/games / www.javascriptgaming.com
• must read -- www.smashingmagazine.com/2009/10/05/mastering-css-coding-getting-started
• scalable page(s) -- bullit(s) / www.alistapart.com/articles/sizematters
• javascript include(s) -- webdeveloper.earthweb.com/repository/javascripts/2003/06/195171/jsinc.html
• js/cc grammar(s) --- online / jscc.jmksf.com
• inheritance -- www.crockford.com/javascript/inheritance.html
• cloud computing -- myfreecloudhost.com/static/what_is_cloud_hosting
• history of the web -- www.dejavu.org
• about google wave -- blogs.zdnet.com/BTL/?p=25972&tag=nl.e539
• (do not) read tutorial(s) -- PHP / XML / javascript
• kill flash -- www.stevenwei.com/2010/01/31/the-best-way-for-adobe-to-save-flash-is-by-killing-it
• stream(s) -- activitystrea.ms
• advanced javascript -- www.smashingmagazine.com/2010/04/20/seven-javascript-things-i-wish-i-knew-much-earlier-in-my-career

topic(s)

• elementary web-based multimedia technology
• programming and tools for interactive animation
• first principles of information visualisation
• elements of interaction design
• data representation issues for rich media applications

NM2 target(s)

• skill(s) -- scripting, XML-based configuration
• knowledge -- interactive animation & visualization
• theory -- dynamic systems, information presentation
• experience(s) -- medium scale interactive visual application(s)
• attitude -- explorative, problem-finding, aesthetics

interactive visualization -- authoring

• canonical example(s) -- animation / draw / www.processing.org
• (online) reference material(s) -- resource(s) / adobe live docs: actionscript / flex
• challenging target(s) -- labs.adobe.com / flash art / sample(s) / www.processing.org

session(s)

1. introduction of (rich) media platform(s)
2. basic assignment(s) -- animation (1)
3. essentials of animation and visualisation
4. basic assignment(s) -- visualization (2)
5. principles of interactive information presentation
6. basic assignment(s) -- interaction (3)
7. elements of data-driven information systems
8. presentation of final assignment(s)

basic(s) -- interactive visualization

1. particle systems -- with collisions and effects
2. map-based visualization -- e.g. using www.umapper.com with flex/as3
3. information overlays -- e.g. in combination with interactive video

final(s) -- interactive visualization

• geo-located information -- e.g. health or finances
• activity-monitoring -- e.q. sensor-data, web-traffic
• information game -- e.q. climate issues

reference(s)

As said before, a highly recommended reference for interactive data visualization is Visualizing Data by Ben Fry, not in the least because the approach described is tightly connected with processing and its underlying philosophy of creative intuitive understanding by computational means. However, also the flex/as3 related references are worthwhile because they give access to the display environment of flash, which is the dominant media technolgy for (business-related) web-applications.

1. Visualizing Data: Exploring and Explaining Data with the Processing Environment, by Ben Fry -- (amazon)
2. Foundation Actionscript 3.0 Animation: Making Things Move! by Keith Peters -- (amazon)
3. Professional Adobe Flex 2 (Programmer to Programmer) by Rich Tretola, Simon Barber, and Renaun Erickson -- (amazon)
4. Foundation Flash 8 Video (Foundation) by Jordan L Chilcott and Tom Green -- (amazon)
5. Visualizing the Semantic Web: XML-based Internet and Information Visualization by Vladimir Geroimenko -- (amazon)
6. Eliëns A., Wang Y. van Riel C. and Scholte T. (2007), 3D Digital Dossiers -- a new way of presenting cultural heritage on the Web, In Proc. Web3D 2007, ACM SIGGRAPH, pp. 157-160
7. A. Eliëns, topical media & game development -- media.eliens.net

resource(s) / NM2

• beauty of numbers -- www.generatorx.no/category/beautyofnumbers/
• visual(s) -- www.visualcomplexity.com
• code & form -- workshop.evolutionzone.com
• design(s) -- www.adobe.com/devnet/flex/articles/fig_pt6.html
• data structure(s) -- lab.polygonal.de/ds
• physic(s) -- diamondtearz.org/blog/2008/06/03/exploring-the-actionscript-physics-engine-in-flex
• flow(s) -- labs.digg.com -- (oa. buzzcut(s)) -- observation(s), no judgment!

community -- blprnt.com

jared tarbell -- www.complexification.net / levitated.net/gravityIndex.html (flash) /

learning -- www.learningprocessing.com

visualizing data -- benfry.com/writing

computational art -- friendsofed.com/book.html?isbn=159059617X

physic(s) -- www.pathf.com/blogs/2008/09/flash-flex-physics-engines-and-examples/

js -- ejohn.org/blog/processingjs

org -- www.processing.org

living planet -- unicef report

visible city -- vimeo.com/2437214 / vimeo.com/2437344

gadget(s) -- code.google.com/apis/visualization/documentation/gadgetgallery.html

networked visualization -- www.latebytes.nl

student(s) work -- www.annehelmond.nl/2009/05/15/ma-students-present-projects-visualizing-our-world-of-data

NM2 target(s)

• skill(s) -- scripting, XML-based configuration
• knowledge -- interactive animation & visualization
• theory -- dynamic systems, information presentation
• experience(s) -- medium scale interactive visual application(s)
• attitude -- explorative, problem-finding, aesthetics

interactive visualization -- authoring

• canonical example(s) -- animation / draw / www.processing.org
• (online) reference material(s) -- resource(s) / adobe live docs: actionscript / flex
• challenging target(s) -- labs.adobe.com / flash art / sample(s) / www.processing.org

session(s)

1. introduction of (rich) media platform(s)
2. basic assignment(s) -- animation (1)
3. essentials of animation and visualisation
4. basic assignment(s) -- visualization (2)
5. principles of interactive information presentation
6. basic assignment(s) -- interaction (3)
7. elements of data-driven information systems
8. presentation of final assignment(s)

reference(s)

As said before, a highly recommended reference for interactive data visualization is Visualizing Data by Ben Fry, not in the least because the approach described is tightly connected with processing and its underlying philosophy of creative intuitive understanding by computational means. However, also the flex/as3 related references are worthwhile because they give access to the display environment of flash, which is the dominant media technolgy for (business-related) web-applications.

1. Visualizing Data: Exploring and Explaining Data with the Processing Environment, by Ben Fry -- (amazon)
2. Foundation Actionscript 3.0 Animation: Making Things Move! by Keith Peters -- (amazon)
3. Professional Adobe Flex 2 (Programmer to Programmer) by Rich Tretola, Simon Barber, and Renaun Erickson -- (amazon)
4. Foundation Flash 8 Video (Foundation) by Jordan L Chilcott and Tom Green -- (amazon)
5. Visualizing the Semantic Web: XML-based Internet and Information Visualization by Vladimir Geroimenko -- (amazon)
6. Eliëns A., Wang Y. van Riel C. and Scholte T. (2007), 3D Digital Dossiers -- a new way of presenting cultural heritage on the Web, In Proc. Web3D 2007, ACM SIGGRAPH, pp. 157-160
7. A. Eliëns, topical media & game development -- media.eliens.net

topic(s)

• basic content creation -- editors, image tools, video
• use of blogging sites, and media content management systems
• topics of creative technology -- mathematics, smart systems & new media
• communication and presentation issues
• presence in oral & written presentation(s)
• individual on-line (digital) portfolio(s)

CA1 target(s)

• skill(s) -- (digital) content creation
• knowledge -- information management & presentation
• theory -- relation technology, science & art(s)
• experience(s) -- presentation of ideas, concepts & plans
• attitude -- exploration, communication, discovery, presentation

we create identity -- media in context

• canonical example(s) -- interactive video / portal(s)
• (online) reference material(s) -- instruction(s) / teamwork software
• challenging target(s) -- www.youtube.com / www.symbaloo.com/nl / create-media.blogspot.com / www.scrapblog.com

inspiration(s) -- video(s)

• learning(s) -- next generation
• dream(s) -- last lecture
• architecture(s) -- the architecture of the unfamiliar
• application(s) -- hello world
• (dis)order(s) -- everything is miscellaneous
• game(s) -- games for change
• presentation(s) -- how to (not) use powerpoint / five ways to speak
• campaign(s) -- what political campaigns can teach business
• politic(s) -- privacy matters
• rip(s) -- a remix manifesto
• idea(s) -- change the world through game design
• clip(s) -- submit your clip

course structure

1. introduction of tool(s) and platform(s)
2. topics in creative technology (1)
3. teamwork -- identity as a group
4. topics in creative technology (2)
5. identity -- individual portfolio(s)
6. topics in creative technology (3)
7. presentation(s) -- individual & group work
8. evaluation -- reflection(s) on we create identity

excursion(s)

• visit(s) to regional initiative(s) -- www.creatievefabriek.nl / www.gogbot.nl
• lecture(s) at PICNIC Academy -- www.picnicnetwork.org/search?q_mm=academy
• visit(s) around campus -- www.t-xchange.nl

individual

• create account(s) at -- google site, blogspot, flickr
• maintain blogs & records -- minimal 5, with pictures
• create personal portfolio -- with (symbaloo) start page
• prepare poster and pitch for final session(s)

small group(s)

• construct creative technology map -- www.umapper.com/maps/view/id/12356
• create clip & interactive video -- ximpel.net

collective assignment(s)

• create and maintain group site -- groups.google.com
• maintain creative technology wiki
• organize final poster exhibition

reference(s)

An initial set of references should include the list below, although many more are available.

1. Mitchel Resnick, Sowing the Seeds for a more Creative Society -- online video
2. Facets of Fun -- On the Design of Computer Augmented Entertainment Artefacts, available in online version
3. Kress G. and van Leeuwen T. (1996), Reading Images: The Grammar of Visual Design, Routledge
4. Geert Lovink and Ned Rossiter (eds), MyCreativity Reader, A Critique of Creative Industries, Institute of Network Cultures, Amsterdam 2007
5. A. Eliëns, topical media & game development -- media.eliens.net

resource(s) / CA1

• software -- processing.org / ximpel / material(s)
• inspiration(s) -- www.beautifullosers.com
• map(s) -- twente / example(s)
• group(s) -- groups.google.com / site(s) / tool(s) / drop.io
• tag cloud(s) -- tagcrowd.com
• present(s) -- www.power-rail.net (example/xml) -- use w-key to navigate
• ximpel -- ximpel.net / view(s)
• concept graph(s) -- philosopher(s) (double click to center, double click on center for info) / amazon
• flickr -- creative technology
• video vortex -- networkcultures.org/wpmu/portal/publications/inc-readers/videovortex
• identity -- www.personalbrand.nl

CA1 target(s)

• skill(s) -- (digital) content creation
• knowledge -- information management & presentation
• theory -- relation technology, science & art(s)
• experience(s) -- presentation of ideas, concepts & plans
• attitude -- exploration, communication, discovery, presentation

we create identity -- media in context

• canonical example(s) -- interactive video / portal(s)
• (online) reference material(s) -- instruction(s) / teamwork software
• challenging target(s) -- www.youtube.com / www.symbaloo.com/nl / create-media.blogspot.com / www.scrapblog.com

inspiration(s) -- video(s)

• learning(s) -- next generation
• dream(s) -- last lecture
• architecture(s) -- the architecture of the unfamiliar
• application(s) -- hello world
• (dis)order(s) -- everything is miscellaneous
• game(s) -- games for change
• presentation(s) -- how to (not) use powerpoint / five ways to speak
• campaign(s) -- what political campaigns can teach business
• politic(s) -- privacy matters
• rip(s) -- a remix manifesto
• idea(s) -- change the world through game design
• clip(s) -- submit your clip

course structure

1. introduction of tool(s) and platform(s)
2. topics in creative technology (1)
3. teamwork -- identity as a group
4. topics in creative technology (2)
5. identity -- individual portfolio(s)
6. topics in creative technology (3)
7. presentation(s) -- individual & group work
8. evaluation -- reflection(s) on we create identity

excursion(s)

• visit(s) to regional initiative(s) -- www.creatievefabriek.nl / www.gogbot.nl
• lecture(s) at PICNIC Academy -- www.picnicnetwork.org/search?q_mm=academy
• visit(s) around campus -- www.t-xchange.nl

CA1 -- resource(s) / inspiration(s)

• ...

reference(s)

An initial set of references should include the list below, although many more are available.

1. Mitchel Resnick, Sowing the Seeds for a more Creative Society -- online video
2. Facets of Fun -- On the Design of Computer Augmented Entertainment Artefacts, available in online version
3. Kress G. and van Leeuwen T. (1996), Reading Images: The Grammar of Visual Design, Routledge
4. Geert Lovink and Ned Rossiter (eds), MyCreativity Reader, A Critique of Creative Industries, Institute of Network Cultures, Amsterdam 2007
5. A. Eliëns, topical media & game development -- media.eliens.net

topic(s)

• application of creative technology elements
• explore combination smart technology & new media
• development interactive game play
• write business & communication plan
• reflection on societal context of media & smart system deployment

CA3 target(s)

• skill(s) -- multi-platform technical development
• knowledge -- interaction & game play
• theory -- smart technology, media & communication
• experience(s) -- large scale application with (societal) impact
• attitude -- acquisition, problem-finding, self-organization, creative solutions

have fun and play -- installation(s)

• canonical example(s) -- art(s) / quote(s)
• (online) reference material(s) -- visual design / game development
• challenging target(s) -- multimedia theatre / VJ! / festival(s)

session(s)

1. introduction topic(s) & challenge(s)
2. exploration of platform & production requirements
3. planning -- concept & application development
4. establishment of business plan
5. contract negotiation & realization
6. basic media and communication theory
7. business and societal context of the creative application(s)
8. delivery and presentation of final application(s)

assignment(s)

• concept pitch presentation(s)
• planning - approach, realization, deployment
• report(s) -- application development and installation
• evaluation(s) -- summary of experience(s) and deployment result(s)

reference(s)

1. method(s) -- www.agilemanifesto.org/principles.html
2. resource(s) -- game design patterns / team work
3. Eliëns A. and Vyas D., Panorama -- explorations in the aesthetics of social awareness, In Proc. GAME-ON 07, Nov 20-22, University of Bologna, Marco Roccetti (ed.), p. 71-75, EUROSIS-ETI Publication, ISBN 9789077381373
4. Eliëns A., van de Watering M., Huurdeman H., Bhikharie S.V., Lemmers H., Vellinga P. , Clima Futura @ VU -- communicating (unconvenient) science, In Proc. GAME-ON 07, Nov 20-22, University of Bologna, Marco Roccetti (ed.), pp. 125-129, EUROSIS-ETI Publication, ISBN 9789077381373
5. A. Eliëns, topical media & game development -- media.eliens.net

resource(s) / CA3

• (my)mondriaan -- www.cjny.com/mydata
• charm(s) -- www.dgc-cga.org/about
• digital -- www.digt-paint.nl/digital_view
• demo(s) -- pilgrimage.scene.org/demoscene.html -- (wikipedia)
• net -- wwwwwwwww.jodi.org
• emergent -- www.sandberg.nl
• science -- computational-aesthetics.org

CA3 target(s)

• skill(s) -- multi-platform technical development
• knowledge -- interaction & game play
• theory -- smart technology, media & communication
• experience(s) -- large scale application with (societal) impact
• attitude -- acquisition, problem-finding, self-organization, creative solutions

have fun and play -- installation(s)

• canonical example(s) -- art(s) / quote(s)
• (online) reference material(s) -- visual design / game development
• challenging target(s) -- multimedia theatre / VJ! / festival(s)

session(s)

1. introduction topic(s) & challenge(s)
2. exploration of platform & production requirements
3. planning -- concept & application development
4. establishment of business plan
5. contract negotiation & realization
6. basic media and communication theory
7. business and societal context of the creative application(s)
8. delivery and presentation of final application(s)

reference(s)

1. method(s) -- www.agilemanifesto.org/principles.html
2. resource(s) -- game design patterns / team work
3. Eliëns A. and Vyas D., Panorama -- explorations in the aesthetics of social awareness, In Proc. GAME-ON 07, Nov 20-22, University of Bologna, Marco Roccetti (ed.), p. 71-75, EUROSIS-ETI Publication, ISBN 9789077381373
4. Eliëns A., van de Watering M., Huurdeman H., Bhikharie S.V., Lemmers H., Vellinga P. , Clima Futura @ VU -- communicating (unconvenient) science, In Proc. GAME-ON 07, Nov 20-22, University of Bologna, Marco Roccetti (ed.), pp. 125-129, EUROSIS-ETI Publication, ISBN 9789077381373
5. A. Eliëns, topical media & game development -- media.eliens.net