WILLKOMMEN ZUM SOMMERKURS Kursthema: Frontend-Entwicklung für Webapplikationen M.Sc. Anna Prenzel,...
14
WILLKOMMEN ZUM SOMMERKURS Kursthema: Frontend-Entwicklung für Webapplikationen M.Sc. Anna Prenzel, Sebastian Otto
-
Upload
hede-schmidt -
Category
Documents
-
view
212 -
download
0
Transcript of WILLKOMMEN ZUM SOMMERKURS Kursthema: Frontend-Entwicklung für Webapplikationen M.Sc. Anna Prenzel,...
WILLKOMMEN ZUM SOMMERKURSKursthema: 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
HTML5 CSS Javascript
• Sie beherrschen die wesentlichen Technologien zum Erstellen von Webseiten und Webapplikationen
• Sie können Webseiten auf einem Server installieren (deployment)
Begriffe<body> <div id="canvas"> <div id="wrapper"> <div id="header"><a href="http://www.hszg.de/" title="Hochschule Zittau/Görlitz (Startseite)"> <img src="fileadmin/template/HSZG/imgs/gfx/hochschule_zittau_goerlitz_logo.gif" alt="Hochschule Zittau Görlitz Logo" width="266" height="76" /> </a> <a href="http://www.hszg.de/" title="Studieren ohne Grenzen"> <img id="claim"
Links: HTML-Quelltext der Hochschul-WebseiteRechts: 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. www.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
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
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 Frontend Server 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 Frontend Server Backend
Kursziel - Webentwicklung
HTML5 CSS Javascript
• Sie beherrschen die wesentlichen Technologien zum Erstellen von Webseiten und Webapplikationen
• Sie können Webseiten auf einem Server installieren (deployment)
Kursziel - Webentwicklung
HTML5 CSS Javascript
Beschreibung des Inhalts
• Überschriften• Abschnitte• Absätze• Listen• Tabellen• Bilder
Beschreibung des Layouts
• Schriftarten• Farben• Gestaltung der
Seite
InteraktiveWebseiten
• 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
http://www.customfitonline.com/news/2012/9/18/responsive-vs-unique-mobile-websites/
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 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: www.webapp-frontend.deDort finden Sie immer aktuelle Infos rund um den Sommerkurs!
