Making your website a little more semantic using microformats such as hCard.

Add hCard to Your Site – Webmonkey

If you don’t know about hCard information or microformats, you might want to check out our Introduction to Microformats. In short, microformats add tags to information on a website that to you and me is obvious.

For example, you see an address on a web page, and you can instantly associate it to an address. A browser sees this address and equates it with anything else on the page. Microformats handholds the browser into identifying it for exactly what it is. There are microformats for maps, addresses, phone numbers, calendar events, and so on. Hcard is one such microformat. It identifies addresses to the browser. As hCards grow more popular, future browsers will know what to do with them.

When browsing around the web, you will see many pieces of information.  To the human individual we can easily identify a review of a restaurant, and even it’s address, and we instantly understand the relevance of this information to a page providing restaurant information.  However, to most robot crawlers, it is all just plain HTML, with very little meaning.  However, there is something that we can add to the source code, to try and add some relevance to parts of our text.

Indeed, HTML it’s self has the <address> tag that can be used to identify a piece of text as an…address.

<address>

Buckingham Palace

The Mall

London,

SW1A 1AA

020 7766 7300

</address>

This helps, but it can’t breakdown the address, postcode, and phone number sperately for instance.  So at this point it helps to introduce the hCard microformat.  This would then give us markup as follows:

<div id="hcard-buckingham-palace">
 <span class="fn">Buckingham Palace</span>
 <div class="add">
  <div class="street-address">The Mall</div>
  <span class="locality">London</span>
  <span class="postal-code">SW1A 1AA</span>
 </div>
 <div class="tel">020 7766 7300</div>
</div>

As you can see, this immediately gives meaning to each piece of text. And it is not only addresses that you can markup in this way.  You can also use the hReview and hCalendar formats to provide better markup for users leaving customer reviews, or dates for an event.

One very good reason to do this is for Search Engine Optimisation (SEO).  Most engine crawlers will be better able to recognise an address on your page for instance.  This can give far better search results when somebody enters the term “address for buckingham palace”.

Yahoo! also make use of these microformats in their optimisation product Search Monkey. Where you can get an enhanced search result as in this screen shot.

If you have any addresses or dates, or reviews even, you can see it would be very worthwhile in using these microformats to better describe your page content.

For more information, visit the microformats site.

I recently made Betterdot’s Contact Us page both human and machine readable by adding hCard microformat markup to the underlying XHTML.  This notion of “machine readable” content is arguably abstract and somewhat obscure however.  What do we mean?  What do machines see?  Perhaps a picture (or three) are worth the proverbial 1,000 words.

When a human reader, using a web browser, looks at the page, he or she sees this:

Contact page, as seen by human readers

Without semantic markups such as the hCard microformat markup, a machine (for example a Google bot crawling the Betterdot site for indexing) sees this:

Contact page as seen by machines (no microformat markup)

With semantic markups such as the hCard microformat markup, the same machine or bot sees this:

Contact page, as seen by machines with microformat markup

In Layman’s terms, microformats help machine “read” data marked up with microformat tags on the page.   While “reading” falls short of true semantic “understanding”, microformats are certainly a step in the right direction.

Google recently and quietly announced something huge, “rich snippets”.   Rich snippets are smart previews, displayed right on a search results page.   While Google has long relied on snippets to attach a bit of information to each link (thus letting the user know what he or she might expect on each page represented by a link), rich snippets go a step further: they extract key characteristic of the page, be it a rating of a review or a person’s contact information.    Google doesn’t have to guess it, it knows it.  Google’s rich snippets are powered by microformats and RDFa, two semantic standards that are rapidly gaining adoption.   Google’s implementation allows semantically-marked web content (such as reviews and contact information) to be exposed, aggregated and averaged  in a Google search results page.  In short, after years in the lab, the web is at last, albeit quietly, becoming semantic!  

Microformats are not a substitute for the semantic web, they are a stepping stone and a very important one.  They demonstrate the feasibility and value of adding semantic meaning to web page content.   They do so using existing browsers and standards.  They do so today, in the field not in the lab.  By making web pages understandable to both humans (also known as readers…)  and machines, using current technologies, current browsers and minimal effort, microformats allow web content to be reliably understood and aggregated by search engines.   The future is bright.  Google could, for example, calculate an average review for a book from a list of semantically compliant sites.  Google could also uniquely identify a user as a single human being across sites.   The semantic web, a web of meaning, is finally taking shape.

I am convinced the semantic web is going to change the way we publish content, exchange, correlate and aggregate information, both in the public domain and the enterprise.   It’s an exciting time for web professionals who can look forward to building companies and next generation systems that leverage semantic data.

In Toronto and interested in the semantic web?  Join us at the Toronto Semantic Web group on LinkedIn.

The hCard microformat can distinguish between a person and an organisation, by the use of the org property:


<div class="vcard">
<span class="fn">Andy Mabbett</span>
</div>



<div class="vcard">
<span class="fn org">The Red Cross</span>
</div>


but it cannot distinguish between an organisation and a place:


<div class="vcard">
<span class="fn org">The Wembley Stadium fan club</span>
</div>



<div class="vcard">
<span class="fn org">Wembley Stadium</span>
</div>


treating them both as organisations.

On 31 December 2007, I described a way in which hCard microformat could be used to differentiate between hCards for places and organisations.

On 9 January 2008, having received favourable comment, I made a formal proposal to update the hCard specification.

Despite this ten-day gap, Brian Suda, one of the microformats “admins”, the cabal who control microformats, complained that he’d only had two days to consider the matter, and that “More time is needed to fully look over the implications of this change.”

No objections to the method, nor issues with it, have been raised.

Toby Inkster’s superb microformats parser Swignition (formerly called “Cognition”) has supported the method since version 0.1-alpha8, released in May 2008.

