März 2015

Wie der unbeliebteste Song gewinnen kann
Wenn man beim deutschen Vorentscheid zum Eurovision Song Contest den Zweitplatzierten vorrücken lässt, könnte der unbeliebteste aller Titel gewinnen. Anhand eines Beispiels zeige ich das.
Reste von Potenzen beim ganzzahligen Teilen
Ich beweise zwei Sätze über den Rest beim ganzzahligen Teilen einer Potenz. Das ist eine eher technische Übung und vermutlich von geringem allgemeinen Interesse.
Dekoelemente in Perleberger Straßen
Gebeten oder ungebeten dekorieren auch in Perleberg Leute Häuserwände, Schilder und andere Objekte am Straßenrand mit kleinem oder großem künstlerischen Anspruch. Vier Fotos zeigen Beispiele.

Tests zu verweissensitiven Grafiken

Shiba Inu mit Schuhen,
Foto von ヨックン (CC BY 2.1 JP)

Verweissensitive Grafiken sind Bilder, in denen bestimmte Bereiche mit anderen Inhalten über einen Link verknüpft sind. Das obige Foto weist keine solchen Verknüpfungen auf. Es folgen allerdings acht Tests, in denen dasselbe Bild Verknüpfungen aufweisen soll: Der Hund ist mit dem englischen Wikipedia-Artikel über Hunde und alle Schuhe sind mit dem Artikel über Schuhe verlinkt. Außerdem soll, wenn man mit dem Mauszeiger über Hund oder Schuhen verweilt, ein kleiner Hinweistext erscheinen, der diese Bildelemente benennt.

Verweissensitive Grafiken auf Internetseiten wurden durch die HTML-Version 3.2 ermöglicht – ein Standard aus dem vergangenen Jahrtausend, quasi ein alter Hut aus der Frühphase des WWW. Heutzutage durchstreifen Leute das weltweite Netz allerdings nicht mehr nur an Computern mit großen Bildschirmen, die auf dem Schreibtisch stehen. Üblich ist auch der mobile Zugriff vom Smartfon, das einen viel kleineren Bildschirm hat. Während man viel dafür getan hat, dass sich Bilder „automatisch“ an die Bildschirmgrößen anpassen können, wurde eine solche Anpassungsmöglichkeit für die Definition der sensitiven Bereiche auf der Grafik nicht berücksichtigt.

Da es Bedarf für verweissensitive Grafiken mit variabler Größe gibt, wird auf der WHATWG-Mailingliste diskutiert, wie man diese realisieren kann und ob gegebenenfalls der HTML-Standard erweitert werden muss. Die folgenden Testfälle illustrieren das Problem und verschiedene Lösungsansätze. Betrachtet habe ich sie mit Internet Explorer 9, Opera 27 unter Windows Vista und Firefox 36, Google Chrome 41, Safari 8 unter Mac OS X Yosemite.

