BrowserID

Mozilla arbeitet an einem neuen “Identity in the Browser“-Projekt namens BrowserID:

For users, BrowserID provides a safer and easier way to sign in.

For developers, BrowserID offers a world class sign-in experience with only a couple lines of code.

For identity providers, BrowserID lets you give your users an identity they can use everywhere.

HTML5, Input-Types, Form-Validierung und WordPress

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 #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…

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: 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:

Testen könnt ihr das übrigens hier auf notizblog.org.

The Indie Web: Who owns your identity?

Dawn Foster schreibt auf Gigaom über die Indie Web-Bewegung:

The Indie Web movement is primarily about ownership and control over your identity. The difficulty is that many of the tools that we need to achieve the complete vision of data ownership just don’t exist yet, or they exist, but not in a way that is accessible to most people. During IndieWebCamp, we focused on discussing these current issues and starting to build some of the tools necessary to make the Indie Web a reality for regular people.

Microdata – wie Microformats bloß besser… (Teil 2)

Microdata – wie Microformats bloß besser… (Teil 1): über abbr-design-pattern, value-class-pattern und Meta-Informationen

Knapp zwei Jahre nach dem ersten Teil, komme ich endlich mal zu Nummer 2 :) Nach den ganzen Diskussionen um schema.org und Microformats V2 ist es mal wieder an der Zeit, am Image von Microdata zu arbeiten.

Namenskollisionen und Namespaces

class-Attribute werden in erster Linie zum Gestalten (CSS) und für JS benutzt! Laut “The State of Web Development 2010” setzen nur knapp 35% aller Befragten Microformats ein, das heißt mehr als 65% haben keine Ahnung von Mikroformaten oder setzten sie nicht ein. Das kann zu zwei Problemen führen:

  1. Microformats werden oft durch Re-Designs zerstört. Facebook ist wohl das prominenteste Beispiel, nach einem Re-Design verschwanden alle Microformats von den Profilseiten.
  2. Es werden fälschlicherweise class-Attribute interpretiert die gar nichts mit Microformats zu tun haben nur zufällig den passenden Namen tragen. Anfällige Klassen sind z.B. url (hCard), photo (hCard), summary (hReview), description (hReview) oder author (hAtom).

Um diesem Problem Herr zu werden denkt die Community Tantek Çelik über eine Art Namespace-Erweiterung nach.

Microformats

So könnten Microformtas demnächst folgendermaßen aussehen:

<div class="h-card">
 <span class="p-fn">Max Mustermann</span>
</div>

Dabei steht:

  • “h-*” für die root-names, z.B. “h-card”, “h-event”, “h-entry”
  • und “p-*” für “simple” (Text) Properties, z.B. “p-fn”, “p-summary”

…und es gibt noch eine reihe weiterer Prefixes. Das ist zwar schön und gut und verhindert sicherlich einen Großteil der Namenskollisionen und man kann seinen Entwicklern sicherlich auch eintrichtern, alle x- Klassen in ruhe zu lassen… aber man mach damit jegliche Semantik kaputt. Nix mehr mit Plain Old Semantic HTML (POSH):

POSH encapsulates the best practices of using semantic HTML to author web pages. Semantic HTML is the subset of HTML 4.01 (or XHTML 1.0) elements and attributes that are semantic rather than presentational. The best way to learn and understand POSH is to do it.

…und semantic class names:

Think about why you want something to look a certain way, and not really about how it should look. Looks can always change, but the reasons for giving something a look stay the same.

Außerdem verkompliziert man das, jetzt noch so einfach zu nutzende, Format unnötig. Wann ist etwas eine id (i-*) oder eine Nummer (n-*) und was ist mit Attributen, die sowohl aus auch sein können?

Microdata

Der Microdata Teil ist relativ schnell abgehandelt… Durch die Trennung von Semantik und Design kommt es bei Mircodata per se zu keinen Kollisionen:

<div itemtype="http://microformats.org/profile/hcard" itemscope>
 <span itemprop="fn">Max Mustermann</span>
</div>