One year on from my formal proposal, what changes have been made to the hCard specification, in this regard? None.

Jim Pick posts on the event listing:

This is the second monthly meeting of the RDF Vancouver Semantic Web User Group. It is intended to be an informal event for learning about the latest Semantic Web technologies, and networking with other users/developers in the community.

It will be held at WorkSpace, from 7:00pm on Wednesday, November 26th.

Proposed program (90 minutes):

• Dorian Taylor is going to start with a short talk for newcomers explaining what the Semantic Web is
• Gerald Bauer is going to talk about Microformats
• Jim Pick is going to talk about Freebase, Acre and the new Vancouver “base”

After the presentations, some of us might head over to the Irish Heather for a beer or two.

Dice Wikipedia en http://es.wikipedia.org/wiki/Microformato:

Un Microformat o Microformato (a veces abreviado con μF o uF) es una forma simple de agregar significado semántico a un contenido legible por el humano y que para la máquina es sólo texto plano. Están ideados para ser usadas en páginas web que usen HTML o XHTML, de manera tal de que la información pueda ser indexada, guardada, referenciada, reusada o combinada.

Más técnicamente, son elementos de lenguaje de marcado, usando (X)HTML usando nombres de clase específicos. En este sentido, son abiertos para que cualquiera haga uso de ellos.

Las especificaciones actuales de microformatos permiten la representación de eventos, información de contacto, relaciones sociales, direcciones, ubicaciones (coordenadas), etc.

Los microformatos son mantenidos y especificados por Microformats.org.

Uno de los beneficios de trabajar con microformatos es lograr mejorar las posiciones de búsqueda.

Ver aquí para otros ejemplos de implementaciones:

http://microformats.org/wiki/implementations

Espero que sirva.

toch

School Fundraising Software: The Top Picks

Regardless of whether you are a principal or teacher trying to come up with student fundraising ideas or a parent who is trying to do their part, having the right school fundraising software or fundraising auction software is going to be very important, so that you can maximize this experience and ensure that you make as much money as you possibly can. Read Further

Микроформаты (иногда сокращается до μF или uF) — часть языка разметки, которая позволяет помечать семантику в веб-страницах на HTML или XHTML. Программы могут извлекать данные из веб страниц, которые помечены одним или несколькими микроформатами.

Добавление микроформатов к обычной веб-странице позволит компьютерам обрабатывать HTML-текст и загружать информацию в базы данных. Например, поисковые роботы смогут находить контактную информацию, события и обзоры.

hCard (сокращение для HTML vCard) — микроформат для публикации контактной информации людей, компаний, организаций и мест в (X)HTML, Atom, RSS или произвольном XML. hCard является представлением 1 в 1 параметров и значений формата vCard (RFC 2426).

http://rhizohm.net/contact.html

На этой странице реализована hCard карточка. А так же встроен очень симпатичный обработчик этой карточки Oomph.

Today was a busy day & that’s just the way I like it!

…Golf Tournament work and editing all information related to Morning Star School’s decision to participate with SchoolHeart, Inc. and the hCard program.

We’re so incredibly excited about the hCard. It does not compete with our SCRIP program – in fact it’s a way to enhance it. If you’re curious about how the hCard works, I would strongly encourage you to visit SchoolHeart’s home page and watch the informative video. (The link is at the bottom of the page.)

 
For every card purchased – Morning Star School receives 50% ($12.50).For purchases made through their “online mall,” Morning Star School receives a percentage of the sale just like SCRIP purchases!

 
The most exciting part about today was our October Mass. It’s such a joy & blessing to see the students experiencing God’s love and showing it to one another.

We are still in need of golfers, sponsors, and volunteers! Please plan to attend the Parent Volunteer Meeting next Wednesday morning, October 29th at 7:00 AM in the school library. I hope to see as many parents there as possible! The annual difference between actual cost of special education and tuition for the number of students we have this year is $436,109.00!! That’s a lot of money to raise – we need your help!

I hope everyone is having a blessed week and all of you are in my prayers. As always, shoot me an email if you need anything!

Many thanks & God Bless!

Microsoft has just released Oomph: A Microformat Toolkit.  According to Karsten Januszewski, “Our main goal with Oomph is to make Microformats more accessible for users, developers and designers. Oomph is an amalgamation of applications: an Internet Explorer Add-in built in C++; a cross-browser HTML overlay built using JQuery that aggregates Microformats (hCard and hCalendar); a set of CSS styles for Microformats; and a Windows Live Writer plug-in written for inserting hCards”

There is a video demo on YouTube: http://www.youtube.com/watch?v=zx2f2Z9MMQ8

The code is on CodePlex at http://codeplex.com/oomph

Parents – the following was sent home with students today…Please email me at LauraBrock@bellsouth.net if you have any questions…

Parents – A few questions for you & your family members…

·         Do you like discounts?

·         Do you like coupons?

·         Do you want to support Morning Star School?

·         Do you like convenience?

If you answered “YES” to any or all of the questions above, then we have an amazing opportunity for you! J

Morning Star School is now participating with SchoolHeart, Inc. using “The hCard.” To purchase an hCard, please visit MSS’s SchoolHeart website at http://www.morningstar.schoolheart.com/. Only $25 is required to purchase the “show and save” card – MSS receives 50% of every card sold!! That’s $12.50 for each card sold; if one card is purchased per child MSS will instantly make $1,362.50!

Ten Reasons to Purchase the hCard:

1. Roadside Assistance Services – included

2. Emergency Contacts Services – included

3. National Prescription Discount Card (save 15-70% at 53,000+ locations)

4. Gift Card promotions from Chili’s, Sears, Starbucks, Olive Garden and more…

