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

Kursablauf bis 6. März: Montag bis Freitag 9 – 11 und 12:30 – 14:30 Uhr dazu kommt Zeit für Selbststudium danach: vorlesungsbegleitend bis September

Kursablauf Bedingungen für erfolgreiche Teilnahmebescheinigung: Teilnahme an 2/3 der offiziell betreuten Kurstage Abnahme der Komplexaufgaben durch einen Kursbetreuer

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

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

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

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

Kursziel - Webentwicklung Webseite: nur Darstellung von Inhalt im Browser des Clients Webapplikation: Funktionalität der Webseite erfordert starke Interaktion mit dem Server z.B. serverseitige Berechnungen, Datenbankabfragen Client und Server bilden gemeinsam die Webapplikation (Frontend + Backend) Client  FrontendServer  Backend

Kursziel - Webentwicklung 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

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

Nutzeranforderungen Unabhängigkeit vom Gerät

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 Brückenkurs!