Web_20_01 - a simple web page

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,
QuickTime™ and a
bei dem sich alle Web-Teilnehmer an der ErTIFF
(LZW) decompressor
stellung des Inhaltes beteiligen können. Abgeare needed to see this picture.
sehen 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
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. Wie in Kapitel 1 erläutert
Benutzeroberfläche
Browser
Server
request
Browser
Script
Engine
Interaktion
Doc
Struktur
response
Renderer
html mit Grafiken als Substrat
individuelles Verhalten: JavaScript
Server
Datenbank
Geräte
Apache und Apache-Module
filter module
Browser
Apache
request
core functions
response
file system
module mapping
instrument
module php
IF
…
…
SQL
Scripting
client-side: Javascript, Java Applets
server-side: ASP, php, Java und Beans
Beispiele
rr.informatik.tu-freiberg.de
Shopping-Seiten
database
instrument
2.2 Programmierparadigmen für Web 2.0
Infrastruktur
Server:(Apache+php|JavaBeans)
Server:Datenbank
Client:(InternetExplorer|Firefox|Safari)
Krümelware
kleine, vorgefertigte Bauteile (-> Objekte)
abgeleitete (erweiterte) Objekt
inkrementelles Programmieren
Einfügen und Erweitern statt Bauen
Gesamtkonzept? Architektur?
AJAX
Asynchronous JavaScript And XML
maps.google.com
flickr.com
- ajaxWrite.com
Server
Client
GET-request
html, img, js
3 AJAX
js
Programm im Browser(Client)
JavaScript
AJAX-Libraries
Server
Webserver, Datenbank
XMLHttpRequest
D
B
XML
Server-side Scripte
js
Leichtgewichtige Kommunikation
XMLHttpRequest
XMLHttpRequest
synchron und asynchron
ph
p
3.1 Javascript
js
html, img
Beispiel: Windowgröße verändern
js
<html><head><title>Test</title>
</head><body onload="window.resizeTo(1024, 768)">
</body></html>
XMLHttpRequest
Programmfragmente in HTML
Verbesserung von HTML-Seiten
Klienten-Seite
von Netscape definiert
Fenstergröße und -Gestaltung
Menus, Effekte, …
Interpreter
Browser
im
<html><head><title>Test</title>
<script language="JavaScript">
Eingebettet
in
<!-HTML
<html>
alert("Hallo Welt!");
script-Tag
<head>
//-->
<title>JavaScript-Test</title>
</script>
<script language="JavaScript">
Beispiel
</head><body>
'Taschenrechner'<!-function
Quadrat(Zahl)
</body></html>
{Ergebnis = Zahl * Zahl;
alert("Das Quadrat von " + Zahl + " = " + Ergebnis);
Eventhandler
}
Attribut in html-Tags
//-->
</script> </head>
Ausführungsbedingung
Funktionsaufruf <body> <form>
<input type=button value="Quadrat von 6 errechnen"
onLoad, onUnLoad, …
onClick="Quadrat(6)">
onClick, onMouseover, …
</form> </body>
Sprache </html>
Notation von Java inspiriert
Anweisungen
Zuweisungen
Bedingte Anweisungen, Schleifen
Funktionsaufrufe
Klammern mit {}
zahl = 0; zahl++; zahl+=1;
if (Zahl<0) zahl = 0;
while (idx<100) {…; idx++}
for(i = 1; i <= 100; i++)
Variablen
kein ordentliches Typenkonzept
Vereinbarung mit 'var'
Typ Zahl oder String
alert("Und hier ein kleiner Hinweis");
if (Ergebnis > 100)
{ Ergebnis =0; Neustart();
wird bei der ersten Zuweisung festgelegt
global oder in Funktion lokal
Objekte
selbstdefiniert
vordefiniert in Umgebung
window, document, …
Methoden zur Manipulation
Funktionen
Anweisungsblock mit Variablen
Aufruf aus anderen Funktionen und in Eventhandlern
3.2 XMLHTTPRequest
JavaScript Klasse
erstmals in IE 5
Interface für Http
ohne Benutzerinteraktion
synchron und asynchron
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;}
Properties
readystate, status
onreadystatechange
var xhReq = createXMLHttpRequest();
responseText
xhReq.open("get", "sumget.phtml?num1=10&num2=20", true);
Methoden
xhReq.onreadystatechange = function() {
open
if (xhReq.readyState != 4)
send
var serverResponse = xhReq.responseText;
...};
xhReq.send(null);
{ return; }
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
<table>
<thead>
<tr>
Syntax für Markup
<th>Vorname</th>
Semantik in XSL oder CSS
<th>Name</th>
Document Object Model DOM
baumartige Struktur der Dokumente
Zugriff auf Dokumenteninhalt (=Objekte)
Inhalt, Struktur, Stil
AJAX
</tr>
</thead>
<tbody>
<tr>
XML als ein Transfer-Format für Inhalt
<td>Donald</td>
Manipuliert DOM-Knoten
<td>Duck</td>
Einfügen, Löschen, Ändern
Browser 'rendert' Dokument
</tr>
</tbody>
</table>
4 Social Services
Kommunikation
Chat, IP-Telephony, iChat
Kommunikation einleiten
ICQ, AOL-Buddylist
Communities
Online Games
Second Life
Virtuelle Präsenz
CoBrow, lluna, …
www.zweitgeist.com
Exchange
Blogs
Flickr, YouTube, …
5 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
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