Microformatos - juntando as peças do puzzle

microformatos
juntado as peças do puzzle
Codebits / 13 Novembro 2008

creative commons André Luís
attribution http://andr3.net
non-commercial me@andr3.net
share-alike 3.0
http://creativecommons.org/licenses/by-nc-sa/3.0/

microformatos juntando as peças do puzzle

Antes de mais...


Olá!


As minhas tags!

CSS Javascript XHTML HTML PHP
Microformatos OpenID Mobile


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
TUDO COMEÇOU...
“Em 6 de agosto de 1991, ele colocou um resumo[5] no newsgroup alt.hypertext. Essa data marca a estreia da Web como um serviço publicado na
Internet.”

TBL @ Campus Party Valencia 2008


Documentos

bitzcelt
No principio, uma teia de documentos.


Dados

fonte: cnn.com


Dados

fonte: everyblock.com


A evolução da Web
1999
RDF

2008

HTML (tabelas) Webstandards
1998 2003

Zeldman: Designing with webstandards
POSH
RDF: resource description framework
STANDARDS EXISTEM HÁ MAIS TEMPO: html4(1999), xhtml1.0 (2000), css2.0(1998)


A evolução da Web
1999 2005
RDF microformatos

2008

HTML (tabelas) Webstandards
1998 2003

Zeldman: Designing with webstandards
POSH
RDF: resource description framework
STANDARDS EXISTEM HÁ MAIS TEMPO: html4(1999), xhtml1.0 (2000), css2.0(1998)


“ 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

Toby Inkster, developer do Cognition


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

=

humanos conseguem compreender a igualdade.
computadores não conseguem... a menos que ajudemos.
deﬁnição: estudo da linguagem humana do ponto de vista do signiﬁcado 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

Gleaning Resource Descriptions from Dialects of Languages
to glean:
1. To gather after a reaper; to collect in scattered or
fragmentary parcels, as the grain left by a reaper
2. To gather from (a ﬁeld or vineyard) what is left.
3. To collect with patient and minute labor; to pick out; to
obtain.



infinitos namespaces

RDF microformatos
DDL

2007

to glean:
obtain.



infinitos namespaces número de formatos: < 20

RDF microformatos
DDL

2007

to glean:
obtain.


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

falar do “The Process”.
-----------25%---------


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 hCard!

More on this later. :)


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)
SIMPLES é possível publicar sem ter conhecimentos de semântica (ontologias, namespaces,
rdf, etc.)
DRY


Beneﬁciários?

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

Utilizadores ou Visitantes

Serviços Externos

quem beneﬁcia?
Serviços Externos = APIs com fácil deployment


Quem Publica?

...etc.

SPOT (hcards), Blogs (tags)


searchmonkeyid:com.yahoo.uf.<format>
+MIL MILHOES
[ 366, 277, 48, 53 ] milhoes


Números (21 de Outubro de 2008)

1. hCard 1,390,000,000 páginas (!!!!!)
2. hAtom 366,000,000 páginas
3. XFN 277,000,000 páginas
4. hCalendar 48,900,000 páginas
5. hReview 53,900,000 páginas

searchmonkeyid:com.yahoo.uf.<format>
+MIL MILHOES
[ 366, 277, 48, 53 ] milhoes


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/

-----------50%---------





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

Ajudamos o resto dos utilizadores com links para ﬁcheiros transformados.
Apenas se altera o HTML.


Interligação de perﬁs

blog

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

quem beneﬁcia?


Interligação de perﬁs

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

quem beneﬁcia?


Portabilidade dos Dados

dopplr.com


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
class - o mais usual
rel - usando no xfn, rel-*
abbr, que engloba o polémico datetime
include, não vamos abordar


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)

Este atributo estipula um ou mais nomes para a classe de um elemento.
A mesma classe pode exisitir em mais que um elemento e cada elemento pode ter mais do que uma classe, separadas por
espaços.


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
hatom, hcalendar, hcard e hreview
overview: http://www.cl.cam.ac.uk/~mgk25/iso-time.html
+5 => GMT+5
Z => Zero Meridian = UTC (Coordinated Universal Time/Temps Universel Coordonné)


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/

hatom, hcalendar, hcard e hreview
(NÃO ESQUECER: click! para ouvir mp3)
problema existe também no email type=”work” e duração do hAudio.


BBC

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


Atenção

<div class=”vevent”>

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

<h1> <a class=”summary” href=quot;/detalhe_evento.aspx?id=48568quot;>
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>

!

From SAPO Cultura

dtend é exclusivo, isto é, o evento acaba imediatamente ANTES do dtend.
Sem hora, assume 0:00.


Atenção

<div class=”vevent”>

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

<h1> <a class=”summary” href=quot;/detalhe_evento.aspx?id=48568quot;>
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>


From SAPO Cultura

dtend é exclusivo, isto é, o evento acaba imediatamente ANTES do dtend.
Sem hora, assume 0:00.


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

n (family-name, given-name, additional-name, honorific-prefix, honorific-suffix)
* Ver n-optimization na wiki oficial.

n pode ser deixado de fora.

valor de fn for 2 palavras separadas por um espaço:

- 1st word: given-name

- last word: family-name

- se 1st word acabar com “,”, então inverte.


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

from SAPO Spot


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

from SAPO Spot


Como consumir?

microformatos juntando as peças do puzzle Como consumir?

HTML Scraping?

retornam objectos extraídos das páginas
hkit - jan 2008 - hcard+xfn
cognition - adr, geo, hatom, haudio, hcalendar, hcard, hrecipe, hresume, hreview, rel-enclosure,
rel-license,rel-tag, xfn, xfolk, ... + RDFa, eRDF, GRDDL, RDF. Também html title meta e link tags,
ﬁgure, doc outline of html5, xoxo, xhtml @role.
Output em: turtle, rdf/xml, rdf/json, trix, vcard, jcard, icalendar, atom, kml, m3u, recipebook xml,
Optimus: xml, json, json-p, rss. hcal, hentry, hreview, haudio, adr, xfn, rel-nofollow, rel-license, hcard, hresume,
hlisting, xfolkentry, geo, votelinks, rel-tag


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)



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)



Got Cache?

http://workshop.andr3.net/cache/?url=<target-url>

http://workshop.andr3.net/cache/?url=<target-url>&ttl=<time-to-live>
http://workshop.andr3.net/ufs/

http://workshop.andr3.net/ufs/?uri=http%3A%2F%2Fworkshop.andr3.net%2Fcache%2F%3Furl
%3Dhttp%3A%2F%2Ftwitter.com%2Fandr3%26ttl%3D60&format=json&function=&filter=xfn



That’s all, Folks!

Obrigado.

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

http://microformats.org/wiki/
http://talks.andr3.net/2008/ufs_codebits.pdf creative commons
http://slideshare.net/andr3 attribution
non-commercial
share-alike 3.0
http://creativecommons.org/licenses/by-nc-sa/2.5/pt/


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 - juntando as peças do puzzle

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie Microformatos - juntando as peças do puzzle

Ähnlich wie Microformatos - juntando as peças do puzzle (20)

Mehr von André Luís

Mehr von André Luís (10)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Microformatos - juntando as peças do puzzle