Search
Items tagged with: XHTML
# Microformats
Wenn man in letzter Zeit durchs Internet surft, stolpert man immer häufiger über den Begriff „Microformats“ oder sieht das grüne Symbol auf Kontaktseiten. Aber was genau sind Microformats und für was sind sie gut?
Wikipedia meint dazu:
Ein Mikroformat ist ein Markup-Format zur semantischen Annotation von HTML oder XHTML. Mikroformat-Annotationen können leicht aus Webseiten extrahiert werden und machen weiteren Programmen (etwa Suchmaschinen) die Bedeutung des Seiteninhalts verständlich.
Das heißt, es werden vorhantenen Attributen (class, rel, rev) von (X)HTML verwendet um neue Formate zu speziellen Themen- oder Wissensgebieten zu erstellen.
Eines der ersten Formate war XFN, es verwendt den „rel“ Tag um persönliche Verbindungen über Links anzuzeigen. <a href=“http://pinki-tine.blogspot.com/“ rel=“friend met colleague“>…
Eine Anleitung und eine Liste von möglichen „rel“-Tags findet ihr hier.
Ein zweites erwähnenswertes Format ist „hCard„. Es ist ein Versuch einen Onlinestandard für Kontakte zu erstellen.
<div class="vcard"> <a class="url fn" href="http://example.com"> Max Mustermann</a> <a class="email" href=" mailto:max.mustermann@example.com"> max.mustermann@example.com</a> <div class="adr"> <div class="street-address">Musterstr.</div> <span class="locality">Musterstadt</span>, <span class="region">MP</span>, <span class="postal-code">11111</span> <span class="country-name">Germany</span> </div> <div class="tel">111 111 111</div></div>Code-Sprache: HTML, XML (xml)
(Für Faule: Ein hCard Creator)
Der Vorteil eines solchen Formates, er ist maschinen-lesbar. Das heißt es ist möglich über z.B. XSL Schnittstellen eine vCard zu erstellen. Technorati z.B. bietet eine solche Schnittstelle: http://technorati.com/contact/https://notiz.blog/contact/
Die Technorati Engine sucht auf der übermittelten Seite nach einer hCard und wandelt diese in eine vCard um. Auch die Firma Apple, welche die vCard für ihr Adressbuch verwendet, nutzt das hCard-Format für ihr Onlineangebot .Mac.
Auf der Seite suda.co.uk gibt es Links und Informationen zu weiteren Implementierungs-Möglichkeiten.
Das Problem bei dem ganzen ist, dass es Spammer dadurch noch leichter haben an komplette Adressen zu kommen…
Ein enormer Vorteil dieser Formate ist die Möglichkeit Search Engines in soweit anzupassen, dass sie anhand von XFN Soziale Netzte abzubilden oder dank hCard sogar telefonbuch.de abzulösen. Mal schaun wohin die Reise geht…
# Microdata – wie Microformats bloß besser… (Teil 1)
Der Inhalt wurde an die neusten Änderungen der Microdata-Spezifikation angepasst. Letztes Update 30.01.2010.Microdata – wie Microformats bloß besser… (Teil 2): über „Namenskollisionen und Namespaces“ und „Informationen Referenzieren“
Wie schon erwähnt, vereint Microdata die Vorzüge von RDFa und Microformats in einem Standard… aber nicht nur das, Microdata (in Verbindung mit HTML5) bietet auch einige schicke Lösungen für diverse Microformats-Problemchen.
Das abbr-design-pattern oder das value-class-pattern
Microformats:
Das abbr-design-pattern ist bisher wohl das umstrittenste Pattern im Microformats-Wiki. Grund für die Kritik an dem Pattern ist die etwas unorthodoxe Verwendung des <abbr> Tags um maschinenlesbare Meta-Informationen bereit zu stellen.
<div class="vevent"> <abbr class="dtstart" title="2007-10-05">October 5</abbr> ...</div>Code-Sprache: HTML, XML (xml)
Eine erste Alternative aus der Microformats-Community ist das value-class-pattern, das zwar das Accessibility-Problem „behebt“ aber noch lange keine Perfekte Lösung bietet.
<div class="vevent"> <span class='dtstart'> <span class='value-title' title='2007-10-05'> </span> October 5 </span> ...</div>Code-Sprache: HTML, XML (xml)
Der HTML-Code wird durch weitere Elemente unnötig aufgeblasen und das Pattern basiert auf teilweise leeren Elementen.
Microdata/HTML5:
In HTML5 gibt es dagegen ein spezielles Tag um Zeit und Datum sowohl user als auch maschinenlesbar zu machen.
<div itemscope itemtype="http://microformats.org/profile/hcalendar"> <time itemprop="dtstart" datetime="2007-10-05">October 5</time> ...</div>Code-Sprache: HTML, XML (xml)
Reine Meta-Informationen
Microformats:
Eigentlich spricht es gegen die Prinzipien der Microformats-Idee, reine Metadaten zu verwenden:
Visible data = more accurate data. By designing for humans first and making the data presentable (thus viewed and verified by humans), the data is inevitably more accurate, not only to begin with (as errors are easily/quickly noticed by those viewing the pages/sites), but over time as well; in that changes are noticed, and if data becomes out-of-date or obsolete, that’s more likely to be noticed as well. This is in direct contrast to „side files“ and invisible data like that contained in<meta>tags.
— Tantek Çelik
…aber GEO-Daten sind z.B. Informationen die der Benutzer nicht unbedingt sehen muss.
<div class="geo"> <span class="latitude">37.386013</span> <span class="longitude">-122.082932</span></div>Code-Sprache: HTML, XML (xml)
Microdata/HTML5:
In HTML5 gibt es für dieses Problem eine recht schicke Lösung: Laut der Spezifikation sind <meta />-Tags im kompletten Quellcode (auch im body) erlaubt.
<div itemscope itemtype="http://microformats.org/profile/hcard#geo"> <meta itemprop="latitude" content="37.386013" /> <meta itemprop="longitude" content="-122.082932" /></div>Code-Sprache: HTML, XML (xml)
Fazit
Selbst wenn sich Microdata (item und itemprop) nicht durchsetzen sollte, sind <meta> und <time> schon ein echter „Segen“ für die Microformats-Community 🙂
Im zweiten Teil nehm‘ ich mir das include-pattern und das Problem der möglichen Namens–Kollisionen vor. Microdata – wie Microformats bloß besser… (Teil 2): über „Namenskollisionen und Namespaces“ und „Informationen Referenzieren“
#abbrDesignPattern #HTML #HTML5 #includePattern #Microdata #Microformats #Mikroformate #valueClassPattern #XHTML
# Microdata: Update und Usability-StudieEndlich denkt beim Thema „Usability“ auch mal jemand an die Entwickler 🙂
Google hat über die letzten Wochen eine Usability-Studie zu Microdata durchgeführt und die Spezifikation wurde auch gleich entsprechend der Ergebnisse angepasst.
<address itemscope itemtype="http://microformats.org/profile/hcard"> <strong itemprop="fn">Alfred Person</strong> <span itemprop="adr" itemscope> <span itemprop="street-address">1600 Amphitheatre Parkway</span> <br> <span itemprop="street-address">Building 43, Second Floor</span> <br> <span itemprop="locality">Mountain View</span>, <span itemprop="region">CA</span> <span itemprop="postal-code">94043</span> </span></address>Code-Sprache: HTML, XML (xml)
Die Änderungen:
- Aus
itemwirditemscope.- Der Typ wird über
itemtypeund nicht mehr überitembzw.itemscopeangegeben.- Das Attribut
itemidwurde eingeführt, um z.B. auf ISBN-Nummer zu verweisenitemid="urn:isbn:0-330-34032-8".Über den neuen HTML-Tag
<itemref />(alternativ:<itemfor />) werde ich im zweiten Teil von „Microdata – wie Microformats bloß besser…“ eingehen (zum ersten Teil).Jetzt muss ich nur noch meine alten Artikel zu Microdata anpassen… das hat man nun davon, wenn man über Drafts berichtet 😉
#hCard #HTML #HTML5 #Microdata #Microformats #RDFa #update #Usability #vCard #XHTML
Microformats Would Benefit from a Namespace · Jens Oliver Meiert
Microformats become more and more popular, accelerated by the questionable success of the nofollow microformat. However, those of them that mandate class names cause problems that could be avoided by using a “pseudo-namespace.”meiert.com
# HTML5 wird kein RDFa unterstützen
In einem kürzlich veröffentlichten Interview für das Web Standards Project (kurz WaSP) hat Ian Hickson (Editor der HTML5 Spezifikation) die Hoffnung RDFa würde auch von HTML5 unterstützt werden, endgültig zu nichte gemacht.
Auf die Frage, wie es denn mit Microformats/RDFa in HTML5 aussehe antwortet Hickson:
Microformats is natively supported in HTML5, just like it was in HTML 4, because Microformats use the built-in extension mechanisms of HTML.We considered RDFa long and hard (in fact this is an issue that’s a hot topic right now), but at the end of the day, while some people really like it, I don’t think it strikes the right balance between power and ease of authoring. For example, it uses namespaces and prefixes, which by and large confuse authors to no end. Just recently though I proposed something of a compromise which takes some of RDFa’s better ideas and puts them into HTML 5, so hopefully that will take care of the main needs that caused people to invent RDFa. We’ll see.
Die erwähnte Alternative (die ich mir gerade zu Gemühte führe) lautet übrigens Microdata, welche RDFa so sehr ähnelt, dass man eigentlich auch gleich RDFa hätte einsetzen können… Schade!
#HTML #HTML5 #Microdata #Microformats #RDFa #WaSP #WHATWG #XHTML
# HTML5 wird kein RDFa unterstützenIn einem kürzlich veröffentlichten Interview für das Web Standards Project (kurz WaSP) hat Ian Hickson (Editor der HTML5 Spezifikation) die Hoffnung RDFa würde auch von HTML5 unterstützt werden, endgültig zu nichte gemacht.
Auf die Frage, wie es denn mit Microformats/RDFa in HTML5 aussehe antwortet Hickson:
Microformats is natively supported in HTML5, just like it was in HTML 4, because Microformats use the built-in extension mechanisms of HTML.We considered RDFa long and hard (in fact this is an issue that’s a hot topic right now), but at the end of the day, while some people really like it, I don’t think it strikes the right balance between power and ease of authoring. For example, it uses namespaces and prefixes, which by and large confuse authors to no end. Just recently though I proposed something of a compromise which takes some of RDFa’s better ideas and puts them into HTML 5, so hopefully that will take care of the main needs that caused people to invent RDFa. We’ll see.
Die erwähnte Alternative (die ich mir gerade zu Gemühte führe) lautet übrigens Microdata, welche RDFa so sehr ähnelt, dass man eigentlich auch gleich RDFa hätte einsetzen können… Schade!#HTML #HTML5 #Microdata #Microformats #RDFa #WaSP #WHATWG #XHTML
Interview with Ian Hickson, editor of the HTML 5 specification. - The Web Standards Project
The Web Standards Project is a grassroots coalition fighting for standards which ensure simple, affordable access to web technologies for all.www.webstandards.org
# Microdata: Update und Usability-Studie
Endlich denkt beim Thema „Usability“ auch mal jemand an die Entwickler 🙂
Google hat über die letzten Wochen eine Usability-Studie zu Microdata durchgeführt und die Spezifikation wurde auch gleich entsprechend der Ergebnisse angepasst.
<address itemscope itemtype="http://microformats.org/profile/hcard"> <strong itemprop="fn">Alfred Person</strong> <span itemprop="adr" itemscope> <span itemprop="street-address">1600 Amphitheatre Parkway</span> <br> <span itemprop="street-address">Building 43, Second Floor</span> <br> <span itemprop="locality">Mountain View</span>, <span itemprop="region">CA</span> <span itemprop="postal-code">94043</span> </span></address>Code-Sprache: HTML, XML (xml)
Die Änderungen:
- Aus
itemwirditemscope. - Der Typ wird über
itemtypeund nicht mehr überitembzw.itemscopeangegeben. - Das Attribut
itemidwurde eingeführt, um z.B. auf ISBN-Nummer zu verweisenitemid="urn:isbn:0-330-34032-8".
Über den neuen HTML-Tag <itemref /> (alternativ: <itemfor />) werde ich im zweiten Teil von „Microdata – wie Microformats bloß besser…“ eingehen (zum ersten Teil).
Jetzt muss ich nur noch meine alten Artikel zu Microdata anpassen… das hat man nun davon, wenn man über Drafts berichtet 😉
#hCard #HTML #HTML5 #Microdata #Microformats #RDFa #update #Usability #vCard #XHTML
# Microdata – wie Microformats bloß besser… (Teil 1)Der Inhalt wurde an die neusten Änderungen der Microdata-Spezifikation angepasst. Letztes Update 30.01.2010.Microdata – wie Microformats bloß besser… (Teil 2): über „Namenskollisionen und Namespaces“ und „Informationen Referenzieren“
Wie schon erwähnt, vereint Microdata die Vorzüge von RDFa und Microformats in einem Standard… aber nicht nur das, Microdata (in Verbindung mit HTML5) bietet auch einige schicke Lösungen für diverse Microformats-Problemchen.
Das abbr-design-pattern oder das value-class-pattern
Microformats:Das abbr-design-pattern ist bisher wohl das umstrittenste Pattern im Microformats-Wiki. Grund für die Kritik an dem Pattern ist die etwas unorthodoxe Verwendung des
<abbr>Tags um maschinenlesbare Meta-Informationen bereit zu stellen.
<div class="vevent"> <abbr class="dtstart" title="2007-10-05">October 5</abbr> ...</div>Code-Sprache: HTML, XML (xml)
Eine erste Alternative aus der Microformats-Community ist das value-class-pattern, das zwar das Accessibility-Problem „behebt“ aber noch lange keine Perfekte Lösung bietet.
<div class="vevent"> <span class='dtstart'> <span class='value-title' title='2007-10-05'> </span> October 5 </span> ...</div>Code-Sprache: HTML, XML (xml)
Der HTML-Code wird durch weitere Elemente unnötig aufgeblasen und das Pattern basiert auf teilweise leeren Elementen.Microdata/HTML5:
In HTML5 gibt es dagegen ein spezielles Tag um Zeit und Datum sowohl user als auch maschinenlesbar zu machen.
<div itemscope itemtype="http://microformats.org/profile/hcalendar"> <time itemprop="dtstart" datetime="2007-10-05">October 5</time> ...</div>Code-Sprache: HTML, XML (xml)Reine Meta-Informationen
Microformats:Eigentlich spricht es gegen die Prinzipien der Microformats-Idee, reine Metadaten zu verwenden:
Visible data = more accurate data. By designing for humans first and making the data presentable (thus viewed and verified by humans), the data is inevitably more accurate, not only to begin with (as errors are easily/quickly noticed by those viewing the pages/sites), but over time as well; in that changes are noticed, and if data becomes out-of-date or obsolete, that’s more likely to be noticed as well. This is in direct contrast to „side files“ and invisible data like that contained in<meta>tags.
— Tantek Çelik
…aber GEO-Daten sind z.B. Informationen die der Benutzer nicht unbedingt sehen muss.
<div class="geo"> <span class="latitude">37.386013</span> <span class="longitude">-122.082932</span></div>Code-Sprache: HTML, XML (xml)
Microdata/HTML5:In HTML5 gibt es für dieses Problem eine recht schicke Lösung: Laut der Spezifikation sind <meta />-Tags im kompletten Quellcode (auch im
body) erlaubt.
<div itemscope itemtype="http://microformats.org/profile/hcard#geo"> <meta itemprop="latitude" content="37.386013" /> <meta itemprop="longitude" content="-122.082932" /></div>Code-Sprache: HTML, XML (xml)Fazit
Selbst wenn sich Microdata (item und itemprop) nicht durchsetzen sollte, sind <meta> und <time> schon ein echter „Segen“ für die Microformats-Community 🙂Im zweiten Teil nehm‘ ich mir das include-pattern und das Problem der möglichen Namens–Kollisionen vor. Microdata – wie Microformats bloß besser… (Teil 2): über „Namenskollisionen und Namespaces“ und „Informationen Referenzieren“
#abbrDesignPattern #HTML #HTML5 #includePattern #Microdata #Microformats #Mikroformate #valueClassPattern #XHTML
Microformats Would Benefit from a Namespace · Jens Oliver Meiert
Microformats become more and more popular, accelerated by the questionable success of themeiert.comnofollowmicroformat. However, those of them that mandate class names cause problems that could be avoided by using a “pseudo-namespace.”
# HTML5 is made for Microformats
Naja, nicht wirklich aber immerhin hat es RDFa bis dato nicht in die HTML5 Spezifikation geschafft. Es gibt zwar einen Milestone…
The HTML WG is encouraged to provide a mechanism to permit independently developed vocabularies such as Internationalization Tag Set (ITS), Ruby, and RDFa to be mixed into HTML documents.
…aber wer weiß wie lange das noch dauert. Das heißt wohl, dass die Microformats noch eine gewisse Zeit lang als Übergangslösung her halten müssen. Aber das ist ne andere Geschichte…
Eigentlich wollte ich auf zwei HTML5 – Elemente eingehen, die eine schicke Alternative zu den bisherigen (in vielen Microformats verwendeten) abbr-design-pattern bietet.
Der <time />-Tag
Das [url=http://www.w3.org/html/wg/html5/#time]time[/url] Element ermöglicht das kennzeichnen eines Datums in z.B. Blogposts o.Ä.
The primary use cases for these elements are for marking up publication dates e.g. in blog entries, and for marking event dates in hCalendar markup.
Also:
<time datetime="2006-09-23">a Saturday</time>Code-Sprache: HTML, XML (xml)
statt:
<abbr title="2006-09-23">a Saturday</abbr>Code-Sprache: HTML, XML (xml)
Ein hCalendar könnte dann so aussehen:
<div class="vevent"> <span class="summary">event title</span> <time datetime="2006-09-23" class="dtstart dtend">a Saturday</time></div>Code-Sprache: HTML, XML (xml)
Custom data attributes (data-)
Ein custom data attribute ist ein frei benutzbares Attribut um Elemente mit Metadaten anzureichern. Die einzige Vorgabe ist, dass es mit data- beginnen muss. Ein Beispiel:
<div class="monkey" data-arms="2" data-legs="2" data-race="chimp"> Cheetah</div>Code-Sprache: HTML, XML (xml)
Ideal auch als <abbr />-Ersatz bei z.B. dem Geo-Microformat.
Also:
<div class="geo" data-latitude="49.5483" data-longitude="8.6661">Weinheim</div>Code-Sprache: HTML, XML (xml)
statt:
<abbr class="geo" title="49.5483;8.6661">Weinheim</abbr>Code-Sprache: HTML, XML (xml)
Fazit
(X)HTML (egal ob XHTML2 mit RDFa oder X/HTML5) wird also definitiv ein semantisches Feuerwerk, ganz im Sinne von Tim Berners Lee…
Ich freu mich 🙂
#abbrDesignPattern #GEO #hCalendar #HTML #HTML5 #Microformats #RDFa #SemanticHTML #XHTML
# HTML5 is made for MicroformatsNaja, nicht wirklich aber immerhin hat es RDFa bis dato nicht in die HTML5 Spezifikation geschafft. Es gibt zwar einen Milestone…
The HTML WG is encouraged to provide a mechanism to permit independently developed vocabularies such as Internationalization Tag Set (ITS), Ruby, and RDFa to be mixed into HTML documents.
…aber wer weiß wie lange das noch dauert. Das heißt wohl, dass die Microformats noch eine gewisse Zeit lang als Übergangslösung her halten müssen. Aber das ist ne andere Geschichte…Eigentlich wollte ich auf zwei HTML5 – Elemente eingehen, die eine schicke Alternative zu den bisherigen (in vielen Microformats verwendeten) abbr-design-pattern bietet.
Der <time />-Tag
Das[url=http://www.w3.org/html/wg/html5/#time]time[/url]Element ermöglicht das kennzeichnen eines Datums in z.B. Blogposts o.Ä.The primary use cases for these elements are for marking up publication dates e.g. in blog entries, and for marking event dates in hCalendar markup.
Also:
<time datetime="2006-09-23">a Saturday</time>Code-Sprache: HTML, XML (xml)
statt:
<abbr title="2006-09-23">a Saturday</abbr>Code-Sprache: HTML, XML (xml)
Ein hCalendar könnte dann so aussehen:
<div class="vevent"> <span class="summary">event title</span> <time datetime="2006-09-23" class="dtstart dtend">a Saturday</time></div>Code-Sprache: HTML, XML (xml)Custom data attributes (data-)
Ein custom data attribute ist ein frei benutzbares Attribut um Elemente mit Metadaten anzureichern. Die einzige Vorgabe ist, dass es mitdata-beginnen muss. Ein Beispiel:
<div class="monkey" data-arms="2" data-legs="2" data-race="chimp"> Cheetah</div>Code-Sprache: HTML, XML (xml)
Ideal auch als<abbr />-Ersatz bei z.B. dem Geo-Microformat.Also:
<div class="geo" data-latitude="49.5483" data-longitude="8.6661">Weinheim</div>Code-Sprache: HTML, XML (xml)
statt:
<abbr class="geo" title="49.5483;8.6661">Weinheim</abbr>Code-Sprache: HTML, XML (xml)Fazit
(X)HTML (egal ob XHTML2 mit RDFa oder X/HTML5) wird also definitiv ein semantisches Feuerwerk, ganz im Sinne von Tim Berners Lee…Ich freu mich 🙂
#abbrDesignPattern #GEO #hCalendar #HTML #HTML5 #Microformats #RDFa #SemanticHTML #XHTML
