Microformatos - pequenas peças do puzzle

microformatos

André Luís

pequenas peças do puzzle

[email protected]

SAPO / 2 Julho 2008

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

http://andr3.net

http://andr3.net

http://andr3.net

http://andr3.net

microformatos pequenas peças do puzzle

Acto 1

Introdução


Tabelas1998

Webstandards2003

css zen garden2004

microformatos2005

RDF1999

2008

html html semânticohtml/xhtml + css

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.

microformatos pequenas peças do puzzle Introdução

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

“

”

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

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

- Eu gosto de bolos.

- eu <3 bolos.

- bolos FTW!!!


Valor semântico


Web Semântica vs. web semântica

RDF, OWL,FOAF, etc. microformatos

GRDDLRDF: circa 1999

2005

2007


utilidade

complexidade

rdf

html xml

µf

Introdução

Princípios Mandamentos


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.

Pessoa

Relações

Evento

Bookmark

Tags / Categorias

Opinião


hCard

XFN

hCalendar

xFolk

rel-tag

hReview

Coisas µFormatos

Licença

Coord. geo.

Morada

Currículo


rel-license

geo

adr

hResume

Coisas µFormatos


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

http://andr3.net

http://andr3.net


Imaginemos...

iCal

2 cliques

http://shift.pt/2008/

+Outlook




Imaginemos...

Address Book

2 cliques

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

+Windows Contacts




Imaginemos...

Address Book2 cliques


+Empowering the lazy web.“ ”

mas não só...


Mais vantagens...

Uniformização do HTML produzido

Uniformização visual (via folhas de estilo)

Portabilidade de conteúdos (dados)

Baixo esforço de implementação

Aumento da utilidade dos serviços!


Beneficiários?

Páginas Públicas Páginas Privadas c/ login

Utilizadores ou Visitantes

Serviços Externos

Introdução


Quem Publica?

Introdução

SAPO - last.fm - twitter - Yahoo! Localma.gnolia - Blogger - Technorati

eventful - LinkedIn - hi5 - Powncedel.icio.us - Upcoming - Dopplr

Google Maps - BBC - Mahalo - etc.


Números (10 de Junho de 2008)

1. hCard — 1,150,000,000 páginas (!!!!!)2. hAtom — 304,000,000 páginas3. XFN — 261,000,000 páginas4. hCalendar — 84,700,000 páginas5. hReview — 43,300,000 páginas

searchmonkeyid:com.yahoo.uf.<format>


Exemplos

Introdução


suporte.sapo.pt

Exemplo (hcard) powered by Operator http://tinyurl.com/2b8m54



https://addons.mozilla.org/en-US/firefox/addon/4106

https://addons.mozilla.org/en-US/firefox/addon/4106


suporte.sapo.pt

Exemplo (hcard)




dopplr.com

Exemplo (hcard)




getsatisfaction.com

Exemplo (hcard)




netvibes.com

Exemplo (xfn)


code.google.com/apis/socialgraph/

Exemplo (xfn)

blog


Firefox 3 créditos: Alex Faaborg


Internet Explorer 8

Webslices / hAtom


?

Introdução


Acto 11

Sujar as mãos


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.





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

Design Patterns

class

reldatetime

abbr

include


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

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

Polémico!

2008-10-15200810152008-10-15T10:002008-10-15T10:00+052008-10-15T10:00Z

exemplos


Padrão datetime

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

Polémico!

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




hCard

Sujar as mãos


vCard + Hipertexto = hCardRFC 2426

Sujar as mãos


vCardRFC 2426

hCard

<p class="vcard"><a class="url fn"href="http://www.tantek.com/" lang="tr">Tantek Çelik</a></p>

BEGIN:VCARDPRODID:-//kaply.com//Operator 0.8//ENVERSION:3.0N;CHARSET=UTF-8:Çelik;Tantek;;;FN;CHARSET=UTF-8:Tantek ÇelikUID:URL:http://www.tantek.com/END:VCARD

Sujar as mãos

http://www.tantek.com





perfeito para descrever pessoas

Sujar as mãos


perfeito para descrever organizações

Sujar as mãos


perfeito para descrever locais

Sujar as mãos


perfeito para descrever qualquer coisacom nome?

Sujar as mãos


Candidatos

Sujar as mãos

...qualquer serviço com “User-Generated-Content”.


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>

...






?


hCalendar

Sujar as mãos


iCalendar + Hipertexto = hCalendarRFC 2445

Sujar as mãos


iCalendarRFC 2445

BEGIN:VCALENDARPRODID:X-WR-CALNAME:VERSION:2.0METHOD:PUBLISHBEGIN:VEVENTDESCRIPTION;CHARSET=UTF-8:Nesta formação vamos introduzir o conceito(...)SUMMARY;CHARSET=UTF-8:Formação MicroformatosUID:DTSTART;VALUE=DATE-TIME:20080702T080000ZDTEND;VALUE=DATE-TIME:20080702T120000ZEND:VEVENTEND:VCALENDAR

Sujar as mãos


hCalendar

<ul class="vcalendar"> <li class="vevent"> <h2 class="summary">Formação Microformatos</h2> <dl> <dt>Quando</dt> <dd>Desde as<abbr class="dtstart" title="2008-07-02T09:00+01:00">9h da manhã</abbr> até à<abbr class="dtend" title="2008-07-02T13:00+01:00">uma da tarde</abbr>do dia 2 de Julho</dd> <dt>Resumo</dt> <dd class="description"> Nesta formação vamos introduzir o conceito (...) </dd> </dl> </ul>

Sujar as mãos


perfeito para descrever um evento

Sujar as mãos


perfeito para descrever vários eventos

Sujar as mãos


Candidatos

Sujar as mãos

...qualquer serviço com dados relevantes de seremadicionados a um calendário pessoal.

concertos exposições conferências reuniões


Propriedades

summarydtstart

obrigatórias

dtenddurationdescriptioncategoryurllocation

rrulerdateuidgeo (latitude, longitude)...

facultativas

Sujar as mãos

raíz:

vcalendar*vevent


Exemplo

Sujar as mãos

<div> <h3>Brasileira</h3> <h1> <a href="/detalhe_evento.aspx?id=48568">

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

<h2><a href="detalhe_local.aspx?id=146">Coliseu do Porto</a></h2>

<h3>29-05-2008a 30-05-2008</h3></div>


Exemplo

Sujar as mãos

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


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

!


Exemplo

Sujar as mãos

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


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


hCalendar em tabelas...

http://adactio.com/extras/schedules/web2expo-berlin/





<th id=”time1” scope=”row” axis=”time”>

headers=”time1”






<th id=”location1” scope=”column” axis=”location”>

headers=”location1 time3”

headers=”location1 time1”





Ajuda!

http://dmitry.baranovskiy.com/work/csc/




?


XFN - XHTML Friends Network

Sujar as mãos


descreve relações entre pessoas usando links

Sujar as mãos


XFN

<a href=”http://andr3.net/”>Meu Blog<a>

<a href=”http://blog.centopeia.com”>Pedro Custódio</a>

<a href=”http://brunoluis.com”>Meu Irmão</a>

...

Sujar as mãos

http://andr3.net

http://andr3.net

http://blog.centopeia.com


http://brunoluis.com



XFN

<a rel=”me” href=”http://andr3.net/”>Meu Blog<a>

<a rel=”friendcolleague met” href=”http://blog.centopeia.com”>Pedro Custódio</a>

<a rel=”friend sibling met” href=”http://brunoluis.com”>Meu Irmão</a>

...

Sujar as mãos

http://andr3.net

http://andr3.net






XFN

<a rel=”me friend met” href=”http://andr3.net/”>Esquizofrénico<a>

<a rel=”me crush” href=”http://andr3.net/”>Narcisista<a>

...

Sujar as mãos

http://andr3.net

http://andr3.net

http://andr3.net

http://andr3.net


XFN - Valores possíveis

Sujar as mãos

Amizade: (mutuamente exclusivo)contact

alguém com quem pode entrar em contacto. (normalmente simétrico)acquaintance

alguém que se conhece, cumprimenta-se mas pouco mais. (normalmente simétrico)friend

um amigo. (normalmente simétrico)

Físico:

metalguém que já se conheceu em pessoa. (normalmente simétrico)


XFN - Valores possíveis (cont.)

Sujar as mãos

Profissional:

co-workeralguém com quem se trabalha ou trabalha na mesma organização. (simétrico, normalmente transitivo)

colleaguealguém que trabalha na mesma área. (simétrico, normalmente transitivo)

Geográfica: (mutuamente exclusivo)

co-residentalguém com quem se partilha a morada. (simétrico e transitivo)

neighborum vizinho (simétrico, normalmente transitivo)



Sujar as mãos

Família: (mutuamente exclusivo)

childum filho. (inverso de parent)

parentpai/mãe. (inverso de child)

siblingirmão/irmã. (simétrico, normalmente transitivo)

Romântica:

musealguém que serve de inspiração(não tem inverso)

crushalguém por quem se tem uma paixão.(não tem inverso)

spousecônjuge. (simétrico, não transitivo)

kinfamiliar. (simétrico, normalmente transitivo)

dateNamorado/namorada. (simétrico, não transitivo)

sweetheartalguém com quem se tem uma relação íntima, tipicamente exclusiva. (simétrico, não transitivo)



Sujar as mãos

Identidade:

meum link para si mesmo, num URL diferente. Exclusivo com todos os outros valores. (obrigatoriamente simétrico)

http://www.gmpg.org/xfn/and/#mememe




XFN - Data Portability

Sujar as mãos

me + contactcom links para outros perfis do utilizador marcados com rel=”me” e links para outros contactos com rel=”contact” é o suficiente para permitir a portabilidade [1] do Grafo Social [2] dos utilizadores.

1 http://www.dataportability.org2 http://bradfitz.com/social-graph-problem/






Candidatos

Sujar as mãos


?


hAtom (draft)

Sujar as mãos


descreve conteúdo em série

Sujar as mãos


hmmmmmm.....

Sujar as mãos


descreve conteúdo que possa ter vários “episódios”

Sujar as mãos


conteúdo que evolua no tempo!

Sujar as mãos


posts em blogsregistos de actividade (spot)caixas de recados (shoutbox)...qualquer_coisa que ocorra várias vezesmas não justifique RSS...

Sujar as mãos


Candidatos

Sujar as mãos

...qualquer serviço com conteúdo em “série”.


Propriedades

entry-titleupdated

obrigatórias

entry-contententry-summarypublishedauthor (com vcard)bookmarktags

facultativas

Sujar as mãos

raíz:

hfeed*hentry


hAtom

<div> <h2> <a href="/blog/post/1">Hello World!</a> </h2> <p>Hello! (...)</p> <p>por André Luís,às 20h de 16 de Junho

</p>

Sujar as mãos


hAtom

<div class=”hentry”> <h2 class=”entry-title”> <a class=”bookmark” href="/blog/post/1">Hello World!</a> </h2> <p class=”entry-content”>Hello! (...)</p> <p class=”author vcard”>por <span class=”fn”>André Luís</span>, às <abbr class=”published” title=”2008-06-16T20:00+00:00”> 20h de 16 de Junho </abbr> </p>

Sujar as mãos


hAtom + Webslice

<div class=”hentry hslice” id=”id_qualquer”> <h2 class=”entry-title”> <a class=”bookmark” href="/blog/post/1">Hello World!</a> </h2> <p class=”entry-content”>Hello! (...)</p> <p class=”author vcard”>por <span class=”fn”>André Luís</span>, às <abbr class=”published” title=”2008-06-16T20:00+00:00”> 20h de 16 de Junho </abbr> </p>

Sujar as mãos

http://msdn.microsoft.com/en-us/library/cc304073(VS.85).aspx




?


rel-tag

Sujar as mãos


links para “tags”

Sujar as mãos


Candidatos

Sujar as mãos

...qualquer serviço com conteúdo “categorizável”.


<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

/tag/microformatos?tag=banana#split


Exemplo

esta é a tag


Aplicações?

Sujar as mãos

User-Profiling?

Procurar conteúdo relacionado?

Pesquisa?


?


adr, geo, rel-license, rel-nofollow, vote-links

Sujar as mãos


adr

Sujar as mãos

permite marcar endereços postais


Propriedades

(uma das facultativas)

obrigatórias

post-office-boxextended-addresslocalityregionpostal-codecountry-name

facultativas

Sujar as mãos

raíz:

adr


<p class=”adr”>Eu vivo em<span class=”locality”>Lisboa</span>,<span class=”country-name”>Portugal</span></p>

Sujar as mãos

Exemplo


geo

Sujar as mãos

marca coordenadas geográficas


Propriedades

obrigatórias

latitudelongitude

facultativas

Sujar as mãos

raíz:

geo


<div class="geo">GEO: <span class="latitude">37.386013</span>, <span class="longitude">-122.082932</span></div>

Sujar as mãos

Exemplo


rel-license

Sujar as mãos

aponta para uma página quedescreve a licença utilizada

<a rel=”license” href=”http://creativecommons.org/licenses/by/2.0/”>cc by 2.0</a>

http://creativecommons.org/licenses/by/2.0/





rel-nofollow

Sujar as mãos

avisa os crawlers de motores de pesquisapara não seguirem este link

<a rel=”nofollow” href=”http://viagra.buy.com”>my page</a>




vote-links

Sujar as mãos

porque nem todos os links são de concordância,marca links como “a favor” ou “contra”

<a rev=”vote-for” href=”http://www.sapo.pt”>yay</a>

<a rev=”vote-against” href=”http://www.riaa.com”>nay</a>






?


ferramentas

Sujar as mãos


Para utilizadores comuns

Sujar as mãos

Firefox Operator https://addons.mozilla.org/en-US/firefox/addon/4106Michael Kaply (IBM)

Firefox Tails Export https://addons.mozilla.org/en-US/firefox/addon/2240Robert de Bruin

Safari Plugin http://zappatic.net/safarimicroformats/?

* Bookmarklet http://leftlogic.com/lounge/articles/microformats_bookmarklet

Remy Sharp

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









Parsers

Sujar as mãos

PHP hKit http://code.google.com/p/hkit/Drew McLellan

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

WS Optimus http://microformatique.com/optimus/Dmitry Baranovskiy

Javascript Sumo http://danwebb.net/Dan Webb










Transformadores

Sujar as mãos

hCard+hCal X2V http://suda.co.uk/projects/X2V/Brian Suda (disponibiliza .xsl’s)

hCal Technorati http://technorati.com/events/Toby Inkster

vários + RDF TransFormr http://transformr.co.uk/Martin McEvoy (com download para PHP)








?


Acto 111

Demos

microformatos pequenas peças do puzzle Demos

1. Last.fm + Google Maps

2. Adicionar contactos ao SAPO Mail

2. Adicionar ao calendário um programa de conf.

3. Blog + Flickr

4. Criar conta no GetSatisfaction


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 2.5

That’s all, Folks!

http://trac.intra.sapo.pt/quality/wiki/tecnica/microformatoshttp://talks.andr3.net/2008/ufs_at_sapo.pdf

http://andr3.net

http://andr3.net

mailto:[email protected]




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





Créditos

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

Calendário - http://flickr.com/photos/pyrii/2400515074/

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

Ferramentas - http://flickr.com/photos/tomtec/178177044/

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/




Microformatos - pequenas peças do puzzle

Technology

Transcript of Microformatos - pequenas peças do puzzle