Dienstag27. Juli 2010

Dieser Beitrag zu Validität und ihrer Bedeutung in der aktuellen Webentwicklung liegt mir schon seit Monaten auf der Zunge. Bisher gab es immer genug Ablenkungen, ihn nicht zu schreiben. Heute ist das anders, denn heute hat mich eine Anfrage im YAML-Forum dazu gebracht, dieses Thema endlich mal wieder auf den Tisch zu bringen.

Worum geht es? Vor langer Zeit als die Welt noch schwarz-weiß ... als das Web noch jung und HTML4 Quellcode noch fürchterlich chaotisch und gefühlt frei jeglicher Stilregeln geschrieben werden konnte, da kamen einige schlaue Webschaffende auf die Idee, dass es doch ein wirklicher Fortschritt wäre, wenn sich die Entwicklergemeinde an Standards halten würde. Webstandards kamen in Mode und der Ruf nach sauberem, validem Code drang selbst in die hintersten Gassen. XHTML 1.0 war damals der große argumentative Renner, denn XHTML zwang Webentwickler zu Ordnung und Sauberkeit im Code. Tags mussten geschlossen, Attributwerte zwingend in Anführungszeichen gesetzt werden. Die jahrelange Arbeit mit XHTML hat mir zwar XML an sich kein noch so kleines Stückchen sympathischer gemacht (aufgrund seiner Fehlerintoleranz) aber es hat mich gelehrt sauberen Code zu schreiben.

Und da auch ich zu denen gehöre die Bücher veröffentlichen, um mein Wissen um HTML & CSS weiterzugeben, bin ich auch nicht ganz unschuldig an der Situation, die sich uns Entwicklern heute bietet. Seit vielen Jahren predigen wir: Validiert Euren Code! Wenn irgendetwas nicht funktioniert und Ihr jemanden nach Hilfe fragen wollt: Erst validieren – dann jemanden fragen! So oder so ähnlich liest man es in jedem CSS-Buch (und davon gibt es mittlerweile reichlich). Leider haben offensichtlich die wenigstens Autoren es bisher geschafft, den ahnungslosen Neulingen in einfachen Worten zu vermitteln, was Validität eigentlich bedeutet und was die Ausgaben der Validierungsdienste des W3C (HTML | CSS) wirklich bedeuten.

Dieser Umstand ist mir so richtig klar geworden, als ich vorhin über folgendes Foreneintrag gestolpert bin:

Hallo Zusammen!

Ich habe per CSS folgende Codes eingefügt um einen Text vertikal darzustellen. Soweit funktioniert das auch. Jedoch bei der W3C Validierung werden diese CSS Anweisungen als Fehler deklariert. Gibt es hierzu auch eine valide Möglichkeit?

Dazu wurde folgender Codeschnipsel mitgeliefert:

-webkit-transform: rotate(-90deg); 
-moz-transform: rotate(-90deg);    
-o-transform: rotate(270deg);

Ein Einsteiger präsentiert sauberes CSS3, denkt bei den Vendor-Präfixes an alle wichtigen Browser, freut sich zurecht über den Erfolg (”...Soweit funktioniert das auch…”) und wendet sich anschließend trotzdem verzweifelt an ein Forum weil der W3C-Validator ihm ein schlechtes Gewissen eingeredet hat. Das muss definitiv aufhören, denn spätestens wird das ehemalige Mantra der Pflicht-Valität zum Boomerang für uns erfahrenere Entwickler, denn hier werden die Aussagen des Validators fehlinterpretiert.

Den gesamten Beitrag lesen


Dienstag20. Juli 2010

Lange Zeit war es still hier im Hause Highresolution ... und immer wenn es ganz still ist, passiert plötzlich irgendwas Aufregendes. So auch jetzt, denn es stehen Veränderungen beruflicher Natur direkt vor der Tür. Ich bleibe dem Bauingenieurwesen treu, wechsle jedoch auf die Verlagsseite. Insofern kein Richtungs- aber doch ein bedeutsamer Spurwechsel.

