TU Wien:Web Engineering VU (Cito)

Daten

Zuordnungen

Bachelorstudium Informatik	Modul Web Engineering (Breite Wahl)
Bachelorstudium Wirtschaftsinformatik	Modul WIN/WEN - Web Engineering (Pflichtfach)
Bachelorstudium Medieninformatik und Visual Computing	Modul Web Engineering (Gebundenes Wahlfach)
Bachelorstudium Software & Information Engineering	Modul Web Engineering (Gebundenes Wahlfach)

Inhalt

SS2020:

• HTTP:
  • grober Überblick
  • requests mittels curl
  • Cookies / Sessions

• HTML / CSS:
  • Accessability, Standards
  • Responsive Design (Flex, Grid, ...)
• JavaScript
  • Basics
  • DOM / BOM
  • Asynchronous Programming
• (Web)server
  • Backend mit Node JS
  • Backend Templates
  • Grundlagen zu APIs (z.B. REST APIs)
  • Client/Server Modelle
• Frontend
  • MVVM Pattern
  • Client-Side mit Vue.js

Ablauf

Vorlesungen 2 Einheiten wöchentlich, dazu 4 (Gruppen-)Übungen und 2 Tests

2022S: Es sind nun 4 Einzelübungen (bzw. 5 - A0 bis A4, wenn man die erste http-mini-Aufgabe dazuzählt).

Benötigte/Empfehlenswerte Vorkenntnisse

Arbeiten mit GIT

HTML/CSS/JS nicht unbedingt benötigt - Es kann aber nicht schaden, wenn man schon mal ein paar Webseiten gemacht hat

Grundkenntnisse von HTTP können auch nicht schaden (also z.B. Response-Code 2xx = Erfolg, 4xx = Client-Fehler, etc.)

Vortrag

Ziemlich angenehmes Englisch, wenn auch manchmal etwas schnell, was es für manche wohl erschwert, dem Vortrag zu folgen. Fokus weniger auf Theorie und mehr auf Beispielen.

Vor dem Vortrag stellt der Professor immer ein paar pre-readings bereit die man vorher alleine durcharbeiten sollte. Die VO überfliegt die Inhalte dann nur noch und konzentriert sich eher auf praktische Beispiele, wie bereits erwähnt.

Während der gesamten VO Zeit konnten in jeder Einheit immer Fragen gestellt werden die auch jedes mal schnell und gut beantwortet wurden.

Am Ende des Semesters gab es zwei Gastvorträge, einer davon war Stoff für den 2. Test, der zweite war "Bonus-Content".

Übungen

Im Laufe des Semesters wurde dabei ein großes Beispiel über vier Aufgabenblätter hinweg umgesetzt (im S2020 eine Webseite für den Kauf von Kunstgegenständen). Alle Aufgaben wurden in einem Team von vier Personen gelöst.

Dabei gab es bei jeder Aufgabe immer ein vorgegebenes Framework bei dem viele Funktionen schon fertig implementiert waren so dass man sich auf das Wesentliche konzentrieren konnte. Dieses wurde immer über GitHub zur Verfügung gestellt. Das Framework musste bei jeder Aufgabe verwendet werden. Die vorgegebene Projektstruktur enthält auch Testfälle, mit denen die Funktionalität getestet wird und man auch die vorläufigen Punkte angezeigt bekommt.

2022S: Es sind nun 4 Einzelbeispiele. Der Inhalt, Aufbau und das Thema sind aber immer noch gleich.

A0 - HTTP

HTTP-Request:

• • Zwei Requests senden
  • Einzeln
  • "Einstiegsübung", Vorraussetzung für eigentlichen Übungsteil, Tests etc.

A1 - HTML & CSS

Es war eine mehrseitige Webanwendung mit HTML und CSS anhand von Mockups und einem Styleguide umzusetzen. Die Basisstruktur der Seiten war schon vorhanden. Verwendung von CSS Grid und Flexbox erforderlich.

A2 - JavaScript

Die Webanwendung muss um clientseitiges JavaScript erweitert werden. Es wird normales ("Vanilla") JavaScript verwendet, ohne Frameworks wie jQuery oder Vue. Die Funktionalität beinhaltet API-Calls an ein Backend, Änderungen des DOMs u.ä.

Man musste nicht die eigene Abgabe von A1 wiederverwenden sondern hat eine Referenzimplementierung als Basis bekommen.

