Microformatos - 2009 - Juntando as Peças do Puzzle

microformatos

André Luís

juntando as peças do puzzle

aluis@co.sapo.pthttp://andr3.net

creative commonsattributionnon-commercialshare-alike 3.0

SAPO Sessions3 Junho 2009

Wednesday, June 3, 2009

microformatos juntando as peças do puzzle

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

pixelydixelWednesday, June 3, 2009

Documentos

bitzceltWednesday, June 3, 2009

fonte: cnn.comWednesday, June 3, 2009

fonte: everyblock.comWednesday, June 3, 2009

HTML (tabelas)1998

Webstandards2003

Introduçãomicroformatos juntando as peças do puzzle

RDF1999

A evolução da Web

Webstandards2003

microformatos2005

RDF1999

Introduçãomicroformatos juntando as peças do puzzle

HTML (tabelas)1998

A evolução da Web

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

Introdução

Semântica 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

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

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 cartão de visita!(hcard)

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

Beneficiários?

Páginas Públicas Páginas Privadas

Utilizadores ou Visitantes

Serviços Externos

c/ login

Quem Publica?

...etc.

Quem Consome?

Introdução

Números (3 de Junho de 2009)

1. hCard2. hAtom3. XFN4. hCalendar5. hReview

1,390,000,000 páginas (!!!!!) 614,000,000 páginas 398,000,000 páginas 72,100,000 páginas 36,400,000 páginas

searchmonkeyid:com.yahoo.page.uf.<format>Wednesday, June 3, 2009

Introdução

E mais... RDFa

http://whit.me/googleufs

Google Rich Snippets

Google Rich Snippets HERE BE DRAGONS!

Rich Snippets give users convenient summary information about their search results at a glance. We are currently supporting data about reviews and people. When searching for a product or service, users can easily see reviews and ratings, and when searching for a person, they’ll get help distinguishing between people with the same name. It’s a simple change to the display of search results, yet our experiments have shown that users find the new data valuable—if they see useful and relevant information from the page, they are more likely to click through.

+ RDFa

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?

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

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?

Consolidação de perfis

http://lab.madgex.com/identify

Identify (by Glenn Jones)

Portabilidade dos Dados

dopplr.com

Recuperação de Dados (Funny story...)

1. Google Feeds Archive

2. Microformatos (xfolk)

bookmarks.html RSS JSON

http://workshop.andr3.net/de.fibrillator/

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

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

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

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

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>

Atenção

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/

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/

http://www.bbc.co.uk/blogs/radiolabs/2008/06/removing_microformats_from_bbc.shtml

Padrão value class

http://tr.im/valueclass(experimental)

Padrão value class

Padrão value class

<span class="dtstart"> <span class="value-title" title=”2009-06-03”> yesterday</span>

Propriedades

obrigatórias

nicknameurlemailadrgeophotologosoundbday

facultativas

titleroleorgcategorynoteclasskey...

Sujar as mãos

raíz:

Exemplo

Sujar as mãos

Exemplo

Sujar as mãos

microformatos pequenas peças do puzzle

hCalendar

Como publicar?

Propriedades

summarydtstart

obrigatórias

dtenddurationdescriptioncategoryurllocation

rrulerdateuidgeo (latitude, longitude)...

facultativas

Sujar as mãos

raíz:

vcalendar*vevent

rel-tag

peskymac

Como publicar?

links para “tags”

Sujar as mãos

<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

Como publicar?

/tag/microformatos?tag=banana#split

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

Exemplo

esta é a tag

Como consumir?

HTML Scraping?

Como consumir?microformatos juntando as peças do puzzle

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

Parsers/Scrapers

WS Yahoo! Query Language http://developer.yahoo.com/yql/Yahoo!

JS Sumo http://e.xu.sl.ptDan Webb

select * from microformatswhere url = ‘http://social.sapo.pt/’;

Transformadores

Sujar as mãos

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

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

Obrigado.

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

<a class=”email” href=”mailto:aluis@co.sapo.pt”> aluis@co.sapo.pt</a>

creative commonsattributionnon-commercialshare-alike 3.0

That’s all, Folks!

http://microformats.org/wiki/ http://talks.andr3.net/2009/ufs_sessions.pdfhttp://slideshare.net/andr3

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 - 2009 - Juntando as Peças do Puzzle

Technology

Transcript of Microformatos - 2009 - Juntando as Peças do Puzzle

Puzzle Katalog

PUZZLE GIRLS

Actividade puzzle da imagem pief de abrantes

puzzle verbos colorir

Apresentação do PowerPoint€¦ · Completa o puzzle colando os desenhos da página seguinte. Pinta a teu gosto. . Recorta as peças do puzzle e cola-as correctamente na página

Personagens puzzle

juntando os pedaços de Lenincriseecritica.org/.../11/Juntando-os-pedaços-de-Lenin.pdf · 2017. 11. 7. · Juntando os pedaços de Lênin: Hegelianismo e materialis-mo dialético

CIDADANIAAR - JOGO DE PUZZLE UTILIZANDO REALIDADE ...

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

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

Roteiro Grim Puzzle

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

TEXTO DA TESE JUNTANDO AS PARTES

Puzzle Play Manualsoopsori.img8.kr/Toy/puzzle/puzzle.pdf · 2019-03-25 · 1. 위 메뉴얼을 프린트해서 사용하세요. 2. 실제크기와 다소 차이가 있습니다. 매뉴얼을

Tutorial Puzzle Maker

Puzzle silabas

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

MEIO DE COMUNICAÇÃO: REVISTA Na Mídia Juntando as …acosmacom.com.br/wp-content/uploads/2014/09/Clipping_book_Macom.pdf · Juntando as peças para sua comunicação MEIO DE COMUNICAÇÃO:

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

Puzzle de cubo 6