Nico Steiner - Frontend-Entwicklung und -Architektur

Dienstag, 19. Januar 2010

Neue Bestandskunden-Shops online

In den letzten Monaten haben wir die 1&1 Bestandskunden-Shops redesigned und auf eine neue technische Basis gestellt. Dabei wurde die Gelegenheit genutzt um neue Ansätze und Technologien in dieses Redesign zu integrieren. Das Ergebnis sind Webseiten, die modernste Frontend-Anforderungen erfüllen. Anhand von Screenshots möchte ich zeigen, welche Anforderungen das sind und wie sich diese auf die Qualität der Seiten auswirken.

Vereinheitlichte Elemente
Nahezu konsequent wurden für diese neuen Shops einheitliche Elemente verwendet, die sich lediglich in Hintergrundbildern und wenigen anderen Details unterscheiden. Dies ermöglicht den Einsatz von XSLT-Templates, welche mit wenigen Parametern immer gleiches Markup erzeugen. Das CSS für das Layout ist dabei denkbar schlank, da diese einheitlichen Elemente natürlich auch mit einheitlichen CSS-Regeln gestylt werden können.



Die Verwendung der XSLT-Templates, Scripte und Styles erstrecken sich modular über verschiedene Shops in unterschiedlichen Sprachen. Dabei wurde auf einen konsequenten Einsatz von UTF-8 geachtet.

Validierung und wenig Inline-Code
Sämtliche Seiten und Stylesheets validieren gegen die Regeln des W3C. Bei der Entwicklung wurde weiterhin darauf geachtet, möglichst wenige Inline-Styles und Inline-Events zu verwenden.


W3C Markup Validation Service


Firefox-Extension Inline Code Finder

Semantisches Markup und Accessibility
Für die Elemente der Seite wurde semantisch sinnvolles Markup gewählt. Weiterhin wurde auf eine durchgängige Headline-Hierarchie geachtet. Da die Shops JavaScript voraussetzten und massiv von AJAX Gebrauch machen, werden interaktive Zustände über WAI-ARIA-Attribute kommuniziert. Dies alles stellt eine größtmögliche Zugänglichkeit sicher. Die nachfolgenden Screenshots zeigen die Seite in unterschiedlichen Darstellungen - darunter eine kontrastreiche Darstellung, eine Darstellung auf einem Mobilgerät und die Ansicht des Markups ohne Stylesheets.


Wenige Probleme werden von der Firefox Accessibility Extension gefunden


Eine kontrastreiche Darstellung mit Hilfe der Firefox Accessibility Extension


Mobile Ansicht der Seite


Ansicht ohne Styles mit der Web Developer Extension


Headline-Hierarchie, wie sie von Screenreader genutz wird (Web Developer Extension)

Optimierte Ladezeiten
Eine weitere Maßnahme war die Optimierung der Ladezeiten der Seiten. Der nächste Screenshot zeigt eine Analyse mit der Firefox-Extension YSlow - bis auf wenige Kriterien zeigt die Analyse beste Bewertungen.



Interaktive Elemente
Als JavaScript-Framework wird qooxdoo genutzt. Neben DOM-Manipulationen und Event-Listening wurden damit auch komplexe Interaktions-Elemente wie Lightboxen oder Auto-Vervollständigungen umgesetzt.

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

Mittwoch, 6. Januar 2010

Turbo-Espresso

Da ich eh nicht schlafen kann, habe ich den Grund des Übels mit dieser tollen Software "zu Papier" gebracht.

Geschrieben von Nico Steiner in Privat um 23:52 | Kommentare (0) | Trackbacks (0)

Von einem, der auszog, das Programmieren zu lernen

Ich tue es Stephan und Frank gleich, und zähle mal alle Programmiersprachen auf, die ich bis dato mehr oder weniger intensiv gelernt habe.

1990 - Auf einem Robotron 1715 habe ich anhand von Beispielprogrammen diverse Spiele und andere Software in BASIC programmiert.

1991 - Vom Jugendweihe-Geld habe ich mir einen Amiga 500 und einen BASIC-Interpreter (AMOS BASIC) gekauft. Mit dem Interpreter entstanden jede Menge Programme, darunter wiederum Spiele aber auch einige Lösungen für Aufgaben zurückliegender Informatik-Bundeswettbewerbe. Auf diesem Rechner habe ich auch ein paar Versuche in Assembler unternommen, mußte diese aber mangels guter Beispielprogramme wieder aufgeben.

1995 - Im Schulunterricht stand Turbo Pascal auf dem Lehrplan.

1997 - Mit dem Informatik-Studium kamen jede Menge neue Programmiersprachen dazu. Los ging es mit Assembler, SQL und C.

1998 - Bei einem ersten Praktikum lernte ich die Frontend-Sprachen kennen, die noch heute für meine Arbeit wichtig sind: HTML, CSS und JavaScript. Darüber hinaus hatte ich in dem Praktikum auch mit Perl, Visual Basic und meinem ersten CMS (Intershop) zu tun. Durch das Studium kamen C++, Java und Smalltalk hinzu.

1999 - Im Fach Künstliche Intelligenz mußte ich mich mit Scheme und Prolog rumquälen. Abgefahren war es auch in Elektrotechnik, wo wir mit Logik-Bauteilen "programmieren" mußten.

2000 - Während eines zweiten Praktikums sammelte ich erste echte Erfahrungen mit XML, XSLT, Java und WML.

2001 - Ein Steuerprogramm für eine CNC-Fräse. Den Namen der Sprache kenne ich schon nicht mehr. Für meinen Fachbereich schrieb ich über 6 Monate eine ASP-Webanwendung zur Abfrage von Prüfungsergebnissen.

Von 2003 bis heute arbeite ich intensiv mit allen Frontend-Sprachen und den damit verbundenen Technologien. Macht insgesamt 21 Sprachen in 19 Jahren.

Geschrieben von Nico Steiner in Skills um 22:53 | Kommentare (0) | Trackbacks (0)