Auch sehr lobenswert ist die Übernahme der Suchparameter in die URL, so dass man die Suche einfach Bookmarken oder weitergeben kann. Falls einer die Filialen rund um den Bahnhof von Mainz braucht hier ist der Link ;).

Insgesamt eine wirklich sehr schönes Beispiel für eine sinnvolle Nutzung von Google Maps und einer guten Umsetzung.

Das has habe ich natürlich gleich mal mit dem Stichwort “webthreads” ausprobiert:

Viele Treffer gab es da natürlich nicht aber es wurde gefunden =).

Ein schöneres Beispiel ist dann doch unsere Bundeskanzerlin. Sucht man nach “Angela Merkel” und fängt an zu tippen taucht die gesuchte Dame recht schnell in den Vorschlägen auf – direkt hinter “Angelina Jolie” =).

Google Suggest ist nun über 155 Domains in 51 Sprachen verfügbar, wie auf dem offiziellen Google Blog zu lesen ist.

Eine mögliche Lösung um diesen Frust zu vermeiden und ein wenig Usability reinzubringen wurde bei der OpenWishes User Registrierung eine direkte Überprüfung eingebaut. Hat man den Usernamen eingegeben und wechselt in das nächste Feld wird mit einem Ajax Request im Hintergrund der Name überprüft:

Ist er schon vergeben wird dies auch direkt als Fehler angezeigt:

Ist er verfügbar geht es normal weiter:

Leider haben dieses kleine aber sehr nützliche Feature nur wenige Seiten und man testet mehrmals verschiedenste Namen bis man einen gefunden hat.

Als Alternative, leider nicht für den deutschsprachigen Raum, bietet sich auch die Webseite usernamecheck.com an. Dort kann man den gewünschten Username angeben und der Service prüft diesen dann gegen verschiedenste Webseiten.

Eine ganz nette Idee – vielleicht bau ich das mal für deutsche Webseiten oder gibt es das schon?

(usernamecheck.com via swissmiss)

(Danke an Lars Geisel =) )

Folgende Überschriften werden besprochen:

• Get rid of the refresh
• The Web doesn’t need to be real-time
• Small changes can have a big impact
• Big changes can bring big difficulties
• Unleash information from Web pages
• Leave information on Web pages
• Ajax can save your site
• Ajax can ruin your site
• Finding an Ajax-powered balance

Das schöne an dem Tool ist, dass es nicht mit Flash sondern schön mit Html und Ajax implementiert wurde (Serverseitig wird php verwendet). Als JavaScript Bibliotheken wird script.aculo.us mit Prototype verwendet. An dieser Stelle ist auch zu sehen wie man vernünftig Drag und Drop einsetzen kann (positionieren des Bildes). Auch der Slider zum verkleinern und vergrößern der Bilder ist ein schönes Beispiel in seiner Funktionsweise.

Im Gegensatz zu Google ist dieses Feature bei Yahoo! in der normalen Suche auf der Startseite eingebaut und nicht erst durch ein extra Link erreichbar.
Jedenfalls ein wirklich brauchbares Ajax Feature.

An dieser Stelle scheint doch tatsächlich Flash die günstigere Variante zu sein..

(via jj.gbtopia.com)

Das ganze hat natürlich ein “Autosuggestion” Mechanismus (siehe Google Suggest wer das noch nicht kennt) und hilft somit evtl. ein wenig bei der Namensfindung. Die folgend animierte Grafik zeigt das Vorgehen aber man kann das natürlich auch gleich live ausprobieren.

Unter anderem sind folgende Beispiele zu finden: Suckerfish HoverLightbox, Relay – AJAX directory manager, Drag Drop Shopping Cart script, An Ajax file uploads progress bar, 35mm Photo Viewer, DHTML Color Picker, Sexy Box – basic lightbox interface, Sortable – resizable – editable tables script und einige mehr.

Es wurde auch angekündigt, dass weitere folgen sollen. Wer dazu auf dem Laufenden bleiben möchte, der kann sich auch das RSS Feed abonnieren.

Man kann zwischen verschiedenen Sprachen wählen und für Leute die nicht genau wissen wie sie Spellify nutzen sollen wurde sogar ein Video erstellt ;). Das ganze ist eine Demo und natürlich noch beta. Ein Service der auch noch Google Spell Check nutzt ist Orangoo – ich hatte darüber berichtet.

