Nico Steiner - Frontend-Entwicklung und -Architektur

Mittwoch, 15. Oktober 2008

On-Page-Optimierungen unwichtig für Google & Co.?

In letzter Zeit lese und höre ich immer wieder, daß Eigenschaften, welche eine Webseite in Form ihres Codes - also On-Page - mitbringt, für Suchmaschinen nur noch eine geringe Rolle spielen. Auch die Anwendung von Webstandards, die sich ja in vielen Fällen auf die Qualität des Codes bezieht, würde in dieser Hinsicht in Frage gestellt werden. Das dem ganz und gar nicht so ist, beweist ein Artikel in den Google Webmaster Guidelines, welcher in der Rubrik Creating a Google-friendly site: Best practices veröffentlicht wurde. Hinter dem etwas irreführenden Titel Making sure your site appears properly in different browsers verbirgt sich, wenn man so will, ein Loblied auf die Einhaltung der durch die Webstandards vorgegebenen Ideen und Regeln. Somit scheint es außer Frage zu stehen, daß man dem Thema On-Page-Optimierungen und Codequalität eine angemessene Beachtung schenkt.

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

Verhindern von Focus-Rahmen

In manchen Fällen macht es Sinn, beim Klick auf ein Element den durch die Fokussierung entstehenden Rahmen zu verhindern. Konkret ist das sinnvoll, wenn durch den Klick kein Laden einer neuen Seite eingeleitet wird, sondern lediglich über DHTML eine Änderung der bestehenden Seite ausgelöst wird (Klick auf einen Reiter etc.). Um dieses Verhalten möglichst generisch und browserkompatibel zu erzeugen, wurde von mir ein JavaScript geschrieben, welches diesen Effekt automatisch an alle Elemente mit einer bestimmten CSS-Klasse bindet. Über ein getElementsByClassname werden dabei zwei Events (onmousedown und onblur) an diese Elemente gebunden, welche beim Eintreten dieser Events eine CSS-Klasse 'blur' hinzufügen bzw. wieder entfernen. Diese CSS-Klasse wiederum verhindert mit der Eigenschaft outline: 0; den unerwünschten Focus-Rahmen.
Die Lösung hat den großen Vorteil, daß ein Fokussieren des Elements mittels Tastatur-Steuerung weiterhin einen in dem Fall notwendigen Rahmen darstellt. Zum Umgang mit den Events und CSS-Klassen habe ich die YUI von Yahoo! verwendet.

Geschrieben von Nico Steiner in Referenzen um 23:12 | Kommentare (0) | Trackback (1)

Samstag, 11. Oktober 2008

Meeting mit Google

Heute nahm ich an einem 2-Stunden-Meeting mit Leuten von Google teil. Als Fan dieser Firma hatte ich natürlich gewisse Erwartungen, die sich dann auch voll erfüllt haben. Man hat sich geduzt, es herrschte eine lockere, aber gleichzeitig professionelle Atmosphäre - die zwei Stunden vergingen wie im Flug. Mitnehmen tue ich natürlich jede Menge Infos, und die überraschende Erkenntnis, daß Google auch Büros in Hamburg (in der ABC-Straße :-/) hat - ich dachte bisher, daß sich die Firma in Deutschland auf München beschränkt.

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

Freitag, 10. Oktober 2008

FIT-Editor Prototyp

