Pixelfans

Semantikplus: HTML-Elemente mit rel-licence und include-pattern aufwerten

geschrieben von carsten

Bei der Verwendung spezialisierter Suchdienste für Inhalte veröffentlicht unter Creative Commons Lizenzen, wie es sie seit langem von Yahoo, seit einiger Zeit auch von Google oder direkt auf der Webseite von Creative Commons gibt, kam mir die Idee zur semantisch-detailierteren Auszeichnung von HTML-Elementen mit Hilfe von Mikroformaten. Ich habe mir vorgstellt, mit diesen Suchdiensten indexierte Inhalte, nach bestimmten Lizenzen durchsuchen zu können.

Die Suchdienste orientieren sich dabei, meiner Meinung nach, vorrangig an der Auszeichnung der Lizenz der gesamten Webseite mit Hilfe des Mikroformats rel-licence bzw. der ähnlichen DublinCore-Auszeichnung. Dabei wird ein Link auf einen Lizenztext der Webseite, mit dem rel-Tag-Attribut ergänzt, was es (such-)maschinenlesbar macht.

Beispiel:

<a rel=“licence” title=“Lizenz aller Inhalte” href=“http://creativecommons.org/licenses/by/2.0/de/“>
Creative Commons Namensnennung 2.0 DE Lizenz</a>

Im Moment besteht meines Wissens nach, die einzige Möglichkeit lizenzspezifische Informationen für Suchmaschinen bereitzustellen darin, die gesamte Webseite mit einer oder mehreren Lizenzen auszuzeichnen, aber leider nicht einzelne Elemente einer Seite. Die Möglichkeit mehrere Lizenzen gleichzeitig zu vergeben, bietet sich z.B. bei der Veröffentlichung von Programmcode an, den man sowohl unter CC als auch unter GPL veröffentlichen könnte.

Cooler wäre doch aber, wenn ich die spezialisierten Lizenzinformation, wie ich sie bei z.B. flickr für meine Bilder vergebe, auch maschinenlesbar hinterlegen könnte. Ich hätte dann die Möglichkeit, einfacher als bisher nach tollen Fotografien zur kommerziellen Verwendung oder Weiterverarbeitungzu suchen, auch wenn jeweils die gesamten Seiten meiner Lieblingsfotografen mit einem copyright-Vermerk versehen sind.

Für die Praxis würde ich auf eine Kombination aus bestehenden Mikroformaten zurückgreifen. Klassischerweise wähle ich um Lizenzinformationen zu vergeben das rel-Attribut licence und kombiniere es mit der include-pattern Mikroformat-Konstruktion, welche mir erlaubt einmalig gesetzte Informationen auf einer Seite häufiger wieder zu verwenden.

Das include pattern findet häufig bei Bewertungssystemen seine Anwendung, wenn z.B. mehrere Produkt-, Veranstaltungs- oder Leseempfehlungen vom gleichen Nutzer gemacht werden, so kann die Information über den Autor als hcard in den hreview eingefügt werden.

Mein Szenario sähe also wie folgt aus:

<a href=“id-of-my-special-licence” class=“include” title=“Lizenzinformationen für dieses Bild”>
<img src=“bild.jpg” alt=“meine aussagekräftige Beschreibung”/>
</a>

 .. <!—ganz woanders, aber auf der gleichen HTML-Seite—>

 <a href=“http://creativecommons.org/licenses/by/2.0/de/“ id=“id-of-my-special-licence“ rel=“licence”>
Creative Commons Namensnennung 2.0 DE Lizenz</a>

In meinem Beispiel verwende ich das href-Attribut um auf die Lizenz zu verweisen unter der ich meinen Bildinhalt veröffentlichen will. Handelt es sich aber z.B. nicht um mein Schaffenswerk, so will und sollte ich eher auf die Webseite des Autors verlinken, oder auf das gleiche Bild in anderer Auflösung. Auch die Verwendung meiner gern genutzten jquery-thickbox bliebe mir mit diesem Code verwehrt. In einem solchen Fall belasse ich das a-Tag wie ich es haben will und muss notgedrungen noch einen weiteren HTML-Container hinzunehmen, der die Lizenzzuweisung für meinen Inhalt übernimmt. Die Wahl fällt hier auf

