Montag02. März 2009

Seit heute ist die 15. Ausgabe des T3N Magazins verfügbar und dieses Mal habe ich mal wieder einen Artikel beigesteuert. Auf dem Berliner Barcamp im Oktober letzten Jahres war ich mit den yeebase-Jungs ins Gespräch gekommen und habe Anfang Januar habe ich dann in die Tasten gehauen. Wenig verwunderlich dreht es sich um Layout-Frameworks.

  Seit langem schon ärgert es mich, dass in Berichten über CSS-Frameworks immer wieder die z.T. grundverschiedenen Ansätze der verschiedenen Projekte undifferenziert in einen Topf geworfen und miteinander verglichen werden. Deshalb fasse ich alle aktuell existierenden Projekte zunächst unter dem übergeordneten Begriff Layout-Frameworks zusammen. Ausgehend vom gewählten Layoutansatz es Frameworks folgt dann eine Unterscheidung in Grid- und CSS-Frameworks (eine Einstufung, die ich auch schon beim in Webkongress in Erlangen vorgestellt habe).

Grid-Frameworks
Sinn und Zweck eines Grid-Frameworks sind schnelle Ergebnisse in der Anwendung in den Grenzen des vorgegebenen Rasters.
CSS-Frameworks
Sinn und Zweck eines CSS-Frameworks ist die Bereitstellung einer möglichst leistungsfähigen Entwicklungsumgebung

Den roten Faden durch den Beitrag bildet die Betrachtung der Entwicklungszeit eines Layouts, wobei sich Layout-Frameworks in Abhänhigkeit des Layoutansatzes und der gewährten Freiheiten recht gut zwischen den beiden Extremen, dem Einsatz von Fertigtemplates (minimaler Aufwand, kein Einfluss auf Codequalität) oder der vollständigen Handkodierung des Layouts (volle Codekontrolle, maximaler zeitlicher Aufwand zur Layouterstellung) einordnen lassen. Unabhängig von persönlichen Vorlieben für den einen oder anderen technischen Weg lässt sich über die Zeitschiene sehr deutlich zeigen, wo die maßgeblichen Vorteile von Layout-Frameworks liegen - in der geringeren Entwicklungszeit.

Die gewonnene Zeit kann für Verbesserungen von Usability und Accessibility und/oder Performanceoptimierungen genutzt werden, denn diese Eigenschaften professioneller Webseiten sind in erster Linie contentabgängig. Das umschließende Layoutgerüst von Layout-Frameworks bietet zwar ebenfalls Potential, jedoch weit weniger als oft vermutet. Bei typischen Größen von 200 ... 300 kB komplexer Webseiten hat das Seitenlayout (HTML und CSS) im Durchschnitt einen Anteil von 5-10 Prozent (unabhängig von der Entstehung).

Im zweiten Teil des Artikel dreht sich dann auch alles um Performance. Frameworks bieten hier aufgrund ihres modularen Aufbaus des CSS naturgemäß Angriffsfläche für Kritik. Kommentare im CSS bedeuten verlängerte Ladezeiten, jeder einzelne CSS-Baustein muss vom Server angefordert werden (HTTP-Requests), was zwangsläufig mit Wartezeiten verbunden ist. Vergessen wird bei dieser Diskussion zumeist, dass auch bei der Handkodierung von Webseiten kaum ein Entwickler auf Zeilenumbrüche, Einrückungen und den einen oder anderen erläuternden Kommentar verzichten kann. Worauf ich hinaus will: Ob Framework-Einsatz oder Handkodierung - die Komprimierung von CSS-Dateien und die Reduzierung von HTTP-Requests sind generelle Optimierungszenarien, um die Performance einer Webseite zu steigern. Wer Performance-Optimierung ernsthaft betreibt, der kommt um eine komprimierte Live-Version des Entwickler-CSS nicht herum.

 


Mittwoch25. Februar 2009

Seit gestern macht die Heise-Meldung über die Fa. Xenocode und ihre virtualisierten Webrowser, welche in einer Sandbox laufen und somit keine lokale Installation benötigen, die Runde in diversen Blogs und bei Twitter. Zitat aus der Heise-Meldung:

“Auf der Website des Herstellers Xenocode stehen sieben verschiedene Browser zum Download bereit, die in ausführbare .exe-Dateien verpackt sind. Damit können etwa Webentwickler ihre Kreationen direkt in einem Internet Explorer der Versionen 6, 7 und 8 sowie in Chrome, Safari, Firefox und Opera testen.”

