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
    Two hearts overlapped with each other
    Welcome back
    Catch up on the top discussions and highlights from your team.
    /
    Bits & Atoms II 2020
    Updated Jun 05, 2020

    Bits & Atoms II 2020

    Analytics

    Loading data...

     

    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:

    • Web Storm

    • Github Desktop

    Deliverables/Exercises

    1. Attendance during lessons

    2. Completion of Individual Exercises

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

    • Knowledge base

    • ExercisesPreview

    • https://www.w3schools.com/

    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 activity 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. What are the main differences between p5.js and processing?

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



     

    {"serverDuration": 50, "requestCorrelationId": "adafcf1c1a3147ccb101b434ca7aece3"}