Microformatos - 2009 - Juntando as Peças do Puzzle

SAPO Sessions3 Junho 2009

microformatos
juntando as peças do puzzle

creative commons André Luís
attribution http://andr3.net
non-commercial aluis@co.sapo.pt
share-alike 3.0
Wednesday, June 3, 2009

microformatos juntando as peças do puzzle



Dan Cederholm
http://simplebits.com


Introdução
Como usar?
Como publicar?
Como consumir?



Introdução


microformatos juntando as peças do puzzle Introdução

World Wide Web

pixelydixel


Documentos

bitzcelt


Dados

fonte: cnn.com


Dados

fonte: everyblock.com


A evolução da Web
1999
RDF

2008

HTML (tabelas) Webstandards
1998 2003



A evolução da Web
1999 2005
RDF microformatos

2008

HTML (tabelas) Webstandards
1998 2003



“ Estão a ver todas aquelas coisas que
vocês já têm nos vossos sites? Os
microformatos apenas dizem aos
computadores o que essas coisas na
realidade são. ”
por Toby Inkster
http://microformats.org/wiki/what-are-microformats



Semântica
Estudo da linguagem humana do ponto de vista do significado das palavras e dos enunciados;

=



Web Semântica vs. web semântica

RDF microformatos
DDL
OWL, FOAF, etc. hcard, hcalendar, etc.
RDF: circa 1999 G R 2005

2007




infinitos namespaces

RDF microformatos
DDL
RDF: circa 1999 GR 2005

2007




infinitos namespaces número de formatos: < 20

RDF microformatos
DDL
RDF: circa 1999 GR 2005

2007



Linguagens

semântica
RDF
RDFa/eRDF
xhtml*

µf
html&xhtml
dados
POSH
documentos
HTML

complexidade



Princípios

1. Resolver um problema
2. Partir do mais simples possível
3. Pensados primeiro para humanos e só depois para as máquinas
4. Reutilizar formatos amplamente adoptados
5. Modulares e para serem embebidos
6. Permitir e encorajar desenvolvimento, conteúdo e serviços
descentralizados



Que formatos existem?
Especificações (7)

hCard rel-tag VoteLinks
hCalendar rel-license XFN
rel-nofollow



Que formatos existem?
“Drafts” (9)

hAtom rel-directory xfolk
hResume rel-enclosure adr
hReview rel-home geo
hAudio rel-payment



“ Show! Me! The money!”



Antes

<p>
<a
href=”http://andr3.net”>André Luís</a>
</p>



Depois

<p class=”vcard”>
<a class=”fn url”
</p>
Já temos um cartão de visita!
(hcard)



Imaginemos...

Windows Contacts

+
2 cliques
Address Book

http://www.blueflavor.com/people/keith-robinson/

Telefones


Imaginemos...

Outlook
+
2 cliques

iCal

http://shift.pt/page/schedule/

Telefones


Mais vantagens...
Simplicidade
DRY - Não duplicação
Baixo esforço de implementação
Portabilidade de conteúdos (dados)
Aumento da utilidade dos serviços!

Efeitos secundários
Uniformização do HTML produzido entre projectos
Permite uniformização visual (via folhas de estilo)


Beneficiários?

Páginas Públicas Páginas Privadas
c/ login

Utilizadores ou Visitantes

Serviços Externos



Quem Publica?

...etc.



Quem Consome?



Números (3 de Junho de 2009)

1. hCard 1,390,000,000 páginas (!!!!!)
2. hAtom 614,000,000 páginas
3. XFN 398,000,000 páginas
4. hCalendar 72,100,000 páginas
5. hReview 36,400,000 páginas

searchmonkeyid:com.yahoo.page.uf.<format>


E mais... RDFa



Google Rich Snippets

http://whit.me/googleufs



Google Rich Snippets HE
RE
BE
DR
AG
ONS
http://whit.me/googleufs !




Rich Snippets give users convenient summary information
about their search results at a glance. We are currently
supporting data about reviews and people. When searching for
a product or service, users can easily see reviews and ratings,
and when searching for a person, they’ll get help distinguishing
between people with the same name. It’s a simple change to the
display of search results, yet our experiments have shown that
users ﬁnd the new data valuable—if they see useful and relevant
information from the page, they are more likely to click through.





+ RDFa



Utilizador: “Como é que eu uso isso?”



Como usar?
Como usar no dia-a-dia?
Como usar nos nossos sites?


microformatos juntando as peças do puzzle Como usar?

Addon para Firefox: Operator
https://addons.mozilla.org/en-US/firefox/addon/4106




Bookmarklet: Firefox, Opera, Safari, IE6, IE7
http://leftlogic.com/lounge/articles/microformats_bookmarklet/




http://leftlogic.com/lounge/articles/microformats_bookmarklet/

Oomph! - Microformats toolkit (Microsoft/MIX online)
http://visitmix.com/Lab/Oomph

Plugin ie7+8
.js em jQuery
Temas em css
Windows Live Writer http://rhizohm.net/contact.html






IE8 - Webslices/hAtom
http://microsoft.com/windows/internet-explorer/beta/






