Abschnittsübersicht

  • Webentwicklung 2

    Alles einklappen Alles aufklappen

    • Logo Webentwicklung 2

    • Abnahmen 14.02.2025

      09:00 Fanwear https://bbb.rwu.de/b/tho-vq0-hpm-trb
      09:20 Hoki-App https://bbb.rwu.de/b/tho-cx3-wby-wsa

    • 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
      3. Javascript Wiederholung
      4. Javascript mit Objekten
      5. Javascript Arrays 
      6. Javascript neuere Sprachfeatures
      7. Astro Intro/ HTML / CSS
      8. Astro Layouts mit Parametern
      9. Static Sites mit Astro (schnell laden, fester Content)
      10. CSS mit DaisyUI - Boxes, Tables, Grids
      11. CSS Tricks für spezielles Styling
      12. SSR - Server Side Rendering - Grundprinzip Seiten auf dem Server bauen
      13. SSR - Dynamisch erzeugte Seite am Beispiel Blog.
      14. Islands und SPA - Single Page Applications - Frontend-Framework - Nutzen und Einsatz
      15. SolidJS - UI-Elemente
      16. SolidJS - Signals 
      17. SolidJS - Weitere UI - Elemente
      18. SolidJS - REST / JSON / Postman 
      19. Server-Endpoints 
      20. Datenbank Grundlagen 
      21. Datenbank einrichten 
      22. Datenmodelle 
      23. Server-Endpoints CRUD 
      24. Server-Endpoints CRUD 
      25. Login / Register
      26. Login / Register
      27. SolidJS - CRUD
      28. SolidJS - Die Ausleihe App 
      29. SolidJS - Die Ausleihe App erweitern 

      4 Frage-Workshops in der vorlesungsfreien Zeit. 

  • Abnahme der WebApps

    • Abgabe der WebApps bis spätestens 10.02.2025, 20 Uhr Aufgabe

      BITTE SCHREIBEN SIE MIR EINE MAIL, WENN SIE EINEN ABGABETERMIN WOLLEN mit dem Thema der App. Dann veröffentliche ich am Donnestag nachmittag den Zeitslot. 

      Hochladen der ZIP-Datei im
      Wintersemester 24/25 bis spätestens 13.02.2025, 20 Uhr
      Übergabetermine (15 Min pro App, BBB) am 14.02.2025 ab 9 Uhr.
       
      Vorabinfo 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), sonst bitte alles.
      • Screenshots der einzelnen Views. 
      • Kurzdoku der App (sehr knappe kurze Beschreibung der Hauptfunktion/zweck, Datenmodell und Besonderheiten, Zieldevice (Smartphone, PC, Tablet) sowie Screenshots der App. Keine seitenlange Doku! Maximal 3 Seiten. 
       
      Dateiname - bitte nur so:

      Web2_Vorname_Name_Matrikelnummer_Vorname_Name_Matrikelnummer_TitelDerApp.zip

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

      Bewertung der App: 

      Neue Bewertung ab SoSe2024:

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

      (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.
      • Umsetzung mit Astro/SolidJS
      • Pages in Server Side Technologie.
      • Pages mit Solid Komponenten.
      • 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.
      • Für 1,x: Login und Node Server
      • Im Serversystem sollte REST (und falls notwendig Sockets) umgesetzt werden und die Daten in einer Datenbank gespeichert werden. 
      • SQLite Datenbank mit Server-Endpoints
      • Saubere Architektur und klarer Aufbau (auch auf Variablen und Datenbankbenennungen achten, kein Deutsch/Englisch Mix in den Variablen), bitte für ein Sprache bei der Darstellung (also die Sprache der Webseite, Tabellen etc.) entscheiden.

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

  • Einführung und Technologieüberblick

    • Vorlesung 1: Einführung und Technologieüberblick

      • Vorstellung und Einführung
      • Technologieüberblick - Web 1.0 bis heute
      • Konzepte und Architekturen für Apps, Webapps, Browser und IoT.
      • 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 Datei
      • Anwendung der Webtechnik
      • Digitalisierung
      • Web 1.0 bis heute
      • Serverstrukturen (Monolith, Microservice)
      • SaaS, Serverless Functions, API
      • Gängige Serversysteme
      • NodeJS (Überblick)
      • Native und Webapps
      • Moderne Systeme
      • Zukunftsblick

  • Javascript

  • Astro

    • Skript: Wird jedes Mal erweitert Datei

    • Vorbereitung für Astro

      • BItte installieren Sie die letzte Stable Version von Node - https://nodejs.org/en
      • Setzen Sie die Pfad Variable.
      • Wenn Sie möchten können Sie ab Freitag ein erstes Miniprojekt herunterladen und mal testen.

    • 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) Datei
      • Was ist npm
      • Pakete für das Projekt laden
      • Inhalte der package.json
    • *** 1_Astro Datei
      • Astro Projekt
      • Komponentenbasierter Aufbau
      • map-Funktion zum Aufbau einer Seite

    • Vorlesung 2-5: Astro und Server Side Rendering

    • *** 2_Astro_Blog_Markdown_DaisyUI_SSR Datei

      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) Datei
      • Übersicht über Astro
      • Contentdriven
      • Ordnerbasierte Struktur
    • ### Video: Astro, Layouts, Footer, Responsive Navbars (SoSe24) Datei
      • Nutzung von Layouts
      • Footer
      • Responsive Navbars (die sich zu einem Burgen Menu zusammenfalten bei kleineren Screens)
    • ### Video: Server Side Rendering (SoSe24) Datei
      • 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) Datei
      • Automatische Darstellung der Blogkomponten abhängig vom Datum der Veröffentlichung und publish Flag
    • ### Video: Blogbeiträge aus Markdown rendern (SoSe24) Datei
      • Markdown Files in Seite einbetten.
      • Dynamische Routen am Beispiel [article].astro
    • ### Video: Theming mit DaisyUI (SoSe24) Datei
      • 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

  • 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"
    • ### Video : Was ist das Solid Framework? Datei
      • Warum Solid?
      • Verbreitung und Konzept
    • ###Video: Solid in Astro integrieren Datei
      • Solid Integration in Astro
      • Die Komponente in den Browser laden mit client:load
      • Client-Side

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

    • ### Video: Input/Edit Field Datei
      • 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 Datei
      • 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.
    • *** CODE: Astro und Solid Komponente Datei

  • Server-Endpoints - "Serverless" Functions und Serveranbindung für einfache Cloudservices

  • Erweiterte Funktionalität (Login, etc)

  • Pro-Workshop (Node Server, ORM)