Wem FIT bzw. Framework for Integrated Test genau so wenig sagt wie mir vor Beginn dieses Projekts, dem lege ich diese Seite näher.
Das Editieren von FIT-Tests mit einem HTML-Editor oder einer Office-Anwendung hat diverse Nachteile. Während das Hinzufügen oder Löschen von Zeilen und Spalten in einer Office-Anwendung noch recht einfach zu bewerkstelligen ist, ist dies mit einem HTML-Editor schon sehr viel aufwendiger und fehleranfälliger. Des Weiteren fehlt bei dieser Art der Bearbeitung eine syntaktische Überprüfung der Werte oder die Möglichkeit, aus bestehenden Konfigurationen heraus mögliche Werte zu wählen. Auch die Arbeit mit Input- und Output-Columns und deren Eigenschaften erfährt keine Unterstützung.
Aufgrund dieser Nachteile wurde die Entscheidung getroffen, einen eigenen FIT-Editor zu implementieren. Dieser ist auf der Server-Seite mit Java-Technologie implementiert. Im Frontend kommt JavaScript in Form einer von mir konzipierten und programmierten RIA-Anwendung zum Einsatz. Während die Java-Anwendung das Einlesen und Speichern der Tests, die Validierung der Eingaben und die Bereitstellung dynamischer Daten über AJAX mit JSON übernimmt, wird im Frontend die komplette Interaktion mit dem Nutzer abgehandelt. Dazu zählen in erster Linie die Manipulationen an der Test-Matrix, wie das Hinzufügen, Duplizieren und Löschen von Spalten und Zeilen, die Eingabe der Werte, die Kommunikation von Fehlern und Statusinformationen etc. Als JavaScript-Framework zur Verwaltung von Events und Operationen auf dem DOM wurde wieder einmal die YUI von Yahoo! verwendet.
Der Prototyp soll als neuer Bestandteil einer ganzen Reihe von Qualitätssicherungs-Tools bereits während der nächsten Kampagne eingesetzt werden. In Zukunft sollen Features wie Templates, Undo- und Redo-Schritte und eine komfortablere Bedienung dieses Tool komplettieren.

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

Sonntag, 5. Oktober 2008

Webstandards - Nützliche Links

Die Einhaltung von Webstandards sichert einen größtmöglchen Nutzen für möglichst viele User. Sie sichert eine möglichst große Lebensdauer für Webdokumente, vereinfacht und verkürzt die Produktion dieser Dokumente, sichert die Zugänglichkeit der Inhalte einer Seite für möglichst viele Zugangsgeräte und Browser und macht Dokumente zukunftssicher gegenüber neuen Browserversionen.

Realisieren läßt sich dies, indem man Inhalte semantisch korrekt auszeichnet und die Zugänglichkeit nach den Regeln der Web Content Accessibility Guidelines (WCAG) sicherstellt. Weiterhin sollte man HTML, CSS und JavaScript validieren und eine Trennung von Inhalt und Layout sicherstellen.

Das Thema ist natürlich nicht mit diesen wenigen kurzen Sätzen abzuhandeln. Bei der Recherche für einen entsprechenden Vortrag bin ich im Netz auf ein paar sehr gute Dokumente gestoßen, auf die hier verwiesen werden soll.

Websites
Allen voran ist natürlich das W3C zu nennen. Diese Organisation ist für einen Großteil der verabschiedeten Standards (oder richtiger Empfehlungen) verantwortlich. Weitere Informationen und Links zu Organisationen gibt es in den Wikipedia-Artikeln auf englisch und deutsch zu finden.

Sehr gute Artikel zu dem Thema werden im Rahmen dafür eigens eingerichteter Projekte von Mozilla und Opera veröffentlicht.

Zwei weitere gute Quellen sind Die Vorteile von Webstandards und Webstandards Grundlagen.

Firefox-Plugins
Ein nützliches Tool zur Überprüfung der Semantik und der Validierung von CSS und JavaScript ist die Web Developer Toolbar. Die Regeln der WCAG kann man sehr gut mit der Firefox Accessibility Extension überprüfen. Zur Validierung des HTML-Dokuments eignet sich der HTML Validator ausgezeichnet. Nicht zuletzt sei der Firebug genannt, welcher eine enorme Unterstützung während der täglichen Arbeit mit Webdokumenten darstellt.

Literatur
Ich habe diese Bücher noch nicht gelesen, aber die Autoren bürgen meiner Ansicht nach für Qualität. Zum einen wäre das Webdesign mit Webstandards von Jeffrey Zeldman und Webstandards Creativity von Cameron Adams.

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