Page Comparison

CANCELED

Interaction Design Process

Introduction: History Internet and the WWW to the modern web. Overview of Web technology

(Research activity for Exercise A)

Luke

Interaction Design Process

Input: The HTML5 canvas element

Editors

P5.js

(Exercise A Continued)and P5.js

1. What is the canvas element?

2. What is P5.js?

3. How can you use to write and edit P5.js code:

• https://editor.p5js.org/

• Processing IDE in P5.js mode.

• Any text editor

1. What are the main differences between p5.js and processing?

Exercise: Learning P5.js with a Collaborative Coding Jam. In groups of three, create a simple interactive visual. Try using some of your previous work in processing for inspiration https://teddavis.org/p5live/

(Sharing Outcomes)

1. Setting up p5.js in weblion using the course

https://github.com/IAD-ZHDK/p5js-Templates.

(Short Break)

Exercise A (Continued)
In your groups, present your design patterns from the last weeks' exercise. Brainstorm alternatives for this pattern, and choose one design pattern to develop as a group. Make a short-list of challenges that will need to be tackled to get your pattern to work. Start coding!

Luke

Interaction Design Process

Github (Version Control)

https://teddavis.org/p5live/

(Exercise A Continued)

Luke

Interaction Design Process

(Exercise A Presentation)

Hosting

Luke

Interaction Design Process

Web Technology: Page structure, HTML/CSS

Florian

Interaction Design Process

Web Technology: CSS Advanced

Florian

Basic GUI

Web Technology: Backend Technology

Florian

Basic GUI

Web Technology: Communication and Advanced Topics

Andrés

Basic GUI

Web Technology: Communication and Advanced Topics

Andrés

Basic GUI

Web Technology: Communication and Advanced Topics

Andrés

Basic GUI