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, which changes the perception or functioning of a place, in this case the location of your intervention.

For example of works that change a location, through an interface, see the art works bellow

Web-based works - exploring city spaces

• Ky McDonald: Exhausting a Crowd
• LUSTlab: Urban Echo
• Collective Waiting Portrait
• Janet Cardiff: Ghost Machine
• Janet Cardiff: Alter Bahnhof Video Walk
• Yoana Buzova: Leave a Message

Topics:

• interaction with audio and video
• 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

• Vector Graphics on the web
• audio and video

• Javascript
• jQuery library
• web cam on you browser, groups and your intervention, jquery revision, jquery advanced interaction
• work-session
• work-session

tutorials

• Panorama on web pages

JavaScript & jQuery

• codecademy javascript
• codecademy jquery

• Lynda jQuery-Essential-Training
• [Lynda https://www.lynda.com/jQuery-tutorials/jQuery-Web-Designers jQuery-Web-Designers]

Library books

• Learning jQuery 1.3 : better interaction design and web development with simple Javascript techniques
• jQuery in action
• JavaScript & JQuery : Interactive Front-end Web Development

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