Section outline

  • Collapse Expand

    Webentwicklung 2

    Collapse all Expand all

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

    • Ankündigungen Forum
    • BBB Stream der Vorlesung BigBlueButton

    • 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 
  • Collapse Expand

    Abnahme der WebApps

    • Abgabe der WebApps bis spätestens 22.07.2025, 20 Uhr Assignment
      Hochladen der ZIP-Datei im Sommersemester 2025 bis spätestens 22.07.2025, 20 Uhr
      Übergabetermine (15 Min pro App, BBB) am 23.7.2025 ab 10 Uhr und am 24.7.2025 ab 8:30 Uhr 

       

      Jeder Teilnehmer gibt eine ZIP Datei mit folgenden Inhalten ab: 

      • Quellcode der App (!!!!! ohne den Ordner node_modules und ohne .git  !!!!!!), sonst bitte alles. Dann ist die ZIP-Datei auch klein genug. 
      • Kurzdoku der App
        • sehr knappe kurze Beschreibung (maximal 0,5-1 Seite) der Hauptfunktion/zweck, die Vorstellung der App soll auf die statische Marketingseite drauf.
        • Datenmodell bitte einfügen (darf funktional aussehen, muss nicht schön sein)
        • Zieldevice (Smartphone, PC, Tablet)
        • Screenshots aller Views der App. Keine lange Doku!
       
      Dateiname - bitte nur so:

      Web2_Vorname_Name_Matrikelnummer_Vorname_Name_Matrikelnummer_TitelDerApp.zip

      ------------------------------------------------------------------

      Bewertung der App: 

      Neue Bewertung ab SoSe2025:

      • App/UI/UX/Umsetzung der Idee: 40%
      • Code/Aufbau: 35%
      • Fragen beim Abnahmegespräch: 25%

      (Konzepte müssen verstanden sein und es sollte bekannt sein, warum was gemacht wird. Dies wird eingeführt, um zu vermeiden, dass ChatGPT Komponenten wahllos zu Projekten zusammengeklickt werden. ChatGPT eignet sich gut zum Lernen. Jedoch sollte stehts genau nachvollzogen werden, was generiert wird).

      ------------------------------------------------------------------

      Hinweise zur Umsetzung: 
      • Es sollte ein WebApp sein mit einem echten Use Case.
      • Ein perfektes Design ist nicht die Hauptaufgabe in Web 2, sondern die Funktion und eine stimmige Bedienbarkeit und damit gute UX.
      • Umsetzung bitte mit Astro/SolidJS
      • >= 1 SSR/SSG Seite, die das Produkt "verkauft"also eine Art statischer Marketing One-Pager. 
      • Seiten mit interaktiven Komponenten mit Solid. 
      • RESTful Service: Es sollte ein Cloud-Anwendung sein, sprich Daten sollen eingegeben werden, gespeichert, geladen werden können. Es sollten aber auch rein darstellende Seiten enthalten sein wie beispielsweise About/Welcome etc. Hierzu können die Vorlagen aus der Vorlesung natürlich verwendet werden. Im Serversystem sollte REST umgesetzt werden und die Daten in einer Datenbank (hier reicht SQLite aus) gespeichert werde

      Sauberer Aufbau: 

      • Einige Gruppen benannten die Komponenten nicht klar, es waren deutsch englische Variablen enthalten. Das ist leider schlechter Stil in der Softwareentwicklung und am besten gewöhnt man sich schnell einen guten Stil an. Dieser kostet keinerlei Zeit, spart aber später Zeit. 
      • Saubere einheitliche Benennung der Datenbanktabellen und Spalten (kein Deutsch/Englisch Mix).
      • Saubere Architektur und klarer Aufbau. Bitte für eine Sprache bei der Darstellung (also der Webseite) entscheiden - durchgängig alles deutsch oder alles englisch). 

      Für Noten besser als 1,8 sind erweiterte Technologien vorausgesetzt (heißt aber nicht, dass wenn die Technologien enthalten sind, automatisch eine 1 vor dem Komma steht, es zählt die Gesamtnote): 

      • Login / Registration
      • Solid Routing und Stores. 
  • Collapse Expand

    Wissens-Check

    • Webtechnik/Astro:
      • Was ist ein Microservice, was ist ein Monolith?
      • Was bedeutet Serverside Rendering, Static Side Generation, Single Page App?
      • Was ist ein Server-Endpoint?
      • Was sind Vorteile von Astro?
      • Wie werden Layouts in Astro definiert? Wozu dienen diese?
      • Wie werden Nav-Bars in Astro integriert?
      • Was ist static Routing in Astro?
      • Was ist dynamic Routing in Astro?
      • Tailwind CSS und DaisyUI - wofür wird dies genutzt?
      • Unterschied zwischen ServerSideRendering und SinglePageApps?
      • Wie werden Daten zwischen Frontend und Backend ausgetauscht?
      • Was ist Markdown?
      • Wie kann Markdown in Astro gerendert werden?
      • Was ist JSON?
      SolidJS
      • Was ist eine Komponente?
      • Was ist JSX?
      • Was steht in der return Funktion einer Solid-Komponente?
      • Was ist ein Signal? Wozu wird es gebraucht?
      • Was ist eine Ressouce und was ist der Unterschied zu einem Signal?
      • Was ist eine Prop?
      • Wie können Komponenten Props übergeben werden?
      • Wie wird eine Komponente upgedated und wie werden Nutzerinteraktionen realisiert?
      Backend / Datenbanken
      • Was ist SQLite?
      • Was ist eine UUID?
      • Welche Typen von REST Abfragen gibt es?
      • Welche 3 Möglichkeiten gibt es, Daten in einer REST-Abfrage zum Server zu übermitteln?
      • Welche Verknüpfungen von Tabellen gibt es in SQL?
      • Wie heißen die 4 Befehle zum Lesen, Neu anlegen, Ändern und Löschen von Tabellen in einer Datenbank?
      • Welche 3 Möglichkeiten zum Verknüpfungen von Datenbanken gibt es?
       
       
  • Collapse Expand

    Einführung und Technologieüberblick

    • Vorlesung 1: Einführung und Technologieüberblick 

      • Vorstellung und Einführung
      • Felder der Webentwicklung
      • Technologieüberblick - Web 1.0 bis heute
      • Spekulation über die Webtechnologie in der Zukunft.
      • Anforderungen an die Projekte (die Infos werden auch auf Moodle veröffentlicht)
      • Info: Historische Webdesigns webdesignmuseum.org

    • Vorlesung 2: Grundkonzept

      Servertechnologien
      • Monolith / Microservice
      • Gängige Technologien
      Zwecke von Apps/Webportalen:
      • Wie eine Webapplikation entsteht
      • Zweck der App, Mobile, Web - vom Geschäftsmodell zur App
      • Technologiebrüche
      Technische Konzepte:
      • Server Side Rendering (SSR)
      • Single Page App (SPA)
      • Konzept Datenaustausch (SSR und SPA)
      • Inhalte der Vorlesung SSR und SPA und intelligente Komponenten

    • Nacharbeit Vorlesung 1 und 2 (ca. 30-40 Minuten), folgende Fragen sollten sie in der nächsten Vorlesung beantworten können und reflektiert haben: 

      • Was ist der Unterschied zwischen einem Monolithen und einem Microservice?
      • Welche modernen Serversysteme kennen sie?
      • Wie entsteht ein Portal?
      • Was ist ein Technologiebruch?
      • Erklären sie SSR und nennen sie drei Beispiele von Seiten mit SSR.
      • Erklären sie SPA und nennen sie drei Beispiele von Webapplikationene mit SPA.
      • Wie werden Daten zwischen App / Webapp ausgetauscht?
      • Was sind intelligente Webkomponenten?
      Fertigen Sie eine Mindmap an oder eine 1-Seite Zusammenfassung in ihrem Stil.
    • Skript zu Einführung in die Technologien File
      • Einsatzbereich der Webtechnik
      • Anwendung der Webtechnik
      • Web 1.0 / Web 2.0
      • SSG, SSR, SPA, PWA, App
      • Serverstrukturen (Monolith, Microservice)
      • SaaS, Serverless Functions, API
      • Gängige Serversysteme
      • Moderne Systeme
      • Zukunftsblick
  • Collapse Expand

    Javascript

  • Collapse Expand

    Astro

    • Skript: Wird jedes Mal erweitert File
    • Zusätzliches Skript (aus Cloud Computing): Astro SSR, SSG, Islands File

    • Vorbereitung für Astro

      • BItte installieren Sie die letzte Stable Version von Node - https://nodejs.org/en
      • Setzen Sie die Pfad Variable.

    • Vorlesung 1: Überblick über Astro - erste Seiten

      • Installation
      • Übersicht über den Projektaufbau
      • Erste statische Seite mit CSS Einbindung
      • Generieren von Inhalten mit map
      • Markdown
    • ### VIDEO: Package.json (Neu SoSe24) File
      • Was ist npm
      • Pakete für das Projekt laden
      • Inhalte der package.json
    • *** 1_Astro: Erstes Projekt File

      Astro Basisprojekt

      • Entpacken 
      • Das Projekt in Visual Studio Code öffnen. 
      • Terminal öffnen. Prüfen, ob sie sich in dem Verzeichnis befinden in dem package.json enthalten ist. Geben sie dir <Enter> ein. 
      • Geben sie ein: npm i
      • Nun können sie mit npm run dev die Seite starten 
      • Nach dem Bau wird eine IP-Adresse beginnend mit localhost:xxxx angezeigt. Öffnen sie diese im Browser.

      Inhalt: 

      • Tailwind, Daisy UI
      • Statische Seiten
      • Server Side Rendering mit Map-Funktion 
      • Artikel mit Markdown 

      Hinweis für Windows 11 Nutzer

      •Falls sie ihre Skript-Policy auf restricted gesetzt haben, könnte folgender Fehler kommen:
      Error von Win11
      •Geben sie dann in die Powershell folgenden Befehl ein – das gilt so lange das Terminal offen ist:

      Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope Process
      •Sie können auch die Regel dauerhaft setzen: Dies kann zu Sicherheitsproblematiken auf ihrem Rechner führen!

      Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned

    • Vorlesung 3-5: Astro und Server Side Rendering

    • *** 2_Astro_Blog_Markdown_DaisyUI_SSR File

      Dieser Seed basiert nicht mehr wie im SoSe23 auf Astroship. Hier ist eine neue Vorlage enthalten, die auf DaisyUI aufbaut und intuitiver zu verstehen ist. 

      • DaisyUI 
      • SSR Redaktions-/Blogsystem
      • SSR Seiten
      • Navbar, die in Mobile zum Burgermenu wirs (collapse)
    • ### Video: Übersicht über Astro (SoSe24) File
      • Übersicht über Astro
      • Contentdriven
      • Ordnerbasierte Struktur
    • ### Video: Astro, Layouts, Footer, Responsive Navbars (SoSe24) File
      • Nutzung von Layouts
      • Footer
      • Responsive Navbars (die sich zu einem Burgen Menu zusammenfalten bei kleineren Screens)
    • ### Video: Server Side Rendering (SoSe24) File
      • Server Side Rendering am Beispiel der Seite "Person"
      • Die Seiten werden statisch gebaut und sind im Frontend dann nicht mehr änderbar. --> für reinen Content ohne Interaktion sehr gut geeignet.
    • ### Video: Blogübersicht (SoSe24) File
      • Automatische Darstellung der Blogkomponten abhängig vom Datum der Veröffentlichung und publish Flag
    • ### Video: Blogbeiträge aus Markdown rendern (SoSe24) File
      • Markdown Files in Seite einbetten.
      • Dynamische Routen am Beispiel [article].astro
    • ### Video: Theming mit DaisyUI (SoSe24) File
      • Theme in tailwind.config.cjs eintragen
      • Theme in Layout aktivieren
      • Eigene Themes erstellen

    • Vorlesung 6: Daten serverseitig abholen.

      • Download Postman POSTMAN
      • SSR mit Daten von einem Server holen 
      • Diese Daten darstellen. 
      • Beispiel Personen API
  • Collapse Expand

    Astro und Solid

    • Vorlesung: Einführung in Solid

      • Konzept der intelligenten Komponenten.
      • Komponenten isoliert
      • Intelligente Komponenten vs. SSR
      • CSS Integration
      • Buttons, Edits als Function
      Im Git Repo - Branch "Solid"
    • *** CODE: Astro und Solid File
    • ### Video : Was ist das Solid Framework? File
      • Warum Solid?
      • Verbreitung und Konzept
    • ###Video: Solid in Astro integrieren File
      • Solid Integration in Astro
      • Die Komponente in den Browser laden mit client:load
      • Client-Side

    • ### Video: Reagieren auf das Klicken eines Buttons File
      • Reagieren auf Nutzerinteraktionen am Beispiel eines Buttons.
      • Signals: getter und setter

    • ### Video: Input/Edit Field File
      • Text/Nummern Eingabe mit <input ...>
      • Platzhalter
      • Änderung eines Signals durch EIngabe in das Input-Feld mit onInput
    • Vorlesung: Table im Frontend
      • Tabelle im Frontend erzeugen. 
      • Schnelles Filtern

    • Vorlesung: Serverendpoint mit get, Daten in Solid laden

      • Serverendpoints in Astro
      • Ersten get-Endpoint erzeugen und mit Postman testen.
      • createRessouce in SolidJS und Laden von Daten vom Server
    • ### Video: Checkbox und initiale Werte File
      • Checkboxen
      • Signale initial setzen, um einen definierten Zustand beim Rendern zu erhalten. Zum Beispiel soll eine Checkbox beim Öffnen gesetzt oder nicht gesetzt sein oder ein initialer Text in einem Input-Feld gesetzt werden.

    • Wissensfragen zu Solid

      • Was ist ein Signal?
      • Was macht createSignal?
      • Was macht createRessource und was ist der Unterschied zu createSignal?
      • Was macht die Fetch-Funktion?
      • Was bedeutet onInput bei <input />
      • Was macht onClick?
      • Wie wird eine Funktion aufgerufen, wenn auf einen Button geklickt wird. 
      • Was ist CRUD? Was ist REST?
      • Welche Schritte hat ein Zyklus zum Daten holen und anzeigen?
  • Collapse Expand

    Git Workshop

    • Um Software effizient entwickeln zu können, helfen Werkzeuge wie Quellcodeverwaltung, Container und die Definition und Anwendung von Rollen in der Entwicklung. Auf die Rollen in den Teams wird im Fach "Softskills und agile Methoden" eingegangen. 

      In diesem Abschnitt werden wichtige Werkzeuge zur Quellcodeverwaltung dargestellt, die in Web 2 genutzt werden können.

    • Quellcode-Verwaltung

      • Nutzen und Einführung von Git
      • Beispiel Github: Checkin, Checkout, Branching, Merge
      • Übung mit Markdown Datei
    • Skript: Git und SW-Engineering File
  • Collapse Expand

    REST / CRUD mit Astro

  • Collapse Expand

    Authentifizierung, Login

  • Collapse Expand

    Layout und CSS mit Tailwind

  • Collapse Expand

    Solid als SPA