5. Automotive Discounts up to 10% off at Jiffy Lube, Meineke, Aamco and Maaco

6. Emergency Pet Protection 24/7 only $10.00 a year for up to 4 pets

7. Sporting Goods up to 10% off online at Sports Authority and Sports Kids

8. National Pet and Animal Savings

9. Savings on Entertainment and Events up to 50% off the regular price

10. Travel and Hotel Discounts including Southwest Vacations and car rentals

So go to www.morningstar.schoolheart.com today, purchase a card or two & send this information to family & friends!

Dalla pagina “What are microformats?” del wiki di microformats.org, si trovano molte possibili definizioni di microformats.
Per citarne alcune:

“Designed for humans first and machines second, microformats are a set of simple, open data formats built upon existing and widely adopted standards.”

Definizione corrente di microformats, Dan Cederholm

“Microformats are simple codes that you can use to identify specific kinds of data, like people or events, in your webpages.”

Chris Messina

“Microformats are a way of adding simple markup to human-readable data items such as events, contact details or locations, on web pages, so that the information in them can be extracted by software and indexed, searched for, saved, cross-referenced or combined.“

Andy Mabbett

“Microformats are the way to publish and share information on the web with higher fidelity.”

“[...]microformats are carefully designed (X)HTML class names that extend the semantics of (X)HTML and enable authors to publish higher semantic fidelity content such as people, events, reviews, etc.”

“A microformat is way of adding more meaning to web pages beyond normal HTML headings and paragraphs, so you can indicate mentions of people, companies, events, reviews, tags, etc.“

Tantek Çelik

Microformats are a way of attaching extra meaning to the information published on a web page. This extra semantic richness works alongside the information already presented, and can be used for the benefit of people and computers. This is mostly done through adding special pre-defined names to the class attribute of existing XHTML markup.

Drew McLellan

Prendendo spunto da queste definizioni, possiamo quindi dire che i microformats sono dei particolari formati che vengono utilizzati per dare un significato (semantico) ai dati “human-oriented” che si trovano sulle pagine web (eventi, persone, links, etc…), in modo tale da renderli “machine-readable“, riusabili e facilmente condivisibili. Questo processo è ottenuto tramite l’uso di specifici class names XHTML.
Esempi di microformats sono hCard, hCalendar, hResume, XFN.
Il microformat hCard, ad esempio, è un formato standard per rappresentare informazioni riguardanti persone, organizzazioni o aziende, che sfrutta elementi del semantic HTML in modo da poter incorporare i dati delle vCard nelle pagine web. hCard parte proprio dagli elementi dello standard vCard e li utilizza come class names per inserire in pagine (X)HTML i valori degli oggetti vCard. Le proprietà di una hCard sono rappresentate dagli elementi identificati con certi class names, che sono quelli definiti dallo standard, ovvero:

• vcard (identifica l’inizio di una hCard, è l’elemento root)
• fn (formatted name)
  
• n
• nickname, sort-string
• url, email, tel
• adr, label
• geo (latitude, longitude), tz
• photo, logo, sound, bday
• title, role, org
• category, note
• class, key, mailer, uid, rev

La mia hCard (creata in questo caso con hCard Creator) con alcune delle mie informazioni personali (Nome, Cognome, Città, Stato, Telefono, email, foto, url) potrebbe essere:

1. <div id="hcard-Simone-Dezaiacomo" class="vcard">
2.   <img style="float:left; margin-right:4px"
        src="http://www.esempio.com/miafoto.jpg" alt="photo of "
        class="photo"/>
3.   <a class="url fn" href="http://semanticweb30.wordpress.com">
                       Simone Dezaiacomo</a>
4.   <a class="email" href="mailto:indirizzoemail@gmail.com">
                       indirizzoemail@gmail.com</a>
5.   <div class="adr">
6.    <span class="locality">Bologna</span>
      ,
7.    <span class="region">Italy</span>
8.   </div>
9.   <div class="tel">+39 0512020202020</div>
10. </div>
(in rosso sono evidenziati i class names)

Questo codice, inserito nella propria pagina web, fa sì che le informazioni personali siano “semantiche” e formattate con il microformat hCard, rendendo i dati “machine-readable”, riusabili e facilmente condivisibili poichè sono identificati da class names standardizzati.

I Design Principles del semantic XHTML sono:

• riutilizzare le strutture (nomi, oggetti, proprietà, valori, tipi, ecc…) già standardizzate nelle RFC (nel caso delle hCard, viene riutilizzato lo standard delle vCard)
• usare class names basati sui nomi delle strutture originali dello standard (ad esempio quello che nelle vCard è BEGIN:VCARD, nelle hCard è class=”vcard”, così come FN diventa class=”fn”, ecc…)
• Alcuni elementi possiedono sotto-proprietà (locality è una sotto-proprietà di adr). Queste sotto-proprietà devono essere annidate rispetto agli principali cui sono riferiti (vedi righe 5-8 dell’esempio sopra)
• Se il formato dell’elemento corrispondente alla struttura standard originale è troppo lungo o scomodo, è possibile usare <abbr> e inserire il contenuto dell’elemento come valore dell’attributo title invece che come contenuto dell’elemento. (Per rappresentare la sotto-proprietà region – riga 7 – in formato abbreviato, avremmo potuto usare <abbr class=”region” title=”Italy”>IT</abbr>)

Per quanto riguarda il microformat hCalendar, il concetto e i design principles sono gli stessi di hCard, ma permette, seguendo la struttura definita dallo standard iCalendar, di rappresentare eventi e calendari incorporabili in pagine web e presentanti contenuto semantico riusabile e “machine-readable”.

Fonti:
http://microformats.org/
http://microformats.org/wiki/what-are-microformats

http://www.gmpg.org/xfn/

