Programmierung am Client
Werbung
Clientseitige Technologien Web Site Engineering, Vorlesung Nr. 2 Überblick • • • • • Allgemeine Funktionsweise Programmierung am Client Existierende Clients Konformität zu Standards Konfiguration und Anwendungen © Martin Klarner, Informatik 8 VORL 2/Folie 2 Client: Funktionale Sicht 1. Absetzen einer Anfrage des Benutzers – URL einlesen • • – – Server- und Dateinamen extrahieren IP-Adresse des Servers bestimmen TCP-Verbindung zum Server aufbauen HTTP-Anfrage erstellen und schicken 2. Warten auf HTTP-Antwort des Servers 3. Empfangen der HTTP-Antwort des Servers © Martin Klarner, Informatik 8 VORL 2/Folie 3 Client: Funktionale Sicht (2) 4. Interpretieren der HTTP-Antwort 1. HTTP- und HTML-Parsing durchführen 2. Ergebnisse des Parsings verarbeiten • • • • Darstellen (Rendering/Browsing) Speichern (Internes) Programm/Skript ausführen (Externe) Applikation ausführen © Martin Klarner, Informatik 8 VORL 2/Folie 4 Client-Typologie • Browser sind spezielle Web-Clients! • Browsergenerationen [cf. Klassifikations-VORL] – 1. Generation: Linear, plain HTML, inlined images – 2. Generation: Hierarchisch, Frames – 3. Generation: Web-basierte Applikationen – 4. Generation: Wo stehen wir heute? – ... [NB: NS 7.0, MSIE 6.0 sind die aktuellen Versionen!] © Martin Klarner, Informatik 8 VORL 2/Folie 5 Überblick • • • • • Allgemeine Funktionsweise Programmierung am Client Existierende Clients Konformität zu Standards Konfiguration und Anwendungen © Martin Klarner, Informatik 8 VORL 2/Folie 6 Integrierte Dienste • Idee: Integrierte Arbeitsumgebung • HTTP – HTML: Struktur vs. Layout, oder nur Container? – CSS – Neuerdings XML, XSL(T) • Grafisches Interface zu älteren Diensten – FTP, Archie – WAIS/Gopher • Chat: IRC • Suchmaschine (Google wird Standard!) © Martin Klarner, Informatik 8 VORL 2/Folie 7 Integrierte Dienste (2) • „Helpers“ – Plug-ins: Browser-spezifisch, voll integriert – Externe Viewer: Browser-unabhängig, nicht integriert – ActiveX-Controls: Sicherheitsproblematik • Mail – Senden: SMTP – Empfangen: POP, IMAP – Dezidierte Web-Clients • News – NNTP – Dezidierte Web-Clients © Martin Klarner, Informatik 8 VORL 2/Folie 8 Integrierte Dienste (3) • Scripting: JavaScript, VBScript ⇒ ECMAScript • Java Virtual Machine – – – – Applets vs. Applications Sicherheit: „Sandbox“ Geschwindigkeit: JIT-Compiler Modularisierung, Wiederverwendung: JavaBeans • DHTML: Integration und client-seitige Modifikation • Verteilte Programmierung – RMI: Java´s RPC – CORBA: Stub (Client) und Skeleton (Server) – DCOM: ActiveX-Erweiterung analog CORBA © Martin Klarner, Informatik 8 VORL 2/Folie 9 ActiveX © Martin Klarner, Informatik 8 VORL 2/Folie 10 DHTML Beispiel: Standard-HTML-Dokument <HTML> <HEAD><TITLE>Weltfirma</TITLE></HEAD> <BODY BGCOLOR=”WHITE”> <H1 ALIGN=”CENTER”>Weltfirma</H1> <HR> <P ID=”paral”>Dies ist ein Textabsatz</P> <UL> <LI><A HREF=“about.htm“>Wir über uns</A> <LI><A HREF=“products.htm“>Produkte</A> </UL> </BODY> </HTML> © Martin Klarner, Informatik 8 VORL 2/Folie 11 DHTML (2) Dokumentenmodell dieses Beispiel-Dokuments HTM L H EAD BO D Y bgcolor="white" TITLE H1 align="center" W eltfirm a W eltfirm a HR UL P Dies ist ein Textabschnitt. LI LI A href="about.htm " A href="products.htm " W ir über uns Produkte © Martin Klarner, Informatik 8 VORL 2/Folie 12 DHTML (3) Funktionsweise des Scripting innerhalb des Dokuments: Zugriff auf die Elemente … • … direkt durch Script-Code <A HREF=“products.htm” onMouseover=“this.style.color=red” onMouseout=“this.style.color=blue”>Products Section</A> • • oder … durch Referenz über Namen und Aufzählungen para1.style.color=green Events wie onclick oder onMouseover zur Bindung von Script-Code an Benutzer-Aktionen © Martin Klarner, Informatik 8 VORL 2/Folie 13 JavaScript: Allgemeines • • • • Interpretierte Sprache in verschiedenen Versionen (1.0, 1.1, 1.2) Objektbasiert Speicherung direkt in HTML-Datei oder in separater Datei Benutzung in … – <script>-Elementen oder – direkt in HTML-Tags; Bsp.: <input type=button value=“6 hoch 2" onClick="Quadrat(6)"> • • • Unterschiedliche Interpretation von Objekteigenschaften in Internet Explorer und Netscape Basis: ECMA-262-Standard Sicherheitslücken (z.B. cross side scripting mit 1-Pixel-Fenster) © Martin Klarner, Informatik 8 VORL 2/Folie 14 JavaScript: Sprachelemente • Keine strenge Typisierung (Unterscheidung: Numerische Variablen, Zeichenketten) • Funktionen, Operatoren, Kontrollstrukturen • Event-Handler • Vordefinierte Objekte mit Eigenschaften, Methoden und Unterobjekten; Beispiel: document object – – – – Inhalt eines Browser-Fensters Eigenschaften: URL, bgColor, ... Methoden: captureEvents(), close() Unterobjekte: images, links, forms, ... © Martin Klarner, Informatik 8 VORL 2/Folie 15 JavaScript: Verwendung • Adaption – Dynamische Generierung von Inhalt – Steuerung • Dynamisierung der Seite – Benutzung von events am Client – „Progrämmchen“ • Informationsaustausch zwischen – Frames – Client und Server © Martin Klarner, Informatik 8 VORL 2/Folie 16 JavaScript: Anwendungsbeispiele • „Nette Kleinigkeiten“ – Zähler – Informationen zur Umgebung – Zeitprotokollierung • Demo-Anwendungen wie Spiele oder Taschenrechner • Aktionen – – – – Öffnen neuer Fenster Kopplung von Frames Veränderung von Objekten Validierung von Formeingaben © Martin Klarner, Informatik 8 VORL 2/Folie 17 Javascript: Debugging • Problem – Keine Programmierumgebung ⇒ fehlende Debugging-Möglichkeiten • Keine Breakpoints • Kein Herausschreiben von Variablenwerten – Browser-Absturz • Fehlertypen – Load time errors (Bsp: Syntaxfehler) – Runtime errors (Bsp: nicht deklarierte Variablen) – Logic errors © Martin Klarner, Informatik 8 VORL 2/Folie 18 Javascript: Debugging (2) Mögliche Lösungen • Watchpoints mit alertbox • Testen einzelner Codezeilen im Browser Bsp.: javascript:alert("this is a test") • Errichten einer Testumgebung mit Formularen • Bau eines Object Inspectors • ... (siehe z.B.: http://www.javaworld.com/javaworld/jw-07-1996/jw-07-javascript_p.html ) © Martin Klarner, Informatik 8 VORL 2/Folie 19 Java: Eigenschaften „Java is a simple, object-oriented, distributed, robust, multithreaded, portable, platformindependent, secure programming environment.“ (Sun Microsystems) • Java am – Client (applet) – Server (servlet) © Martin Klarner, Informatik 8 VORL 2/Folie 20 Java am Client • Java Applets • Übersetzung des Java-Quellcodes in Byte-Code ⇒ Java Class Files • Client – Laden der Java Class Files – Ausgeführt z.B. in Java Virtual Machine (JVM) • JVMs für viele Betriebssysteme oder Browser • Ableitung aller Applets von der Klasse applet © Martin Klarner, Informatik 8 VORL 2/Folie 21 Java: Verwendung • Einbettung der Class-Files in HTML-Container; Bsp.: <APPLET CODE=„abc.class“ Width= …> <PARAM NAME="endImage" VALUE=10> … </APPLET> • Aufruf vordefinierter Methoden durch den Browser Bsp.: init(), destroy(), start(), stop(), paint() • Dynamisches Nachladen von Klassen zur Laufzeit © Martin Klarner, Informatik 8 VORL 2/Folie 22 Java Sandbox • Kein Zugriff auf lokale Dateisysteme • Keine Netzwerkverbindungen (Ausnahme: Origin Host) • Bedingter Zugriff auf Systemfunktionen (z.B. Verbot von System.exit(), Runtime.exec()) • Bedingter Zugriff auf Systemeigenschaften • Neues Konzept: Signiertes Applet • ... © Martin Klarner, Informatik 8 VORL 2/Folie 23 Programmierung: Tipps • Programmieren vs. Suchen und Anpassen – – • Bestehende Archive Vorhandene Javascript-Seiten Fehler 1. Eigenen Code debuggen 2. Browser-Fehler in Betracht ziehen 3. Recherchieren im WWW © Martin Klarner, Informatik 8 VORL 2/Folie 24 Überblick • • • • • Allgemeine Funktionsweise Programmierung am Client Existierende Clients Konformität zu Standards Konfiguration und Anwendungen © Martin Klarner, Informatik 8 VORL 2/Folie 25 Browser-Marktanteile 3,3% 0,6% 0,1% Intern et Explorer Netscape Mozilla Son stig e 96 ,0% ⇒ Der „Browserkrieg“ ist entschieden! © Martin Klarner, Informatik 8 VORL 2/Folie 26 Die „großen Zwei“ • Trends – Zunehmende Angleichung bei den Features – Zunehmende Respektierung von Standards • Vorteile des MSIE – Integration mit MS Office/Windows – Stabilität – Geschwindigkeit • Vorteile des Netscape Communicator – Verfügbarkeit auf vielen Plattformen – Verfügbarkeit des Sourcecodes © Martin Klarner, Informatik 8 VORL 2/Folie 27 Sonstige • • • • • • • Amaya: Die W3C-Referenz Opera: Lean, Sourcecode verfügbar Konqueror: KDE-intern, Integration mit Filemanager Mozilla: Netscape‘s Quellcode als OpenSource W3 (im Emacs enthalten) Plattformspezifische Nischenlösungen: Amiga, Mac, C 64 (!) Textbasierte Browser – – – – Lynx W3M: Linux-Textbrowser mit Frames WAP-Browser auf Handy/Palmtop/PDA „Blinden“-Browser (Text-to-Speech, Braille) © Martin Klarner, Informatik 8 VORL 2/Folie 28 Überblick • • • • • Allgemeine Funktionsweise Programmierung am Client Existierende Clients Konformität zu Standards Konfiguration und Anwendungen © Martin Klarner, Informatik 8 VORL 2/Folie 29 Konformität zu Standards • HTML 4.0 allgemein Bsp.: HTML 4.0-Tabellen • CSS-Support • DOM-Support • Javascript • Umgang mit Konformitätsproblemen © Martin Klarner, Informatik 8 VORL 2/Folie 30 HTML 4.0 • Proprietäre Elemente in Browsern • Nicht umgesetzte Elemente des HTMLStandards • Andere Attributnamen • Verschiedene Darstellungen • ... (vgl. z.B. http://www.ncdesign.org/html/list.htm ) © Martin Klarner, Informatik 8 VORL 2/Folie 31 Beispiel: Tabellen • Netscape unterstützt z.B. bis Version 4.X weder <COL>-noch <COLGROUP>-Element • Microsoft IE unterstützt bis Version 5.5 z.B. CHAR-, DIR- und HEADERS-Attribute nicht • Unterstützung von Attributen zur expliziten Spezifikation der Ausdehnung (z.B. HEIGHT) oder Farbe (z.B. BORDERCOLORLIGHT) © Martin Klarner, Informatik 8 VORL 2/Folie 32 CSS- und DOM-Support • CSS-Support – Netscape 4.X: rudimentäre Unterstützung – IE 5.5: partielle und fehlerhafte Unterstützung • DOM-Support – Fehlende Objekte und Funktionen des DOM Core Standards in IE 5.X – Keine Unterstützung von bestimmten Attributen, fehlende Methoden – Netscape 4.X: Dokumentierte Abweichungen (vgl. http://www.builder.com/Reviews/031899/ss05.html) © Martin Klarner, Informatik 8 VORL 2/Folie 33 Javascript • Netscape 3 und 4, Internet Explorer 3 und 4 – Fehlende Javascript-Features – Fehlerhafte Implementierung – Partielle Ignorierung des ECMAStandards (vgl. z.B. http://www.projectit.com/articles/yamf/) © Martin Klarner, Informatik 8 VORL 2/Folie 34 Netscape 6 und 7 • Netscape 6/7 implementiert – – – – – HTML 4 XML 1.0, CSS-1 DOM Level 1 ECMAScript Key components von CSS-2 (vgl. http://cws.internet.com/reviews/netscapenetscape6-8.html) © Martin Klarner, Informatik 8 VORL 2/Folie 35 Überblick • • • • • Allgemeine Funktionsweise Programmierung am Client Existierende Clients Konformität zu Standards Konfiguration und Anwendungen © Martin Klarner, Informatik 8 VORL 2/Folie 36 Konfigurationsmöglichkeiten • Installationsoptionen (Netzwerkinstallation) • Preferences – Grafische Einstellung – Konfigurationsdateien – Mischformen • Plug-ins • MIME-Types • Integration von Mail- und News-Clients © Martin Klarner, Informatik 8 VORL 2/Folie 37 Effizienz • Client-seitiges Caching – Lokaler Zwischenspeicher (RAM oder HD) – Externe Verbindung nur bei cache miss/update (?) ⇒ Verringerte Netzlast • Multi-Threading – Gleichzeitiges Laden und Rendern – Simultanes Öffnen mehrerer TCP-Verbindungen ⇒ Verbesserte Auslastung des Netzes und der lokalen Ressourcen © Martin Klarner, Informatik 8 VORL 2/Folie 38 Effizienz (2): Prefetching • Transparent für Benutzer • Reduziert mit Heuristik-basierten Agenten … – … entweder Latenz auf Benutzerseite • Agent lädt Seiten entspr. Benutzerprofil im voraus • Zusätzliche Netzwerklast – … oder Netzwerklast • Verringert „burstiness“, nivelliert Datenrate • Höhere Datenmenge © Martin Klarner, Informatik 8 VORL 2/Folie 39 Anwendungen • Ziel: Integrierte Arbeits- und „Freizeit“-Umgebung • WWW-basierte Office-Software – – – – – – Textverarbeitung, Tabellenkalkulation (MS Office) Schnittstelle zu WWW-Datenbanken Telefonie (http://www.e-online.de/sites/kom/0307041.htm) Adressbuch, Kalender (OWA) Fax, Mail, News, Filespace (http://office.freenet.de/) Suchmaschinen © Martin Klarner, Informatik 8 VORL 2/Folie 40 Anwendungen (2) • Einkaufszentrale: E-commerce • Multimedia-Maschine – MP3 – Video on demand – Multi-User-Internet-Spiele • Mobile Kommunikationszentrale – WAP, UMTS – Handy, Palmtop, PDA ⇒ Universelle Informationsquelle © Martin Klarner, Informatik 8 VORL 2/Folie 41 Welche Client-Technologien? • Präsentation und Layout: CSS • Zusätzliche Funktionalität: Plug-Ins, ActiveX, Java • Struktur und Inhalte dynamisch verändern: Client-seitiges Scripting, DHTML • Traditioneller Fokus des WWW-Designers © Martin Klarner, Informatik 8 VORL 2/Folie 42 Zusammenfassung • Client-seitige Technologien sind … – … vielfältig und schwer überschaubar – … nicht direkt im Zugriffsbereich des Web Site Designers – … eine Möglichkeit, den Server zu entlasten – … notwendig für WWW -Applikationen • Programmierung am Client und Server nötig ⇒ Nächste Vorlesung! © Martin Klarner, Informatik 8 VORL 2/Folie 43 Literatur • Hall, M. Core Web Programming, Prentice Hall PTR • Powell, Thomas A. Web Site Engineering. Prentice Hall 1998 • Siegel, D. Killer Web Sites. München 1999 • Wilde, E. Wilde´s WWW. Springer, Berlin, 1999 • Greenspun, P. Philip and Alex's Guide to Web Publishing. http://www.arsdigita.com/books/panda/ © Martin Klarner, Informatik 8 VORL 2/Folie 44 Links • • • • • • • • • • • http://www.oasis-open.org/cover/ http://www.w3.org/DOM/ http://www.teco.edu/lehre/webe http://www.webdeveloper.com/library/reference.html http://browserwatch.internet.com/news/story/news-200012092.html http://www.easyjavascript.com/javascript.html http://xmlhack.com/read.php?item=409 http://www.teco.edu/lehre/webe http://www.e-online.de/sites/kom/0307041.htm XML Cover Pages: http://www.oasis-open.org/cover/ XML allgemein: http://www.xml.com/ © Martin Klarner, Informatik 8 VORL 2/Folie 45
