TU Wien:Web Engineering VU (Kappel)

Diese LVA wird nicht mehr von dieser Person angeboten, ist ausgelaufen, oder läuft aus und befindet sich daher nur noch zu historischen Zwecken im VoWi.

Daten

Diese LVA wird nicht mehr von dieser Person angeboten, ist ausgelaufen, oder läuft aus und befindet sich daher nur noch zu historischen Zwecken im VoWi.

Vortragende	Gertrude Kappel
ECTS	3
Alias	Web Engineering (en)
Letzte Abhaltung	2019WS
Sprache	Deutsch
Links	tiss:188951 , Homepage

Zuordnungen

Bachelorstudium Wirtschaftsinformatik
Bachelorstudium Software & Information Engineering
Bachelorstudium Medieninformatik und Visual Computing

Mattermost: Channel "web-engineering" • Register • Mattermost-Infos

Inhalt

Einführung, XHTML, CSS, WAI, HTTP, Servlets, JSP, Patterns, JSF, RIA, AJAX, WebServices, Play, Modellierung von Webanwendungen, Gastvortrag "ASP.NET AJAX und Expression Web"

Ablauf

Jede Woche findet eine zweistündige Vorlesung statt, es sind vier Übungsaufgaben während des Semesters zu lösen und zwei Tests zu bestehen.

Benötigte/Empfehlenswerte Vorkenntnisse

Prinzipiell keine. Wer bereits mit HTML, CSS, Javascript, JQuery oder Angular gearbeitet hat, ist auf jeden Fall im Vorteil.

Vortrag

Etwas einschläfernd. Die Vorlesung über Modellierung von WebAnwendungen lohnt sich nicht mehr. HTML5, CSS, JS wird so kurz angerissen, dass es selbst für die Übungen nicht reicht. Die Vorlesung hinkt zum Teil den Übungen hinterher.

SS2018: Die Vorlesung ist ziemlich unbrauchbar und eignet sich bestenfalls um einen Überblick über die Thematik zu bekommen.Um die Übungen absolvieren zu können ist es auf jeden Fall notwendig, die Folien zu Hause bereitzulegen. Außerdem wird man um einiges an Eigenrecherche nicht herumkommen.

Übungen

Übung SS2018

Auch heuer wieder vier Übungsaufgaben, für welche jeweils zwei Wochen Zeit sind. Die Übungen können in Gruppen bis zu drei Leute gelöst werden. Bei zwei Abgabegesprächen, bei denen jeweils zwei Übungen zusammen besprochen werden, gibt es für jede Person Theoriefragen und der Code muss erklärt werden. Allerdings sollte dies kein Problem darstellen, wenn man die Aufgaben gewissenhaft und selbst gelöst hat. Außerdem reicht es nicht nur seine eigene Implementierung zu beherrschen, sondern auch die Codestücke der Kolleginnen und Kollegen sollte man einigermaßen verstehen und erklären können.

Die vier Aufgaben hatten folgende Schwerpunkte:

• UE1 (HTML5, CSS3, WAI)
• UE2 (JavaScript, jQuery, SVG)
• UE3 (Angular und serverseitiges JavaScript)
• UE4 (JSON-Webtokens (JWT), Websockets, HTTPS, Deployment)

Übung SS2017

Es gibt 4 verpflichtende Übungsaufgaben, die in einer Gruppe zu jeweils 3 Personen gelöst werden müssen. Auf jede Übung muss man mind. 7,5 Punkte haben.

• UE1 (HTML5, CSS3, WAI)
  • Drei selbst erstellte HTML-Seiten (login.html, options.html, overview.html) und eine selbst erstellte CSS Datei. Hier ist wichtig, dass man WAI-ARIA und WCAG berücksichtigt (siehe Folien), uns wurden beim Abgabegespräch einige Punkte deswegen abgezogen.

