Entwickeln mit Web 2.0

Web 2.0 ist weder Hype noch Modetrend. Es steht für einen Satz konkreter und höchst attraktiver Techniken für Webentwickler, die Besuchern einer Website schnellere Reaktionszeiten, interaktivere und attraktivere Inhalte sowie neue Möglichkeiten der sozialen Interaktion bieten. Web 2.0 ist 2007 zu einem Pflichtthema geworden, über das jeder Webentwickler in Grundzügen Bescheid wissen sollte.

Artikel erschienen in Swiss IT Magazine 2007/05

     

Das Web hat sich den letzten drei Jahren enorm gewandelt. Diese eher belanglose Feststellung trifft längst nicht mehr nur auf die Web-Avantgarde zu, für die Begriffe wie Blogs, Wikis, RSS-Feeds, diggen oder Tag Clouds bereits seit Jahren zum Vokabular gehören, sondern immer mehr auch für Allerwelts-Sites, die ihren Besuchern keine trendigen Erlebnisse, sondern konkrete Vorteile wie schnellere Reaktionszeiten und das typische «Desktop-Feeling» einer GUI-Anwendung bieten wollen. Web 2.0 ist keines dieser Schlagworte, die kommen und gehen, es steht für einen Satz von Techniken und Konzepten, die zwei Dinge gemeinsam haben: Alles spielt sich im Browser ab und setzt konsequent auf den JavaScript-Standard in Kombination mit DHTML.
Irgendwelche Player oder andere proprietäre Browser-Erweiterungen spielen bei Web 2.0 keine Rolle. Und: Bei Web 2.0 geht es weniger darum, «cool» zu sein, sondern in erster Linie darum, dem Benutzer mehr Komfort bieten zu können und damit indirekt die Attraktivität einer Site zu erhöhen. Auch wenn das Web-2.0-Konzept noch relativ jung ist, einige Features, wie interaktive Bedienelemente, die aktualisiert werden, ohne dass dazu die Seite komplett neu aufgebaut werden muss, werden von den Besuchern bei datenintensiven Seite heute praktisch schon erwartet.


Ajax - die Entwicklung hat gerade erst begonnen

Der Begriff Web 2.0 mag keine klare Definition besitzen, für die dahinter stehenden Technologien gilt dies definitiv nicht. Einer der Hauptbestandteile einer Web-2.0-Site ist Asynchronous JavaScript and XML, kurz Ajax. Welche Rolle Ajax im Detail spielt, wird in den folgenden beiden Artikeln ab Seite 40 näher beleuchtet, daher nur soviel: Ajax ist enorm populär, das beweist bereits die grosse Anzahl an Ajax-Frameworks für alle Plattformen, die sich gegenseitig an zusätzlicher Funktionalität überbieten.



Aus Performancegründen und weil es für die Praxis wenig Vorteile bietet, verzichten viele Entwickler bei Ajax inzwischen auf das XML-Format und bevorzugen das JSON-Format, das mit deutlich weniger Overhead auskommt. JSON steht für JavaScript Object Notation und ist deutlich kompakter als XML. Ein JSON-Block kann über die eval-Funktion von JavaScript direkt in ein Objekt umgewandelt werden, was die Weiterarbeitung von vom Server abgerufenen Daten deutlich vereinfacht. Mit JSON versus Ajax-XML vollzieht sich eine ähnliche Entwicklung wie bei SOAP versus REST im Bereich der Web Services. Das offizielle Simple Object Access Protokoll (SOAP) erwies sich in der Praxis durch die konsequente Verwendung von XML als zu «aufgebläht», so dass grosse Sites wie Amazon dem schlankeren REST-Format (Representional State Transfer), das ohne «XML-Ver­packung» direkt auf den HTTP-Verben Post und Get aufsetzt, den Vorzug geben. Web 2.0 heisst daher auch, dass sich die Web-Gemeinde eigene Standards schafft, an die sich dann alle halten, ohne es dass es eines offiziellen Standards oder eines Industriekonsortiums bedarf. Wie stark Ajax dazu führt, dass Webseiten die typischen Elemente einer Desktop-Anwendungen erhalten, macht beispielsweise das freie Framework Qooxdoo deutlich.





