Referenzen

Mittwoch, 30. Juli 2008

Pustefix-Website Relaunch

Die Pustefix-Website hat seit einigen Wochen ein neues Aussehen. Das Layout stammt dabei von meinem Kollegen Andi - die Umsetzung des Layouts mit HTML und CSS habe ich übernommen. Dabei wurde natürlich auf korrekt Semantik und, sofern möglich, auf die Validierung der Dokumente geachtet.
Im Zuge des Relaunchs wurde ebenfalls die Dokumentation überarbeitet und neu strukturiert und die Beispielapplikationen und Tutorials erneuert.
Weiterhin wurden das Trac und die Docbook-Doku an das neue Layout angeglichen, so daß die Website jetzt mit einem durchgängigen Layout und Navigationskonzept daherkommt.

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

Sonntag, 27. Juli 2008

JavaScript: The Good Parts

Das Buch von Douglas Crockford gibt einen wirklich kompetenten Einblick in die "Websprache" JavaScript.
Entgegen dem Titel werden dabei nicht nur die positiven Aspekte der Sprache beleuchtet, sondern in aller Ausführlichkeit auch die Teile, von deren Verwendung man auf jeden Fall absehen sollte.
Zu den guten Aspekten zählt Crockford dabei die JavaScript-Konzepte der Funktionen, Objekte und Objekt- und Array-Literale. Er fasst diese zu einer Untermenge "Simplified JavaScript" zusammen und sagt darüber:
"When I started thinking about htis book, I wanted to take the subset idea further, to show how to take an existing programming language and make significant improvements to it by making no changes except to exclude the low-value features."
Als diese "Low-value Features" sieht er in erster Linie den starken Bezug der Sprache zu globalen Variablen aber auch das falsch implementierte Konzept der Gültigkeitsbereiche, die Semikolon-Ergänzung und eine ganze Reihe weiterer Schwächen.
Zusammenfassend kann man sagen, daß sich dieses Buch definitiv nicht an Anfänger sondern an fortgeschrittene und professionelle JavaScript-Entwickler richtet.
Ich habe einige der erwähnten Sachen nur im Ansatz verstanden und muß die Teile zu Objekten, Funktionen und Vererbung defnitiv noch mehrmals lesen, um ein besseres Verständnis dafür zu entwickeln. Dann sollten jedoch nur noch wenige Fragen offen bleiben, denn angesichts des Tiefgangs und der Kompetenz des Autors dürfte das Buch absolut zu den besten zählen, die zu diesem Thema geschrieben wurden.
Hör ich da jemanden rufen: "Das schreibt er doch nur, weil er Schmetterlinge mag"?

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

Montag, 21. Juli 2008

Slideshare-Links

Ich bin ein Fan von Slideshare! Heute war ich gezwungen, den ganzen Tag grippebedingt zu hause zu verbringen, also habe ich mir fast die ganze Zeit Präsentationen bei Slideshare angeschaut. So viel Wissen geballt an einem Ort findet man sonst selten. Natürlich möchte ich die interessantesten Präsentationen an dieser Stelle vorstellen.

Design
Zwei sehr gute Präsentationen von Garett Dimon zum Thema Design von Internet Applikationen. Dabei ist die erste Präsentation allgemein dem Thema Interface Design gewidmet, wogegen in der zweiten am konkreten Beispiel der Entwicklung einer Oberfläche einer Bugtracker-Applikation auf die erste Präsentation Bezug genommen wird. Als Basis dienen in abgewandelter Form die Regeln der 37signals, welche diese unter dem Titel "Getting Real" veröffentlicht haben.
http://www.slideshare.net/garrettdimon/improving-interface-design
http://www.slideshare.net/garrettdimon/application-interface-design

Eine Präsentation zum Thema "Designing for AJAX" von Bill Scott von Yahoo!, die sich an den 3 Punkten "Interaction", "Feedback" und "Info" orientiert.
http://www.slideshare.net/billwscott/designing-for-ajax

