Ich finde es schon spannend, dass Safari offensichtlich seine eigenen Schriften mitbringt, die von ihm unabhängig von den Systemschriften verwendet werden.

Safari 3.1/Win stellt momentan das Blog auch auf Windows-Rechnern mit der Lucida Grande dar, während die anderen Browser mit dieser Schriftartangabe nichts anfangen können und auf Arial zurückfallen.

Leider sieht die Microsoft-Alternative Lucida Sans Unicode, die auch die anderen Browser auf meinem System kennen, vergleichsweise hässlich aus und wird daher nicht zum Einsatz kommen.

Mehr zur Lucida und ihrem Problem mit Kursiven bei Gerrit, dem ich nicht zuletzt wegen seiner wirklich guten Artikel viel Glück beim Befreiphone-Gewinnen wünsche: Gute Lucida, schlechte Lucida.

Auf den meisten Windows-Systemen dürfte der erste Block in Arial dargestellt werden, erst mit Safari sieht man den Unterschied. Ist Safari installiert, findet man die Lucida Grande im Ordner Safari.resources im Installationsverzeichnis und kann sie natürlich auch den Systemschriften hinzufügen.

Als ich damals begann mich für HTML und CSS zu interessieren, fand ich die Möglichkeiten beider Sprachen faszinierend und das Konzept der Trennung von Inhalt und Layout einleuchtend. Der erste Tatendrang wurde zeitweise nur durch eine Software aus dem fernen Redmond gebremst: den Internet Explorer.

Version sechs verhielt sich oft anders, als man das angesichts des Codes erwarten sollte. Schnell war klar, dass das nicht nur am anfängerhaften Code sondern auch und vor allem am veralteten Browser lag und mit der Zeit und einigen Internetrecherchen lernte ich manche Eigenheiten des IE kennen. Begriffe wie „Star-HTML-Hack“ und „hasLayout“ verloren ihre Schrecken und so wurden Layouts möglich, die auch im im IE 6 und seinem grossen Bruder IE 7 akzeptabel aussehen.

Nun stehe ich mit JavaScript wieder am Anfang einer neuen Websprache und was soll ich sagen: Die Probleme sind ähnlich. Es gibt recht klare und einleuchtende Konzepte, die in der Praxis am IE scheitern.

So gibt es etwa die setAttribute-Methode, die einem Knoten ein Attribut zuweisen kann. Einem Link kann beispielsweise mit linkknoten.setAttribute("class","externer"); die Klasse „externer“ zugeteilt werden, die man mit der komplementären getAttribute-Methode auch wieder auslesen kann. Mit der gleichen Syntax könnte der Link auch noch href- und title-Attribute bekommen, bevor er schliesslich in den Dokumentenbaum eingehängt wird. setAttribute ist universell einsetzbar und hat eine leicht zu merkende Syntax, warum sollte man sich für das Setzen und Auslesen von Klassen noch mit dem Wissen um die vergleichsweise spezielle className-Eigenschaft eines Knotens belasten müssen?

Ganz einfach: Weil der Internet Explorer in seinen beiden am weitesten verbreiteten Inkarnationen nicht zuverlässig damit klar kommt.

Durch setAttribute gesetzte Klassen, die der IE-DOM-Inspektor auch sieht, werden dann auf einmal vom CSS nicht beachtet oder Klassennamen werden nicht korrekt ausgelesen, weshalb das betreffende Script dann natürlich nicht im IE funktioniert.

Genau das gleiche Problem existiert im IE bei der Behandlung des onclick-Attribut, auf das man verzichten und stattdessen knotenname.onclick = function(){}; einsetzen sollte.

Dummerweise stand das nicht in meinem ansonsten wirklich genialen Lehrbuch, was mir einige Stunden Gefluche mit meinem Lieblingsbrowser eingebracht hat. Bei einem so diffusen Problembild war meine Webrecherche erfolglos, und auf die Idee, bei SELFHTML ausgerechnet bei setAttribute nachzuschlagen um dort eine eindringliche Warnung inklusive Erklärung des Phänomens zu finden, bin ich leider nicht gekommen. So brachte erst ein beiläufiger Hinweis in einem JavaScript-Cheatsheet die Erleuchtung.

Und damit Google in Zukunft eine Stelle mehr im Web findet, die von Anfängerproblemen mit JavaScript, Klassen, Event-Handlern und dem Internet Explorer berichtet, habe ich diesen kleinen Beitrag verfasst.

