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

SS2026:

• 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
  • Websockets
• 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).

2026S: 5 Einzelaufgaben, wobei die erste als "Einstiegstest" fungiert. Pro Aufgabe hatte man ca. 3 Wochen Zeit, wobei zwei Mal auch die Deadline verlängert wurde. Am Ende des Semesters gabs einen (optionaler) TUWEL Test. Generell wurde der Stoff mittels alten Vorlesungen, welche auf Youtube hochgeladen wurden, beigebracht. Weiters gab es planmäßig 5 live Vorlesungen (eine wurde krankheitsbedingt und eine zweite wegen der Demo gegen die Budgetkürzungen abgesagt) sowie ein paar extra Readings und Aufgaben zum Vertiefen des Stoffes.

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.

Ab 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

SS2026: Sehr ähnlich zu SS2025, jedoch wurde dieses Jahr der Test tatsächlich in Präsenz abgehalten. Man wurde aufgefordert, dass man einen eigenen Laptop oder ähnliches Gerät mitnimmt, womit man sich in TUWEL einloggen kann, um dort den Test abzulegen. Im Notfall, falls man aus irgendeinem Grund keinen Laptop verwenden kann, konnte man alternativ den Test in Papierform vom LVA-Team bekommen oder (inoffiziell) auch am Handy machen. Das Testformat war Multiple Choice mit 15 Fragen insgesamt und 45 Minuten Arbeitszeit. Der Test war beinahe ident zu dem aus 2025, im Sinne, dass die richtigen Antworten gleich waren, aber die Fragestellungen minimal anders waren (andere Variablennamen, synonyme Formulierungen, etc.). Es gab auch Fragen, die wirklich 1 zu 1 übernommen wurden.

Eine weitere Änderung war, dass man zu A1-5 ein "AI Usage Submission" PDF abgeben musste, in welchem man beschreibt, ob und wie man AI für die jeweilige Aufgabe verwendet hat. Zusätzlich konnte man an einer Studie / Umfrage bezüglich der AI Verwendung teilnehmen. Falls man alle vier Surveys abgeschlossen hat, hat man 8 Bonuspunkte bekommen.

SS2025: Es gab eine Prüfung gegen Ende des Semesters, ursprünglich hätte dieser in präsenz und ein closed book multiple-choice test sein sollen. Allerdings auf Grund von Terminüberschneidungen mit Prüfungen von anderen LVAs und anschließend dem Problem einem passenden Hörsaal zu finden, wurde die Prüfung online als open-book TUWEL-Test abgehalten. Mit einer Mischung aus eigenem Wissen, Unterlagen und chatGPT war die Prüfung relativ easy.

Benotung: Man braucht auf jedes Assignment mindestens 30% und insgesamt auf die Assignments 50%, was 35 Punkten entspricht. Insgesamt braucht man 50 Punkte um die LVA zu bestehen, das heißt man kann man die LVA abschließen ohne die Prüfung zu schreiben.

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	letzter Test 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
2025S	18.06.2025	01.07.2025	2 Wochen
2026S	24.06.2026	02.07.2026	1 Woche

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

2025SS waren die Punkte wenige Stunden nach dem Test auf TUWEL.

2026S wurden die Ergebnisse 15 min nach Testende auf TUWEL veröffentlicht.

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).

Yet another Meinung (SS26): Ohne großen Vorwissen (habe mal vor so 7 Jahren eine einfache statische Website gebaut), habe ich etwas unter 3,5 ECTS Aufwand für einen 1er gebraucht. Ich habe mir notiert, dass ich etwa 85h gebraucht habe, um alle Vorlesungen, Readings und Surveys anzuschauen sowie alle Punkte auf die Aufgaben und Test zu bekommen. Pro Aufgabe habe ich durchschnittlich 13h gebraucht, wobei diese eigentlich nicht so schwer waren, es dauerte einfach nur sich in das neue Thema einzuarbeiten und alle Testcases erfolgreich abzuarbeiten (manche Tests waren sehr nervig...). Für den Test habe ich ca. 6h die Folien durchgelesen und Alttests angeschaut.

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. (Alle Vorlesungen sind verfügbar auf Citos Youtube Channel)

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

