Page Comparison

CANCELED

Interaction Design Process

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

(Research for Exercise A)

Luke

Interaction Design Process

Input: The HTML5 canvas element and P5.js

1. What is the canvas element

Editors

1. ?

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 Collaborative Coding. In groups of three, create a simple interactive visual. Try using some of your previous work in processing for inspiration https://teddavis.org/p5live/

Exercise A (Continued)
In your group, present your ideas f

(Exercise A Continued)

Luke

Interaction Design Process

Github (Version Control)

https://teddavis.org/p5live/

(Exercise A Continued)

Luke

Interaction Design Process

(Exercise A Presentation)

Hosting : Netlify

Luke

Interaction Design Process

Introduction Web Technology: Page structure, HTML/CSS
Deployment, Servers, FTP, Databases

• HTML

  • Basic Layout Elements

  • CSS Basics (selectors, positioning introduction)

Florian? 

Interaction Design Process

Web Technology

• CSS Media Queries

• CSS Animation

• FTP
  

Florian?

Basic GUI

Web Technology

• Bulma / VueJs

• JSON / Database / Webservice

• Dynamic Webpage

Florian?

Basic GUI

Web Technology
Web Sockets (socket io , node js, osc)

Andres

Basic GUI

Web Technology
Web RTC - video streaming peer to peer

Andres

Basic GUI

Headless Browsing ( practice ) + hosting a web on your own computer ( local.run and IP forwarding ) & Net Art Input ( Theory )

Andres

Basic GUI