Atlassian uses cookies to improve your browsing experience, perform analytics and research, and conduct advertising. Accept all cookies to indicate that you agree to our use of cookies on your device. Atlassian cookies and tracking notice, (opens new window)
Confluence
For you
Bits & Atoms II
Results will update as you type.
  • Bits & Atoms II 2018
  • Web Technologies (Former Bits & Atoms II) 2019
  • Bits & Atoms II 2020
    • Detailed Timeplan (Internal)
    • Exercises
    /
    Detailed Timeplan (Internal)
    Updated Apr 08, 2020

    Detailed Timeplan (Internal)

    Analytics

    Loading data...

    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

    • Download Slides 2019-04-12

    • Download Slides 2019-05-03

    • Download Slides 2019-05-07

    • Download Slides 2019-05-16

    • Download Slides 2019-05-23

    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:

    • https://editor.p5js.org/

    • Processing IDE in P5.js mode.

    • Any text editor

    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



     

    {"serverDuration": 55, "requestCorrelationId": "20667189648a4028914175074f658010"}