Web uebungen

Im folgenden finden sich Übungen für das Thema Web. Weiters soll direkt ein Überblick über die Themen erfolgen.

Überblick

Ein grundlegendes Verständnis folgender Begriffe soll erlangt werden. Diese sind nicht chronologisch geordnet.

Tip:
* Für weitere Informationen bzgl. Webtechnologien: Webtechnologien
* Für weitere Informationen bzgl. Webservices und Client- Serverkonzepte: Webservices und Client Server Konzepte

• HTTP (Transportprotokoll)
• JSON (Datenübertragungsformat)
• Client- Serverarchitektur und Webservice
• HTML
  • Elemente verstehen und optimalerweise auch erstellen (html, head, body, img, table, div, a, p, h[1-5], br, form, input (text, textarea, button, checkbox),...)
  • Die wichtigsten Attribute für oben genannte Elemente
• CSS
  • Erstellen von eigenen Klassen
  • Styling für HTML Elemente erstellen
  • CSS Selektoren erstellen
  • Inline CSS in HTML
  • CSS im HTML Head
  • CSS in eigener Datei (import in HTML)
  • Styling der wichtigsten Attribute (margin, padding, display, flexbox)
• Javascript
  • Eigene Methoden schreiben und aufrufen
  • Eventlistener erstellen (onClick,...)
  • Javascript im HTML Head
  • Javascript in eigener Datei (import in HTML)
  • HTML Elemente mittels Javascript erstellen/ändern und löschen
  • HTTP Requests mittels fetch erstellen und verarbeiten (Anbindung eines Webservices)

Übungen

Zum Bearbeiten der Übungen wird der Opensource Editor Visual Studio Code[1] empfohlen.

Für die Übungen wurde im Repository der Ordner web/[Teilnehmername] eingerichtet. Bitte verwende diesen Ordner für die Übungen.

Aufgabe: Eigene Webseite

Im folgenden soll eine Webseite mit mehreren Seiten erstellt werden.

• Die Navigation erfolgt mittels Links die die andere Seite aufrufen.

• Weiters soll ein Navigationsmenü erstellt werden, dass die Navigation in jeder Seite ermöglicht.

• Das Styling soll in einer oder mehrere eigener CSS Dateien erfolgen.

• Folgende Seiten sollen erstellt werden
  • Startseite
    • Willkommensnachricht
  • Über mich
    • Ein beispiel Profilfoto einbinden
    • Hobbies
    • Aufzählung von Lieblingsspeisen
    • Tabelle für Sprachen: English - Gut; Deutsch - Muttersprache
  • Was habe Ich bisher gelernt
    • Linkzusammenfassung von den verwendeten Tools (Intellij, Java, Mysql, Github)
    • Für 1-2 Tools ein Video auf Youtube suchen und das Video einbetten
    • Link zum eigenen GitHub-Account einbinden (mit GitHub Icon daneben)
  • Impressum
    • Standardimpressum oder Dummytext

Aufgabe: Single Page Application

Es soll eine Webseite erstellt werden in der Chuck Norris Witze gesucht und gespeichert werden können. Hierfür gibt es eine API[2].

• Zufälligen Witz anzeigen
• Witze nach Text suchen
• Gefundene Witze speichern
• Gespeicherte Witze löschen
• Witze sollen im Localstorage des Browsers gespeichert werden