IE8 - Webslices/hAtom
http://microsoft.com/windows/internet-explorer/beta/

Mas não só.



X2V (Brian Suda)
http://suda.co.uk/projects/X2V/

link
X2V

http://suda.co.uk/projects/microformats/hcalendar/get-cal.php?uri=<endereço web>



X2V (Brian Suda)

Magia
tidy+xsl
link
X2V




X2V (Brian Suda)

Magia
tidy+xsl
link
X2V
iCal
(.ics)




X2V (Brian Suda)

Análogo para hCards.
http://suda.co.uk/projects/microformats/hcard/get-contact.php?uri=<endereço web>

hCard(s) vCards (.vcf)



X2V (Brian Suda)

http://suda.co.uk/projects/microformats/hcalendar/get-cal.php?uri=http://shift.pt/page/schedule
webcal://suda.co.uk/projects/microformats/...

QR Code
http://reader.kaywa.com



Interligação de perfis

blog

Google Social Graph API
code.google.com/apis/socialgraph/



Interligação de perfis

XFN Explorer
http://workshop.andr3.net/xfnexplorer



Consolidação de perfis

Identify (by Glenn Jones)
http://lab.madgex.com/identify



Portabilidade dos Dados

dopplr.com



Recuperação de Dados (Funny story...)

http://workshop.andr3.net/de.ﬁbrillator/

1. Google Feeds Archive

2. Microformatos (xfolk)

bookmarks.html RSS JSON


Portabilidade dos Dados

7 de Setembro de 2008

O Fim dos utilizadores
tabula rasa?
http://slideshare.net/andr3/



Como publicar?


microformatos juntando as peças do puzzle Como publicar?

POSH
Plain Old Semantic HTML

1. Código Validado http://validator.w3.org 4. Remover links anorécticos
<a name=”noticia”></a>

2. Deixar de usar tabelas por 5. Usar classes com valor
motivos de apresentação, GIFs semântico
transparentes e HTML de
apresentação.

3. Corrigir <B>ed & <BR>eakfast



Design Patterns

rel abbr
datetime

class

grdloizaga


Padrão class

This attribute assigns a class name or set of class names
to an element. Any number of elements may be assigned
the same class name or names. Multiple class names
must be separated by white space characters.
(HTML 4)



Padrão class

<a class=”url fn”
</p>



Padrão rel

This attribute describes the relationship from the current
document to the anchor specified by the href attribute.
The value of this attribute is a space-separated list of link
types.
(HTML 4)

<a> <link>



Padrão rel

<a class=”fn url” rel=”me”
</p>



Padrão abbr

The content of the ABBR and ACRONYM elements
specifies the abbreviated expression itself, as it would
normally appear in running text. The title attribute of
these elements may be used to provide the full or
expanded form of the expression.
(HTML4)



Padrão abbr

<a class=”url” rel=”me”
href=”http://andr3.net”>
<abbr class=”fn” title=”André
Luís”>André</abbr>
</p>



Padrão datetime

<p class=”vevent”><span
class=”fn”>SHiFT</span>
<abbr class=”dtstart”
title=”2008-10-15”>15 de Outubro
</abbr>
</p>
data em formato ISO 8601
exemplos 2008-10-15
20081015
2008-10-15T10:00
2008-10-15T10:00+05
2008-10-15T10:00Z

<div class=”vevent”>

<h3 class=”category”>Brasileira</h3>

<h1> <a class=”summary” href=quot;/detalhe_evento.aspx?id=48568quot;>
Atenção Adriana Calcanhotto - «Maré»
</a></h1>

<h2><a class=”location” href=quot;detalhe_local.aspx?id=146quot;>
Coliseu do Porto</a></h2>

<h3><abbr class=”dtstart” title=”2008-05-29”>29-05-2008</abbr>
a <abbr class=”dtend” title=”2008-05-31”>30-05-2008</abbr></h3>
</div>

!


<div class=”vevent”>

<h3 class=”category”>Brasileira</h3>

<h1> <a class=”summary” href=quot;/detalhe_evento.aspx?id=48568quot;>
Atenção Adriana Calcanhotto - «Maré»
</a></h1>

<h2><a class=”location” href=quot;detalhe_local.aspx?id=146quot;>
Coliseu do Porto</a></h2>

<h3><abbr class=”dtstart” title=”2008-05-29T21:00+01”>29-05-2008</abbr>
a <abbr class=”dtend” title=”2008-05-30T21:00:+01”>30-05-2008</abbr></h3>
</div>





Padrão datetime

<abbr class=”dtstart”
title=”20070312T1700-06”>12 de Março
de 2007, a partir das17h
</abbr>
20 070 312 T 1700 - 06
“ Twenty million seventy-thousand three-hundred
”
twelve tee seventeen-hundred dash zero six.
Jaws 8 + IE 7

fonte: hAccessibility @ Webstandards.org
http://www.webstandards.org/2007/04/27/haccessibility/


BBC

http://www.bbc.co.uk/blogs/radiolabs/2008/06/removing_microformats_from_bbc.shtml



Padrão value class (experimental)
http://tr.im/valueclass

