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 and P5.js

1. What is the canvas element?

2. What is P5.js?

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

4. What can you use to write and edit P5.js code:

• https://editor.p5js.org/

• Processing IDE in P5.js mode.

• Any text editor

6. What is p5js instance mode?

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)

6. Setting up p5.js in webstorm 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!

An Alternative Design Pattern example and source code.

Luke

Interaction Design Process

Introduction to:

GitHub (Version Control, Code sharing and Collaboration)

Github Desktop

(Exercise A Continued)

Continue working in groups on Exercise A using https://teddavis.org/p5live/. Create a new repository on GitHub (or fork the template) and save your code there.

Luke

Interaction Design Process

15:00 - Group prep for pressentation

16:00 - Pressenting exercise A (showing prototype with screen share)

16:30 - Input: Web Hosting

Luke

Interaction Design Process

Web Technology: Page structure, HTML/CSS

Florian

Interaction Design Process

Web Technology: CSS Advanced Responsive / Animations

Florian

Basic GUI

Web Technology: Javascript / (Bootstrap)

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