Semantic Checker mit HTML5-Unterstützung
Soeben habe ich die neue Version 0.5.0 der Semantic Checker Firefox Extension veröffentlicht. In dieser Version highlightet die Erweiterung nun auch semantische HTML5-Elemente. Neben diesen Elementen werden auch Input-Elemente mit neuen HTML5-Attributen gehighlightet.
Zusätzlich dazu habe ich eine weitere Kategorie "HTML5 (preparation)" eingeführt. Darunter fallen HTML4-Elemente, deren Klassennamen oder IDs mit den Namen der HTML5-Elemente übereinstimmen. Sinnvoll ist das für eine Übergangszeit, in der HTML5-Elemente aufgrund mangelhafter Browser-Unterstützung noch nicht verwendet werden können, Vorbereitungen für eine möglichst einfache zukünftige Umstellung jedoch bereits getroffen werden sollen. Auf diese Idee hat mich ein Artikel von Jon Tan gebracht.
SenSEO@twitter
Seit gestern gibt es für SenSEO einen Twitter-Account. Unter http://twitter.com/sensationalseo werde ich Neuigkeiten, Blog-Artikel von Nutzern und weitere Informationen rund um die Firefox-Extension twittern.
Frontend-Qualität - Einfach ist anders!
Die Qualität eines Web-Frontends drückt sich in dessen Architektur, Verfügbarkeit, Technik und Bedienbarkeit aus. Die besondere Herausforderung besteht darin, diese Qualität mit entsprechendem Wissenszuwachs kontinuierlich zu verbessern und zumindest in Teilen messbar und damit automatisiert analysierbar zu machen.
Der erste Teil geht mit der Einsicht einher, dass solche Verbesserungen nötig und förderlich sind. Wo im ersten Moment Zeit, Geld und Arbeit investiert werden muss, gestalten sich die Implementierung neuer Anforderungen oder Änderungen an bestehenden Teilen der Website dadurch oft als unkomplizierter oder sogar überhaupt erst als realisierbar. Schlüsselbegriffe in diesem Zusammenhang sind Organisation, Ordnung, Modularisierung und Standardisierung - um nur einige zu nennen.
Darüber hinaus gibt es ganz pragmatische Faktoren, welche die Qualität von Frontends fördern. Fehlerfreie und verfügbare Komponenten, korrekte Konfigurationen und leichtgewichtige Ressourcen zum Beispiel. Es sind genau diese Ressourcen, die sich gut automatisiert überwachen lassen. Teil einer guten Frontend-Infrastruktur sollte deshalb ein System sein, welches geeignete Metriken sammelt, visualisiert und auftretende Probleme kommuniziert.
Was für serverseitige Anwendungen oder technische Infrastrukturen bereits seit Jahren etabliert ist, setzt sich im Frontend-Bereich scheinbar nur langsam durch. Ursache dafür dürfte das relativ komplexe Umfeld an clientlastigen Technologien sein, das eine automatisierte Analyse erschwert.
Website-Performance - Einfach ist anders!
Die Performance einer Webseite - also die Geschwindigkeit, mit der die Komponenten einer Webseite vom Server zum Client übertragen und im Browser angezeigt werden - ist für die Frontend-Entwicklung in vielerlei Hinsicht von Bedeutung. Es gibt Studien die belegen, dass sich eine schnelle Ladezeit positiv auf die User-Experience auswirkt, weshalb Website-Performance auch für Google eine gewisse Rolle spielt. Weiterhin wirken sich Optimierungen positiv auf die Menge der zu übertragenden Daten aus, was wiederum Kapazitäten schont und Traffic-Kosten senkt.
Erste Erfolge sind dabei, vor allem bei kleineren Projekten, schnell erzielt. Performance-Optimierung in komplexen Web-Infrastrukturen zu etablieren, ist hingegen sehr anspruchsvoll und aufwändig. Neben der Klärung vieler Detailfragen sind Eingriffe in Seitenaufbau, Ladereihenfolge, Ressourcen-Kombination und Serverkonfigurationen nötig. Darüber hinaus erweist es sich als besondere Herausforderung, weiterhin eine komfortable Enwtwicklungsumgebung beizubehalten.
Yahoo! hat sich mit Best Practices for Speeding Up Your Web Site und der Firefox-Extension YSlow als Pionier auf diesem Gebiet hervorgetan. Die beiden Bücher High Performance Websites und Even Faster Websites von Steve Souders (ehemals Yahoo!, jetzt Google) sind Pflichtlektüre, wenn man sich mit dem Thema beschäftigt. Nate Koechley und Nicole Sullivan von Yahoo! publizierten ebenfalls zu Techniken der Performance-Optimierung. Erst kürzlich hat Google mit Web Performance Best Practices und der Firefox-Extension Page Speed ähnliche Bestrebungen gezeigt, für dieses Thema ein Bewußtsein in der Entwicklergemeinde zu schaffen und erworbenes Wissen zu teilen.
Semantic Checker mit Microformat-Support
Semantic Checker highlightet in der neusten Version 0.3.1 auch Microformate. Folgende Formate werden unterstützt:
- hCard, hCalendar
- rel-license, rel-nofollow, rel-tag
- Vote Links
Weiterhin werden nun, wie in der Grafik zu sehen, statistische Daten in einer Info-Box in der linken, unteren Ecke des Firefox angezeigt.
Diese neue Version kann momentan nur in der Version History heruntergeladen werden.
Ladies and Gentlemen, please welcome...
Semantic Checker!
Nachdem ich die halbe Nacht durchprogrammiert habe, ist die erste Version meiner zweiten Firefox-Extension Semantic Checker fertig und bei den Mozilla Firefox Add-ons veröffentlicht.
Die Extension kann mit einem Klick über die Statusleiste aktiviert werden und highlightet alle auf der Seite vorkommenden semantischen Elemente. Ich habe mich dabei für folgende Elemente entschieden:
abbr, acronym, address, blockquote, caption, cite, code, dl, dfn, dir, em, h1-h6, legend, menu, samp, strong
Eigentlich würde title noch dazugehören - nur läßt sich das schlecht highlighten 
Zusätzlich zum Highlighting wird der Name des Elements und dessen Position innerhalb gleicher Elemente ausgegeben.
Unter der Haube ermittelt die DOM Selectors API alle semantischen Elemente. Da diese API nur im neuen Firefox 3.5 funktioniert, ist die Extension auf diese Version beschränkt. Zur Positionierung der Highlighting-Elemente verwende ich die YUI von Yahoo!.
In dieser frühen Version gibt es noch ein paar Probleme mit der Positionierung. Das sollte aber bald behoben sein.
Zukünftig sollen auch HTML5-Elemente unterstützt werden. Weiterhin soll es für die Extension eine Website und eine Google Group geben.
Wer darüber hinaus Ideen für Features hat, kann gerne einen Kommentar schreiben.
SEO - Einfach ist anders!
Die Suchmaschinen-Optimierung (engl. Search Engine Optimization - SEO) teilt sich grundlegend in zwei Gebiete - die Off-Page- und die On-Page-Optimierung. Die Off-Page-Optimierung konzentriert sich auf die Linkstruktur und die Qualität und Themenrelevanz der Seiten, mit denen die eigene Website verknüpft ist. Für Entwickler von Webseiten liegt der Fokus jedoch auf der On-Page-Optimierung, dem Teil von SEO, der sich auf die direkten Eigenschaften der Dokumente konzentriert und den Suchmaschinen eine bestmögliche Erfassung der Inhalte dieser Dokumente ermöglichen soll.
Neben relevanten Inhalten und der optimalen Platzierung der Keywords im Title, den Meta-Tags, den Headlines und dem Inhalt des Dokuments stehen die Anforderungen an die On-Page-Optimierung denen der Accessbility sehr nahe. Dazu zählt vor allem gut strukturiertes, semantisch reichhaltiges, valides Markup. Wichtig sind weiterhin textuelle Alternativ-Inhalte für visuelle oder auditive Elemente, die korrekte Verwendung von Tabellen und die Trennung von Inhalt und Layout der Seite. Auch die Ladezeiten der Dokumente spielen bei der Platzierung auf der Suchmaschinen-Ergebnisseite (SERP) eine gewisse Rolle.
Einen guten Einblick in alle relevanten Kriterien gibt Aaron Walter in seinem Buch Building Findable Websites, zu dem online eine PDF-Checkliste und eine Präsentation verfügbar sind.
Weitere Richtlinien sind bei Suchmaschinen-Anbietern wie Google zu finden.
SenSEO ist eine von mir entwicklete Firefox-Extension, die bei der On-Page-Optimierung von Webseiten helfen soll. Neben dieser gibt es noch weitere Extensions, die in diesem Zusammenhang unterstützen können. Ich habe diese auf http://sensational-seo.com/ verlinkt.
CSS - Einfach ist anders!
Diese Stylesheet-Sprache, welche das Erscheinungsbild des Dokuments im Browser festlegt, bildet zusammen mit der Entwiclung des Markups den Kern der klassischen Frontend-Entwicklung.
Aufgrund der diversen fehlerhaften Implementierungen von CSS-Interpretern in den verschiedenen Browsern und deren Versionen besteht beim Umgang mit CSS die Herausforderung neben dem Verständnis der zugrundeliegenden Prinzipien und dem praktischen Wissen um die Umsetzung komplexer Layouts darin, all diese Unzulänglichkeiten der Browser zu kennen und diesen professionell zu begegenen. Ingo Chaos Buch Fortgeschrittene CSS-Techniken bietet meiner Meinung nach die beste Hilfestellung bei den sich daraus ergebenden Problemen.
In letzter Zeit sind einige neue Aspekte in Zusammenhang mit CSS aufgekommen. Diverse CSS-Frameworks versprechen eine solide, browserneutrale Basis bei der Umsetzung von Layouts. Dabei kommt es immer wieder zu Diskussionen zur Sinnhaftigkeit solcher Frameworks. Weiterhin wird von Nicole Sullivan seit Kurzem die Idee einer objektorientierten CSS-Architektur beworben, welche eine bessere Organisation und Strukturierung der daran beteiligten Ressourcen verspricht. Auch einige Präsentationen von Russ Weakley zeigen in Richtung CSS-Architektur.
Nicht zuletzt sei auf Conditional Comments verwiesen, welche es erlauben, Stylesheets exklusiv ganz bestimmten IE-Versionen zuzuweisen. Auch zu dieser Technik sind negative Stimmen zu hören.
CSS ist in den aktuellen Browsern in der Version 2.1 nahezu vollständig, in der noch unvollständigen Version 3 in unterschiedlich großem Umfang implementiert.
Archive
- Oktober 2011 (1)
- Oktober 2010 (2)
- September 2010 (4)
- August 2010 (3)
- Juli 2010 (2)
- Juni 2010 (3)
- Mai 2010 (7)
- April 2010 (4)
- März 2010 (10)
- Februar 2010 (7)
- Januar 2010 (4)
- Dezember 2009 (5)
- November 2009 (3)
- Oktober 2009 (8)
- September 2009 (2)
- August 2009 (9)
- Juli 2009 (7)
- Das Neueste ...
- Älteres ...
