Bald:

Wichtige Informationen

• …zur Abschlusspräsentation
• …zur Abgabe
• (findet sich alles nochmals unter Scheinvergabe)

Angeschaut haben wir

• Portfolio Lukas Bär
• spiralgetty.wiki

Nochmals der Hinweis: KI in VS Code

Ihr könnt KI-Tools direkt in Visual Studio Code nutzen (bspw. im Agent-Modus). Meldet euch mit eurer HAW-Adresse an. Um unbegrenzt viele Nachrichten schreiben zu können, müsst ihr dieses kleine How-To befolgen.

Kursende: Wir haben verabredet, dass…

• …wer schon fertig ist, am 4.2. präsentieren kann
• …alle anderen am 11.2. präsentieren

TODO

• Hier für Einzelgespräche eintragen. Ihr könnt auch zu zweit oder zu dritt kommen. Dann entsprechend viele Slots eintragen. Des Weiteren könnt ihr auf jeden Fall auch immer da sein, auch wenn ihr nicht dran seid.

Wir haben an den Projekten gearbeitet

Besprechen

• Interaction.World Updates
• Makey Makey
• Timing
• Bedarfe
• Arbeitsweise, Tipps & Tricks
• weiterer Ablauf
• Ziel / Abschluss

Random Links

• Lyra Rebane @ 39c3: CSS Clicker Training: Making games in a "styling" language
• Lyra Rebane: You no longer need JavaScript
• Video: The early Web (2019)
• Nick Betzlbacher: Adventskalender
• Kjell Wistoff & Conrad Weise: movement 504
• javeline uffline: too dirty to be trained
• No Replica: What is Wikipedia
• Yehwan Song

Github-Copilot für Studierende

• How-To

Zwischenpräsentation: erledigt

Informationen zur Zwischenpräsentation

TODOs

• Zwischenpräsentation

TODOs II, weiterhin: Flexbox

• anschauen: Flexbox Tutorial für Anfänger*innen
• anschauen: Sebastian zeigt Anwendungsbeispiele für Flexbox
• Bonus: Spielerisch üben mit Flexbox Froggy
• Bonus 2: Code: flexbox + hover + transition

Wir haben heute einzeln gesprochen. Mein Eindruck war, dass sich die Mehrheit das auch für kommende Woche wünscht.

Wenn ihr wollt, könnt ihr, zusätzlich zu eurem Termin, jederzeit kommen und vor Ort arbeiten. Ich freue mich immer über Gesellschaft :)

TODO 1: Eintragen

• Hier eintragen für Einzelgespräche

TODO 2: Flexbox

• anschauen: Flexbox Tutorial für Anfänger*innen
• anschauen: Sebastian zeigt Anwendungsbeispiele für Flexbox
• Bonus: Spielerisch üben mit Flexbox Froggy
• Bonus 2: Code: flexbox + hover + transition

Wir haben an den Projekten gearbeitet.

TODOs

• Für Einzelgespräche eintragen
• Bitte kommt gut vorbereitet. Denkt daran: Verliert euch nicht in eurem Code. Erstellt z.B. Storyboards, Skizzen, Collagen/Entwürfe auf Papier / in einem Grafikprogramm, bevor ihr in das Programmieren einsteigt. Per Code wiederum könnt ihr erste Skizzen anfertigen, um herauszufinden, ob das, was ihr vorhabt, funktioniert.

Heute haben wir mit KI kleine Javascript-Schnipsel generiert und über Slider gesprochen.

CodePens

• Zustandsänderung durch Click
• Click für einen Ton – hier haben wir ein zweites Script generiert, das bei jedem Klick auf ein .quadrat einen vom Browser synthetisierten Ton abspielt. Das Script haben wir unter unserem ersten Script eingefügt

Tutorial: Eigene Seite publizieren

Seite online publizieren

TODOs

• Falls ihr noch unsicher seid: üben :)
• Projekt weiterverfolgen; (Code-)Skizzen und Collagen usw anfertigen.
  Unter Umständen auf eine realistische Größe/Komplexität reduzieren (was traut ihr euch zu?!). Es ist besser, das Projekt/Konzept einfach zu halten und mehr Zeit für das Design zu haben, als sich im Code(en) zu verlieren!

Neu

• Zeitplan

Angeschaute Links

• Mickie: ONE BUTTON NIPPLE GOLF
• Mathew Rayfield: Popup Trombone
• Bernadette Geiger: Womxn inventing the Internet
• Computer Grrrls
• Mindy Seu: Cyberfeminism Index
• wollte ich zeigen, kam aber nicht mehr dazu: queeringthemap.com
• Simon Baer: Cannot sleep with snoring husband
• Lina Schwarzenberg & Emily Krause Exit Staubi

Tools

• Invite Are.na-Gruppe
• Link zur Are.na-Gruppe
• Visual Studio Code
• Starter-Kit basic mit reset

Übung im Kurs

• Portrait

TODO (I)

• Wie geht es für euch weiter: Projektidee(n), Skizzen, Links etc. mitbringen. Wir sprechen dann gemeinsam darüber. Ihr könnt dafür gerne euren Are.na-Account verwenden.

TODO (II)

Aufgabe für die nächsten Wochen:

• Gemeinsam sammeln und überlegen how to: publish online collaboratively und how to: make public / find a public

Zusätzlich habe ich noch einen Channel Surfclub abgelegt. Speichert dort gerne ab, was euch Spannendes beim Surfen begegnet ist.

Links etc. verwalten

• Are.na?

Materialien

• Intro CSS
• CSS, u.a. font-size, font-family, font-weight, font-style, line-height, color, background-color, margin, padding, border

Links

• Trailblazers Event
• Notpron
• Chia Amisola: z.B. Internet Ambient (Performance), All I Love
• Lyra Rebane: Antonymph
• Tiger Dingsun: Reading Machines

TODO

• Fünf Seiten für :hover-Performance
  bei der Wahl eures Materials seid ihr frei

Links zum warm werden

• Checkbox Race (Teil der Checkbox Olympics)
• Pitscher.net: Clicker
• Pitscher.net: Mousemoves

Materialien

• gemacht: die Übung Hack
• Input zu HTML

TODO

• Die Übung Eine Seite voller Links machen
• Wer mit Pop-Ups-Fenstern arbeitet, kann gerne einen Blick auf die Arbeiten von Chia Amisola werfen