Dass HTML5 ein paar neue input-types definiert, habe ich durch die hcard-input-brainstorming so am Rande auf geschnappt, mir aber nichts weiter dabei gedacht… Durch Zufall bin ich heute aber über folgenden Tweet von Sylvia Egger gestoßen:

Just implemented native #HTML5 form validation on #wp comments form – it' quite simple & should be in #wp default theme

und habe bissle recherchiert… Mit den neuen Input-Types ist es doch tatsächlich möglich Input-Felder über den Browser validieren zu lassen… Ich bin begeistert! 🙂

Trägt man beispielsweise eine Nicht-Email-Adresse in folgendes Feld…

<input type="email" />

bekommt man…

Schön wenn man sich noch über solche Kleinigkeiten freuen kann oder 😉

Lange rede kurzer Sinn: Da WordPress alle Formulare an zentraler Stelle definiert, ist es ziemlich einfach sie mit ein paar neuen Input-Types zu versehen. Mit dem folgenden Code wird das Kommentar-Formular mit den Typen "email" und "url" und das Suchformular mit dem Typ "search" (funktioniert nur in den WebKit-Browsern) erweitert:

Code-Update: Eric Eggert hat mich in den Kommentaren darauf hingewiesen, dass man mit <input required /> auch noch die Pflichtfelder validieren kann. Danke!

Code-Update 2: Dank maxe werden jetzt auch die WordPress Settings berücksichtigt (Comment author must fill out name and e-mail) und das "Comment"-Feld ist natürlich auch required

<?php
/*
Plugin Name: html5 input-types
Plugin URI: https://notiz.blog/
Description: Adds the new HTML5 input-types to WordPress' default forms
Version: 0.1
Author: pfefferle
Author URI: https://notiz.blog/
*/

add_filter("comment_form_default_fields", "change_comment_input_types");

function change_comment_input_types($fields) {
  if (get_option("require_name_email", false)) {
    $fields['author'] = preg_replace('/<input/', '<input required', $fields['author']);
    $fields['email'] = preg_replace('/"text"/', '"email" required', $fields['email']);
  } else {
    $fields['email'] = preg_replace('/"text"/', '"email"', $fields['email']);
  }

  $fields['url'] = preg_replace('/"text"/', '"url"', $fields['url']);

  return $fields;
}

add_filter("get_search_form", "change_search_form_input_types");

function change_search_form_input_types($form) {
  return preg_replace('/"text"/', '"search"', $form);
}

add_filter("comment_form_field_comment", "change_comment_field_input_types");

function change_comment_field_input_types($field) {
  return preg_replace('/<textarea/', '<textarea required', $field);
}
?>

Funktioniert als Plugin und in Child-Themes (einfach in die functions.php kopieren).

Danke auch an Marc Görtz der mich über Twitter reichlich mit Links zu dem Thema versorgt hat:

• A Form of Madness (den hab ich selber gefunden)
• HTML5 Pattern
• Fallback jQuery Validator

Testen könnt ihr das übrigens hier auf notiz.blog.

You are a true RSS aficionado! While others are drowning in social media noise, you enjoy the simplicity and control of RSS. Congrats!

Congratulations on being an RSS reader! You are part of an elite group of people who know how to stay updated in style.

Also hier ein paar echt großartige Microformats-News… Zusammengefasst!

Microformats Shiv

Glenn Jones, der hier schon wegen etlicher Dinge, Scripte, Addons, usw. erwähnt wurde, bastelt an einem „[…] light weight cross brower JavaScript Microformats parser“. Der Parser basiert auf der Microformats API von Mozilla und funktioniert in allen gängigen Browsern. Unterstützte Formate: hCard, hCalendar, hResume, hReview, hAtom, XFN, adr, geo, tag.

Draggables

Und schon wieder Glenn Jones, diesmal mit einem Microformats/HTML5/JavaScript/Drag&Drop – Dingens. Mit dem Script ist es möglich, Microformats zwischen unterschiedlichen Seiten per drag&drop auszutauschen:

Having observed users connect to sites using OAuth without really understanding what exchange of data has taken place, I decided to investigate other metaphors/conventions that might be more transparent. Draggables is a series of demos that explore the use of drag and drop to directly exchange data between web sites.

