• Roman berichtet mit Foto über die Podcastaufnahme von deimhart.net bei der wir dabei waren, da ging es um die Nummer vier, aktuell ist Nummer 3 online.
• Statt langweiliger Standardtooltipps wie hier, lassen die sich auch aufmotzen, Dieter schreibt über die JS-Tooltipps
• WordPress Permalinks einfach und sicher mit Pluginhilfe umstellen.
• Eine ganze (englischsprachige) Seite mit Hinweisen zu Farbblindheit im Web, Tipps und so… Manche Barriere lässt sich verringern oder gar vermeiden
• Rückmeldungen zur Seite für die ubucon erwünscht, um Kommentare dazu bittet Dirk
• Was sich in der Informatik und Technik so alles getan hat, ein klasse Video mit spannenden Zahlen!

Braillezeile und Tastatur

Markus aka @muhh

Markus bloggt vorwiegend über Microblogging auf blogulus.de häufiger ist er auf identi.ca und twitter jeweils als @muhh zu lesen. Eben auf identi.ca las ich bereits vorm Fucamp seine Ankündigung einer Session über Blinde am PC.

Da ich immer mal wieder über Webstandards schreibe und darauf aufmerksam mache, dass barrierearme Seiten niemandem schaden, aber vielen helfen, passte das perfekt. Ich hatte mich für diese Session bereits vorab entschieden. Roland, der ebenfalls in dieser Session war, bloggte hier im Blog direkt live mit.

Markus erzählte, dass er IT in einem Institut für Umschulungen unterrichtet, so dass er häufig mit Blinden arbeitet. Berichte zum Thema wie Blinde mit einem Rechner umgehen zu lesen ist eine Sache. Beim Tag der Informatik in Zürich hatte ich einmal gesehen, wie Blinde mit einer Braillezeile umgehen, das war wesentlich hilfreicher. Dort war es jedoch so voll, dass ich keine Gelegenheit für Fragen und weitere Informationen hatte. Dieses Mal mit Markus’ Berichten war das anders.

Er führte unter anderem Jaws vor, einen Screenreader, der vorliest. Mir war nicht klar, wie schnell ich dabei selbst in solch einer Session ungeduldig werde. Deshalb kann ich gut verstehen, dass die meisten Blinden sich Texte viel schneller vorlesen lassen, als Sehende es überhaupt noch verstehen können. Trotz allem war es sehr eindrücklich wie wichtig für Blinde sinnvoll strukturierte Informationen sind.

Die Tendenz zu immer mehr Flash-Seiten und ähnlichen Spielereien, die ein Screenreader nicht verarbeiten kann, oder nur teils oder erst die in moderner Version stellt für Blinde eine teils unüberwindbare Barriere dar.

Vieles was uns Sehenden im ersten Moment gar nicht klar ist, ist für Blinde ein großes Hindernis. Logischerweise wollen gerade die Blinden, die in der IT geschult sind, selbständig mit ihrem Rechner umgehen können. Oft scheitert das bereits an der Installation des Betriebssystems. Ausgerechnet Windows für welches die meisten Screenreader optimiert wurden lässt sich nicht selbständig von einem Blinden installieren.

Markus gab am Ende noch Tipps für Softwareersteller, die Blinden helfen Software zu nutzen. Sehr schade fand ich, dass z.B. OpenOffice.org nicht von Blinden genutzt werden kann.

Ich ergänze, bzw. erläutere mal noch was Markus erwähnt hat und beziehe es explizit auf Webseiten:

Tipps für Webautoren um auch für Blinde zugängliche Seiten zu erstellen

• Shortcuts einsetzen und definieren
• relevante Grafiken immer sinnvoll beschriften
  • alt-Attribute sind dafür gemacht
  • automatische eingefügte Texte wie img_0815.jpg helfen allerdings nicht im Gegenteil
  • besser als Unsinn zu schreiben ist ein leeres alt-Attribut: alt=”" (auch ohne Leerzeichen sonst wird es doch vorgelesen)
• jede Funktion, jeder Link, muss per Tastatur erreicht werden können
• Links brauchen ebenfalls sinnvolle Namen
  • das so beliebte hier oder weiter was möglichst noch unzählige Male auf derselben Seite vorkommt ist eine ganz blöde Idee
  • denn die Links werden vorgelesen oder ertastet wenn es siebzehnmal “hier” auf einer Seite gibt, muss sich ein Blinder merken, dass der siebte hier der war, der ihn interessierte, danach vielleicht noch der vierzehnte, wenn das heißt erst wieder alles vorlesen lassen zu müssen…
• Access-Keys sind eine gute Idee, leider sind sie nicht standardisiert. Wenn eine Webseite wichtig genug ist, um intensiver damit umzugehen, dann sind Blinde bereit die nötigen Sprungmarken zu lernen.
  • mögliche Tastenkombinationen sind mit ALT+Umschalt 1 usw. möglich, diese Tasten sind üblicherweise nicht bereits vom Betriebssystem oder einem Programm belegt.

Optimal wäre alles zu berücksichtigen, bisher habe ich das auch noch nicht realisiert. Aber es gibt ein paar Punkte, die nicht mehr Arbeit machen und die sich ganz einfach nutzen lassen, wenigstens die sind ein Anfang:

• semantischer Code (Überschriften z.B. werden extra vorgelesen und aufgelistet, wenn sie echte Überschriften im HTML sind)
• Sitemap zumindest als Alternative, falls eine Navigation aus optischen Gründen nicht per Tastatur bedient werden kann
• Sprunglinks wenigstens jeweils zum Inhalt und zur Navigation, damit sich Tastaturnutzer aussuchen können wo sie hinmöchten ohne sich durch unzählige Links arbeiten zu müssen

Mehr zum Navigieren per Tastatur mit weiterführenden Links habe ich ja schon einmal geschrieben. Ebenfalls über die Session berichtete auch Michael: FuCamp: Blinde am PC

Probiert doch mal eure eigene Seite aus, wie klappt es nur per Tastatur ohne Maus zu navigieren…

Ich habe hier wieder Live gebloggt. Also ist dieser Text wieder ein bisschen wirr

Markus Heuerung (muhh@byzero.de) hat uns vorgestellt, wie Blinde am PC arbeiten.

Er ist Fachleher im Berufsförderungswerk Würzburg und bildet dort IT Berufe aus.

Er stellte Screenreader, Braille und Sprachausgabe.

Screenreader

Screenreader lesen die Informationen vom Bildschirm aus und bereitet die Information für den Blinden vor.

Ein System ist die Braille Zeile. Dabei handelt es sich um ein System dass die Information Zeile für Zeile dargestellt. Er gab uns ein Beispiel, wie die Braillschrift funktioniert.

Eine weitere Möglichkeit ist die Sprachausgabe. Hier wird eine synthetische Sprache verwendet um den Text vorzulesen.

Screenreader Produkte: Jaws , Virgo / Cobra, Windows Eyes, NVDA (Open Source). Webanywhere ist eine Möglichkeit für Webseiten. Weitere gibt es für Firefox usw.

Betriebssysteme

Linux (Ubuntu) kann von einem Blinden installiert werden.

MAC OS ist auch schon länger definiert.

In Windows sind diese Elemente erst am Kommen.

Demo

Er zeigte das Programm Jaws.

Das Programm liest vor was im Moment alles auf dem Bildschirm vorhanden ist.

Wenn der Fokus auf ein Programm geführt wird, wird der Name des Programms und der Inhalt der Darstellung vorgelesen.

Beim Navigieren in einem Filebrowser wird vorgestellt, welche Dateien vorhanden sind und welche Tasten gedrückt wurden.

Der Blinde wird somit über die Sprachausgabe über viele Elemente informiert.

Die aktuelle Zeile

Dort wo der Cursor steht ist die aktuelle Zeile. Bei einem Windows Fenster wird z.B. das aktuell selektierte Programm als aktuelle Zeile deklariert.

Noch ne Demo

Er verwendete Jaws um zu zeigen wie ein Blinder mit einem Word Programm arbeiten kann.

Dabei hat er ein Word Dokument geöffnet und ein neues Dokument erstellt. Jaws las ihm dabei die einzelnen Buchstaben und die einzelnen Sätze vor.

Tipps zur Softwareentwicklung

• Shortcuts
• Symbolleisten Grafiksymbole müssen beschriftet werden (Altattribute nutzen)
• Alles muss mit Tastatur vorhanden sein.
• Links im Web grundsätzlich sinnvoll beschreiben (HIER ist ein blöder Link )

Access Keys sind nicht standardisiert. Dieses Problem kann man umgehen indem man Sprungmarken einfügt. Der Blinde lernt die unterschiedlichen Sprungmarken.

Tastenkombinationen können z.B. ALT SHIFT 1 usw. gesteuert werden. Diese Tasten werden normalerweise von den Programmen nicht benutzt.