Grumpf!

Eine der von Microsoft gross beworbenen Neuerungen des Internet Explorer 8 wird die Unterstützung von Webslices sein.

Webslices ähneln einem RSS-Feed darin, dass sie dem IE-Benutzer erlauben, Inhalte aus einer Internetseite herauszulösen und sie bequem über die Lesezeichenliste zugänglich zu machen. Das entsprechende „Bookmark” erscheint ausserdem fett gedruckt, wenn sich der Inhalt des Webslice geändert hat.

Konzeptionell ist das nichts besonders neues, der Grundgedanke ähnelt RSS-Feeds und die Umsetzung entspricht letztlich einem von Microsoft definierten Microformat mit den drei Bezeichnungen hslice, entry-title und entry-content.

<div class="hslice"> <h2 class="entry-title">Aktuelle Meldungen</h2> <ul class="entry-content"> <li></li> <li></li> </ul> </div>

Beispiel 1: Der Inhalt der gesamten Liste kann in einem Webslice mit dem Titel „Aktuelle Meldungen” dargestellt werden.

<div class="hslice"> <h2 class="entry-title">Aktuelle Meldungen</h2> <h3 class="entry-content"></h3> <p><p> <h3 class="entry-content"></h3> <p></p> </div>

Beispiel 2: Hier werden nur die Artikelüberschriften, nicht jedoch die Artikeltexte im Webslice auftauchen.

Allerdings ist die Integration der Inhalte im IE 8 deutlich hübscher lösbar, als mit der rudimentären RSS-Unterstützung, die etwa Live-Bookmarks bieten. Somit könnten sich neue Anwendungsgebiete eröffnen, von Microsoft wird gerne die Verfolgung von Auktionen bei eBay als Beispiel angegeben.

Das klingt alles ganz einfach, hat aber einen kleinen Nachteil: Erstellt man Webslices mit dieser simplen Methode, gestaltet sich ihr Layout einigermassen schwierig. Im Vorschaufenster wird um die entry-content-Elemente einfach ein <body></body> gelegt, auf den die gleichen CSS-Selektoren zutreffen, wie auf den eigentlichen Body der Ursprungswebsite. Ist dort beispielsweise eine Hintergrundfarbe angeben, die der Farbe der h3-Ãœberschriften im Webslice-Container entspricht, hat man das klassische Problem des schwarzen Adlers auf schwarzem Grund.

Aber Microsoft wäre nicht Microsoft, wenn sie dafür nicht eine typische Lösung parat hätten: Man möge seinem „richtigen” Body doch bitte eine ID oder Klasse zuweisen und ihn dann darüber ansprechen â€¦

Das halte ich aus semantischen Gründen nur für begrenzt sinnvoll und so habe ich mich bei meinen Experimenten mit einem Selektor, der die ID eines übergeordneten ausserhalb des Webslice liegenden Containers enthält, beholfen. So ist nun die Rubrik „Aktuelles” aus der Navigationsspalte auch als Webslice zu haben.

Wer sich das Ganze mal anschauen mag, braucht aber nicht unbedingt den IE 8 zu installieren, die Webchunks-Erweiterung rüstet eine Websliceunterstützung für den Firefox nach. Die Erweiterung ist noch nicht ganz ausgreift, inkompatibel zur All-in-One-Sidebar-Erweiterung und legt die Slice-Links in einer separaten Toolbar statt zu den Lesezeichen ab, aber für einen ersten Eindruck der Möglichkeiten reicht’s.

Mit einem selbst zu schreibenden Greasemonkey-Script ist es ausserdem möglich, von jeder beliebige Seite Webslices für den Firefox zu erstellen.

Update (02.09.2008):

Webchunks scheint mit der Angabe einer spezifischen Vorschauseite nicht klarzukommen. Daher benutzt Webchunks hier im Blog die wie oben beschrieben eingebetteten Webslice-Informationen, während der IE 8 im Vorschaufenster richtigerweise die per

eingebundene Alternativseite zeigt.

Durch die Angabe einer Alternativseite eröffnet sich die komplette Palette an CSS-Gestaltungsmöglichkeiten für die Webslice-Vorschau, worauf Firefox-Benutzer momentan wohl leider verzichten müssen.

