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

microformatos juntando as peças do puzzle Olá!

microformatos juntando as peças do puzzle As minhas tags! CSS Javascript XHTML HTML PHP Microformatos OpenID Mobile

microformatos juntando as peças do puzzle

microformatos juntando as peças do puzzle Dan Cederholm http://simplebits.com

microformatos juntando as peças do puzzle Introdução Como usar? Como publicar? Como consumir?

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

microformatos juntando as peças do puzzle Introdução Documentos bitzcelt No principio, uma teia de documentos.

microformatos juntando as peças do puzzle Introdução Dados fonte: cnn.com

microformatos juntando as peças do puzzle Introdução Dados fonte: everyblock.com

microformatos juntando as peças do puzzle Introdução 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)

microformatos juntando as peças do puzzle Introdução 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)

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 Toby Inkster, developer do Cognition

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; = 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;

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

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

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

microformatos juntando as peças do puzzle Introdução Linguagens semântica RDF RDFa/eRDF xhtml* µf html&xhtml dados POSH documentos HTML complexidade

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 falar do “The Process”. -----------25%---------

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

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

microformatos juntando as peças do puzzle Introdução “ Show! Me! The money!”

microformatos juntando as peças do puzzle Introdução Antes <p> <a href=”http://andr3.net”>André Luís</a> </p>

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 hCard! More on this later. :)

microformatos juntando as peças do puzzle Introdução Imaginemos... Windows Contacts + 2 cliques Address Book http://www.blueflavor.com/people/keith-robinson/ Telefones

microformatos juntando as peças do puzzle Introdução Imaginemos... Outlook + 2 cliques iCal http://shift.pt/page/schedule/ Telefones

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

microformatos juntando as peças do puzzle Introdução 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

microformatos juntando as peças do puzzle Introdução Quem Publica? ...etc. SPOT (hcards), Blogs (tags)

microformatos juntando as peças do puzzle Introdução searchmonkeyid:com.yahoo.uf.<format> +MIL MILHOES [ 366, 277, 48, 53 ] milhoes

microformatos juntando as peças do puzzle Introdução 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

microformatos juntando as peças do puzzle Introdução Utilizador: “Como é que eu uso isso?”

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

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/

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

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/ -----------50%---------

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

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>

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>

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>

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)

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 Ajudamos o resto dos utilizadores com links para ﬁcheiros transformados. Apenas se altera o HTML.

microformatos juntando as peças do puzzle Como usar? Interligação de perﬁs blog Google Social Graph API code.google.com/apis/socialgraph/ quem beneﬁcia? Serviços Externos = APIs com fácil deployment

microformatos juntando as peças do puzzle Como usar? Interligação de perﬁs XFN Explorer http://workshop.andr3.net/xfnexplorer quem beneﬁcia? Serviços Externos = APIs com fácil deployment

microformatos juntando as peças do puzzle Como usar? Portabilidade dos Dados dopplr.com

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/

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

microformatos juntando as peças do puzzle Como publicar? 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

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

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>

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>

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>

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)

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>

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 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é)

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

microformatos juntando as peças do puzzle Como publicar? BBC http://www.bbc.co.uk/blogs/radiolabs/2008/06/removing_microformats_from_bbc.shtml

microformatos juntando as peças do puzzle Como publicar? 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.

microformatos juntando as peças do puzzle Como publicar? 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.

microformatos juntando as peças do puzzle Como publicar? 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.

microformatos juntando as peças do puzzle Sujar as mãos Exemplo <div class=\"outLine\"> <div class=\"inBoxUtilizador\"> <div class=\"topoUtilizador\"><strong>andr3</strong></div> <div class=\"info\"> <div id=\"infopics\"><a href=\"perﬁlamigo.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

microformatos juntando as peças do puzzle Sujar as mãos Exemplo <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=\"perﬁlamigo.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

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

microformatos juntando as peças do puzzle Como consumir? 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) 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

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

microformatos juntando as peças do puzzle Como consumir? 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 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

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: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/

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/

Microformatos - juntando as peças do puzzle

1 comments

Notes on slide 1

4 Favorites & 1 Event