Ich habe heute morgen die IE-Varianten kurz getestet und kann nur ausdrücklich davon abraten, diese Pseudo-Sandbox-Tools zu verwenden. Auf meinem XP Rechner war nach einem einminütigen Test des Sandbox-IE6 mein lokal installierter IE7 unbenutzbar und musste vollständig neu installiert werden (auch ein Reboot zuvor hatte keine Besserung gebracht). Im selben Atemzug, in dem ich das Dilemma bemerkte, flatterten bereits ähnlich klingende Problemmeldungen von Freunden (Jens Grochtdreis, Tom Klingenberg) bei mir ein, leider in beiden Fällen für mich ca. 10min zu spät.

Die Kommentare unter dem Heise-Newsartikel füllen sich übrigens auch zunehmend mit Problemmeldungen, die darauf schließen lassen, dass es sich hier um alles andere als eine saubere und vollständig gekapselte Sandbox-Lösung handelt.

Deshalb: Finger weg von den Dingern!

Für den Test des Internet Explorers ist der IETester nach wie vor die empfehlenswerte und sicherere Alternative, von Firefox gibt es portable Versionen bei portableapps.com. Für Opera, Safari und Chrome ist mir zwar momentan nichts gleichwertiges bekannt, jedoch lassen sich diese Browser leicht installieren und auch wieder rückstandsfrei aus dem System entfernen. Weiterhin gibt es von Microsoft aus Basis von VirtualPC kostenfreie virtuelle Maschinen für IE6 und IE7, auf denen man ebenfalls beliebig viele Browser störungsfrei nachinstallieren und ausprobieren kann. Und zum Abschluss wären dann noch VMWare oder VirtualBox als weitere, zuverlässige Virtualisierungslösungen zu nennen.


Montag16. Februar 2009

YAML kommt bereits seit einigen Versionen mit einem speziellen Debug-Stylesheet daher, welches einerseits ermöglicht, die Layoutstruktur zu visualisieren, andererseits auch darüber Auskunft gibt, ob die CSS-Datei iehacks.css im Internet Explorer korrekt eingebunden ist. Ebenfalls seit einiger Zeit liegt das Debug-Stylesheet dem Downloadpaket bei, sondern es konnte auch über ein kleines Bookmarklet in jede beliebige Seite eingebunden werden. So schön der Gedanke auch ist, so unübersichtlich ist das Ergebnis, wenn ein solches Debug-Stylesheet zuviele Informationen enthält. Deshalb habe ich im Verlauf der letzten Wochen YAML Debug vollständig überarbeitet und eine eigenständige Applikation daraus entwickelt.

YAML Debug Application Screenshot

Die neue Applikation basiert auf jQuery und wird per Bookmark auf jeder beliebigen Seite hinzugeladen. Die Funktionalität umfasst Informationen über den Rendering-Mode, die Anzahl eingebundener externer Stylesheets, Scripts und Bilder. Per Klick können veraltete Elemente oder auch Elemente mit Inline-Styles hervorgehoben werden. Ebenso ist es möglich, sich auf einen Klick einen Überblick über die Layoutstruktur (DIV-Verschachtelung) oder die semantische Auszeichnung der Inhalte direkt im Layout zu verschaffen. WAI-ARIA roles, states und properties können hervorgehoben werden, Relationen z.B. über aria-labelledby macht das Tool durch das Hovern mit der Maus über die jeweilige Eigenschaft sichtbar. Schließlich gibt YAML Debug auch Auskunft über alle eingebundenen Stylesheets. Alle externen Stylesheets können zudem deaktiviert, angezeigt oder direk an den Validierungsdienst des W3C gesandt werden.

Einen vollständigen Überblick über den Funktionsumfang gibt es auf der zugehörigen kleinen Microsite, die ich diesem Projekt spendiert habe. Von dort kann dann auch das Bookmarklet bezogen werden. Aus der Browserwelt werden momentan Firefox 3, Opera 9.x und Safari 3.x/Webkit voll unterstützt, wobei der Safari 3.x aktuell das Deaktiveren von per @import eingebundenen Stylesheets verweigert. Der Internet Explorer 7 erhält momentan nur eine sehr eingeschränkte Unterstützung. Hier habe ich mich aufgrund der doch umfangreichen Abweichungen vom Standard (sowohl bei CSS, als auch bei JavaScript) auf die Bereitstellung der Stylesheet-Infos beschränkt, um gerade bei YAML-basierten Layouts eine einfache Kontrolle der korrekten Einbindung der Patch-Dateien zu ermöglichen. Auf die JS-Nachprogrammierung der ansonsten per CSS funktionierenden Hervorhebungsoptionen habe ich zunächst verzichtet, da es sich bei YAML Debug um ein Markup-Analysetool handelt und dieser ist im Normalfall in allen Browsern identisch. Demzufolge sollte man für seine Tests einen der o.g. voll unterstützten Browser verwenden.

Ich wünsche Euch viel Spaß mit dem Tool und freue über jegliches Feedback, sowohl hier in den Kommentaren als auch über die Projektseite.

