Detailed Timeplan (Internal)

Exercise B: The Website

Developing a website using HTML, CSS, Javascript and CMS

Contemporary examples:

https://www.washingtonpost.com/graphics/2020/world/corona-simulator/?fbclid=IwAR1WBxrEnSHy7nh1IqhSz82lVVlRzC-enzHkQhqMdkBxddN1HPwm0t1EwoE&utm_campaign=wp_main&utm_medium=social&utm_source=facebook

Features

  • UI

  • Images 

  • Lists

  • Headings, Text

  • Responsive?

Old Material (from Jonas) (some good reference slides here) 

GitHub - Jones-S/web-dev-zhdk-2019: Course material for web dev module.

Schedule

Date (Room)

Time

Topic

Lecturer 

During which  course:

Date (Room)

Time

Topic

Lecturer 

During which  course:

25.03.2020 

15:00 – 17:00

CANCELED

 

Interaction Design Process

01.04.2020

15:00 – 17:00

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

(Research for Exercise A)

Luke

Interaction Design Process

08.04.2020

15:00 – 17:00

Input: The HTML5 canvas element 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:

4. 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)

5. 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

15.04.2020 

15:00 – 17:00

Github (Version Control)

(Exercise A Colaborative Coding Continued)

Luke

Interaction Design Process

22.04.2020 

15:00 – 17:00

(Exercise A Presentation)

Hosting

Luke

Interaction Design Process

29.04.2020 

15:00 – 17:00

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

  • HTML

    • Basic Layout Elements

    • CSS Basics (selectors, positioning introduction)

Florian? 

Interaction Design Process

06.05.2020 

15:00 – 17:00

Web Technology

  • CSS Media Queries

  • CSS Animation

  • FTP


Florian?

Basic GUI

13.05.2020 

15:00 – 17:00

Web Technology

  • Bulma / VueJs

  • JSON / Database / Webservice

  • Dynamic Webpage


Florian?

Basic GUI

20.05.2020 

15:00 – 17:00

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

Andres

Basic GUI

27.05.2020 

15:00 – 17:00

Web Technology
Web RTC - video streaming peer to peer

Andres

Basic GUI

03.06.2020

15:00 – 17:00

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

Andres

Basic GUI