<span class=quot;telquot;>
<span class=quot;typequot;>Home</span>:
<span class=quot;valuequot;>+44.415.555.122</span>
</span>




<span class=quot;dtstartquot;>
<span class=quot;value-titlequot; title=”2009-06-03”>
yesterday</span>



hCard


microformatos juntando as peças do puzzle Sujar as mãos

Propriedades

raíz: obrigatórias facultativas

vcard fn nickname title
url role
n* email org
adr category
geo note
photo class
logo key
sound ...
bday



Exemplo

<div class=quot;outLinequot;>
<div class=quot;inBoxUtilizadorquot;>
<div class=quot;topoUtilizadorquot;><strong>andr3</strong></div>
<div class=quot;infoquot;>
<div id=quot;infopicsquot;><a href=quot;perﬁlamigo.html?uid=75quot;>
<img src=quot;http://social.imgs.sapo.pt/8a/0b/df/75/
pro_n733982142_189405_9522.jpgquot; border=quot;0quot; />
</a></div>
...



Exemplo

<div class=quot;outLine vcardquot;>
<div class=quot;inBoxUtilizadorquot;>
<div class=quot;topoUtilizador fn nicknamequot;><strong>andr3</strong></div>
<div class=quot;infoquot;>
<div id=quot;infopicsquot;><a class= quot;urlquot; href=quot;perﬁlamigo.html?uid=75quot;>
<img class=quot;photoquot; src=quot;http://social.imgs.sapo.pt/8a/0b/df/75/
pro_n733982142_189405_9522.jpgquot; border=quot;0quot; />
</a></div>
...


microformatos pequenas peças do puzzle Como publicar?

hCalendar

pyrii

microformatos pequenas peças do puzzle Sujar as mãos

Propriedades

raíz: obrigatórias facultativas

vcalendar* summary dtend
duration
vevent dtstart description
category
url
location

rrule
rdate
uid
geo (latitude, longitude)
...



rel-tag

peskymac


links para “tags”



Exemplo

<a href=”/tag/microformatos”>
microformatos
</a>



Exemplo

<a rel=”tag” href=”/tag/microformatos”>
microformatos
</a>



Exemplo

<a rel=”tag” href=”/tag/microformatos”>
microformatos
</a>

não esta esta é a tag



Exemplo

/tag/microformatos?tag=banana#split

esta é a tag



Como consumir?


microformatos juntando as peças do puzzle Como consumir?

HTML Scraping?



Parsers/Scrapers

Perl Cognition http://buzzword.org.uk/cognition/
Toby Inkster
(adr, geo, hatom, haudio, hcalendar, hcard, hrecipe, hresume, hreview, measure,
rel-enclosure, rel-license, rel-tag, species, xfn, xfolk) + RDFa, eRDF, GRDDL, RDF/XML...

WS Optimus http://microformatique.com/optimus/
Dmitry Baranovskiy
(hcard, hcalendar, hreview, hatom, hresume, xfolk, geo, adr, xfn, vote-links, hlisting,
haudio, rel-nofollow, rel-license, rel-tag)

Ruby mofo http://mofo.rubyforge.org/
Chris Wanstrath
(hcard, hcalendar, hreview, hatom, hresume, geo, adr, xfn)



Parsers/Scrapers

WS Yahoo! Query Language http://developer.yahoo.com/yql/
Yahoo!
select * from microformats
where url = ‘http://social.sapo.pt/’;

JS Sumo http://e.xu.sl.pt
Dan Webb



WS Optimus http://microformatique.com/optimus/
Dmitry Baranovskiy
(hcard, hcalendar, hreview, hatom, hresume, xfolk, geo, adr, xfn, vote-links, hlisting,
haudio, rel-nofollow, rel-license, rel-tag)



Transformadores

hCard+hCal X2V http://suda.co.uk/projects/X2V/
Brian Suda (disponibiliza .xsl’s)

vários + RDF TransFormr http://transformr.co.uk/
Martin McEvoy (com download para PHP)



That’s all, Folks!

Obrigado.

<a class=”fn url” href=”http://andr3.net”>André Luís</a>
<a class=”email” href=”mailto:aluis@co.sapo.pt”> aluis@co.sapo.pt</a>
</p>

http://microformats.org/wiki/
http://talks.andr3.net/2009/ufs_sessions.pdf creative commons
http://slideshare.net/andr3 attribution
non-commercial
share-alike 3.0


Créditos
Teia - http://www.flickr.com/photos/bitzcelt/2903751010/
Tim Berners-Lee - http://www.flickr.com/photos/pixelydixel/2712988953/
Lego - http://flickr.com/photos/grdloizaga/817443503/
Calendário - http://flickr.com/photos/pyrii/2400515074/
Etiqueta - http://flickr.com/photos/peskymac/1217139213/


Microformatos - 2009 - Juntando as Peças do Puzzle

Microformatos - 2009 - Juntando as Peças do Puzzle

Recommended

More Related Content

Recently uploaded

Recently uploaded(20)

Featured

Featured(20)

Microformatos - 2009 - Juntando as Peças do Puzzle