I keep reading lately about Supper Influencer and others with a vast online presence in the context of leadership. I agree that these figures are helping us adapt to the new power that lies in social media. Yet, I think that we need to put things in perspective.  Just because they have 4,000 followers on Twitter and a great blog doesn’t mean that they have enabled millions to do things they couldn’t do before. In other words: they haven’t necessarily led us to a new world online. But here are the six true leaders of the new web world in my opinion, because they have helped to shape this new world. 

Sir Tim Berners-Lee

The World Wide Web inventor, the director of the World Wide Web Consortium (W3C) and more. Sir Tim is my first choice for a true leader of the new web world not just because of his past contributions, but also for his vision of the way information will be linked going forward. In his Giant Global Graph blog post, he speaks about making the web smarter using standard semantic formats like FOAF, RDF, OWL and SPARQL.

“It’s not the documents, it is the things they are about which are important.”

We can already see the benefit of using these semantic annotations in web pages that support microforamts. One example is HCard in Google Maps:

“By marking up our results with the hCard microformat, your browser can easily recognize the address and contact information in the page, and help you transfer it to an address book or phone more easily.”

I don’t know how much (if at all) Sir Tim is using Twitter, but in my opinion he is a true technology leader. The standards that the W3C organization is setting keep changing our lives.

Dave Winer

The man that gave us RSS, podcasting, and taught us what blogging is all about.From his blog post The unedited voice of a person about blogging:”If it was one voice, unedited, not determined by group-think — then it was a blog, no matter what form it took. If it was the result of group-think, with lots of ass-covering and offense avoiding, then it’s not. Things like spelling and grammatic errors were okay, in fact they helped convince one that it was unedited.”I don’t know what Mr. Winer is up to these days but in my opinion his contribution to the weblog world helps to empower millions in sharing their lives, knowledge, and thoughts online.

Jeff Bezos and Amazon.com

What Amazon is doing in recent years for small businesses is what that Microsoft did in the 80’s and 90’s.

“Amazon Web Services(AWS) enables web-scale computing by providing access to an established infrastructure that gives you flexibility to run your business at “web-scale” — uninhibited by growth and demand. In other word it saves a new online business from building the costly scalable infrastructure to support it. The fee structure is also a big advantage with its Elastic Compute Cloud (EC2) your initial cost is minimal and it only grows with your business success. “

The results:

“A growing community of 330,000+ developers, start-ups, and established companies are building robust applications using AWS solutions.”

One of my favorite quotes came from the My Other Computer is a Data Center sticker story. If Microsoft is now building tools for cloud computing then people will follow. You can also see what Mr. Bezos has to say about AWS here.

I know that Amazon is a business but when I see a company that shares infrastructure originally built to serve its own business with others who otherwise couldn’t afford to build it, and thereby enable new businesses to emerge,  I see a leader.If the direction of web app development is into the clouds, Amazon was the pioneer and will be the leader taking us there.

Jimmy Wales and Wikipedia

Wikipedia founder. Can you imagine a day without visiting this web site for learning a new technology, buzz word, persona, or millions of other terms? My Wikipedia sequence starts with Google-ing a term, finding the right Wikipedia page on the Google search results list, then clicking. After a few minutes I’m in the know. Based on the fact that Wikipedia always is on top of Google SERP I can only guess that I’m not the only one dancing this little dance. I can’t thank you enough, Mr. Wales.

Larry Page, Sergey Brin and Google

It seems lately that Google is becoming the next Microsoft: big, ubiquitous, too powerful, some may even say a monopoly. I agree with some of these claims, and I like to see any of the Alts taking market share away from Google. Yet can you see any other company today that knows how to treat data the way Google does? Can you see any other software company that does such an amazing job in building product usability?  Sometimes I think that Google is inside my head predicting the next move.  Recently Google launched Chrome, a new web browser that shows again how this company leads. The web world of today is not the same as it was few years ago. Web applications nowadays offer no less functionality than desktop applications running on our personal computer. It was a time for a new browser and Google was the one building it. I’m sure now that Google, using Chrome, and having access to our desktop will lead us to an even more organized world of information.

The people on this list have a lot in common. They are superb engineers and business people. They are not new leaders actually–they led us before–but they are not about to stop. They built technology that enables so many of us to do things that could only have been done before by large organizations, if at all. They understand the digital world and adapt to changes faster than anyone else. Unless they happen to be the very ones that catalyze the change themselves.

Do you agree? Did I miss others (probably)? What other forms of leadership on the web do you see today?

Seit Anfang dieses Jahres 2008 betreibe ich eine Suchmaschine names VIREL auf www.virel.org. VIREL durchforstet das Internet mittels verteilter Crawler nach Mikroformaten.

Mikroformate sind kleine standardisierte Codesegmente um z.B. Kontakte, Ereignisse (Events), sowohl menschen- als auch maschinenlesbar, strukturiert abzulegen. Durch die Nutzung von Mikroformaten wird der Inhalt von Webseiten für Maschinen (z.B.) Suchmaschinen verständlich und Inhalte untereinander in Beziehung gesetzt (Semantisches Web), ohne dass dadurch die Benutzerfreundlichkeit leidet. Für mehr Informationen über Mikroformate empfehle ich folgende Links:

• Offizielle Webseite für Mikroformate
• Eintrag in Wikipedia (DE) über Mikroformate
• Wikipedia (DE) über Semantisches Web

VIREL durchsucht nun das Internet nach diesen Formaten. Bis heute, September 2008 hat VIREL über 20 tausend Kontakte gefunden, täglich kommen ca. 500 dazu. Die Anzahl der kalendarischen Events schwankt, da Ereignisse veralten wenn sie in die Vergangenheit rücken. Natürlich hat niemand Interesse daran, Events zu finden die bereits statt gefunden habe. Derzeit hält VIREL somit um die tausend bis zwei tausend aktuelle Events, tendenz steigend.

