Open Source Web Design

oswd.org

Advertisements

HTML/XHTML – Validator

Wer nicht mit fetten Programmen unterwegs ist oder sich gerne seine Werkzeugsammlung selbst zusammenstellt, der ist auf eigenständige HTML-Validatoren angewiesen:

• Der Klassiker vom heiligen W3C → validator.w3.org/
• TotalValidator.com zum Download und als Firefox-Plugin

Browser-Emulation

Bei spoon.net/browsers lassen sich gängige Browser virtualisiert starten.

Free CSS-Layouts

Ausgehend von einer Riesenübersicht bei drweb.de ’ne kleine Auswahl von einfachen Layoutquellen:

• Ultimate multi-column liquid layouts (em and pixel widths) von Matthew James Taylor (zum Benutzen Quelltext der Seiten anzeigen lassen)
• 8 Spalten-Layouts von Jimmy Lin ( auch hier zum Benutzen Quelltext der Seiten anzeigen lassen)
• Little Boxes allerdings mit CSS-Hacks

Wem das alles zu englisch und zu professionell ist, dem sei die Einführung

• Layouten ohne Tabellen auf css4you.de empfohlen

CSS

• vielleicht ein ganz brauchbarer Anfängerkurs bei html-seminar.de
• Standardreferenzen: css4you.de und de.selfhtml.org
• 2-seitige Kurzübersicht zum Ausdrucken

Mit und ohne BOM

Bei w3.org entdeckt. Allerlei belehrende Artikel über Zeichencodierung, utf-8 mit und ohne BOM, entities, …

doctype

Guckst du hier:

• mediaevent.de mit ein wenig Erklärung
• css4you

Embedded Video

Videos lassen sich schwieriger einbinden als Grafiken, weil auf jedem Rechner unterschiedliche Codecs installiert sind und es keine native Browser unterstützung gibt. Meist konvertiert man Filme ins FLV-Format und verwendet einen Flash-Player, der das Video dann zum Browser streamt:

• Weit verbreitet der JW-Player, mit dem youtube 2005 angefangen hat
• Nicht ganz so viele Optionen, sieht aber schick aus: NonverBlaster:hover
• Flowplayer Ltd ein 2-Mann-Projekt aus Helsinki bastelt einen ganz passablen Videoplayer fürs Netz.

Vorsicht beim Offline-Experimentieren: Die Player gehen i.a. davon aus, dass das Projekt per HTTP über einen Webserver aufgerufen wird. Bei Aufrufen über das Dateisystem tut sich häufig nichts.

Web 2.0 und Menschen mit Behinderungen

Die alten Sachen in puncto Barrierefreiheit kannte ich ja schon:

• klares Markup, das ein Screereader gut versteht
• kein Tabellenlayout
• Alternativtexte
• Alternativen zu Captchas

Aber die schöne neue Web-2.0-Welt birgt neue Gefahren, wie der Artikel von Michael Schaten zeigt:

• kontrastarme Modefarben
• alphabetisch geordnete Tag-Clouds → die Hervorhebung der Relevanz durch Schriftgröße geht mit Screenreader verloren
• AJAX → Screenreader kommen durcheinander, wenn nur Teile der Seite neu geladen werden

Test Metaangaben

Für die Kurzkontrolle empfehle ich folgende Quellen:

• Die Metaangaben bei selfhtml
• Guter Text zu doctypes bei mediaevent.de dann weiter zu Doctypes