Unter anderem auf der Matrix zu finden ist das Framework ajax4jsf. Dies stellt keine Komponenten bereit, so dass man es leicht einfach ignoriert oder falsch einschätzt. Statt dessen ist ajax4jsf ein relativ mächtiges Framework, welches es ermöglicht Standard Komponenten mit Ajax Funktionalität einfach anzureichern. Das heißt, zum Beispiel auf einem normalen Textfeld bei keyUp ein Ajax Request auslösen, das normale dafür vorgesehene Backing Bean auslesen oder eine Backing Bean Funktion aufrufen und anschließend bestimmte Teile der View zu aktualisieren. Oder ein Formular mit einem Ajax Request zu versenden und dennoch die normalen Validierungsregeln zu verwenden. Das ganze ist mit dem Framework ohne eine Zeile JavaScrip und ohne Mehraufwand im Backend möglich. Jedenfalls ein sehr interessantes und nützliches Framework und es lohnt sich das mal anzuschauen.

Als weitere interessante Ajax Komponenten Bibliothek stellt sich ICE Faces heraus denn sie haben kostenlos eine große Auswahl an Ajax Komponenten (siehe Demo Seite) zu haben, die auch noch Open Source sind. Zumindest scheint es so, als ob sie eine große Bereicherung wären. Leider greifen ICE Faces so in das JSF Geschehen ein, dass bei Verwendung anderer Bibliotheken und Frameworks wie z.b Facelets und MyFaces bzw Tomahawk ein großer Mehraufwand zu tätigen ist um sie ohne Probleme zum laufen zu bekommen. Am Ende ist es gescheitert, weil ICE Faces ihr eigenes JavaScript mitbringt und an jedes JavaScript Objekt die Methoden associateWith und asEnumerator anhängt und so die eigentlich bwz. vom Entwickler eingebundene verwendete JavaScript Bibliothek durcheinander bringt – in diesem Beispiel war das die JavaScript Bibliothek jQuery. Das Problem wurde im ICE Faces Forum beschrieben aber bis heute kam noch keine Antwort. Aus diesem Grund wurde es beim dem Test aufgegeben die ICE Faces in die Umgebung einzubinden. Aber ich schätze, wenn man keine zusätzlichen JavaScript Bibliotheken eingebunden hat dürfte dem Verwenden der ICE Komponenten nichts mehr im Wege stehen.

Also für jeden der mit JSF entwickelt und Ajax Komponenten oder Ajax Funktionalität in seine Anwendung einbauen möchte der kann sich mit der JSF Ajax Matrix einen schönen Überblick der vorhandenen Bibliotheken schaffen.

Die Produktpalette lässt sich wie im Google Maps Stil durchwandern indem man hineinzoomt und sich immer zwischen Produktgruppen entscheidet. Das Mausrad kann dabei auch verwendet werden. Hat man einen Artikel gefunden kann man ihn Speichern, per eMail versenden oder natürlich sofort kaufen.

Ich finde die ganze Seite ziemlich cool gemacht und es lohnt sich da mal durchzusteppen.

The demo utilizes several technologies including: IIS7, ASP.NET Ajax Extensions, Linq, Windows Communication Foundation, Windows Workflow Foundation, Windows Presentation Foundation, Windows Powershell, and the .NET Compact Framework.

Auf dinnerNow.net findet man dazu weiterführende Informationen und dort kann auch der Source Code zu der Anwendung heruntergeladen werden. Am interessantesten ist aber das Video mit dem man sich eine Übersicht der Anwendung und deren Funktionalität machen kann. Dieses kann direkt online als Flash Video angesehen oder aber auch als wmv Datei heruntergeladen werden.

Lustig ist der Tab “Try DinnerNow“, der einem nach dem selektieren sagt, dass man es noch nicht ausprobieren kann – schade.

To me understanding web development starts with understanding event handling, model & data services and how to manipulate the DOM. This mental framework is used in this talk.

Und hier die Präsentation, die auf SlideShare zu bewundern ist:

Das neueste Feature, welches über die Ajax Search API zugänglich ist Google Ajax News Bar, wie über den Google Ajax Search API Blog zu erfahren war.