• UE2 (Client-seitiges JavaScript, Angular 2, SVG)
  • Beispiel aus Übung 1 in eine Angular 2 Applikation überführen.
  • Zusätzlich sollen mit Hilfe von jQuery einfache Animationen auf Scalable Vector Grafiken (SVG) durchgeführt werden.
  • Das Angular 2 Projekt war schon gegeben, man musste nur Komponenten hinzufügen und die HTML-Templates anpassen bzw. basierend auf den bereits gegebenen HTML Datei erstellen (das war dann die Musterlösung für die UE1).

• UE3 (Webserver, Interaction)

• UE4 (HTTPS, Linked Open Data, Optimierung)

Übung SS2016

Fast wie 2015, nur dritte Übung war JPA und vierte Übung war freiwillig und ausschließlich AngularJS (+ Javaseitig JSON senden).

Übung SS2015

Fast wie SS2013, daher eine Fastkopie: Im SS2015 gab es nur noch 3er-Teams, die Übungen wurden etwas minimiert, jedoch nur bezüglich des Implementierungsaufwandes, die Thematik bleibt die gleiche wie in den anderen Semestern (UE 4 beinhaltet zusätzlich zu Web-Services noch Datenbankanbindung mit JPA und Hibernate) Alle Übungen betreffen die Arbeit an einem Spiel Jeopardy (hat kaum etwas mit dem eigentlichen Spiel Jeopardy zutun, die Spielregeln sind eigen, die Ähnlichkeit besteht nur noch darin, dass die Antwort gegeben ist, aber mehrere Fragen angegeben werden sollen), wo der Spieler gegen einen Computergegner spielt.

• UE1 (XHTML, CSS, WAI, JavaScript)
  • Zwei XHTML-Seiten (Spielfeld und Formular), mit css-Formatierung, JavaScript zur Validierung des Formulars.

• UE2 (JSP, Servlets, MVC-Pattern) (kein Unterschied zu SS2013)
  • Die erste Seite (Spielfeld) aus Übung 1 wird dynamisch vom Server berechnet und an den Client geschickt
  • Verwendung von Servlets als Controller
  • Verwendung von JSP für die Views
  • Entwicklung einer Java-API, um den Spielfluss zu steuern

• UE3 (Play, JPA)
  • Alles wird nun im Play-framework umgesetzt
  • Persistenz mit JPA

• UE4 (JPA, External APIs)
  • Anbindung der Play-Applikation aus UE3 an Datenbank H2 mit Hibernate und JPA
  • Anbindung zu einem Highscore-Board
  • Posten der Highscores auf Twitter über Twitter-API
  • Abfrage von dbpedia

Übung SS2013

Im SS2013 gab es nur noch 3er-Teams, die Übungen wurden etwas minimiert, jedoch nur bezüglich des Implementierungsaufwandes, die Thematik bleibt die gleiche wie in den anderen Semestern (UE 4 beinhaltet zusätzlich zu Web-Services noch Datenbankanbindung mit JPA und Hibernate) Alle Übungen betreffen die Arbeit an einem Spiel "Formel0", wo der Spieler gegen einen Computergegner spielt.

• UE1 (XHTML, CSS, WAI, JavaScript)
  • Zwei XHTML-Seiten (Spielfeld und Formular), mit css-Formatierung, JavaScript zur Validierung des Formulars und Bewegung der Autos auf dem Spielfeld
• UE2 (JSP, Servlets, MVC-Pattern)
  • Die erste Seite (Spielfeld) aus Übung 1 wird dynamisch vom Server berechnet und an den Client geschickt
  • Verwendung von Servlets als Controller
  • Verwendung von JSP für die Views
  • Entwicklung einer Java-API, um den Spielfluss zu steuern
• UE3 (JSF)
  • Selbe Aufgabenstellung wie UE2, nur eben Austausch JSP und Servlets gegen JSF
  • Zusätzlich Entwicklung des Formulars und Logins aus UE1 (Usersessions, Userpool)
  • Verwendung von Templates, Composites etc.
  • Validierung via JSF