Das Originallayout wird kräftig entschlackt und flexibel an die Grösse des Browserfensters angepasst.

Mit Hilfe eines Benutzer-JavaScripts können ausserdem die Topnews in die Sidebar verlegt werden. Dann sollte man auch auf kleineren Monitoren nicht mehr scrollen müssen, um die neusten Nachrichten auf heise.de zu finden.

Stylesheet und Greasemonkey-JavaScript sind nicht kompatibel zu den älteren Versionen.

Update (29.08.2008):

Die neue Variante des User-JavaScripts ist gegenüber Veränderungen bei heise-Online etwas toleranter und funktioniert auch ohne ein Benutzerstylesheet mit dem Heise-Originallayout. Da im neuen JavaScript auch einige wenige Layout-Informationen stecken, habe ich mein Benutzerstylesheet entsprechend angepasst.

Mit dem richtigen Stylesheet ist das viel kritisierte neue Layout von heise gar nicht mal so übel.

Zumindest erlaubt die neue technische Basis der Seite, die auf XHTML und CSS setzt, nun das einfache Entwickeln von Userstylesheets ohne dass man sich dabei durch Tabellen kämpfen muss. Über einige recht unsemantische Bezeichnungen, etwa #mitte_rechts oder .col100weiss, sollte man dabei allerdings auch mal hinwegsehen können.

CSS und Script werden nicht weiterentwickelt. Ich empfehle die neue Kombination von Stylesheet und JavaScript aus diesem Beitrag: Jedem sein eigenes heise.

Safari ist momentan der einzige Browser, der das Einbinden von Schriftarten in Internetseiten mit CSS unterstützt. Die dazu notwendige @font-face-Regel wird von allen anderen Browsern ignoriert, die weiterhin Verdana als Standardschriftart des Blogs verwenden.

Ich finde die Möglichkeiten, die sich durch die Einbettung beliebiger Schriftarten ergeben, ziemlich spannend, auch wenn sich damit eventuell wieder ein weites Feld für Abmahnungen eröffnet, wenn Schriftarten unter Verletzung ihrer Lizenzbedingungen eingesetzt werden.

Dass die Bank auch noch mit einem Siegel „Sehr gute Website” wirbt, setzt dem Ganzen dann die schwedische Krone auf (1). Erinnert mich irgendwie an eine katastrophale Kommunen-Website, die mit ihrer Barrierefreiheit warb.

Es sind also leider nicht nur deutsche Kommunen, sondern auch Privatunternehmen mit extrem hohen Sicherheitsbedürfnissen absolut ahnungslos, was Internettechniken angeht. Und zwar so ahnungslos, dass sie nicht mal auf die Idee kommen, externen und unabhängigen Sachverstand zur Überprüfung ihrer Seiten einzukaufen.

1) Wobei anzumerken wäre dass dieses „Qualitätssiegel” von einem Markforschungsinstitut aufgrund einer Befragung der Besucher der Site vergeben wurde. Von einer so fachkundigen und repräsentativen Jury (Sehbehinderte werden wohl kaum darunter gewesen sein, mein Alt-Text-Favorit ist „teaser_bjoern_3”) kann man natürlich keine ernsthafte Bewertung erwarten.

Der Leserzustrom zu meinem Blog erklärte sich durch den guten 7. Platz, den der Artikel bei Google mit der Suchphrase „k3 fleisch” errungen hatte. Leider verlinkte die Suchmaschine aber die Hauptseite des Blogs und nicht den Artikel. In einigen Tagen würde der Beitrag so also nicht mehr zu finden sein.

Daher habe ich mit dem Wordpress-Plugin Google Sitemaps eine neue Sitemap erzeugt, in der die Hauptseite schwächer gewichtet wird als die Artikelseite (Priority 0.8 gegenüber 1). Nach der Einreichung der neuen Sitemap über die Webmaster-Tools reagierte die Suchmaschine prompt und als angenehmer Nebeneffekt errang der Blogeintrag nun Position 1 unter den Suchergebnissen. Hierbei wird wohl das Vorkommen der Suchphrase im Titel der Seite eine Rolle gespielt haben.