Informationen Referenzieren

Informationen stehen auf Webseiten nicht immer so nahe beieinander, so dass es oftmals schwer ist, alle Daten mit einem HTML Attribut zu umschließen.

Microformats

Je komplizierter das Format oder der Anwendungsfall, desto mehr stößt man mit Microformats an die grenzen des machbaren. HTML 4 bietet keinerlei Mechanismen, den oben angesprochenen Problem zu lösen, deshalb greift die Microformtas-Community zu einer recht Kreativen Lösung: dem include-pattern.

<div class="vcard">
 <a class="include" href="#author-name"></a>
</div>

<span class="fn n" id="author-name">Max Mustermann</span>

oder:

<div class="vcard">
 <object class="include" data="#author-name"></object>
</div>

<span class="fn n" id="author-name">Max Mustermann</span>

Nette Idee mit etlichen Unschönheiten:

  • Leere HTML-Elemente
  • Zweckentfremdung von Object- bzw. Link-Element
  • Die Nutzung von <object /> führt zu einigen Problem bei einigen Versionen von Internet Explorer, Safari und Firefox

Microdata

Microdata löst das Problem mit dem itemref-Attribut:

<div itemscope
     itemtype="http://microformats.org/profile/hcard"
     itemref="author-name">
 ...
</div>

<span itemprop="fn n" id="author-name">Max Mustermann</span>

Viel mehr gibt es dazu eigentlich nicht zu sagen :)

Fazit

Als Fazit, passt hier sehr gut ein Satz den ich auch als Fazit im aktuellen Webstandards-Magazin verwende:

Microformats sind und bleiben Plain Old Semantic HTML und man sollte auch in Zukunft keinesfalls darauf verzichten sie einzusetzen, selbst mit dem Risiko einer fehlerhaften Implementierungen oder Namenskollisionen, „erzieht“ die Nutzung von Microformats einen jeden Webentwickler dazu „schönen“ und „sprechenden“ HTML-Code zu schreiben.

…um HTML-Code aber wirklich maschinenlesbar zu machen, wird es Zeit auf Microdata und RDFa zu setzen. Microformats haben den Weg für bessere und native Lösungen geebnet und haben weiterhin ihre Daseinsberechtigung aber man sollte nicht mehr als dem Format machen, als es leisten kann.

Pfefferles OpenWeb: Microformats V2

Pfefferles OpenWeb: Microformats V2

Seit Freitag gibt es wieder eine neue Ausgabe des Webstandard-Magazins, mit dem Fokus auf Communities.

…als hätte ich es gerochen, passt das Thema meiner Kolumne recht gut zu den aktuellen Diskussionen um Microformats, Microdata, RDFa und schema.org. Noch genauer: Es geht um die Zukunft der Microformtats.

Dieses Jahr feierten die Microformats ihren 8. Geburtstag. In diesen 8 Jahren haben sich mehr als zwei Milliarden hCards im Yahoo! Index angesammelt und die Mikroformate dominieren mit 94% Googles rich snippets (im Verhältnis zu RDFa und Microdata). Trotz allem sind Microformats eine Übergangslösung und es wird Zeit für einen richtigen Standard!

Wie sieht die Zukunft der Microformats aus, was ist ist geplant, machen Microformats neben Microdata und RDFa überhaupt noch Sinn usw.

Also los… kaufen! Zack, zack!

MyProfile-Project

Das MyProfile-Project ist der erste (glaube ich zumindest) produktive WebID-Provider. Ich bin zwar immer noch kein wirklicher Freund von FoaF, SIOC und dem ganzen Semantic-Web Zeugs, aber vielleicht ist WebID ja wirklich eine alternative zu OpenID… Ich lasse mich gerne überraschen :)

MyProfile intends to provide a solution for managing the numerous accounts and profiles that users have on the Internet. Its main purpose is to provide a unified user account, or simply ‘user profile’, which as opposed to current ‘silo’ profiles, would really be under the user’s control, on a device controlled by the user.

Es gibt übrigens auch einen OpenWebPodcast zum Thema WebID