User Tools

Site Tools


courses:2013_exp_prototyping_week40

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
courses:2013_exp_prototyping_week40 [2013/10/02 14:41]
lovgren
courses:2013_exp_prototyping_week40 [2013/10/06 07:17] (current)
lovgren
Line 1: Line 1:
 +====Week 40: Coding for screen interactions====
 +//​with:​[[http://​www.thomaslovgren.com/​|Thomas Lövgren]]//​\\
  
 +
 +===Introduction===
 +This workshop gives an introduction to HTML5 and sound processing. Focus is on designing and coding prototypes for sound synthesizing in relation to user (screen) interaction. The student will have a chance to practice different design concepts, and publish responsive content for various touch devices. During the week we will also discuss and explore topics like: Accessibility,​ Mobile web & development,​ Responsive design, Usability, OOP, Multi-touch,​ Gestures, Kinect etc. The course includes theory, discussions,​ exercises and a final project with documentation.
 +
 +  * **Technology:​** HTML5 (HTML, JavaScript, CSS)
 +  * **Frameworks:​** Web Audio API, jQuery, jQuery Mobile, Touchy, ZIGFU etc.
 +  * **Software:​** Aptana Studio (freeware, Mac & PC, also installed in UID-labs)
 +  * **Debugger:​** Google Chrome (Web browser, Mac & PC, also installed in UID-labs)
 +  * **Time & Place:** Week 40, 09.00 - 18.00, Top-PC lab + Interaction Workshop
 +  * **Teacher / Tutor:** [[http://​www.thomaslovgren.com/​|Thomas Lövgren]] [[mailto:​info@thomaslovgren.com/​|info@thomaslovgren.com]] ​
 +
 +====Documents====
 +**Project Specification:​**\\
 +{{:​html5_coding_for_screen_interaction_ixd2_2013_project_spec_week40_v01.pdf|}}\\
 +
 +
 +**Audio Flowchart example:​**\\
 +{{:​courses:​html5_web_audio_api_flowchart_routing_graph_volume.jpg?​500|}}\\
 +
 +
 +====Week Overview====
 +==Monday==
 +09.00 - 18.00: Top PC-lab
 +  * Introduction
 +  * Introduction to HTML5 (HTML, JavaScript & CSS, tools & debugging)
 +  * Coding basic examples
 +  * Introduction to Web Audio API, jQuery & jQuery Mobile
 +  * Coding basic examples
 +  * Project work: Students design-sketches
 +
 +==Tuesday==
 +09.00 - 18.00: Top PC-lab
 +  * Theory, Coding, discussions & project work 
 +
 +==Wednesday==
 +09.00 - 18.00: Top PC-lab
 +  * Theory, Coding, discussions & project work
 +//keep afternoon free//\\
 +
 +==Thursday==
 +09.00 - 18.00: Top PC-lab
 +  * Theory, Coding, discussions & project work 
 +
 +==Friday==
 +09.00 - 18.00: Top PC-lab
 +  * Coding, discussions & project work
 +  * Presentations
 +
 +  * //​workspaces cleanup//\\
 +  * //​reflections and feedback//​\\
 +
 +====Links and materials provided by teachers and students====
 +Script\\
 +{{:​wiki:​html5_coding_for_screen_interaction_ixd2_2013_script.zip|}}\\
 +
 +Lecture Example files\\
 +{{:​wiki:​html5_coding_for_screen_interaction_ixd2_2013_lecture_examples.zip|}}\\
 +
 +Google Chrome APK for Android +4.1 (25 Mb)\\
 +{{:​wiki:​google_chrome_browser_android_apk_29.0.1547.59.zip|}}\\
 +
 +
 +Software & Tools
 +  * [[http://​www.aptana.com/​|Aptana Studio Software IDE]]
 +  * [[https://​www.google.com/​intl/​en/​chrome/​browser/​|Google Chrome - Browser/​Debugger]]\\
 +
 +
 +HTML5 (HTML, CSS & JavaScript)
 +  * [[http://​www.findmebyip.com/​litmus/​|HTML5 & CSS3 Browser Compatibilities]]
 +  * [[http://​www.w3.org/​TR/​html5/​introduction.html|HTML5 W3C Documentation]]
 +  * [[http://​www.w3schools.com/​html/​html5_intro.asp|HTML5 introduction W3Schools]]
 +  * [[http://​www.w3schools.com/​cssref/​default.asp|CSS Reference W3Schools]]
 +  * [[http://​www.w3schools.com/​js/​default.asp|JavaScript introduction W3Schools]]\\
 + 
 +
 +jQuery
 +  * [[http://​www.jQuery.com|jQuery]]
 +  * [[http://​jqueryui.com/​|jQueryUI]]
 +  * [[http://​jquerymobile.com/​|jQuery Mobile]]\\
 +
 +
 +HTML5 Audio
 +  * [[http://​www.html5audio.org/​|HTML5 Audio - frameworks & examples]]
 +
 +
 +Web Audio API
 +  * [[http://​caniuse.com/​audio-api|Web Audio Browser Support]]
 +  * [[https://​dvcs.w3.org/​hg/​audio/​raw-file/​tip/​webaudio/​specification.html|Web Audio API W3C documentation]]
 +  * [[http://​docs.webplatform.org/​wiki/​tutorials/​intro_web_audio_api_1|Introduction to the Web Audio API]] 
 +  * [[http://​middleearmedia.com/​web-audio-api-oscillators/​|Web Audio API Oscillators]] ​
 +  * [[http://​webaudioapi.com/​samples/​|Web Audio API Samples]]\\
 +  * [[http://​www.html5rocks.com/​en/​tutorials/​webaudio/​intro/​|Web Audio API introduction]]\\
 +  * [[https://​github.com/​Dinahmoe/​tuna|TUNA effect library]]\\
 +
 +
 +Multi-Touch & Gestures
 +  * [[http://​gesturecons.com/​|Multi-touch & Gestures guide]]
 +  * [[http://​www.html5rocks.com/​en/​mobile/​touch/​|HTML5 Multi-touch Web Development]]
 +  * [[https://​dvcs.w3.org/​hg/​webevents/​raw-file/​tip/​touchevents.html|W3C Touch-events]]
 +  * [[http://​labs.rampinteractive.co.uk/​touchSwipe/​demos/​|TouchSwipe framework]]
 +  * [[http://​touchyjs.org/​|Touchy - Multi-touch & gestures]]
 +  * [[http://​jgestures.codeplex.com/​|jGestures]]
 +
 +
 +
 +====Student Work (Results of the week) ====
 +\\
courses/2013_exp_prototyping_week40.txt · Last modified: 2013/10/06 07:17 by lovgren