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

From Publication Station
Line 1: Line 1:
https://docs.google.com/document/d/1UcPLLU0P7dLOR3MCsnWFeynQ4SJkpF9-cajjLex6EA4/edit#
 
 
[[File:js-woody-buzz.jpg]]


=Quarter 2 2015=
=Quarter 2 2015=
Line 10: Line 12:
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.


Topics:  
== Topics: ==
* vectorial drawings: that can react to the user actions in the browser
* vectorial drawings: that can react to the user actions in the browser
* Javascript and jQuery: to interaction with elements of you page.
* Javascript and jQuery: to interaction with elements of you page.
Line 16: Line 18:
* geolocation
* geolocation


== Classes==  
 
* [[Courses/Design_%26_Technique-Essential_Web_Design/Q2/01]]
=== deliverables ===
* [[Courses/Design_%26_Technique-Essential_Web_Design/Q2/02]] - JS
The work load for the quarter will be divided into:
* [[Courses/Design_%26_Technique-Essential_Web_Design/Q2/03]] - jQuery
* '''weekly classes''',
* [[Courses/Design_%26_Technique-Essential_Web_Design/Q2/04]] - exploring the city - choose your own adventure game
* '''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.
* [[Courses/Design_%26_Technique-Essential_Web_Design/Q2/05]] - review game; tutorials  
* '''final deliverable''' - a tool or interface for your intervention
 
 
= Classes =
* [[Courses/Design_%26_Technique-Essential_Web_Design/Q2/01]] - Vector Graphics on the wweb
* [[Courses/Design_%26_Technique-Essential_Web_Design/Q2/02]] - Javascript
* [[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>
* <s>[[Courses/Design_%26_Technique-Essential_Web_Design/Q2/05]] - review game; tutorials </s>
* [[Courses/Design_%26_Technique-Essential_Web_Design/Q2/06]] - audio and video
* [[Courses/Design_%26_Technique-Essential_Web_Design/Q2/06]] - audio and video
* 07 - work-session  
* 07 - work-session  
* 08 - feedback; work-session
* 08 - feedback; work-session


=Squares and groups=
 
'''[[Courses/Design_%26_Technique-Essential_Web_Design/Q2/Squares and groups|Squares and groups]]
== Web-based works - exploring city spaces ==
'''
* 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==
Line 39: Line 54:
* http://jviewz.com/ --> something worth seeing and hearing
* http://jviewz.com/ --> something worth seeing and hearing


== Web-based works that explore city spaces ==
* [http://www.exhaustingacrowd.com/ Exhausting a Crowd by Ky McDonald]
* [http://lust.nl/#projects-3478 Urban Echo] by LUSTlab
* [http://aporee.org/maps/ Radio Aporee]
* [[Courses/Design_%26_Technique-Essential_Web_Design/works/Collective Waiting Portrait|Collective Waiting Portrait]]
* '''Janet Cardiff'''


{{youtube|Tgef5gel4sk}} ''Ghost Machine'' 
{{youtube|sOkQE7m31Pw}} ''Alter Bahnhof Video Walk''


= Brain storm ==
=== Subjects  ===
=== Subjects  ===
Subjects explored include:
Subjects explored include:
Line 57: Line 64:
* [http://d3js.org/ D3] Javascript library - for the ''creation of visualizations''
* [http://d3js.org/ D3] Javascript library - for the ''creation of visualizations''
* HTML audio-video and canvas
* 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.
[[File:js-woody-buzz.jpg]]

Revision as of 18:07, 30 October 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.

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


Web-based works - exploring city spaces

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
Retrieved from ‘https://ps.wdka.nl/wiki/index.php?title=Courses/Design_%26_Technique-Essential_Web_Design/Q2&oldid=5188’