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

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

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

2 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

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

4 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

5 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

6 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

7 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

8 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

9 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

10 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

11 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

12 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

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

14 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

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