Versions Compared

Version Old Version 17 New Version Current
Changes made by

avillato

avillato

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

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.

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.

, 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

CMS (GRAV?)

Hosting, Databases, FTP 

...

Software:World Wide

Graphic User Interfaces

Micro Interactions

Deliverables/Exercises

...

  1. Attendance during lessons

  2. Completion of Individual Exercises A & B

  3. 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:

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) 

https://github.com/Jones-S/web-dev-zhdk-2019

Knowledge Base

...

Overview: http://wiki.iad.zhdk.ch/CP

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

EditorsOverview of Web technology

View file
nameBitsAndAtoms_KickOff_Lecture.pdf

(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

  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

 Github (Version Control),G

(Exercise A Continued)

  1. code:

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 (5.D02)

15:00 – 17:00

Introduction to:

View file
nameGitAndGithub.pdf

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

  • HTML

    • Basic Layout Elements (not responsive)

    • CSS Basics (selectors, positioning introduction)

  • Github

Florian? 

View file
nameWebDesign-compressed.pdf

Florian

Interaction Design Process

06.05.2020 (4.K16)

15:00 – 17:00

Web Technology

  • CSS Media Queries

  • CSS Animation

  • FTP

Florian?: CSS Advanced Responsive / Animations

View file
namePortfolio.zip


Florian

Basic GUI

13.05.2020 (4.K16)

15:00 – 17:00

Web Technology

  • Bulma / VueJs

  • JSON / Database / Webservice

  • Dynamic Webpage

Florian?: Javascript / (Bootstrap)

View file
namePortfolio_CSSAni_MediaQ.zip

View file
nameWebDesign2.pdf
View file
namePortfolio_All_examples.zip


Florian

Basic GUI

20.05.2020 (6.F01)

15:00 – 17:00

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

Andres

Basic GUI: Communication and Advanced Topics -> WebSocket

View file
nameWS_MATERIALS.zip

Andrés

WebSocket A + Terminal + Node JS

27.05.2020 (7.D04)

15:00 – 17:00

Web Technology
Web RTC - video streaming peer to peer

Andres

Basic GUI: Communication and Advanced Topics -> WebRTC

Presentation and Exercise I:

https://andresvillatorres.work/presentations/WebSocket/#/

Andrés

WebSocket B + Terminal + Node JS

03.06.2020 (7.D04)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 GUIWeb 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