• Sehr schön kurz und knapp zusammengefasst, warum sich barrierefreie Seiten lohnen und für wen diese gemacht werden. Hoffen wir mal, dass Stück für Stück mehr wird, mit barrierefreien oder zumindest barrierearmen Angeboten.
• Das Ubuntu Women Project, ein Bericht dazu von sideglance, was ist das für ein Projekt, warum existiert es und wie läuft es ab.
• Viele werden es gar nicht bemerken, obwohl sie auch Spam von einer Mailadresse dieser Webseite bekamen. Der Blogger selbst versendet keinen Spam, aber irgendjemand kommentiert in seinem Namen, mit der Mailadresse des Impressums und dem Domainnamen so nichtssagend, das Akismet das Zeug abfängt. In den Kommentaren zum Beitrag wird daher geraten nicht mit einer Mailadresse zu kommentieren, die bereits veröffentlicht ist, da sonst auch die eigenen Kommentare leicht im Spam anderer Blogs landen könnten.
• Wunderschön bebildert und beschrieben sind die Hex-Farben auch bezogen auf das CMYK-System im englischen Artikel Hexadecimal Color. via twitter
• Toscho erklärt warum er die Schriftgröße schlicht so belässt, wie die Leser sie ausgesucht haben. Das hatte ich ja auch schon, doch dann bekam ich Rückmeldungen es sei alles so riesig, seither reduziere ich doch wieder… Aber da bin ich immer im Zwiespalt, so anpassen, wie es manche wünschen, weil die meisten Seiten eben nur verkleinerte Schriften anzeigen, oder eben doch wie eigentlich sinnvoll so belassen, wie es die Leser eingestellt haben.
• Bei dunkelangst gibts eine Netiquette für Blogs, unterteilt in Regeln für Blogger und Kommentatoren. Ich würde jetzt nicht unbedingt alles so schreiben, aber überwiegend eine prima Übersicht, die weiter verbreitet werden sollte. Kommentieren oder Fragen stellen kann man im dazugehörigen Blogbeitrag. Außerdem bietet er die Netiquette für Foren und für E-Mails an. Was Netiquette bedeutet erklärt die Wikipedia.
• Entgegen der ursprünglichen Behauptung und auch entgegen zwischenzeitlichen Infos, kann es eben doch passieren, dass Webseiten in die Liste nicht standardkonformer Seiten für den IE8 aufgenommen werden, auch wenn man das nicht möchte. Mehr dazu erklärt der englische Artikel über den IE8.

Bildbasierte Captchas

Captchas sind laut Wikipedia eine Abkürzung für Completely Automated Public Turing test to tell Computers and Humans Apart, also ein vollständig automatisierter Test, um Rechner und Menschen zu unterscheiden.

Die Idee an sich ist schon gut, denn wer eine Website betreibt, die Kommentare oder ein Kontaktformular oder andere Besuchereingaben zulässt, weiß, dass automatisierter Spam in unglaublichen Mengen ankommt. Selbst so kleine Blogs, wie dieses oder uteles Blog haben mit Spam zu kämpfen. Auf uteles Blog wurden inzwischen fast 7000 Spams von Akismet abgefangen, hier waren es bisher rund 5500 in weniger als zwei Jahren. Ich hätte also täglich rund 23 Kommentare manuell löschen müssen, wenn ich kein Plugin nutzen würde.

Insofern ist es logisch, dass Webseitenbetreiber Möglichkeiten suchen dem Spam Herr zu werden, denn je bekannter ein Webauftritt desto massiver das Spamaufkommen. Leider werden zur Zeit, sehr häufig bildbasierte Captchas genutzt, von denen die Wikipedia sagt, sie seien nicht barrierefrei. Sprich für sinnesbehinderte Menschen seien sie ein Problem. Klar das ist schon ein sehr deutlicher Grund, die Dinger nicht einzusetzen. Manche argumentieren jedoch, dass sie einen Webauftritt haben, an dem diese Besucher sowieso nicht interessiert seien. Ob das so ist, ist zumindest fragwürdig, doch selbst wenn, so berücksichtigen diese Betreiber nicht, wer sonst noch durch bildbasierte Captchas ausgeschlossen wird:

• Besucher die Textbrowser nutzen
• Besucher die Screenreader nutzen
• Besucher die sich Seiten ohne Grafiken anzeigen lassen (beispielsweise diejenigen, die nur schlechte Netzverbindungen haben)
• Besucher die keine Cookies nutzen (zumindest bei vielen Captchas eine Vorbedingung)
• Besucher die Probleme haben die Zeichenfolge korrekt einzugeben (ich fast immer, denn egal ob ich grad beschließe es werden Groß- oder Kleinbuchstaben erwartet, es ist fast immer falsch)
• Besucher die Schwierigkeiten haben die Zeichen korrekt zu interpretieren (ich bei vielen Captchas soll das letzte Zeichen im mittleren Captcha ein “n” sein, ist das erste Zeichen im dritten Captcha ein “P” oder ein “p” oder doch was ganz anderes?)
• Besucher deren Browser sich bei Captchas häufig verschluckt (ich z.B. mit Firefox 3, da weiß ich inzwischen schon, dass die meisten Captchas gar nicht klappen, Seamonkey, Opera oder Konqueror haben kein Problem)
• Besucher die nicht optimale Sehfähigkeiten oder ungewöhnliche Einstellungen haben (ich z.B. bin zwar nicht sehbehindert, aber ich nutze eine sehr hohe Auflösung auf einem Laptop, auf dem Farben sehr hell angezeigt werden, damit lassen sich zarte Grautöne auf weißem Hintergrund oft nur schwer unterscheiden. Andere haben ein umgekehrtes Problem mit Röhrenmonitoren, die Farben sehr dunkel anzeigen und im dunklen Farbbereich Unterschiede nur schwer erkennen lassen.)

Zusammengefasst meine ich, sind das doch ein paar Besucher, die damit den Spaß verlieren könnten was einzugeben, sei es eine Anfrage, ein Kommentar oder was auch immer. Für mich sind die bildbasierten Captchas immer ein Hindernis, nur wenn mir etwas sehr wichtig ist, probiere ich es überhaupt. Heute kam die Anregung zu diesem Artikel, von den nur kurzfristig beim Podcast von Roman und Dirk eingeschalteten Captchas, die wie immer nicht klappten. Von den beiden kam jedoch sofort die Reaktion und nur kurze Zeit später gab es Captcha-freie Kommentare.

Ich meine, wenn schon irgendein Test, dann nicht gerade diese Bildchen, sondern besser einfache Fragen oder kleine Berechnungen wie 7+9 oder so. Im klappt bei unseren Kontaktformularen auch das leere Feld im Formular noch gut, für die meisten Beuscher wird es nicht angezeigt, die anderen drauf aufmerksam gemacht, nur die Maschinen schreiben was rein, jede Eingabe verhindert jedoch das Versenden des Formulars.

t-online.de

Durch meinen Linktipp kam onli zu einer Seite, bei der er den empfohlenen Text auf seinem Röhrenmonitor nicht lesen konnte. In einem Kommentar zu seinem Beitrag stellte ich die Theorie auf, dass ein Teil schlecht lesbarer Farbwahl an den neuen Designs liegt, die nahezu ausschließlich aus Hintergrundbildern und nicht mehr wie früher aus angegebenen Farben bestehen.

Ich kannte und nutzte lange einige Webseiten und Add-Ons, die überprüften, ob die gewählten Farbkombinationen auch für Menschen mit eingeschränkter Sehfähigkeit noch nutzbar sind. Was ich immernoch bei jedem Layout mache sind zumindest zwei Tests:

Design auf Farbkontraste testen

In einem meiner Browser, die immer teste, habe ich ein recht ungewöhnliches apricot als Hintergrundfarbe eingestellt, damit fällt mir sofort auf, falls ich an einer Stelle vergessen habe, die Hintergrundfarbe zu deaktivieren. Ich nutze den Seamonkey für manches nebenbei, deshalb weiß ich, dass bei weitem nicht alle Webautoren das testen, sehr amüsant finde ich wie schlecht das z.B. bei t-online klappt.

Die Kontraste lassen sich z.B. mit dem Firefox Add-On Colour Contrast Analyser testen. Aber eben leider nur die Kontraste der Hintergrundfarben, das gilt nicht für Hintergrundbilder und ist daher kaum noch für ein Design passend.

Sinnvoll ist immer auch ein kurzer Test mit vischeck.com dort werden die häufigsten Formen von Farbblindheit simuliert, damit fallen ganz unglückliche Farbkombinationen auf. Sinnvoll ist selbst einen Screenshot zu machen, um zu testen, testet man eine Website direkt, fehlen die Hintergrundbilder und der Eindruck ist verfälscht.

Ebenfalls gut ist die Seite von Colorblind Filter dort kann auch noch einiges eingestellt werden.

Website auf Zugänglichkeit testen

Die Accessibility-Toolbar für den Firefox testet vieles, was automatisiert möglich ist, z.B. auch den Farbkontrast auf derselben Grundlage, wie das Farbkontrast-Add-On. Die Toolbar kann jedoch eben nur automatisiert testen, nicht alles was da an Fehlermeldungen oder eben nicht aufgeführt wird, ist tatsächlich relevant. Hier wird beispielsweise ein Fehler angezeigt, weil blogoscoop als Bild eingebunden ist, ohne dieses Bild können jedoch keine Zugriffe gezählt werden, hier nutze ich im Moment ein unsichtbares Bild.