Ein Problem von Mikroformaten ist derzeit noch die fehlende Popularität und somit die Verbreitung und Aktzeptanz dieser. Grosse Unternehmen bauen Mikroformate zwar bereits in Ihre Produkte ein, z.B. unterstützt mittlerweile Firefox 3.0 Mikroformate und auch der neue Internet Explorer 8 soll Mikroformate unterstützen, doch der allgemeine Durchbruch lässt noch auf sich warten.

Für Die Statistiker habe ich noch ein paar Zahlen vorbereitet, die durch die Arbeit der VIREL Suchmaschine im Zeitraum von April 2008 bis September 2008 ermittelt wurden.

• Derzeit ist auf ca. 1.2% der Webseiten mindestens ein Mikroformat vorhanden
• ca. 90% davon sind hCards, 7% hCalendars und der Rest andere Mikroformate
• Die meisten Mikroformate sind derzeit (wer hätte das gedacht) in den USA zu finden, gefolgt von GB und Deutschland sowie im Rest von Europa.

Die Features der Suchmaschine in aller Kürze

• Submit-Funktion für eigene Webseiten
• VIREL kann als Hoster für Kontakt genutzt werden
• Volltext- und phonetische Suche
• Alternative Suchangebote
• Manueller Import von .vcf vCard Dateien
• RPC Schnittstelle um Suchergebnisse z.B. direkt in eigene Webseite zu Integrieren

Die technischen Features werden auch auf der Technical Page (EN) von VIREL erklärt.

In naher Zukunft soll VIREL noch mehr Mikroformate verstehen und die Nutzerschnittstelle soll besser werden. So ist z.B. denkbar dem Benutzer automatisch die Kontakte oder Events zu präsentieren, die geografisch am nächsten zu seinen eigenen Standort liegen. Das ist aber nur einer der vielen Ideen. Wir werden sehen was davon letztendlich die nötige Reife erlangt…

Cem Basman machte mich vor zwei Wochen auf NoseRub (“Nasereiben”) aufmerksam. Da Köln nicht weit ist und mich Open Sorce Projekte interessieren meldete ich mich bei Dirk Oblertz an. Im Vorfeld schaute ich mir Identoo.com den Hostingservice von NoseRub an. Ich sah darin erst einen Argregator der Onlineaktivitäten von Plattformen wie Flickr, Facebook, Youtube usw. per RSS besonders gut in verschiedene Spalten (Audio, Video, Bilder usw.) argregiert, was aber nur ein Teil des Projektes ist.

-Netzwerkübergreifendes verknüpfen von Profilkontakten

Durch Gespräche mit den anwesenden Programmieren erkannte ich schnell das es sich um ein Projekt handelt was Benutzern ermöglichen soll Netzwerke dezentral zu organisieren. Im Klartext: Man ist in einem Netzwerk und kann andere zu seinen Kontakten hinzufühgen, die nicht im selben Netzwerk angemeldet sind. Dies ist heute schon mit der Microformats-Technologie möglich. Durch hCard und XFN werden verknüpfungen in den URL’ s gefunden, was die Suchmaschine Google auch schon nutzt.

Zukünftig werde ich mich also nur noch in meinem Lieblingsnetzwerk aufhalten und von dort aus alles verwalten und wenn mir das dann auch nicht mehr zusagt ziehe ich mit Sack und Pack auf meinen eigenen Server um. Beim Anmelden auf identoo.com bekommt man automatisch eine open ID womit die Privatsphäre sichergestellt ist.

Ich finde dieses Projekt sehr Spannend und wünsche allen Nutzern und Entwicklern viel Spass und gutes Gelingen.

These are my slides from today’s meeting.  I was looking at:

• Improvement 1 – Adding hCard to Contact Details and hCalendar to Events
• Improvement 3 – Search Auto-discovery
• Improvement 6 – Add hint text to search boxes

It’s published under a Creative Commons licence (details on the slideshow) so feel free to use it and adapt it as required.

Cheat sheets

These are a few of the cheat sheets that I use with these technologies:

Microformats

• Brian Suda’s Microformats cheat sheet
• Added Bytes’ Microformats cheat sheet

jQuery

• jQuery 1.2 cheat sheet

OpenSearch

• OpenSearch 1.1 (Draft 3) cheat sheet

Gareth @ St Andrews

Wer generell an offenen, verteilten sozialen Netzwerken interessiert ist, ist herzlich willkommen, am 13./14. September in Köln am NoseRub DevCamp teilzunehmen.

Was ist NoseRub? Dirk Olbertz, Kopf und Architekt von NoseRub erklärt es in einer Mail so:

NoseRub zeigt, wie mit den bereits vorhandenen Standards hCard, OAuth, OpenID, RSS und XFN die soziale Netzwerke aufgebaut werden können. Der Content und die Kontaktbeziehungen einzelner geschlossener Plattformen werden aggregiert und erlauben dem Benutzer somit einen zentralen Anlaufpunkt all seiner Aktivitäten und Kontakte im Web 2.0 zu erschaffen.

Zwischen den Ideen und Konzepten von NoseRub und Microblogging gibt es einen starken Zusammenhang. Ganz deutlich wird das bei der Open Source Software Laconi.ca (aka identi.ca & Co.) und beim OpenMicroBlogging, die ja auf ähnlichen Grundsätzen und Technologien basieren, aber einen etwas anderen Schwerpunkt haben. NoseRub und Microblogging ergänzen sich gut. NoseRub kann verteilte Microblogging Server und Netzwerke mit weiteren Technologien des Web 2.0 verbinden. Es kann als Kitt (“glue”) dienen aus der Perspektive der User und so reichhaltigere Welten schaffen.

