Apresentação introdutória sobre Microformatos na SAPO Sessions de 4 de Junho de 2009.
Baseada na apresentação feita no Codebits, actualizada com exemplos e novidades. (novas ferramentas, novos design-patterns, etc.)
Microformatos - 2009 - Juntando as Peças do Puzzle
1. 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
9. microformatos juntando as peças do puzzle Introdução
Dados
fonte: everyblock.com
Wednesday, June 3, 2009
10. microformatos juntando as peças do puzzle Introdução
A evolução da Web
1999
RDF
2008
HTML (tabelas) Webstandards
1998 2003
Wednesday, June 3, 2009
11. microformatos juntando as peças do puzzle Introdução
A evolução da Web
1999 2005
RDF microformatos
2008
HTML (tabelas) Webstandards
1998 2003
Wednesday, June 3, 2009
12. microformatos juntando as peças do puzzle Introdução
“ 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
Wednesday, June 3, 2009
13. microformatos juntando as peças do puzzle Introdução
Semântica
Estudo da linguagem humana do ponto de vista do significado das palavras e dos enunciados;
=
Wednesday, June 3, 2009
14. microformatos juntando as peças do puzzle Introdução
Web Semântica vs. web semântica
RDF microformatos
DDL
OWL, FOAF, etc. hcard, hcalendar, etc.
RDF: circa 1999 G R 2005
2007
Wednesday, June 3, 2009
15. microformatos juntando as peças do puzzle Introdução
Web Semântica vs. web semântica
infinitos namespaces
RDF microformatos
DDL
OWL, FOAF, etc. hcard, hcalendar, etc.
RDF: circa 1999 GR 2005
2007
Wednesday, June 3, 2009
16. microformatos juntando as peças do puzzle Introdução
Web Semântica vs. web semântica
infinitos namespaces número de formatos: < 20
RDF microformatos
DDL
OWL, FOAF, etc. hcard, hcalendar, etc.
RDF: circa 1999 GR 2005
2007
Wednesday, June 3, 2009
17. microformatos juntando as peças do puzzle Introdução
Web Semântica vs. web semântica
infinitos namespaces número de formatos: < 20
RDF microformatos
DDL
OWL, FOAF, etc. hcard, hcalendar, etc.
RDF: circa 1999 GR 2005
2007
Wednesday, June 3, 2009
18. microformatos juntando as peças do puzzle Introdução
Linguagens
semântica
RDF
RDFa/eRDF
xhtml*
µf
html&xhtml
dados
POSH
documentos
HTML
complexidade
Wednesday, June 3, 2009
19. microformatos juntando as peças do puzzle Introdução
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
Wednesday, June 3, 2009
20. microformatos juntando as peças do puzzle Introdução
Que formatos existem?
Especificações (7)
hCard rel-tag VoteLinks
hCalendar rel-license XFN
rel-nofollow
Wednesday, June 3, 2009
21. microformatos juntando as peças do puzzle Introdução
Que formatos existem?
“Drafts” (9)
hAtom rel-directory xfolk
hResume rel-enclosure adr
hReview rel-home geo
hAudio rel-payment
Wednesday, June 3, 2009
22. microformatos juntando as peças do puzzle Introdução
“ Show! Me! The money!”
Wednesday, June 3, 2009
23. microformatos juntando as peças do puzzle Introdução
Antes
<p>
<a
href=”http://andr3.net”>André Luís</a>
</p>
Wednesday, June 3, 2009
24. microformatos juntando as peças do puzzle Introdução
Depois
<p class=”vcard”>
<a class=”fn url”
href=”http://andr3.net”>André Luís</a>
</p>
Já temos um cartão de visita!
(hcard)
Wednesday, June 3, 2009
25. microformatos juntando as peças do puzzle Introdução
Imaginemos...
Windows Contacts
+
2 cliques
Address Book
http://www.blueflavor.com/people/keith-robinson/
Telefones
Wednesday, June 3, 2009
26. microformatos juntando as peças do puzzle Introdução
Imaginemos...
Outlook
+
2 cliques
iCal
http://shift.pt/page/schedule/
Telefones
Wednesday, June 3, 2009
27. microformatos juntando as peças do puzzle Introdução
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)
Wednesday, June 3, 2009
28. microformatos juntando as peças do puzzle Introdução
Beneficiários?
Páginas Públicas Páginas Privadas
c/ login
Utilizadores ou Visitantes
Serviços Externos
Wednesday, June 3, 2009
34. microformatos juntando as peças do puzzle Introdução
Google Rich Snippets
http://whit.me/googleufs
Wednesday, June 3, 2009
35. microformatos juntando as peças do puzzle Introdução
Google Rich Snippets HE
RE
BE
DR
AG
ONS
http://whit.me/googleufs !
Wednesday, June 3, 2009
36. microformatos juntando as peças do puzzle Introdução
Google Rich Snippets
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 find the new data valuable—if they see useful and relevant
information from the page, they are more likely to click through.
Wednesday, June 3, 2009
37. microformatos juntando as peças do puzzle Introdução
Google Rich Snippets
http://whit.me/googleufs
+ RDFa
Wednesday, June 3, 2009
38. microformatos juntando as peças do puzzle Introdução
Utilizador: “Como é que eu uso isso?”
Wednesday, June 3, 2009
39. microformatos juntando as peças do puzzle
Como usar?
Como usar no dia-a-dia?
Como usar nos nossos sites?
Wednesday, June 3, 2009
40. microformatos juntando as peças do puzzle Como usar?
Addon para Firefox: Operator
https://addons.mozilla.org/en-US/firefox/addon/4106
Wednesday, June 3, 2009
41. 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/
Wednesday, June 3, 2009
42. 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/
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
Wednesday, June 3, 2009
43. 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
https://addons.mozilla.org/en-US/firefox/addon/4106
Oomph! - Microformats toolkit (Microsoft/MIX online)
http://visitmix.com/Lab/Oomph
IE8 - Webslices/hAtom
http://microsoft.com/windows/internet-explorer/beta/
Wednesday, June 3, 2009
44. 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
https://addons.mozilla.org/en-US/firefox/addon/4106
Oomph! - Microformats toolkit (Microsoft/MIX online)
http://visitmix.com/Lab/Oomph
IE8 - Webslices/hAtom
http://microsoft.com/windows/internet-explorer/beta/
Mas não só.
Wednesday, June 3, 2009
45. microformatos juntando as peças do puzzle Como usar?
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>
Wednesday, June 3, 2009
46. microformatos juntando as peças do puzzle Como usar?
X2V (Brian Suda)
http://suda.co.uk/projects/X2V/
Magia
tidy+xsl
link
X2V
http://suda.co.uk/projects/microformats/hcalendar/get-cal.php?uri=<endereço web>
Wednesday, June 3, 2009
47. microformatos juntando as peças do puzzle Como usar?
X2V (Brian Suda)
http://suda.co.uk/projects/X2V/
Magia
tidy+xsl
link
X2V
iCal
(.ics)
http://suda.co.uk/projects/microformats/hcalendar/get-cal.php?uri=<endereço web>
Wednesday, June 3, 2009
48. microformatos juntando as peças do puzzle Como usar?
X2V (Brian Suda)
http://suda.co.uk/projects/X2V/
Magia
tidy+xsl
link
X2V
iCal
(.ics)
http://suda.co.uk/projects/microformats/hcalendar/get-cal.php?uri=<endereço web>
Wednesday, June 3, 2009
49. microformatos juntando as peças do puzzle Como usar?
X2V (Brian Suda)
http://suda.co.uk/projects/X2V/
Análogo para hCards.
http://suda.co.uk/projects/microformats/hcard/get-contact.php?uri=<endereço web>
hCard(s) vCards (.vcf)
Wednesday, June 3, 2009
50. microformatos juntando as peças do puzzle Como usar?
X2V (Brian Suda)
http://suda.co.uk/projects/X2V/
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
Wednesday, June 3, 2009
51. microformatos juntando as peças do puzzle Como usar?
Interligação de perfis
blog
Google Social Graph API
code.google.com/apis/socialgraph/
Wednesday, June 3, 2009
52. microformatos juntando as peças do puzzle Como usar?
Interligação de perfis
XFN Explorer
http://workshop.andr3.net/xfnexplorer
Wednesday, June 3, 2009
53. microformatos juntando as peças do puzzle Como usar?
Consolidação de perfis
Identify (by Glenn Jones)
http://lab.madgex.com/identify
Wednesday, June 3, 2009
54. microformatos juntando as peças do puzzle Como usar?
Portabilidade dos Dados
dopplr.com
Wednesday, June 3, 2009
55. microformatos juntando as peças do puzzle Como usar?
Recuperação de Dados (Funny story...)
http://workshop.andr3.net/de.fibrillator/
1. Google Feeds Archive
2. Microformatos (xfolk)
bookmarks.html RSS JSON
Wednesday, June 3, 2009
56. microformatos juntando as peças do puzzle Como usar?
Portabilidade dos Dados
7 de Setembro de 2008
O Fim dos utilizadores
tabula rasa?
http://slideshare.net/andr3/
Wednesday, June 3, 2009
58. 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
Wednesday, June 3, 2009
59. microformatos juntando as peças do puzzle Como publicar?
Design Patterns
rel abbr
datetime
class
grdloizaga
Wednesday, June 3, 2009
60. microformatos juntando as peças do puzzle Como publicar?
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)
Wednesday, June 3, 2009
61. microformatos juntando as peças do puzzle Como publicar?
Padrão class
<p class=”vcard”>
<a class=”url fn”
href=”http://andr3.net”>André Luís</a>
</p>
Wednesday, June 3, 2009
62. microformatos juntando as peças do puzzle Como publicar?
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>
Wednesday, June 3, 2009
63. microformatos juntando as peças do puzzle Como publicar?
Padrão rel
<p class=”vcard”>
<a class=”fn url” rel=”me”
href=”http://andr3.net”>André Luís</a>
</p>
Wednesday, June 3, 2009
64. microformatos juntando as peças do puzzle Como publicar?
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)
Wednesday, June 3, 2009
65. microformatos juntando as peças do puzzle Como publicar?
Padrão abbr
<p class=”vcard”>
<a class=”url” rel=”me”
href=”http://andr3.net”>
<abbr class=”fn” title=”André
Luís”>André</abbr>
</p>
Wednesday, June 3, 2009
66. microformatos juntando as peças do puzzle Como publicar?
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
Wednesday, June 3, 2009
67. microformatos juntando as peças do puzzle Como publicar?
<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>
!
Wednesday, June 3, 2009
68. microformatos juntando as peças do puzzle Como publicar?
<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>
Wednesday, June 3, 2009
69. microformatos juntando as peças do puzzle Como publicar?
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/
Wednesday, June 3, 2009
70. microformatos juntando as peças do puzzle Como publicar?
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/
Wednesday, June 3, 2009
71. microformatos juntando as peças do puzzle Como publicar?
BBC
http://www.bbc.co.uk/blogs/radiolabs/2008/06/removing_microformats_from_bbc.shtml
Wednesday, June 3, 2009
72. microformatos juntando as peças do puzzle Como publicar?
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>
Wednesday, June 3, 2009
73. microformatos juntando as peças do puzzle Como publicar?
Padrão value class (experimental)
http://tr.im/valueclass
<span class=quot;telquot;>
<span class=quot;typequot;>Home</span>:
<span class=quot;valuequot;>+44.</span> (0)
<span class=”value”>415.555.122</span>
</span>
Wednesday, June 3, 2009
74. microformatos juntando as peças do puzzle Como publicar?
Padrão value class (experimental)
http://tr.im/valueclass
<span class=quot;dtstartquot;>
<span class=quot;value-titlequot; title=”2009-06-03”>
yesterday</span>
Wednesday, June 3, 2009
76. 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
Wednesday, June 3, 2009
77. microformatos juntando as peças do puzzle Sujar as mãos
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;perfilamigo.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>
...
Wednesday, June 3, 2009
78. microformatos juntando as peças do puzzle Sujar as mãos
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;perfilamigo.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>
...
Wednesday, June 3, 2009
83. microformatos pequenas peças do puzzle Sujar as mãos
Exemplo
<a href=”/tag/microformatos”>
microformatos
</a>
Wednesday, June 3, 2009
84. microformatos pequenas peças do puzzle Sujar as mãos
Exemplo
<a rel=”tag” href=”/tag/microformatos”>
microformatos
</a>
Wednesday, June 3, 2009
85. microformatos pequenas peças do puzzle Como publicar?
Exemplo
<a rel=”tag” href=”/tag/microformatos”>
microformatos
</a>
não esta esta é a tag
Wednesday, June 3, 2009
86. microformatos pequenas peças do puzzle Sujar as mãos
Exemplo
/tag/microformatos?tag=banana#split
esta é a tag
Wednesday, June 3, 2009
90. microformatos juntando as peças do puzzle Como consumir?
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
Wednesday, June 3, 2009
91. microformatos juntando as peças do puzzle Como consumir?
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)
Wednesday, June 3, 2009
92. microformatos juntando as peças do puzzle Como consumir?
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)
Wednesday, June 3, 2009
93. microformatos juntando as peças do puzzle Como consumir?
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)
Wednesday, June 3, 2009
94. microformatos pequenas peças do puzzle Sujar as mãos
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)
Wednesday, June 3, 2009
95. microformatos juntando as peças do puzzle
That’s all, Folks!
Obrigado.
<p class=”vcard”>
<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
Wednesday, June 3, 2009
96. microformatos juntando as peças do puzzle
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/
Wednesday, June 3, 2009