Rückblick Vorlesung 2 HTTP Client Clientseitige Anwendungen
Web (Site) Engineering (WebSE) Vorlesung 3: Clientseitige Technologien
P. Reiß, B. Schiemann Lehrstuhl für Informatik 8 Universität Erlangen-Nürnberg
08.11.2005
B. Schiemann, P. Reiß
Web (Site) Engineering (WebSE)
Rückblick Vorlesung 2 HTTP Client Clientseitige Anwendungen
Übersicht 1
HTTP Beispiel Browser und Webserver Protokoll
2
Client Definition Browser (Technik, Renderer) Clientseitige Technologien
3
Clientseitige Anwendungen Renderer Medienabspieler spezielle Clients
B. Schiemann, P. Reiß
Web (Site) Engineering (WebSE)
Rückblick Vorlesung 2 HTTP Client Clientseitige Anwendungen
Time to Live vs. Hop Limit
TTL begrenzte ursprünglich die Lebenszeit eines Pakets in Sekunden Verminderung des Werts im Router um 1 Zusätzlich Verminderung um die Zeit, die es sich im Router aufhielt (pro angefangene Sekunde um 1) Realität: Verminderung um 1 −→ Hop Count, analog zu IPV6
B. Schiemann, P. Reiß
Web (Site) Engineering (WebSE)
Rückblick Vorlesung 2 HTTP Client Clientseitige Anwendungen
Beispiel Browser und Webserver Protokoll
Beispielpaket: Client fragt Server GET / HTTP / 1 . 1 Host : d i c t . l e o . org User−Agent : M o z i l l a / 5 . 0 ( X11 ; U ; L i n u x i 6 8 6 ; en−US; r v : 1 . 7 . 1 2 ) Gecko/20050920 F i r e f o x / 1 . 0 . 7 SUSE/ 1 . 0 . 7 − 0 . 1 Accept : t e x t / xml , a p p l i c a t i o n / xml , a p p l i c a t i o n / x h t m l +xml , t e x t / h t m l ; q = 0 . 9 , t e x t / p l a i n ; q = 0 . 8 , image / png , ∗ / ∗ ; q =0.5 Accept−Language : de−de , de ; q = 0 . 8 , en−us ; q = 0 . 5 , en ; q =0.3 Accept−Encoding : gzip , d e f l a t e Accept−Charset : ISO−8859−1, u t f −8;q = 0 . 7 , ∗ ; q =0.7 Keep−A l i v e : 300 Connection : keep−a l i v e B. Schiemann, P. Reiß
Web (Site) Engineering (WebSE)
Rückblick Vorlesung 2 HTTP Client Clientseitige Anwendungen
Beispiel Browser und Webserver Protokoll
Beispielpaket: Server antwortet Client
HTTP / 1 . 0 200 OK\ r \ n Server : PAWS ElB −1.42\ r \ n Content−Type : t e x t / h t m l \ r \ n Date : Mon , 7 Nov 2005 2 1 : 2 7 : 5 4 +0000\ r \ n Content−Length : 31955\ r \ n \ r \n ...dann Content im HTML-Klartext.
B. Schiemann, P. Reiß
Web (Site) Engineering (WebSE)
Rückblick Vorlesung 2 HTTP Client Clientseitige Anwendungen
Beispiel Browser und Webserver Protokoll
HTTP/Version
HTTP/0.9 HTTP/1.0 HTTP/1.0+ HTTP/1.1 [FGM+ 99] ← aktuelle Version HTTP/2.0 aka NG [LG99]
B. Schiemann, P. Reiß
Web (Site) Engineering (WebSE)
Rückblick Vorlesung 2 HTTP Client Clientseitige Anwendungen
Beispiel Browser und Webserver Protokoll
Methoden (Basis, Auswahl) [GT02]
Get (nötig: HTTP/1.1 Server) Head (nötig: HTTP/1.1 Server) Put (WebDAV), Post (Forms) Options WebDAV: Lock, Mkcol, Copy, Move
B. Schiemann, P. Reiß
Web (Site) Engineering (WebSE)
Rückblick Vorlesung 2 HTTP Client Clientseitige Anwendungen
Beispiel Browser und Webserver Protokoll
Statuscodes
400er Client Status (404: not found, 403: forbidden) 100er Protokoll-Status (101: switching protocols) 200er Success Status (200: o.k.) 300er Redirection Status (302: found) 500er Server Error Status (500: internal server error)
B. Schiemann, P. Reiß
Web (Site) Engineering (WebSE)
Rückblick Vorlesung 2 HTTP Client Clientseitige Anwendungen
Definition Browser (Technik, Renderer) Clientseitige Technologien
Definition – historisch
Ein Client ist ein System, das auf einen entfernten Dienst oder Computer via Netzwerk zugreift. Historisch gewachsen, weil Definition aus den Mainframe Zeiten stammt Terminal clients so gebaut wurden Diese heute nur noch im Terminus „Thin“ Client verwendet werden
B. Schiemann, P. Reiß
Web (Site) Engineering (WebSE)
Rückblick Vorlesung 2 HTTP Client Clientseitige Anwendungen
Definition Browser (Technik, Renderer) Clientseitige Technologien
Definition – Web(S)E
Ein Web(S)E Client ist ein Programm, das mittels Socketverbindung per Internet o.ä. Requests an einen Server sendet und die Antworten verarbeitet. Festlegung bzw. Spezialisierung zur historischen Definition: Netzwerk → Internet o.ä. System → Programm Dienst → Serverinteraktion
B. Schiemann, P. Reiß
Web (Site) Engineering (WebSE)
Rückblick Vorlesung 2 HTTP Client Clientseitige Anwendungen
Definition Browser (Technik, Renderer) Clientseitige Technologien
Browser
Ursprünglich: HTML-Renderer Plugins Interpreter für JavaScript Graphisches Interface zu anderen Diensten (z.B. ftp) „Mädchen für alles“ Kalender Newsreader RSS-Reader ...
B. Schiemann, P. Reiß
Web (Site) Engineering (WebSE)
Rückblick Vorlesung 2 HTTP Client Clientseitige Anwendungen
Definition Browser (Technik, Renderer) Clientseitige Technologien
Browser II Funktionale Sicht: 1 Absetzen einer Anfrage des Benutzers URL einlesen Protokoll, Server und Pfad extrahieren IP-Adresse des Servers bestimmen
TCP-Verbindung zum Server öffnen HTTP-Anfrage erstellen und absetzen 2
Warten auf HTTP-Antwort
3
Empfangen der HTTP-Antwort
4
Interpretieren der HTTP-Antwort
B. Schiemann, P. Reiß
Web (Site) Engineering (WebSE)
Rückblick Vorlesung 2 HTTP Client Clientseitige Anwendungen
Definition Browser (Technik, Renderer) Clientseitige Technologien
Interpretieren der HTTP-Antwort
1 2
HTTP- und HTML-Parsing durchführen Ergebnisse des Parsings verarbeiten: Darstellen (Rendering) Speichern (Internes) Programm aufrufen (Externe) Applikation aufrufen
B. Schiemann, P. Reiß
Web (Site) Engineering (WebSE)
Rückblick Vorlesung 2 HTTP Client Clientseitige Anwendungen
Definition Browser (Technik, Renderer) Clientseitige Technologien
Statisches HTML
HTML ist zunächst nur Auszeichnungssprache Übertragener Inhalt wird gerendert Datenaustausch erfordert Benutzereingabe Versand der Daten (HTTP-POST) an Server Verarbeitung und neuerlicher Versand der Daten an Client Neue Darstellung
→ unergonomisch
B. Schiemann, P. Reiß
Web (Site) Engineering (WebSE)
Rückblick Vorlesung 2 HTTP Client Clientseitige Anwendungen
Definition Browser (Technik, Renderer) Clientseitige Technologien
Dynamic HTML (DHTML)
Seiten ändern sich während der Darstellung im Browser Interaktivität (Ergonomie!) Events für Benutzerinteraktion Kombination aus HTML Skriptsprache: meist JavaScript DOM CSS
B. Schiemann, P. Reiß
Web (Site) Engineering (WebSE)
Rückblick Vorlesung 2 HTTP Client Clientseitige Anwendungen
Definition Browser (Technik, Renderer) Clientseitige Technologien
DOM
Das Document Object Model ist laut W3C Plattform- und sprachunabhängig und bietet Dynamischen Zugriff auf und Aktualisierung von Inhalt Struktur Stil
B. Schiemann, P. Reiß
Web (Site) Engineering (WebSE)
Rückblick Vorlesung 2 HTTP Client Clientseitige Anwendungen
Definition Browser (Technik, Renderer) Clientseitige Technologien
DOM II HTML-Dokument < t i t l e > W e l t f i r m a < / t i t l e >< / head> W e l t f i r m a < / h1> < l i >Wir ueber uns< / a> < l i >Unser Produkt < / a> < / ul> Wir a l s W e l t f i r m a . . . < / body> < / html> B. Schiemann, P. Reiß
Web (Site) Engineering (WebSE)
Rückblick Vorlesung 2 HTTP Client Clientseitige Anwendungen
Definition Browser (Technik, Renderer) Clientseitige Technologien
DOM III Dokumentenmodell des Beispiel-Dokuments
B. Schiemann, P. Reiß
Web (Site) Engineering (WebSE)
Rückblick Vorlesung 2 HTTP Client Clientseitige Anwendungen
Definition Browser (Technik, Renderer) Clientseitige Technologien
DOM IV Zugriff auf Elemente < t i t l e >Test < / t i t l e >< / head> Ein Header< / h1> < s c r i p t type= " t e x t / j a v a s c r i p t " > document . getElementById ( ’ header ’ ) . s t y l e . c o l o r = " red " ; < / script> < / body> < / html>
B. Schiemann, P. Reiß
Web (Site) Engineering (WebSE)
Rückblick Vorlesung 2 HTTP Client Clientseitige Anwendungen
Definition Browser (Technik, Renderer) Clientseitige Technologien
Cascading Style Sheets (CSS)
„Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents.“ Externes Stylesheet Internes Stylesheet in HTML-Datei ... Als Arttibut in HTML-Tags ...
B. Schiemann, P. Reiß
Web (Site) Engineering (WebSE)
Rückblick Vorlesung 2 HTTP Client Clientseitige Anwendungen
Definition Browser (Technik, Renderer) Clientseitige Technologien
Cascading Style Sheets II
Trennung von Inhalt und Layout Formatierung entsprechender Vorgaben Farbe Größe Rahmen ...
Vererbung
B. Schiemann, P. Reiß
Web (Site) Engineering (WebSE)
Rückblick Vorlesung 2 HTTP Client Clientseitige Anwendungen
Definition Browser (Technik, Renderer) Clientseitige Technologien
JavaScript
JScript, ECMAScript Interpretierte Sprache Nicht streng typisiert: Numerische Variablen Zeichenketten
Vordefinierte Objekte mit Eigenschaften, z.B. DOCUMENT OBJECT
Eigenschaften: URL, bgColor, . . . Methoden: captureEvents(), close(), . . . Unterobjekte
B. Schiemann, P. Reiß
Web (Site) Engineering (WebSE)
Rückblick Vorlesung 2 HTTP Client Clientseitige Anwendungen
Definition Browser (Technik, Renderer) Clientseitige Technologien
JavaScript II
f u n c t i o n p l a y E x t ( playerType , u r l ) { i f ( playerType == " r e a l " ) { l o c a t i o n . h r e f = " h t t p : / / . . . / n−j o y . rm " ; } e l s e i f ( playerType == "ms" ) { l o c a t i o n . h r e f = " h t t p : / / . . . r e d i r e c t . l s c ?c= l i v e & media=ms&stream=ndr / l i v e / n−j o y .wma" ; } }
B. Schiemann, P. Reiß
Web (Site) Engineering (WebSE)
Rückblick Vorlesung 2 HTTP Client Clientseitige Anwendungen
Definition Browser (Technik, Renderer) Clientseitige Technologien
VBScript I
dim days ( 7 ) dim iNow days ( 1 ) = " Sunday " iNow = Now ( ) Sub cmdSubmit_OnClick I f ( Len ( document . frmExample5a . t x t A g e . v a l u e ) = 0 ) T MsgBox " H e l l o ! " E x i t Sub End I f I f iNow < 12 then document . w r i t e " Good Morning . < /FONT> " ... Gebrauch : < f o n t color = " navy " >Now ( ) < / f o n t > B. Schiemann, P. Reiß
Web (Site) Engineering (WebSE)
Rückblick Vorlesung 2 HTTP Client Clientseitige Anwendungen
Definition Browser (Technik, Renderer) Clientseitige Technologien
VBScript II
B. Schiemann, P. Reiß
Web (Site) Engineering (WebSE)
Rückblick Vorlesung 2 HTTP Client Clientseitige Anwendungen
Definition Browser (Technik, Renderer) Clientseitige Technologien
AJAX
Asynchronous Javascript and XML sukzessives Nachladen/Neuladen von Teilen der HTML-Seite DHTML + zusätzliche Verarbeitung auf Server XMLHttpRequest Kombination vorhandener Techniken
B. Schiemann, P. Reiß
Web (Site) Engineering (WebSE)
Rückblick Vorlesung 2 HTTP Client Clientseitige Anwendungen
Definition Browser (Technik, Renderer) Clientseitige Technologien
AJAX – Vor- und Nachteile
Vorteile Keine redundante Übertragung Kein Plugin nötig
Nachteile Funktion des Back- bzw. Forward-Buttons? Auf welchen Stand verweist eine Bookmark?
B. Schiemann, P. Reiß
Web (Site) Engineering (WebSE)
Rückblick Vorlesung 2 HTTP Client Clientseitige Anwendungen
Definition Browser (Technik, Renderer) Clientseitige Technologien
Java-Applets
„Java is a simple, object-oriented, distributed, robust, multithreaded, portable, platform-independent, secure programming environment.“ (Sun Microsystems) Java am Client: Applet Server: Servlet
B. Schiemann, P. Reiß
Web (Site) Engineering (WebSE)
Rückblick Vorlesung 2 HTTP Client Clientseitige Anwendungen
Definition Browser (Technik, Renderer) Clientseitige Technologien
Java-Applets II
Übersetzung des Quellcodes in Bytecode −→ Java Class File Laden und ausführen der Class Files auf dem Client Ableitung aller Applets von Klasse Applet Einbettung in HTML-Container: < / APPLET>
B. Schiemann, P. Reiß
Web (Site) Engineering (WebSE)
Rückblick Vorlesung 2 HTTP Client Clientseitige Anwendungen
Definition Browser (Technik, Renderer) Clientseitige Technologien
Java-Applets III
Aufruf vordefinierter Methoden durch Browser: init() destroy() start() stop() ...
Dynamisches Nachladen von Klassen zur Laufzeit
B. Schiemann, P. Reiß
Web (Site) Engineering (WebSE)
Rückblick Vorlesung 2 HTTP Client Clientseitige Anwendungen
Definition Browser (Technik, Renderer) Clientseitige Technologien
Java-Applets IV
Java-Sandbox: Kein Zugriff auf lokale Dateisysteme Keine Netzwerkverbindungen (Ausnahme: origin host) Zugriff auf Systemfunktionen eingeschränkt: Runtime.exec() System.exit()
Zugriff auf Systemeigenschaften eingeschränkt
B. Schiemann, P. Reiß
Web (Site) Engineering (WebSE)
Rückblick Vorlesung 2 HTTP Client Clientseitige Anwendungen
Definition Browser (Technik, Renderer) Clientseitige Technologien
Macromedia Flash Nicht nur ein Medienabspieler oder Renderer Interpreter als Browserplugin i m p o r t f l a s h . geom . ColorTransform ; v a r oCor : ColorTransform = new ColorTransform ( ) ; f u n c t i o n muCor ( a l v o : MovieClip , hex : Number ) : Void { v a r oTrans : Transform = new Transform ( a l v o ) ; v a r oTween : Tween = new Tween ( alvo , [ oCor . r e d O f f s e t , oCor . g r e e n O f f s e t , oCor . b l u e O f f s e t ] , [ rgb . vermelho , rgb . verde , rgb . a z u l ] , 1 0 0 0 ) ; } B. Schiemann, P. Reiß
Web (Site) Engineering (WebSE)
Rückblick Vorlesung 2 HTTP Client Clientseitige Anwendungen
Renderer Medienabspieler spezielle Clients
Renderer - Zusammenfassung
HTML Renderer CSS Renderer (Übernahme von Befehlen) FTP Renderer XML Darstellung ...
B. Schiemann, P. Reiß
Web (Site) Engineering (WebSE)
Rückblick Vorlesung 2 HTTP Client Clientseitige Anwendungen
Renderer Medienabspieler spezielle Clients
Kaffeine
Medienabspieler für KDE xine basiert (Rendering) unterstützt mms:// und rstp:// auch im Browser lauffähig http:// genutzt um .rm oder .lsc dateien zu übertragen, um Streams zu „vermitteln“
B. Schiemann, P. Reiß
Web (Site) Engineering (WebSE)
Rückblick Vorlesung 2 HTTP Client Clientseitige Anwendungen
Renderer Medienabspieler spezielle Clients
spezielle Clientseitige Anwendungen
eigener Befehlssatz meistens Socket Verbindungen (↔ z.B. HTTP) Trojaner, Backdoors, . . . properitäre Clientsoftware (z.B. Tobit Client) Anregung: XSLT-Processor basierter Client/Browser Plugin für Druckaufbereitung. (Filterung/ XSL-FO)
B. Schiemann, P. Reiß
Web (Site) Engineering (WebSE)
Rückblick Vorlesung 2 HTTP Client Clientseitige Anwendungen
Renderer Medienabspieler spezielle Clients
Zusammenfassung 1
HTTP Beispiel Browser und Webserver Protokoll
2
Client Definition Browser (Technik, Renderer) Clientseitige Technologien
3
Clientseitige Anwendungen Renderer Medienabspieler spezielle Clients
B. Schiemann, P. Reiß
Web (Site) Engineering (WebSE)
Rückblick Vorlesung 2 HTTP Client Clientseitige Anwendungen
Renderer Medienabspieler spezielle Clients
Vielen Dank
Für Ihre Aufmerksamkeit! Fragen?
B. Schiemann, P. Reiß
Web (Site) Engineering (WebSE)
Rückblick Vorlesung 2 HTTP Client Clientseitige Anwendungen
Renderer Medienabspieler spezielle Clients
R. Fielding, J. Gettys, J. Mogul, H. Frystyk, L. Masinter, P. Leach, and T. Berners-Lee. Hypertext Transfer Protocol – HTTP/1.1, 1999. David Gourley and Brian Totty. HTTP - The Definitive Guide. O’Reilly, Sebastopol, USA, 2002. Yves Lafon and Jim Gettys. Final HTTP-NG Activity Statement, 1999.
B. Schiemann, P. Reiß
Web (Site) Engineering (WebSE)