<object>

, denn das ist im Moment neben dem a-Tag das einzige weitere Element zur Realisierung des include-pattern.

<a href=“http://www.pixelfans.de/bild-1024-800.jpg” title=“vergrößern”>
 <object data=“id-of-my-special-licence” class=“include”>
 <img src=“bild.jpg” alt=“meine aussagekräftige Beschreibung” />
</object>
</a>

 .. <!—ganz woanders, aber auf der gleichen HTML-Seite—>

 <a href=“http://creativecommons.org/licenses/by/2.0/de/“ id=“id-of-my-special-licence“ rel=“licence”>
Creative Commons Namensnennung 2.0 DE Lizenz</a>

Bei meinen Recherchen zu diesem Gedanken bin ich über Evans gleichwertige Frage im Mikroformate-Wiki (“open issue” vom 07. April 2006) gestolpert, auf die aber leider seit 3 Jahren noch keine Antwort gefunden wurde. Auch er fragte sich wie man Lizenzinfos für spez. Seitenbestandteile, wie z.B. Bilder, vergeben kann.

Update: (4 Minuten nachdem der Beitrag fertig war)
Vielleicht könnte media-info was für Evan und für mich werden ?! Erkenntnis kommt immer erst hinterher.

Kategorie: Ideen | Kommentare (0) | Permalink

Runde Ecken für Webkit, Gecko und Opera

geschrieben von Pawel

Runde Ecken scheiden die Geister. Während die einen sie für überflüssig halten, halten andere sie im Webdesign für nützlich. Wir gehören zu letzteren. Durch die runden Ecken können Inhalte optisch besser gruppert werden, was auch gut an unseren Infoboxen sichtbar wird.

Nun gibt es viele erprobte Lösungen, die aber entweder das Markup aufblähen, zusätzliches Javascript benötigen oder mit Bildern arbeiten.

Peter Kröner hat eine Möglichkeit gefunden, die auf all das verzichten kann und sogar mit dem Internet Explorer funktioniert. Die Demo funktioniert zwar, dafür gibt man aber die Möglichkeit auf, die Elemente nach Inhalt zu benennen.

Wenn man mit ein bisschen Meckern des CSS-Validators leben kann, gibt es keinen Grund bei Browsern auf der Basis von Webkit und Gecko nicht zur Eigenschaft border-radius zu greifen. Die beiden Browserengines benötigen nur ihr jeweiliges Prefix (-webkit bzw. -moz)und schon gibt es im Firefox, Safari, Chrome us. runde Ecken.

Ein bisschen Vorsicht ist geboten, da sich die Syntax etwas unterscheidet. Webkit folgt der W3C-Empfehlung, Firefox weicht etwas davon ab. Die Unterschiede stellt CSS3.info gut dar.

Gerrit van Aaken wünscht sich auch runde Ecken für den IE8 und Opera. Opera selbst hat eine Möglichkeit vorgestellt, die es nutzt, dass nur der norwegische Browser bisher SVG als Hintergrundbild anzeigen kann. Die SVG-Grafik enthält dabei die gewünschte Farbe, Rand und (wie auf pixelfans) Transparenz. Bedauerlicherweise zeigt diese Beispiel aber auch die Vergänglichkeit von CSS-Hacks.

Als Opera 9.5 aktuell war (z.Zt. gibt es gerade die 10 alpha) hat kein weiterer Browser

div:nth-child(1n)

unterstützt. Durch diesen Hack konnte für Opera (und auch für den Konqueror) die Hintergrundfarbe verändert und der Rand entfernt werden. Mittlerweile interpretieren aber auch die Webkitbrowser diese CSS3-Anweisung.

Glücklicherweise hat sich Dirk Ginader Gedanken über CSS-Hacks gemacht (und diese auch mitgeteilt). Opera benötigt

/* Opera */
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
 ... {
...
 }
}

und schon kann wider in Analogie zum o.g. Beispiel gearbeitet werden. Wir haben auf pixelfans noch

html:not(:nth-child(1))... { ... }

verwendet, um für den Konqueror Farbe und Rand wieder zu setzen. Jetzt fehlt wirklich nur noch der Internet Explorer.

Kategorie: CSS , SVG | Kommentare (0) | Permalink