...
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 focuses focus on coding and web technology, providing an important a preparation for the Basic GUI Module, for modules in future semesters, as well as preparation for a number of carrier paths.
Grading
The grades will be based on individual exercises and will account for 25% of the overall Basic GUI grade.
80% attendance is mandatory. Missing more than 20% of the lectures will result in a failing grade.
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
CMS (GRAV?)
Hosting, Databases, FTP
...
Software:World Wide
Graphic User Interfaces
Micro Interactions
Deliverables/Exercises
Attendance during lessons
Completion of Individual Exercises A & B
Documentation
Exercise A: Develop an unconventional approach to a classic UI design pattern.
Increasingly UI design is settling on well-established design patterns and conventions. While many of these patterns are based on creative and well-tested solutions, by relying on norms we reduce the potential for creative and better UIs.
Part A: Investigate a design pattern, collect a number of images of implementation of these patterns and write a short description.
http://www.welie.com/patterns/
https://threesixtyreality.co.uk/interaction-design-patterns-library/
https://www.smashingmagazine.com/2009/06/40-helpful-resources-on-user-interface-design-patterns/
Part B: Brainstorm and prototype an alternative design pattern. Record your results as a GIF.
Tools: P5.js
Exercise B: The Website
Developing a website using HTML, CSS, Javascript and CMS
Contemporary examples:
Features
UI
Images
Lists
Headings, Text
Responsive?
Old Material (from Jonas) (some good reference slides here)
https://github.com/Jones-S/web-dev-zhdk-2019
Knowledge Base
...
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 (T 6.F01) | 15:00 – 17:00 | CANCELED | Interaction Design Process | |||||||||||||
01.04.2020 (5.D02) | 15:00 – 17:00 | Introduction: History Internet and the WWW to the modern web. P5.js Editors (Research Overview of Web technology
(Research activity for Exercise A) | Luke | Interaction Design Process | ||||||||||||
08.04.2020 (T 6.F01) | 15:00 – 17:00 | Input: The HTML5 canvas element and P5.js
Github (Version Control),G (Exercise A Continued)
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) An Alternative Design Pattern example and source code. | Luke | Interaction Design Process | ||||||||||||
15.04.2020 (5.D02) | 15:00 – 17:00 | Introduction to:
GitHub (Version Control, Code sharing and Collaboration) (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 (4.K15) | 15:00 – 17:00 | 15:00 - Group prep for pressentation (Exercise A Presentation) 16:00 - Pressenting exercise A (showing prototype with screen share) 16:30 - Input: Web Hosting | Luke | Interaction Design Process | ||||||||||||
29.04.2020 (4.K16) | 15:00 – 17:00 | Introduction Web Technology: Page structure, HTML/CSSDeployment, Servers, FTP, Databases
| Florian | Interaction Design Process | ||||||||||||
06.05.2020 (4.K16) | 15:00 – 17:00 | Web Technology
Florian?: CSS Advanced Responsive / Animations
|
| Basic GUI | ||||||||||||
13.05.2020 (4.K16) | 15:00 – 17:00 | Web Technology
Florian?: Javascript / (Bootstrap)
|
| Basic GUI | ||||||||||||
20.05.2020 (6.F01) | 15:00 – 17:00 | Web Technology | Andreas? | Basic GUI: Communication and Advanced Topics -> WebSocket
| Andrés | WebSocket A + Terminal + Node JS | ||||||||||
27.05.2020 (7.D04) | 15:00 – 17:00 | Web Technology | Andreas? | Basic GUI: Communication and Advanced Topics -> WebRTC Presentation and Exercise I: | Andrés | WebSocket B + Terminal + Node JS | ||||||||||
03.06.2020 (7.D04)2020 | 15:00 – 17:00 | Guest Lecture? | Andreas? | Basic GUIWeb Technology: Communication and Advanced Topics → Headless Browsing Presentation and Exercise II: https://andresvillatorres.work/presentations/LocalhostDotRunWebAsArt/#/ Tutorial Web Socket: | Andrés | Localhost.run + Internet ART |