Das von der Firma 1&1 entwickelte JavaScript-Framework besteht im wesentlichen aus drei Teilen – dem eigentlichen Framework, einem GUI-Toolkit und einer Ajax-Schnittstelle. Mit dem GUI-Toolkit lassen sich in kürzester Zeit mit Hilfe von Widgets (Bedienelementen) komplexe grafische Oberflächen zusammenstellen. Die Widgets des Toolkits unterscheiden sich kaum von denen typischer Desktop-Applikationen. Tastatur- und Mausunterstützung sind komplett integriert, die vom Desktop bekannten Möglichkeiten zur Tastatur-Navigation, dem Focus- und Tabhandling wie auch Drag&Drop werden unterstützt. Abmessungen und Positionen lassen sich automatisch sowie auch statisch, prozentual und flexibel beschreiben. Das Widget-Layout wird von einem Layout-Manager gesteuert. Die Oberfläche muss, wie bei Ruby on Rails, nicht zwingend durch HTML/CSS beschrieben werden. Das Aussehen einer Anwendung wird über Themes (Design-Definitionen) erledigt, die sämtliche Style-Informationen enthalten. Damit kann das Aussehen der Anwendung auch zur Laufzeit flexibel verändert werden. Das Potential solcher Frameworks wird zur Zeit in erster Linie von den typischen «Early Adaptors» genutzt, doch das wird sich mit Sicherheit in naher Zukunft ändern, zumal sich immer mehr Kunden diese Neuerungen wünschen werden. Ajax wird damit ein heisses Thema bleiben.


RSS - die Message ist die Message