Nach nunmehr 6 Jahren als wissenschaftlicher Mitarbeiter zieht es mich ein wenig weg vom universitären Umfeld. Es geht zurück in die freie Wirtschaft. Seit Juli pendle ich bereits regelmäßig zwischen Dresden und Berlin, ab August übernehme ich die Chefredaktion der BAUTECHNIK, einer renomierten wissenschaftlichen Fachzeitschrift für Bauingenieure beim Ernst & Sohn Verlag. Für mich ist es eine große Herausforderung in dem mir nicht fremden aber doch neuen und ungewohntem Terrain des Verlagswesens. Aber es sind schließlich die Herausforderungen, welche die tägliche Arbeit spannend und auf Dauer erfüllend machen und ich freue mich riesig auf die neue Aufgabe. Damit war allerdings bereits Anfang des Jahres (als diese Entscheidung fiel) auch klar, dass meine Dissertation unter Hochdruck bis zum Sommer fertig werden musste. Damit wäre dann auch der eigentliche Grund genannt, warum hier in den letzen Monaten keine neuen Beiträge mehr erschienen. Es blieb schlicht weg keine Zeit. Auch jetzt geht noch das eine oder andere Wochenende dafür drauf, dennoch sind die größten Hürden genommen. Das Licht ist also schon sehr nahe.

Was bedeutet das alles nun für dieses Blog und YAML? Dies ist mein privates Weblog und das werde ich auch weiterhin mit meinen Gedanken zu HTML, CSS und JavaScript füllen sowie vermutlich auch den einen oder anderen Kommentar hinsichtlich des HTML5 & CSS3 Hypes hinterlassen – kurz: hier geht es weiter wie gewohnt. YAML entwickelt sich seit nunmehr fast 5 Jahren kontinuierlich weiter – ein Ende ist auch hier nicht in Sicht. Die Reife des Frameworks macht die Entwicklungsarbeit für mich allerdings etwas angenehmer denn die Releasezyklen werden naturgemäß etwas länger. Der Browsermarkt ist aktuell so richtig in Bewegung und das bedeutet, dass bei YAML diesen Fortschritten Rechnung trägt. Für die effektive Arbeit mit den grafischen Gestaltungsmöglichkeiten von CSS3 gilt es, bestmögliche Voraussetzungen zu schaffen. Dass bedeutet in erster Linie, dass Alternativen zum Clearing mit der Eigenschaft overflow benötigt werden, um die Arbeit mit CSS3-Eigenschaften wie text-shadow und box-shadow weiter zu erleichtern. Daneben haben es Browserhersteller offenbar noch nicht geschafft, den neuen HTML5-Elementen einheitliche und vor allem sinnvolle Standardstyles mitzugeben. Hier wird es eine geringfügige Anpassung des Reset-Bausteins geben, der die aktuell noch vorhandenen Inkonsistenzen beseitigt. Die dritte Baustelle betrifft den Formularbaukasten. Dieser vergleichsweise noch junge Teil des YAML-Framework wird aktuell überarbeitet und soll einfacher individuell gestaltbar werden. Diese und vermutlich einige weitere Änderungen liegen aktuell in einer Version 3.3 alpha, laufen bisher prima und gehen demnächst an die ersten Tester raus. Nein – es gibt noch kein Releasedatum.

Auch in Bezug auf den YAML Builder ist Großartiges in Vorbereitung. Der eine oder andere konnte sich auf dem Barcamp Mainz im letzten November oder auf dem diesjährigen MobileCamp in Dresden bereits einen ersten Eindruck von dem verschaffen, was bereits seit längerem in der heimischen Entwicklerküche auf heisser Flamme köchelt. Natürlich musste ich auch hier eine Pause einlegen, dennoch reift das Projekt Schritt für Schritt und ich freue mich bereits darauf, hier im Blog die ersten Details verlauten lassen zu können. Lange wird es nicht mehr dauern, versprochen.


