Referenzen

Dienstag, 31. März 2009

Canonical URLs

Google hat vor kurzem angekündigt, sogenannte canonical URLs zu unterstützen. Was darunter zu verstehen ist, kann man im Google Webmaster Central Blog nachlesen. Dem dortigen Aufruf sind wir nachgekommen, und haben sämtliche 1&1 Bestellprozess-Seiten mit dem entsprechenden Link-Element versehen. Die Angabe einer solchen eindeutigen URL ist für uns besonders interessant, da sämtliche unserer Seiten mit einer Session-ID und weiteren, ständig wechselnden Parametern versehen sind, welche das Aussehen der Seite im Normalfall nicht beeinflussen und auf eine immer gleiche Basis-URL zurückgeführt werden können.

Geschrieben von Nico Steiner in Referenzen um 22:33 | Kommentare (0) | Trackbacks (0)

Montag, 23. März 2009

YQL, YUI und Yahoo! Pipes

Inspiriert durch Chris Heilmanns Artikel zu YQL habe ich den YQL-Service zusammen mit der YUI und Yahoo! Pipes dazu verwendet, einer bestehenden Webseite eine neue GUI zu verpassen.

Die Webseite
Auf die Schauburg lasse ich nichts kommen. Mein Lieblingskino in Karlsruhe, in dem ich fast jede Woche zu Gast bin. Die Filme sind toll, es gibt Themen-Wochen, Ben and Jerry's ist an der Bar zu haben ABER die Website - ein framegewordenes Scheusal aus der Stummfilmzeit des Internet. Ich hab's ausgemessen - ganze 199 Pixel in der Höhe stehen dem Rahmen für die Filmdetails auf meinem Laptop zur Verfügung! Und bei diesen waghalsigen Tabelle-in-Tabelle-in-Frame-Layout-Konstrukten läuft mir das Grausen über den Rücken. Eine idealer Kandidat also, um zu testen, was mit YQL möglich ist.

YQL - Mashup der Inhalte
Da ich sowohl mit SQL als auch mit XPath vertraut bin, hatte ich keine Probleme, die nötigen Inhalte aus der Original-Website zu extrahieren. Das sind zum einen die Zeiten und die zugehörigen Filmtitel inklusive der Links und zum anderen die Filmdetails, welche über die Auswahl eines bestimmten Titels angezeigt werden.
Die YQL Console (Yahoo!-Account nötig) leistet da auch beste Hilfe beim Finden der richtigen Abfrage.
Negativ ist mir aufgefallen, daß es keine Möglichkeit gibt, daß Encoding der Inhalte festzulegen. Das führt dazu, daß in meinem Beispiel sämtliche Umlaute falsch dargestellt werden - sehr ärgerlich. Weiterhin habe ich eine Möglichkeit vermißt, einfach das Markup eines bestimmten Knoten zu selektieren - das Resultat der Abfrage wandelt sich manchmal in eine sehr seltsame Struktur, mitunter fehlen ganze Textbestandteile, die im Original vorhanden sind.
Der größte Nachteil scheint jedoch zu sein, daß der YQL-Server, welcher die Daten aus dem Original-Dokument lädt, bei dem Webserver diese Dokuments als ein Nutzer erscheint. Somit ist es zumindest mir sehr schnell passiert, daß der Zugriff von diesem Server schnell verweigert wurde. Eine Angabe eines Caching-Intervals (bei mir würde dies immerhin ein ganzer Tag sein) wäre da sehr hilfreich.

YUI - Darstellung der Inhalte im Browser
Da ich eine reine Frontendlösung für diesen Test haben wollte, stellte sich das Problem, daß die YQL-Daten nicht über einen normalen XMLHttpRequest abgerufen werden konnten, da dieser nicht für Drittdomains erlaubt ist. YUI bietet glücklicherweise die Methode YAHOO.util.Get.script() - nicht ganz ohne, was die Sicherheit angeht, aber für einen Test durchaus willkommen. Zusammen mit einer ganzen Menge Callback-Funktionen und DOM-Manipulationen ließ sich recht schnell sowohl die Navigation als auch die Detailansicht der Filme erstellen. Auf die Darstellung der Filmdaten mußte ich dabei verzichten - YQL war nicht dazu zu bringen, diese Daten zu extrahieren.