RSS gilt für einige als die wichtigste Erfindung im Web nach CGI. RSS steht für Really Simple Syndication und ist ein zu 100% auf XML basierendes Format, durch das beliebige Textblöcke so strukturiert werden, dass sie zum Beispiel als Newsfeed eingesetzt werden können. RSS ist als typische «Pull-Technologie», die sich nicht selber verbreitet, sondern von einem RSS-Reader gezielt abgerufen wird, nicht auf Text beschränkt, auch Audio und Video kann Teil eines RSS-Feeds sein. RSS ist eine jener kleinen Internet-Technologien, die Anfangs eher ein Spielzeug für Avantgardisten war, und dessen gewaltiges Potential von den etablierten Medienhäusern viel zu spät erkannt wurde respektive immer noch erst ansatzweise erkannt wird. Als das scheinbar perfekte Informationsmedium hat es sich im Web längst etabliert. RSS ist eng mit den «elektronischen Tagebüchern» des
21. Jahrhunderts, den Blogs, verbunden. Damit die Leser eines Blogs erfahren, wann ein neuer Eintrag hinzugefügt wurde, abonnieren sie den RSS-Feed des Blogs. Ihr RSS-Reader sorgt dafür, dass, wie bei einem E-Mail-Programm, die neusten Einträge automatisch im Eingangskorb abgelegt werden. Auf Technorati.com, dem führenden Blog-Portal, sind nach eigener Angabe über 70 Millionen Blogs registriert, was eindrucksvoll deutlich macht, dass Blogs und RSS-Feeds inzwischen das neue Informationsrückgrat des Internets bilden und RSS eine ernsthafte Konkurrenz zu E-Mail und den leidigen E-Mail-Newslettern geworden ist. Wer sich zum ersten Mal mit dem Thema RSS beschäftigt, wird durch zahlreiche ähnlich klingende «Standards» irritiert (eine schöne Übersicht findet man unter http://diveintomark.org/archives/2004/02/04/incompatible-rss), doch ist es für Webentwickler relativ einfach, RSS-Inhalte sowohl zu produzieren als auch im Rahmen einer Website zu konsumieren. Entsprechende Komponenten gibt es für alle Web-Frameworks. Faszinierend ist RSS gleich aus mehreren Gründen. Es kann technisch gesehen genauso einfach produziert wie konsumiert werden. Längst wird RSS von allen wichtigen Browsern und E-Mail-Programmen unterstützt, so dass sich RSS-Feeds wie E-Mails im Posteingang lesen lassen (bei Outlook 2007 ist RSS integriert, für ältere Versionen gibt es komfortable Add-Ins verschiedener Anbieter). Durch Syndizierung können Betreiber von Webseiten themenverwandte Feeds zusammenführen und Portale ins Leben rufen, die automatisch stets aktuelle Inhalte anbieten.


Microformats: Visitenkarten fürs Web-2.0-Zeitalter

Nicht alles, was im Dunstkreis von Web 2.0 entsteht, wird automatisch ein Erfolg. Die Microformats sind ein solcher Fall (http://microformats.org/about). Die Idee ist simpel: Informationseinheiten, die sehr häufig ausgetauscht werden, wie zum Beispiel Visitenkarten, Termine oder Ortsbeschreibungen, werden nicht in ein umfangreiches XML-Korsett gezwängt, sondern durch ein eigenes und sehr viel kompakteres Format beschrieben. Bietet eine Webseite Termine an, lassen sich diese per Drag & Drop in den Desktop-Terminplaner übernehmen. «We need more microformats», sagte kein Geringerer als Microsoft-Chefarchitekt Bill Gates anlässlich der Web-2.0-Konferenz Mix06 im letzten Jahr. Doch genau wie das von Microsoft-CTO Ray Ozzie propagierte «Universal Clipboard», das auf der Grundlage von RSS den Datenaustausch zwischen Websites so einfach machen soll wie den über die Windows-Zwischenablage,
wird dieses Konzept nicht in dem Um­fang angenommen, wie man es aufgrund der klaren Vorzüge hätte erwarten können.
Anders als bei RSS ist bei den Microformats der Durchbruch noch nicht erzielt. Eine direkte Unterstützung im Browser, wie sie für den kommenden FireFox 3 im Gespräch ist, wird mit Sicherheit daran etwas ändern. Der erste Prototyp des «Internet Explorer 8», den Microsoft möglicherweise auf der Mix07-Konferenz im April in Las Vegas erstmalig vorführen wird (www.mix07.com), wird zeigen, wie es um die Zukunft dieser Formate bestellt ist (und wie stark das Wort des Microsoft-Chefdenkers bei seinen Entwicklern zählt).


Ruby on Rails: Entwickeln im Express-Tempo

Eines der heissesten Themen in der Webentwicklung ist seit einiger Zeit Ruby on Rails, kurz RoR. Der etwas ungewöhnliche Name hat natürlich eine Geschichte. Rails ist der Name eines Frameworks für Webanwendungen, Ruby derjenige einer noch relativ jungen Programmiersprache. Das Besondere an RoR ist der Ansatz, es dem Entwickler so einfach wie möglich zu machen und im Stile einer agilen Programmentwicklung von allen Konfigurations- und Codierungsdetails zu entlasten.
Eine RoR-Webanwendung basiert auf dem Model-View-Controller-Pattern (MVC), bei dem ein Controllermodul lediglich eine View definiert, sich aber nicht um die Details der Anzeige kümmern muss. Der Entwickler generiert zu Beginn per Aufruf einen Controller und damit eine oder mehrere Views, ohne dabei mit Details wie HTML und CSS in Kontakt zu kommen. Ist eine Datenbank involviert, was in der Regel der Fall ist, stehen automatisch Views zur Verfügung, die den Tabellen der Datenbank entsprechen, so dass diese nicht angelegt werden müssen. Nicht ganz so easy ist die Installation. Als typisches Open-Source-Framework gibt es zwar Dutzende von Webseiten, die liebevoll Schritt für Schritt alle Details beschreiben (z.B. http://wiki.rubyonrails.org/rails/pages/Tutorial), doch wehe es läuft nicht so wie beschrieben, denn dann sind technisches Hintergrund­details über die Webserver-Konfiguration erforderlich, die weit über das hinausgehen, was ein normaler Webentwickler wissen kann. Dennoch hat RoR im Web schnell seine überzeugten Anhänger gefunden, die vor allem die Zeitersparnis loben, die es gegenüber anderen Web-Frameworks bietet.


Auf dem Weg zu einer universellen Web-2.0-API

Genau wie die Physiker noch immer auf der Suche nach einer einheitlichen Weltformel sind, ist eine universelle Web-2.0-API noch nicht einmal in Ansätzen erkennbar. Von den Web-APIs der grossen Anbieter liegt Google Maps, was die Einsatzhäufigkeit angeht, ganz vorne, gefolgt mit grossem Abstand von Flickr, Amazon und YouTube (Quelle: www.programmableweb.com/apis). Für Webentwickler bedeutet eine solche API (Application Programming Interface), dass ihnen der Website-Betreiber entweder einen Satz von JavaScript-Objekten und/oder einen Satz von Webservice-Funk­tionen zur Verfügung stellt, mit deren Hilfe sie zusätzliche Funktionalitäten in ihre Website einbinden. Damit kann eine Webseite Fotos aus Flickr anzeigen, einen Amazon-Warenkorb implementieren, Landkarten mit zusätzlichen Informationen belegen, eine
E-Mail-Adresse überprüfen und vieles mehr. Das Einbinden und Aufbereiten solcher «Rohdaten», die von einer Web-2.0-API geliefert werden, wird übrigens als Mashup bezeichnet. Da die dahinter stehende Technik relativ unkompliziert und zudem kostenlos ist, kann theoretisch jeder Betreiber einer Homepage seine eigenen Mashups kreieren. Die Grenzen werden lediglich durch die eigene Kreativität gesteckt.


Google Maps - das Paradebeispiel für Web 2.0

Eines der eindrucksvollsten Beispiele für die Möglichkeiten von Mashups ist sicherlich Google Maps. Man muss es einmal selber erlebt haben, wie praktisch verzögerungsfrei nach der Eingabe einer beliebigen Adresse (Strasse, Ort genügt häufig bereits) unter
http://maps.google.com der passende Kartenausschnitt eingeblendet wird. Für alle Webentwickler, die diese Funktionalität in Webseiten integrieren möchten, gibt es die Google-Maps-API (www.google.com/apis/maps). Sie
besteht aus einer Reihe von
JavaScript-Objekten, die mit dem Abruf einer präparierten Seite vom Google-Server geladen werden. Voraussetzung ist ein Key, der auf der Google-Seite formlos zur Verfügung gestellt wird.
Rund um diese API ist inzwischen ein regelrechter Fanclub entstanden, deren Mitglieder sich durch genauso nützliche wie manchmal skurrile Mashups überbieten (http://googlemapsmania.blogspot.com). Die Crime Maps amerikanischer Grossstädte, in denen aktuell geschehene Verbrechen in den Stadtplan eingeblendet werden, sind inzwischen ein alter Hut. Wie wäre es beispielsweise mit einer Weltkarte, in der die Stationen der kommenden Welttournee der 80er-Jahre-Band The Police eingezeichnet sind (http://craigslistmap.info/indexPolice.html)? Ein Klick auf eine Markierung zeigt an, wann und wo das Konzert stattfindet. In einer echten Web-2.0-Anwendung würde natürlich zusätzlich ein Link zu einem Ticketservice und zu der Hotelkette, welche die Webseite aktuell sponsert, eingeblendet werden, und man könnte per Mausklick ein VIP-Komplettpaket buchen. Doch was nicht ist, kommt sicherlich noch. Das Besondere an einer Google-Map ist natürlich, dass sich beliebige ortsbezogene Informationen einblenden lassen. Touristikbüros können Sehenswürdigkeiten, Immobilienmakler ihre Objekte eintragen und jeder kann sich seine persönliche Sightseeing-Route zusammenstellen, die er anderen zur Verfügung stellt.
Eine einfache Möglichkeit, individuelle Maps zu erzeugen, bietet www.communitywalk.com. Google Maps ist übrigens längst nicht mehr auf unseren Planeten beschränkt. Google Maps Moon und Google Maps Mars geben die Richtung vor, weitere Planeten sollen folgen.


Web Service der Zukunft – der Mensch denkt mit

Relativ unbemerkt hat sich auch der Online-Händler Amazon ein weiteres Standbein durch ein umfangreiches Angebot an Web Services geschaffen. Den Anfang machten die E-Commerce-Services, durch die sich zum Beispiel Katalogabfragen und ein kompletter Shop in die eigene Webseite integrieren lassen. Seit kurzem gibt es die Simple Storage Services (S3), die Entwicklern auf Pay-per-Use-Basis gigantisch grosse Datenspeicher zur Verfügung stellen. Noch im Teststadium befindet sich der Elastic-Compute-Cloud-Service (EC2), bei dem sich Kunden ihre virtuelle Betriebssystemumgebung auf dem Amazon-Server einrichten können und damit stets so viel «Rechenpower» an der Hand haben, wie es die Anforderungen ergeben.







Ein wirklich faszinierender Service ist der «Mechanical Turk» von Amazon (http://mturk.amazon.com). Das Prinzip ist ungewöhnlich, aber einfach. Der Web Service liefert eine Liste von «Aufgaben», die in der Regel ein menschlicher Anwender zuvor formuliert hat (z.B. das Herausziehen von Informationen aus einem Blog-Eintrag oder das Finden von Mustern in einem Bild). Der Auftraggeber, der theoretisch auch ein Computerprogramm sein könnte, legt einen Geldbetrag fest, den der Auftragnehmer für das Abarbeiten der Aufgabe erhält. Amazon verdient an jeder Transaktion. Der «Mechanische Türke» (eine Anspielung auf den legendären «Schachcomputer» aus dem Jahre 1769) ist jedoch sehr viel mehr als eine schlichte Mini-Job-Börse. Die in der Amazon-Datenbank hinterlegten Human Intelligence Tasks (HITs) werden mit Hilfe von Methoden der künstlichen Intelligenz ausgewertet, so dass sich auf den gelösten Aufgaben auch komplexere Fragen beantworten lassen.




Populäre Onlinedienste mit Web-APIs


Fazit

Die Entwicklung bei Web 2.0 hat gerade erst begonnen. In einigen Jahren werden Ajax&Co bei den meisten Sites selbstverständlich sein. Ein «Web 3.0» ist so schnell nicht zu befürchten. Die Zukunft gehört vielleicht den «Micro-Communities», die alle Web-2.0-Merkmale besitzen und die Vorboten für die nächste Generation an Webanwendungen sein könnten.


Was sind eigentlich Tag Clouds?

Websurfer, die sich nicht erst seit gestern auf den trendigen Web-2.0-Seiten aufhalten, werden sie längst kennen, alle anderen werden sich höchstens über jene Wortansammlungen gewundert haben, bei denen viele scheinbar unzusammenhängende Begriffe unterschiedlich gross angezeigt werden. Die Idee dabei ist, dass ein Begriff desto grösser dargestellt wird, je häufiger er in einem Blog erwähnt wird, um Besuchern eine simple, aber sehr aussagekräftige Orientierung zu geben. Tag Clouds sind ein Merkmal der Blog-Software, können aber auch nachträglich über einen Generator angelegt werden, der auf einigen Webseiten angeboten wird (zum Beispiel www.tag-cloud.de).


WPF/E - Microsoft fährt zweigleisig

Dem Web-2.0-Boom und dem eigenen Ajax Toolkit ASP.Net Ajax zum Trotz, der Softwarekonzern aus Redmond setzt nach wie vor auf seine Desktoptechnologien. WPF/E heisst die mobile Variante der extrem lei­stungsfähigen GUI-Engine Windows Presentation Foundation (WPE), die Bestandteil des .Net Framework 3.0 ist und die für eine neue Generation der Windows-Benutzeroberfläche steht, die in den kommenden Jahren nach und nach die «klassischen» WinForms-Anwendungen ersetzen wird. Die Besonderheiten von WPF sind 3D-Vektorgrafik, anspruchsvolle Animationen, eine leistungsfähige Schriftdarstellung und vor allem der Umstand, dass eine WPF-Anwendung wahlweise auf dem Windows-Desktop, dank WPF/E aber auch in einem beliebigen Browser laufen kann. Eine von vielen beeindruckenden Anwendungen, die bereits mit WPF realisiert wurden, ist der New-York-Times-Reader, der als Beta-Version unter www.nytimes.com/mem/reader_regi.html zur Verfügung steht und mit dem sich die aktuelle Ausgabe der New York Times offline im gleichen Format wie die gedruckte Ausgabe lesen lässt. WPF soll Windows- wie Web-Anwendungen gleichermassen auf ein neues Niveau heben. Mit WPF/E (das «E» steht für Everywhere) steht Entwicklern eine mobile Variante von WPF zur Verfügung, die auf allen gängigen Plattformen mit allen gängigen Browsern lauffähig ist. Nach Installation einer relativ kompakten Laufzeit werden WPF-Inhalte in der Webseite angezeigt. Ähnlichkeiten zur Flash-Technologie sind nicht zu übersehen, so dass es spannend sein wird, zu beobachten, in welchem Umfang WPF/E Flash das angestammte Terrain streitig machen wird. Ein Widerspruch sind WPF/E und Ajax übrigens nicht, denn genau wie eine Webanwendung kann auch eine WPF/E-Anwendung von Ajax-Funktionalitäten Gebrauch
machen. WPF und WPF/E sind eher eine Konkurrenz für die Web-Technologie ASP.Net von Microsoft, um deren Zukunft es ist seit dem Erscheinen von Microsoft Ajax relativ ruhig geworden ist.




Artikel kommentieren
Kommentare werden vor der Freischaltung durch die Redaktion geprüft.

Anti-Spam-Frage: Was für Schuhe trug der gestiefelte Kater?
GOLD SPONSOREN
SPONSOREN & PARTNER