Courses/Design & Technique-Essential Web Design/Q2

Quarter 2 2015

Your city in the browser

In the second quarter of Design & Technique will be focus on the interactive side of web design.

As an assignment you'll be asked to build a tool or interface for your intervention, using web design tools.

Tools and interfaces can take the shape of a map, a game, a audio guide, a video, an animated illustration or anything else you come up with.

Topics:

• vectorial drawings: that can react to the user actions in the browser
• Javascript and jQuery: to interaction with elements of you page.
• capture web cam
• geolocation

deliverables

The work load for the quarter will be divided into:

• weekly classes,
• simple weekly deliverables – small exercises that consolidate the techniques and concepts approached in classes, as well as allow you to find expressive and personal ways of employing them.
• final deliverable - a tool or interface for your intervention

Classes

• Courses/Design_&_Technique-Essential_Web_Design/Q2/01 - Vector Graphics on the wweb
• Courses/Design_&_Technique-Essential_Web_Design/Q2/02 - Javascript
• Courses/Design_&_Technique-Essential_Web_Design/Q2/03 - jQuery library
• Courses/Design_&_Technique-Essential_Web_Design/Q2/04 - exploring the city - choose your own adventure game
• Courses/Design_&_Technique-Essential_Web_Design/Q2/05 - review game; tutorials
• Courses/Design_&_Technique-Essential_Web_Design/Q2/06 - audio and video
• 07 - work-session
• 08 - feedback; work-session

Web-based works - exploring city spaces

• Grotkerkplein example http://publicationstation.wdka.hro.nl/go-student/Q2/Grotekerkplein/
• Ky McDonald: Exhausting a Crowd
• LUSTlab: Urban Echo
• Radio Aporee
• Collective Waiting Portrait
• Janet Cardiff: Ghost Machine
• Janet Cardiff: [1] Alter Bahnhof Video Walk

Examples

• Courses/Design_&_Technique-Essential_Web_Design/Q2/Example/Business-card - constantly change image
• Courses/Design_&_Technique-Essential_Web_Design/Q2/Example/Form - user text input

• complex animations
• Play_pause_video
• http://species-in-pieces.com/ --> very awesome
• http://jviewz.com/ --> something worth seeing and hearing

Brain storm =

Subjects

Subjects explored include:

• Scalable Vector Graphics (SVG) – for the creation of interactive and animated vector images in the browser, also in conjunction with vector drawing software, such as Illustrator and Inkscape.
• JavaScript and jQuery - to provide the interactive and dynamic elements to web pages to pages
• Snap.svg Javascript libraries - for SVG manipulation.
• D3 Javascript library - for the creation of visualizations
• HTML audio-video and canvas