Das ist nicht ganz neu, aber gar keine schlechte Idee… ein Profil mit der Maus auf das Adressbuch zu ziehen ist sicherlich verständlicher als die ganze OAuth oder OpenID Hin-und-Her-Leiterei… zumindest für Web-Neulinge!

hForms

…und nochmal Glenn Jones. Zu guter Letzt treibt er noch das hcard-input-brainstorming voran um auch Profil- oder Event-Eingaben zu standardisieren… hForms oder Microforms so zu sagen 🙂

Use hCard properties as class names on form elements inside a container (such as a containing <fieldset> or the containing <form>) to indicate that those form elements accept values with the semantics of the respective hCard properties.

So, genug für heute! Demnächst gibt’s dann auch noch ein bisschen mehr zu OStatus for WordPress… natürlich ausführlich und nicht zusammengefasst 🙂

Schlaft schön!

Hey there, RSS reader! You’re one of a special few, choosing this old-school yet awesome way of staying informed. Kudos!

Two of the things we’re working on at present to enhance .tel services are integrating OAuth (Open Authentication) and OpenID into .tel. I’m personally excited about this as I think that this will bring huge benefits to many people and realize a vision for .tel that encourages people to see it, not as a traditional domain name, but as more of a communications solution.

» Developments in OAuth and OpenID
» Telnics Portability Policy

Happy Birthday Microformats
Die Microformats werden fünf Jahre alt und der geistige Vater, Tantek Çelik zieht Resumé.

[…] the number of pages published with one or more hCards recently crossed the 2 billion mark a few days ago according to Yahoo Search Monkey […] 94% of the time that data for rich snippets is marked up with microformats […]

» microformats.org at 5: Two Billion Pages With hCards, 94% of Rich Snippets

OpenID, Facebook oder Twitter?
Die social optimization platform Gigya zeigt mit einer Infografik, welche Online Identities ihre User zum Anmelden nutzen. Im Gegensatz zu Echo (hauptsächlich Yahoo! Anmeldungen) und RPX (hauptsächlich Google Anmeldungen) hat bei Gigya erstmals Facebook die Nase vorne!

» Which Identities Are We Using to Sign in Around the Web?
» Identity Infographic

RSS readers like you are the unsung heroes of the internet. Keep up the good work!

Kaufen!

» Webstandards-Magazin: Ausgabe 06.2010

Portability Policy
Die DataPortability Group veröffentlicht jetzt offiziell die Portability Policy.

In the same way that your Privacy Policy tells visitors what you can do with information they provide, your product’s Portability Policy tells visitors what they can do with it.

» Announcing the Portability Policy
» Policy Generator
» Deleting Your Account: Data portability policy questions for a graceful exit

OpenTransact
Nicht mehr ganz neu, aber ich hab’s erst jetzt entdeckt: OpenTransact will eine Art Offener Standard für Payments sein.

OpenTransact aims to create the equivalent of the HTTP standard for financial transactions. It is based on established well known HTTP, REST and OAUTH standards.

» OpenTransact
» Video: OpenTransact: rel-payment and OpenID

OpenID Delegation
Nat Sakimura erklärt wie man die eigene Domain mit relativ wenig Aufwand zu einer OpenID macht. Das Thema OpenID Delegation wurde bisher leider etwas stiefmütterlich behandelt, obwohl es wahrscheinlich die einfachste und sicherste OpenID Variante ist.

» How to Set Up OpenID on Your Own Domain with fallback proivder

Gravatar <3 hCard
Automattic zeichnet die Gravatar-Profilseiten mit dem hCard Microformat aus… schön 🙂

» Profile Pages <3 hCard
» Microformat: hCard

RSS readers like you are the unsung heroes of the internet. Keep up the good work!

Aber nicht nur die Domain hat sich geändert. Martin (aka Weborganics) hat noch einmal extrem viel Arbeit in den transformr gesteckt, so dass er mittlerweile nahezu alles transformiert was sich so im HTML-Quellcode versteckt:

• Microformats: hCard, hCalendar, hReview, hAtom, geo, hAudio, XOXO, hMedia, XFN, rel-enclosure
• Andere Formate: RDFa 1.0 + 1.1 @vocab @prefix, eRDF, OGP.