Für Feedback (Meinungen, Bugmeldungen oder Wünsche für weitere oder verbesserte Funktionen) habe ich auf der Projektseite ein Kontaktformular eingerichtet, von welchem ihr hoffentlich rege Gebrauch macht. Die aktuelle Version 0.9 ist noch im Betastadium und ich möchte durch den öffentlichen Test mehr Informationen und vor allem Featurewünsche sammeln, um das Tool Schritt für Schritt zu vervollständigen. Ab YAML 3.1.1 wird es im Übrigen auch das bisherige debug.css ablösen.

Nachtrag: Als Spielwiese eignen sich besonders gut die YAML-Layoutbeispiele oder die Seite Einfach für Alle, die bereits mit WAI-ARIA angereichert ist und sich daher die Funktionalität des Tools dort sehr schön testen läst.


Freitag30. Januar 2009

So lautet das fantastische Ergebnis des 2008er Biene Preisverleihung, wenn man es durch die YAML-Brille sieht. Denn alle sechs Finalisten (6 aus 34), deren Webseiten mit diesem CSS-Framework erstellt wurden, sind auch Biene-Preisträger geworden.

Und hier noch einmal die Preisträger in den einzelnen Kategorien:

Damit ging in diesem Jahr jede dritter Biene-Award an eine auf YAML-basierende Webseite, denn insgesamt wurden 17 Bienen vergeben. Auch wenn selbstverständlich der maßgebliche und bei weitem überwiegende Anteil für diese Auszeichnungen bei den verantwortlichen Agenturen und Redakteuren liegt, freue ich mich dennoch außerordentlich über dieses Ergebnis und das Vertrauen in YAML. Mir zeigt es, meine Arbeit geht in die richtige Richtung und deswegen freue ich mich nur allzugern mit allen Preisträgern.

 


Dienstag20. Januar 2009

Seit kurz nach Mitternacht steht YAML 3.1, die neueste Version meines CSS-Frameworks zum Download bereit. Die zugehörige Releasemeldung findet ihr im ebenfalls frisch eröffneten YAML Development Blog, in welchem zukünftig Nachrichten aus dem Dunstkreis des Frameworks veröffentlicht werden, also füttert Eure Feedreader.

Das Blog wird vollständig in englisch geführt werden. Der Grund hierfür ist einfach: YAML hat eine stetig wachsende weltweite Community, die schon lange die Grenzen der deutschen Sprache überwunden hat. Es war also längst an der Zeit, dieser Entwicklung Rechnung zu tragen. Zum zweiten erleichtert es die Arbeit, wenn nicht jede kleine Nachricht zeitlich synchron zweisprachig erscheinen muss. Ich habe vor, dieses Entwicklerblog mittelfristig auch für Drittentwickler zu öffnen, sodass hier ein neuer Informationspool mit Links und Tutorials entsteht.

Und damit zurück zu YAML. Volle 6 Monate Entwicklung stecken in der neuen Version - mit einigen größeren Pausen. Der Versionssprung von 3.0.6 auf 3.1 mag gering erscheinen. Für mich und ich denke auch für alle Anwender ist es dennoch ein großer Meilenstein, denn die zahlreichen neuen Features machen das Framework nun endgültig zu einem Werkzeug, welches den Webentwickler über den gesamten Erstellungsprozess einer Webseite begleitet und unterstützt. Das beginnt beim Screenlayout, über die Gestaltung der Inhalte, der Erstellung von Formularen mit Hilfe des nagelneuen Formularbaukastens bis hin zu einer perfekten Druckversion der Webseite. In allen Bereichen sorgt das Framework dafür, dass sich der Entwickler auf das Wesentliche - seinen Layoutentwurf - konzentrieren kann und der Internet Explorer (ebenso wie zahlreiche CSS-Bugs anderer Browser) weitgehend seinen Schrecken verloren hat.

Ich werde im Verlauf der nächsten Tage an dieser Stelle noch im Detail auf die interessantesten neuen Funktionen von YAML 3.1 eingehen. Im Rahmen dieser Kurzmeldung will ich es bei der Verlinkung der interessantesten neuen Layoutbeispiele belassen, die einen guten Eindruck von der stark erweiterten Leistungsfähigkeit des Systems vermitteln.

Daneben gibt es zahlreiche weitere kleine Verbesserungen über die in Summe wie immer das Changelog Auskunft gibt. Sowohl das “Simple Project” als auch der YAML-Builder wurden bereits auf YAML 3.1 aktualisiert, wobei der Builder natürlich noch nicht die neuen Gestaltungsmöglichkeiten unterstützt (so schnell bin ich nun auch wieder nicht) aber zumindest zu YAML 3.1 kompatiblen Code generiert.

Damit wünsche ich allen Anwendern viel Spaß mit der neuen Version.


Seite 13 von 44 Seiten

« Erste  <  11 12 13 14 15 >  Letzte »