Web_20_03 - a simple web page
Werbung
Web 2.0?! Struktur und Konzepte moderner Web-Applikationen Konrad Frohitzheim Technische Universität Bergakademie Freiberg [email protected] Nach dem World Wide Web der Wissenschaftler hat die Wirtschaft das Internet und insbesondere das WWW entdeckt. Portale und E-Commerce, also insbesindere Einkaufen im Web und B2B-Appikationen waren der Kern des aus heutiger sicht ersten Web. Nach der Dotcom-Blase blieben einige Dienste erfolgreich und auch profitabel. Bei der Analyses dieser erfolgreichen Web-Applikationen ergeben sich Gemeinsamkeiten, die in diesem Aufsatz diskutiert und extrapoliert werden sollen. Zunächst sollen in einem kurzen historischen Exkurs typische Merkmale von frühen Web-Applikationen beschrieben werden, um die definierenden Gemeinsamkeiten der Web 2.0 Dienste identifizieren zu können. 1 Vom WWW der Wissenschaftler zum Web 1.1 Hypertext Das Hypertextkonzept wurde schon ca. 1969 von Douglas Englebart eingeführt [Ref]. Das Konzept Hypertext wurde in den Jahren bis 1990 besonders von Ted Nelson im Projekt Xanadu vorangetrieben [Ref]. Der Begriff beschreibt nichtlineare Dokumente, deren Konsum nicht dem klassischen Lesefluss vom Anfang zu Ende folgt, sondern in dem der Konsument - der Leser anders als beim Roman die sequentielle Reihenfolge verlässt und im Dokument 'springt'. Diese Art des Lesens triff man z.B. in wissenschaftlichen und technischen Texten, bei denen Referenzen verfolgt werden müssen, z.B. in vertiefende Literatur. Die Struktur Zur Anzeige wird der QuickTime™ Dekompressor „TIFF (LZW)“ benötigt. Abbildung 1: die erste Webseite des WWWProjektes (in einem modernen Browser). solcher Dokumente kann ein - unter Informatikern sehr beliebter - baum oder auch ein allgemeiner Graph - ein Netz - sein. Dazu führt man Verweise (Links) ein, die auf einen anderen Teil desselben Dokumentes (Kapitel, Fußnote, Grafik), auf ein anders Dokument im selben Repositorium oder auf ein entferntes Dokument (Literaturhinweis) zeigen. Diese Verweise sind Kanten, die Dokumente bzw. Dokumentenelemente die Knoten des Graphen. Der sequentielle Konsum entspricht dem Durchlauf einer linearen Liste, der Hypertext-Konsum der freien Bewegung in einem allgemeinen Graphen. Um das ganze Dokument zu lesen, muss der Konsument allerdings im Backtrack-Verfahren [REF] immer wieder an die Verzweigungspunkt zurückkehren. Hauptproblem der frühen Hypertxt Systeme war das Fehlen eienr preiswerten Netzwerkinfrastruktur und guter Hypertext-Browser. 1.2 Web 0.5 - World Wide Web Für das Europäische Hochenergiephysik-Froschungszentrum am CERN haben Tim Berners-Lee und Robert Cailliau ca. 1990 ein Hypertextsystem zur Verwaltung technischer Dokumentation und wissenschaftlicger Veröffentlichungen von Relevanz für die Forschung am CERN entworfen und implementiert. Im Vordergrund des Entwurfes stand dabei die Verteilung des Hypertext-Systemes entsprechend der verteilten Natur der CERN-Forschergemeinde. Die Architektur wird heute gern als Client-Server System bezeichnet, obwohl der Begriff Server - Internet Client kennzeichnender wäre. Kern des World-Wide-Web genannten Systemes von Berners-Lee ist das SessionProtokoll http und das in der Präsentationschicht angesiedelte Dokumentenformat html. Beide zeichnen sich durch besonders einfaches Design aus, Server Client wodurch die Entwicklung vieler Komponenten im Open-Source Ansatz request begünstigt wurde. response http, das HyperText Transfer Protocol basiert auf einem Request-Response Modell. Wichtigste Komponente ist der in Abbildung 2 gezeigte HttpGetRequest, mit dem die Klientensoftware (Browser) den Server um eine Datei bittet. Diese Datei wird vom Server in den Klienten im Sinne eines Filetransfers übertragen, das in der Datei enthaltene Dokument wird vom Klienten nach vollendeter Übertragung angezeigt. request response request response Abbildung 2: http-Interaktionsmodell. Der Client schickt einen Request, der Server antwortet mit einer Response. In der Zwischenzeit ist die Klientenapplikation blockiert. In der transferierten Datei kann Text, ein Bild oder eben ein html-Dokument enthalten sein. Die HyperText Markup Language, eine Document Type Definition (DTD) von SGML [REF] enthielt zunächst Text mit Präsentationsinformation und die sogenannten <a>-Tags, die die Hyperlinks enthalten. Seit dem ersten Entwurf sind viele weitere Tags hinzugekommen, um html-Dokumente mit reicherem Inhalt (Multimedia) und weiteren Layout-Möglichkeiten zu versehen. Für die Zwecke diese Aufsatzes sind aber formatierter Text und die Hyperlinks wichtig. Der eigentliche Siegeszug des WWW fand aber erst mit der Inplementierung des ersten guten Browsers Mosaic durch Andreesen et al [REF] statt. Dieser Browser war auch deshalb erfolgreich, weil er andere - damals populäre - Dienste wie Gopher und ftp integrierte. Aus diesem Browser entstand später die Firma Netscape mit dem gleichnamigen Browser. 1.3 Web 1.0 - Kommerzialisierung des WWW Im WWW der Wissenschaftler trugen fast alle Teilnehmer Inhalte bei- Publikationen, Vorlesungen sowie unveröffentliche und nicht für Tagungen oder Zeitschriften geeignete Arbeiten wie technische Dokumentation. Darüberhinaus war das WWW zusammen mit ftp die erste effiziente Methode, nichtkommerzielle Software kostenlos zu verteilen. Ein wichtiger Beitrag der Teilnehmer waren ihre 'Homepages' mit den Linklisten, ein Peer-Ansatz anderen zu helfen, sich in der entstehenden Informationsvielfalt zurechtzufinden. Bald entstanden auch die ersten kommerziellen Webseiten, sogenannte WWW-Präsenzen von Unternehmen, die zunächst nur Ihre Ansprüche an Namen und Sichtbarkeit absichern wollten. Damit fand aber auch geräuschlos ein entscheidender Wandel statt - die Rollenverteilung im WWW änderte sich: weg vom TeilnehmerModell, in dem fast alle Inhalte beitrugen hin zu einem Produzent-Konsumenten-Modell (siehe Abbildung 3). In diesem der Presse entsprechendem Modell erstellen Wenige ausgefeilte Inhalte und die überwältigenden Mehrheit konsumiert. Abbildung 3: Producer-ConsumerModell. Ein Produzent stellt Inhalte bereit, viele Konsumenten fragen den Inhalt ab. Zeitgleich entstanden kommerzeille MetaSeiten, Web-Sites in denen Information aggregiert wird, um dem Konsumenten beim Auffinden von Information zu helfen. Diese Seiten sind einerseits kommerzielle Linksammmlungen wie etwa der ursprüngliche Yahoo-Dienst, andererseits Suchmaschinen wie in der Anfangsphase Altavista und seine Nachfolger. Die Aggregation besteht aus Link-Listen bzw. Link-Bäume (letzteres bei Yahoo), die Meta-Seiten speichern selten den Inhalt sondern nur Verweise auf die Inhalte. Diese Phase des Webs ist gekennzeichnet von statische Webseiten. Die Dokumente sind in html 'geschrieben', multimediale Inhalte werden mit spezialisierten Tags eingebunden. Solche Seiten sind makro-interaktiv, das heisst die Interaktion des Benutzers, typischerweise ein Mausklick, führt zu einem Seitenwechsel. Während dieses Seitenwechsels kann der Benutzer nur warten. Erst nach dem Laden der neuen Seite wird der Seiteninhalt ausgewechselt (siehe Abbildung 2). Ein weiterer und zwitweise erfolgreicher Typ kommerzieller Webseiten sind die sogenannten Portale, in denen möglichst umfassend Informationen zum einem oder mehreren Sachgebieten präsentiert werden. Online-nachrichtenmagazine verfolgen einen ähnlichen Ansatz - sie präsentieren aber aktuelle Inhalte. Nach einigen erfolglosen Versuchen mit Abonnement-Modellen sind diese Seiten heute fast ausschliesslich werbefinanziert. Durch die aktuelle Natur der präsentierten Information und der vielzahl an Inhalten, sind solche Seiten template-basiert. Die einzelnen Informationsobjekte werden nicht mehr individuell als html-Dokument gestaltet, sie werden in ihrer natürlichen Form als Text in einer Datenbank gespeichert und zur Anzeige in sogenannte Templates eingesetzt. Diese datenbankbasierten Webseiten werden von Content-Management-Systemen verwaltet und präsentiert. man könnte diese Form des WWW auch 'Web 1.5' nennen. Schon früh wurde das WWW als Vertriebsmedium für den Versandhandel entdeckt. Dabei dient das Web als elektronischer katalog und als Bestellsystem, das den Versand von Katalogen und Bestellpostkarten (bzw. Callcenter) ersetzt. Bei der entsprechend fortgeschrittener Integration in Warenwirtschaftssysteme entstehten sehr schlanke Versandhandelsstrukturen. Der Online-Buchhändler Amazon ist nicht nur der Existenzbeweis für E-Commerce-Systeme sondern auch in seiner Fortentwicklung der erste Web 2.0 Dienst. 1.4 Überlebende und erfolgreiche Web-Dienste In diesem Kapitel sollen anhand von Beispielen Merkmale erfolgreicher Web-Dienste herausgearbeitet werden, die im Kapitel 2 zu einer Beschreibung des Web 2.0 führen. Der Online-Buchhändler Amazon hat von Anfang an fremde Daten in seinen Dienst eingebunden: die ISBN-Nummern und Inhaltsbeschreibungen der Bücher wurden von einer der Öffentlichkeit weitgehende unbekannten Firma (R.R. Bowker) zugekauft, Bilder und Rezensionen von den Verlagen integriert. Darüberhinaus hat Amazon seinen Kunden schon früh ermöglicht, eigene Rezensionen zu den Buchtiteln zu schreiben. Diese Kundenrezensionen sind zwar manchmal schlecht, in der Menge helfen sie aber bei der Kaufentscheidung. Dazu kommt die Auswertung des Kuafverhaltens, auf deren Basis Amazon Kaufempfehlungen gibt. Auf diese Weise hat Amazon es verstanden, einzigartigen Inhalt zu aggregieren, ohne selbst in großem Umfang Inhalte erstellen zu müssen. Mittlerweile ist die Amzon-eigene Buchnummer ASIN zu einem wichtigen Buchnummernsystem geworden [TOR]. Auch das Logistik- und Zahlungssystem von Amazon ist nicht beim Buchhandel stehengeblieben, die Firma hat es zu einer Handelsplattform weiterentwicklet. Auf dieser Plattform bietet einerseits Amazon diverse Waren (Elektronik, Spielzeug, …) anbietet, andererseits verkaufen Privatleute, kleine und mittlere Händler ähnliche oder gleiche Produkte, ja sogar Bücher. Diese Anbeiter bieten oft zu günstigeren Preisen als Amazon an, ohne daß das Amazon zu stören scheint.. Die Implementierung der Handelsplattform hat Amazon ebenfalls erweitert zu den Amazon Web Services, die heute einen ECommerce Service, die Elastic Compute Cloud (EC2) und den Simple Storage Service (S3) umfassen. Interessant ist auch der Abbildung 4: Peer-to-Peer-Modell. P2P bedeutet das viele oder alle Teilnehmer am Dienst Inhalte beitragen. Das Wirtschaftsunternehmen aggregiert und kanalisiert die Inhalte. Amazon Mechanical Turk, bei der z.B. einfache Mustererkennungsaufgaben gegen kleine Geldbeträge von Menschen gelöst werden. Das Internet-Auktionshaus Ebay hat von Anfang an darauf verzicht, eigene Inhalte zu erstellen oder eigene Waren zu verkaufen. Ebay verkauft nur die Leitung seines Transaktionssystems. Inhalte, also Waren die auf dem Wege der Auktion oder zum Festpreis verkauft werden sollen, werden von den Kunden beschreiben und beworben. Auch hier wird die eigentliche Arbeit von Privatleuten und Kleingewerbetreibenden geleistet, die die Waren finanzieren, fotografieren und sogar die gesamte Zahlungsabwicklung und Logistik übernehmen. Ebay bietet nur die Handelsplattform, macht Regeln und kassiert Gebühren. Der sehr profitable Web-Dienst Ebay kanalisiert die Arbeit seiner Millionen Benutzer, die sogar dafür bezahlen, Inhalte und Waren bereitstellen zu dürfen. Ein Blog (web-log) ist eine Software, die es erlaubt, Text template-basiert auf einer Webseite bereitzustellen. Im wesentlichen ein stark vereinfachtes Content-management System, das auch für normale Webbenutzer einfach zu verwalten ist. Eine Einzelperson kann in diesem Weblog ein öffentliches Tagebuch verfassen oder Geschehnisse des öffentlichen Lebens (Politik, Kunst, Sport, Wirtschaft, …) häufig kommentieren, ohne daß das html der Webseite geändert werden muss. Dazu kommt eine Kommentar-Funktion, so daß Leser - alle oder nur registrierte - Anmerkungen (Leserzuschriften) oder Kommentare abgeben können. In diesen Blogs kommt es so auch zu angeregten Diskussionen, die häufig den Reiz des Blogs ausmachen. Aus den refolgreichen Blogs entwickelt sich zur Zeit eine echte Konkurrenz zu Zeitungen und Zeitschriften. Die Finanzierung erfolgt ggf. über Werbung. Wikis sind Verwaltungssysteme für lexikonartige Inhalte, die z.B. zur Dokumentation und für Nachschlagwerke benutzt werden können. Ein rollenbasiertes Verwaltungssystem regelt den Zugang zur Erstellung von Inhalten. Ein Sonderfall ist das Internet-Lexikon Wikipedia, bei dem sich alle Web-Teilnehmer an der Erstellung des Inhaltes beteiligen können. Abgesehen von der unklaren Qualitätskontrolle und er Empfindlichkeit gegen gezielte Fälschungen ist Wikipedia ein leuchtendes Beispiel für einen immensenen Mehrwert durch die Aggregation von Gemeinscahftswissen. Eine weitere benutzergetragenen Dienstegruppe sind die Sharing-Systeme, sowohl P2P als auch serverbasiert. Allerdings werden diese Dienste häufig von Urheberrechtsproblemen geplagt. Bekannte Systeme sind abgesehen von den Tauschbörsen (Napster, Kazaa, eMule) Flickr für Photos, YouTube für Videos und MySpace für persönliche Profile. Die klassische Linksammlung lebt heute als Tagging oder social bookmarking in Diensten wie del.icio.us weiter. Hier liefern die Benutzer mit Schlagworten (tags) versehene Web-Links (bookmarks)ab. Abgesehen von der Suchfunktion ergeben sich Tag Clouds (siehe Beispiel Abb. 5) die Beziehungen und Relevanz von Begriffen Zur Anzeige wird der QuickTime™ Dekompressor „TIFF (LZW)“ benötigt. Abbildung 5: Tag-Cloud zeigt Tags, die mit einem Begriff in Beziehung stehen. Die Stärke der Beziehung wird durch die Zeichensärke und die grafische Anordnung symbolisiert. zeigen. Suchdienste wie Google sind auf natürliche Weise Aggregationen von Benutzerdaten. Sie suchen nicht nur im textuellen Informationsraum, sondern auch nach Bildern, in karten usw. Google beitet darüberhinaus eine Prgrammierschnittstelle, mit der andere Diensteersteller Google-Funktionen in ihre Angebote integrieren können, zum Beispiel die klassische Suche, die Landkarten oder die Satellitenbilder von google earth. Das ermöglicht den sogenannten Mash-Up, also die Aggregation mehrerer Dienste, die zu neuen Funktionen führt. Insgesamt zeigen die Beispiele, daß fast alle erfolgreichen modernen Webdienste Infrastruktur für Benutzer bereitstellen, mit denen diese Benutzer erstellen den eigentlichen Inhalt erstellen und so die Werte schaffen. Die Leistung dieser Diensteanbieter ist es, den Benutzer arbeiten lassen, in dem er eine Auktion erstellt, einen Artikel beschreibt, Rezensionen schreibt, bloged und kommentiert. Der Dienst stellt die einfach benutzbare Plattform bereit und kanalisiert Benuterbeiträge, in dem er Regeln erstellt (Gesetze, 'Anstand', …) und durchsetzt Dazu werden Beiträge entweder automatisch oder durch andere Benutzer (Peers) kontrolliert 2 Web 2.0 Der Begriff Web 2.0 wurde in einer Diskussion-Session 2004 geboren und seitdem von John Battelle und dem Verleger Tim O'Reilly popularisiert. In einem im Web veröffentlichten Aufsatz hat O'Reilly seine Thesen zusammengefasst, die hier kurz wiedergegeben werden sollen. These 1: Das Web als Platform nutzen Moderne Webdienste werden nicht mehr von einem Server erbracht, sie bündeln die Lesitung mehrerer interner und externer Webdienste. Pionier in diesem Bereich waren die Werbeprovider, z.B. DoubleClick, die Anzeigen bereitstellen, die von InhaltsSeiten gegen Bezahlung angezeigt werden. Der Vorteil ist, daß Werbekunden nicht mehr vom Inhaltsanbieter, sondern von DoubleClick aquiriert werden und dass die Kunden auf vielen Seiten werben können, ohne viele Vertragspartner zu haben. These 2: Die kollektive Intelligenz kanalisieren Die Inhalte so erfolgreicher Dienste wie Google, Amazon, Ebay, Flickr, die Blogs oder Wikipedia kommen explizit und implizit vom Benutzer. Das WWW selbst war am Anfang ein kollektiv erzeugter Informationsdienst, der durch die Hyperlinks organisiert wurde. Web 2.0 Dienste laden alle Benutzer auf vielfältige Art ein, beizutragen. Auch das tagging fällt in diese Kategorie. These 3: Daten erzeugen den Mehrwert Jede wichtige Internet-Appliaktion hat einzigartige Daten in ihren Datenbanken: Google hat die Ergebnisse seines Webcrawlers, Amazon die Artikeldaten und Kundenkommentare, Ebay die Auktionsbeschreibungen. Viele Daten können bei Providern (R.R. Bowker, NavTeq) bezogen werden. Aber das kann meist auch die Konkurrenz, wie das im Falle der Landkartendaten auch geschieht, was dazu führt, daß Navigationsdienste (mapquest, maps.google.com, map24, etc.) kaum Alleinstellungsmerkmale haben und dadurch wenig Kundenbindung. Gerade bei den Karten zeigt sich übrigens die Leistungsfähigkeit von Mashups. These 4: Das Ende der Software-Releases In These 1 wurde bemerkt, daß im Web 2.0 keine Software-Pakete sondern Dienste verteilt werden. In Web-Plattformen wie Amazon und Google gibt es keine klassischen Releases. Fehlerkorrekturen und neue Funktionen werden im täglichen Betrieb eingefügt. Das bedeutet einerseits, daß keine Pakete mehr verschickt, geladen oder installiert werden müssen. Andererseits kann der Erbringer auch mutiger Änderungen einfügen - wenn sie fehler nethalten, kann die Änderung dynamisch wieder zurückgenommen werden. Das führt zu einem natürlichen Prozess der kontinuierlichen inkrementellen Weiterentwicklung. Ein zweiter Aspekt ist die stärkere Integration des Benutzers in die Entwicklung und das Produkt-Management. Neue Funktionen können den Benutzer früh zum Test vorgesetzt werden, das Benutzerverhalten kann in Form von Clickstreams beobachtet werden, um Benutzbarkeits- und Akzeptanzinformation kurzfristig zu gewinnen. Bei Flickr werden neue Software-Versionen in kleinen Zyklen bis hinunter zu 30 Minuten eingespielt. These 5: Leichtgewichtige Programmiermodelle Die Struktur der verteilten Webappliaktionen mit vielen heterogenen Serverm, Mashups, Browsern und ihren Komponenten verlangt nach einem anderen Progarmmiermodell. Sprachen und Entwicklungssysteme wie C, C++ und IDEs erzeugen im Wesentlichen monolithischen Code, Executables. Wie in Kapitel 2.1 diskutiert bestehen moderne Webdienste aus vielen heterogenen SoftwareKomponenten, in denen Code ausgeführt werden muss. Hier funktiniert der monolithische Code nicht mehr, Webdienste werden zu einer Sammlung von CodeStückchen, die oft in Scriptsprachen erzeugt werden (siehe 2.2 und 3). In gewissem Sinne wird nicht mehr das Zusammenwirken der Software-Funktionen koordinieret, sondern der Datenfluss wird organisiert (daraus enstehen auch die Mashups). These 6: Software ist nicht mehr an Hardware oder Betriebssyseteme gebunden Die Web 2.0 Dienste arbeiten plattformübergreifend, nicht nur bezogen auf Betriebssysteme und PC-Marken, sondern auch auf unterschiedlichen Devices wie PCs, Mobiltelefonen und iPods (podcast). These 7: 'Rich User Experience' im Web Die klassischen html-Dokumente mit den integrierten Multimedia-Komponenten (Bilder, Audioclips) sind statischere Natur. JavaScript, DHTML, Applets und Flash erlauben die dynamische Veränderungen der Seiten, so daß sie immere mehr wie echte Applikationen reagieren. Ein Beispiel sind die AJAX-Applikationen von Google, also Google Maps, Google Docs (Textverarbeitung und Tabellenkalkulation) oder Google Calendar. Wir werden im folgenden und in Kapitel 3 AJAX Werkzeug diskutieren, mit denen solche reichen Web-Appliaktionen geschreiben werden. Diese reichhaltigen Benutzungsschnittstellen tragen dazu bei, einen der letzten wichtigen Vorteile klassischer Softwarepakete einzuholen. 2.1 Struktur von Webapplikationen Web-Applikationen sind heute mikro-interaktiv im Gegensatz zur grobkörnigen Interaktivität der Web 1.x Seiten. Im klassischen WWW beschränkt sich die Interaktion auf das Anklicken von Links, das entweder ein Sprung zum gewählten Textanker, meist aber das synchrone Laden einer neuen Seite vom Server auslöst. Währennd der Ladezeit kann keine Interaktion mit dem Benutzer stattfinden. Die Forderung noch feinkörniger Interaktivität wie bei typischen ArbeitsplatzrechnerApplikationen bedeutet eine fundamentale Änderung im gesamten System: asyncrhone Kommunikation mit dem Server, so daß man den Browser auch während des Ladens von Dokumenten benutzen kann, kleinere zu übertragende Einheiten (dynamisches Nachladen von Komponenten) und aktive Komponenten von Seiten, so daß kleinere Veränderung der Anzeige auch ohne Nachfrage beim Server möglich ist. Der Browser erhält vom Server ein html-Dokument als Substrat. In diesem Dokument sind Multimedia-Komponenten referenziert, die vom Browser separat nachgeladen Server request Browser Script Engine response Interaktion Doc Struktur Renderer Abbildung 6: Der Browser enthält nicht nur die Komponenten zum Parsen und Anzeigen der Dokumente, er enthält auch einen Interpreter zur Ausführung kleiner Programme, der Scripte,. werden. Zusätzlich sind in dem Dokument Strukturinformation z.B. als cssStylesheets und aktive Elemente, also Programmfragmente enthalten. Diese Programmfragemente sind zum Beispiel JavaScript-Stücke. Die Strukturinformation des Dokumentes wird analysiert und in einer baumartigen Datenstruktur gespeichert. In der Script-Engine, einem Interpreter werden die aktiven Komponenten ausgeführt (siehe Abbildung 7). Nach der ersten Anzeige des Dokumentes werden die Benutzerinteraktionen (Mausklicks, Eingaben) vom Browser analysiert und evtl. in neue Requests (Hyperlink) formuliert oder als Eingaben an die Script-Engine weitergeleitet. Interaktionen die in der Script-Engine landen lösen typsciherweise die Ausführung einer oder mehrerer Script-Funktionen aus, die das Dokument manipulieren (eigentlich den Dokumentenbaum), eigenständig Anzeigen auslösen oder besondere Request an einen Server senden. Typische Programmiersysteme für die dynamischen Komponenten sind AJAX/Javascript, Java in Applets oder Macromedia/Adobe Flash. In Abblidung 7 ist die Struktur eines modernen Webservers gezeigt. In ihm erkennt man gut das Management des Datenflusses. Requests bewirken zunächst das Holen einer Datei, deren Inhalt im weiteren Durchlauf verändert und ergänzt wird mit dynamischen Inhalten aus Datenbanken, anderen Programmen oder externen Geräten.Auf der Serverseite ist die Vielfalt an Programmierwewrkzeugen für die dynamischen Komponenten noch größer, beispiel sind ASP, php, Ruby on Rails, Javabeans oder .net. filter module Browser Apache request core functions response file system module mapping instrument module php IF … … SQL instrument database Abbildung 7: Struktur eines Webservers, Apache nachempfunden. Nach einigen Vorbereitungen wird eine Datei von der Festplatte geholt, deren Inhalte im Verlauf der Weiterverarbeitung in den Modulen verändert, ersetzt und ergänzt werden. 2.2 Programmierparadigmen für Web 2.0 Wie oben beschreiben besteht die Infrastruktur von Web 2.0 Applikationen aus einem Server, typischerweise Apache+php oder JavaBeans, einer Datenbank und er Kleintensoftware dem Browsere (InternetExplorer, einem Mozilla Browser oder Safari). Struktur und funktionale Elemente sind in 2.1 knapp präsentiert worden. Wie bereits beschrieben ist der Datenfluss das zentrale Element einer Webapplikation. Viele kleinere Komponenten arbeiten seriell an diesem Datenfluss. Die entstehenden Softwaresysteme besteht deshalb aus kleinen, oft vorgefertigten Codeelementen (Objekten) und abgeleiteten (erweiterten) Objekten. Man könnte diese Art der Software auch als abwertens als Krümelware bezeichnen. Insbesondere steht Entwurf und Implementierung solcher stark fragmentierten Software im krassen Widerspruch zum Stand der Forschung des Software-Engineering, bei dem Architekturentwurf, Codieren und Testen/Debuggen im wesentlichen getrennte Phasen sind. Der Vorteil dieser Implementierungsart ist die Möglichkeit zum inkrementellen Programmieren - Entworfen werden Systemarchitektur und Datenfluss, nicht die Softwarearchitektur. Das Programmieren eine solchen Systemes besteht aus Einfügen und Erweitern statt dem klassischen Programmieren, bei dem monatelang Code eingebenen wird, bevor zum ersten Mal ein Programm zur Ausführung kommt. WebApplikation kann man schon nach dem Eingeben der Dokumente ausprobieren, danach werden sie inkrementell und oft im Betrieb verbessert. Server 3 AJAX Gegenwärtig werden Web 2.0 Applikationen sehr häufig mit AJAX entwickelt - Asynchronous JavaScript And XML. AJAX Applikationen kann man im Web vielfältig benutzen, zum Beispiel bei maps.google.com, Google Docs oder flickr.com. JavaScripte sind Programme im Browser. JavaScripte werden in html-Dokumente integriert (siehe Listings 1 und 2), beim Datenfluss durch den Server aus AJAXLibraries eingefügt, oder dynamisch vom Klienten nachgeladen. Der zentrale Unterschied zwischen JavaScript und AJAX is die leichtgewichtige Kommunikation, die durch den XMLHttpRequest möglich wird. XMLhttpRequests können synchron und asynchron verwendet werden. Der asynchrone Request hat den Vorteil, daß Browser, Dokument und Script weiter mit dem Benutzer interagieren können, während Kompenenten des Dokumentes vom Server geladen werden. Ein beispielhafter Ablauf einer AJAXAnwendung is in Abbildung 8 gegeben. 3.1 Javascript Client GET-request html, img, js js XMLHttpRequ est XML js XMLHttpRequ est js php html, img js XMLHttpRequ est Abbildung 8: Dynamsciher Ablauf einer AJAXApplikation. Gezeigt ist sowohl die synchrone als auch die asynchrone Kommunikation mit dem Server. Zum Beispiel finden während des zweiten - asynchronen XMLHttpRequests Benutzerinteraktionen statt. <html><head><title>Test</title> JavaScript wurde </head><body onload="window.resizeTo(1024, 768)"> schon früh von der </body></html> Firma Netscape ent- Listing 1: Einfaches Javascript (rot) zum Vergrösseren eines wickelt. Die Assozia- Fensters. onload ist ein Event, der Text in den Anführungszeichen tion an Java im Namen der Aufruf einer Javascript-Methode. ist allerdings irreführend, allenfalls ist die Syntax leicht von Java inspiriert. In der Standardisiereung heisst JavaScript auch ECMAScript [Ref]. In Listing 1 ist ein bekanntes und verhasstes Beispiel für ein einfache Script gegeben, die Veränderung der Windowgröße. Diese Script wird gerne verwendet von Webseiten, die den ganzen Bildschirm und damit wohl die gesamte Aufmerksamkeit des Benutzers erobern wollen. Javascript wurde zunächst Verbesserung von HTML-Seiten verwendet. Dabei können über Standardobjekte Fenstergröße und -Gestaltung, Menus, grafische Effekte usw erzielt werden. Javascript-Funktionen werden mit dem script-Tag in HTML eingebettet. Die im script-tag definierten Funktionen (blau in den Listings) können allerdings noch nicht ausgeführt werden. Die Ausführung wird durch Eventhandler angestossen (siehe den roten Text in den Listings 1 und 2). Eventhandler sind als Attribute in html-tags eingebettet. Sie spezifizieren die Ausführungsbedingung (onclick wenn der Link vom Benutzer geklickt wird, onload wenn das Dokument geladen wird, onMouseover, …) und die aufgerufene Fuktion bzw. Methode sowie deren Parameter.. <html> <head> <title>JavaScript-Test</title> <script language="JavaScript"> <!-function Quadrat(Zahl) { Ergebnis = Zahl * Zahl; alert("Das Quadrat von " + Zahl + " = " + Ergebnis); } //--> </script> </head> <body> <form> <input type=button value="Quadrat von 6?" onClick="Quadrat(6)"> </form> </body> </html> Listing 2: Webseite mit einem Knopf zur Berechnung In der von Java inspirierten des Quadrates von 6. Die Berechnung findet einen Sprache gibt es Anweisungen wie Request zum Server statt. Blau die JavascriptZuweisungen, bedingte Anwei- Funktion, rot der Eventhandler sungen, Schleifen, Funktionsaufrufe und natürlich die Blockbildung mit den Klammern {}. Siehe Listing 3. Leider hat Javascript kein ordentliches Typkonzept für Parameter und Variablen, die mit 'var' vereinbart werden. Der Typ Zahl oder String wird bei der ersten Zuweisung festgelegt. Die Variablen sind global oder lokal für eine Funktion. Objekte können vom Programmierer definiert werden. Einige Objekte zur sind vordefiniert in Laufzeitumgebung als BrowserAPI bereits vordefiniert, z.B. window oder document. Sie enthalten die Methoden zur Manipulation von Eigenschaften des Fensters oder des Dokumenteninhalts. Funktionen und Metoden werden aus anderen Funktionen und in Eventhandlern aufgerufen. zahl = 0; zahl++; zahl+=1; if (Zahl<0) zahl = 0; while (idx<100) {…; idx++} for(i = 1; i <= 100; i++) alert("Und hier ein kleiner Hinweis"); if (Ergebnis > 100) { Ergebnis =0; Neustart(); Listing 3: JavaScript Prgrammkonstrukte 3.2 XMLHTTPRequest Der XMLhttpRequest wird von Eernisse [ERN] als die geheim Zutat (secret sauce) von AJAX bezeichnet. Es handelt sich um eine JavaScript Klasse, die erstmals im function createXMLHttpRequest() { try { return new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) {} try { return new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) {} try { return new XMLHttpRequest(); } catch(e) {} alert("XMLHttpRequest not supported"); return null;} Listing 4: Erzeuigen eines XMLhttprequests für verschiedene Browser Internet Explorer 5 enthalten war, um Komponenten vom Server nachladen zu können, ohne eine Seite neu zu laden und aufzubauen. Das ist mit einem klassischen Hyperlink nicht möglich, alle Aktivitäten und Ströme auf der Seite werden duch einen Klick auf einen Hyperlink abgebrochen. Durch diesen Request kann also der Benutzer var xhReq = createXMLHttpRequest(); xhReq.open("get", "sumget.phtml?num1=10&num2=20", true); xhReq.onreadystatechange = function() { if (xhReq.readyState != 4) { return; } var serverResponse = xhReq.responseText; Listing 5: Senden eines XMLhttprequests und warten auf das Resultat dieselbe Seite ...};weiterverwenden, es werden nur neue Elemente nachgeladen, hinzugefügt und evtl. ausgetauscht. Strengenommen handelt es sich um ein xhReq.send(null); JavaScript-Interface für http ohne Benutzerinteraktion. Der XMLhttpRequest kann synchron und asynchron verwendet werden. In den Listings 4 und 5 sind das Erzeugen und das Senden eines XMLhttprequests beispielhaft wiedergegeben. 3.3 DOM und das X in AJAX Markup Markup: Trennung Struktur - Inhalt logische Struktur der Seite Bsp: Überschriften, Absätze, Zitate, … XML: eXtensible Markup Language Syntax für Markup Semantik in XSL oder CSS Document Object Model DOM baumartige Struktur der Dokumente Zugriff auf Dokumenteninhalt (=Objekte) Inhalt, Struktur, Stil AJAX XML als ein Transfer-Format für Inhalt Manipuliert DOM-Knoten <table> <thead> <tr> <th>Vorname</th> <th>Name</th> </tr> </thead> <tbody> <tr> <td>Donald</td> <td>Duck</td> </tr> </tbody> </table> Listing 6: Besipiel Dokumentenstruktur Einfügen, Löschen, Ändern Browser 'rendert' Dokument 4 Ausblick: Web 3.0? Aspiranten bessere Suchmaschinen Semantisches Web, Inhalte Verstehen, KI, … triple play 3D 3D Bilder virtuelle Realität Sozialer Kontakt natürliche Interaktion echte Menschen treffen (-> SL) Avatare und Bilder Web zur Steuerung der Kommunikation Allgegenwärtiges Web 'eingebettet' wie Papier Literatur [TOR] Tim O'Reilly: Web 2.0; 2005. http://www.oreillynet.com/pub/a/oreilly/tim/news/2005/09/30/what-is-web-20.html [ERN] M. Eernisse: Build your own AJAX Web Applications; 2006. M. Mahemoff: Ajax Design Patterns; 2006. http://ajaxpatterns.org http://radar.oreilly.com http://de.selfhtml.org
