Ich Wünsche euch viel Spaß beim lesen und einen wunderschönen restlichen Sonntagabend.

• Heute starten wir mit einem relativ jungen Blogprojekt auf das ich am Montag gestoßen bin. Auf bloggewinnspiele.com geht es wie der Name schon vermuten lässt um Gewinnspiele ich finde die Idee ganz nett einen solchen Blog zu schreiben auch wenn es sicher nicht der erste seiner Art ist.
• Wie ein Blitz schlug es durch die deutsche Blogosphäre, man kann durch die Verwendung des WordPressplugins „Subscribe to Comments“ abgemahnt werden. Wer die Story noch nicht gelesen hat, hat bei selbstaendig-im-netz.de noch einmal die Möglichkeit dazu.
• Ein schönes Tool für Webentwickler ist mir die Woche auch noch zwischen die Finger gekommen. Mit IETester hat man einen Emulator für sämtliche Versionen des IE. Systemvorrausetzung ist Windows XP oder Vista mit installiertem IE 7.
• Mein persönlicher Favorit diese Woche ist das Browsergame Urladex, in welchen man mit virtuellen Aktien von Webseiten handelt, wobei der Aktienkurs über die Alexa Statistiken bestimmt wird. Auf dieses kleine süchtig machende Spielchen bin ich durch meinen langjährigen Freund Julian Danz gekommen. Julian hat auf seinen neuen Blog auch einen etwas ausführlicheren Artikel zu dem Spiel geschrieben. Urladex Aktienspiel auf sinnfly.de

So, zum Abschluss gibt es wie immer noch etwas zum Schmunzeln.

Die Artikelserie wurde seit dem ich das letzte Mal darüber berichtete stark ausgebaut. Inzwischen füllen 39 Artikel das Curriculum. In der letzten Zeit wurden viele interessante Artikel zu hauseigenen Technologien von Opera veröffentlicht. Darunter fallen zum Beispiel eine Anleitung zur Verwendung von „User JavaScript“ oder ein Tutorial zum effizienten debuggen von Widgets für den Opera.

Der wohl interessanteste aktuelle Artikel dürfte wohl „Automatic numbering with CSS Counters“ sein. Dieser bezieht sich auf CSS 2.1 Allgemein und zeigt eine schöne Methode zum Nummerieren von Elementen (wie z.B. h2-tags) auf. Leider wird diese Methode noch nicht vom IE unterstützt, aber die Implementierung ist für den IE8 geplant.

Soviel zu Opera . Nun noch ein par Worte in eigener Sache. Ich habe in Markus Thömmes den Betreiber von Semantifiziert.de einen neuen Partner gefunden, und hoffe auf eine gute Zusammenarbeit. Wie der Name schon vermuten lässt geht es in dem Blog um xHTML und CSS wobei das Hauptaugenmerk auf der „semantik“ des xHTML codes liegt.

„hmm
tabellenanpassung reicht doch völlig aus oder nicht?“

Solche Aussagen liest man in einschlägigen Foren vor allem aus der eSports Szene, in welcher ich meine Wurzeln bezüglich dem Web habe, und auch Allgemein viel, viel zu häufig.

Doch woran liegt es?
Wieso haben die Leute so viel „angst“ vor etwas „neuem“?

Technik von vor 10 Jahren – was früher gut war ist es heute immer noch!

Das ist ein möglicher Gedankengang bei den betreffenden Personen, doch hat es sich nicht schon in vielerlei Hinsicht gezeigt das, dass alte zwar gut sein mag aber das neue besser ist?! Aber selbst diese Aussage kann man nicht auf die Verwendung von Framesets und Tabellenlayouts beziehen, beide sind keinesfalls gut.

Und das aus folgenden Gründen.

Framesets

