HTML5 Logo

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 form validation on comments form – it' quite simple & should be in 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" />Code-Sprache: HTML, XML (xml)

bekommt man…

Email Validation im Firefox

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);
}
?>Code-Sprache: HTML, XML (xml)

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:

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

Da findet man ein paar echt schicke Sachen im Web und nimmt sich vor mal darüber zu bloggen… richtig drüber zu bloggen… nicht als OpenWeb-Notizen oder solches Zusammenfass-Zeugs… richtig drüber bloggen! …und dann vergisst man ’s oder hat keine Zeit!

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!

Nach etwas mehr als zwei Jahren und diversen Hosting-Problemen ist Martin McEvoys microformats transformr jetzt unter microform.at erreichbar.

Martin McEvoys tweet

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:

…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>Code-Sprache: HTML, XML (xml)

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 😉

Ich bin durch Zufall mal wieder auf der SG-API Seite gelandet und war wirklich positiv überrascht dass die API noch stetig weiterentwickelt wird. Besonders spannend finde ich die Integration zweier hCard-Attribute: fn und photo.

{
 "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"
  }
 }
}Code-Sprache: JSON / JSON mit Kommentaren (json)

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 🙂

Für den Podcast zum Thema Microformats hab ich mich mal schlau gemacht wie weit verbreitet die einzelnen Formate gerade sind.

MicroformatsVerbreitung
hCard1,590,000,000
hAtom374,000,000
XFN283,000,000
hResume155,000,000
hReview75,100,000
hCalendar55,100,000

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 🙂

Dass sich das Portable Contacts Schema trotz der Aussage:

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)