A3 - NodeJS

Aufgabe 3 war die Entwicklung des Backends mit NodeJS und ExpressJS. Es waren ein paar Endpoints, In-Memory-Storage und die Anbindung an eine Payment-API ("Bling", die hauseigene für Web Engineering) gefordert. Seit 2024SS gibt es zusätzlich WebSockets, das sog. "Configure Together".

A4 - Vue

Zuletzt war das Frontend von A2 mit Vue zu schreiben. Inhalt der Übung waren die Basisfunktionen von Vue, also Properties, one-way und two-way Binding, Events, Lifecycle Hooks, API-Calls und Zugriff auf Vuex (zentrales State-Management). Es gab wieder ein Grundgerüst vorgegeben und es waren nur gewisse Seiten und Komponenten anzupassen.

Wie bei allen Übungen gab es wieder automatische Testfälle, mit denen man seine Implementierung testen kann. Weiters wurden die Payment-API and das "Configure Together" System im Frontend eingebettet.

Prüfung, Benotung

Test 1: Empfand ich als überraschend schwer. Der Test wurde über TUWEL abgehalten (war auch von Anfang an so geplant, nicht nur wegen des distance-learning). Man hatte 30 Minuten Zeit, die Fragen zu beantworten, nachdem man den Test gestartet hat. Insgesamt war der Test eine Stunde lang geöffnet (es war also nicht so schlimm, wenn man 10 Minuten zu spät online gekommen ist). Pro Frage hatte man im Durchschnitt 2 Minuten Zeit, was für manche Fragen schon recht knapp war. Fragen konnten nicht wiederholt werden, und es gab nur einen Versuch. Wer also bei einer Frage nicht weiter wusste, musste raten. Der Test war nicht unfair gestaltet, aber 1-2 Fragen haben Code snippets beinhaltet, die recht lang waren und wo man schon ein wenig Zeit gebraucht hat, um sich alles durchzulesen.

Die Benotung erfolgte sofort nachdem alle Studierenden den Test beendet hatten. Der Professor hat anschließend eine anonymisierte Grafik der Noten veröffentlicht und die meisten haben gut bis sehr gut abgeschnitten. Der Test war also schaffbar ;)

Test 2: Gleiche Modalitäten wie beim 1. Test, nur die Zeit wurde um 15 Minuten verlängert. Im S20 hat der Test ausschließlich online über TUWEL stattgefunden. 15 Fragen, 50 Punkte insgesamt, nachdem man auf weiter geklickt hat, konnte man nicht mehr zurück gehen. Die Fragen und Antworten waren zum Teil doch schon recht lang und die Antworten haben sich oft nur durch Kleinigkeiten unterscheidet. Zum Test kamen die VO-Blöcke 6-10 (also alles, was nach dem 1. Test durchgenommen wurde) und es waren auch einige (zum Teil längere) Code Beispiele dabei. Allerdings musste man hier keinen Code selbst schreiben, sondern es waren vier Snippets vorgegeben und das richtige musste ausgewählt werden. Die meisten Studierenden haben wieder recht gut abgeschnitten. In Summe ein fairer Test ohne große Überraschungen.

Test Retake: Einer der zwei Tests darf wiederholt werden, sofern man das selbst wünscht. Dabei zählt nicht der bessere Versuch, sondern der neuere. Es ist also auch möglich, sich zu verschlechtern. Beim retake Test soll es offene Fragen geben (und nicht (nur) multiple-choice). --> Bitte ergänzen falls/sobald jemand einen Test wiederholt hat!

Benotung: Man muss bei beiden Tests kombiniert mindestens 50% erreichen, um positiv zu sein, außerdem muss man bei jeder Übungsaufgabe mehr als 33% erreichen um im Übungsteil positiv zu sein.

2022S: Man konnte keinen Test wiederholen. Auf beide Tests gab es jeweils 15 Punkte und man musste mindestens 15 Punkte insgesamt auf beide Tests erreichen. Auf die Übungen gab es insgesamt 70 Punkte und man musste bei jeder mindestens 30% und insgesamt mindestens 50% der Punkte erreichen.

Dauer der Zeugnisausstellung

Semester	Test 2 am	Zeugnis erhalten am	Dauer
2020S	15.06.2020	07.07.2020	3 Wochen
2021S	14.06.2021	14.07.2021	1 Monat
2022S	21.06.2022	22.06.2022	1 Tag
2023S	23.06.2023	05.07.2023	2 Wochen