Ja die guten alten Framesets und Inline-Frames eigentlich könnte man meinen so etwas gibt es heutzutage nicht mehr, doch leider ist es Gegenteilig es gibt sie immer noch. Meinem persönlichen Empfinden nach häufen sich in letzter Zeit Seiten mit Frames, mag aber auch nur Zufall sein das ich zur Zeit verstärkt auf solche Seiten treffe. Frames sind neben den Obenbenannten Tabellenlayouts das schlimmste was man dem Web antun kann. Suchmaschinen Indexieren (wenn sie es überhaupt tun) die einzelnen Inhalte der Frames. Gehen wir mal von dem Beispiel des klassischen 3teiligen Framesets aus, was in so gut wie jedem WYSIWYWG Editor vorgefertigt enthalten ist (warum eigentlich?). Die Dreiteilung ist aus Header, Navigation und Content zusammengesetzt. Wenn jetzt ein Bot die Seite crawlt werden wie gesagt die einzelnen Bestandteile des Framesets indexiert, sprich die Navigation alleine, der Content, sowie der Header. Sollte jetzt ein User die Seite über eine Suchmaschine finden, so wird lediglich der Indexierte Inhalt geladen, zum Beispiel die Navigation ohne Content oder andersherum, es wird nur in den seltensten Fällen das Frameset geladen. Beide Möglichkeiten sind auf jeden Fall alles andere als Optimal. Weitere Probleme bei Framesets sind die unterschiedlichen Ladezeiten der Frames. Ein weiterer großer Kritikpunkt an Frames ist es das man sie nicht direkt Verlinken kann, sondern immer nur auf die Seite mit dem Frameset verweisen kann. Des Weiteren sind Frames einfach Benutzerunfreundlich, es ist einfach nervig in einem Frame durch die Navigation scrollen zu müssen. Jetzt werden mir einige Frame-Befürworter sicherlich das Argument an den kopf werfen, das sie es nervig empfinden wenn die Navigation wegscrollt und nicht immer in erreichbarer nähe ist, doch dieses Argument ist hinfällig mit einigen CSS befehlen kann man den selben Effekt erreichen, ohne die negativen Eigenschaften von Frames mit sich zu bringen.

Tabellenlayouts

Das gruseligste was ich kenne, ist es wenn mich jemand fragt ob ich mal einen Blick auf seine Seite werfen könnte und es ein Tabellenlayout ist. Diese Art von Weblayout sind für Mitarbeiter oder Personen die sich später mit dem Quelltext befassen müssen der reine Graus weil ein Tabellenlayout für gewöhnlich stark verschachtelt ist und damit verdammt unübersichtlich wird. Dieser Kritikpunkt setzt sich darin weiter fort das Screenreader von Sehgeschädigten Menschen mit diesen Layouts absolut nicht klar kommen. Ich hatte vor einiger Zeit das Vergnügen der Diskussion einer Landtagsabgeordneten der Linken, welche unter einer Sehbehinderung leidet, mit einem CDU Abgeordneten beizuwohnen zu dürfen. In dieser Diskussion hat sie sehr deutlich gemacht was Tabellenlayouts für negative Auswirkungen auf Screenreader haben. Man müsste schon aus Gründen der Menschlichkeit den auf vielen Seiten hochgelobten Tabellenlayouts abschwören. Wem dieser Grund noch nicht reicht sollte wissen, dass Webcrawler dieselben Probleme wie Screenreader mit Tabellenlayouts haben und somit eine gute Platzierung bei Suchmaschinen beeinträchtigt wird. Tabellen waren als Gestaltungsmittel gedacht um Zahlen oder ähnliches zu veranschaulichen, dafür sind sie auch hervorragend geeignet, aber keinesfalls als Layoutwerkzeug.

Grundsätzlich ist zu sagen das beide Techniken Frames und Tabellenlayouts nicht mehr dem Aktuellen Standard entsprechen. Weiterhin braucht man für ein Tabellenlayout auch zeitmäßig länger und um auf die Frage in dem Zitat am Anfang des Artikels zurückzukommen NEIN reicht es nicht!

Leute habt keine Scheu davor etwas Neues zu lernen!

