Microformatos - juntando as peças do puzzle

microformatos

André Luís

juntado as peças do puzzle

[email protected]

Codebits / 13 Novembro 2008

http://andr3.netcreative commonsattributionnon-commercialshare-alike 3.0

http://creativecommons.org/licenses/by-nc-sa/3.0/

http://andr3.net

http://andr3.net

http://andr3.net

http://andr3.net

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

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

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

HTML (tabelas)1998

Webstandards2003

2008

Introduçãomicroformatos juntando as peças do puzzle

RDF1999

A evolução da Web

Zeldman: Designing with webstandardsPOSHRDF: resource description frameworkSTANDARDS EXISTEM HÁ MAIS TEMPO: html4(1999), xhtml1.0 (2000), css2.0(1998)

Webstandards2003

microformatos2005

RDF1999

2008

Introduçãomicroformatos juntando as peças do puzzle

HTML (tabelas)1998

A evolução da Web

Zeldman: Designing with webstandardsPOSHRDF: resource description frameworkSTANDARDS 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.

Introdução

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

“

”


Toby Inkster, developer do Cognition



Introdução

=

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.definição: 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


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

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.


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

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

More on this later. :)

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


SIMPLES é possível publicar sem ter conhecimentos de semântica (ontologias, namespaces, rdf, etc.)DRY

Beneficiários?

Páginas Públicas Páginas Privadas

Utilizadores ou Visitantes

Serviços Externos

c/ login


quem beneficia?Serviços Externos = APIs com fácil deployment

Quem Publica?

...etc.


SPOT (hcards), Blogs (tags)


searchmonkeyid:com.yahoo.uf.<format>

Introdução

+MIL MILHOES[ 366, 277, 48, 53 ] milhoes

Introdução

Números (21 de Outubro de 2008)

1. hCard2. hAtom3. XFN4. hCalendar5. hReview

1,390,000,000 páginas (!!!!!) 366,000,000 páginas 277,000,000 páginas 48,900,000 páginas 53,900,000 páginas


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

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?

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











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



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

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?




Portabilidade dos Dados

dopplr.com




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


class - o mais usualrel - usando no xfn, rel-*abbr, que engloba o polémico datetimeinclude, 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

<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


hatom, hcalendar, hcard e hreviewoverview: http://www.cl.cam.ac.uk/~mgk25/iso-time.html+5 => GMT+5Z => 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>

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/


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.

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




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-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="/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>


From SAPO Cultura

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

hCard


Propriedades

fnn*

obrigatórias

nicknameurlemailadrgeophotologosoundbday

facultativas

titleroleorgcategorynoteclasskey...

Sujar as mãos

raíz:

vcard


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

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>

...


from SAPO Spot

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>

...


from SAPO Spot






Como consumir?

HTML Scraping?

Como consumir?microformatos juntando as peças do puzzle

retornam objectos extraídos das páginashkit - jan 2008 - hcard+xfncognition - 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,figure, 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

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/






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

microformatos juntando as peças do puzzle Como consumir?












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/2008/ufs_codebits.pdfhttp://slideshare.net/andr3


http://creativecommons.org/licenses/by-nc-sa/2.5/pt/

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

Technology

Transcript of Microformatos - juntando as peças do puzzle