WILLKOMMEN ZUM SOMMERKURS Kursthema: Frontend-Entwicklung für Webapplikationen M.Sc. Anna Prenzel, Sebastian Otto

Kursablauf bis 29. September: täglich 9 – 11 und 12:30 – 14:30 Uhr, zusätzliche Übungszeit: täglich 14:30 – 15:30

Kursziel - Webentwicklung HTML5CSSJavascript Sie beherrschen die wesentlichen Technologien zum Erstellen von Webseiten und Webapplikationen Sie können Webseiten auf einem Server installieren (deployment)

Begriffe <img id="claim" gs/gfx/hochschule_zittau_goerlitz _logo.gifhttp:// Links: HTML-Quelltext der Hochschul- Webseite Rechts: Der Quelltext wird vom Browser übersetzt Browser: z.B. Firefox, Internet Explorer, Chrome

Begriffe Ein Webserver speichert Webseiten als Dateien ab (z.B. als HTML-Dateien) Ein Webserver hat einen Namen, wie z.B. Ein Webclient kann über diesen Namen bestimmte HTML-Dateien anfordern, z.B. so: Der Server sendet dem Client die gewünschten HTML-Dateien Der Browser des Clients stellt die Dateien als Webseite dar

Begriffe Anfrage: Sucht Datei studium.html Browser übersetzt HTML-Code und stellt Webseite dar Sendet Datei studium.html zurück zum Client Client Server mit Name z.B. Ihr Laptop

Begriffe Webseite: statisch, nur Darstellung von Inhalt im Browser des Clients Webapplikation: „dynamische Webseite“, die mit dem Server interagiert z.B. Daten zum Server schicken, Daten vom Server abfragen Client und Server bilden gemeinsam die Webapplikation (Frontend + Backend) Client  FrontendServer  Backend

Begriffe Webapplikation Beispiel Online-Shop: während der Nutzer mit der Seite interagiert, müssen immer wieder neue Produkte vom Server nachgeladen werden Client  FrontendServer  Backend

Kursziel - Webentwicklung HTML5CSSJavascript Sie beherrschen die wesentlichen Technologien zum Erstellen von Webseiten und Webapplikationen Sie können Webseiten auf einem Server installieren (deployment)

Kursziel - Webentwicklung HTML5CSSJavascript Beschreibung des Inhalts Überschriften Abschnitte Absätze Listen Tabellen Bilder Beschreibung des Layouts Schriftarten Farben Gestaltung der Seite Interaktive Webseiten Reaktion auf Nutzereingaben Speichern von Daten auf dem Server Abfragen von Daten auf dem Server

Spezielle Nutzeranforderungen Unabhängigkeit vom Browser Webseite muss mit (allen) Browsern getestet werden Unabhängigkeit vom Gerät Webseite muss sich automatisch an verschiedene Bildschirmgrößen anpassen Barrierefreiheit Berücksichtigung von Sehbehinderungen wie z.B. Farbenblindheit

Spezielle Nutzeranforderungen Unabhängigkeit vom Gerät

Spezielle Entwickleranforderungen Trennung von Inhalt und Design Inhalt: HTML Design: CSS Wartbarkeit und Erweiterbarkeit einfach neue Inhalte ergänzen einfach das Design anpassen Beispiel: CSS Zen GartenCSS Zen Garten

Weiteres Vorgehen Wir lernen die Sprache HTML kennen Schritt 1: Sie betrachten Ihre HTML-Dateien im eigenen Browser Schritt 2: Upload Ihrer HTML-Dateien auf den Übungsserver Adresse des Übungsservers: Dort finden Sie immer aktuelle Infos rund um den Sommerkurs!