Da ich aber, wie in meinem Artikel Internet Explorer 6 unter Windows 7 nutzen mit dem Windows XP Mode beschrieben habe, selbst noch eine Installation des IE6 auf meinem Laptop laufen habe, werde ich euch dann berichten, ob die Dienste noch nutzbar sind. Auf der Homepage von YouTube ist für Nutzer des Internet Explorers schon länger ein Hinweis zu sehen, der zum Update des Browsers auffordert:

Interessant ist hierbei auch, dass die Reihenfolge der vorgeschlagenen Browser bei jedem neuen Laden der Seite zufällig neu verteil wird. Genau das hat man ja auch Microsoft bei der aufgezwungenen Browserauswahl für Windows 7 gefordert.

Nachdem nun aber nicht nur Google dem IE6 abschwört, sondern auch in letzter Zeit immer mehr Berichte über Sicherheitsprobleme in fast allen Medien die Runde machen ist zu hoffen, dass der Internet Explorer 6 das Jahr 2010 nicht überleben wird. Es sollte mittlerweile auch dem letzten Admin klar sein, dass dieser in die Jahre gekommene Browser keine Zukunft mehr hat. Die vielen Unternehmen, die noch am Browser festhalten, weil es speziell angepasste Intranet-Lösungen dafür gibt sollten sich ernsthaft fragen, wie seriös ein Anbieter solch einer Software noch sein kann, wenn es mittlerweile schon zwei Nachfolgeversionen des IE6 gegeben hat. Die Zeit zum umstellen der Software war also sehr wohl da. Jeder von euch, der schon einmal eine Website aus den IE6 Zeiten auf den IE7 portiert hat wird mir wohl zustimmen können, dass die Anpassungen marginal waren. Das optimieren von Websites an den IE6 ist aber bis heute eine Königsdiziplin für Webdesigner und eine der sinnlosesten und zeitraubenden oberdrein.

Ich sehe im Internet Explorer 8 einen großen Schritt von Microsoft in die richtige Richtung. Der Internet Explorer in Version 9 soll dann den anderen standardkonformen Browsern in nichts mehr nachstehen. Mal sehen, was aus dieser Ankündigung am Ende wird. Aber da der Umstieg vom IE7 auf den IE8 und später den IE9 keine großen Hürden darstellen sollte ist zu hoffen, dass wir Webentwickler dann mehr Zeit für interessantere Dinge haben werden.

P.S. Bei all dem schlechten Gerede über den IE6 wollte ich noch erwähnen, dass ich heute die Umarbeitung des Themes meines Blog für den IE6 abgeschlossen habe. Alle transparenten PNGs sind nun in transparente GIFs konvertiert. Alle Nutzer die noch dazu gezwungen sind den IE6 zu nutzen können meinen Blog nun auch in all seiner Pracht genießen.

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:

Quelle: olympia.ard.de

Wie ihr auf dem ersten Screenshot sehen könnt können die verschiedenen Bereiche ausgelendet werden. Die Einstellungen werden hierbei in einem Cookie gespeichert, sodass die Einstellungen bei einem erneuten Besuch erhalten bleiben.

Eine andere Möglichkeit die Seite anzupassen besteht darin die verschiedenen Elemente per Drag-and-Drop zu verschieben. Dies geht genauso flüssig und unproblematisch wie man es auch von iGoogle oder ähnlichen Seiten gewohnt ist. Auch hier werden die Anordnungen in demselben Cookie gespeichert:

Quelle: olympia.ard.de

Ebenfalls sehr nett gemacht ist die Mediabox, die sehr an die Steuerung von diversen MP3-Playern mit Albumansicht erinnert. Einige Inhalte seinen außerdem erst dann geladen zu werden, sobald der Benutzer an die entsprechende Stelle scrollt.