Ich bin nicht so begeistert von der Erweiterung, weil sie zwar viele Tests bietet, aber halt nicht “mitdenken” kann. Ein weiterer gemeldeter Fehler für dieses Blog ist, die h1 auf der Startseite sei nicht identisch mit dem title-Attribut. Ja, stimmt und das wird auch so bleiben, denn dieses Blog hat einen title für die Startseite, der etwas ausführlicher ist, als das Logo, welches hier innerhalb der h1 liegt. Manche Erklärung für einen angegebenen Fehler sagt mir keineswegs in für mich verständlicher Form, was das Problem ist. Ich habe schon einiges Wissen zu diesem Thema, sicherlich mehr als viele Webautoren, aber für manchen Hinweis reicht das nicht aus. Aus meiner Sicht sollte eine solche Toolbar jedoch so klare Meldungen bringen, dass auch weniger versierte Webautoren zumindest verstehen was gemeint ist.

Layout ohne Grafiken testen

• miradlo bloggt ohne Grafiken

Mit der Webdeveloper-Toolbar, die ich in Firefox und Seamonkey installiert habe, lässt sich eine Website ohne Grafiken anzeigen (für den IE gibt was ähnliches). Das zweite Bild zeigt dieses Blog ohne Grafiken. An diesem Beispiel sieht man, worauf ich achte, wenn ich Bilder für ein Layout einsetze:

Die Hintergrundfarben aller Bereiche sind angelehnt an die Farbe der Layoutbilder, die Vorteile:

• die Optik nicht mehr ganz so schick, aber noch immer sehr ähnlich
• ganz schlecht lesbare Farbkombinationen fallen auf
• falls die Seite mal langsam lädt, fällt es kaum auf, weil die Farben eben sehr ähnlich sind
• wer ganz ohne Grafiken surft bekommt trotzdem noch ein lesbares Design

Fazit der Farbkombinationen

Auch nach nochmaliger Recherche konnte ich nichts finden, mit dem sich auch Farbkombinationen von Hintergrundbildern und Text testen lassen. Damit gibt es eben keine Alternative für aktuelle Designs, die auf Farbverlaufsbildern basieren, mit Transparenzen arbeiten oder ähnlichem.

Ich meine das Bewusstsein, dass Webseiten in erster Linie lesbar sein sollten, hat sich noch bei weitem nicht durchgesetzt. Außerdem wird von vielen Webautoren zuwenig getestet. Doch es fehlt auch an automatisierten Tests und die Werkzeuge die solche Tests erlauben sind häufig nicht verständlich.

• Klick aufs Bild für den Vergleich in voller Größe

Selbstverständlich kann man sich im Akregator die Feeds auch im Design der jeweiligen Seiten anzeigen lassen. Aber genau das will ich nicht.

Ich lese am schnellsten und effektivsten, wenn ich ein einheitliches Design habe. Im Akregator kann ich alles so einstellen wie ich es will und wie es für mich am besten lesbar ist. Auf Webseiten geht das oft schief, denn schon meine leicht erhöhte Schriftgröße im Firefox führt bei vielen Seiten zu Darstellungsfehlern.

• Akregator
• Firefox

Stammleser wissen es schon ich nutze eine recht spezielle Konfiguration und habe auf einem 17″ Laptop eine Auflösung von 1920*1200. Ich nutze außerdem Linux, das bedeutet bei sehr vielen Webseiten ist die Schriftgröße wesentlich kleiner, als das unter Windows mit z.B. einem 19″ Monitor und 1280*1024 der Fall ist.

Schriftgrößen

Ich kann mit leicht vergrößerter Schrift die Inhalte vieler, aber nicht aller Webseiten im Firefox lesen. Häufig hilft es, die Schrift nochmals zu vergrößern, manche Seiten sind jedoch schlecht bis unbenutzbar, weil die Vergrößerung das Layout sprengt.

Um den Schriftgrößenunterschied meiner Lieblingsversion zum Lesen im Akregator gegenüber dem, was ich im Firefox habe mal deutlich zu machen, habe ich mal beide in einem Bild abgelegt. Das Bild hier ist verkleinert dargestellt, die volle Größe ist verlinkt (da es nur ein Ausschnitt ist, ist es nur 1272 breit).

Es gibt ja immer mal wieder Beiträge und Diskussionen zu Schriftgrößen, wie z.B. kürzlich von Jens. In einem Artikel schreibt Thomas über diesen leider weit verbreiteten Unsinn :

“Wenn man body also mit font-size:62.5% versieht, dann gilt für alle folgenden Elemente: 100% = 10px.”

Er erinnert daran, dass dieser Quatsch vom ursprünglichen Erfinder selbst schon lange nicht mehr genutzt wird.

Barrierefreiheit?

Mir persönlich ist es ziemlich egal, ob jemand 5px, 30px, .7em oder 1 em für passend hält. Mich interessiert es erst dann, wenn das Layout nicht zulässt, dass die Besucher etwas an der vorgegebenen Größe ändern.

Selbst Seiten die teils über Barrierefreiheit schreiben, die also bewusst damit umgehen, nutzen nicht selten merkwürdige Versionen von Schriftanpassungen. Sehr oft endet jeder Versuch, die Schriftgröße so anzupassen wie ich möchte spätestens bei Formularen, weil sie so knapp angelegt sind, dass ich mit leicht erhöhter, voreingestellter Mindestschriftgröße nur die obere Hälfte der Buchstaben lesen kann, oder nur ein Drittel des Inhalts in das Input-Feld passt.

Ja, es kommt vor, dass mich eine Seite, bzw. ihr Inhalt so sehr interessiert, dass ich den Browser wechsle und ein Formular nutze, auch wenn die Schrift viel zu klein ist. Aber ganz ehrlich, das ist sehr selten, viel häufiger habe ich dann die Nase voll und bin weg.

Abschließend zum Feed

Für mich sind Feeds im Akregator die perfekte Möglichkeit mir die Inhalte genau passend anzeigen zu lassen. Nein, ich sehe nicht besonders schlecht, bisher brauche ich noch nicht einmal eine Brille. Wie ist es wohl für all die Besucher, die nur mit speziellen Einstellungen überhaupt am Bildschirm lesen können?

Ich verstehe nicht, warum die Betreiber von Blogs mir und andere diese Möglichkeit der freien Wahl nehmen, indem sie gekürzte Feeds veröffentlichen.

In letzter Zeit musste ich ein paarmal eine Seite mit Captcha nutzen. Musste, bezieht sich auf Seiten, die ich anders nicht nutzen kann, aber aus irgendwelchen Gründen nutzen wollte, z.B. für eine Registrierung bei einem Steuerberechnungsprogramm.

Captchas

Ich mag die Dinger nicht, allein schon weil ich nicht gut damit zurecht komme. Von Barrierefreiheit mal gar nicht zu reden. Es gibt besseren und sinnvolleren Spamschutz als das.

Ich bin gewohnt meist zwei, drei Versuche bei der Eingabe zu brauchen, deshalb fiel es mir zunächst auch nicht auf. Je nachdem wie wichtig mir etwas ist, gebe ich sowieso nach einem Versuch auf. Zum Glück gibt es häufig auch Alternativen zu den Seiten die Captchas einsetzen.

Firefox 3 und Captchas

Manchmal ist es mir wichtig oder ich bin grad bockig, dann probiere ich es auch mehrmals.

Ganz toll, sind die Helden, die alle Eingaben wieder löschen, weil es mit dem Captcha nicht klappte…

Gut, beim fünften oder sechsten Mal, werde ich dann langsam sauer, nur ganz selten steht bei dem blöden Bild dabei, ob case-sensitive gearbeitet wird, sprich, ob zwischen Groß- und Kleinschreibung unterschieden wird.

Bei einem dieser Dinger klappte es, nachdem ich ignorierte, dass der Code in Versalien angegeben war. Als ich einfach Kleinbuchstaben verwendete ging es plötzlich.

Das ein oder andere der Dinger war jedoch hartnäckig, nur mit einem Browserwechsel war Abhilfe zu schaffen. Das Problem tritt nicht immer, aber immer mal wieder auf. Leider habe ich keine Idee wo und wie ich suchen soll. Alle Addons einzeln deaktivieren ist mir glaub doch zu aufwändig, dann wechsle ich doch lieber den Browser. Da ich Captcha-Seiten nicht mag, sind es auch nicht so viele, bei denen ich dieses dämliche Rätsel lösen muss…

Videos im Feed der RSS-Abonennten

WordPress schickt ja keine Videos mit, im Feed, ich finde das auch richtig, denn der Feed soll schnell und deshalb schlank sein. Allerdings gelang es mir nicht, stattdessen einen Hinweis mitzusenden, dass sich ein Video im Artikel befindet, welches hier nicht angezeigt wird.

Klar, könnte ich einen Hinweis schreiben, der dann auch im Artikel steht, das will ich nicht unbedingt. Selbst wenn ich diesen Hinweis per CSS wieder verstecke finde ich es irgendwie merkwürdig.

Bei ein oder anderen Feed habe ich sowas schon gesehen. Meine erste Recherche ergab jedoch nichts. Prinzipiell kann ich zwar dem object-Element etwas Text mitgeben, der angezeigt werden sollte, aber zumindest mein Feedreader zeigt nichts davon an. Wahrscheinlich liefert WordPress das Video gar nicht erst im Feed mit aus…