• UE4
  • Anbindung der JSF-Applikation aus UE3 an Datenbank H2 mit Hibernate und JPA
  • Anbindung zu Picasa und Vergabe von Avataren an die User
  • Anbindung zu einem Highscore-Board
  • Posten der Highscores auf Twitter über Twitter-API

Übung SS 2012

Im SS 2012 wurde in 4er-Teams gearbeitet (wegen des hohen Ansturms auf die LVA, ursprünglich waren 3er-Teams geplant).

• UE1 (XHTML, CSS, WAI)
  • Zwei Seiten (als Bilder zur Verfügung gestellt) nachbauen: Ein Registerformular und ein Mensch-ärger-dich-nicht-Spiel.
• UE2(JSP, Servlet, Model2)
  • API für das Spiel entwickeln
  • Funktionalität implementieren: Ein Spieler soll gegen einen Computergegener spielen können (mit jeweils nur einer Figur)
  • Model2-Pattern
• UE3(JSF, Ajax)
  • Spiel mit Ajax und JSF implementieren
  • Login Funktionalität
• UE4 (Icefaces, WSDL, Picasa und Twitter API)
  • Spiel gegen anderen Menschen mit Hilfe von Ajax Push
  • Anbindung von Webservices

Übungen SS2010

3er Teams, 4 Übungen jeweils mit Abgabe. Wüsste nichts von einer Fragestunde.

• UE1 (XHTML, CSS, WAI)
  • Zwei Seiten (als Bilder zur Verfügung gestellt) nachbauen: Ein Registrationsformular und ein Memoryspieltisch.
• UE2 (JSP, Servlet, MVC)
  • Eine API für ein Memoryspiel soll entwickelt werden
  • eine erste rudimentäre, funktionierende Version mittels JSP und Servlets implementiert werden.
  • Wichtig ist, das System mit einem MVC2-Pattern umzusetzen. Statische Feldgröße von 4x4 Karten.
• UE3 (JSF, AJAX)
  • Neuimplementation des Memoryspiels mit Auswahl eines 2x2, 4x4 und 6x6 Feldes mit JSF 2.0.
  • Implementation einer simplen Benutzerauthentifizierung.
  • Validation des Registrierungsformulares
  • Nachladen von Daten bei Spieltisch mit AJAX
• UE4
  • last.fm API verwenden (Cover Bilder laden, Artist Bilder laden, Top Artists auslesen)
  • Mehrspielermodus (nur 2 Spieler, nur 1 Spiel, keine Fehlerbehandlung)
  • Webservice (SOAP/WSDL) vom Institut verwenden (Highscore)

früher

Der Übungsteil wird in 2er-Teams durchgeführt und besteht aus drei Übungen. Es gibt eine Abgabe pro Übung, wo man seine Lösung präsentiert und ein paar Fragen beantwortet. Vor jeder Abgabe gibt es eine Fragestunde. Bei einer Fragestunde muss man einen kleinen Teil schon fertig haben und einen Ansatz für die weitere Lösung haben.

Übungen SS2008

• UE1
  • XHTML, WAI: Es sollen 2 Seiten (als Bilder zur Verfuegung gestellt) nachgebastelt werden. (Ein Registrier-Formular und ein Poker-Tisch).
• UE2
  • Servlet: Es soll eine vereinfachte Version von Texas Hold'Em-Poker nachgebaut werden (Pokertisch aus UE1). Die API fuer das Spiel wird zur Verfuegung gestellt, es geht also nur um das Servlet.
• UE3
  • JSF: Es soll mittels JSF das ganze Poker-Portal "nachgebildet" werden (mit Registrierung von Spielern, Einloggen, das Spiel an sich ...)
• UE4
  • AJAX: Es soll ein Chat mit AJAX und JavaScript erstellt werden.
  • ICEFaces: Es soll das Poker-Portal aus UE3 mittels ICEFaces implementiert werden + diverse Spielereien eingebaut (Effekt beim Karten-Geben, WebService ueber wsdl ...)