2021S hat die Zeugnisausstellung genau 1 Monat gedauert, obwohl die Ergebnisse des zweiten Tests am selben Tag bekannt waren.

Zeitaufwand

Es wurde bereits bei der Vorbesprechung darauf Aufmerksam gemacht, dass der Zeitaufwand die 3 ECTS deutlich übersteigt.

Andere Meinung: Das war bei mir nicht der Fall. Web-Engineering war eines der ganz wenigen Fächer bei denen ich wirklich genau so viel Aufwand hatte wie vorgesehen. Ich hatte 75.25h, was eigentlich ganz genau 3 ECTS entspricht. Der Aufwand kann aber je nach Vorerfahrung stark variieren.

Andere Meinung(2): Mit ein wenig Vorkenntnissen, mit dem halben Aufwand machbar. Hab die UE alleine gemacht und bin auf knapp 35h (also ~1.5 ETCS) gekommen.

Weitere Meinung: Wenn man schonmal etwas mit Webentwicklung zu tun hatte, völlig egal ob React, Vue, Angular, Java, Python, PHP, C#, ..., hat man einen ernormen Vorteil. Ich persönlich habe einen Gesamtaufwand von ca. 2 ECTS für alles gebraucht (Seit 2024SS gibt es WebSockets).

Unterlagen

Kein Skriptum.

Die Vorlesungsfolien werden immer rechtzeitig hochgeladen und sind auch recht hilfreich, wenn auch nur eine Zusammenfassung.

Es gibt zu jeder VO pre-readings die man vorher durcharbeiten sollte.

Die Vorlesung wird aufgezeichnet.

Tipps

• Rechtzeitig anfangen, die meiste Zeit Verbringt man mit Nachbesserungen der Kleinigkeiten
• Die späteren Aufgaben waren definitiv viel einfacher als die ersten zwei
• weitere Meinung(SS21): Ich finde nicht, dass A4 und A3 einfacher waren als A1 und A2, wobei A1 schon relativ zeitintensiv war.
• sucht am besten einen Partner, in dem Kurs gibts nämlich recht viele Eierköpfe die euch sehr einfach die Punkte auf die Abgaben stehlen können

Verbesserungsvorschläge / Kritik

2020S A1

Die Bewertungsmethode der ersten Aufgabe ist ein schlechter Scherz. Die Abgabe wird mittels Screenshots der erstellten Website in unterschiedlichen Breiten gegen Referenzbilder verglichen, wobei bei einer Diskrepanz >= 1.5% die Teilaufgabe als nicht gelöst gewertet wird. Ich habe als Web-Entwickler mit 2 Jahren Berufserfahrung für meinen Teil etwa 3 Stunden gebraucht die Webseite nach der Angabe zu rekonstruieren und dann weitere 14 Stunden um mit den Paddings und Margins zu spielen, bis diese Akzeptiert wurden.

• Andere Meinung: Obwohl die Art der Bewertung nicht optimal ist und sicherlich verbessert werden könnte muss ich meinem Vorposter widersprechen. Grundsätzlich ist es eigentlich nicht nötig Pixel zu verschieben und es hat bei mir und auch vielen anderen Kollegen fast gänzlich ohne manuelles verschieben funktioniert. Ich kann nicht verstehen, wie man als Web-Entwickler mit 2 Jahren Berufserfahrung 14h lang Pixel verschiebt und nicht auf die Idee kommt etwas grundsätzlich am Grid/der Flexbox zu ändern.

• Dritte Meinung: Das eigentliche Problem war, dass im Design Guide mehrere Abstände gefehlt haben (die meisten wurden nach 5 Tagen im TUWEL gepostet). Ich hab desshalb auch 4 Stunden herumprobieren müssen. Cito hält die LVA zum ersten Mal ... da kann sowas schon passieren, er hat sich eh dafür entschuldigt uns ein paar Bonuspunkte / Zeitaufschub gegeben und wird es bei der nächsten Abhaltung bestimmt besser machen.