• Den Hinweis im Artikel finde ich nicht grad toll.
• Keinen Hinweis im Feed finde ich auch nicht gut, weil der Text dann manchmal einfach nur unvollständig wirkt.

Wie macht ihr das?

Wenn ihr ein Video einbindet, kommt dann ein Hinweis dazu? Löst ihr es über ein Plugin oder auf anderem Weg?

Bis zum 25.11. läuft noch die Tabparade, Eva Papst erinnert in ihrem Artikel daran, dass einige Webautoren leider die Besucher vergessen, die nicht per Maus navigieren.

Sie regt zurecht an, dass Autoren sich zumindest ab und zu mal auf ihren eigenen Seiten nur mittels Tastatur bewegen sollten, um zu sehen, inwieweit, die eigenen Seiten dafür geeignet sind.

Sprunglinks

Sicherlich ist auch dieses Blog noch nicht der Idealfall, aber zumindest gibt es hier Sprunglinks, mit denen per Tastatur direkt zur Navigation oder zum Inhalt gesprungen werden kann. Probiert es doch mal ohne Maus aus…

Inwieweit weitere Angebote wie Tastaturkürzel oder eine angepasste Tab-Reihenfolge sinnvoll sind, ist strittig. Denn die verschiedenen Systeme gehen damit derart unterschiedlich um, dass es nahezu unmöglich ist, etwas so zu verwenden, dass es in jedem Fall hilft und in keinem Fall schadet. Mehr dazu, was man trotzdem tun und beachten kann, siehe den Artikel ein Herz für Tastaturnutzer bei einfach für alle.

Manches lässt sich sehr einfach und schnell umsetzen. Für vieles im Bereich besser nutzbare Seiten gibt es keine einfachen, automatisierbaren Tests. Hilfreich ist jedoch in jedem Fall mit einem Layout zu beginnen, welches sich an Webstandards hält. Sprunglinks sind ein weiterer Schritt in Richtung von barrierearmen Seiten, die von möglichst vielen genutzt werden können.

Ich meine:  ja und nein.

Ja, deshalb, weil es bei einer üblichen Webseite zumindest heutzutage kein Problem ist, trotz Fehlern im Code gefunden zu werden.

Google unterscheidet nicht, ob Seiten valide sind oder nicht. Für Suchmaschinen ist die Struktur wichtig, sinnvolle Überschriften, Code der den Text strukturiert, passend beschriftete Bilder usw. das sind Kriterien, die berücksichtigt werden. Das gilt grundsätzlich für alle Webseiten, egal ob es sich um ein Blog handelt oder nicht.

Nein, zumindest wenn es um Feeds in Blogs geht, die gefunden werden sollen, dann müssen Feeds valide sein.

Fakt ist, dass z.B. technorati Probleme mit nicht validen Feeds hat. Deshalb sollten Blogs auf jeden Fall immer mal wieder überprüft werden, ob sie valide sind, Links zu Validatoren gibts im Web-Glossar.

Unterschied hin oder her, bezogen auf die ganz offensichtlichen Gründe, die für valide Seiten sprechen, aus meiner Sicht sollten alle Seiten standardkonform sein. Es gibt viele gute Gründe für standardkonforme Seiten, zu den für mich wichtigsten gehören:

• klare Trennung von Inhalt und Layout
• leicht wartbarer Code
• leicht les- und testbarer Code
• weitgehend vom Ausgabegerät unabhängige Darstellung der Inhalte
• logische und nachvollziehbare Semantik (damit lässt sich z.B.  fremder Code sehr viel einfacher lesen)
• Vorbedingung für barrierearme Seiten
• …

Ein guter Artikel zum Unterschied zwischen standardkonform und barrierefrei stammt von Ralph G. Schulz und wurde bei den Webkrauts veröffentlicht.

Ganz klare und offensichtliche Gründe sprechen dafür Webseiten standardkonform zu erstellen.

Aus meiner Sicht gibt es dagegen keinen nachvollziehbaren Grund warum Seiten nicht standardkonform sein sollten.

Wordpress und valide Seiten

Immer wieder lese ich, dass es nicht möglich sei valide Blogs mit Wordpress zu erstellen. Das kann ich so nicht bestätigen. Klar, manchmal braucht es ein bisschen Überredungskunst, aber mit regelmäßigem Überprüfen, klappt auch das.

Wordpress und TinyMCE

Zuweilen nervt der Editor, der manchmal meint besser zu wissen als ich, was ich haben will, siehe dazu auch: Selbstdenkende Editoren

Eine Abhilfe, bei selbständigen Änderungen durch die Software ist, zuletzt in Code-Ansicht zu speichern, damit bleiben die eigenen Anpassungen erhalten.  Ja, ich weiß, es gibt für solche Fälle bessere Lösungen als den TinyMCE, das steht auch auf meiner Aufgabenliste, mich da mal schlau zu machen und eine sinnvolle Lösung zu finden.

youtube valide

Ein bisschen mühsam war es zunächst, als ich erstmals ein youtube-Video einbaute. Zunächst ließ sich mit allen Tricks kein ”

Congratulations

The document located at <http://www.utele.eu/blog/einfach-so/fussball-einfach-so/und-noch-ein-viertelfinale-welches-nicht-der-favorit-gewinnt> was checked and found to be valid XHTML 1.0 Strict. (…)”

erreichen. Doch nach kurzer Recherche, als es nicht auf Anhieb klappte, gabs eine ganz einfache Anleitung bei wildbits.de. Damit klappt es prima und auch die Seiten mit Video haben jetzt die gewünschte Erfolgsmeldung.

Unterm Strich meine ich, dass es auch für Blogs keinen Grund gibt, warum sie nicht standardkonform und valide nach W3C erstellt werden sollten. Falls jemand das anders sieht, diskutiere ich gern darüber in den Kommentaren.

Diese Serie startete mit I. den guten Nachrichten von Microsoft, dem folgte das II. der Webtrend: standardkonformere Seiten, dieses ist das III. der letzte Teil der Serie über die Diskusssionen unter Webentwicklern und die Bedenken zur Standardkonformität des IE8.

Ich finde es schade, dass es Diskussionen gibt, die sich an diejenigen richten, die an den Gesprächen mit Microsoft beteiligt waren. Jens Grochtdreis schreibt z.B. in Microsoft hört zu unter anderem:“Gustafson, Eric Meyer, Zeldman und die anderen sollten in sich gehen und fragen, ob sie noch wirklich unabhängig denkende Geister sind oder ob sie sich zu sehr haben vereinnahmen lassen.”

Klar gerade Jeffrey Zeldman hatte gesagt, dass auch die Lösung, in der der IE8 sich eher wie IE7 verhält, akzeptabel wäre. Auch ich hielt das für den falschen Ansatz und glücklicherweise hat sich Microsoft dagegen entschieden. Allerdings schrieb Zeldman auch folgendes in seinem Kommentar (eigene sinngemäße Übersetzung des englischen Kommentars):

“Wenn genügend Webentwickler glauben, dass der Standard sein sollte ‘aktuelle Version’ statt ‘IE7′ – und falls sie schlüssig und sachlich argumentieren – dann könnte es sein, dass Chris Wilson und seine Kollegen ihnen zustimmen und den Standardwert so setzen, wie ihr es wollt und nicht wie zuerst vorgeschlagen. ”

Damit schrieb er meines Erachtens keineswegs, dass er die von Microsoft ursprünglich vorgeschlagene Lösung für optimal hielt. In demselben Artikel schrieb er später ergänzend in einem weiterem Kommentar (eigene sinngemäße Übersetzung der Frage und des Kommentars aus dem englischen Original):
Brian Warshaw: “Wenn die Versionsangabe im Metatag bedeutet, dass ein heute erstelltes Design auch noch in zehn Jahren gut aussieht, ist das nicht diese eine Zeile Code wert? “
Jeffrey Zeldman: “Ja, für mich ist es so, auch wenn es das glatte Gegenteil an Browserverhalten ist, für das ich seit 1998 kämpfe. Meine Motivation war niemals religiös sondern praktisch. Ich möchte, dass die Seiten, die ich entwerfe funktionieren. Wenn diese Lösung hilft dieses Ziel zu erreichen, dann ist sie eine gute Sache. “

Noch deutlicher äußerte sich Eric Meyer in einem Kommentar zu dem Thema auf der Webseite von Jeremy Keith (eigene sinngemäße Übersetzung des englischen Kommentars):

“Wie schon gesagt, ich hoffe sehr dass du mit deiner Meinung diese Diskussion gewinnst; denn mir geht es genauso, ich möchte dieses Vorgabeverhalten. Ich habe genau das vergeblich anzubringen versucht, nun hoffe ich, dass andere ebenso argumentieren und weiterhin versuchen Microsoft zu überzeugen. ”

Insofern bin ich, anders als Jens Grochtdreis, nicht der Meinung, dass sich die beiden von Microsoft haben vereinnahmen lassen. Klar, gerade von diesen Gurus der Webstandards, erhofft sich mancher, dass sie immer bis zum letzten Moment kämpfen. Andererseits zeigt das jetzige Ergebnis, dass das nicht der einzige Weg ist. Ich hoffe, dass die Entscheidung fiel, weil sich viele andere Webentwickler dafür eingesetzt haben. Manche Unkenrufe vermuten allerdings, dass es rechtliche Gründe gegeben haben könnte, die Microsoft zu diesem Schritt bewogen haben.

