Microformatos - pequenas peças do puzzle

microformatos

André Luís

pequenas peças do puzzle

me@andr3.net

SAPO / 2 Julho 2008

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

microformatos pequenas peças do puzzle

Acto 1

Introdução

Tabelas1998

Webstandards2003

css zen garden2004

microformatos2005

RDF1999

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

- 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

utilidade

complexidade

html xml

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

Pessoa

Relações

Evento

Bookmark

Tags / Categorias

Opinião

hCalendar

rel-tag

hReview

Coisas µFormatos

Licença

Coord. geo.

Morada

Currículo

rel-license

hResume

Coisas µFormatos

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

Imaginemos...

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

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

+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

suporte.sapo.pt

Exemplo (hcard)

suporte.sapo.pt

Exemplo (hcard)

dopplr.com

Exemplo (hcard)

getsatisfaction.com

Exemplo (hcard)

netvibes.com

Exemplo (xfn)

code.google.com/apis/socialgraph/

Exemplo (xfn)

Firefox 3 créditos: Alex Faaborg

Internet Explorer 8

Webslices / hAtom

Introdução

Acto 11

Sujar as mãos

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

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

Design Patterns

reldatetime

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>

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

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

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.bbc.co.uk/blogs/radiolabs/2008/06/removing_microformats_from_bbc.shtml

Sujar as mãos

vCard + Hipertexto = hCardRFC 2426

Sujar as mãos

vCardRFC 2426

<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

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

obrigatórias

nicknameurlemailadrgeophotologosoundbday

facultativas

titleroleorgcategorynoteclasskey...

Sujar as mãos

raíz:

Exemplo

Sujar as mãos

Exemplo

Sujar as mãos

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>

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>

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>

hCalendar em tabelas...

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

headers=”time1”

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

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

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

Sujar as mãos

<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

<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

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

<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

Sujar as mãos

<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

<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

permite marcar endereços postais

Propriedades

(uma das facultativas)

obrigatórias

post-office-boxextended-addresslocalityregionpostal-codecountry-name

facultativas

Sujar as mãos

raíz:

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

Sujar as mãos

Exemplo

Sujar as mãos

marca coordenadas geográficas

Propriedades

obrigatórias

latitudelongitude

facultativas

Sujar as mãos

raíz:

Sujar as mãos

Exemplo

rel-license

Sujar as mãos

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

rel-nofollow

Sujar as mãos

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

vote-links

Sujar as mãos

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

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

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

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.

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

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

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/

Microformatos - pequenas peças do puzzle

Technology

Transcript of Microformatos - pequenas peças do puzzle

Puzzle com moedas

Anotação Semântica de Conteúdo Web Utilizando Microformatos e RDFa

CIDADANIAAR - JOGO DE PUZZLE UTILIZANDO REALIDADE ...

Microformatos - 2009 - Juntando as Peças do Puzzle

puzzle verbos colorir

Apresentação Puzzle

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

peças pequenas

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

Puzzle Alfabeto Minusculas

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.

Ao seu lado, aos preços mais baixos. · 2018. 3. 28. · Puzzle Infantl Europrice € 1 , 4 9 Carro Escala 1:64/72 Maistro € 1 , 9 Mega Set de Pintura (1 Metro ... Puzzle Infantil

Técnica del puzzle

Puzzle RBorim - Job Track

EXISTE PUZZLE DE PRÊMIO DE RISCO ACIONÁRIO (EPP

MAGIAS PEQUENAS

COISAS PEQUENAS Não subestimes o valor das pequenas coisas.

pequenas empresas

Fotos Técnica Puzzle

Pequenas Lavouras