Frontend Engineering
Von den vier Säulen "Historical Perspective", "Our Belives & Principles", "Knowledge Area & Best Practices" und "Why it all matters" ausgehend nimmt Nate Koechley Bezug auf die Arbeit der Frontend Engineers bei Yahoo!, zu denen er selber auch gehört.
http://www.slideshare.net/natekoechley/professional-frontend-engineering

Noch einmal Nate Koechley. In diesen Präsentationen zeigt er, wie die Performance-Regeln von Yahoo! zu interpretieren und anzuwenden sind. Dabei geht die zweite Präsentation über die 13 ursprünglichen, durch das Firefox-Plugin YSlow abgedeckten, Regeln hinaus, und erweitert diese um neue, interessante Aspekte.
http://www.slideshare.net/natekoechley/high-performance-web-sites-2008/
http://www.slideshare.net/souders/web-20-expo-even-faster-web-sites/

Webdevelopment
Welche Eigenschaften sollte gutes CSS und das damit in Verbindung stehende Markup haben? Diese Frage stellt sich Lachlan Hardy und kommt zu dem Schluß: semantic, readable, hierarchical, alphabetisised, shorthanded, valid, maintainable, beautiful
http://www.slideshare.net/AaronGustafson/transcendent-design-with-css-javascript-web-directions-north-07

Die Präsentation zum großartigen Buch Transcending CSS von Andy Clarke und Molly Holzschlag.
http://www.slideshare.net/AaronGustafson/transcendent-design-with-css-javascript-web-directions-north-07/

Die Behandlung von Formularen im Internet birgt viele Fehlerquellen aber auch große Potenziale. Da ich bei 1&1 zu einem gewissen Teil für die formularlastigen Bestellprozesse verantwortlich bin, sind diese Präsentationen für diesen Aspekt meiner Arbeit besonders interessant.
http://www.slideshare.net/psykoreactor/best-practices-for-form-design/
http://www.slideshare.net/AaronGustafson/learning-to-love-forms-webvisions-07/

Webstandards
http://www.slideshare.net/AaronGustafson/what-you-need-to-know-about-ie8-and-standards
http://www.slideshare.net/gleddy/real-world-web-standards/ (Audio-Mitschnitt)

Wer über diesen Post hinaus über meine Slideshare-Empfehlungen auf dem Laufenden bleiben möchte, sollte dann und wann folgende Seite aufrufen:
http://www.slideshare.net/n.steiner/favorites

P.S.: Die Suche von Slideshare ist (momentan?) unglaublich schlecht. Am besten ist man beraten, wenn man über die Empfehlungen oder die Slides und Favoriten der Lieblings-Autoren auf die Suche nach guten Präsentationen geht.

Geschrieben von Nico Steiner in Referenzen um 21:16 | Kommentare (0) | Trackbacks (0)

Freitag, 18. Juli 2008

Neue 404-Fehlerseiten

Bis auf wenige Ausnahmen waren die 1&1 Seiten für 404-Fehler etc. mehr schlecht als recht. Bei DSL und Mobile Internet wurde jetzt ein Schritt hin zu besseren Fehlerseiten gemacht. Anstatt einfach nur auf den Fehler hinzuweisen, bieten diese Seiten neben möglichen Optionen, mit denen der Kunde auf diese Fehler reagieren kann, auch optisch eine stärkere Bindung an das 1&1 Layout.

Hier ein Beispiel für eine neue Fehlerseite:

http://dsl.1und1.de/seite-nicht-vorhanden

Im Vergleich dazu sah die Seite vorher so aus:



Mein Beitrag zu diesen neuen Seiten war ein wenig Beratung zur technischen Umsetzung.

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

Mittwoch, 16. Juli 2008

YSlow-Provider-Vergleich

Wo stehen die großen DSL-Provider im YSlow-Performance-Vergleich? Als Basis dient das entprechende Firefox-Plugin von Yahoo zur Messung der Webseiten-Performance auf der Basis von verschiedenen Regeln, welche hier zusammengefasst sind.

Freenet (DSL & Telefonie)
Performance-Grade: D (67)
Rules: D (F) F A A A A (n/a) A A A A A

