Web-Programmierung (WPR) TFH-Berlin Sommer Semester 2008 Manfred Gruner mailto:wpr@gruner.org
Web-Programmierung (WPR) Literatur: Web-Technologien (Heiko Wöhr) Konzepte Programmiermodelle - Architekturen ISBN 3-89864-247-X dpunkt.verlag
1. Einführung 3
1. Einführung Wie würden Sie das Internet beschreiben? Welche Schlagworte fallen Ihnen beim Begriff Internet ein? 4
1. Einführung Kommunikationsinfrastruktur Client Internet Server 5
2. Protokolle - Dienste Kommunikation aller Dienste über TCP/IP Protokoll Familie Client App. Spec Prot. TCP IP Server App. Spec Prot. TCP IP Physical Layer Ethernet Header IP Header TCP Header Appl. Header Appl. Daten 6
2. Protokolle - Dienste Http-Service zur Verfügung stellen von Dokumenten FTP-Service Ermöglicht File up-/download Email-Service Ermöglicht empfangen und senden von EMails 7
2. Protokolle - Dienste HyperText Transfer Protocol 8
2. Protokolle Dienste / http Austausch von Dokumenten unterschiedlicher Formate Art des Dokuments wird im http-header mitgeliefert MIME-Type spezifiziert Dokument-Typ alt: Multipurpose Internet Mail Extension Neu: Multimedia Internet Message Extension 2 Bestandteile Hauttyp / Untertyp z.b. text/plain, text/html application/pdf,... 9
3. Das angewandte Web 3.1 Anwendungsumgebungen 3.2 Anwendungskonzepte 10
3.1 Anwendungsumgebungen Kunde Unternehmen Lieferant Interessent Internet Intranet Extranet Partner Kunde Lieferant 11
3.2 Anwendungskonzepte Web Publishing (Publizieren von Informationen in einem einheitlichen Format) Web Integration Gewinnung von Informationen aus heterogenen Quellen GroupWeb (Groupware) Kommunikation, Kollaboration, Koordination E-Business z.b.: Beschaffung, Absatz, Service Abwicklung von Geschäftsprozessen in Elektronischer Form (E-Commerce = nur Vertriebsprozeß) 12
4. Client-Technologien HTML HTML-Dokumente Resourcenaddressierung HTML-Syntax XML Markup Sprachen XML-Dokument 13
4.1 HTML HTML = Hyper Text Markup Language Auszeichnung des Textes durch spezielle strukturelle Elemente (Tags) HTML-Dokumente = Container für Komponenten HTML Dokument stellt nur einen Layout- Rahmen dar. 14
4.1 HTML Logo Werbebanner Logo HTML-Dokument Werbebanner Videosequenz Videosequenz 15
4.1 HTML Ansatz: Beschreibung verteilter Dokumente Definition in SGML Standard Generalized Markup Language plattformneutrale Dokumente Wichtigste Element: Hypertext-Link W3C (www.w3c.org) Standardisierung 16
4.1 HTML Inhaltsmodell HTML definiert welches Element, welche anderen Elemente enthalten kann und in welcher Reihenfolge (siehe Aufbau HTML-Seite) 17
4. 1.0 Resourceaddressierung Addressierung erfolgt über URL Universal Resource Locator protokoll://host[:port]/pfad/resource[#selection?parameter] z.b.: http://www.tfh-berlin.de/vrp Protokolle: file, ftp, news, telnet,... 18
4.1.0 Resourceaddressierung (2) Vollqualifizierte, absolute und relative URLs http://www.tfh-berlin.de/vrp /vrp/wbr-109.html../image/test.jpg 19
4.1.1 HTML-Syntax (1) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>web-programmierung Beipiel 1</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> </head> <body> <p>ein Absatz <img src="./img/logo.jpg" width="200" height="125"> <h3>überschrift 3</h3> <p>noch ein Absatz <p>praxisorientierte Details zu HTML können bei <a href="http://www.teamonw.de/selfhtml/">selfhtml</a> nachgelesen werden. </body> </html> 20
4.3 HTML-Syntax (2) HTML Tags Block-Elemente Überschriften (h1,h2,h3 Listen (ol,ul) Tabellen (table) Absätze (p) Zeichen-Elemente (formatiert Text) Bold (b) Italic (i) 21
Tabellen 4.1.1 HTML-Syntax (3) <table border="1"> <tr> <th>titel Spalte 1</th> <th>titel Spalte 2</th> </tr> <tr> <td>3</td> <td>4</td> </tr> <tr> <td>5</td> <td>6</td> </tr> </table> Alle Tags, die auch im Body zugelassen sind, sind auch in td- Elementen zulässig 22
4.1.1 HTML-Syntax (4) Frameset / Frames = gleichzeitiges darstellen von mehreren HTML-DOkumenten <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/tr/html4/frameset.dtd"> <html> <head> <title>frameset mit Sitemap</title> </head> <frameset cols="250,*"> <frame src="verweise.htm" name="navigation"> <frame src="startseite.htm" name="daten"> <noframes> <body> <p><a href="verweise.htm">navigation</a> <a href="startseite.htm">daten</a></p> </body> </noframes> </frameset> </html> 23
4.1.1 HTML-Syntax (5) Formulare = Dateneingabe vom Benutzer <form action="input_text.htm"> <p>vorname:<br> <input name="username" type="text" size="30"> </p> <p>zuname:<br> <input name="password" type="password" size= 30 > </p> <p>zuname:<br> <input name="zuname" type="submit" value= anmelden > </p> </form> 24
4.1.1 HTML-Syntax (6) Eingabefelder Einzeilige Eingabefelder (text) Mehrzeilige Eingabefelder (textarea) Passwort-Felder (password) Submit- und Reset-Button (submit,reset) Checkboxen (checkbox) Radiobuttons (radio) 25
4.2 XML XML extensible Markup Language Universelles Format für strukturierte Dokumente und Daten Anwendungsszenarien Konfigurationsdateien Austauschformat zwischen WebClient u. Server 26
4.2 XML Vorteile von XML Plattformneutral Trennung von Inhalt und Präsentation Repräsentation beliebig komplexer strukturierter Daten Anreicherung von Nutzdaten um Metainformationen Verbesserung der Qualität von Dokumentenund Datenverarbeitungsprozessen (DTD,..) Verfügbarkeit standardisierter Tools 27
4.2 XML XML-Co-Standards XSL extensible Stylesheet Language (Formatieurng und Layout) XSLT XSL Transformation XPath XML Path Language (Zugriff auf Dokumentenknoten) XML-Schema Dokumententypen-Definition 28
4.2.1 Markup-Sprachen Markup = Auszeichnung von Text Wesentlichen Vorteile Grundsätzliche plattformneutral Lesbar durch Mensch u. Computer Veränderbar durch variable Länge Formatierendes Markup z.b. HTML Generisches Markup beschreibt Semantik des ausgez. Textes 29
4.2.1 Markup-Sprachen Erweiterbares Markup HTML = fester Umfang von Tags XML = erweiterbar SGML XML HTML XHTML XSLT 30