Einige von euch werden sich jetzt fragen wieso ich einen solchen Artikel geschrieben habe. Einerseits um wirklich mal ein Lob an einen sehr guten Internet Auftritt loszuwerden. Andererseits aber auch um einen kleinen Überblick zu geben, was alles mit recht einfachen Mitteln möglich ist. Dem Quellcode konnte ich entnehmen, dass die ARD auf das JavaScript-Framework MooTools setzt.

Ich möchte diesen Artikel zum Einstieg für eine kleine Reihe rund um Drag-and-Drop Funktionen und andere oft gesehene Techniken zu nehmen. Im ersten Teil dieser Reihe werde ich auf die Grundlagen von Drag-and-Drop eingehen und diese am Beispiel des Scriptaculous Frameworks zeigen. Anschließend werden ich dann zeigen, wie man per Drag-and-Drop Elemente sortieren kann. In einem weiteren Teil geht es dann vermutlich um die Kombination der Sortierung mit AJAX.

Wer jetzt Lust bekommen hat sich das Ganze mal live anzusehen kann das auf der Olympia Website der ARD tun. Und das ZDF? Ja, das möchte ich nicht unerwähnt lassen. Auch hier gibt es viele Informationen rund um die WM und auch Livestreams. Aber die Seite ich nicht so dynamisch wie die der ARD. Besser gelöst finde ich hier aber der Liveticker. Dieser bekommt zwar die gleichen Einträge wie der bei der ARD, aber er aktualisiert sich von selbst und stellt auch sehr schön die aktuellen Zwischenergebnisse dar. Er läuft bei mir zurzeit fast ständig im Hintergrund. Also auch hier solltet ihr auch mal die Olympia Website des ZDF ansehen.

Ich hoffe ihr freut euch auf die kleine Tutorialreihe. Ich würde mich aber auch über eure Kommentare zu den Websites freuen.

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.

Um dieses Problem zu lösen hatte ich die erweiterte Funktion mit den beiden Callback-Funktionen erstellt. Damit ist es möglich die Referenz zum vorherigen Feld zu lösen und eine neue Instanz des Ajax.AutoCompleter nach dem Erzeugen der Kopie zu erstellen. Hier aber zuerst noch einmal die Funktion selbst. Ich habe mittlerweile auch eine Option zum Fokussieren des ersten Feldes in der Kopie hinzugefügt:

function addRow(selector, options){
	var lastRow = $$(selector).last();
	var newRow = lastRow.cloneNode(true);
	if (options.reset) {
		newRow.select('select', 'textarea', 'input').each(function(elm){
			elm.clear().checked = '';
		});
	}
	if(options.beforeInsert) options.beforeInsert(newRow);
	lastRow.insert({'after': newRow});
	if(options.afterInsert) options.afterInsert(newRow);

	if (options.focusFirst) {
		newRow.select('input', 'select', 'textarea').first().focus();
	}
}

Um die Ajax.Autocompleter Funktion nutzen zu können benötigt jedes Feld eine eindeutige ID. Nehmen wir also an, wir haben folgendes erstes Feld für unser Formular (hier ein Beispiel aus dem Artikel: Google Maps Suggest – Adress-Autovervollständigung mit Scriptaculous):

<form id="addressform" action="address_save.php" class="niceform">
	<fieldset>
		<legend>Choose an address</legend>
		<dl>
			<dt><label for="address">Address:</label></dt>
			<dd><input type="text" id="address" name="address[]" style="width: 300px;" /></dd>
		</dl>
	</fieldset>
	<fieldset>
		<input type="submit" value="Send!" />
	</fieldset>
</form>
<div id="adresse_choices" class="autocomplete"></div>
<script type="text/javascript">
	new Ajax.Autocompleter('address', 'adresse_choices', 'get_addresses.php');
</script>

Wichtig sind hierbei natürlich die eckigen Klammern am Ende des Name Attributs, damit auch alle kopierten Werte mitübertragen werden. Damit wir einer Kopie dieses Feldes eine neue Instanz hinzufügen können, müssen wir beim Kopieren auch die ID verändern. Dazu schreiben wir uns eine kleine Callback-Funktion, die genau das erledigt:

function activateAutocomplete(newRow){
	var addressInput = $A(newRow.select('input')).first();
	addressInput.id += 1;
	addressInput.stopObserving();
	new Ajax.Autocompleter(addressInput.id, 'adresse_choices', 'get_addresses.php');
}

In der 2. Zeile selektieren wir das erste Element innerhalb der neuen Zeile (wir nehmen hier also an, dass es sich dabei um das AutoCompleter Feld handelt). Diesem fügen wir in der 3. Zeile zusätzlich zur ID eine 1 hinzu. Es entstehen also Felder nach dem Muster "address1", "address11" usw. Das reicht aus um die Felder genau zu referenzieren.
In der 4. Zeile kommt die schon angesprochene Funktion zum Einsatz, die das Autocomplete für das Feld deaktiviert. Zu guter Letzt erzeugen wir eine neue Instanz des Ajax.Autocompleter. Wir können dabei als zweiten Parameter dasselbe DIV Element für die Vorschläge verwenden, da es ja nicht möglich ist, gleichzeitig in zwei Felder etwas einzutippen. Das DIV wird automatisch durch Scriptaculous unter das Feld positioniert, in dem es verwendet wird.

Damit das ganze nun auch dupliziert werden kann, fügen wir noch einen entsprechenden Link ein. Dieser muss dann die Callback-Funktion als zweiten Parameter in der Funktion erhalten. Ich verwende hier ein SPAN Element mit einem onclick Event. Es geht aber auch mit einem gewöhnlichen Link:

<span class="add" onclick="addRow('#addressform dl', {reset : true, afterInsert: activateAutocomplete})">Adresse hinzufügen</span>

Es wird durch den Selektor "#addressform dl" die gesamte Definition inklusive des Label kopiert. Ihr könnt aber auch eine andere HTML Struktur wie z.B. eine unsortierte Liste verwenden.

Das war auch schon alles. Das Beispiel könnt ihr euch hier ansehen und auch den Quellcode dazu runterladen:

Beispiel
Download

Ich hoffe, dass euch die erweiterte Anwendung gefallen hat und vielleicht auf neue Ideen gebracht hat. Wenn ihr eine andere Anwendung kennt, bei der Ihr nicht weiterkommt würde ich mich wie immer über einen Kommentar sehr freuen.

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:

$json = json_decode(file_get_contents('http://maps.google.com/maps/geo?output=json&oe=utf8&sensor=false&hl=de&key=DEIN_GOOGLE_MAPS_API_KEY&q='.urlencode($_REQUEST['address'])));

echo '<ul>';
if(!empty($json->Placemark)){
	foreach($json->Placemark as $value){
		echo '<li>'.$value->address.'</li>';
	}
}
echo '</ul>';

Zuerst stellen wir eine Suchanfrage an Google Maps, wobei wir den zu suchenden Text einfach im Parameter “q” übergeben. Der Parameter “output” gibt hierbei das von Google Maps zurückgelieferte Format an. Ich habe hier JSON verwendet und wandle die Daten anschließend mit der json_decode() Funktion in ein Objekt um. Es kann aber genauso gut XML in Kombination mit einer XML Funktion sie simplexml_load_string() verwendet werden. Da JSON da kompaktere Format ist habe ich mich in diesem Beispiel dafür entschieden.

Ein weiterer interessanter Parameter ist “hl”, der die Sprache der Adressen angibt. Viele werden den Parameter auch von der Google Suche kenne. Hier werden die Adressen also in deutsch zurückgegeben. Mit Hilfe dieses einen Parameters könnt ihr also sehr schnell die Funktion auf andere Spracheversionen eurer Seite anpassen.

Damit ihr überhaupt eine Anfrage an Google Maps stellen dürft, benötigt ihr einen kostenlosen Google Maps API Key, den ihr an den “key” Parameter anhängen müsst (Danke an paddy, der mich auf das Fehlen des Keys hingewiesen hat).

