Microformatos - 2009 - Juntando as Peças do Puzzle

microformatos

André Luís

juntando as peças do puzzle

[email protected]://andr3.net

creative commonsattributionnon-commercialshare-alike 3.0

SAPO Sessions3 Junho 2009

Wednesday, June 3, 2009

http://andr3.net

http://andr3.net

http://andr3.net

http://andr3.net

microformatos juntando as peças do puzzle



Dan Cederholm http://simplebits.com


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



Introdução

Como usar?

Como publicar?

Como consumir?



Introdução


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

World Wide Web

pixelydixelWednesday, June 3, 2009


Documentos

bitzceltWednesday, June 3, 2009


Dados

fonte: cnn.comWednesday, June 3, 2009


Dados

fonte: everyblock.comWednesday, June 3, 2009

HTML (tabelas)1998

Webstandards2003

2008

Introduçãomicroformatos juntando as peças do puzzle

RDF1999

A evolução da Web


Webstandards2003

microformatos2005

RDF1999

2008

Introduçãomicroformatos juntando as peças do puzzle

HTML (tabelas)1998

A evolução da Web


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.

Introdução

por Toby Inksterhttp://microformats.org/wiki/what-are-microformats

“

”





Introdução

=

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



Introdução

Web Semântica vs. web semântica

RDFOWL, FOAF, etc.

microformatoshcard, hcalendar, etc.

GRDDLRDF: circa 1999 2005

2007



Introdução


RDFOWL, FOAF, etc.



2007


infinitos namespaces


Introdução


RDFOWL, FOAF, etc.



2007


infinitos namespaces número de formatos: < 20


semântica

complexidade

RDF

HTML

µf

Introdução

RDFa/eRDF

Linguagens

dadosdocumentosPOSH


xhtml*

html&xhtml


Princípios

Introdução

Resolver um problema

Partir do mais simples possível

Pensados primeiro para humanos e só depois para as máquinas

Reutilizar formatos amplamente adoptados

Modulares e para serem embebidos

Permitir e encorajar desenvolvimento, conteúdo e serviços

descentralizados

1.

2.

3.

4.

5.

6.



Introdução

hCard

hCalendar

Que formatos existem?


VoteLinks

XFN

rel-tag

rel-license

rel-nofollow

Especificações (7)


Introdução

hAtom

hResume

hReview

hAudio

Que formatos existem?


“Drafts” (9)

xfolk

adr

geo

rel-directory

rel-enclosure

rel-home

rel-payment


Show! Me! The money!

Introdução

“ ”



Introdução

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

Antes



http://andr3.net

http://andr3.net


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

Depois

Já temos um cartão de visita!(hcard)


http://andr3.net

http://andr3.net

Imaginemos...

Address Book

2 cliques

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

+

Windows Contacts


Telefones

Introdução




Imaginemos...

iCal

2 cliques

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

+Outlook

Telefones



http://shift.pt/2008/


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!

Uniformização do HTML produzido entre projectos

Permite uniformização visual (via folhas de estilo)

Efeitos secundários



Beneficiários?

Páginas Públicas Páginas Privadas

Utilizadores ou Visitantes

Serviços Externos

c/ login



Quem Publica?

...etc.




Quem Consome?


Introdução

Números (3 de Junho de 2009)

1. hCard2. hAtom3. XFN4. hCalendar5. hReview

1,390,000,000 páginas (!!!!!) 614,000,000 páginas 398,000,000 páginas 72,100,000 páginas 36,400,000 páginas


searchmonkeyid:com.yahoo.page.uf.<format>Wednesday, June 3, 2009

Introdução

E mais... RDFa




http://whit.me/googleufs

Google Rich Snippets






Google Rich Snippets HERE BE DRAGONS!






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.








+ RDFa




Introdução

Utilizador: “Como é que eu uso isso?”




Como usar?Como usar no dia-a-dia?

Como usar nos nossos sites?


Como usar?

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






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