Dirk hat vor, auf dem NoseRub DevCamp eine praktische Arbeitsatmosphäre zu schaffen, wo insbesondere auch ganz konkret an NoseRub gearbeitet und entwickelt wird. Hands-on für Developer. Die Stunde. wo das Produkt weitergetrieben und neue Ideen eingebracht werden können. Super!

NoseRub DevCamp ist für Macher.

[Mehr über NoseRub hier in der "Sprechblase"]

Firstly I’m not using WordPress’ Press This feature any more, this is the third time I am having to post this after it ate 2 previous drafts. Maybe I should fix the GreaseMonkey script I build for /. to work on Press This.

After predicting the death of MySpace they have surprised me by adding an OpenID Identity Provider. Obviously they are only allowing you to use it to authenticate on other sites, but still is a step with others including FaceBook haven’t done yet. So I started to muse how FaceBook would be able to top it, and what I actually want from a OpenID Identity Provider:

• Authentication (obviously)
• FOAF
• hCard (or other microformats)
• Certificate Authentication (PKI)

ClaimID already has 3 of the 4, but their friend system requires some kind of social networking and as it is not a social networking site it doesn’t really cover FOAF completely. This is why integration of FOAF would be a good step for both FaceBook and MySpace.

MySpace is only acting as an identity provider, meaning that while you can use your MySpace credentials to sign into other Web sites, you cannot yet use your credentials from another OpenID provider to sign into MySpace.

Source: MySpace Opens Up First; Launches Data Availability on Flixster and Eventful

technorati tags: authentication, foaf, hcard, identity, microformat, openid, security

I had an excellent conversation with Stephen Paul Weber, an active DiSo plugin developer, on his experience with the DiSo profile plugin. For those of you unfamiliar with this series of posts, the idea is to create blog-length interviews with various in the wild apps describing their processes and the technologies that they use with regards to data portability. The goal is to profile real use cases, solutions, and lessons learned when it comes to the current state of affairs for data portability technology. Note that these posts aren’t meant to recommend or not recommend certain technology, I leave that up to the developers/architects to decide based on their needs. If you have such an app and are interested in being interviewed, please leave me a comment on one of my posts and I will get in touch with you.

DiSo Project Background
Straight from the DiSo Google group About page

Social networks are becoming more open, more interconnected, and more distributed. Many of us in the web creation world are embracing and promoting web standards – both client-side and server-side. Microformats, standard apis, and open-source software are key building blocks of these technologies.

DiSo (dee • zoh) is an umbrella project for a group of open source implementations of these distributed social networking concepts. or as Chris Messina puts it:“to build a social network with its skin inside out”.

You can also listen to an interview by Chris Messina on Chris Messina about DiSo.

At this stage, DiSo plugins only work on self-hosted WordPress blogs which means if you have a blog on wordpress.com, you are out of luck. Also, all DiSo plugins currently are written in PHP, WordPress’s choice of language. Visit the WordPress site to get instructions on how to host your own WordPress blog and install plugins.

Application Overview
The DiSo WordPress profile plugin has the following main features

• When a user signs up for a WordPress account, the plugin makes it easier to import the user’s profile information via hCard and XFN (if available)
• Once a user has signed up for a WordPress account, the plugin makes it easier for the user (now blog owner) to publish their own profile with standards like hcard, XFN
• Supports permission features allowing blog owner to restrict access to his information based on predefined relationship, e.g., I can’t see his phone number but friends of him who login with their OpenID and are present on his authorized list of friends can see his phone number
• There is a sidebar widget that displays names/avatars of most recently logged in visitors

Technology
The key technical pieces are hCard, XFN (rel-me, rel-contact), PHP5, and standard WordPress plugin architecture. The plugin should work on WordPress 2.0 and above, and has been tested on 2.3 through 2.5. Currently the plugin mimics SGAPI functionality without the FOAF bit. Also, FOAF was considered but not implemented, another item for the future perhaps. He plans to add Google Social Graph API (SGAPI) support, but it wasn’t available when the plugin was written, so it is something to consider for the future – Steve Ivy wrote a PHP wrapper for SGAPI.

While the plugin works with OpenID, it does not require OpenID. There is a button to import profile and can fetch profile information if it is not an OpenID URL. OpenID profile extraction for XFN and hCard is automatic upon registeration and login. For OpenID feature to work, it needs the WP-OpenID plugin. No other libraries or plugins are required, in fact the import button works fine if the WP-OpenID is not installed. To display the user’s profile, the user needs to add a WordPress template tag. There is a page token for rendering on a WordPress page and a PHP function for addition directly to the template (documented on the plugin page). So far, most people don’t use it as a sidebar widget and instead display their profile information inline in the blog.

For an example of the plugin in action, check out Stephen’s blog, it powers the top half of his main page and the avatars of recent visitors in his sidebar.

Lessons learned
Some people have hCard on their OpenID pages via OpenID delegation usually or directly on the page. A large number of people have rel-me links going to their main profile somewhere else. In his opinion, the biggest hurdle is still HTML parsing in PHP which is surprsing to me since PHP is such a popular web development language. Event though PHP has excellent XML support but if the HTML is broken or incomplete as it is often the case in the world wild web, there is no library to handle that. An option is to fix it with HTML Tidy but most shared service providers (like DreamHost) do not have HTML Tidy installed. Without HTML Tidy, the plugin has to run the page through W3C remote tidy proxy which can be slow. Another option is to use HTML Purifier which is a re-implementation of HTML Tidy in PHP.

The current plugin user base is primarily DiSo developers and he has not gotten any feedback from non-DiSo developers. He noted that there is a goofy WordPress thing where the permissions model is based on the contacts list but WordPress only supports one blogroll list, so everyone on that list has the same permission. This is not a problem for most blogs but it could be a problem for multi-authors blog. There is no affiliation with WordPress other than it is a WordPress plugin.