• Vierte Meinung: Ich habe davor noch nie etwas mit Webdevelopment zu tun gehabt, HTML/CSS kannte ich zwar, hab's aber nie wirklich davor verwendet. Bei mir und meinen Kollegen hat praktisch alles auf Anhieb funktioniert, die meiste Zeit habe ich aber auch damit verbracht ein paar "Pixelungenauigkeiten" zu korrigieren. Den Test halte ich aber auch für einen Witz, vor allem weil man immer auf GitHub pushen muss um richtige Ergebnisse zu bekommen. Auch wenn meine Gruppe keine großen Probleme damit hatte, kann ich mir vorstellen wie frustrierend das Ganze im worst-case werden kann. Aber wie schon angemerkt wird die LVA von Cito zum ersten Mal abgehlaten, da finde ich es im Rahmen dass solche Probleme auftreten können. Großen Respekt dafür dass das Problem von der LVA-Leitung anerkannt wurde und alle eine Entschädigung dafür bekommen haben, normalerweise kommen nur dumme Ausreden und macht weiter wie bisher.

• Noch eine Meinung: Ich stimme der zweiten Meinung zu. Es war sicherlich nicht nötig, einzelne Pixel zu verschieben. Und schon gar nicht 14 Stunden lang. Aber es stimmt auch, dass viele Sachen im Style-Guide nicht ausreichend präzise beschrieben waren. So gab es zu jeder Seite immer nur eine genaue Beschreibung der Abstände, und die mobile Seite war, zumindest bei meinem Teil, anders als die Vorgaben. Allerdings war es nicht schwer, das rauszufinden. Ich denke, es sollte in Zukunft Teilpunkte geben. Also z.B. noch 50% der Punkte bis 2% Ungenauigkeit und 25% der Punkte bis 2.5%. Ich habe selbst wirklich schon mit vielen Kunden gearbeitet und die waren oft noch viel nerviger als der automatisierte Test. Hier konnte man wenigstens sehen, was die Referenz ist. Bei einem echten Kunden existiert dieses Bild oft nur virtuell im Kopf.

2020S A2-4

Anders als bei A1 haben die Aufgaben 2 bis 4 gut gepasst. Die Aufgaben wirkten sinnvoll, der Zeitaufwand war angemessen und man konnte sie schon irgendwie auf 4 Leute aufteilen. Aber auch hier ist finde ich etwas Kritik an den Tests und an den Aufgabenstellungen angebracht. Die Aufgabenstellungen sind oft leicht unvollständig, gewisse Implementierungsdetails auf die sehr wohl getestet wird werden nicht erwähnt und man hat nach dem Lesen der Aufgabenstellung teilweise keine klares Bild davon, was man jetzt eigentlich machen muss. Das liegt daran, dass es Seitens der LVA die Einstellung "Machen Sie es so, dass die Tests durchlaufen / Schauen Sie in den Tests nach, wie das funktionieren soll" vertreten wird. Man kämpft also eher gegen das Testframework, als das man versucht ein Programm zu schreiben, welches die Aufgabenstellung erfüllt.

2023S

Die Aufgaben sind nun Einzelaufgaben. Der Zeitaufwand ist extrem hoch und man verliert jegliche Motivation. Jeder der dieses Fach nicht zwingend machen muss, sollte sich davon fern halten!

Andere Meinung:

Es ist deutlich mühsamer als man bei 3 ECTS erwarten würde. Allerdings findet man im Template gute Anhaltspunkte wie sich die Professoren vorstellen. Inhaltlich sind die Vorlesungsvideos ziemlich gut gemacht, auch wenn die Präsenzvorlesungen eher unstrukturiert und nicht notwendig sind. In Summe eine anstrengende LVA, bei der man aber schon einiges lernt wenn man mit Web-Design nicht viel zu tun hatte.

2024S

Jetzt 6 ECTS mit ähnlichem Umfang. Wenn man schon ein wenig Erfahrung hat sind die Übungen in 1-2 Tagen locker möglich. Die Prüfung besteht aus zwei TUWEL-Tests, die wenn man die Übungen gemacht hat mehr als möglich sind. Insgesamt wenig Aufwand für 6 ECTS

Materialien

Neues Material hinzufügen

@

• @sueszli's summary (details)

A

• A1-Online-Test-Questions 2023-05-05.pdf (details)
• A1-Online-Test-Questions 2020-03-30.pdf (details)
• A2-Online-Test-Questions 2020-06-15.pdf (details)

S

• Summary-GraphQL.pdf (details)
• Summary-REST-TheLittleBookOnRESTServices.pdf (details)