Übungen aus SS2007

• UE1
  • HTML, WAI: Einige HTML Seiten sollten XHTML- und WAI-tauglich gemacht werden, wobei das Aussehen der Webseiten beibehalten werden sollte.
  • Servlets: Es sollte eine vereinfachte Version des Spiels "Schifferlversenken" (engl. Battleship) entwickelt werden.
• UE2
  • JavaServer Faces: Es war eine angefangene Web-Anwendung gegeben, die bereits alle für JavaServer Faces notwendigen Bibliotheken und Konfigurationen aufweist. Wir sollten sie um einige Funktionen erweitern.
  • AJAX: Es sollte eine kleine Rich Internet Application entwickelt werden, welche mittels XHTML 1.0 strict und AJAX realisiert wird.
• UE3
  • WebRatio: Eine Webseite sollte mittels WebRatio entwickelt werden.

Prüfung, Benotung

• Tests
  • Es gibt zwei Tests, man muss jeweils positiv sein. Der Stoff ist nicht sehr anspruchsvoll, aber zumindest zum 2. Test sollte man sich den Stoff schon etwas ansehen, wenn man nicht in der Vorlesung war.

• Abgabegespräch
  • Es gibt 2 Abgabegespräche, Übungen 1&2 beim 1. und 3&4 beim 2.
  • Wurden Fehler gefunden, so bekommt man etwas Abzug (hatten etwa vergessen bei Übung 1 die Seite nach WAI zu überprüfen) --> merkt ihr als Gruppe, dass notierte Fehler eig. keine sind, sagt es damit sich der Tutor das noch einmal ansieht, dann könnt ihr die Punkte bekommen
  • Passt alles, so erhält man einfach die volle Punktezahl für die jeweilige Übung, ohne dass noch viel kontrolliert wird
  • jedes Gruppenmitglied erhält pro Übung 1 Frage (was ist MVC-Pattern, wie kann man CSS einbinden, was ist WCAG, Servlet, Session, etc.), man muss jedoch nicht recht ausführlich antworten und die Benotung ist nicht sehr streng (nur 1 Punkt Abzug von 5 obwohl Frage kaum beantwortet werden konnte) -> hängt vermutlich vom Tutor ab
• (Update UE Abgabegespräch SS17) Folgende Fragen kamen:
  • UE1 und UE2: wie routing funktioniert, JSON erklären, was für selektoren sind bei CSS 3 neu, was ist der unterschied zwischen html5/xhtml, svg und canvas unterschied, was ist DOM, wie kann man DOM traversieren (jquery zb), javascript vs typescript, wo kann man css schreiben, besonderheiten javascript, WAI guidelines, angular bindings, was ist Responsive Design
  • UE3 und UE4: Asynchron/Synchron Unterschied? (ajax ist asynchron wegen dem Namen, Node.js); Web Services, SOA; Open Data linked Data; HTTPs, was sind Zertifikate, kann man mitlesen, weiß man mit wem man spricht? Wie kann man die Verwendung von HTTPs forcieren? (-> HSTS)
  • Bei uns liefen die Abgabgegespräche so ab: falls Fehler vorhanden waren, wurden uns diese gezeigt und auch gesagt, wie es richtig gehört hätte bzw. warum dort Punkte abgezogen wurden. Danach kamen einige Fragen zum Stoff der Übung. Hier wurde nicht sehr ins Detail gefragt.

Zeitaufwand