…doch nicht standardkonformer IE8

Andere, die den IE8 in seiner ersten Beta-Version getestet haben, befürchten, dass es trotz bestandenem Acid2-Test wieder viele Fehler geben könnte, die schon IE7 hatte. IE8 soll im Herbst veröffentlicht werden, ich halte es für verfrüht bei jedem Fehler in der Beta I anzunehmen, dass dieser auch noch in der endgültigen Version vorhanden sein wird.

Insgesamt meine ich, es ist ein sehr gutes Zeichen für die Webstandards, wenn der Riese aus Redmond nicht nur einen Browser entwickelt, der den Acid2-Test besteht; sondern darüber hinaus zulässt, dass nun eher die Webentwickler, die für IE6 oder IE7 optimiert haben, gefragt sind und an ihren Seiten etwas ändern müssen, statt derjenigen, die standardkonform entwickeln.

Das Webstandards Projekt schreibt dazu (eigene sinngemäße Übersetzung):

Was bedeutet diese Entscheidung? Nun, einiges, z.B:

1. Webautoren, die standardkonforme Seiten erstellen müssen keine Änderungen an ihrem Markup vornehmen, um ihre Webseiten vom IE8 in seinem neuesten bestmöglichen Modus darstellen zu lassen.
   
2. Alle Webautoren, die nicht standardkonforme Seiten entwickeln, müssen entweder lernen das zu tun oder aber sie müssen ihrem Markup einen Hinweis hinzufügen, dass ihre Seiten entsprechend einer älteren Version des IE angezeigt werden sollen.
3. Jeder, der JavaScript nutzt, um je nach Browser einen anderen Code auszugeben, muss das ändern, da viele Annahmen über die Rendering Engine des IE auf die Version des IE8 nicht mehr zutreffen.

Mir gefallen diese Konsequenzen, weil damit der Trend hin zu standardkonformeren Webseiten zwangsläufig verstärkt wird. Ein weiterer informativer Artikel zum Thema Microsoft und Webstandards wurde von Mathias Schäfer (molily) auf dem SELFHTML-Blog veröffentlicht.

Zu den genutzten, nicht erklärten Begriffen siehe Glossar zu Web, Webdesign und Webapplikationen.

Ich hatte bereits im November 2007 die Hoffnung, jedoch noch sehr vage, dass der Webtrend 2008 stärker in Richtung Webstandards und barrierearme Webseiten geht. Diese Hoffnung hat sich nach den neuesten guten Nachrichten von Microsoft (das I. dieser Serie) verstärkt. Denn wenn der Riese aus Redmond mit seinem hohen Marktanteil sich stärker am Standard orientiert, so wird das auf Dauer auch auf die neu erstellten Webseiten auswirken.

Zugängliche Webseiten

Die Webseitenersteller, die bisher argumentierten, dass es sich nicht lohnt Webstandards zu berücksichtigen, weil der wichtigste Browser sie sowieso nicht nutzt, müssen neue Argumente finden. (Der wichtigste Browser ist für manche immer der aktuelle Internet Explorer). Ich war schon immer der Meinung, dass diese Standards sinnvoll sind, und ich meine auch, dass Webseiten möglichst allen Besuchern zugänglich sein sollten, nicht nur denen, die gerade Glück haben, weil sie den Browser mit höchstem Marktanteil nutzen. Ebensowenig wie nur denen, die grafische Browser mittels Maus nutzen, sondern genauso all denen, die mit Tastatur navigieren oder die Textbrowser verwenden. Weitere Informationen zu Zugänlichkeit, Barrierefreiheit usw. bietet einfach für alle.

Sterben Flash-Seiten aus?

Ist jetzt also alles gut und Flash-Seiten sind bald nur noch Geschichte? Nein, sicher nicht und das ist auch richtig so. Denn abgesehen von den vielen nur-Flash-Seiten gibt es gut gemachte Flash-Effekte, die eingesetzt werden können, beispielsweise für Animationen, die mit HTML und CSS nicht möglich wären. Wie bei so vielem, nicht Flash ist schlecht, schlecht ist nur, wie manche es einsetzen.

Dasselbe gilt meines Erachtens ebenso für JavaScript, es gibt tolle Möglichkeiten den Komfort für Besucher zu erhöhen. Oft wird es jedoch falsch eingesetzt, an Stellen, an denen es nicht nötig ist, oder ohne zu berücksichtigen, dass nicht alle Besucher Java Script nutzen, bzw. nutzen können. Meines Erachtens muss eine Webseite zunächst einmal ohne JavaScript, Flash oder ähnliches funktionieren und bedienbar sein. Wenn das gegeben ist, dann können Effekte und zusätzliche, komfortablere Funktionen dazu kommen.

Das III. dieser Serie handelt von den Diskussionen zu Microsoft und dem IE8 und den Bedenken, wie standardkonform IE8 wirklich sein wird. Zu den Begriffen siehe Glossar zu Web, Webdesign und Webapplikationen.

• Acid2 Test
• Anker, Links
• Barrieren, barrierefrei, barrierearm, zugänglich, Zugänglichkeit
• Browser, Webbrowser, User Agent (Benutzeragent)
• CMS (Content-Management-System), Redaktionssystem
• CSS (Cascading Style Sheets)
• Designfragen: Hinweise für Auftraggeber von Webseiten
• Doctype, Dokumenttyp
• Flash
• Grafikprogramme
• Homepage, Webseite, Website, Webauftritt, Internetseite
• HTML (HyperText Markup Language), XHTML (Extensible HyperText Markup Language)
• IP
• Meta, Metadaten
• miradlo
• Multimedia
• PHP (Hypertext Preprocessor)
• Quelltext
• Quirks- und Standardmodus
• Rendering-Engine
• Screenreader
• Suchmaschine, Suchroboter, Spider, Webcrawler
• Usability, Benutzerfreundlichkeit, Gebrauchstauglichkeit, Software-Ergonomie
• Validator
• W3C (World Wide Web Consortium)
• Web 2.0
• Webautor, Webdesigner…
• Webdesign : hilfreiche Programme…
• Workaround, Umgehungslösung, Würgaround
• www (World Wide Web) HTTP, URL…
• WYWIWYG (What You See Is What You Get)

Acid2 Test

zum Seitenanfang

Test, der zeigt, wie standardkonform sich Browser verhalten, mehr dazu siehe im bebilderten Bericht Webdesign mit Webstandards

Anker, Links

zum Seitenanfang

Anker und Links werden mit dem Element <a> eingefügt. Ein Anker ist ein seiteninterner Verweis, hier z.B. die Links zum Seitenanfang, die am Ende jeder Seite stehen oder die Liste am Anfang des Glossars, die es ermöglicht direkt zum gewünschten Begriff zu springen.

Barrieren, barrierefrei, barrierearm, zugänglich, Zugänglichkeit

zum Seitenanfang

Der Begriff barrierefrei kommt ursprünglich aus der Behindertenbewegung und bezog sich zunächst eher auf physikalische Hindernisse. Inzwischen wird der Begriff auch im Web benutzt. Ich persönlich ziehe die Begriffe barrierearm und zugänglich vor, da barrierefrei im Web nicht möglich ist. Ein Beispiel ist die Sprache des Webauftritts, barrierefrei würde heißen, dass alle Menschen die Inhalte verstehen müssten, das klappt nicht, wenn nicht alle Sprachen angeboten werden. Selbst wenn man es darauf reduziert, dass es nur in der gewählten Sprache barrierefrei wäre, dann gibt es kaum Auftritte, die für alle verständlich erstellt werden. Denn sowohl Kinder, als auch Analphabeten, als auch Menschen mit Lernstörungen brauchen Texte in anderer Form als die meisten Erwachsenen.

Barrierearme, für die meisten Besucher zugängliche Webauftritte sind jedoch durchaus möglich und bis zu gewissen Grenzen sogar ohne zusätzlichen Aufwand realisierbar. Es ist nicht so schwer einen Auftritt so zu gestalten, dass auch diejenigen die mit anderen Technologien, als einem grafischen Browser und einer Maus darauf zugreifen die Inhalte ohne größeren Aufwand erreichen können. Ein Artikel von Eva Papst, die Amazon mit dem Screenreader nutzte, verdeutlicht einige Schwierigkeiten.

Browser, Webbrowser, User Agent (Benutzeragent)

zum Seitenanfang

Ein Webbrowser und eine Internetverbindung sind essenziell nötig, um eine Webseite anzeigen zu können. Die Internetverbindung müssen wir, als Webautoren beim Webdesign berücksichtigen, bezüglich der Ladezeit unserer Webseiten. Den gewählten Browser, das Betriebssystem und die gewählte Auflösung kennen wir normalerweise nicht, daher müssen wir unsere Seiten so bauen, dass wir ein möglichst breites Spektrum berücksichtigen, mit dem unsere Seiten optimal nutzbar sind. Bei einer Schulung zu Webdesign habe ich eine kurze, nicht repräsentative Umfrage gemacht, mit welchen Voraussetzungen, wer das letzte Mal im Internet war. Schon hierbei fielen die Unterschiede auf, genutzt wurden:

• verschiedene Betriebssysteme (Windows, Linux, Windows Mobile)
• verschiedene Browser (Internet Explorer, Opera, Firefox, Safari, Konqueror…)
• unterschiedliche Auflösungen (von 200*120 bis 1680*1050)
• verschiedene Fenstergrößen (manche nutzen ein Vollbild, andere lassen sich beispielsweise die Lesezeichenleiste mit anzeigen
• verschiedene Schriftgrößen (manche kommen auch bei hohen Auflösungen noch mit der Standardgröße klar, andere nutzen eine größere Schriftart)

Es gibt viele weitere mögliche Unterschiede, bereits bei den wenigen Teilnehmern gab es eine Person mit Farbsichtproblemen (Rot-Grün-Schwäche). Andere mögliche Voraussetzungen wären:

• nicht-grafischer Browser (Browser, der ausschließlich die Texte einer Seite anzeigt, keine Bilder, kein Flash usw.)
• Browser mit angeschlossenem Screenreader (die Seiteninhalte werden vorgelesen)
• browsen ohne Anzeigen von Grafiken (z.B. bei schlechte Internetverbindungen, noch immer gibt es Modemnutzer)
• browsen mit speziellen Designs, um besser oder überhaupt lesen zu können

Die Konsequenz dessen ist, dass die Webseiten, so gebaut sein müssen, dass diese möglichst vielen dieser unterschiedlichen Voraussetzungen gerecht werden. Das Hauptaugenmerk gilt dabei sicherlich zunächst den grafischen Browsern, da der größte Teil der Anwender diese nutzt. Es gibt jedoch keinen nachvollziehbaren Grund nicht weitere Nutzer zu berücksichtigen.

Ein gute erste Möglichkeit um zu testen, wie eine Seite von Screenreadern oder Suchmaschinenrobotern gelesen wird, ist sich diese Seite in einem Textbrowser anzeigen zu lassen. Lynx und Links sind Textbrowser, einer der beiden ist bei Linux meist bereits Teil der Standardinstallation. Lynx ist inzwischen für alle Betriebssysteme verfügbar.

Die Bezeichnung User Agent wird von einigen Analysetools verwendet, wenn sie die verschiedenen Browser unterscheiden. Zur Zeit gängige Browser sind:

• Internet Explorer in den Versionen 6 und 7
• Mozilla Firefox in den Versionen ab 1.5x, 2.0x und 3.xx, wer mehr über den Firefox wissen will eine ganze Seite befasst sich damit: mit Firefox per du
• Mozillas wie Bon Echo, Seamonkey, Iceweasel usw.
• Opera 9.x
• Safari meist noch in Version 2.0 und auf Apple Macintosh
• Konqueror meist in Version 3.5.x der Standardbrowser und Dateimanager auf Linux

Alle anderen Browser werden nur selten verwendet. Je nach Webauftritt und Thema können jedoch auch häufige Zugriffe mit anderen Browsern vorkommen. Bei standardkonformen Browsern ist das kein Problem, da diese eine Webseite so anzeigen, wie gewünscht. Bei vielen Zugriffen mit älteren Internet Explorern sollten diese vorm Veröffentlichen eines Layouts ebenfalls gründlich getestet werden.

CMS (Content-Management-System), Redaktionssystem

zum Seitenanfang

Mit einem Redaktionssystem können Teile eines Webauftritts auch von Laien selbst aktualisiert werden. Bekannte Content-Managementsysteme sind z.B. Typo3, Joomla u.ä. diese sind jedoch häufig viel zu umfangreich und aufwendig zu nutzen, um bei kleineren Homepages eingesetzt zu werden.

Daher wird inzwischen auch Wordpress von manchen als CMS eingesetzt. miradlo hat ein Redaktionssystem erstellt, dass bereits für kleine Webauftritte, sinnvoll genutzt werden kann. Häufig möchten Anwender nur eine Seite ihrer Website regelmäßig selbst pflegen, um z.B. aktuelle Termine und Hinweise einstellen zu können. Dafür genügt es, wenn nur diese eine Seite mit dem Redaktionssystem bearbeitet werden kann.

CSS (Cascading Style Sheets)

zum Seitenanfang

Wie eine Seite nachher aussehen soll, ob die Navigation links, rechts oder oben ist, ob die Schrift schwarz, blau oder grau ist, wie Bilder angezeigt werden usw. Das alles wird in der CSS-Datei festgelegt. Hier stehen, z.B. die Angaben, wie ein Absatz angezeigt werden soll:

p{
color:red;
background-color:fff;
}

Die Standardeinstellung der meisten Browser, um eine Seite anzuzeigen ist ein weißer Hintergrund, mit schwarzer Schrift und blauen, unterstrichenen Links. Enthält die *.html keine weiteren Informationen zum Design, so wird sie genau so angezeigt. Mit Hilfe von CSS ist eine klar strukturierte Trennung von Inhalt und Layout möglich. Eine Übersicht der CSS-Eigenschaften von CSS 1 bis CSS 3 gibts bei Jens Meiert.

Designfragen: Hinweise für Auftraggeber von Webseiten

zum Seitenanfang

Auf unserer Hauptseite www.miradlo.com gibt es unter Web Hinweise zu Webdesign, Redaktionsssytemen, den Anforderungen, der Konzeption und unseren Prinzipien. Eine sehr schöne Version in Form einer Frage-Antwortseite bietet die Domain designfragen.de. Dort gibt es unter anderem Neffenfragen, am Ende des Artikels und den Hinweisen warum Profis sinnvoll sind, gibt es das Zitat: “Aber überlassen Sie Ihre Steuererklärung auch einem Neffen? Oder Ihre Vertragsgestaltung? Nicht? Ach.”, daher lesenswert nicht nur für Auftraggeber.

Doctype, Dokumenttyp

zum Seitenanfang

Jede gut geschriebene HTML-Datei startet mit dem Doctype. Dieser gibt an welche HTML-Version genutzt werden soll. Bei miradlo nutzen wir wenn möglich immer XHTML 1.0 Strict. In wenigen Ausnahmefällen verwenden wir XHTML 1.0 Transitional.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

Doctype Switching

zum Seitenanfang

Mit dem Doctype Switching können Browser unterscheiden wie ein HTML-Dokument angezeigt werden soll. Hat das Dokument keine Doctype-Deklaration dann wird der Quirks-Mode genutzt, sonst der Standardmodus. Im Quirks-Mode wird eine Webseite so dargestellt, wie es ältere nicht standardkonforme Browser gemacht haben. Im Standard-Mode wird eine Seite gemäß den W3C-Empfehlungen angezeigt. Aktuelle Gecko- und Opera-Versionen unterscheiden einen weiteren Modus, den Almost-Standards-Mode um in möglichst allen Fällen die jeweilige Webseite so anzuzeigen, wie vom Webautor gewünscht.

Flash

zum Seitenanfang

Flash ist ein grafisches Format der Firma Adobe, mit dem auch Animationen realisiert werden. Zur Zeit wird Flash sehr häufig eingesetzt und leider häufig für Anwendungsfälle, für die es nicht geeignet ist. Flash kann nicht immer angezeigt werden, viele Anwender haben trotz grafischer Browser keine Möglichkeit mit Flash erstellte Webseiten anzuschauen. Anwender mit Textbrowsern werden mit Flash sowieso ausgeschlossen.

Flash sollte daher nicht für den gesamten Webauftritt eingesetzt werden, auf keinen Fall für essenzielle Elemente wie z.B. die Navigation. Denn sonst werden nicht nur viele menschliche Besucher sondern auch Suchmaschinen ausgeschlossen, bisher ist es nur eingeschränkt möglich Flashinhalte auch barrierearm zu gestalten. Flash ist daher ein Format für zusätzliche Angebote einer Webseite, insbesondere für Animationen oder vertonte Inhalte bietet es sich an.

Grafikprogramme

zum Seitenanfang

Grafikprogramme, wie Gimp, Scribus und Inkscape können die Marktführer, wie Photoshop ersetzen.

Homepage, Webseite, Website, Webauftritt, Internetseite

zum Seitenanfang

Für Laien scheinen diese unterschiedlichen Begriffe meist alle dasselbe zu bedeuten. Unter Fachleuten gibt es jedoch durchaus unterschiedliche Definitionen:

• Homepage: die Startseite eines Webauftritts, das ist auch die Seite, die angezeigt wird, wenn nur die Domain ohne weitere Angaben aufgerufen wird, z.B. www.miradlo.net
• Website, Webauftritt, Internetauftritt: der gesamte Auftritt, das gesamte auf einer Domain (z.B. www.miradlo.net) erreichbare Angebot
• Webseite, Internetseite: eine einzelne Seite, eines Auftritts, z.B. die Startseite oder jede andere Unterseite, die durch einen Link oder direkte Eingabe in die Adresszeile aufgerufen werden kann.

HTML (HyperText Markup Language), XHTML (Extensible HyperText Markup Language)

Jede Webseite enthält HTML, damit sie überhaupt angezeigt werden kann. Selbst rein als Flash realisierte Seiten (siehe auch den Beitrag zu Webdesign Trends) benötigen etwas HTML. Ein Ausschnitt der Struktur, einer HTML-Seite, innerhalb des body-Elements steht der eigentliche Seiteninhalt.

<body>

<h1>Überschrift</h1>

<p>Absatztext</p>

</body>

Wird keine bestimmte Seite angegeben, also z.B. www.miradlo.net/irgendwas.html gibt es Standardvorgaben, welche Seite angezeigt werden soll. Diese Standards erwarten meist eine Seite, die index heißt. Zunächst wird gesucht, ob es eine index.html gibt. Ist diese vorhanden, so wird sie zum Browser gesendet, dieser zeigt sie an.
Die Struktur des HTML sollte ähnlich aufgebaut sein, wie ein Aufsatz: Überschriften (header: h1, h2, …) Textpassagen und Absätze (paragraphs p), Listen (z.B: unordered list ul, Listenelement li), Bilder (images img) usw.

Dieser Aufbau hat nichts mit dem Design zu tun und soll daher ausschließlich auf den Inhalt bezogen sinnvoll strukturiert sein. Das bedeutet beispielsweise, dass jede Seite mit einer Hauptüberschrift h1 beginnt. Rundum den Inhalt werden weitere HTML-Elemente gesetzt, die beispielsweise den Pfad zur CSS-Datei enthalten.

XHTML 1.0 wird zur Zeit meist ebenfalls als HTML ausgeliefert, da einige Browser, z.B. der Internet Explorer mit der Auslieferung als XML nicht zurecht kommen. XHTML 1.1 darf nur als XML ausgeliefert werden und kann aus diesem Grund im Moment nicht für Webauftritte verwendet werden, außer innerhalb eines Intranets in welchem die genutzten Browser damit zurecht kommen. Eine ausführliche Erläuterung zu den Vor- und Nachteilen von XHTML und HTML bietet Christoph Schneegans in seinem XHTML-Einmaleins.

Wer genauer wissen möchte welche Elemente es in HTML gibt und wie sich die Elemente unterscheiden, je nachdem um welche HTML/XHTML-Version es geht, sollte einen Blick auf die Übersicht aller HTML-Elemente von Jens Meiert auf seiner Website werfen.

IP

zum Seitenanfang

Nach Eintippen einer Adresse in Adresszeile des Browsers, z.B. www.miradlo.net sendet der Browser eine Anfrage an den DNS-Server. Dieser übersetzt die Adresse in eine IP, z.B. 85.131.171.218, diese eindeutige Adresse identifiziert den Server, auf dem die gewünschten Inhalte liegen. Da die als Zahl aufgebaute IP für Menschen schwer zu merken ist wurden die Domainnamen entwickelt.

Meta, Metadaten

zum Seitenanfang

Wikipedia schreibt zu Metadaten: “Als Metadaten oder Metainformationen bezeichnet man allgemein Daten, die Informationen über andere Daten enthalten.” Im Zusammenhang mit dem Web sind meist die meta-Tags genannten HTML-Elemente gemeint, die im Kopfbereich von HTML-Seiten stehen können. Die Daten in den Meta-Tags sind für Besucher der Webseite nicht sichtbar, sie befinden sich im Quelltext und waren ursprünglich für Suchmaschinen gedacht.

Durch den massiven Missbrauch der Meta-Tags von Spamseitenbetreibern werden diese Tags inzwischen nur noch von wenigen Suchmaschinen überhaupt berücksichtigt, Google ignoriert fast alle Meta-Tags. Die meisten dieser Tags müssen daher nicht mehr angegeben werden. Sinnvoll ist es jedoch nach wie vor, die Beschreibung der Seite anzugeben, da auch Google diese nutzt, wenn Suchergebnisse angezeigt werden. Mehr zu diesen Metatags und welche sinnvoll angegeben werden sollten, gibts bei Torsten.

miradlo

zum Seitenanfang

miradlo ist ein kleines Softwareunternehmen in Konstanz am Bodensee, das sich vor allem mit Webapplikationen, Webdesign und Informatikdienstleistungen, wie z.B. Schulungen befasst. Mehr über unsere Angebote siehe auch www.miradlo.com

Multimedia

zum Seitenanfang

Der Begriff Multimedia fasst die unterschiedlichsten Inhalte zusammen, insbesondere alles, was nicht nur Text oder Grafik ist, sondern Audio, Video usw.

PHP (Hypertext Preprocessor)

zum Seitenanfang

Um eine Funktion in einer Webseite nutzen zu können, gibt es verschiedene server-seitige Sprachen. Die gebräuchlichste und im Moment bei miradlo ausschließlich genutzte Sprache für diesen Zweck ist PHP. PHP ist ein rekursives Backronym für PHP: Hypertext Preprocessor, ursprünglich Abkürzung für Personal Home Page Tools. Der Begriff Hypertext Preprocessor enthält die Tatsache, dass zuerst (pre) die *.php Datei verarbeitet, interpretiert (process) wird, um daraus wieder Hypertext, also HTML zu erzeugen). PHP ist eine Skriptsprache.