Die Vorteile von CSS liegen auf der Hand, angesichts der oben genannten negativen Beispiele. CSS hat auch noch andere Vorzüge wie etwa die Trennung von Struktur und Gestaltung oder die Möglichkeit einer schnellen Designänderung. CSS hat zwar den Nachteil, dass man für den IE6 ein, zwei hacks braucht und das man valides html schreiben muss, doch letzteres hat wiederum Vorteile. Wie zum Beispiel, dass Screenreader besser mit eurer Seite klarkommen und damit gleichzeitig auch die Robots der Suchmaschinen, aber das wichtigste an der Geschichte ist, dass ihr mit dem einhalten der aktuellen Webstandards das Web in seiner Entwicklung nach vorne bringt. Ganz nebenbei schont ihr auch noch eure Kollegen da diese sich nicht mehr mit maßlos verschachtelten Tabellenlayouts Auseinadersetzen müssen.

Man braucht nicht viel Zeit!

CSS zu lernen braucht wirklich nicht viel Zeit und das Aufwand/Nutzen Verhältnis hält sich wirklich im positiven Bereich. Als gutes Lehrmaterial kann ich euch wärmstens die Seite CSS4You.de empfehlen welche sich auch als sehr gute Sprachreferenz eignet. Als Videomaterial zu dem Thema kann ich euch „Jetzt lerne ich CSS Design“ von Video2Brain empfehlen. Das wäre das Grundmaterial mit dem man schon sehr viel machen kann. Wenn ihr Anleitungen zu spezielleren Sachen sucht, googlet ne Runde es gibt sehr viele gute Blogs die sich mit spezifischen Dingen befassen. Ich werde um auch den letzten Skeptiker unter euch zu Überzeugen das es nicht schwerer ist ein Design in xhtml/CSS umzusetzen, als ein Tabellenlayout zu schreiben, demnächst auf diesem oder einem Partnerblog ein ausführliches Tutorial Posten. Dieses Tutorial wird sich mit dem kompletten Prozess des Umsetzens, Angefangen bei dem Design als PSD bis hin zum fertigen Layout, befassen.

In diesem Sinne horns up! Und nehmt euch den Artikel zu Herzen.

Zum Abschluss noch eine kleine Umfrage
Note: There is a poll embedded within this post, please visit the site to participate in this post's poll.

Eine mögliche Schlussfolgerung hieraus wäre während der Entwicklung Tests in anderen Browsern durchzuführen doch dies unterbricht meiner Meinung nach bei der Masse an Browsern (Versionen) den Workflow maßgeblich. Was zu einen schlechteren Ergebnis bzw. größeren Zeitanspruch führt. Neben diesen beiden Faktoren kommt hinzu dass man seine Festplatte auch noch mit den jeweiligen Browsern sowie Versionen belasten muss.

Browsershots.org ist eine geniale Idee um Webentwicklern das Leben in Hinsicht auf die oben genannten Punkte zu vereinfachen. Anstatt die Seite in allen möglichen/wesentlichen Browsern zu betrachten muss man lediglich die URL seiner zu testenden Seite auf Browsershots.org angeben und muss einen kleinen Moment warten. (bei meinen Tests durchschnittlich 2 – 3 Minuten bei der Auswahl aller Browser) Diese Wartezeit kann man effektiv mit der Weiterarbeit an der Seite nutzen, anstatt die Browser x,y und z öffnen zu müssen.

Der Dienst von Browsershots.org funktioniert folgender maßen:

Der Dienst nimmt eine URL auf einen zentralen Server entgegen. Die URL wird von dort aus an so genannte „Fabriken“ verteilt. Bei den Fabriken handelt es sich um Rechner welche dann in einer Vielzahl von Browsern unter 4 verschiedenen Betriebssystemen (Linux, Windows, Mac OS und BSD) die URL aufrufen und Screennshots angefertigten. Diese Screenshot werden dann auf den zentralen Server geladen und dem Nutzer zu Verfügung gestellt.

Um den Browsertest zu spezifizieren hat man die Möglichkeit aus Browsern und Betriebssystemen zu wählen. Weiterhin hat man die Möglichkeit Festlegungen bezüglich Bildschirmgröße(Auflösung), Farbtiefe, und der Verwendung von Java, Javascript und Flash zu treffen.

Ich habe bis jetzt nur exemplarische Tests mit dem Dienst gemacht, aber ich bin ziemlich von ihm überzeugt, sodass er auch bald in der Praxis bei mir Anwendung finden wird.