Freitag12. Februar 2010

Skiplinks gehören zu den grundlegenden Navigationshilfen, welche die Zugänglichkeit komplexer Webseiten verbessern können, indem sie es dem Nutzer erlauben, wichtige Elemente einer Webseite schnell und ohne Umwege zu erreichen, z.B. die Hauptnavigation, den Inhaltsbereich oder ein Formular. Aufgrund meiner Erfahrungen bei der Arbeit an und mit YAML gibt’s hier nun einen kleinen Best Practice Beitrag zum Thema.

Anforderungen

Zunächst wären noch einmal die Anforderungen an Skiplinks zu definieren. Die WCAG 2.0 gibt unter G1 Testkriterien vor:

  1. Stelle sicher, dass Skiplinks die ersten focussierbaren Elemente der Webseite darstellen.
  2. Stelle sicher, dass die Linkbeschreibung eine verständliche Beschreibung des Sprungzieles enthält.
  3. Stelle sicher, dass der Skiplink entweder immer oder zumindest dann sichtbar ist, wenn der Tastaturfocus auf ihm liegt.
  4. Stelle sicher, dass beim Aktivieren eines Skiplinks der visuelle Focus im Viewport des Browsers auf das Ziel gesetzt wird.
  5. Stelle sicher, dass nach dem Aktivieren des Skiplinks der Tastaturfocus auf das Zielelement gesetzt wurde.

Die WCAG ist unnachgiebig, was diese Kritierien betrifft: Alle 5 Testkriterien müssen erfüllt werden.

Den gesamten Beitrag lesen


Montag01. Februar 2010

Die Frage stellt sich bei jedem neuen Webprojekt: Welche Browser/Browsergenerationen sollen unterstützt werden? Grenzt man die Fragestellung auf unser aller Lieblingsproblem, den Internet Explorer, ein, so lässt sich die Frage darauf reduzieren, wie man mit dem Internet Explorer 6 umgeht. Schleppt man ihn irgendwie mit (wird bei den meisten Projekten nach wie vor gemacht) oder ignoriert man ihn. Pfiffige CSS-Entwickler setzen auf Graceful Degradation oder Progressive Enhancement, um neben der schwarz/weiß Option (ja/nein) noch ein paar argumentative Graustufen einfügen zu können.

Doch so gern und trefflich die Blogosphäre sich auch über den IE6 und dessen Schwächen auslässt so gründlich wird in der Diskussion meist außer acht gelassen, dass auch andere Browser einem Alterungsprozess unterliegen. Wer testet denn heute noch ernsthaft seine Projekte gegen den Firefox 1, Safari 2 oder Opera 8? Der Firefox 1.0 beispielsweise stammt aus dem Jahre 2004 und hat damit ebenfalls bereits 5+ Jahre auf dem Buckel. Schon mal drüber nachgedacht?

In den Focus rückt diese Fragestellung bei mir durch Googles aktuelle Ankündigung, den IE6 bei den eigenen Applikationen nicht mehr zu unterstützen - worüber auch sofort wieder reichlich berichtet wird. Nur steht in Googles Ankündigung weit mehr als das Ende des IE6-Supports. Auch die nächste Generation der “Guten” - Firefox 2.x, Opera 9, Chrome 2.x usw. nähert sich dem Ende ihrer Unterstützung. Zwar findet man diese Aussage in dieser Deutlichkeit nicht in diesem Google-Blogpost, dafür beispielsweise bei Yahoo’s Aufstellung für den abgestuften Browsersupport der YUI Library.

