• Was ist Web 2.0?
• Beispiel 1: Karten mit der Google Maps API einbinden
• Beispiel 2: Google Ajax Search API
• Prototype und Scriptaculous
• Beispiel 3: Tooltips mithilfe von tooltip.js
• Beispiel 4: Bildergallerie mit Lightbox 2

Immer häufiger ist der Begriff Web 2.0 zu hören und zu lesen. Doch was ist darunter eigentlich zu verstehen? Dass es sich dabei um eine bestimmte Software, eine Bibliothek oder gar Programmiersprache handelt ist ein häufiges Missverständniss, das sich vermutlich durch den Begriff an sich aufdrängt. Das World Wide Web basierte ursprünglich auf statischen HTML-Seiten, die ins Netz eingestellt und gelegentlich bearbeitet bzw. erneuert wurden. Um die wachsende Menge an Seiten effizient bearbeiten und managen zu können, wurden Content-Management-Systeme und Datenbank-basierte Systeme entwickelt, die während der Laufzeit dynamische Seiten mit aktuellen Inhalten erzeugen. Web 2.0 ist als ein Oberbegriff für die Beschreibung neuer interaktiver Techniken und Dienste und einer, durch diese Dienste hervorgerufene, geänderte Wahrnehmung des Internets zu sehen. Geprägt wurde der Begriff durch Dale Dougherty (O'Reilly) und Graig Cline (MediaLive), die gemeinsam eine Konferenz planten. Diese erste Web 2.0-Konferenz fand im Oktober 2004 statt und wird seither jährlich wiederholt.

Technisch gesehen bezeichnet der Begriff Web 2.0 eine Kombination von Technologien, die teilweise bereits Anfang der 90er Jahre entwickelt wurden. So existierten Technologien, welche dem Ajax-Konzept zugrunde liegt, in vergleichbarer Form schon seit etwa 1998. Die Verbreitung dieser Technologien wurde jedoch oft durch unterschiedlichste Umstände (fehlende Dokumentationen, mangelhafte Browserunterstützung, ...) gehemmt. Die Möglichkeiten, die sich durch die Kombination von Technologien wie Ajax, DHTML, JavaScript, CSS, ... öffnen sind spätestens seit Googles GMail, Google Personalized Homepage, oder Ajaxwrite kein Geheimnis mehr. Weitere Beispiele für die Anwendung von Web 2.0 Technologie sind beispielsweise Weblogs oder Wikis, bei denen eine Trennung von Editoren und Nutzern eigentlich nichtmehr vorhanden ist.

Vielleicht denken Sie sich jetzt, Schön dass es Web 2.0 gibt, aber was bringt mir das alles? Zugegeben, nicht jeder wird eine Wiki auf seiner Webseite brauchen und ein Mailinterface a'la Google zu schreiben streichen wir vorerst vielleicht auch wieder. Den Einstieg in eine sinnvolle Nutzung der neuen Technologien zu finden ist jedoch nicht so schwer, wie oft angenommen. Viele fertige Scripte oder Bibliotheken sind mittlerweile entstanden, die Ihnen die Entwicklungsarbeit erleichtern können. Selbst wenn Sie bisher nur wenig über JavaScript oder Ajax wissen, so lassen sich doch in kurzer Zeit und ohne grossen Aufwand eindrucksvolle Effekte erzielen. Einige der beeindruckendsten Web APIs, Frameworks und Scripte werden hier kurz vorgestellt.

Beginnen wir mit einem für den Endanwender unkomplizierten, aber doch beeindruckenden Beispiel. Nur zu oft ist es nötig, Wegbeschreibungen oder Anfahrtskarten auf der Webseite bereitzustellen. Doch ergibt sich das Problem, dass Kartenmaterial urheberrechtlich geschützt, und damit oft teuer ist. Der Start des Google eigenen Kartendienstes war zum einen deshalb ein grosser Erfolg, weil seither Karten für jedermann bereitgestellt werden und zum anderen, da der Bedienkompfort von Google Maps neue Massstäbe setzte. Mit der Google Maps API ist es mittlerweile für jedermann möglich, einen Kartenausschnitt auf der eigenen Webseite einzufügen, wie Sie am folgenden Beispiel erkennen können.

Wenn Sie selbst einen Kartenausschnitt auf Ihrer Webseite einfügen möchten, benötigen Sie nichts weiter als einen kostenlosen Google-Account. Auf der Google Maps API Webseite erhalten Sie dann einen persönlichen API Key, der Sie berechtigt, auf das Kartenmaterial zuzugreifen. Selbstverständlich ist es vollkommen Ihnen überlassen, die größe des Kartenausschnitts, das angezeigte Gebiet, den Zoomfaktor und andere Einstellungen festzulegen. Es ist auch möglich Wegpunkte oder andere Informationen in die Karte einzufügen. Auf der Google Webseite finden Sie eine Vielzahl an Beispielen und Modifikationsmöglichkeiten.

Bei Google wird zur Zeit an einer Ajax basierten Such API gearbeitet, die sich in jede beliebige Webseite integrieren lässt. Damit soll es zum Beispiel möglich sein, Informationen der Webseite mit aktuellen Suchergebnissen vergleichen zu können. Das Projekt befindet sich im Entwicklungsstadium weshalb es durchaus noch zu Änderungen kommen kann. Trotzdem haben die Google Entwickler bereits ein beeindruckendes Resultat Ihrer Arbeit vorzuweisen, wie Sie am folgenden Beispiel unschwer erkennen können. Die Google Search API unterstützt verschiedene Google Services (Web Search, Local Search, Video und Blog Search). Wenn Ihre Webseite beispielsweise einen Blog oder ähnliches beinhaltet, wodurch Benutzer der Seite den Inhalt ändern können, dann ist die Google Such API eine willkommene Hilfe, da sich Suchinformationen direkt übernehmen lassen. Um die Google Ajax Search API auf Ihrer Webseite einzubinden benötigen Sie einen kostenlosen Google Account und ein API Key, den Sie auf der Google Webseite erhalten. Dort finden Sie auch weitere Informationen zum Projekt sowie eine ausführliche Dokumentation.

Zwei Schlüsselbegriffe für die folgenden Beispiele sind das Prototype Framework, das in einem eigenen Kapitel behandelt wird und die Scriptaculous Effect Bibliothek, die von Thomas Fuchs bereitgestellt wird. Bei Prototype handelt es sich um ein Standardkompatibles JavaScript Framework, das von Sam Stephenson entwickelt wurde, um die Arbeit mit JavaScript und Ajax zu erleichtern. Prototype liegt zur Zeit in der Version 1.4.0 vor und kann von der Webseite des Entwicklers bezogen werden. Scriptaculous ist eine Effect Bibliothek, die ebenfalls unter einer freien Lizens zur Verfügung gestellt wird und auf dem Prototype Framework basiert.

Wenn Sie selbst bereits JavaScript nutzen, werden Ihnen Prototype und Scriptaculous möglicherweise eine willkommene Hilfe bei Ihrer Arbeit sein. Einen Überblick über die Funktionalität von Prototype erhalten Sie im Kapitel Prototype. Doch auch wenn Sie absolut nichts über JavaScript wissen, sollten Sie in der Lage sein, alle der unten aufgeführten Beispiele in Ihre Webseite zu integrieren.

Da die folgenden Beispiele auf Prototype und Scriptaculous basieren, ist der erste Schritt das herunterladen und einbinden dieser Scripte.

Prototype herunterladen
Scriptaculous herunterladen

Haben Sie vielleicht schon einmal eine Webseite bewundert, die auf wundersame Weise kleine Tooltip-Kästen geöffnet hat, wenn man auf einen entsprechenden Link geklickt hat? Dank tooltip.js ist es mittlerweile ohne tiefgreifendes Vorwissen möglich, Tooltips in die eigene Webseite zu integrieren. Einen kleinen Vorgeschmack bekommen Sie, wenn Sie auf die unten stehenden Links klicken.

Hier Klicken Information Dies ist ein einfacher Tooltip. Er verschwindet, wenn Sie auf eine freie Stelle der Webseite klicken.

Hier Klicken Überschrift Viel Text .... Blaaablabla

Das hier verwendete Tooltip Script wurde von Davey Shafik geschrieben und kann auf der tooltip.js Webseite bezogen und verwendet werden. Ausser dem Tooltip Script benötigen Sie noch oben erwähntes Prototype Framework und die Scriptaculous Effect Bibliothek.

Einbinden von Tooltip.js in Ihre Webseite


Nachdem Sie die Skripte in Ihre Webseite integriert haben, können Sie Toolboxes wie im folgenden Beispiel verwenden.


Sie können Tooltips an jeder beliebigen Stelle auf Ihrer Webseite platzieren. Erstellen Sie dafür einfach ein Element, das einen Tooltip zeigen soll, wenn es geklickt wird. Unmittelbar danach setzen Sie einen <div> der Klasse tooltip, in dem Sie beliebigen Inhalt darstellen können. Das Design Ihrer Toolbox können Sie nach eigenen Wünschen per CSS anpassen. Auf der Webseite des Entwicklers finden Sie weitere nützliche Informationen zu Tooltip.js. Dort wird auch erklärt, wie Sie erreichen, dass Ihr Tooltip der Maus folgt, oder nach einer bestimmten Zeit von alleine verschwindet.

Bilder gibt es auf fast jeder Webseite, doch oft gilt es das Problem zu lösen, diese Bilder in einer akzeptablen Größe darzustellen. Befinden sich viele große Bilder auf der Webseite steigt die Ladezeit, doch wenn man alle Bilder sehr klein darstellt, wünscht man sich zusätzlich eine kompfortable Möglichkeit, die Originalgröße zu sehen, ohne dabei auf einer neuen Seite zu landen und unter Umständen sogar über den Back-Button des Browsers zurücknavigieren zu müssen.

Lightbox 2 bietet hier eine kompfortable Lösung. Klicken Sie einfach eines der Bilder an, und sehen Sie selbst.



Wenn Sie Lightbox auf Ihrer Webseite benutzen wollen, benötigen Sie dazu das oben erwähnte Prototype Framework. Ausserdem benutzt Lightbox 2 die Scriptaculous Effect Bibliothek, die Sie auf der Entwicklerwebseite herunterladen können. Zu guter letzt fehlt noch das Lightbox 2 Script, das Sie auf der Lightbox 2 Webseite finden. Auf dieser finden Sie auch weitere Informationen zum Lightbox Projekt und haben die Möglichkeit eine Spende an die Entwickler zu leisten.

Einbinden von Lightbox 2 in Ihre Webseite


Nachdem die Scripte und das Lightbox Stylesheet in Ihre Webseite integriert sind, und Sie die zugehörigen Bilder in einem Verzeichnis Ihrer Webseite abgelegt haben, können Sie Lightbox 2 wie folgt benutzen

Dieses Dokument entspricht den aktuellen HTML / CSS Standards.