Yahoo! Pipes - denn RSS fehlt auch
Die Schauburg-Website bietet auch keinen RSS-Feed - dank Yahoo! Pipes sollte dies aber kein Problem sein. Als Quelle kann man YQL auswählen - sehr gut - denn die passenden Abfragen hatte ich ja schon erstellt. Nur stellte sich für mich nach längerem Probieren heraus, daß es ohne Webservice wohl nicht möglich ist, Daten anhand eines Indizes o. ä. miteinander zu mergen. Dies zwang mich dazu, lediglich die Daten eines YQL-Resultats in einen Feed zu wandeln. Dieser beschränkt sich deshalb auf den Titel des Films und einem Detail-Link.

Was wäre noch denkbar?
Da es sich bei den dargestellten Daten um Termine handelt, wäre der Einsatz entsprechender Microformate denkbar. Weiterhin wäre die Angabe verschiedener WAI-ARIA-Attribute möglich - die Inhalte sind ja ausschließlich scriptgeneriert.
Vielleicht könnte man anhand des Titels weitere Informationen, Kommentare und Kritiken auf der Seite platzieren - oder zumindest Links zu diesen anbieten.

Fazit
Yahoo! bietet ein paar sehr feine Services zur Umsetzung solcher und ähnlicher Projekte. Die Anwendung ist dabei praxisorientiert (und -erprobt) und erschließt sich einem ohne größere Schwierigkeiten. Dank Chris' Eifer erfahren Entwickler wie ich von diesen Tools und bekommen durch ihn den passenden Anstoß für eigene Projekte.
Im Detail könnten ein paar Sachen verbessert werden - zufrieden bin ich mit dem Test aber allemal.

Ups, fast vergessen
Jetzt hätte ich ja fast vergessen, den Link zu der Website zu posten

Schauburg Karlsruhe - Programm

Geschrieben von Nico Steiner in Referenzen um 20:55 | Kommentare (0) | Trackback (1)

Mittwoch, 18. März 2009

Universal Design for Web Applications

Es gibt im Internet viele gute Artikel über die Themen Barrierefreiheit und Zugänglichkeit von Webseiten. Eine der besten deutschsprachigen Quellen dürfte dabei Einfach für Alle sein.

Ein wirklich gutes Buch, welches sich sich ausschließlich diesen Themen widmet, war mir bisher nicht bekannt. Auf "Universal Design" von O'Reilly bin ich eher zufällig gestoßen, da es mir bei Amazon als Kaufempfehlung in Zusammenhang mit einem anderen Buch angeboten wurde. Ein Blick in die Produktbeschreibung und das Buch war bestellt.
Da es erst vor wenigen Monaten erschienen ist, hat es im Vergleich zu machen Artikeln dort draußen eine erstaunliche Aktualität. So wurden die Richtlinien von WCAG 2.0 (welche erst im Dezember 2008 veröffentlicht wurden) als Basis der einzelnen Kapitel genommen. Auch auf Endgeräte wie das iPhone wird eingegangen. Das Buch ist dabei sowohl für Einsteiger aber eher für fortgeschrittene Webentwickler lehrreich.
Es wird sowohl auf klassische, durch Markup ausgezeichnete Webseiten, auf JavaScript-Komponenten als auch auf komplette RIAs Bezug genommen. Am Ende des Buches werden Vorschläge gemacht, wie das Prinzip des Universal Designs in den Prozess der Webseitenerstellung integriert werden kann.
Meine Favoriten beim Lesen des Buches waren die Kapitel zu WAI-ARIA und zu Video-/Audio-Content.

Wem englischsprachige Fachliteratur nicht liegt, der sei auf den April 2009 vertröstet. Dann erscheint bei Galileo ein deutschsprachiges Buch mit dem Titel Web Accessibility: Das umfassende Handbuch.

Geschrieben von Nico Steiner in Referenzen um 23:49 | Kommentare (0) | Trackbacks (0)

Montag, 9. März 2009

Umstellungen von YUI auf Qooxdoo