Interessant an der Yahoo-Tabelle ist beispielsweise, dass selbst der Firefox 3.0 unter Windows Vista/7 bereits den A-Grade Status verloren hat. Von Opera ist generell nur die aktuelle Version 10 in der Liste vertreten und auch der Safari unter Mac nur in der aktuellen Version 4 gelistet wird. Alle älteren Versionen werden aktuell als B-Grade eingestuft. Sie werden selbstverständlich weiterhin unterstützt werden - jedoch bereits heute mit geringerer Priorität. Nun dreht es sich sowohl bei Google als auch bei Yahoo in allererster Linie um die JavaScript-Unterstützung/-Performance. In Sachen CSS ist es vor allem der Internet Explorer 6, der mit zahlreichen Bugs gesegnet ist, die Webentwicklern bei den immer komplexer werdenden Applikationen mehr und mehr zu schaffen machen. Doch auch bei den modernen Browsern werden die Unterschiede momentan eher größer als kleiner. Konkretes Beispiel: Die JavaScript-Performance des aktuellen Firefox 3.6 ist nicht einmal halb so gut wie die des Chrome 4. 

Abgestufter Browsersupport bei HTML5 & CSS3?

Die Frage, die ich deshalb in den Raum stellen möchte lautet: Wie geht man mit den älteren Generationen der “guten” Browser um? Ich klammere hier bewusst den IE 6 und 7 aus, mir geht es um Firefox 1.x,2.x,3.0.x, den Opera 8.x,9.x, den Chrome 1,2 oder auch Safari 1,2. Was die immer weiter wachsende Unterstützung für beispielsweise CSS3 und HTML5 angeht, so gibt es mit den älteren Generationen sicherlich weniger Probleme. Doch was ist mit waschechten CSS-Bugs?

Der Firefox 3.6 ist beispielsweise der erste Firefox überhaupt, der CSS-Tabellen endlich fehlerfrei darstellt. Alle seine Vorgänger hatten da so ihrer Schwierigkeiten. Der Firefox 2.x ließ teilweise Labels hinter Formularelementen verschwinden. Im Gegensatz zum Internet Explorer 6, der neben seinen zahlreichen CSS-Bugs ebenso zahlreiche Parser-Bugs mitlieferte, über deren Ausnutzung viele Probleme gefixt werden konnten, steht man bei den “guten” Browsern meist im Regen. Bugfixes für deren CSS-Probleme sind Mangelware. Mit der wachsenden Verbreitung von Firefox und Co. und den immer neuen Versionen/Generationen wird auch die Streubreite bei den Anwendern zunehmen und damit wird es zwangsläufig dazu kommen, dass diese Bugs “sichtbar” werden, wenn aktuelle Webtechnologien vermehrt Anwendung finden.

Wir beginnen gerade erst, die ersten graphischen Spielereien von CSS3 in unsere Projekte einzubauen. Ein falscher Schatten oder eine runde Ecke stellen in der Regel kein Problem dar. Doch wie sieht es aus, wenn wir damit beginnen, die neuen Layout-Module zu verwenden (Mehrspaltigkeit, Alternative Box-Modells, ect)? Das sind layoutkritische Elemente, was wenn hier Bugs auftreten, weil die ersten Implementationen noch nicht ausgereift waren - aber noch nicht vom Browsermarkt verschwunden sind?

Thema HTML5: Auch hier hat die Entwicklung deutlich an Fahrt gewonnen. Im letzten Jahr gab es reichlich Tutorials, wie HTML5 schon heute angewandt werden kann. Doch auch hier werden wir bei der aktuellen Geschwindigkeit Mühe haben, dass ältere Browsergenerationen von FF und Co. bereits aus den Statistiken verschwunden sind, bevor wir damit richtig anfangen zu arbeiten - oder wir warten bis 2020 (das will niemand wirklich, oder?). Dem Firefox 2 kann man nur sehr mühevoll den Umgang mit den neuen Elementen beibringen, vernünftiges Styling ist fast unmöglich. Für den IE7 und 8 gilt das gleiche, doch beide werden uns vermutlich noch eine ganze Weile begleiten.

Es bleibt spannend und unberechenbar ...