No, it isn’t a proposition, so get your mind out of the gutter FOAF stands for Friend-of-a-Friend and is a RDF taxonomy capable of describing a person and his/her friend(s) in far more glory details than XFN, in fact it is a competing standard. Reading your mind, you are probably going to ask me, what is RDF? RDF (first published specs in 1999) stands for Resource Description Framework which means absolutely nothing to most people however it is often touted as the foundation for the so-called semantic web. If you want a good introductory RDF post, check out What Is RDF. A synopsis of RDF extracted from this ReadWriteWeb post Semantic Web Patterns: A Guide to Semantic Technologies

RDF is a powerful, graph-based language for declaring things, and attributes and relationships between things. In a simplistic way, one can think of RDF as the language that allows expressing truths like: Alex IS human (type expression), Alex HAS a brain (attribute expression), and Alex IS the father of Alice, Lilly, and Sofia (relationship expression). RDF is powerful, but because it is highly recursive, precise, and mathematically sound, it is also complex.

On a high level, FOAF has the following categories

• Person’s basic information such as name, nick, title, homepage, email, surname, first name, given name, email (expressed as mbox), etc.
• Person’s extended information such as blog, interest, project, school home page, work home page, friend(s) he knows, etc.
• Person’s online accounts (includes instant messaging)
• Person’s projects and groups
• Person’s documents and images

As you can see, it allows for extensive coverage of a person’s information. If you want the full details, check out FOAF Vocabulary Specification 0.91. Assuming you have a basic knowledge of XML, let’s take a simple example to illustrate how FOAF is actually written.

The above XML snippet describes a person’s name and email, obviously John Doe is not a real name and johndoe@hisemailprovider.com is not a real email but you get the idea. Technically this describes a person, not the “me” identity as defined by XFN rel-me.

Let’s take a more slightly more complex example

Basically the above FOAF says there is a person John Doe, his email is johndoe@hisemailprovider.com, he “knows” Jane Smith, and her email is jane.smith@hercompany.com. Note that “knows” does not necessarily equate to a friend, it simply means that you know someone, that person could be a friend, lover, co-worker, parent, sibling, or someone you met online but not in person, etc. For a more in-depth look at FOAF, check out XML Watch: Finding friends with XML and RDF.

Ok, now that you know how to create basic FOAF, what next. Unlike XFN / hCard / microformats, FOAF is delivered via a file separate from any HTML markup. Creating a FOAF file is not something that a Joe Blow user will ever do manually. However, if you are curious and want to play around with creating FOAF, you can use this handy tool FOAF-o-Matic. For most users, their service providers, the ones that support FOAF, will handle all the intricate details behind the scene. For example, if you have an account at MyBlogLog, you can check out their FOAF feature by appending “/foaf” to the end of your MyBlogLog member URL. If you aren’t a MyBlogLog member, here is Ken Brewster’s MyBlogLog FOAF file, http://www.mybloglog.com/buzz/members/kentbrew/foaf/, and check out his fun FOAF consuming app, picture below

Since FOAF is a separate file, you have to link to it from a HTML page by adding the following HTML code within your <head> tag (using Kent Brewster’s FOAF URL)

In MyBlogLog’s case, that HTML code is added automatically to a member’s profile page. I should note that in MyBlogLog’s case, the FOAF file is publicly available without any authentication allowing any search engine to crawl and index it, in fact, this information is available through Google Social Graph API but beware that there is a current limitation with Social Graph API in that Googlebot does not crawl a FOAF file linked from an HTML page, hence not making it available for the API to parse. In Brad Fitz own words,

I just verified that the problem is the crawl coverage. Historically Googlebot hasn’t cared about FOAF because it hasn’t used FOAF, so why hit your server fetching it just to throw it away? Now that the SGAPI is using it, though, I need to ask Googlebot to go get that FOAF that I know exists but is uncrawled.

A few parting thoughts…

• Chris Messina thinks that FOAF baking in relationship information is a fundamental flaw, I have to respectfully disagree because I think it is a key missing feature from XFN/hCard, at least when it comes to my XFN consuming app. Upon further reflection, I think I understand Messina’s concern about FOAF being potentially convoluted. It is due to the powerful recursive nature of RDF that can lead to circular references and if a FOAF parser doesn’t account for this, it can lead to infinite loops.
• Since FOAF only has a “knows” property, it is less descriptive, hence less useful, than XFN rel values (friend, acquaintance, co-worker, neighbor, sibling, parent, child, crush, date, etc)
• Apparently FOAF does not have properties to specify an address, e.g.
  state/province, country, city, street address, quite odd indeed. However, it can be remedied by adding VCard namespace to RDF.

• The general vibe in the web development community is that FOAF is more complicated than XFN so it is more likely to see XFN in the wild than FOAF
• Firefox Operator plugin does not consume FOAF information
• FOAF information is meant for app-to-app consumption unlike XFN / hCard which are embedded in HTML. Check out this post WordPress, FOAF, OpenID – updated for a WordPress plugin retrieving FOAF profiles when users authenticate a wordpress blog with OpenID.
• There is a recent effort, hFOAF, to combine FOAF, hCard, and XFN

In an offline conversation with Chris Messina, we discussed the idea of creating blog-length interviews with various in the wild apps describing their processes and the technologies that they use with regards to data portability. The goal is to profile real use cases, solutions, and lessons learned when it comes to the current state of affairs for data portability technology. I am using the term “data portability technology” loosely here and is in no way affiliated with the ongoings of DataPortability.org.

