Courses/Design & Technique-Essential Web Design/Q2

https://docs.google.com/document/d/1UcPLLU0P7dLOR3MCsnWFeynQ4SJkpF9-cajjLex6EA4/edit#

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. Tool and interface can take the shape of a map, a game, a audio guide, a video, an animated illustration or anything else you come up with.

• 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

Classes

• Courses/Design_&_Technique-Essential_Web_Design/Q2/01
• Courses/Design_&_Technique-Essential_Web_Design/Q2/02 - JS
• Courses/Design_&_Technique-Essential_Web_Design/Q2/03 - jQuery
• 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

Squares and groups

Squares and groups

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

Web-based works that explore city spaces

• Exhausting a Crowd by Ky McDonald
• Urban Echo by LUSTlab
• Radio Aporee
• Collective Waiting Portrait
• Janet Cardiff

{{#widget:Youtube|id=Tgef5gel4sk}} Ghost Machine

{{#widget:Youtube|id=sOkQE7m31Pw}} Alter Bahnhof Video Walk

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

Work load

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.
• one main deliverable project - that will congregate the knowledge acquired from classes and deliverables onto a project where you create the behind the scenes of your intervention.