In die Browserwelt ist sichtlich Bewegung gekommen. HTML5 und CSS3 nehmen Woche für Woche weiter Fahrt auf. Die Performance-Entwicklung der JavaSript-Engines von Google, Safari und Opera (v10.5) eröffnet Möglichkeiten, die vor 1..2 Jahren noch völlig undenkbar waren - ganz unabhängig von den zahlreichen neuen Features, die uns durch jedes Browserupdate beschert werden. Jetzt also, wo der IE6 so langsam von der Bildfläche verschwindet, haben wir nicht zwingend Eitel Sonnenschein. Stattdessen wird sich der Focus einfach etwas verschieben, weg von dem einen zentralen Problembrowser hin zu den zahlreichen alten Browsergenerationen, welche die neuen Webtechnologien unzureichend oder fehlerhaft implementiert haben.

Nach so vielen vagen Gedanken würde mich Eure Meinung interessieren:

  • Wie geht mit der wachsenden Versionsvielfalt und den damit verbundenen Leistungsunterschieden um?
  • Wie reagiert Ihr auf Browserbugs, die sich nicht mehr so leicht fixen lassen, wie im guten alten Internet Explorer 6?
  • Wie handhabt Ihr die unterschiedliche Unterstützung von Standards (HTML5, CSS3)?

Entfernen wir uns wieder von “Graceful Degradation” und “Progessive Enhancement” weil die Leistungsunterschiede im Vergleich zu heute tendentiell geringer werden oder bleiben wir als Webentwickler so tolerant wie bisher und sorgen uns in Zukunft auch um die älteren Guten, auch wenn deren Aufkommen in der Statistik geringer sein wird als es der IE6 momentan noch ist?


Sonntag06. Dezember 2009

Am 4. Dezember wurden im Rahmen einer einer feierlichen Veranstaltung im Postbahnhof Berlin die diesjährigen Gewinner des mittlerweile 6. Biene-Wettbewerbs (Barrierefreies Internet Eröffnet Neue Einsichten) ausgezeichnet . Eine Woche zuvor waren die 24 Finalisten bekannt gegeben worden, die alle formalen Kriterien und – der folgende Punkt wird vielfach vergessen – umfangreiche Nutzertests erfolgreich bestanden haben. Aus der Reihe der Finalisten kürte eine prominent besetzte Jury schließlich die besten Webauftritte und vergab insgesamt 17 Biene-Preise in Gold, Silber und Bronze.

Wie schon im letzten Jahr war auch dieses Mal YAML wieder zahlreich unter den Finalisten und Preisträgern vertreten. Insgesamt 5 der 24 Webseiten im Finale des Wettbewerbs setzen auf das bekannte CSS-Framework, drei davon wurden letztlich mit einer Biene in Bronze prämiert.

Hier noch einmal die Finalisten und Preisträger mit YAML unter der Haube:

  • Gemeinde Issum:www.issum.de – BIENE in Bronze (Kategorie ›Komplexe Informations- und Kommu­nikations­angebote‹)
  • Stadt Nettetal: www.nettetal.de – BIENE in Bronze (Kategorie ›Komplexe Informations- und Kommu­nikations­angebote‹)
  • Naturheilpraxis Angela Käßner: http://www.naturheilpraxis-kaessner.de – BIENE in Bronze (Kategorie ›Einfache Informations- und Kommu­nikations­angebote‹)
  • Stadt Kevelaer: www.kevelaer.de (Kategorie ›Einfache Informations- und Kommu­nikations­angebote‹)
  • Stadt Emmerich am Rhein: www.emmerich.de (Kategorie ›Einfache Informations- und Kommu­nikations­angebote‹)

Dabei steuert das YAML Framework nur einen kleinen Teil zur Barrierefreiheit einer Webseite bei, die Hauptarbeit liegt nach wie vor bei den verantwortlichen Webdesignern und Redakteuren, denn so aufwändig die Erstellung einer Webseite auch ist, stellt deren Betrieb mit regelmäßigen Anpassungen/Überarbeitungen und ständigen redaktionellen Änderungen die wahre Herausforderung dar, soll der hohe Qualitätsstandard dauerhaft gehalten werden. Als Technische Basis der verschiedenen YAML-basierten Seiten kamen die Framework-Versionen 2.5.x und 3.0.x zum Einsatz. Schon daran kann man erkennen, dass der Aufbau komplexer Informationsangebote viel Zeit in Anspruch nimmt, denn die Version 3.1 (Januar 2009) sowie die aktuelle Version 3.2 waren noch nicht vertreten. Damit aber genug dazu.

