Pac-Man auf Google weiterhin online mit Zweispielermodus
Google hatte bereits angekündigt, dass das Pac-Man Logo nicht wie sonst nur 24 Stunden, sondern 48 Stunden online sein wird, da es zu cool ist um nach einem Tag schon wieder zu verschwinden. Es ist auch weiterhin im Zweispieler-Modus spielbar, wobei man zum Starten des Zweispielmodus einfach auf die “Insert Coin” Schaltfläche klicken muss:
Ihr könnt ja mal versuchen “stereo” zu spielen. Sofern man den Pac-Man und die Pac-Woman (oder wie man den zweiten Spieler nennt) immer auf der Seite lässt, mit dessen Hand man ihn steuern ist das garnicht man so schwer. Nachdem ich heute mal mehr als die ersten beiden Levels gespielt habe (wobei sich natürlich das Logo nicht ändert), habe ich auch eine Zwischensequenz gesehen:
Die Bilder zur Zwischensequenz sind mir auch schon im Sprite zum Spiel aufgefallen, welches alle Bildelemente enthält.
Wer das Spiel auch jetzt noch einmal spielen möchte, kann es unter folgendem Link noch immer erreichen: http://www.google.com/pacman/.
Wie lange das Spiel dort noch zur Verfügung stehen wird kann ich euch aber leider nicht sagen. Also am besten gleich mal ausprobieren, wer das Spiel die letzen beiden Tage auf Google verpasst hat.
Eilmeldung: Pac-Man bei Google
Eigentlich hatte ich für heute schon einen tollen Artikel fertig. Aber gerade habe ich erfahren, dass es heute bei Google ein geniales Logo gibt. Heute ist der 30. Geburtstag von Pac-Man (gut eigentlich ist er morgen am 22. Mai, aber da Pac-Man in Japan erfunden wurde, ist er bei uns schon jetzt). Google hat sich das mal wieder zum Anlass genommen ein Logo dafür zu erstellen:
Tutorial: Drag-and-Drop mit Scriptaculous – Teil 2: Droppables
Nachdem wir uns in Teil 1 des Tutorials mit der Draggable Klasse beschäftigt haben, wenden wir uns heute seinem Bruder der Droppables Klasse zu. Mit ihr können wir auf ein aufgenommenes Element reagieren. Eine typische Anwendung sind Einkaufkörbe auf Online-Shops. Ich möchte daher einen einfachen Einkaufswagen demonstieren.
Der Quellcode für dieses Beispiel
Zuerst einmal wieder der Quellcode für dieses Beispiel. Ich werde wie auch schon im ersten Teil des Tutorials die wichtigen Zeilen etwas genauer erklären. Die Zeilen 1-34 enthalten das grundlegende Gerüst der HTML-Seite sowie die Stylesheets, auf die ich nicht näher eingehen möchte:
Tutorial: Drag-and-Drop mit Scriptaculous – Teil 1: Draggable
Heute möchte ich mein angekündigtes Tutorial über Drag-and-Drop starten. Das Ziel dieses Tutorials ist der Nachbau einer dynamischen Newsseite, wie ich sie in meinen Artikel Öffentlich-rechtlich und vorbildhaft – So muss eine Web 2.0 zu Olympia aussehen vorgestellt habe. Da eine solche Seite mit vielen verschiedenen Techniken zusammengesetzt ist, werden wir immer kleine Teile auf dem Schritt zur fertigen Seite nachvollziehen.
Im ersten Teil geht es um die Grundlage einer Seite mit Drag-and-Drop. Wir verwenden für dieses Tutorial die Drag-and-Drop Funktionalität von Scriptaculous, welches eine Erweiterung des Prototype Frameworks ist. Um die hier gezeigten Funktionen selbst nachprogrammieren zu können benötigt ihr also zuerst einmal die beiden Frameworks.
Öffentlich-rechtlich und vorbildhaft – So muss eine Web 2.0 zu Olympia aussehen
An dieser Stelle muss ich mal ein Lob loswerden. Zurzeit laufen ja die Olympischen Winterspiele in Vancouver und Whistler. Und natürlich ist die Präsenz im Web auch extrem hoch. Im Fernsehen sind die Spiele vor allem in ARD und im ZDF im Free-TV und bei den digitalen Kanälen der beiden Öffentlich-rechtlichen zu sehen. Das erwartet man auch, denn dafür zahlen wir ja auch brav unsere Gebühren.
Was man nicht unbedingt erwartet und was mich sehr überrascht hat ist der sehr gute Web 2.0 auftritt. Es ist immer sehr gut zu sehen, auf welchen Kanälen gerade etwas live zu sehen ist und was gerade für neue Entscheidungen gefallen sind. Außergewöhnlich ist allerdings, wie dynamisch sich die Seite an die eigenen Interessen anpassen lässt:
Zeilen-Duplizierer mit AutoComplete Felder nutzen
Ich bekam heute in einem Kommentar die Frage gestellt, ob mein Zeilen-Duplizierer aus dem Beitrag: Einfacher Zeilen-Duplizierer mit Prototype auch auf Feldern funktioniert, die die Scriptaculous Ajax.AutoCompleter Funktion verwenden.
Ich nutze den Duplizierer selbst in einem Formular, das solche Felder enthält. Meine erste Fassung entsprach dabei dem Einzeiler aus dem vorherigen Beitrag. Das Problem dabei ist allerdings, dass die AutoCompleter Funktion beim Erzeugen mit dem Felder verknüpft wird, auf das sie angewendet werden soll. Wenn man nun dieses Feld kopiert wird nicht eine neue Instanz des Ajax.AutoCompleter erzeugt, sondern die Referenz auf das alte Feld mit kopiert. Ein Eintrag im neu erzeugten Feld aktiviert also die AutoCompleter Funktion des vorherigen Feldes.
Blog oder Website fit machen für den IE6
Wie auf vielen News-Seiten zu lesen ist stellt Google ab Mitte des Jahres offiziell den Support für den Internet Explorer in der Version 6.0 ein. Unter den Besuchern meines Blog befindet sich zwar nur ein verschwindend geringer Prozentsatz an IE6 Nutzern, aber auch diese sollten meine Website einigermaßen ansehnlich präsentiert bekommen.
Das größte Problem ist oft, dass die schönen Themes nicht auf den IE6 angepasst wurden und daher zu sehr unschönen Darstellungen führen. Ich habe in einer virtuellen Maschine noch eine Installation vom Internet Explorer 6 laufen und damit mal selbst meinen Blog getestet. Das Ergebnis sah leider wie folgt aus:
Google Maps Suggest – Adress-Autovervollständigung mit Scriptaculous
Viele nutzen Autovervollständigungen auf ihrer Website. Es ist nicht nur eine sehr beeindruckende Technik, sondern zudem eine sehr nutzerfreundliche. Zusätzlich kann sie dazu dienen, dass in einem Formular möglichst gültige Werte gespeichert werden. Selbstverständlich müssen alle Daten serverseitig erneut überprüft werden.
Ich möchte heute zeigen, wie einfach es mit Scriptaculous möglich ist, eine Autovervollständigung mit Google-Maps-Adressen umzusetzen. Da man per AJAX nicht auf fremde Website einen AJAX-Request durchführen kann, müssen wir ein Skript als Schnittstelle zwischen Google Maps und unserer Website verwenden. Fangen wir also dieses Mal mit der serverseitigen Script an:
Die Grenzen der Frame-Weiterleitung sprengen
Viele Hoster bieten günstige Domains ohne Webhosting Komponenten an. Bei einigen Hoster wie z.B. Strato handelt es sich aber leider nur um Domains mit der Möglichkeit der Frame-Weiterleitung. Das ist aber teilweise vor der Bestellung nicht zu sehen.
Manch einer wird sich eventuell darüber freuen, da er irgendwo ein kostenloses Hosting mit einer sehr langen URL hat und durch die Frameweiterleitung den Besuchern immer eine kurze Domain präsentieren kann. Doch die Sache hat auch ihre Haken.
Die magische select() Funktion!
Bei meinem vorherigen Post zum Zeilen-Duplizierer stand ich vor dem Problem, dass ich Elemente eines bestimmten Tags innerhalb eines ausgewählten DOM-Elements finden musste. Da ich hierfür in den Utility Methods nicht gefunden habe, musste ich die Funktion getElementsByTagName() verwenden. Alleine hiermit konnte ich aber noch immer nicht auf die Elemente zugreifen. Dazu musste ich den Aufruf noch mit der $A() Funktion verwenden. Der gesamte Aufruf für die drei Formularfelder sah dann wie folgt aus:
