Difference between revisions of "Courses/Design & Technique-Essential Web Design/Q2"
From Publication Station
| (9 intermediate revisions by the same user not shown) | |||
| 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] | |||
* [http://radio.garden/ Radio Garden] | |||
== Topics: == | == Topics: == | ||
* '''interaction with audio and video''' | |||
* 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 23: | Line 35: | ||
* '''weekly classes''', | * '''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. | * '''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 | * '''final deliverable''' - a tool or interface for your intervention | ||
= Classes = | = Classes = | ||
| 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]] | ||
* | * [[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]] | |||
== | ==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== | ||
| Line 56: | Line 74: | ||
* http://jviewz.com/ --> something worth seeing and hearing | * http://jviewz.com/ --> something worth seeing and hearing | ||
= Brain storm == | == Brain storm == | ||
=== Subjects === | === Subjects === | ||
Subjects explored include: | Subjects explored include: | ||
Latest revision as of 14:33, 19 December 2016
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
- 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
- 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
- Browser_motion
- Building a Chrome extension
Study resources
JavaScript & 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