Besonders beeindruckend finde ich die Tatsache, dass trotz der gestiegenen Anforderungen an die Bewerber, vermehrt komplexe Angebote ins Finale einziehen und Preisträger werden. So konnten in diesem Jahr, der Webauftritt der DHL, das Online-Banking-Portal der Credite Suisse oder auch der SWR und die Zeit Online silberne Bienen mit nach Hause nehmen. Für den Webshop Manufaktum gab’s gar eine Biene in Gold.

Ebenfalls immer mit dabei sind die zahlreichen Kritiker, die Finalisten und Preisträger im Nachhinein sezieren und dabei immer wieder vermeintliche Haare in der Suppe finden. Sei es die mangelnde Validität oder die vergleichsweise schlichte Optik mancher Seite oder oder oder. Doch die Biene bewertet keine Photoshop-Künste, sondern Zugänglichkeit. Und so stellt die Riege der Finalisten und Preisträger einen aus meiner Sicht im Bezug auf die Designqualität einen durchaus repräsentativen Querschnitt aktueller Webseiten dar. Darunter sehr schöne Seiten wie www.bund.de oder die Zeit Online und daneben eben auch weniger schicke Angebote wie die des Hamburger Verkehrsverbundes (Biene in Bronze) oder der Stadt Suttgart. Hier mag dem einen oder anderen das Bling Bling  fehlen, dafür überzeugen alle diese Seiten mit hervorragender Zugänglichkeit, was viel zu viele Hochglanz-Webseiten nicht für sich in Anspruch nehmen können. Und an dieser Stelle vertraue ich der Jury, denn ins Finale kommt man nicht allein durch das Abarbeiten von Barrierefreiheits-Checklisten sondern die Seiten müssen sich in zahlreichen Nutzertests beweisen - Design hin oder her.

Allen Kritikern sei daher angeraten: Kritik ist erlaubt, schnödes Meckern ist nur peinlich. Aber wenn Ihr es besser wisst dann geht bei Euren eigenen Projekten mit gutem Beispiel voran und zeigt, dass es besser geht. Entwickelt charmante Lösungen, erstellt attraktive Webseiten, reicht diese zur Biene 2010 ein. Dann könnte der Anteil attraktiver Angebote weiter steigen und vielleicht hört dann auch endlich mal die BF-Szene damit auf, sich selbst der der Lächerlichkeit preiszugeben, indem permanent gegenüber Berufskollegen gemeckert und Preisträger seziert werden. Tomas Caspers hat es auf der diesjährigen Webtech-Konferenz auf den Punkt gebracht.

“Auch bei Beachtung der WCAG 2.0 und dem Einsatz moderner Webtechniken wie WAI-ARIA kann man dennoch an einzelnen Details scheitern. Doch passiert dies immernoch auf einem weitaus höheren Niveau als bei jenen, die sich aus Angst vor dem möglichen Scheitern gar nicht erst auf den Weg machen.”

Und genau so sehe ich das auch: Der Weg ist das Ziel.

Abschließend sei noch die Stadtbibliothek Marzahn-Hellersdorf erwähnt, die ebenfalls mit einer Biene in Silber ausgezeichnet wurde. Dieses Projekt wurde innerhalb von 3 Jahren ausschließlich von engagierten Mitarbeitern der Bibliothek realisiert – ganz ohne eine professionelle Agentur. Eine solche Leistung verdient höchsten Respekt.


Seite 8 von 44 Seiten

« Erste  <  6 7 8 9 10 >  Letzte »