• Wenn man ein gutes 2er-Team ist und den Stoff schnell begreift, dann reicht 1 Wochenende pro Übung.
• S2012 gab es 4er Gruppen. Manchmal war der organisatorische Aufwand größer als der eigentliche Übungsaufwand. In unsrer Gruppe hatten wir Arbeitszeiten von 2-15 Stunden pro Person und Abgabe.
• Im SS2013 war der Übungsaufwand meines Erachtens recht hoch. Die Gruppengröße wurde auf 3 reduziert und die Beispiele wurden (in Bezug auf den Umfang, nicht den Themenbereich) gekürzt (Formel0 statt Mensch ärgere dich nicht). Jedoch war der Aufwand für die Übungen immer noch wesentlich höher als in anderen LVAs, die die gleiche ECTS-Anzahl für die Absolvierung vergeben. Besonders beim 3. Beispiel (JSF) war es recht schwierig, da um gut eine Woche weniger Zeit war als bei den anderen Beispielen. Auf jeden Fall: nicht vom 1. Bsp auf die anderen schließen, denn dieses ist sehr kurz und war noch dazu über die Osterferien zu machen (fast 1 Monat für diese Aufgabe!). Die anderen Beispiele haben doppelten bis dreifachen Aufwand und man hat weniger Zeit diese zu erledigen, als beim ersten. JEDOCH muss man sagen, dass die Beispiele sehr interessant sind und es sich auf jeden Fall lohnt diese LVA zu absolvieren (ist eine der praxisorientiertesten und interessantesten die ich gemacht habe). Man lernt sehr viel dabei!
• Im SS2015 war der Übungsaufwand recht hoch. Die Vorlesung hilft bei den Übungen wenig bis garnicht, denn die Themen werden nur kurz angerissen oder hinken hinterher. Andere Meinung: kann ich nicht bestätigen, die Vorlesungsfolien lieferten meist genügend Informationen, für die Übungen reichten ein paar Tage.
• SS2018: relativ hoch, wenn man alle Punkte möchte, dann muss man im 3er-Team pro Person gut 2-3 Nachmittage investieren.
• Achtung: Für alle die sich überlegen WE als Frei bzw. Wahlfach zu nehmen, hier meine persönliche Meinung. Ich finde dass diese LVA locker mehr als 3ECTS Lern bzw. Arbeitsaufwand hat. Die Vorlesungen sind lustlos gestaltet und bringen nicht viel für die 4 Übungen. Die Gruppenübungen sind aufwendig und zwei Tests für ein 3ECTS Fach sind auch nicht die Norm. Man lernt aber viel Neues, nur leider extrem unausgeglichen.(SS18)

Literatur

Keine Spezielle.

hilfreiche Links

Der Bereich im Informatikforum ist für nicht-Winfler schwer zu finden: https://web.archive.org/web/*/www.informatik-forum.at/forumdisplay.php?988-Web-Engineering-VU

Wo gibts Materialien, Mitschriften, Skripten, Folien...

• aktuelle Testangaben und sonstige Materialien

• alte Testangaben und sonstige Materialien

Tipps

noch offen

Verbesserungsvorschläge / Kritik

noch offen

Materialien

Neues Material hinzufügen

2

• 2. Test (Nachtest) SS2012
• 2. Test SS16
• 2. Test SS16.txt (details)

M

• Musterlösung Test 1 Gruppe A SS16.pdf (details)
• Musterlösung Test 1 Gruppe B SS16.pdf (details)
• Musterlösung Test 1 Gruppe C SS16.pdf (details)
• Musterlösung Test 2 Gruppe A SS16.pdf (details)
• Musterlösung Test 2 Gruppe A SS18.pdf (details)
• Musterlösung Test 2 Gruppe B SS16.pdf (details)
• Musterlösung Test 2 Gruppe B SS18.pdf (details)

T

• Test 1 Gruppe A SS18.pdf (details)
• Test 1, SS14
• Test 1, SS18
• Test 2 SS2018

W

• Web Zusammenfassung M6-M9 SS17.pdf (details)
• WETest2 Gruppe A SS18 Musterlösung.pdf (details)
• WETest2 SS18 Musterlösung.pdf (details)

Z

• Zusammenfassung Folien M01-M05 SS16 natter.PDF (details)
• Zusammenfassung Folien M06-M11 SS16 natter.PDF (details)
• Zusammenfassung Test 2 - SS 16.pdf (details)