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

Präsentation zum Thema: "WILLKOMMEN ZUM SOMMERKURS Kursthema: Frontend-Entwicklung für Webapplikationen M.Sc. Anna Prenzel, Sebastian Otto."—  Präsentation transkript:

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

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

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

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

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

6 Begriffe Anfrage: http://www.hszg.de/studium.html 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 www.hszg.de

7 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

8 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

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

10 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

11 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

12 Spezielle Nutzeranforderungen http://www.customfitonline.com/news/2012/9/18/responsive-vs-unique-mobile-websites/ Unabhängigkeit vom Gerät

13 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

14 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: www.webapp-frontend.de www.webapp-frontend.de Dort finden Sie immer aktuelle Infos rund um den Sommerkurs!