Mit PHP können dynamische Inhalte auf Webseiten erzeugt werden, z.B. ein automatisch generiertes Datum, eine Navigation, die nur an einer Stelle und nicht in jeder Datei geschrieben werden muss und vieles mehr.

Quelltext

zum Seitenanfang

Der Quelltext ist ein Begriff für den, auch für Menschen lesbaren, in einer Programmiersprache geschriebenen Text eines Computerprogramms. Im allgemeinen Sprachgebrauch und bezogen aufs Web ist damit meist der HTML-Quelltext einer Webseite gemeint. Da HTML keine Programmiersprache ist, gibt es keinen Unterschied zwischen dem geschriebenen “Code” und dem Quelltext. Bereits bei der Skriptsprache PHP ist das anders, die Anweisungen in PHP werden auf dem Server interpretiert und dieser liefert an den Browser nur noch HTML aus.

Quirks- und Standardmodus

zum Seitenanfang

Alle aktuellen Webbrowser kennen zumindest zwei Modi, um eine Webseite darzustellen: den Quirks-Modus und den Standardmodus. Ursprünglich war es so, dass alle Seiten mit einer Doctype-Angabe, so behandelt wurden, als wären sie standardkonform und alle anderen Seiten wurden so dargestellt, als seien sie für ältere Browser entwickelt, die noch nicht mit den Webstandards klar kamen. Damit wurde gewährleistet, dass bei Erscheinen einer neuen Browserversion nicht alle, für ältere Browser optimierte, Webseiten nicht mehr korrekt angezeigt würden.

Durch einen Fehler im IE6 interpretiert diese allerdings manche Seiten, als im Quirks-Modus darzustellen, die standardkonform entwickelt wurden. Das gilt immer dann, wenn vor dem Doctype noch etwas steht, ein Leerzeichen, eine korrekte XML-Deklaration oder ähnliches.

Inzwischen werden leider viele Seiten mit einem Doctype ausgeliefert, die keineswegs standardkonform erstellt sind, unter anderem deshalb, weil einige WYSIWYG-Editoren immer einen Doctype einfügen. Diese Unterscheidung funktioniert daher nicht mehr, deshalb sucht man nach anderen Lösungen, siehe auch den Artikel zu Webstandards und dem Internet Explorer.

Rendering-Engine

zum Seitenanfang

HTML-Rendering ist ein Teilbereich eines Webbrowsers, der der semantisch orientierten Dokumentstruktur eine visuelle Darstellung zuordnet. Dafür wird eine Rendering-Engine genutzt, diese interpretiert das mittels CSS definierte Layoutmodell, und befüllt dieses Layout mit dem durch HTML definierten Text. Jeder Browser benötigt eine Rendering-Engine, um die HTML- und CSS-Dokumente einzulesen. Es gibt jedoch mehr Browser als Rendering-Engines, Browser, die dieselbe Rendering-Engine nutzen stellen Webseiten auf die gleiche Weise dar. Das Wissen über die gleichen Rendering-Engines erspart manche Tests. Die wichtigsten Rendering-Engines sind:

• Gecko wird z.B. von den Browsern Mozilla, Firefox und Camino verwendet.
• KHTML, Webkit: Webkit entstand aus KHTML es gibt Bestrebungen die beiden wieder zusammenzuführen. Genutzt von Konqueror und Safari.
• Trident wird von den Internet Explorern genutzt, obwohl diese sich als Mozilla beim Server anmelden (z.B. der IE7 in der Form: Mozilla/4.0 compatible; MSIE 7.0)

Screenreader

zum Seitenanfang

Ein Screenreader liest die Inhalte einer Webseite vor oder gibt sie auf einer Braillezeile (Texte in Blindenschrift) aus. Meistens verwenden sehbehinderte Anwender einen Screenreader. Vorgelesen oder ausgegeben werden können logischerweise nur Texte, keine Bilder und keine Animationen. Ein wichtiger Grund um für inhaltlich relevante Bilder sinnvolle Alternativtexte anzugeben.

Suchmaschine, Suchroboter, Spider, Webcrawler

zum Seitenanfang

Eine Suchmaschine ist ein Programm, welches in Dokumenten, die in einem Computer oder einem Computernetzwerk wie dem World Wide Web gespeichert sind, recherchiert. Die Dokumente können somit durch die passenden Suchbegriffen in den Suchergebnissen zur Verfügung gestellt werden. Meist wird bei Anzeige der Suchergebnisse der Beschreibungstext der Webseite mitgeliefert. Die zur Zeit meistgenutzte Suchmaschine Deutschlands ist Google.