Nachdem die Daten von Google Maps empfangen wurden und im Objekt vorhanden sind, geben wir sie an die JavaScript Funktion zurück. Dazu erzeugen wir einfach eine unsortierte Liste mit einem Eintrag pro gefundener Adresse.

Und jetzt kommen wir zum sehr umfangreichen clientseitigen Script. Dazu müssen wir erst einmal ein Formular mit einem Textfeld erzeugen. Außerdem benötigen wir ein DIV, in dem die Ergebnisse ausgegeben werden. Zu guter Letzt kommt dann noch das JavaScript, das den ganzen AJAX-Request und das Behandeln der Empfangenen Daten erledingen muss. Was aber sehr kompliziert klingt, ist recht kurz umgesetzt:

<input type="text" id="address" name="address" />
<div id="adresse_choices" class="autocomplete"></div>
<script type="text/javascript">
	new Ajax.Autocompleter('address', 'adresse_choices', 'get_addresses.php');
</script>

Die ganze Sache lässt sich mit einer einzigen Zeile JavaScript erledigen. Selbstverständlich müssen dazu noch im Kopfbereich die “prototype.js” sowie anschließend die “scriptaculous.js” eingebunden werden. Die Funktion Ajax.Autocompleter() gehört hierbei zum Funktionsumfang von Scriptaculous. Das fertige Resultat sieht dann wie folgt aus:

Die hier verwendete ABC-Straße ist kein Witz, sondern die Adresse von Google Deutschland. Eine weitere schöne Eigenschaft von Google Maps ist die automatische Rechtschreibkorrektur, die bei fehlehaften Eingaben durchgeführt wird. Selbst eine Eingabe wie “plazt der luftblöcke” führt trotzdem zu dem gewünschten Platz vor dem ehemaligen Berliner Flughafen. Um die Sache testen zu können, habe ich hier ein kleines Beipsiel erstellt, dass ihr euch auch gerne im Quellcode runterladen könnt. Ich habe zusätzlich noch eine Funktion verwendet, die den Suchbegriff hervorhebt:

Beispiel
Download

Wir ihr also sehen könnt, ist es mit der Ajax.Autocompleter() Funktion und einem servreseitigen Skript sehr einfach möglich, auch Daten von anderen Seiten auszuliefern. Das dazu benötigte PHP Skript kann durch kleine Veränderungen an die entsprechende extrene Datenquelle und das zurückgelieferte Format angepasst werden. Die Funktion lässt sich aber natürlich auch genauso gut mit jQuery oder einem anderen Framework umsetzen. Dazu muss dann aber eventuell das zurückgelieferte Format des PHP Skript auch noch angepasst werden.

Ich hoffe das Beispiel hat euch gezeigt, wie vielfältig sich eine Autovervollständigung einsetzen lässt. Habt ihr auch schon einmal mit externen Daten gearbeitet? Oder habt ihr vielleicht eine Idee, konntet sie aber bisher nicht umsetzen? Über ein Kommentar dazu würde ich mich sehr freuen.

Der eingegebene Text kann in den Titel der Beiträge und/oder im Inhalt gesucht werden. Es kann zusätzlich die Formatierung der Ergebnisse über eine eigene CSS Datei an den Blog angepasst werden. Es kann jeweils der Titel oder zusätzlich ein Teil des Inhalts angegeben werden, wobei hier auch die Länge des auszugebenden Inhaltes eingestellt werden kann.

Installation:

Installation über die WordPress Adminstrator-Seiten:

1. Gehe zur Admin-Seite Plugins -> Installieren
2. Suche nach kau-boy und wähle das Plugin aus
3. Wähle die Aktion Jetzt installieren
4. Klicke auf Jetzt installieren
5. Aktiviere das Plugin über den Plugins Menüpunkt in WordPress
6. Du musst eventuell die Einstellungen anpassen, gerade wenn dein Suchfeld eine andere ID als s hat