1&1 (Surf & Phone)
Performance-Grade: D (60)
Rules: F (F) F B A B A (n/a) A A A A B

Arcor (DSL - Surfen & Telefonieren)
Performance-Grade: F (48)
Rules: D (F) F F C C B (n/a) A D A A A

Alice
Performance-Grade: F (39)
Rules: F (F) F F A F B (n/a) B F A A F

T-Online (DSL & mehr)
Performance-Grade: F (34)
Rules: F (F) F F A F B (n/a) C F A A F

Mein Fazit
Die Entwickler von Freenet haben ihre Hausaufgaben gemacht und setzen bei einer zugegeben nicht allzu komplexen Seitenstruktur die YSlow-Kriterien nahezu perfekt um. Auf ungefähr gleichem Niveau befindet sich bei einer sehr viel komplexeren Seitenstruktur 1&1 - die restlichen Provider sind momentan weit abgeschlagen.

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

Mittwoch, 9. Juli 2008

Qualität deutlich verbessert!

In der letzten Zeit hat sich die Qualität des Frontend-Codes - vor allem des Markups - bei einigen 1&1-Projekten deutlich verbessert. Zu verdanken ist dies einer gewissen Sesibilisierung für dieses Thema von meiner Seite, vor allem aber der Aufgeschlossenheit der Kollegen im Website-Management, welche die Seiten ja letztendlich produzieren.

Am Beispiel der DSL-Startseite möchte ich ein paar Punkte ansprechen, die sich in diesem Zusammenhang verbessert haben. Leider fehlen mir entsprechende Negativ-Beispiele aus alter Zeit - genug davon gab es jedenfalls.

Semantik
Die Layouts mit den sinngebensten HTML-Elementen im Markup abbilden - das gelingt mittlerweile an vielen Stellen perfekt. Hier ein paar Beispiele.





Durchgängige Headline-Hierarchie
Auch hier eine perfekte Umsetzung.



Valider Code
Auch dieses wichtige Qualitätsmerkmal zieht sich durch die gesamten Produktseiten.



Last, not least
Weiterhin ist auf allen Seiten ein korrekter Doctype angegeben, das CSS ist weitgehend fehlerfrei und durch die projektweite Integration einer reset.css entfallen die lästigen browsereigenen Styles.

Geschrieben von Nico Steiner in Referenzen um 17:38 | Kommentare (0) | Trackbacks (0)

Reiter-Navigation für Hosting US

Mit Einführung des neuen 1&1 MailXchange bei Hosting US werden dessen neue Features in unterschiedlichen Boxen beworben. Diese Boxen können über eine Reiter-Navigation ein- bzw. ausgeblendet werden.



Es war meine Aufgabe, diese Reiterfunktionalität mit JavaScript auf beliebiges Markup abbildbar zu machen. In der Praxis sieht das so aus, daß verschiedene Reiter-Elemente initialisiert und diesen Elementen Bereiche zugeordnet werden. Wird ein Reiter gehovert bekommt er eine bestimmte CSS-Klasse. Wird er geklickt, wird dieser Reiter als aktiv markiert und der zugehörige Bereich wird eingeblendet. Alle anderen Bereiche in diesem Reiter-Verbund werden zeitgleich ausgeblendet.

Weiterhin ist es möglich, die Reiter periodisch in einem definierten Interval anzusteuern. Diese Animation startet mit Laden der Seite.

Geschrieben von Nico Steiner in Referenzen um 15:58 | Kommentare (0) | Trackbacks (0)

Flash mit Light-Box

Im Zuge der neuen DSL-Kampagne wird der 1&1 HomeServer in einem Flash-Film beworben. Dieser Flash-Film öffnet sich in einer Light-Box.



Mein Beitrag war die Programmierung eines fexiblen Light-Box-Moduls basierend auf der YUI-Library. Weiterhin habe ich ein JavaScript-Modul entwickelt, welches das Einbinden von Flash-Filmen vereinfachen und innerhalb unserer Abteilung standardisieren soll. Zusätzlich dazu wird ein externes Script zum Prüfen der Flash-Verfügbarkeit und -Version genutzt.

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