So I am giving it a go and see what comes of it because we both think this kind of information can be useful to others looking to understand the lay of the data portability land. As such, I will title all such future posts starting with “In the wild snapshot…” as well as assign the category (WordPress terminology) of “in the wild snapshot”. If any of you are interested in doing such an interview, leave a comment on here and I will get in touch with you. Note that these posts are generally meant for web developers but everyone is welcomed to read it of course.

First up, I interviewed myself on my recent XFN coding experiment, neat how that works.

Application Overview
Given the abundance of XFN producers available, I wanted to create a XFN consuming application instead. If you need an introduction to rel-me and XFN, check out my earlier post here. The basic idea is to extract XFN information from a URL and present it in a human readable form, in my case, grouping rel-me entries into “My Online Identities” and rel-contact entries into “My contacts”, that’s it, pretty simple thing to do.

Technology
Technology considered: XFN, FOAF, Javascript, JSON, DOM, server side platform (like Ruby on Rails, etc), Google Social Graph API, Google Social Graph Test Parser, lab.backnetwork ufXtract microformats parser

Technology used: XFN, Javascript, JSON, DOM, CSS, lab.backnetwork ufXtract microformats parser

To begin with, I considered client side (Javascript, JSON, DOM, CSS) vs. server side (Ruby on Rails) platforms and went with client side technologies primarily because I had a good example client side app to start with, courtesy of Kevin Marks (OpenSocial advocate and microformats founder). You will notice the very similar layout and fonts, I like to reuse code.

The next question is selecting an appropriate XFN parser. I can either try to find some Javascript library or write my own or use a 3rd party service. To make things easier, I decided to go with a 3rd party service. I have 2 choices to pick from 3rd parties, lab.backnetwork microformats parser and Google Social Graph API. I decided to use lab.backnetwork parser primarily because it parse pages in real-time whereas Google Social Graph API only parse pages crawled by Googlebot which can result in data staleness. With lab.backnetwork parser, I used the JSON callback to process the JSON data structure passed back by the parser. Once I have the JSON data, I then sliced and diced it to dynamically generate additional HTML using Javascript, DOM, and CSS.

If you want more details on how to use Javascript to call the lab.backnetwork parser, check out this excellent post Javascript badges powered by JSONP and microformats. Extracted from the post, here’s the script tag code calling lab.backnetwork parser

Lessons learned
As a newcomer to XFN, this is a good way, at least for me, to learn about XFN. lab.backnetwork parser works pretty well for extracting XFN information especially since it provides real-time parsing. However, unlike Google Social Graph API, it doesn’t currently parse FOAF. FOAF is a competing standard to XFN but can be used in conjunction with XFN. Here’s a post about XFN and FOAF. From the few profile pages I have seen, it is possible for people to use both XFN and FOAF. For example, on such a profile page, XFN is used to markup the multiple rel-me identities and FOAF (in a separate file) is used to list all his friends. However in other profile pages, FOAF is skipped altogether. It doesn’t appear that there is a best practice published on how to mix and match the various technology.

Another issue I ran into is parsing and displaying human readable names for XFN URLs. As it stands, XFN allows one to define relationship between oneself and friends all centered around the URLs. However, URLs are not designed for optimal human readability, some URLs are long and unruly and others employ the use of proprietary internal naming scheme, e.g. (actual site names changed to protect the innocent),

The reason why I think it is important to couple human readable names with URLs is that a consuming app usually wants to do something meaningful with the XFN information and URLs alone does not provide complete information resulting in the end user having to do more work filling in the human readable information after the initial extraction.

In my discussion with Kevin Marks, he indicated that hCard can and should be used along with XFN to provide complete information. For example, it is possible to have the following XFN and hCard markup

I think this is a best practice that is not obvious. Developers are generally familiar with each type of microformats standard but I haven’t seen much documentation in way of how to mix and match the various standards for optimal use. Each standard tends to be describe in silo without consideration for other standards, so hopefully revelations like this can help developers better understand how to use the standards.

Even though the XFN/hCard combination is more complete than just XFN, I still see some issues with it. For example, a parser has to understand the implied relationship between the hCard information and the XFN information and returns that information as a related entity meaning that hCard provides the human readable names for the XFN URL, a relationship that is currently not part of the hCard or XFN spec, so it has to be inferred by the developer. Also, I would like this type of cross standards best practices to also extend to XFN/FOAF, etc. Note that at this time, Google Social Graph APIs do not parse hCard information so even if someone put that information on their profile page, it won’t be useful if the consuming app uses Google Social Graph API. Kevin indicates that he might rectify this in the future and extends the API to also parse hCard.

One last thought, even though I started my application using Javascript, if I want to do more useful stuff, I would switch over to server side code. In particular, if I need to store persistent user information, I need a database and that’s best facilitated by server side platform.

Feedback and suggestions are welcomed.

Update
Chris pointed me to a blog post he did on XFN, Portable contact lists and the case against XFN, it’s worth a read IMO.

Just yesterday, I was writing about rel=me, XFN, and microformats, check out the post A simple data portability project or is it if you haven’t read it already or just want some background on rel=me, XFN, and microformats.

Today I plan to attend the monthly DataPortability meetup at LinkedIn office in Mountain View. For directions, I would normally go through a series of steps to open a new tab, load google maps, find LinkedIn, etc. However, with my new found microformat knowledge, I immediately noticed that the Firefox Operator plugin lit up when the event page is loaded. As it turns out, upcoming.yahoo.com, the event service provider in this case, supports microformats.

Here’s the Operator showing the contact details for the event

To map it out, I clicked on “Find with Google Maps” and presto, it shows up on Google maps, very cool. Note that the contact information is using the hCard microformat. And hCard is actually based on another standard, vcard. hCard is just vcard expressed in HTML format. Here’s the actual HTML for that information