[1] HTML-map-Element
Bei diesem Test ist die verweissensitive Grafik klassisch mit dem seit 1997 in HTML verfügbaren map-Element und den darin enthaltenen area-Elementen umgesetzt. Problem: Wenn auf kleinen Bildschirmen beziehungsweise in klein gemachten Fenstern auf großen Bildschirmen das Bild geschrumpft wurde, damit man es ohne Skrollen sehen kann, liegen die Verweise nicht mehr an den korrekten Stellen, da map- und area-Elemente nicht mitgeschrumpft werden. Dafür wird eine Lösung benötigt.
[2] HTML-map-Element + JavaScript
Zur HTML-Umsetzung aus [1] habe ich ein JavaScript-Skript ergänzt. Dieses prüft nach dem Laden der Seite und bei Größenänderungen des Fensters, wie sich die Größe des Bildes gegenüber seiner „natürlichen“ Größe verändert hat, und manipuliert die area-Elemente im map-Element entsprechend. Das funktioniert jedoch nur bei aktiviertem JavaScript. Da überdies eine Anpassung der Verweise einer verweissensitiven Grafik an die Änderungen der Grafik quasi immer sinnvoll ist, ist es zweckmäßig, die Funktion in den Webbrowser einzubauen, statt jedem Autor JavaScript-Gefrickel aufzubürden.
[3] SVG eingebettet in HTML
Skalierbare Vektorgrafiken wurden nicht in erster Linie erfunden, um Pixelgrafiken wie Fotos verweissensitiv zu machen. Aber sie können das leisten, worauf Simon Pieters hinwies. In diesem Test habe ich also eine SVG in den HTML-Quelltext eingebettet, die ihrerseits das Foto einbindet. Allerdings stellt von den getesteten Browsern nur der aktuelle Firefox das Ergebnis stets wie erwartet dar. In Opera, Chrome und Safari wird die Höhe des svg-Elements nicht mitgeschrumpft, auch wenn die Höhe des Bildinhaltes geschrumpft wird. Oben und unten entstehen dadurch Leerräume am Bild. Der Internet Explorer macht nicht mit und stellt die Grafik grundsätzlich zu klein dar.
[4] SVG ohne height-Attribut eingebettet in HTML
Opera, Chrome, Safari und natürlich Firefox stellen die Seite alle wie gewünscht dar, wenn ich das height-Attribut aus dem svg-Element weglasse, wie in diesem Test geschehen. Eine feine Sache! Doch auch hier stellt der Internet Explorer das Bild zu klein dar.
[5] SVG ohne width- oder height-Attribut eingebettet in HTML
In diesem Test wird die Breite durch die Breite des umgebenden figure-Elementes bestimmt. Das funktioniert bei allen Browsern ebenso gut beziehungsweise ähnlich schlecht wie der vorige Test.
[6] HTML-img-Element mit SVG
Bei diesem Test wird die SVG-Datei nicht direkt in den HTML-Quelltext eingebettet, sondern übers img-Element eingebunden. Nur der Internet Explorer zeigt das Foto überhaupt an. Die Links funktionieren aber nicht.
[7] SVG pur
Bei diesem Test wird das Bild als SVG-Datei direkt aufgerufen – also ohne in eine HTML-Seite eingebunden zu sein. Das funktioniert in allen Browsern, ist aber freilich keine Lösung für Bilder, die Teil einer Webseite sein sollen – es sei denn, man schreibt die ganze Webseite als skalierbare Vektorgrafik.
[8] SVG eingebettet und im HTML-div-„Kontainer“ absolut positioniert
Erik Dahlström deutete eine Variation von [5] an, die auch im Internet Explorer funktioniert. Hierbei wird die skalierbare Vektorgrafik innerhalb des umgebenden figure-Elementes per CSS absolut in einem div-„Kontainer“ positioniert, dem wiederum ein unterer Innenabstand zugewiesen wird, der dem Kehrwert des Seitenverhältnisses des Bildes in Prozent entspricht. Das funktioniert zwar, ist allerdings hochgradige Flickschusterei.

Mir gefällt die eingebettete SVG-Variante wie in den Tests [3] bis [5], allerdings ist die uneinheitliche Umsetzung durch Webbrowser ein massives Problem. Dieses scheint mir nicht in Fehlern einzelner Webbrowser begründet zu sein – ich fand gar keine Spezifikation zum Verhalten von in HTML eingebetteten SVGs an der Schnittstelle zwischen beiden Technologien – beziehungsweise der drei Technologien, wenn man CSS hinzunimmt. Hier braucht es meiner Meinung nach eine Standardisierung, um verweissensitive Grafiken mit eingebetteten SVGs realisieren zu können und um eingebettete SVGs überhaupt sinnvoll nutzbar zu machen.

Die Umstellung auf die Sommerzeit finden …

(Quelle: ZDF-Politbarometer vom 28. März. Die Umfrage gilt als repräsentativ für die deutsche Bevölkerung.)

Obwohl sich die ursprünglichen energiepolitischen Erwartungen nicht erfüllt haben, sie in Deutschland deutlich abgelehnt wird und weltweit mehrheitlich abgeschafft oder nie eingeführt wurde, hält man hierzulande an der Skurrilität einer Sommerzeitumstellung fest. So richtig demokratisch kommt mir das nicht vor.