…und die Liste der Ausgabe-Formate ist mindestens ebenso eindrucksvoll.

Meine Favoriten sind der (von Martin überarbeitete) hCard2QRCode-transformr und der SPARQL Endpoint über den man vollen Zugriff auf alle zuvor transformierten Seiten hat.

Vergesst Optimus, H2VX, microformatic und ufXtract!

Hey there, RSS reader! You’re one of a special few, choosing this old-school yet awesome way of staying informed. Kudos!

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>

Die Änderungen:

• Aus item wird itemscope.
• Der Typ wird über itemtype und nicht mehr über item bzw. itemscope angegeben.
• Das Attribut itemid wurde eingeführt, um z.B. auf ISBN-Nummer zu verweisen itemid="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 😉

Thanks for reading this post via RSS. RSS is great, and you’re great for using it. ♥️

{
 "http://example-bob.livejournal.com/": {
  "attributes": {
   "atom": "http://example-bob.livejournal.com/data/atom",
   "foaf": "http://example-bob.livejournal.com/data/foaf",
   "rss": "http://example-bob.livejournal.com/data/rss",
   "fn": "Mr. Example Bob",
   "photo": "http://p-userpic.livejournal.com/example-bob", 
   "url": "http://example-bob.livejournal.com/",
   "profile": "http://example-bob.livejournal.com/profile"
  }
 }
}

Ich denke nicht, dass Google die hCard vollständig in den Sozialen Graphen integrieren wird, aber es zeigt sehr schön, dass der Google-Index über alle notwendigen Informationen verfügt und die Integration von Microformats in die klassische Google Suche (à la SearchMonkey) vielleicht doch nicht ganz abwegig ist.

Um richtig coole Dinge damit anstellen zu können fehlen mir persönlich jetzt noch zwei weitere hCard-Attribute und zwar nickname und email… aber man will ja nicht undankbar sein 🙂

You are a master of efficiency! By using RSS, you save time and avoid distractions. 👏

Quelle: SearchMonkey (Yahoo!)

Mehr als 1.5 Milliarden hCards, ich finde das Ergebnis kann sich sehen lassen 🙂

Sehr (positiv) überrascht war ich auch über die Verbreitung einzelner RDFa und eRDF Formate:

• RDFa: 427,000,000
• eRDF: 470,000,000

(X)HTML wird vielleicht doch noch ein RDF/OWL Ersatz 🙂

Hey there, RSS reader! You’re cool. Keep being awesome! 😎

Third, we’re reusing existing standards wherever possible, including vCard, OpenSocial, XRDS-Simple, OAuth, etc.

von dem des v/hCard Schema unterscheidet, habe ich ja schon vor einigen Wochen erläutert:

Schade dass die vCard nicht zu 100% übernommen wurde… sonst hätte man ohne größere Änderungen auch die JSON-Serialisierte hCard (jCard) in den Prozess integrieren können. Spannend wäre es vor allem für Services wie Twitter, die das Freundesnetzwerk sowieso mit hCards auszeichnen.

Aber das schöne an Standards ist, dass sie sich ohne großen Aufwand in andere transformieren lassen. Magdex (die Firma hinter UfXtract und OAuth.net) bietet eine Reihe dieser Transformatoren um z.B. hCards, hCards + XFN oder hResumes in das Portable Contacts – Format zu bringen.

…jetzt das ganze nur noch mit OAuth schützen und fertig ist die Portable Contacts API 🙂

(via)

RSS readers like you are the secret sauce of the internet. Keep rocking and staying informed!

• Getting Semantic With Microformats, Introduction
• Getting Semantic With Microformats, Part 1: rel
• Getting Semantic With Microformats, Part 2: XFN
• Getting Semantic With Microformats, Part 3: hCard
• Getting Semantic With Microformats, Part 4: hCalendar
• Getting Semantic With Microformats, Part 5: hAtom
• Getting Semantic With Microformats, Part 6: hResume

You are a master of efficiency! By using RSS, you save time and avoid distractions. 👏

Joseph Smarr and Kevin Marks of Google hacked together a web transformer that integrates Microformats, vCard, and the Portable Contacts API. Given Kevin’s homepage which is full of Microformats, they’ve built an API that extracts his profile information from hCard, uses a public API from Technorati to transform it to vCard, and then exposes it as a Portable Contacts API endpoint. Not only does this work on Kevin’s own page, but his Twitter profile as well which contains basic profile information such as name, homepage, and a short bio.