Gleichzeitig hat Google aber auch einen Link zum Kommentarfeed aufgelistet. Als erste Gegenmassnahme bekamen alle Links zu Kommentarfeeds ein rel="nofollow" verpasst. Leider brachte diese Massnahme überhaupt nichts, die Feeds wurden weiterhin indiziert. Daher bestand nun der nächste Schritt darin, Suchmaschinen per robots.txt von den Kommentarfeeds fernzuhalten. Aufgrund der Struktur meiner Permalinks lautet der entsprechende Eintrag für mein Blog: User-agent: * Disallow: /*/*/*/*/feed/ Hierauf reagierte schliesslich auch der grosse Bruder aus Mountain View und ersetzte den Feed in den Suchergebnissen durch einen Verweis auf die Hauptseite des Blogs.

Linktechnisch war ich nun zufrieden, aber irgendwie störten mich noch die nichtssagenden Beschreibungen, die von Google zur Erläuterung der Treffer verwendet wurden. Abhilfe schafft hoffentlich das Plugin wpSEO, welches für jeden Wordpress-Artikel dynamisch eine eigene Description-Metaangabe generieren kann. Da der Gammelfleisch-Artikel durch den Googlebot noch nicht wieder eingelesen wurde, hat sich diese Änderung aber noch nicht auf die Suchergebnisse durchgeschlagen.

Als Ergebnis meiner Spielereien mit Google hier die Einstiegstipps zur Suchmaschinenoptimierung:

1. Eine Sitemap erstellen, bei der die Artikel stärker gewichtet werden als die Hauptseite. (Google-Sitemaps-Plugin)
2. Die Kommentarfeeds per robots.txt von der Indizierung ausschliessen. (SelfHTML)
3. Gegebenenfalls dynamisch passende Description-Metatags erstellen lassen. (wpSEO-Plugin)

Mittlerweile hat übrigens eine schnöde Agenturmeldung bei einigen Google-Datacentern meinen Blogeintrag bereits wieder vom Spitzenplatz verdrängt. Sic transit gloria mundi.

Undersökningen kan också avliva en del myter om den svenska bloggvärlden.

Syftet är att sprida kunskap och nyfikenhet om bloggvärlden till folk som vanligtvis inte läser bloggar.

Das bekomme ich momentan zu lesen, wenn ein Server seine Besucher anhand der IP-Adresse erkennt und automatisch auf eine Seite in der vermeintlich passenden Sprache umleitet. Nur scheint es für ihn nicht so einfach zu sein, zwischen Schweden und Schweiz zu unterscheiden.

Dieses Phänomen kann ich leider immer wieder mal beobachten, mein DSL-Provider scheint eine Vorliebe für „schwedische” IP-Adressen zu haben. Wenn die serverseitige Weiterleitung – wie in diesem Fall – auch noch auf eine Seite führt, die keine Auswahl der Sprache zulässt, steht man ganz schon im Regen.

Sowas könnte ich echt hassen â€¦

Smørrebrød ist übrigens Dänisch und nicht Schwedisch, aber es passte so schön und auf eine falsche Sprache mehr oder weniger kommt es bei dem Thema auch nicht mehr an. Römpömpömpöm.

Die Standard-Sidebar ist bei Wordpress eine Ansammlung verschachtelter Listen:

Mit dem dazugehörigen CSS kommen beide Browser nicht so recht klar:

• Safari ignoriert – mindestens für ul – komplett den Universalselektor * {margin:0; padding:0;} und benötigt für diese eine eigene Formatierung, also ul {margin:0; padding:0;}

• Der IE 7 produziert – erstaunlicherweise im Gegensatz zum IE 6 – Abstände über den inneren ul, obwohl laut IE-Web-Developer-Toolbar das CSS richtig vom Browser verstanden wird. Der Bug hat mal wieder mit der hasLayout-Eigenschaft der IEs zu tun und Abhilfe schafft ein *:first-child+html #navi ul {height:1%}

  Um die Gefahr von irgendwelchen Ãœberraschungen mit anderen Browsern zu verringern, habe ich hier im Selektor den Star-Plus-HTML-Hack angewendet, der momentan nur den IE 7 ansprechen sollte.

Es ist doch immer wieder schön, wie viele Ãœberraschungen man mit den verschiedenen Browsern erleben kann. Vielleicht hat ja auch noch jemand einen Tipp, warum Opera 9.2 das padding-top der li in meinen Bilderstreifen ul.bildergallerie li { display:inline; padding-top:15px; } ignoriert? Momentan kleben die Vorschaubilder in diesem Browser doch etwas eng aneinander, wenn sie nicht mehr alle in eine Zeile passen.

Dass nun aber auch noch die Produktion meiner Lieblingsjeans in der von mir benötigten Weiten/Längen-Kombination eingestellt wurde, kann ich nur als dezenten Hinweis auf die Notwendigkeit einer Diät verstehen. Oder ist es vielleicht doch ein Aufruf zur Selbstverstümmelung? Bei kürzeren Beinlängen gehen die Bundweiten schliesslich wieder bis zum Fassformat.

Liebe Planer von Levi's: Sagt mir doch bitte das nächste Mal vorher Bescheid, dann kaufe ich euch eine Monatsproduktion ab und mache damit über die folgenden Jahre ein Vermögen bei Ebay.

PS: Über die Firmenhomepage von Levi's, von der ich mir irrigerweise sachdienliche Informationen erhofft hatte, könnte man sich auch hervorragend aufregen. Kein Wunder, dass sie bei einer Google-Suche nach "Levis Deutschland" gar nicht auf der ersten Ergebnisseite auftaucht und selbst bei der Suche allein nach dem Markennamen noch locker von einem polnischen Geschäftsmann geschlagen wird.

Allerdings scheinen die taz-Macher sie vor ihren Besuchern verstecken zu wollen, man gelangt nur über recht unauffällig platzierte Links zu ihr:

(Man kommt alternativ auch über das Archiv, dass sich offensichtlich auf die Printausgabe der taz und nicht auf die Internetseite bezieht, zum Ziel.)

Der virtuellen Printausgabe fehlen bei Artikeln, die nicht auch separat online gestellt wurden, wie gewohnt alle Bilder und jedes weitergehende Layout. Leider kann man sich die aktuelle Titelseite der taz nicht mehr in Originalgrösse anschauen, auf der Abo-Seite wird lediglich ein stark verkleinertes Bild präsentiert.

Insgesamt ist es sicher positiv, dass auf die Kritik der Leser eingegangen wurde und die Printausgabe wieder in alter Form verfügbar gemacht wurde, allerdings ist es für mich unverständlich, warum sie so versteckt wird.

Habe ich eigentlich schon mal angemerkt, dass taz.de mittlerweile aussieht, wie jede beliebige andere Nachrichtenseite auch?
Grossflächige Werbung, irrelevante Leserumfragen, Leserforen (momentan drei(!) Themen) und die unvermeidlichen Bildergalerien haben hier nun auch Einzug gehalten. Ihr Profil wird die taz-Genossenschaft so wohl kaum schärfen.

Wichtig war für mich im konkreten Fall, dass die erzeugten Links ein beliebiges target-Attribut mitbekommen können, da ich sie über target="_parent" den Signatur-Iframe sprengen lassen möchte.

Für Anwender wie mich, die momentan keinen Webspace zur Verfügung haben, der eine Scriptsprache wie PHP unterstützt, scheint mir dieser Service die optimale Möglichkeit, den RSS-Feed in HTML umzuwandeln. Allerdings mit der Einschränkung, dass Besucher, die JavaScript abgeschaltet haben, nichts bzw. nur einen Link zum Feed zu sehen bekommen.

Nun sieht es dort auch so aus, wie auf anderen Newsseiten und die Printausgabe ist hinter der Seite kaum mehr zu erkennen. Gerade das hat für mich den Charme des alten Layouts ausgemacht, man hatte im taz-losen Ausland fast das Gefühl, die Druckausgabe durchblättern zu können. Ausserdem fand ich es extrem praktisch, über eine kleine Datumsmanipulation in der URL gezielt auf ältere Ausgaben zugreifen zu können.

PS: Vielleicht dient das neue Layout ja auch der Förderung des digitalen Abos?

Nachtrag: Puh, was eine Friemelei, ein Benutzerstylesheet hinzubekommen, dass eine vernünftige Textbreite bei einer grösseren Schrift ermöglicht. Der Code ist, sagen wir mal, interessant. Falls jemanden meine momentane Lösung interessiert:

Zusätzlicher Code in der userContent.css:

Das Benutzerstylesheet ist natürlich stark auf meine persönlichen Bedürfnisse und Lesegewohnheiten zugeschnitten und für eine Bearbeitung der Übersichtsseiten hat meine Motivation noch nicht gereicht. Die px-Angaben dürfen angepasst werden. ;-)