microformatos juntando as peças do puzzle Como usar?







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

Oomph! - Microformats toolkit (Microsoft/MIX online)

http://rhizohm.net/contact.html

http://visitmix.com/Lab/Oomph

Plugin ie7+8.js em jQueryTemas em cssWindows Live Writer













Bookmarklet: Firefox, Opera, Safari, IE6, IE7https://addons.mozilla.org/en-US/firefox/addon/4106

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

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

Como usar?












Bookmarklet: Firefox, Opera, Safari, IE6, IE7https://addons.mozilla.org/en-US/firefox/addon/4106

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

Mas não só.

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

Como usar?











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

X2Vlink

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

Como usar?










X2Vlink

Magiatidy+xsl


Como usar?










X2Vlink


Magia

iCal(.ics)

tidy+xsl

Como usar?









X2Vlink


Magia

iCal(.ics)

tidy+xsl










Análogo para hCards.

hCard(s) vCards (.vcf)

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







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

QR Codehttp://reader.kaywa.com




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




http://reader.kaywa.com

http://reader.kaywa.com



code.google.com/apis/socialgraph/

blog

Interligação de perfis

Google Social Graph API



Interligação de perfis


http://workshop.andr3.net/xfnexplorer

XFN Explorer

Como usar?




Consolidação de perfis


http://lab.madgex.com/identify

Identify (by Glenn Jones)




Portabilidade dos Dados

dopplr.com





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


1. Google Feeds Archive

2. Microformatos (xfolk)

bookmarks.html RSS JSON

http://workshop.andr3.net/de.fibrillator/




Portabilidade dos Dados

http://slideshare.net/andr3/

O Fim dos utilizadores tabula rasa?

7 de Setembro de 2008






Como publicar?


Plain Old Semantic HTML

POSH

Código Validado http://validator.w3.org

Deixar de usar tabelas por motivos de apresentação, GIFs transparentes e HTML de apresentação.

Corrigir <B>ed & <BR>eakfast

1.

2.

3.

Remover links anorécticos <a name=”noticia”></a>

Usar classes com valor semântico

4.

5.

Como publicar?microformatos juntando as peças do puzzle






Design Patterns

class

reldatetime

abbr

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

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



http://andr3.net

http://andr3.net

http://andr3.net

http://andr3.net

http://andr3.net

http://andr3.net

http://andr3.net

http://andr3.net

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

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



http://andr3.net

http://andr3.net

http://andr3.net

http://andr3.net

http://andr3.net

http://andr3.net

http://andr3.net

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

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



http://andr3.net

http://andr3.net

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 86012008-10-15200810152008-10-15T10:002008-10-15T10:00+052008-10-15T10:00Z

exemplos



<div class=”vevent”> <h3 class=”category”>Brasileira</h3> <h1> <a class=”summary” href="/detalhe_evento.aspx?id=48568">

Adriana Calcanhotto - «Maré»</a></h1>

<h2><a class=”location” href="detalhe_local.aspx?id=146">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>

!

Atenção



<div class=”vevent”> <h3 class=”category”>Brasileira</h3> <h1> <a class=”summary” href="/detalhe_evento.aspx?id=48568">

Adriana Calcanhotto - «Maré»</a></h1>

<h2><a class=”location” href="detalhe_local.aspx?id=146">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>

Atenção



Padrão datetime

<abbr class=”dtstart” title=”20070312T1700-06”>12 de Março de 2007, a partir das17h</abbr>

Twenty million seventy-thousand three-hundred twelve tee seventeen-hundred dash zero six.

“”

Jaws 8 + IE 7

20 070 312 T 1700 - 06

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



http://www.webstandards.org/2007/04/27/haccessibility/

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

<span class="tel"> <span class="type">Home</span>: <span class="value">+44.415.555.122</span> </span>


http://tr.im/valueclass(experimental)


http://tr.im/valueclass


Padrão value class

<span class="tel"> <span class="type">Home</span>: <span class="value">+44.</span> (0) <span class=”value”>415.555.122</span> </span>






Padrão value class

<span class="dtstart"> <span class="value-title" title=”2009-06-03”> yesterday</span>






hCard



Propriedades

fnn*

obrigatórias

nicknameurlemailadrgeophotologosoundbday

facultativas

titleroleorgcategorynoteclasskey...

Sujar as mãos

raíz:

vcard



Exemplo

Sujar as mãos

<div class="outLine"> <div class="inBoxUtilizador"> <div class="topoUtilizador"><strong>andr3</strong></div>

<div class="info"> <div id="infopics"><a href="perfilamigo.html?uid=75"><img src="http://social.imgs.sapo.pt/8a/0b/df/75/pro_n733982142_189405_9522.jpg" border="0" /> </a></div>

...



http://social.imgs.sapo.pt/8a/0b/df/75/pro_n733982142_189405_9522.jpg




Exemplo

Sujar as mãos

<div class="outLine vcard"> <div class="inBoxUtilizador"> <div class="topoUtilizador fn nickname"><strong>andr3</strong></div>

<div class="info"> <div id="infopics"><a class= "url" href="perfilamigo.html?uid=75"><img class="photo" src="http://social.imgs.sapo.pt/8a/0b/df/75/pro_n733982142_189405_9522.jpg" border="0" /> </a></div>

...







microformatos pequenas peças do puzzle

hCalendar

pyrii

Como publicar?



Propriedades

summarydtstart

obrigatórias

dtenddurationdescriptioncategoryurllocation

rrulerdateuidgeo (latitude, longitude)...

facultativas

Sujar as mãos

raíz:

vcalendar*vevent



rel-tag

peskymac

Como publicar?



links para “tags”

Sujar as mãos



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

Sujar as mãos

Exemplo



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

Sujar as mãos

Exemplo


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


Exemplo

esta é a tagnão esta

Como publicar?


/tag/microformatos?tag=banana#split

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

Exemplo

esta é a tag



Como consumir?


HTML Scraping?

Como consumir?microformatos juntando as peças do puzzle


Parsers/Scrapers

Perl Cognition http://buzzword.org.uk/cognition/Toby Inkster

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)

(adr, geo, hatom, haudio, hcalendar, hcard, hrecipe, hresume, hreview, measure,rel-enclosure, rel-license, rel-tag, species, xfn, xfolk) + RDFa, eRDF, GRDDL, RDF/XML...



http://code.google.com/p/hkit/






Parsers/Scrapers

WS Yahoo! Query Language http://developer.yahoo.com/yql/Yahoo!

JS Sumo http://e.xu.sl.ptDan Webb


select * from microformatswhere url = ‘http://social.sapo.pt/’;




http://e.xu.sl.pt

http://e.xu.sl.pt

http://social.sapo.pt

http://social.sapo.pt

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

Sujar as mãos

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)






Obrigado.

<p class=”vcard”>

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

<a class=”email” href=”mailto:[email protected]”> [email protected]</a>

</p>

creative commonsattributionnon-commercialshare-alike 3.0

That’s all, Folks!

http://microformats.org/wiki/ http://talks.andr3.net/2009/ufs_sessions.pdfhttp://slideshare.net/andr3



http://andr3.net

http://andr3.net

mailto:[email protected]




http://talks.andr3.net/ufs_at_sapo.pdf






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/



http://www.flickr.com/photos/bitzcelt/2903751010/

http://www.flickr.com/photos/bitzcelt/2903751010/

http://flickr.com/photos/grdloizaga/817443503/

http://flickr.com/photos/grdloizaga/817443503/

http://flickr.com/photos/pyrii/2400515074/

http://flickr.com/photos/pyrii/2400515074/

http://flickr.com/photos/peskymac/1217139213/

http://flickr.com/photos/peskymac/1217139213/

Microformatos - 2009 - Juntando as Peças do Puzzle

Technology

Transcript of Microformatos - 2009 - Juntando as Peças do Puzzle