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: http://notizblog.org/
Description: Adds the new HTML5 input-types to WordPress' default forms
Version: 0.1
Author: pfefferle
Author URI: http://notizblog.org/
*/

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 notizblog.org.

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!

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

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

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!

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>

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

{
 "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

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

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)