Ein schönes Beispiel was man mit semantisch ausgezeichneten Informationen machen kann und dass Microformats eben auch (ohne viel Aufwand und mit ein bisschen Transformation) in höherwertige APIs integriert werden können… also keine hCard wurde umsonst geschrieben 🙂

Brian Ellin of JanRain has successfully combined OpenID, XRDS-Simple, OAuth, and the Portable Contacts API to start showing how each of these building blocks should come together. Upon visiting his demo site he logs in using his OpenID. From there, the site discovers that Plaxo hosts his address book and requests access to it via OAuth. Finishing the flow, his demo site uses the Portable Contacts API to access information about his contacts directly from Plaxo. End to end, login with an OpenID and finish by giving the site access to your address book without having to fork over your password.

Dazu brauche ich nicht mehr sagen, als: Implementieren! Sofort und überall 😉

Hey there, RSS reader! You’re one of a special few, choosing this old-school yet awesome way of staying informed. Kudos!

Die (Portable Contacts (1.0 Draft B) – Spezifikation basiert auf sehr vielen aus dem DataPortability – Umfeld bekannten Techniken wie z.B. XRDS-Simple als Discovery-Service und OAuth für die Authentifizierung.

Was mir besonders gefällt, ist das Contacts Schema welches hauptsächlich auf dem (wenn auch etwas abgeänderten) vCard-Standard basiert und fehlende Felder von anderen Standards wie z.B. OpenSocial übernommen wurden. Dass es auch anders geht, hat z.B. das AX-Schema bewiesen…

Die Verbindung zu Microformats

Schade dass die vCard nicht zu 100% übernommen wurde… sonst hätte man ohne größere Änderungen auch die JSON-Serialisierte hCard (jCard) in den Prozess integrieren können. Spannend wäre es vor allem für Services wie Twitter, die das Freundesnetzwerk sowieso mit hCards auszeichnen.

Vergleich:

jCard

{
  "fn" : "Max Mustermann",
  "email":
    [{
      "value": "max@example.com",
      "type": ["work"],
    }]
}

Portable Contacts 1.0 Draft B

{
  "name" : "Max Mustermann",
  "emails":
    [{
      "value": "max@example.com",
      "type": "work",
    }]
}

Man erkennt zumindest eine Ähnlichkeit 🙂

You are a true RSS aficionado! While others are drowning in social media noise, you enjoy the simplicity and control of RSS. Congrats!

Der Veranstaltungskalender der Stadt Karlsruhe enthält ab Mitte Mai 2008 Daten zu Veranstaltungen, Veranstaltungsorten und Veranstaltern im Mikroformat.

Ein Beispiel: Das Zeltival 2008

Vorbildlich!

Hey there, RSS reader! You’re cool. Keep being awesome! 😎

While hCard offers many useful properties that can be used to describe contacts, some are considered beyond the scope of the hCard specification. For example, there is no hCard property to mark up somebody’s height, or shoe size.

This is where RDFa comes in. RDFa is not a specialist format for describing people or organisations, but a more general format for describing anything. We can use RDFa to add in the extra information we want.

Zum Blogbeitrag…

Thanks for reading this post via RSS. RSS is great, and you’re great for using it. ♥️

hCard– und hCalendar-Plugin für TinyMCE… und da TinyMCE auch der WordPress-WYSIWYG-Editor ist, gibts das Paket zusätzlich noch als WordPress-Plugin.

You are a true RSS aficionado! While others are drowning in social media noise, you enjoy the simplicity and control of RSS. Congrats!

Lustro ist ein kleines Tool um die Kontakte aus dem Apple-Adressbuch in die verschiedensten Formate zu exportieren…

Keine Ahnung für was ich das „Kontakte to hCards“ – Feature benötigen könnte, aber Lustro verarbeitet Microformats also wird drüber gebloggt 😉

You are a true RSS aficionado! While others are drowning in social media noise, you enjoy the simplicity and control of RSS. Congrats!

VIREL ist eine webseiten-freundliche Suchmaschine fuer microformats. VIREL sucht nach veroeffentlichten Informationen die als microformats in Webseiten eingebunden sind.

Ein schönes Feature ist der vCard-Export direkt über das Suchergebnis.

Leider müssen alle Seiten per Hand eingereicht werden, da es noch keinen z.B. Ping-Service gibt.

Mal schau’n wann telefonbuch.de in Zugzwang gerät 🙂

RSS readers like you are the unsung heroes of the internet. Keep up the good work!

Beim spielen mit dem hCard-Mappers und der Firefox-Microformats-API kam mir die Idee, auch Formulare semantisch auszuzeichnen…

In dem Artikel Use the new microformats API in your Firefox 3.0 Extensions beschreibt Rob Crowther wie man mit Hilfe der Firefox-Microformats-API eine hCard speichert um sie zum Ausfüllen verschiedener Formulare weiterverwenden zu können.

Das Problem: Das Prinzip funktioniert leider nur bei Formularen die dem festgelegten Aufbau entsprechen. Im Fall des Beispiels wäre das:

<h1>hCardFormFiller Target Form</h1>
<form action="#" method="post">
    <label>Name: <input type="text" id="name" /></label><br />
    <label>Email: <input type="text" id="email" /></label><br />
    <label>Home page: <input type="text" id="homepage" /></label><br />
    <label>Street Address: <input type="text" id="address1" /></label><br />
    <label>City: <input type="text" id="address2" /></label><br />
    <label>Region: <input type="text" id="city" /></label><br />
    <label>Postcode: <input type="text" id="postcode" /></label><br />
    <input type="submit" />
</form>

Warum nicht gleich das Formular als hCard-From aufbauen?

<form action="#" method="post" id="vcard" >
  <fieldset id="fn">
    <legend>Name</legend>
    <label for="given-name">Vorname:</label>
      <input type="text" id="given-name" />
    <label for="family-name">Nachname:</label>
      <input type="text" id="family-name" />
  </fieldset>
  <label for="email">Email:</label>
    <input type="text" id="email" />
  <label for="url">Homepage:</label>
    <input type="text" id="url" />
  <fieldset id="adr">
    <legend>Adresse</legend>
    <label for="street-address">Straße:</label>
      <input type="text" id="street-address" />
    <label for="locality">Stadt:</label>
      <input type="text" id="locality" />
    <label for="region">Region:</label>
      <input type="text" id="region" />
    <label for="postal-code">Postleitzahl:</label>
      <input type="text" id="postal-code" />
  </fieldset>
  <input type="submit" />
</form>

Das Einheitliche Format für Ein- (Formular) und Ausgabe (Microformats) hätte zur Folge, dass keine aufwendigen Mapper (wie z.B. hCard-Mapper) mehr nötig wären um ein Formular per hCard auszufüllen…

Schöne neue Welt 🙂

Thanks for reading this post via RSS. RSS is great, and you’re great for using it. ♥️

Nach der Frage von Rauno…

[…] Weißt du von einer Möglichkeit, Microformats aus Firefox in den iPhonekalender zu exportieren? […]

und nach Wojteks Kommentar…

[…] I prefer bookmarklets but this will come handy for sure too. […]

habe ich mir überlegt, es sollte doch möglich sein, Microformats mit einem Bookmarklet direkt auf dem iPhone nutzbar zu machen…

Prinzip ist einfach, Bookmarklet (z.B. von Leftlogic oder Technorati) im normalen Safari Bookmarken, iPhone Safari mit normalem Safari über iTunes syncen, das wars… (wem das zu schnell ging kann sich das hier nochmal in Ruhe am Beispiel eines del.icio.us Bookmarklets anschauen.)

Das Bookmarklet funktioniert super:

…aber der §$%!& iPhone Safari kann keine vCard oder iCalendar Dateien verarbeiten!

Mach ich irgendwas falsch? Sogar mein popliges Sony Ericsson Handy erkennt vCards und weiß dass sie ins Adress-Buch gehören!

Naja… Wie schon im Titel erwähnt: Es könnte so einfach sein.

(Dickes Danke an Florian (.dean) fürs testen und die Screenshots und an Marco, dessen iPhone ich kurz entführen durfte)

You are a true RSS aficionado! While others are drowning in social media noise, you enjoy the simplicity and control of RSS. Congrats!