Interaction Design Wiki ･ Bits & Atoms II

Bits & Atoms II 2020

Overview

This seminar series covers history, theory and skills relating to technology and its relevance for design practice in contemporary and future contexts. The semester II Bits and Atoms module focus on coding and web technology, providing a preparation for the Basic GUI Module, for modules in future semesters, as well as preparation for a number of carrier paths.

The format of the course is every Wednesday afternoon via Zoom at 15:00. Most weeks there will be some exercises set to complete before the following lesson, requiring a small time commitment for self-study.

Topics:

World Wide Web

Web technology

User Interfaces

Technology

p5.js / Javascript

HTML & CSS

Hosting, Databases, FTP

Software:

Deliverables/Exercises

Attendance during lessons
Completion of Individual Exercises
Each Exercises (and sub-exercise) Documented in a pdf format. You may re-use your documentation format from the 1st-semester programming basics course. Deadline 11.06.20 evening. Place on the server /DDE/BDE_VIAD/01_ABGABEN/20_FS/Sem2_Basic_GUI_II

Course Resources:

Schedule

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 activity for Exercise A)	Luke	Interaction Design Process
08.04.2020	15:00 – 17:00	Input: The HTML5 canvas element and P5.js What is the canvas element? What is P5.js? What are the main differences between p5.js and processing? 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
15.04.2020	15:00 – 17:00	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
22.04.2020	15:00 – 17:00	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
29.04.2020	15:00 – 17:00	Web Technology: Page structure, HTML/CSS	Florian	Interaction Design Process
06.05.2020	15:00 – 17:00	Web Technology: CSS Advanced Responsive / Animations	Florian	Basic GUI
13.05.2020	15:00 – 17:00	Web Technology: Javascript / (Bootstrap)	Florian	Basic GUI
20.05.2020	15:00 – 17:00	Web Technology: Communication and Advanced Topics -> WebSocket	Andrés	WebSocket A + Terminal + Node JS
27.05.2020	15:00 – 17:00	Web Technology: Communication and Advanced Topics -> WebRTC Presentation and Exercise I: https://andresvillatorres.work/presentations/WebSocket/#/	Andrés	WebSocket B + Terminal + Node JS
03.06.2020	15:00 – 17:00	Web Technology: Communication and Advanced Topics → Headless Browsing Presentation and Exercise II: https://andresvillatorres.work/presentations/LocalhostDotRunWebAsArt/#/ Tutorial Web Socket: https://www.youtube.com/watch?v=Wf1siAZAMtw&t=733s	Andrés	Localhost.run + Internet ART