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 -> WebSocket

AndrésBidirectional Data Transmission

WebSocket A + Terminal + Node JS

Web Technology: Communication and Advanced Topics -> WebRTC

Presentation and Exercise I:

Andrés

Real Time Communicationhttps://andresvillatorres.work/presentations/WebSocket/#/

Andrés

WebSocket B + Terminal + Node JS

Web Technology: Communication and Advanced Topics → Headless Browsing

Presentation and Exercise II:

Andrés

Testing, Automating and Collecting Data / Scraping Browser Based Networkshttps://andresvillatorres.work/presentations/LocalhostDotRunWebAsArt/#/

Tutorial Web Socket:

https://www.youtube.com/watch?v=Wf1siAZAMtw&t=733s

Andrés

Localhost.run + Internet ART