Installation unter Verwendung der WordPress Adminstrator-Seiten:

1. Lade die zip-Datei des Plugins herunter: kau-boys-autocompleter.2.2.zip
2. Gehe zur Admin-Seite Plugins -> Installieren
3. Wähle den Link Hochladen unter Plugins Installieren Überschrift
4. Wähle die zip-Datei aus und klicke Jetzt installieren
5. Aktiviere das Plugin über den Plugins Menüpunkt in WordPress
6. Du musst eventuell die Einstellungen anpassen, gerade wenn dein Suchfeld eine andere ID als s hat

Installation unter Verwendung von FTP

1. Lade die zip-Datei des Plugins herunter: kau-boys-autocompleter.2.2.zip
2. Entpacke es und lade es in dein /wp-content/plugins/ Verzeichnis hoch
3. Aktiviere das Plugin über den Plugins Menüpunkt in WordPress
4. Du musst eventuell die Einstellungen anpassen, gerade wenn dein Suchfeld eine andere ID als s hat

Screenshots:

Screenshot des Plugins in einem neuen WordPress blog

Screenshot der Einstellungsseite (auch in englisch erhältlich)

Versionsgeschichte:

• 2.2 Deaktivieren der Suche für Suchfelder im Adminbereich und Ermöglichen der Verwendung zusammen mit dem relevanssi Plugin
• 2.1 Hinzufügen einer neuen Version von jQuery Autocomplete
• 2.0.1 Entfernen von “short open tags”, die auf blogs die Fehler verursachen die “short_open_tag” nicht auf “On” gesetzt haben
• 2.0 Autocompleter mit mehreren Textfelder auf einer Seite nutzbar machen, verbessern der Kürzung des Inhalt von Artikeln
• 1.9 Beheben von Problemen mit PHP4, funktioniert nun auch mit qTranslate im “Query-Modus” (?lang=de)
• 1.8 Hinzufügen der Einstellung für die Länge des Titels und des Inhalts in den Ergebnissen
• 1.7 Erstzen von jQuery suggest durch jQuery autocomplete, da das suggest Plugin HTML Auszeichnungen zerstört
• 1.6.1 Verwendung des id Attributs als Standard anstelle des name Attributs
• 1.6 Hinzufügen der Möglichkeit das Suchfeldes anhand des name Atrrbiuts auszuwählen
• 1.5.2 Hinzufügen der richtigen Kodierung zu html_entity_decode() um das Zerteilen von XML Enitäten zu verhindern
• 1.5.1 Fehler im AJAX repsonse behoben, der die Einstellung für die Ergebnisfelder nicht geladen hat
• 1.5 Hinzufügen Auswahlmöglichkeiten für die Such- und Ergebnisfelder
• 1.4.1 Aktualisierung der Übersetzungsdatei
• 1.4 Kombinieren der Styles für jQuery und script.aculo.us, Hinzufügen  einer Einstellung zur Multibyte-Kodierung
• 1.3.5 Fehler bei der html_entity_decode() Konvertierung beseitigt
• 1.3 Enfternen eines Kommentars in autocompleter.js.php, welcher eine PHP header warning  erzeugt hat
• 1.2 Verwendung von html_entity_decode() um das Zerteilen von Enitäten zu verhindern
• 1.1 Entfernen von WordPress shortcodes um leere oder falsche Seiten zu verhindern
• 1.0 Möglichkeit jQuery ODER script.aculo.us zu verwenden, Übersetzen der Einstellungsseite ins Deutsche
• 0.4 Hinzufügen der Einstellung für die Anzahl der Suchergebnisse und der eigenen CSS Date
• 0.3 Hinzufügen der Einstellung für die Suchfeld ID
• 0.2 Erste stabile Version

Wenn dir dieses Plugin gefällt oder dir etwas fehlt, würde ich mich freuen es zu erfahren. Hinterlasse einfach ein Kommentar auf dieser Seiter oder auf meiner WordPress Plugin Seite.