Um Ergebnisse zu sammeln werden Suchroboter, auch Spider oderWebcrawler verwendet. Ein Suchroboter ist ein Programm, das die Inhalte von Websites automatisch und rekursiv einliest und auswertet. Mittels der in Webseiten enthaltenen Links gelangt der Suchroboter von einer Webseite zur anderen.

Usability, Benutzerfreundlichkeit, Gebrauchstauglichkeit, Software-Ergonomie

zum Seitenanfang

Benutzerfreundlichkeit ist laut Wikipedia: “die vom Nutzer erlebte Nutzungsqualität bei der Interaktion mit einem System” Software-Ergonomie ist laut Wikipedia: “die Wissenschaft von der Benutzbarkeit von Computerprogrammen“. Diese Definitionen beschreiben bereits den Zusammenhang der Begriffe. Speziell aufs Web bezogen gibt es außerdem den Begriff Web-Ergonomie. Unabhängig vom genutzten Begriff geht es darum anwenderfreundlich, leicht und intuitiv benutzbare Webseiten zu erstellen.

Das Ziel jedes Webauftritts sollte sein: die Darstellung der Inhalte an die menschliche Aufnahmefähigkeit anzupassen, kurz gesagt: „Don’t make me think.“ Dies ist auch der Titel eines guten Buchs von Steve Krug zu diesem Thema: “Don’t make me think! Web Usability: Das intuitive Web“. Gemeint ist nicht, dass die Besucher nicht denken dürfen; das dürfen und sollen sie natürlich. Aber sie sollen über die Inhalte der Webseite, des Themas nachdenken, nicht darüber, wie die Webseite zu bedienen ist oder was sich vielleicht noch irgendwo versteckt.

Validator

zum Seitenanfang

Ein Validator ist ein freier und kostenloser Service, über den Webautoren Dokumente wie HTML- und XHTML-Dokumente auf die Konformität zu W3C-Empfehlungen und anderen Standards überprüfen können. Der bekannteste Validator für HTML ist der W3C HTML-Validator, für CSS gibt es den CSS-Validator, für RSS den RSS-Validator, (mehr zu RSS im Glossar Blogs) um Links automatisch zu prüfen den Linkchecker, wer wissen will ob ein XHTML-Dokument korrekt ist nutzt am besten den XHTML-Schema-Validator von schneegans.de.

Es gibt noch einige weitere Validatoren, die meist ähnliche Ergebnisse liefern. In Details können sich diese jedoch unterscheiden, mancher vermeintliche Fehler im CSS liegt daran, dass auf CSS 2, statt auf CSS 2.1 geprüft wird. Mehrere Tests mit nur einmaliger Domaineingabe gibts z.B. bei monstercheck.

W3C (World Wide Web Consortium)

zum Seitenanfang

Das W3C wurde 1994 u.a. von Tim Berners-Lee gegründet, der auch heute noch Vorsitzender ist. Dieser Verband verschiedener Interessensgruppen, empfiehlt neue Webstandards, bzw. macht Vorschläge dazu. Die Mitglieder des W3C sind Fachleute aus IT-Unternehmen und Forschungsinstituten, daher werden deren Empfehlungen (Recommendations, da diese nicht-staatliche Organisation keine verbindlichen Standards festlegen darf) meist in kurzer Zeit zum verbindlichen Standard. Mit Hilfe dieser Standards für HTML, XHTML, CSS usw. ist es möglich Webseiten so zu erstellen, dass sie von den verschiedensten Browsern auf unterschiedlichen Betriebssystemen les- und bedienbar angezeigt werden.

Webautor, Webdesigner…

zum Seitenanfang

Die Person oder die Personen, die HTML-Dokumente, Stylesheets (sowie weiteres, wie z.B. PHP) für Webseiten schreiben, haben keine verbindliche Berufsbezeichnung. Der Beruf kann auch dann ausgeübt werden, wenn jemand keinerlei einschlägige Ausbildung in diesem Bereich hat. Keine der Bezeichnungen ist geschützt, daher haben Kunden leider keine Möglichkeit bereits an der Berufsbezeichnung zu erkennen, ob jemand über Fachwissen verfügt. Manche Webautoren kommen aus ganz anderen Fachgebieten, manche aus dem grafischen Bereich, andere, wie die meisten Mitarbeiter bei miradlo aus der Informatik. Eine Auswahl der gängigen Berufsbezeichnungen:

• Webautoren
• Webdesigner
• Entwickler
• Suchmaschinenexperten
• Online-Redakteure
• Mediendesigner
• Mediengestalter
• Informationsarchitekten
• Usability-Experten
• Web-Ergonomen
• XML-Evangelisten
• Webworker

Je nach Schwerpunkt und Geschmack bezeichnen sich diejenigen, die mit dem Web arbeiten, mit einer der genannten Berufsbezeichnungen. Mir persönlich gefällt Webautorin gut, da diese Bezeichnung meines Erachtens am besten die gesamte Tätigkeit beschreibt.

Webdesign und Webentwicklung : hilfreiche Programme

zum Seitenanfang

Fürs Erstellen von Webseiten gibt es einige hilfreiche Programme, für viele gibt es keine Alternative zum marktführenden Dreamweaver. Jedoch wer Alternativen sucht, kann einiges anders finden. Hilfreich sind beispielsweise das Firefox Add-On Screengrab und die Webdeveloper-Toolbar; speziell unter Linux, gibt es neben Quanta unter anderem Ergänzungen wie KSnapshot, den KColorChooser (bei Gentoo im Paket kde-base) die IEs4Linux, und den KRuler. Mehr zu Browsern, siehe: Browser, Webbrowser, User Agent (Benutzeragent).

Web 2.0

zum Seitenanfang

Der vielfach eingesetzte Begriff Web 2.0 fasst einige sehr unterschiedliche Themengebiete zusammen, die in etwa im gleichen Zeitraum verstärkt gestartet wurden. Das sind einerseits die Blogs meist mit RSS-News. Blogs werden meist, erst dann, erfolgreich, wenn die Kommunikation mit den Besuchern stattfindet. Noch stärker gilt das für Wikis und Webforen, nur wenn sich die Leser und Besucher beteiligen, ergeben sich spannende Projekte. Klappt das nicht, dann sieht man an vielen traurig leeren Webseiten, dass sie zwar viele Möglichkeiten haben, die jedoch nicht genutzt werden. Ein weiterer sehr wichtiger Teilbereich des Web 2.0 sind die sozialen Netzwerke, angefangen von öffentlichen Lesezeichen, über Kontaktmöglichkeiten, eingebaute Foren und ähnliches. Führend in Deutschland sind zur Zeit Xing, Studi-VZ und Schüler-VZ.

Workaround, Umgehungslösung, Würgaround

zum Seitenanfang

Ein Workaround ist meist eine provisorische Lösung die das gewünschte Ergebnis bringt, ohne den eigentlichen Fehler zu beheben. Für Endanwender ist ein Workaround bei Softwarefehlern, oft die einzige Möglichkeit, das Problem zu lösen. Im Webumfeld werden Workarounds genutzt, um bekannte Schwächen mancher Browser in der CSS-Implementierung zu umgehen. Bei Lösungen, die sehr unschön sind oder nur mit großem Aufwand zum Ziel führen, spricht man umgangssprachlich auch von einem Würgaround.

www (World Wide Web)

zum Seitenanfang

Das heutige Web (www) wurde 1989 von Tim Berners-Lee an einem Forschungsinstitut in Genf als Dokumentationssystem entwickelt. Das World Wide Web basiert auch heute noch auf den drei Kernstandards HTTP (HyperText Transfer Protocol), HTML (HyperText Markup Language) und URL (Uniform Resource Locator, ein URI [Uniform Resource Identifier] bezogen auf HTTP), ohne die keine Webseite angezeigt werden kann. Inzwischen haben sich als weitere Standards CSS, JavaScript und HTTPS (HyperText Transfer Protocol Secure), etabliert.

WYWIWYG (What You See Is What You Get)

zum Seitenanfang

WYSIWYG-Programme sollen Dokumente bereits während der Bearbeitung am Bildschirm exakt so angezeigen, wie diese später aussehen. In der Webentwicklung funktioniert das für den einen vom Programm genutzten Browser sehr gut. Allerdings ist das Ganze ein Trugschluss, denn gerade Anfänger glauben, dass diese eine korrekte Ausgabe ihnen eine funktionierende Webseite beschert. Die Programme, wie z.B. Dreamweaver können jedoch nicht automatisch alle Browserbesonderheiten berücksichtigen, daher ergeben sich später häufig Anfragen, wie: “Warum stellt der Browser XY meine Seite nicht so dar wie der Browser Z.”

Ein umfangreiches Glossar zur Webentwicklung gibt es bei Michael Jendryschik, dort gibt es außerdem die sehr gute Einführung in Webdesign. Empfehlenswert zum Thema Webdesign ist immer auch SelfHTML, meines Erachtens am besten nutzbar, indem man bei Google eingibt: selfhtml gesuchter_Begriff. Ich freue mich auf Kommentare und Hinweise.