Modul Web Clients Herbstsemester 2020 Gruppe 2
Der Unterricht wird Remote über Microsoft Teams gehalten. Das reservierte Zimmer kann benutzt werden.
Der aktuelle Punktestand der Studenten ist in der Microsoft Teams Gruppe unter dem Tag "Notizen" zu finden.
Datum: 15.09.2020 08:15 a.m. - 11:00 a.m.
Recording: In der Teams Gruppe
Hauptthema: Einfache Todo App mit MVC
Github pages under https://webengineering-fhnw.github.io/webcl-hs20/week1/todo/View.html
Date: 22.09.2020 08:15 a.m. - 11:00 a.m.
Recording: In der Teams Gruppe
CSS Goodie: CSS Validation, Fraktionen & View-Constraints
Github pages under https://webengineering-fhnw.github.io/webcl-hs20/week2/CSSValidation.html
Vortrag 1: Transformer & Validation:
Link auf Fork: https://github.com/faqnet/webcl-hs20-2/
Direktlinks zu den Files:
- https://github.com/faqnet/webcl-hs20-2/tree/master/week1/todo
- https://github.com/faqnet/webcl-hs20-2/tree/master/week1/transformer
- https://github.com/faqnet/webcl-hs20-2/tree/master/week1/validator
Thema: MVC
Foliensatz: WebClients_2_Attributes
Vortrag 2: Validieren & Konvertieren:
Link auf Fork: https://github.com/mzhKU/webcl-hs20-2
Direktlinks zu den Files:
- https://github.com/mzhKU/webcl-hs20-2/blob/master/week1/todo/todo.js
- im CSS das Grid entfernt, da dieses reingefunkt hat.
Vortrag 3: innerText vs. textContent:
Repository Link: https://github.com/YannikBeimler/innerText-vs-textContent
Live Coding:
Github pages under https://webengineering-fhnw.github.io/webcl-hs20/week2/presentationModel/presentationModel.js
Date: 29.09.2020 08:15 a.m. - 11:00 a.m.
Recording: In der Teams Gruppe
CSS Goodie: CSS Triangle
Notizen dazu: Bordertrick: https://codepen.io/chriscoyier/pen/lotjh Dropshadow über filter anwenden Clip-Path mit Polygon umsetzen
Github pages under https://webengineering-fhnw.github.io/webcl-hs20/week3/CSSTriangle.html
Vortrag:
Link auf Fork: https://github.com/mikenoethiger/webcl-hs20-2
Lösung der anderen Klasse: https://github.com/SteveVogel1/MasterDetail
Video
Runar Bjornasson: liberties constrain, constraints liberate
https://www.youtube.com/watch?v=GqmsQeSzMdw
webcl week 6 UI/UX homework
https://tube.switch.ch/videos/8b06c586
Thema: Attribute projector / MVC
Foliensatz: WebClients_2_Attributes & WebClients_3_Attribute_Projector
Live Coding:
Github pages under https://webengineering-fhnw.github.io/webcl-hs20/week3/todo/todoTests.js
Date: 06.10.2020 08:15 a.m. - 11:00 a.m.
Recording: In der Teams Gruppe
Github pages under https://webengineering-fhnw.github.io/webcl-hs20/week3/CSSTriangle.html
Vortrag: JS Doc
Link auf Fork: https://pebesch.github.io/webcl-hs20-2/
Thema: JS Doc
Bsp: @return {a} = typ Typendefinierung @typedef {*} a
Quick JSDock Cntr-Q Quick implementation Ctrl-Shift-I
Github pages under https://webengineering-fhnw.github.io/webcl-hs20/week3/church/church.js
Kommentare sind für den Leser der Implement. Dokumentation ist für den Verwender. ~König Dierk
Thema: Master Detail
Foliensatz: WebClients_4_Master_Detail
Dinge machen können, die andere nicht machen können in der Zeit und dieser Qualität.
Live Coding:
Github pages under
- https://webengineering-fhnw.github.io/webcl-hs20/week3/todo/View.html
- https://webengineering-fhnw.github.io/webcl-hs20/week3/todo/todoStarter.js
- https://webengineering-fhnw.github.io/webcl-hs20/week3/todo/todo.js
- https://webengineering-fhnw.github.io/webcl-hs20/week3/todo/todoProjector.js
Video aus Webfr auf SwitchTube zu MVC (FHNW Login): https://tube.switch.ch/videos/f6f3bc1b
Browser ist ein Master Detail View als Bsp. Master View sind die Tabs, Inhalt der Tabs ist ein Detail View
Date: 13.10.2020 08:15 a.m. - 11:00 a.m.
Recording: In der Teams Gruppe
Github pages under https://webengineering-fhnw.github.io/webcl-hs20/week3/CSSTriangle.html
Diskukssion zum Thema Punktevergabe
Stichwort: Sonderaufgaben, Aufgabenverteilung, Klassenübergreifende Effekte auf den Unterricht.
Vortrag: Vierecke in CSS machen
Benutzen von Pseudo-Elemete ::before, ::after
Link auf Code: https://gist.github.com/marcowaldmeier/1492c11f51a69d8eeb852c3f1c5250b0
Vortrag 2: HTML & CSS Collapse
Link auf Fork: https://github.com/YannikBeimler/webcl/blob/main/CSS-Collapse/css-collapse-example.html
- Erklärung von dem '+' und '~' Combinator für CSS
- Einsatz von HTML-Validatoren
- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary#:~:text=The%20HTML%20Disclosure%20Summary%20element,details%3E%20element%20open%20and%20closed.
Kollabieren von Sektionen im UI ist super hilfreich
- Userinterface soll so einfach sein wie das von Google (einfach und Übersichtlich) und man muss alle Informationen auf einmal sehen können -> beides aufs mal adressieren ist nicht einfach. Mit kollabierten Sektionen kann man selber entscheiden was man anzeigen will.
Video: Quickstorm
Video unter Woche 5 im Teams
Live Codeing: Projektor Github pages under https://webengineering-fhnw.github.io/webcl-hs20/week5/todo
Thema: Projektor Pattern Foliensatz: WebClients_5_Projector_Pattern
Date: 20.10.2020 08:15 a.m. - 11:00 a.m.
Recording: In der Teams Gruppe
CSS Effekt: Focus animation: Sensorik: Berührung, Audio, Bewegung
Bewegung des Hintergrunds für Animation mit Background Image gradient border-bottom-volor: transparent; background-image: linear-gradient(orange, orange); background-size: 100% 1px; background-repeat: no-repeat; background-position: right bottom; transition: background-size 0.3s linear;
Bei jeder Änderung ide dazu führt das eine CSS Regel angewendet wird, werden auch transitions umgesetzt. Github pages under https://webengineering-fhnw.github.io/webcl-hs20/week6/todo/todo.css
Thema: CSS++ Foliensatz: WebClients_6_CSS
Vortrag 1: Tabelle anstelle Liste (Projector)
Cooles Beispiel, kommentiert mit Dokumentation. Link auf Fork: https://github.com/Sixtisam/webcl/commit/e8ed7693cb04243ec1949a5b7ce5de3794345156?w=1
Livecoding: ++ Github pages under https://webengineering-fhnw.github.io/webcl-hs20/week5/person/person.js
Lösungsvorschlag: Job-Attribut++ In bestehende Lösung einbauen
Livecoding: ++ Github pages under https://webengineering-fhnw.github.io/webcl-hs20/week6/person/person.js Github pages under https://webengineering-fhnw.github.io/webcl-hs20/week6/person/tableProjector.js
Thema: CSS++ (cont.) Foliensatz: WebClients_6_CSS
Date: 27.10.2020 08:15 a.m. - 11:00 a.m.
Recording: In der Teams Gruppe
CSS Effekt: Ripple: Github pages under https://webengineering-fhnw.github.io/webcl-hs20/week6/CssRipple.html
Vortrag 1: UX für FTE Planner
Teil 1: https://tube.switch.ch/videos/8b06c586
Teil 2 im Recording
Date: 03.11.2020 08:15 a.m. - 11:00 a.m.
Recording: In der Teams Gruppe
CSS Effekt: Spotlight:
Github pages under https://webengineering-fhnw.github.io/webcl-hs20/week8/CssSpotlight.html
Vortrag 1: Bezier-Kurven
https://github.com/sivakumm/webcl-hs20-bezier-curve
Vortrag 2: SVG Animation
https://github.com/Pebesch/webcl-hs20-2/blob/master/week7/svg-eyes-sketch/EyesMorph.html
Thema: Animation Dekalative Animationen und Tweening
Beispiel Bucket (Livecoding): Github pages under https://webengineering-fhnw.github.io/webcl-hs20/week8/svg-bucket-sketch/Bucket.html
Tweening: Github pages under https://webengineering-fhnw.github.io/webcl-hs20/week8/tween/tween.js
Date: 10.11.2020 08:15 a.m. - 11:00 a.m.
Recording: In der Teams Gruppe
CSS Effekt: Animated Stroke:
Thema: Shift Array und Animation von SVG Elementen
Github pages under https://webengineering-fhnw.github.io/webcl-hs20/week9/svg-signature-sketch/Signature.html
Vortrag 1: WebAnimations
Neue Methode um Animationen anstatt in CSS in JS zu coden
Github pages under https://github.com/cookiecavekeeper/webcl/tree/web-animations/webAnimations (Wichtig: Kostenlos)
Vortrag 2: Hover
Andere Methode um Animationen zu coden
Github pages under https://github.com/loop-of-8/Hover/blob/master/_show/show.html (Wichtig: Kostenlos für Eigengebrauch, Kosten fallen an für kommerzielle Benutzung)
Thema: Custom Elements
Foliensatz: WebClients_9_Custom_Elements
Es ist mehr Aufwand ein Custom HTML Elemente so zu erstellen. Dieses kann dann aber in allen Frameworks überall benutzt werden.
Demo: https://webengineering-fhnw.github.io/webcl-hs20/week9/custom-elements/CustomElement.html
Link zu weiteren Informationen: https://custom-elements-everywhere.com/
Date: 17.11.2020 08:15 a.m. - 11:00 a.m.
Recording: In der Teams Gruppe
Kein Theorieteil, nur Vorträge.
Vortrag 1: Vue.js
Umbauen von den im Untericht gebauten Komponenten.
Github pages under https://mowi-fhnw.github.io/webcl-vue-project/
Vortrag 2: Angular
Über mehrere Schritte zum Angular / Typescript Code umgebaute Komponente aus dem Untericht. Der originale Code kann nicht übernommen werden, das dieser in den Angular Lifecycle eingreift und diesen zerstört.
Github pages under https://github.com/faqnet/webcl-eyes-ngx
Vortrag 3: React
Veränderbare States & Properties / Interne States
Github pages under https://github.com/RetoBeppo/webcl-hs20-2-eyes-to-react/tree/gh-pages
Off-Topic Security und Node / JavaScript
Security und node.js in Kombination mit 100erten von Abhänigkeiten.
Erwähnung von "deno" was sicherer als node ist.
Mit Purescript kann man es besser machen. Das Potential ist da.
Date: 01.12.2020 08:15 a.m. - 11:00 a.m.
Recording: In der Teams Gruppe
CSS Goodie: Colorwheel
https://www.w3schools.com/colors/colors_wheels.asp
Demo: https://webengineering-fhnw.github.io/webcl-hs20/week11/CalculatedColors.html
Komplementärfarben und andere Farben berrechnen mit CSS
Beispiel für ein CSS Filter
.colored.complement::before {
filter: hue-rotate(180deg)
}
PEP
Interaktive Personaleinsatzplanung
Folien: WebClients_11_REST
Applikation unter https://webengineering-fhnw.github.io/webcl-hs20/week9/pep-sketch/PEP.html
Rest / Good Client Design
Applikation unter https://webengineering-fhnw.github.io/webcl-hs20/week11/pep/pep.html
Angesehene Files:
- https://webengineering-fhnw.github.io/webcl-hs20/week11/pep/pepLocalStarter.js
- https://webengineering-fhnw.github.io/webcl-hs20/week11/pep/pepRemoteStarter.js
Für alle Remote Services einen Lokalen Service kreieren, so das man z.B. testen oder ohne remote arbeiten kann.
JSDoc Trick für Interfaces in javaScript, für Patterns wie Abstract Factory
- Files hier: https://webengineering-fhnw.github.io/webcl-hs20/week11/pep/services/ zu finden
- https://webengineering-fhnw.github.io/webcl-hs20/week11/pep/rest/restClient.js
3c80a6e5430534d1845f9b8040967bfada2ed970
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent