Microformatos - juntando as peças do puzzle

microformatos

André Luís

juntado as peças do puzzle

me@andr3.net

Codebits / 13 Novembro 2008

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

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

microformatos juntando as peças do puzzle

Antes de mais...

As minhas tags!

CSS Javascript XHTML HTML PHP

Microformatos OpenID Mobile

Dan Cederholm http://simplebits.com

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.

fonte: cnn.com

fonte: everyblock.com

HTML (tabelas)1998

Webstandards2003

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

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

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.

infinitos namespaces

Introdução

RDFOWL, FOAF, etc.

infinitos namespaces número de formatos: < 20

Introdução

RDFOWL, FOAF, etc.

infinitos namespaces número de formatos: < 20

semântica

complexidade

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

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

Introdução

hCalendar

Que formatos existem?

VoteLinks

rel-tag

rel-license

rel-nofollow

Especificações (7)

Introdução

hResume

hReview

hAudio

Que formatos existem?

“Drafts” (9)

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>

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

Imaginemos...

Address Book

2 cliques

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

Windows Contacts

Telefones

Introdução

Imaginemos...

2 cliques

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

+Outlook

Telefones

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

iCal(.ics)

tidy+xsl

Como usar?

X2Vlink

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.

code.google.com/apis/socialgraph/

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

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

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

Usar classes com valor semântico

Como publicar?microformatos juntando as peças do puzzle

Design Patterns

reldatetime

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>

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)

Padrão rel

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

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>

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.

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

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>

From SAPO Cultura

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

Propriedades

obrigatórias

nicknameurlemailadrgeophotologosoundbday

facultativas

titleroleorgcategorynoteclasskey...

Sujar as mãos

raíz:

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

from SAPO Spot

Exemplo

Sujar as mãos

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

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.

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

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/

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

Technology

Transcript of Microformatos - juntando as peças do puzzle

Pt Wpe0035 the 4k Puzzle

Microformatos - 2009 - Juntando as Peças do Puzzle

Apresentação Puzzle

Puzzle de cubo 6

Tutorial Puzzle Maker

CIDADANIAAR - JOGO DE PUZZLE UTILIZANDO REALIDADE ...

Puzzle Katalog

PUZZLE Constrói o puzzle dePUZZLE CALENDÁRIO cumpre um pequeno gesto de do ADVENTO Obras Missionárias Pontifícias Este Advento traz-te um desafio. Corta a página ao meio e recorta

Puzzle League - Tetris Attack

Microformatos - pequenas peças do puzzle

Relatório Final O Puzzle da Educação: diferentes ... · O Puzzle da Educação: diferentes intervenientes, contextos, aprendizagens ... em especial à Mafalda, Eden, Nuno e Francisco,

Puzzle RBorim - Job Track

Técnica del puzzle

PUZZLE GIRLS

Sessão 5 niveis de consciência & 5 peças do puzzle da vida

Personagens puzzle

DVD Multimédia Ogima - Ajuda - madeira-edu.pt · 4. Na primeira utilização deste DVD, na execução das atividades (Puzzle Colorido, Puzzle Preto e Branco, Sequências e Sopa de

GLOSARIO BIBLIOTECAS 2019sep.hidalgo.gob.mx/content/estadistica_basica/cuestionario912/GLOSARIO... · microformatos, mapas, globos terráqueos, juegos didácticos, etcétera) y de

puzzle verbos colorir

ANDORRA CON NIÑOS - Puzzle Viajesguía de Puzzle Viajes, estará en el hotel para darnos la bienvenida y ayudarnos con el reparto de habitaciones. 14.00hrs. Almuerzo en el hotel.