Difference between revisions of "Courses/Design & Technique-Essential Web Design/Q2"

From Publication Station
Line 10: Line 10:
As an '''assignment''' you'll be asked to build '''a tool or interface for your intervention''', using web design tools.
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.
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: [http://www.exhaustingacrowd.com/ Exhausting a Crowd]
* LUSTlab: [http://lust.nl/#projects-3478 Urban Echo]
* [[Courses/Design_%26_Technique-Essential_Web_Design/works/Collective Waiting Portrait|Collective Waiting Portrait]]
* Janet Cardiff: [https://www.youtube.com/watch?v=Tgef5gel4sk ''Ghost Machine'' ]
* Janet Cardiff: [https://www.youtube.com/watch?v=sOkQE7m31Pw ''Alter Bahnhof Video Walk'']
* Yoana Buzova: [http://oyoana.com/leaveamessage Leave a Message]
 


== Topics: ==
== Topics: ==
Line 32: Line 43:
* [[Courses/Design_%26_Technique-Essential_Web_Design/Q2/02|Javascript]]
* [[Courses/Design_%26_Technique-Essential_Web_Design/Q2/02|Javascript]]
* [[Courses/Design_%26_Technique-Essential_Web_Design/Q2/03|jQuery library]]
* [[Courses/Design_%26_Technique-Essential_Web_Design/Q2/03|jQuery library]]
* <s>[[Courses/Design_%26_Technique-Essential_Web_Design/Q2/04|exploring the city]] choose your own adventure game</s> (d3)
* [[Webcam_html| web cam on you browser]], groups and your intervention
* <s>[[Courses/Design_%26_Technique-Essential_Web_Design/Q2/05|review game; tutorials ]]</s> 
* work-session  
* 07 - work-session  
* 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: [http://www.exhaustingacrowd.com/ Exhausting a Crowd]
* LUSTlab: [http://lust.nl/#projects-3478 Urban Echo]
* [http://aporee.org/maps/ Radio Aporee]
* [[Courses/Design_%26_Technique-Essential_Web_Design/works/Collective Waiting Portrait|Collective Waiting Portrait]]
* Janet Cardiff: [https://www.youtube.com/watch?v=Tgef5gel4sk ''Ghost Machine'' ]
* Janet Cardiff: [https://www.youtube.com/watch?v=sOkQE7m31Pw] ''Alter Bahnhof Video Walk''


==Examples==
==Examples==

Revision as of 13:58, 26 November 2016


Js-woody-buzz.jpg

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


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


Examples

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