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

From Publication Station
(Created page with " =Quarter 2 2015= == Your city in the browser == In the second quarter of Design & Technique will be focus on presenting the '''''behind the scenes'' of your intervention...")
 
 
(16 intermediate revisions by the same user not shown)
Line 1: Line 1:
[[File:js-woody-buzz.jpg]]


=Quarter 2 2015=
=Quarter 2 2015=
== Your city in the browser ==
== Your city in the browser ==
In the second quarter of Design & Technique will be focus on presenting the '''''behind the scenes'' of your intervention and research on a square from the city of Rotterdam''', through the web, to the the world. In other words, you will ''record'' fragments of your intervention – the images, sounds, history, reactions, thoughts and dreams about this square – and explore ways to present them online, so that the user gains a sense of the place and of your intervention.


This document of your intervention can consist in:  
In the second quarter of Design & Technique will be focus on the interactive side of web design.
* documentation: a "recording" of the intervention that register something that happened only in a specific moment;
 
* a window on to the process that led to your intervention - photos, archive searches, interviews.  
As an '''assignment''' you'll be asked to build '''a tool or interface for your intervention''', using web design tools.
* part of the intervention: a tool, interface or guide to the invention
 
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]
* [http://radio.garden/ Radio Garden]
 
== 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 =
* [[Courses/Design_%26_Technique-Essential_Web_Design/Q2/01 | Vector Graphics on the web]]
* [[Courses/Design_%26_Technique-Essential_Web_Design/Q2/06 | audio and video]]
 
* [[Courses/Design_%26_Technique-Essential_Web_Design/Q2/02|Javascript]]
* [[Courses/Design_%26_Technique-Essential_Web_Design/Q2/03|jQuery library]]
* [[Webcam_html| web cam on you browser]], groups and your intervention, [http://codepen.io/PublicationStation/pen/zoELXw jquery revision], [http://codepen.io/PublicationStation/pen/MbEZwb jquery advanced interaction]
* work-session
* work-session


=tutorials=
* [[Panorama on web pages]]
* [[Browser_motion]]
* Building a [[Chrome extension]]


Building on the knowledge and experience acquired in quarter one, you will be encourage to create interactive works. Outcomes can take any form, from animated drawings, interactive maps, generative image, audio-visual works, or data visualizations.
==Study resources==
==JavaScript & jQuery==
* [https://www.codecademy.com/learn/javascript codecademy javascript]
* [https://www.codecademy.com/learn/jquery codecademy jquery]


== Classes==
* [https://www.lynda.com/jQuery-tutorials/jQuery-Essential-Training Lynda jQuery-Essential-Training]
* [[Courses/Design_%26_Technique-Essential_Web_Design/Q2/01]]
* [Lynda https://www.lynda.com/jQuery-tutorials/jQuery-Web-Designers jQuery-Web-Designers]
* [[Courses/Design_%26_Technique-Essential_Web_Design/Q2/02]] - JS
* [[Courses/Design_%26_Technique-Essential_Web_Design/Q2/03]] - jQuery
* [[Courses/Design_%26_Technique-Essential_Web_Design/Q2/04]] - exploring the city - choose your own adventure game
* [[Courses/Design_%26_Technique-Essential_Web_Design/Q2/05]] - review game; tutorials  
* [[Courses/Design_%26_Technique-Essential_Web_Design/Q2/06]] - audio and video
* 07 - work-session
* 08 - feedback; work-session


=Squares and groups=
Library books
'''[[Courses/Design_%26_Technique-Essential_Web_Design/Q2/Squares and groups|Squares and groups]]
* [https://vubissmart.hro.nl/webopac/FullBB.csp?WebAction=ShowFullBB&EncodedRequest=*AA*C3*A46*D9*83*F2*A5*AB*F4*12*15*EB*10*11y&Profile=Default&OpacLanguage=dut&NumberToRetrieve=50&StartValue=1&WebPageNr=1&SearchTerm1=2014.2.219701&SearchT1=&Index1=Index1&SearchMethod=Find_1&ItemNr=1  Learning jQuery 1.3 : better interaction design and web development with simple Javascript techniques]
'''
* [https://vubissmart.hro.nl/webopac/FullBB.csp?WebAction=ShowFullBB&EncodedRequest=*AA*C3*A46*D9*83*F2*A5*AB*F4*12*15*EB*10*11y&Profile=Default&OpacLanguage=dut&NumberToRetrieve=50&StartValue=7&WebPageNr=1&SearchTerm1=2010.2.205400&SearchT1=&Index1=Index1&SearchMethod=Find_1&ItemNr=7 jQuery in action]
* [https://vubissmart.hro.nl/webopac/FullBB.csp?WebAction=ShowFullBB&EncodedRequest=*AA*C3*A46*D9*83*F2*A5*AB*F4*12*15*EB*10*11y&Profile=Default&OpacLanguage=dut&NumberToRetrieve=50&StartValue=1&WebPageNr=1&SearchTerm1=2014.2.219701&SearchT1=&Index1=Index1&SearchMethod=Find_1&ItemNr=1 JavaScript & JQuery : Interactive Front-end Web Development]


==Examples==
==Examples==
Line 35: Line 74:
* http://jviewz.com/ --> something worth seeing and hearing
* http://jviewz.com/ --> something worth seeing and hearing


== Web-based works that explore city spaces ==
== Brain storm ==  
* [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''
 
=== Subjects  ===
=== Subjects  ===
Subjects explored include:
Subjects explored include:
Line 53: Line 82:
* [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]]

Latest revision as of 14:33, 19 December 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:

  • 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

tutorials

Study resources

JavaScript & jQuery

Library books

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=5975’