TU Wien:Web Engineering VU (Cito)

Aus VoWi
Zur Navigation springen Zur Suche springen
Ähnlich benannte LVAs (Materialien):

Daten[Bearbeiten | Quelltext bearbeiten]

Vortragende Markus BöckJürgen CitoDavid Michael KaindlstorferSamuel PilzMichael Schröder
ECTS 6,0
Letzte Abhaltung 2024S
Sprache English
Mattermost web-engineeringRegisterMattermost-Infos
Links tiss:194161, tiss:188951, eLearning, Homepage
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[Bearbeiten | Quelltext bearbeiten]

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[Bearbeiten | Quelltext bearbeiten]

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[Bearbeiten | Quelltext bearbeiten]

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[Bearbeiten | Quelltext bearbeiten]

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[Bearbeiten | Quelltext bearbeiten]

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[Bearbeiten | Quelltext bearbeiten]

HTTP-Request:

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

A1 - HTML & CSS[Bearbeiten | Quelltext bearbeiten]

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[Bearbeiten | Quelltext bearbeiten]

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[Bearbeiten | Quelltext bearbeiten]

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.

A4 - Vue[Bearbeiten | Quelltext bearbeiten]

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.

Prüfung, Benotung[Bearbeiten | Quelltext bearbeiten]

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[Bearbeiten | Quelltext bearbeiten]

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[Bearbeiten | Quelltext bearbeiten]

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.

Unterlagen[Bearbeiten | Quelltext bearbeiten]

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[Bearbeiten | Quelltext bearbeiten]

  • 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[Bearbeiten | Quelltext bearbeiten]

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.