Mit dieser News Bar kann man anhand von Schlagwörten die neuesten von Google gefundenen Nachrichten direkt auf die eigene Seite bringen. Für die ganz schnelle Variante genügt der Aufruf des Wizards aber auch der Programming Guide ist einfach verständlich.

Diese hier eingebettete Newsbar wurde in einer Minute mit dem Wizard erzeugt und kann auch direkt aufgerufen werden. Zudem kann noch konfiguriert werden ob horizontale oder vertikale Ausrichtung, wie viele News angezeigt werden sollen oder nach welchen Schlagwörtern gesucht werden soll.

Also für alle die an News auf der eigenen Seite interessiert und sich nicht selbst um deren Aktualisierung kümmern wollen ist das neue Feature sehr zu empfehlen.

Also viel Spass bei der Peepshow =)

Ein weiteres sehr nettes Feature ist die Sternenkarte welche über dir bzw. deiner Position zu finden ist. Dazu einfach auf den Button mit der Zeit klicken und die eigene Position angeben. Anschließend können die Sterne und deren Daten erkundet werden die aktuell über dir stehen.

Wer sich nicht direkt zurecht findet kann sich das aufklärende Getting Started oder FAQ ansehen.

Für Sternen interessierte besteht die Möglichkeit sich im Forum auszutauschen oder Fragen zu stellen.

Viel interessanter, wie ich finde, ist die bereitgestellte API, mit der man sich direkt Daten zu einem Stern holen kann oder eine dynamische Sternenkarte auf seine eigene Seite einbinden kann. Das das Einbinden sehr einfach und schnell geht kann man im folgenden Beispiel sehen:

Alles in allem ein wirklich sehr gut gemachtes Projekt, bzw. Seite. Viel Spass beim Sterne suchen.

1. Mastering Ajax, Part 1: Introduction to Ajax
   Einführung in Ajax unter der Verwendung von HTML, JavaScript, DHTML und DOM.
   
2. Mastering Ajax, Part 2: Make asynchronous requests with JavaScript and Ajax
   Erste Interaktion zum Server mit Hilfe von Ajax.
   
3. Mastering Ajax, Part 3: Advanced requests and responses in Ajax
   Es wird tiefer in den Ajax Request gegangen und die verschiedenen Status, Codes und das XMLHttpRequest Objekt erläutert.
   
4. Mastering Ajax, Part 4: Exploiting DOM for Web response
   Wichtig ist es sich mit dem Document Object Model (DOM) auszukennen und hier wird tiefer darauf eingegangen.
   
5. Mastering Ajax, Part 5: Manipulate the DOM
   Nachdem man das DOM nun kennengelernt hat soll man sehen wie man es verändern und mit ihm arbeiten kann.
   
6. Mastering Ajax, Part 6: Build DOM-based Web applications
   Es wird eine kleine Beispielanwendung erstellt in der man das DOM manipuliert.
   
7. Mastering Ajax, Part 7: Using XML in requests and responses Part 1
   Ajax mit XML verwenden – was passiert beim XMLHttpRequest und wie gelangt man an die Daten mit Hilfe von XML?
   
8. Mastering Ajax, Part 8: Using XML in requests and responses Part 2
   Die XML Antwort muss mit JavaScript verarbeitet werden.
   
9. Mastering Ajax, Part 9: Using the Google Ajax Search API
   Google Search bietet eine Ajax Schnittstelle (ich berichtete) und hier wird beschrieben wie man sie nutzen kann.

Ich persönlich finde die Artikel ganz nützlich und vor allem die ersten dienen sehr gut der Einführung. Was noch fehlt ist ein Artikel der die Verwendung der JavaScript Object Notation (JSON) beschreibt, aber das kann ja noch kommen.

Viel Spass beim durcharbeiten, lesen und ausprobieren.

Die Ajax Variante hat eine Vorschau der Schlagwörter sobald man sie eingibt, welche auch auf der linken Seite unterhalb des Eingabefeldes gelistet werden. Nachdem man eines ausgewählt hat, werden ähnliche Schlagwörter mit aufgelistet, die man sich genauer ansehen kann.
Das Ergebnisfeld wird natürlich dynamisch mit Ajax neu aufgebaut und nett ein- bzw. ausgeblendet wenn sich die Daten ändern.

Insgesamt finde ich die Seite eine wirklich gelungene Umsetzung von einer herkömmlichen Seite auf eine Ajax Variante von Ask.com.