Microformatos - 2009 - Juntando as Peças do Puzzle
3. Jun 2009•0 gefällt mir
7 gefällt mir
Sei der Erste, dem dies gefällt
Mehr anzeigen
•7,289 Aufrufe
Aufrufe
Aufrufe insgesamt
0
Auf Slideshare
0
Aus Einbettungen
0
Anzahl der Einbettungen
0
Downloaden Sie, um offline zu lesen
Melden
Technologie
Unterhaltung & Humor
Bildung
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
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 Introdução
Dados
fonte: everyblock.com
Wednesday, June 3, 2009
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
microformatos juntando as peças do puzzle Introdução
Imaginemos...
Outlook
+
2 cliques
iCal
http://shift.pt/page/schedule/
Telefones
Wednesday, June 3, 2009
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
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
microformatos juntando as peças do puzzle Introdução
Google Rich Snippets
http://whit.me/googleufs
Wednesday, June 3, 2009
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
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
microformatos juntando as peças do puzzle Introdução
Google Rich Snippets
http://whit.me/googleufs
+ RDFa
Wednesday, June 3, 2009
microformatos juntando as peças do puzzle Introdução
Utilizador: “Como é que eu uso isso?”
Wednesday, June 3, 2009
microformatos juntando as peças do puzzle
Como usar?
Como usar no dia-a-dia?
Como usar nos nossos sites?
Wednesday, June 3, 2009
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
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
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
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
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
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
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
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
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
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
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
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
microformatos juntando as peças do puzzle Como usar?
Interligação de perfis
XFN Explorer
http://workshop.andr3.net/xfnexplorer
Wednesday, June 3, 2009
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
microformatos juntando as peças do puzzle Como usar?
Portabilidade dos Dados
dopplr.com
Wednesday, June 3, 2009
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
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
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
microformatos juntando as peças do puzzle Como publicar?
Design Patterns
rel abbr
datetime
class
grdloizaga
Wednesday, June 3, 2009
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
microformatos pequenas peças do puzzle Sujar as mãos
Exemplo
<a href=”/tag/microformatos”>
microformatos
</a>
Wednesday, June 3, 2009
microformatos pequenas peças do puzzle Sujar as mãos
Exemplo
<a rel=”tag” href=”/tag/microformatos”>
microformatos
</a>
Wednesday, June 3, 2009
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
microformatos pequenas peças do puzzle Sujar as mãos
Exemplo
/tag/microformatos?tag=banana#split
esta é a tag
Wednesday, June 3, 2009
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
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
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
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
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
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
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