Highlights / Lob

SS26: Vom Aufwand und Bewertung her sehr angenehme LVA. Obwohl ich Web Development generell eher abgeneigt bin, fand ich den Stoff recht interessant und gut aufbereitet. Cito ist auch ein sehr charismatischer und studentenfreundlicher Professor. Es gab zwar ein paar Probleme heuer (siehe Kritik unten), aber generell finde ich diese LVA sehr empfehlenswert. Hoffentlich werden künftige Austragungen / Iterationen von Web Engineering die aktuelle Qualität aufrecht erhalten (SS26 war vorerst das letzte Mal, dass Cito dafür zuständig ist).

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

2026S:

• Bei der HTML/CSS Aufgabe A1 gab es einen "Plagiatsskandal", wo offiziell einige Studierende voneinander abgeschrieben haben und von der LVA-Leitung E-Mails bekommen haben, wo gezeigt wurde, dass sie Teil von einem Plagiatscluster sind. Scheint man in einem Plagiatscluster auf, bekommt man alle Punkte der Aufgabe aberkannt und eine Mahnung, dass man beim nächsten Auftreten eines Plagiats negativ bewertet und aus dem Kurs geworfen wird. Jedoch waren auch offensichtlich einige Leute betroffen, welche nicht plagiiert haben, was natürlich für Furore gesorgt hat. Ich war davon nicht betroffen und ich weiß auch nicht genau wie die LVA-Leitung die Plagiate begründet hat oder damit umgegangen ist, aber Erzählungen nach, hat es zum Wünschen übrig gelassen. (Meine honest und maybe naive Meinung: Natürlich wird der Code von einigen sehr ähnlich sein, bei einer Aufgabe, wo man einer fixen Vorgabe nach ein paar Zeilen CSS schreiben muss. Die Syntax von CSS hat halt auch nicht sooo viel Variation, dass man die Aufgabe komplett einzigartig erledigen kann. Nachdem es bei den darauffolgenden Aufgaben dieses Problem nicht gab, hab ich den Eindruck, dass die LVA-Leitung hier vielleicht einfach überkritisch mit den von ihrer Plagiatssoftware geflagten Codestücken umgegangen ist.)
• Die Bewertungen der Aufgaben haben meistens lange gedauert. Das wäre finde ich nicht so problematisch gewesen, wenn sie nicht im Forum und in der Vorlesung, auf Nachfrage hin, meinten, dass diese in ein paar Tagen / bis Ende der Woche / demnächst bewertet werden. Spoiler: Das war nie der Fall. Ich weiß nicht, ob und warum es intern so große Probleme bei den Bewertungen hab, aber man hätte hier deutlich transparenter mit den Studierenden sein können; wenn die Bewertungen noch lange nicht bereit sind, sollte man nicht den Eindruck geben, dass man diese bald schon bekommt. Hier noch die konkreten Wartezeiten:

Aufgabe	A0	A1	A2	A3	A4
Dauer in Tagen	2	39	48	20	5

• Manche der Tests waren flaky oder schlecht designed. Falls man bei den diesjährigen Teilnehmer:innen eine PTSD-Episode auslösen möchte, muss man nur das Zauberwort "Wodigoatowu" aussprechen. (Kontext: Test 106 von A2 sorgte bei einigen für ein Timeout beim Fetchen vom Suchterm "Wodigoatowu" von der Artmart API. Einige, me included, haben viele Stunden reingesteckt, beim Versuch den Bug zu beheben. Es gab einen sehr aktiven Forumsthread dazu und es dürfte das meist angesprochene Problem bei den Tutor Hours gewesen sein, sodass die Lösung dafür von einem Tutoren im Forum veröffentlicht wurde.)

Materialien

Neues Material hinzufügen

2

• 2025-06-18-Test.pdf (details)

@

• @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)