Momentan wird die YUI als JavaScript-Framework für die Bestellprozesse von 1&1 eingesetzt.
Mit den 1&1 Branchen-Homepages haben wir das erste Projekt komplett auf das hauseigene Framework Qooxdoo umgestellt. Dabei nutzen wir die neuen Low-Level APIs von Qooxdoo 0.8. Konkrete Beispiele lassen sich auf http://order.1und1.info/ in Form einer Branchen-Autocompletion, einer Lightbox für die Branchenauswahl, verschiedener Info-Layer, eines Passwortchecks und vieler weiterer, kleinerer Komponenten finden. Bei der Integration wurden wir von Andreas Ecker und seinem Qooxdoo-Team unterstützt.
Da viele der JavaScript-Komponenten über Maven-Module deployed werden, mußte lediglich eine neue Major-Version dieser Module erzeugt werden, in welcher dann die Änderungen vorgenommen und die Dependency auf Qoxdoo umgestellt wurde.
Die Branchen-Homepages sind der Startschuß für eine sukzessive Umstellung aller unserer JavaScript-Komponenten auf Qooxdoo. Durch die Umstellung soll sich eine ähnliche Symbiose ergeben, wie wir sie schon bei der Nutzung des hauseigenen Pustefix-Frameworks erleben durften.

Geschrieben von Nico Steiner in Referenzen um 00:28 | Kommentare (0) | Trackbacks (0)

Coverflow für 1&1 Branchen-Homepages

Bei den 1&1 Branchen-Homepages setzen wir das Imageflow-Script von Finn Rudolph zur Auswahl verschiedenster Branchen-Layouts ein.

1&1 Branchen-Homepages

Ich hatte die Aufgabe, dieses Script in unsere bestehende Frontend-Infrastruktur zu integrieren und nötige Anpassungen vorzunehmen. Letztendlich gestaltete sich das nicht schwierig, da das Script keine Abhängigkeiten zu JavaScript-Frameworks aufweist und sich viele der Anpassungen über bereits bestehende Parameter realisieren ließen.

Geschrieben von Nico Steiner in Referenzen um 00:24 | Kommentare (0) | Trackbacks (0)

Sonntag, 8. März 2009

Modulare Layouts (Teil 2)

Auch die gebrandeten Bestell-Frontends beziehen ihre Ressorcen (hauptsächlich CSS und Grafiken) nun aus entsprechenden Frontend-Modulen.

GMX DSL
WEB.DE DSL

GMX - Mobiles Internet
WEB.DE - Mobiles Internet

Auch hier gilt: Wo Ressorcen vorher für verschiedene Projekte dupliziert werden mußten (und damit verbundenen Änderungen natürlich auch mehrfachen Aufwand verursachten) werden diese Ressourcen nun nur noch von je einem Modul geliefert.

Geschrieben von Nico Steiner in Referenzen um 00:14 | Kommentare (0) | Trackbacks (0)

Samstag, 7. März 2009

Modulare Layouts (Teil 1)

Mit Onlinegang der neuen Kampagnen Anfang des Monats wurden weitere Webseiten-Komponenten modularisiert.
So werden die einheitlichen Layout-Rahmen (Skins) folgender Projekte aus einem Modul bezogen:

1&1 DSL
1&1 Hosting DE
1&1 Branchen-Homepages

Wie an den Seiten zu sehen ist, gibt es von Projekt zu Projekt kleinere Unterschiede (Navigation/Subnavigation etc.). Diese projektspezifischen Unterschiede sind im Modul-Konzept berücksichtigt und lassen sich durch lokalen Überladungen der betroffenen Elemente realisieren.

Die Modularisierung wurde in dem Zuge noch weiter getrieben. Auch verschiedene Frontend-Hacks werden jetzt modular verwaltet. Darunter fallen Techniken wie Clearfix, IE PNG Fix und IE Pseudo Fix. Aber auch die reset.css der YUI, die Styles für die Kostenübersichten und Buttons wurden modularisiert und stehen global für alle Projekte zur Verfügung.

Geschrieben von Nico Steiner in Referenzen um 23:53 | Kommentare (0) | Trackbacks (0)