Klasse: 6iCbb
Die Aufzeichnungen sowie der aktuelle Punktestand der Studierenden sind im jeweiligen Wochenchannel innerhalb von Teams verfügbar.
Datum/Uhrzeit: 15.06.2021 - 12:15 bis 15:00
- Einführung in die Synchronisation der Team-Applikation (Live Mulituser) (Timestamps 1. Lektion: [04:20] - [18:00])
- Beispiel mit der Punktevergabe in Teams
- Welche Ansätze & Strukturen werden verwendet, um ein solches UI zu bauen und wie diese in unserer CaseStudy (PEP) konkret aussehen könnten
- Diverse konkrete Beispiele für solche Apps (Timestamps 1. Lektion: [17:00] - [33:30])
- Follow-me: Mailclients, Kalender, Passwordmanager etc.
- Applikationen, welche ihren Datenstand über mehrere Geräte hinweg synchronisieren
- Team Apps: Microsoft Teams, Google Docs etc.
- Applikationen, in welchen eine Kollaboration mit mehreren anderen Nutzern live möglich bzw. explizit gewünscht ist
- Andere Beispiele aus der Industrie für "spezifischere" Use-Cases, welche als Motivation/Anregung dienen sollen, was technologisch möglich ist
- Follow-me: Mailclients, Kalender, Passwordmanager etc.
- Konzept zur Umsetzung & mögliche neue Probleme, welche mit einer solchen Lösung auftreten (Timestamps: [33:30] - [44:20])
- Self-Notifcation: Die eigenen Änderungen werden an den Server gesendet, welcher diese erneut an (neben den anderen Nutzern) den eigenen Nutzer sendet. Wie wird damit umgegangen?
- Hysterese: Die Änderungen der verschiedenen Nutzer hängen hinterher bzw. geraten aus einem synchronisierten Gesamtzustand
- Demo der Personaleinsatzplanung (Timestamps 2. Lektion [00:00] - [23:30])
- Hinweis, dass für die Implementierung solcher Features technologische und konzeptionelle Überlegungen für das UI, die Protokolle und das Modell gemacht werden müssen
- Vorführung der gleichzeitigen Nutzung mit einer anderen Person
- Gemeinsame Nutzung mit allen Studierenden in der Klasse, um auf die offenen Probleme (wie z.B die Hysterese) aufmerksam zu machen bzw. diese zu erzingen und so vorzuführen
- Eingehen auf weitere offene Probleme bzw. wie diese auch behoben werden können, welche Ansätze es gibt. (Timestamps 2. Lektion: [23:30] - [34:38])
- Abschluss: Code-Walkthrough & AMA
- Verweis auf die Thesis Event Based Real-Time Synchronization of Web Applications, welche (unter anderem) auf verschiedene Arten von Duplex-Kommunikation (Kapitel 3) innerhalb des Webs eingeht. (Timestamps 3. Lektion: [00:00] - [09:00])
- Code-Walkthrough der Lösung für die "Team"-Personaleinsatzplanung (Timestamps 3. Lektion: [09:00] - [38:30])
- Ask me anything (Timestamps 3. Lektion: [38:30] - [49:40])
- Frage zur Meinung bzw. Empfehlung, wie ein komprimiertes JS für den produktiven Betrieb gebaut werden soll
- Allenfalls Punkte-Endstand überprüfen
- Keine
Datum/Uhrzeit: 08.06.2021 - 12:15 bis 15:00
- Lektion 1 & 2 Besprechung der Lehrevaluation
- Siehe Feedback Pdf in Teams (Woche 14)
- Erklärung bzw. Hintergründe der Bewertung und Diskussionen
- Lektion 3: Fortsetzung der Lösung letzter Woche
- Personenansicht: Korrektes verhalten des Detail-Views, wenn keine Person ausgewählt ist (Was passiert, wenn die "Nicht-Person" ausgewählt ist)
- Heutiges Goodie - 3d-Effekt für das den "eingeklappten" Zustand (Timestamps: [00:00] - [15:00])
- Einführen in die Lösung und gemeinsame Modifikation (Timestamps: [15:00] - [51:47])
- Hinzufügen eines "detailed"-Qualifiers
- Behanldung der "Nicht-Person"
- Ausführungen bzgl. dem Aufbau bzw. der Organisation der Daten
- ModelWorld statt "Bindstorm" - Nicht "viel" neue Logik implementieren, sondern das Modell erweitern
- Livecoding für die richtige Handhabung, wenn keine Person selektiert ist
- Personenansicht: Korrektes verhalten des Detail-Views, wenn keine Person ausgewählt ist (Was passiert, wenn die "Nicht-Person" ausgewählt ist)
- Identifizieren von Teilen, die man verstanden hat, solche die unklar sind und welche man überhaupt nocht nicht versteht
- Review
- Keine
Datum/Uhrzeit: 01.06.2021 - 12:15 bis 15:00
- Heutiges CSS-Goodie (Timestamps 1. Lektion [00:00] - [17:15])
- Glossy Buttons (Glanzeffekt bei Hover)
- Before-Pseudoelement, radial-gradient, custom-properties
- JsDoc für Rest, Test & Util (J. Villing)
- Code hier im Repo
- Livecoding (Timestamp: [17:15] - [27:00])
- Veranschaulichung der IDE-Integration innerhalb eines Tests (myNewTest.js)
- RestClient (Timestamp: [27:00] - [38:00])
- Typedefs & Examples
- Gedanken bzgl. Interfaces
- JsDoc im Allgmeinen, Rückblick & Kritik
- Neues CSS für Personaleinsatzplanung (D. Lagger, M. de Laat)
- Timestamp (2. Lektion: [00:00] - [20:00])
- Kritik und Überlegungen bzgl. des alten Designs
- Einführung ins neue Design (Stil, Farbwahl)
- Demo für die Veranschaulichung des Umgangs
- Diskussion
- Reactive, Stable Binding
- Anzeige der gleichen Information durch mehrere Komponenten
- Modularer Aufbau, möglichst wenig Wissen einer Komponenten über alle Anderen
- Theorie (Timestamp 2. Lektion [20:00] - [53:03] & 3. Lektion [00:00] - [13:00])
- Shared-Model
- Problematik der Identitätserhaltung (Wie wird ermittelt, was sich verändert hat)
- Bindings (Gleicher Converter, gleicher Validator etc)
- View-Specific Models
- Stabiles Binding von Elementen zum Presentation-Model (1x Binden, Zuordnung öndert sich nie)
- Deklarative Attribute
- Qualifier zum Ermitteln, welche Daten sich geändert haben (Reaktives Binding)
- Qualifier vergeben, falls jmd. anders Interesse haben könnte
- Komponenten können einfach rausgelöscht, hinzugefügt und verändert werden, ohne dass die anderen Elemente betroffen sind
- Konzept "Model-World"
- Es gibt nur eine Model-World / ein Kontext für das UI
- Kontext für Attribute und Qualifier
- Regeln in den Model-World (Siehe Slides)
- Shared-Model
- Code-Walkthrough (Timestamp 3. Lektion [13:00] - [47:00])
- Demo
- person.js
- instantUpdateProjector.js
- presentationModel.js
- Tests
- Wiederverwendbarkeit der Projektoren
- Code für das heutige Konzept verstehen und Fragen aufschreiben
- Review
- Keine
Datum/Uhrzeit: 25.05.2021 - 12:15 bis 15:00
- Heutiges CSS-Goodie (Timestamps 1. Lektion [00:00] - [09:00])
- Sticky Header für bessere Nutzung von langen Tabellen
- top: 0 -> Wenn der Wert beim Scrollen überschritten wird, dann wird das Element oben aus dem Viewport geschoben; position: sticky
- Funktioniert in Chrome nicht
- Einführung Service Abstraction [09:00] - [38:31] & ganze Lektion 2
- Recap letzte Woche
- Interface für mehrere Implementierungen vom Service (Lokal & Remote) -> Interfaces mit JSDoc (eher als Hilfe in der IDE als für HTML-Reports)
- Stichwort "Duck-Typing"
- Diskussion über alternativer Ansatz mittels mit Prototypes
- Import domainDoc.js (Nur JsDoc-Definitionen im File)
- Examples gut für den Entwickler
- Verweis auf Praxisbeispiel - Projektarbeit mit einer guten Dokumentation
- Stichwort "Duck-Typing"
- Code-Walkthrough jsonToModel-Mapping & den verschiedenen service-Implementationen (siehe /service-Ordner)
- Unterschiede & Gemeinsamkeiten
- Abstract Factory Pattern
- Wie man die Applikation mit dem jeweiligen Service startet
- "Integrating Changes" (Lektion 3)
- ShadowDOM, um das bestehende Element durch das neue "vorgerenderte" Element zu ersetzen
- Replacement ist schwer, wenn es während User-Events laufen soll
- Alternativen:
- Observable -> Memory-Leaks vermeiden, Fehleranfällig
- ShadowDOM, um das bestehende Element durch das neue "vorgerenderte" Element zu ersetzen
- Feedback Lehrevaluation ausfüllen
- Review
- JsDoc für Rest, Test & Util (J. Villing)
- PEP CSS (D. Lagger, M. de Laat)
Datum/Uhrzeit: 18.05.2021 - 12:15 bis 15:00
Einführung in den 3. Teil: Remoting und anspruchsvolle UIs
- Heutiges CSS-Goodie (Timestamps 1. Lektion [00:00] - [47:00])
- hsl Farben
- Exkurs: Erklärungen zu den verschiedenen Farbkreisen und deren Verwendung
- Wenn man mit Farben "rechnen" muss -> Zu hsl greifen
- Erklärung der verschiedenen Werte (Hue, Saturation & Lightness)
- Walkthrough durch den Code HslColors.html
- hsl Farben
- Server-Client Modell & Server lokal einrichten
- Erklärung der Position des Clients und was der Server anbietet (2. Lektion [00:00] - [05:00])
- Einführung in den Code des Servers (2. Lektion [20:00] - [46:00])
- Erklärung Domainmodell und Relationen
- Endpunkte mittels Grails
- Häufiger Fehler, wenn man einfach nur "CRUD"-Enpunkte hat: Underfetching (3. Lektion [00:00] - [17:00])
- Alleine zum Start der Applikation müssen viele HTTP-Requests gesendet werden, um alle Daten zu erhalten
- "Man muss in der Lage sein, auch spät im Projekt neue spezialisierte Endpunkte zur Verfügung zu stellen"
- Endpunkte die beispielsweise gefilterte Daten zurückgeben oder eine gewisse Logik unterstützen (und diese so vom Client zum Server transferiert)
- Restclient im Client-Code (3. Lektion [17:00] - [35:46])
- Einführung in den Code - Einfacher Aufbau mit FetchAPI statt einer schwergewichtigen Library
- Nähere Erläuterung zu den verschiedenen Promises
- Erklärung zu den HTTP-Headers, die angegeben wurden (Warum & welche Optionen es gibt)
- Einführung in den Code - Einfacher Aufbau mit FetchAPI statt einer schwergewichtigen Library
- Review
- Keine
Datum/Uhrzeit: 11.05.2021 - 12:15 bis 15:00
Heute keine neuen Slides oder ein Goodie, "nur" Studierendenbeiträge
- SVG-Eyes in Angular (A. Gervalla, P. Mühlthaler - Link zum Repo)
- Präsentation (Timestamps: [09:35] - [33:00])
- Einführung in Angular allgemein. Aufbau mit TypeScript, HTML + CSS
- angular.json als Konfigurationsdatei für den Workspace und das Projekt
- ts.config Konfiguration für Typescript
- Angular bietet wie andere Frameworks auch ein cli für den einfachen Umgang (Projekt erstellen, Server mit Hot-Reloading, Build etc.)
- Komentenaufbau für Unabhängigkeit der einzelnen Teile und Wiederverwendbarkeit
- Services und Shared-Teile für die Verwendung in Komponenten bzw. Aufteilung von gemeinsam genutzten Strukturen
- Man schreibt html + css mit der gleichen syntax, es ist aber nicht pur. Angular "konvertiert" die Bestandteile -> Probleme mit der Validität etc.
- Einführung in Angular allgemein. Aufbau mit TypeScript, HTML + CSS
- Probleme bei der Umsetzung
- Keine Defaultwerte für die Koordinaten angegeben -> HTML wurde nicht korrekt aufgebaut
- Debugging mittels Browserkonsole und "Durchdenken"
- Hinweis, am besten immer immutable Datenstrukturen zu verwenden (was im Browser schwer ist) - Beispiel mit Koordinaten der Maus übergeben, statt den ganzen MouseEvent
- Fragen & Diskussion (Am besten selbst nachschauen, waren viele und wurden umfangreich beantwortet. Timestamps: [33:30] - [01:02:55])
- Präsentation (Timestamps: [09:35] - [33:00])
- SVG-Eyes in React (R. von Arx, C. Kym - Link zum Repo)
- Präsentation (Timestamps 2. Lektion: [04:20] - [13:55])
- Einführung in React (Vorallem die Betrachtung der Lifecyclemethoden einer Komponente)
- Hinweis Debug-Tools (Extensions) für verschiedene Browser
- Vergleich mit Angular: Schlanker, weniger Vorgaben bzgl. Strukturierung der gesamten Applikation
- Kleine Diskussion bzgl. Class-Components vs. Functional-Componentens:
- Class-Components eher für Dinge, für welche man die Lifecycle-Methoden verwenden muss - mit einer return()-function
- Functional-Components sind "pure" JS-Funktionen (nicht im Sinne einer "normalen" puren Funktion ohne Seiteneffekte), welche den "zu rendernden" Teil zurückgeben (Die return-function ist im Prinzip die Komponente selbst)
- Verbesserungsvorschlag bzw. Hinweis von Herrn König:
- Was macht die Komponente, welchen Zustand bewirtschaftet sie?
- Dinge die für/im Komponent unveränderlich sind -> Props; Dinge die für Komponent veränderlich -> State
- Fragen & Diskussion (Timestamps 2. Lektion: [14:10] - [32:00])
- Präsentation (Timestamps 2. Lektion: [04:20] - [13:55])
- SVG-Eyes in Svelte (R. Winkelmann - Link zum Repo)
- Präsentation (Timestamps 3.Lektion: [02:00] - [18:00])
- Einführung in Svelte und Demo
- Erklärung der Applikationsstruktur, export keyword für Funktionen
- Sehr schlank im Vergleich zu den bereits vorgestellten Frameworks
- Tiefergehende Erklärungen, wie die Elementdirektiven konkret verwendet wurden
- Hinweis auf die Reactive Deklaration bzw. warum dies so verwendet wurde
- Näherer Erläuterungen zu Bindings
- Einarbeitung belief sich auf etwa 2-3 Stunden, ging aber gut
- Fragen & Diskussion (Timestamps 3. Lektion [18:00] - [26:00])
- Präsentation (Timestamps 3.Lektion: [02:00] - [18:00])
- SVG-Eyes in VueJs (P. Schmid, J. Hänggi - Link zum Repo)
- Präsentation (Timestamps 3. Lektion: [28:00] - [32:00])
- Einführung in VueJs
- Lösung mit einer einzigen Komponente, welche den bereits bestehenden Code einbettet
- Hinweis auf das Statemanagement und die Lifecycle-Methoden
- Fragen & Diskussion (Timestamps 3. Lektion: [34:00] - [35:00])
- Präsentation (Timestamps 3. Lektion: [28:00] - [32:00])
- Abschliessende Diskussion
- Hypothetische Aufgabe, die SVG-Eyes zu bauen, mit Einschränkung auf eine schon bestehende Codebasis und vorgegebenem Framework
- Abstimmung, welche Frameworks nach den Vorstellungen heute präferiert werden
- Review
- Punkte im Excel checken :P
- React (R. von Arx, C. Kym)
- SVG-Eyes in VueJs (P. Schmid, J. Hänggi)
- Svelte (L. Kern, R. Winkelmann)
- SVG-Eyes in Angular (A. Gervalla, P. Mühlthaler)
Datum/Uhrzeit: 27.04.2021 - 12:15 bis 15:00
- Heutige Goodies:
- Starwars Lauftext von F. Henzmann
- Timestamps Präsentation (1. Lektion): [02:00] - [18:00]
- Aufbau: Ebene wird mittels Animation langsam aus dem Bildschrim "gezogen"
- Behandelte Themen: perspective, transform, transform-origin
- Signature Animation
- Timestamps Präsentation (1. Lektion): [18:00] - [41:00]
- SVG Pfad (hier eine Signatur) soll so animiert werden, dass es so aus sieht, als würde diese live gezeichnet / geschrieben
- Behandelte Themen: Animation mittels Stroke-Array im Pfad. Funktionsweise wird im Recording ([22:00] - [26:00]) mittels Skizze veranschaulicht
- Starwars Lauftext von F. Henzmann
- Custom Elements HTML (Gesamte 2. Lektion [00:00] - [48:57])
- Nutzung von selbstgebauten HTML Elemente via Tags oder createElement
- Kurze Ausführungen bzgl. Webcomponents und wie die Begriffe vertauscht werden (Was ist ein Customelement und was Components)
- Betrachtung des Square-Beispiels
- Aufzeigen der Funktionsweise anhand dieses Beispiels, welche Dinge damit möglich sind und vorallem welche Schwierigkeiten sich daraus ergeben
- Fragestellung "Was soll das Element unterstützen?" - Manche Eigenschaffen lassen sich aufgrund der Vererbung nicht ignorieren, sind jedoch für das erstellte Element praktisch irrelevant.
- Adoption von WebComponents (Polymer etc.) nicht so breit wie erwartet. Hinweis, dass diese Dinge der Darstellung dienen aber nicht für die Applikationsstrukturierung, obwohl dies oft genau für das "missbraut".
- Auflisten von Alternativen zu WebComponents
- Aufbau des begleitenden Projekts der Personaleinsatzplanung (Gesamte 3. Lektion [05:00] - [40:00])
- Demo des lauffähigen Sketchs als Alternative zu Paper-Prototyp oder Figma/Adobe Xd, welcher als Prototyp zur Veranschaulichung der Idee und Grundfunktionalität dient [13:00] - [27:00]
- Walkthrough durch den Code [28:00] - [40:00]
- Styling und HTML [28:00] - [31:00]
- Relationales Modell im UI [31:00] - [33:00]
- Javascript [33:00] - [40:00]
- Review
- React (R. von Arx, C. Kym)
- SVG-Eyes in VueJs (P. Schmid, J. Hänggi)
- Svelte (L. Kern, R. Winkelmann)
- SVG-Eyes in Angular (A. Gervalla, P. Mühlthaler)
Datum/Uhrzeit: 20.04.2021 - 12:15 bis 15:00
- Heutiges Goodie: Spotlight Effekt (Eine Art Presenter) - Timestamps Präsentation (1. Lektion): [00:00] - [30:00]
- Aufbau: Transparentes Overlay mit einer gestylten Box, welche mit einem Key-Event ein Spotlight-Effekt erzeugt
- Behandelte Themen: mix-blend-mode und Umgang mit der Problematik von Clickevents (pointer-events, user-input)
- Von Studierenden vorgeschlagener alternativer Ansatz: Mit filter arbeiten
- Einschub bzgl. Guard-Clauses - Timestmaps (1.Lektion): [12:00-23:00]
- Begründung für diesen Codeteil mit Verweis auf c2wiki.
- Präsentation der Spezialaufgabe über Bézierkurven (P.Schmid, J.Christ)
- Präsentation mit Einführung, historischer Hintergrund, Verbindung mit SVG und Beispiele: (2. Lektion) [02:00] - [13:00]
- Fragen und weiterführende Diskussion sowie Inputs von D.König [13:00] - [26:00]
- Weiterführung SVG Thematik von letzter Woche
- Vergleich mit Canvas. Wann sollte was genutzt werden?
- Erneuter Hinweis auf die Diskrepanz beim SVG-Export von verschiedenen Tools
- Animation [51:00] - [1:55:00]
- Nutzen von deklarativen Animationen für numerische Werte, in CSS mit transition, animation und den keyframes. Für komplexere Dinge nicht verwendbar, da nicht implizit "bekannt", was genau animiert werden muss.
- Für komplexere Dinge "programmatische" Animationen. Nach der Verwendung von Timeouts und Intervals wurde heute die Methode mit requestAnimationFrame() vorgestellt.
- Beispiel mit dem SVG Bucket
- Tweening (Berechnung von Zwischenschritte beim Animieren) mit Slope-Function (siehe tween Folder)
- Review
- CSS-Goodie (F. Henzmann)
Datum/Uhrzeit: 13.04.2021 - 12:15 bis 15:00
- Heutiges Goodie: Rippleeffekt auf Buttons - Timestamps Präsentation (1. Lektion): [00:00] - [38:00]
- Hauptthema des Goodies sind die CSS-Custom-Properties, welche in diesem Beispiel auch innerhalb von JS genutzt werden. Es wurden verschiedene Möglichkeiten vorgeschlagen, wie man gewisse Daten zentral halten kann, wobei diese Lösung explizit präsentiert wurde.
- Weitere behandelte Themen: Clip-Path, mix-blend-mode, animation mit keyframes (Man beachte z.B. die Prozentangabe für den Zeitfortschritt, um das Element am Ende wieder auszublenden)
- Präsentation der Spezialaufgabe über das Multi project planning tool (D. Lagger, M. de Laat)
- Präsentation UI und UX: (2. Lektion) [02:00] - [09:00]
- Fragen und weiterführende Diskussion [09:00] - [44:42]
- Diverse Inputs und Ideen für die präsentierte Lösung
- SVG & Canvas anhand des Progress-Gauge Beispiels
- Intro (3. Lektion) [00:00] - [08:00]
- Walkthrough durch den Code, mehr Details zu bestimmten Teilen (3.Lektion) [08:00] - [40:00]
- Diskussion
- Hinweis auf "Problematik", dass eine .onclick-Zuweisung im Gegensatz zu addEventListener destruktiv ist bzw. die bisherigen Listener überschreibt/entfernt
- Die Verwendung von Canvas ist sehr performant und wird GPU-beschleunigt, sofern dies möglich ist.
- Weitere Beispiele (3.Lektion) [40:00] - [52:00]
- SVG Eyes
- Hinweis darauf, dass SVGs bei Grafiktools beim Exportieren teilweise "vereinfacht" werden bzw. Informationen verlieren und so eine inkonsistente Darstellung entsteht. Man kann sich dazu meist nur mit einer "händischen" Korrektur helfen
- Man kann mit Caching und Ebenen arbeiten, damit man bei umfangreicherer Verwendung von Canvas nicht bei jeder Änderung das gesamte Bild neu rendern muss
- Steelseries Canvas
- Diverse UI-Elemente, welche mit Canvas umgesetzt wurden und in den Demos jeweilig "frei" konfigurierbar sind
- SVG Eyes
- Review
- Einführung in Bezier-Kurven (P.Schmid, J.Christ)
Datum/Uhrzeit: 30.03.2021 - 12:15 bis 15:00
- Heutiges Goodie: CSS Specificity (L.Kern) - Timestamps Präsentation (1. Lektion): [19:30] - [29:00]
- Die Präsentation sowie den dazugehörigen Code findet sich in den MS Teams-Files unter Woche 6
- Behandelte Themen: The Cascade, Specificity, Inheritance, Specificity Calculator & Live-Coding
- Anmerkungen von D. König sowie Beantwortung von Fragen: 1. Lektion: [29:00] - [34:00] & 2. Lektion: [00:00] - [09:00]
- Präsentation über die Table Projectoren (J.Hadorn, J.Kennedy)
- Timestamps (2. Lektion): [09:00] - [20:00]
- Vorstellung der Änderungen innerhalb der Sturktur, welche vorgenommen wurden (Generalisierung des Codes)
- Vorführen des Nutzens anhand des "Car.js"-Beispiels
- Projector Pattern mit spezifischem CSS
- Einführung in die Thematik und den Nutzen (2. Lektion) [20:00] - [36:36]
- Wie wird das CSS organiseriert, welches für den Projector spezifsich ist, wie wird es gruppiert
- Analogie mit einem Interface in Java, in JS gelöst über die expliziten Modulexports / -imports (agiert als "Interfaceersatz")
- Livecoding (3. Lektion) [00:00] - [21:45]
- Mittels pageCSS im JS (als Konstante) den Style dynamisch halten & als Export angeben (geschlossene Variante - mehr Kontrolle)
- Alternative Variante: in einem eigenen CSS-File definieren und dieses importieren (offenere Variante - mehr Flexibilität für Zusammenarbeit)
- Einführung in die Thematik und den Nutzen (2. Lektion) [20:00] - [36:36]
- Review
- UX/UI Gestaltungskonzept für Entwickler/Projektzuweisung (D. Lagger, M. de Laat)
Datum/Uhrzeit: 23.03.2021 - 12:15 bis 15:00
- Heutiges Goodie: Blurred gradient border (z-index, linear-gradient(), blur(), position)
- Timestamps im Recording (1. Lektion): [4:30] - [31:30]
- Diskussion über den Modus der Punktevergabe
- Begründung des derzeitigen Modus
- Einführen von CSS-Goodie Aufgaben, welche Studenten bearbeiten (analog zu den anderen Vorträgen)
- Timestamps im Recording (1. Lektion: [31:30] - [56:04])
- Präsentation der Aufgaben auf diese Woche
- Tests für Master-Detail (O.Studer & R.von Arx)
- Code ist in diesem Repo (Siehe hier)
- Timestamps im Recording (2. Lektion): Vorstellung [1:30] - [9:30], Fragen [9:30] - [19:00]
- Tests für Master-Detail (O.Studer & R.von Arx)
- Projector Pattern
- Theorie (Problemstellung, Lösung, Nutzen) (Timestamps 3. Lektion: [23:00] - [46:00])
- Livecoding innerhalb des Projekts (Timestamps 3. Lektion: [2:00] - [30:00])
- Review
- CSS-Goodie: Specificity (L.Kern)
- HTML-Table Projector (J.Hardorn & J.Kennedy)
Datum/Uhrzeit: 16.03.2021 - 12:15 bis 15:00
- Heutiges Goodie: CSS Collapsible (Custom-Properties, display/visibility, Sibling selector)
- Timestamps im Recording(1. Lektion): [2:30] - [43:00]
- Präsentation der Aufgaben auf diese Woche
- Kurzeinführung in JSDoc (L.Jacobs & R.Koch)
- Github Repo mit Präsentation und Beispielen
- Timestamps im Recording (2. Lektion): Vorstellung [0:30] - [14:00], Fragen [14:00] - [29:30]
- Praxisbeispiel - Projektarbeit mit einer guten Dokumentation
- Kurzeinführung in JSDoc (L.Jacobs & R.Koch)
- Spezialisierter Projector für Person
- Timestamps im Recording (3. Lektion gesamt)
- Livecoding der 3. Lektion nachvollziehen (siehe Recording). Am besten einen Teil herauslöschen (Vorschlag: die mit "todo" markierten Stellen im Ausgangscode) und probieren, diese Teile selbst zu programmieren
- Tests für Master-Detail vervollständigen (O.Studer & R.von Arx)
Datum/Uhrzeit: 09.03.2021 - 12:15 bis 15:00
- Heutiges Goodie: CSS Triangle (Border, clip-path, Filter, box-shadow)
- Präsentation der Aufgaben auf diese Woche
- Media Queries (J.Hadorn & J.Hänggi)
- Github Repo
- Timestamps im Recording (1. Lektion): Vorstellung [28:30] - [40:00], Fragen [40:00 - 1:02:30]
- Master-Detail-View (L.Kern & R.Winkelmann)
- Github Repo
- Timestamps im Recording (2. Lektion): Vorstellung [0:50] - [14:20]
- Media Queries (J.Hadorn & J.Hänggi)
- Attribute Projector
- reichhaltige Attribute
- Review von Attribute Projector
- Kurzeinführung in JSDoc (L.Jacobs & R.Koch)
Datum/Uhrzeit: 02.03.2021 - 12:15 bis 15:00
- Heutiges Goodie: HTML/CSS Validierung eines Formulars (Valid Pseudoklasse, Grid, Values and Units)
- Präsentation "Konvertierung und Validierung" (J.Christ, L.Dietiker)
- Nähere Betrachtung MVC
- Mögliche Fallstricke (Falscher Dataflow, zu viele Abhängigkeiten)
- Hierarchie MVC
- Einführung Attribute & LiveCoding Presentation-Model
- Livecoding dieser Woche nochmals anschauen und nachvollziehen (Als Einstiegspunkt am besten View.html & Commit-History)
- Master-Detail-View (L.Kern & R.Winkelmann)
- Media Queries (J.Hadorn & J.Hänggi)
Datum/Uhrzeit: 23.02.2021 - 12:15 bis 15:00
- Organisatorisches klären (Modulinhalt, Notengebung etc.)
- Wiedereinstieg von webpr anhand der Todo MVC-App (Onlineversion auf Github pages) mittels Codereading.
- TodoMVC App durchgehen und verstehen (Vorschlag: Kommentare zum Verstandenen, Unklares und Fragen für nächste Woche notieren)
- Webpr-Kenntnisse im Allgemeinen auffrischen (u.a. Promises, Scheduler, Arrow-Functions und weitere Konzepte, welche im Todo-Projekt verwendet werden)
- Wie kann man Validation und Konvertierungen in die Todo-MVC App eingbauen (J.Christ, L.Dietiker)
- Protokoll / Readme nachführen (R.Bürkli)