Nico Steiner - Frontend-Entwicklung und -Architektur

Samstag, 8. August 2009

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.

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

Donnerstag, 6. August 2009

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.

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

Mittwoch, 5. August 2009

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.

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

Einfach ist anders!

Der Artikel Frontendentwicklung ist nicht einfach! von Jens Grochtdreis, den dieser bei den Webkrauts veröffentlicht hat, würde ich gerne als Aufhänger nutzen, um etwas konkreter auf die Aufgaben und Techniken einzugehen, mit denen wir Frontententwickler es täglich zu tun haben.

Ich werde das Thema in mehrere Artikel aufteilen, da schon jetzt absehbar ist, dass jede Menge Fakten, Buchempfehlungen und weiterführende Links zusammenkommen werden.

• HTML, XHTML, XML, XSLT
• CSS
• JavaScript
• Website-Performance
• Accessibility
• SEO
• Frontend-Qualität
• Interaktion-Design
• Frontend-Architektur

Die Artikel werden lediglich einen Überblick üder die unterschiedlichen Facetten des jeweiligen Themas geben können. Erst zusammen mit den weiterführenden Links und dem Lesen der empfohlenen Literatur bekommt man einen konkreten Einblick in das jeweilige Thema.

Dabei verhält es sich mit den angesprochenen Themen ein wenig wie mit selbstähnlichen Strukturen - ein jedes Teil aus der Nähe betrachtet eröffnet eine komplett eigene Welt mit unglaublich vielen weiteren Details. Der Zuwachs an Wissen und Publikationen zu jedem dieser Themen hält dabei seit Jahren stetig an.

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