/webcl-hs20-2

Module Web Clients Fall Semester 2020

Primary LanguageJavaScript

webcl-hs20-2

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.

week1 Anschluss an WebPr 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

week2

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:

Thema: MVC

Foliensatz: WebClients_2_Attributes

Vortrag 2: Validieren & Konvertieren:

Link auf Fork: https://github.com/mzhKU/webcl-hs20-2

Direktlinks zu den Files:

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

week3

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

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

week 4

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

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

week 5

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

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

week 6

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

week 7

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

week 8

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

week 9

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/

week 10

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.

week 11

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:

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

week 12

Date: 08.12.2020 08:15 a.m. - 11:00 a.m.

Recording: In der Teams Gruppe

CSS Goodie: Tabellen mit Position fixed

Interfaces in JS / Live Codeing

Folien: WebClients_12_ServiceFactory

Wichtig: Unterrichts-Stoff angegeben, aber nicht Zusammengefasst. Bei Problemem mit dem Verständnis vom Pattern, umbedingt die Aufnahmen ansehen.

Pattern: Abstract Factory Pattern

Interfaces in JavaScript mit JSDoc

! = Mandatory Attribut, ? = Optional Attribut

Applikation unter https://webengineering-fhnw.github.io/webcl-hs20/week11/pep/pep.html

Angesehene Files:

Lösungsvorschlag für Aufgabe

Für einen weiteren Service für loadDevelopers

  • Lösung von Herr König vorhanden in den jeweiligen Files

week 13

Date: 15.12.2020 08:15 a.m. - 11:00 a.m.

Recording: In der Teams Gruppe

CSS Goodie: Happy Christmas

Weihnachtsbaum mit CSS abgerundent und Bildschirm mit fallendem Schnee gefüllt:

Eleval

Gemeinsam angesehen, nicht in Video enthalten

Präsentationen: PEP Lösungsvorschlage

Auf Aufnahme, werden in Codebasis reingenommen.

Links:

week 14

Date: 05.01.2021 08:15 a.m. - 11:00 a.m.

Recording: In der Teams Gruppe

CSS Goodie: Almost 3D

CSS Transform / Perspective Änderungen.

Applied Concepts

Folien: WebClients_14_Applied_Concepts

Model World, Qualifier Strings,

Applikation unter https://webengineering-fhnw.github.io/webcl-hs20/week11/pep/pep.html

Angesehene Files:

week 15

Date: 12.01.2021 08:15 a.m. - 11:00 a.m.

Recording: In der Teams Gruppe

Histogramm

Applikation unter https://github.com/AndreasRohr/MasterDetailHistogram/tree/main/week14/person

Qualitätskontrolle vom Histogrammcotainer, check durch HTML Validator

Externe Links mit Fingerprint

Was ist nicht gut?

  • Histogramm benutzt Starter nicht
  • Modularisierung nicht korrekt durchgezogen, mann muss zu viel code kennen für kleine Änderungen
  • Baut keine View auf mit Bindings, sondern ein Canvas
  • Aktuelle Lösung kann man machen (sollte man aber nicht, wenn der restliche Code strukturiert ist), bringt aber alles durcheinander
  • Die Lösung ist nicht fertig durchdacht. Es gibt viele Mängel.
  • Es wurde nicht richtig getestet.

Team Apps

Folien: WebClients_15_TeamApp

Zentrale Verwaltung einer Applikation mit mehreren Nutzern gleichzeitig.

Thema: Broadcast & Proxy's