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

From Publication Station
 
(5 intermediate revisions by the same user not shown)
Line 21: Line 21:
* Janet Cardiff: [https://www.youtube.com/watch?v=sOkQE7m31Pw ''Alter Bahnhof Video Walk'']
* Janet Cardiff: [https://www.youtube.com/watch?v=sOkQE7m31Pw ''Alter Bahnhof Video Walk'']
* Yoana Buzova: [http://oyoana.com/leaveamessage Leave a Message]
* Yoana Buzova: [http://oyoana.com/leaveamessage Leave a Message]
 
* [http://radio.garden/ Radio Garden]


== Topics: ==
== Topics: ==
Line 47: Line 47:
* work-session
* work-session


=tutorials=
* [[Panorama on web pages]]
* [[Browser_motion]]
* Building a [[Chrome extension]]
==Study resources==
==JavaScript & jQuery==
* [https://www.codecademy.com/learn/javascript codecademy javascript]
* [https://www.codecademy.com/learn/jquery codecademy jquery]
* [https://www.lynda.com/jQuery-tutorials/jQuery-Essential-Training Lynda jQuery-Essential-Training]
* [Lynda https://www.lynda.com/jQuery-tutorials/jQuery-Web-Designers jQuery-Web-Designers]
Library books
* [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==

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