Section outline

    • Logo Webentwicklung 2

    • Wege zum Erfolg des Fachs "Webentwicklung 2"

       

      Die wichtigsten Neuerungen im Sommersemester 2025: 

      • Mehr Fokus auf Styling und CSS. Da dies immer wichtiger wird.
      • Klare Dartellung: Welche Webtechnik ist wofür sinnvoll? Unterschiede zwischen Homepage-Baukästen wie Wordpress / Typo 3 und Webapplikationen. 
      • Die Login Funktionalität wurde vereinfacht.
      • State-Management bei Solid für Apps, um Daten zwischen Komponenten und Seiten auszutauschen.

      Hinweise zum Fach und zum Ablauf und Erfolg:

      • Webentwicklung 2 ist eines der anspruchsvollsten Technologiefächer im Studiengang Mediendesign.  Es beinhaltet akuelle Webtechnologien zeigt und nicht die häufig eingesetzten, veralteten Systeme. 
      • Viele ehemalige Studierende berichteten, dass das Wissen aus diesem Fach eine Eintrittskarte für Praktika und Jobs war. Aufgrund der angespannten wirtschaftlichen Lage sind spannende Projekte nicht mehr so einfach zu bekommen. Mit den richtigen Skills geht es leichter.
      • Da die Inhalte insgesamt recht komplex und vielfältig sind, sind Inhalte nun verstärkt Schritt für Schritt aufeinander aufgebaut.
      • Ein Invest von ca. 2 Stunden pro Woche nach den beiden Vorlesungen ist absolut notwendig, um die Inhalte nachzuvollziehen.
      • Dieser Zeitinvest ist absolut notwendig, damit sie nicht abgehängt werden. Jene, die nicht dabei bleiben, haben enormen Stress am Ende des Semesters, was fast immer zum panischen Schieben des Fachs führt.
      • Leider kann der Erkenntnisgewinn durch nichts außer das selbstständige Anwenden der Inhalte ersetzt werden. Daher wurde die Vorlesung um zahlreiche praktische Einheiten erweitert. Wenn Sie nicht üben und nicht zur Vorlesung kommen, kann ich nicht viel machen. Der Wissensaufbau aus dem Internet ist definitiv zeitaufwendiger, weil sicher 2/3 der Tutorials fehlerhaft sind. Der enorme Zeitaufwand, um herauszufinden, was geht und was nicht geht, habe ich ihnen quasi schon abgenommen. 
      • In den vergangenen Semestern wurden öfters Ansätze aus YouTube oder ChatGPT Schnipseln zusammengeklickt, ohne zu wissen, warum was gemacht wird. Vieles war architektonisch ungeschickt und die Apps funktionierten nicht, waren instabil und hatten Sicherheitslücken. In Industrieprojekten ist ein solider Aufbau projektentscheidend. In unzähligen Projekten sahen wir Softwareunfälle von Projekten, die so gebaut wurden und später enorme Probleme nach sich zogen. KI-Tools sind eine gute Hilfe, aber nur in sinnvollem architektonischen Kontext.
      • Ich frage oft jene, die sehr gute Projekte abgegeben, haben folgende Frage: "Was haben Sie getan, ein so gutes Projekt und damit eine 1,x zu bekommen:" "Ich hab halt früh angefangen und dann so nach und nach weiter gemacht. Am Ende brauchte ich noch ein Wochenende, dann war es fertig!" "Ich wollte eine gute App haben" "Ich hatte Lust drauf, am Anfang wars blöd, aber mit der Zeit kommt man rein!" "Ich habe viele viele Tutorials angeschaut. Es kostete enorm viel Zeit!" "Der Anfang war zäh, aber dann gings!" "Ich wollte diese Anwendung haben!" "Ich möchte in den Webbereich!" "Ich habe die Beispiele angeschaut!" "Ich habe mit ein paar Leuten zusammen gearbeitet!" "Letztes Semester habe ich es unterschätzt und dieses Jahr habe ich es dann durchgezogen!"
      • Das Fach ist gut machbar, wenn sie dran bleiben.
       

      Wichtige Randbedingungen:

      • Bitte nutzen sie das Toolset, das hier gezeigt wird. In Projekten haben sie auch meist nicht die Wahl, was sie benutzen möchten. Es gibt viele gute Frameworks. Aber zu einer Bewertung muss ich auf die Nutzung der vorgestellten Technologien bestehen, bzw. müssen sie andere Technologien mit mir abzustimmen. Nicht allein die Optik einer Seite und die Präsentation muss passen, sondern der Aufbau der Software muss stimmen, damit sie marktrelevant durchstarten können. Unsichere Software mit schlechtem Aufbau zerstört ganze Unternehmen. Beispiele hierzu in der Vorlesung. 
      • Projekte mit Baukästen wie Wordpress, Joomla, Typo 3 dürfen nicht genutzt werden.

       

      Projektabgabe

      • Projekte können in Zweiergruppen bearbeitet werden.

    • Vorlesungsplan: 
      Der Vorlesungsplan kann je nach Bedarf etwas verschoben werden. 

      1. Einführung in die Webtechnologien
      2. Unterschiede von Frontends und Webtechnik.
      3. Javascript Wiederholung, Objekte, Strings
      4. Javascript Objekte, Arrays
      5. Javascript Objekte, Arrays, Funktionen
      6. Javascript neuere Sprachfeatures und VanillaJS. Astro Einführung.
      7. Was ist ein Metaframework?
        Astro
        Intro/ HTML / CSS / Tailwind / Daisy UI
      8. Astro Layouts mit Parametern, Markdown
      9. SolidJS - UI-Elemente
      10. SolidJS - Signals 
      11. CRUD
      12. CRUD (Solid Componenten und Postman)
      13. CRUD (Server Endpoints, SQLite und Datenbanken) (30.4.)
      14. CRUD (Erster kompletter CRUD Service)
      15. CRUD (Wiederholung kompletter CRUD Service & Git Workshop) (7.5.)
      16. CRUD (Workshop: Datenmodelle, Doppelblock, Übung: Items Tabelle selbst erstellen, Git Workshop) (12.05.)
      17. CRUD Item Service mit Bildupload (19.05) 
      18. sharp, CRUD Rent Service (21.05.)
      19. Login - Prinzip, Token, LocalStorage - Daten im Browser speichern.  (26.05.)
      20. Login / Register - Register, Integration mit Router und eigener SPA Navbar. (28.05)
      21. Integration mit Router und eigener SPA Navbar. (2.06.)
      22. Solid - Router und SPA. Solid State Management (4.06.)
      23. CSS mit Tailwind: Utility First, rem/px, mobile first, responsive, Zustände Arias, Spacing (16.06.)
      24. CSS Schriften, Farbsystem, Flexbox/Grid, Tables, Übungen  (18.06.)
      25. CSS Fancy Stuff, Übung (23.06.)
      26. Pro Workshop (Welche Themen eignen sich für eine Weiterführung im Webbereich) (25.6.) 
      27. Workshops + Fragestunden (3.7.)

      Weitere-Workshops in der vorlesungsfreien Zeit. 

      • 8.7.2025, 10 Uhr in T111
      • 10.7.2025, 10 Uhr in T111
      • 14.7.2025, 10 Uhr in T111