Microformats
a web semântica
com letra minúscula
Elcio Ferreira
elcio@visie.com.br
visie.com.br

tableless.com.br
elcio.com.br
visie.com.br

Padrões são legais

São libertadores

São acopláveis

Adoção exponencial

usuários
tempo

usuários
tempo

usuários
Barulhentos
tempo

As Webs Semânticas

A Web Semântica
(com letra maiúscula)

interessante

complexa

possível?

A web semântica
(com letra minúscula)

interessante

simples

possível hoje

O plano

Iniciando

Use o seu
XHTML atual

<h2>Sobre mim</h2>
<ul>
<li><img style=\"float:left; margin-right:4px\"
src=\"http://elcio.com.br/imagens/elcio.jpg\"
alt=\"photo\"/>
<a href=\"http://elcio.com.br\">Elcio Luiz
Ferreira</a></li>
<li>Visie Padrões Web (<a
href=\"http://visie.com.br\">visie.com.br</a>)</li>
<li><a href=\"mailto:elcio arroba visie.com.br\">
elcio arroba visie.com.br</a></li>
<li>
<div>Rua Onofre da Silveira, 574</div>
São Paulo, SP, 04304-010 Brasil
<span>lat: -23.626550, long: -46.639785</span>
</li>
<li>11-3477-3347</li>
</ul>

Acrescente significado

<h2>Sobre mim</h2>
<ul>
<li><img style=\"float:left; margin-right:4px\"
src=\"http://elcio.com.br/imagens/elcio.jpg\"
alt=\"photo\"/>
<a href=\"http://elcio.com.br\">Elcio Luiz
Ferreira</a></li>
<li>Visie Padrões Web (<a
href=\"http://visie.com.br\">visie.com.br</a>)</li>
<li><a href=\"mailto:elcio arroba visie.com.br\">
elcio arroba visie.com.br</a></li>
<li>
<div>Rua Onofre da Silveira, 574</div>
São Paulo, SP, 04304-010 Brasil
<span>lat: -23.626550, long: -46.639785</span>
</li>
<li>11-3477-3347</li>
</ul>

<ul>
<li><img style=\"float:left; margin-right:4px\"
src=\"http://elcio.com.br/imagens/elcio.jpg\"
alt=\"photo\"/>
<a href=\"http://elcio.com.br\">
<span>Elcio</span>
<span>Luiz </span>
<span>Ferreira</span>
</a></li>
<li>Visie Padrões Web (<a
href=\"http://visie.com.br\">visie.com.br</a>)</li>
<li><a href=\"mailto:elcio arroba visie.com.br\">
elcio arroba visie.com.br</a></li>
<li>
<div>Rua Onofre da Silveira, 574</div>
<span>São Paulo</span>,
<span>SP</span>,
<span>04304-010</span>
<span>Brasil</span>
<span>
lat: <span>-23.626550,</span>
long: <span>-46.639785</span>
</span>
</li>
<li>11-3477-3347</li>
</ul>

<ul>
<li><img style=\"float:left; margin-right:4px\"
src=\"http://elcio.com.br/imagens/elcio.jpg\"
alt=\"photo\"/>
<a href=\"http://elcio.com.br\">
<span>Elcio</span>
<span>Luiz </span>
<span>Ferreira</span>
</a></li>
<li>Visie Padrões Web (<a
href=\"http://visie.com.br\">visie.com.br</a>)</li>
<li><a href=\"mailto:elcio arroba visie.com.br\">
elcio arroba visie.com.br</a></li>
<li>
<div>Rua Onofre da Silveira, 574</div>
<span>São Paulo</span>,
<span>SP</span>,
<span>04304-010</span>
<span>Brasil</span>
<span>
lat: <span>-23.626550,</span>
long: <span>-46.639785</span>
</span>
</li>
<li>11-3477-3347</li>
</ul>

<ul class=”vcard”>
<li><img style=\"float:left; margin-right:4px\"
src=\"http://elcio.com.br/imagens/elcio.jpg\"
alt=\"photo\"/>
<a href=\"http://elcio.com.br\">
<span>Elcio</span>
<span>Luiz </span>
<span>Ferreira</span>
</a></li>
<li>Visie Padrões Web (<a
href=\"http://visie.com.br\">visie.com.br</a>)</li>
<li><a href=\"mailto:elcio arroba visie.com.br\">
elcio arroba visie.com.br</a></li>
<li>
<div>Rua Onofre da Silveira, 574</div>
<span>São Paulo</span>,
<span>SP</span>,
<span>04304-010</span>
<span>Brasil</span>
<span>
lat: <span>-23.626550,</span>
long: <span>-46.639785</span>
</span>
</li>
<li>11-3477-3347</li>
</ul>

<ul class=”vcard”>
<li><img style=\"float:left; margin-right:4px\"
src=\"http://elcio.com.br/imagens/elcio.jpg\"
alt=\"photo\" class=”photo”/>
<a href=\"http://elcio.com.br\" class=”url fn n”>
<span class=”given-name”>Elcio</span>
<span class=”additional-name”>Luiz </span>
<span class=”family-name”>Ferreira</span>
</a></li>
<li>Visie Padrões Web (<a
href=\"http://visie.com.br\">visie.com.br</a>)</li>
<li><a href=\"mailto:elcio arroba visie.com.br\">
elcio arroba visie.com.br</a></li>
<li>
<div>Rua Onofre da Silveira, 574</div>
<span>São Paulo</span>,
<span>SP</span>,
<span>04304-010</span>
<span>Brasil</span>
<span>
lat: <span>-23.626550,</span>
long: <span>-46.639785</span>
</span>
</li>
<li>11-3477-3347</li>
</ul>

<ul class=”vcard”>
<li><img style=\"float:left; margin-right:4px\"
src=\"http://elcio.com.br/imagens/elcio.jpg\"
alt=\"photo\" class=”photo”/>
<a href=\"http://elcio.com.br\" class=”url fn n”>
<span class=”given-name”>Elcio</span>
<span class=”additional-name”>Luiz </span>
<span class=”family-name”>Ferreira</span>
</a></li>
<li class=”org”>Visie Padrões Web (<a
href=\"http://visie.com.br\">visie.com.br</a>)</li>
<li><a class=”email” href=\"mailto:elcio arroba visie.com.br\">
elcio arroba visie.com.br</a></li>
<li class=”adr”>
<div>Rua Onofre da Silveira, 574</div>
<span>São Paulo</span>,
<span>SP</span>,
<span>04304-010</span>
<span>Brasil</span>
<span>
lat: <span>-23.626550,</span>
long: <span>-46.639785</span>
</span>
</li>
<li>11-3477-3347</li>
</ul>

<ul class=”vcard”>
<li><img style=\"float:left; margin-right:4px\"
src=\"http://elcio.com.br/imagens/elcio.jpg\"
alt=\"photo\" class=”photo”/>
<a href=\"http://elcio.com.br\" class=”url fn n”>
<span class=”given-name”>Elcio</span>
<span class=”additional-name”>Luiz </span>
<span class=”family-name”>Ferreira</span>
</a></li>
<li class=”org”>Visie Padrões Web (<a
href=\"http://visie.com.br\">visie.com.br</a>)</li>
<li><a class=”email” href=\"mailto:elcio arroba visie.com.br\">
elcio arroba visie.com.br</a></li>
<li class=”adr”>
<div class=”street-address”>Rua Onofre da Silveira, 574</div>
<span class=”locality”>São Paulo</span>,
<span class=”region”>SP</span>,
<span class=”postal-code”>04304-010</span>
<span class=”country-name”>Brasil</span>
<span>
lat: <span>-23.626550,</span>
long: <span>-46.639785</span>
</span>
</li>
<li>11-3477-3347</li>
</ul>

<ul class=”vcard”>
<li><img style=\"float:left; margin-right:4px\"
src=\"http://elcio.com.br/imagens/elcio.jpg\"
alt=\"photo\" class=”photo”/>
<a href=\"http://elcio.com.br\" class=”url fn n”>
<span class=”given-name”>Elcio</span>
<span class=”additional-name”>Luiz </span>
<span class=”family-name”>Ferreira</span>
</a></li>
<li class=”org”>Visie Padrões Web (<a
href=\"http://visie.com.br\">visie.com.br</a>)</li>
<li><a class=”email” href=\"mailto:elcio arroba visie.com.br\">
elcio arroba visie.com.br</a></li>
<li class=”adr”>
<div class=”street-address”>Rua Onofre da Silveira, 574</div>
<span class=”locality”>São Paulo</span>,
<span class=”region”>SP</span>,
<span class=”postal-code”>04304-010</span>
<span class=”country-name”>Brasil</span>
<span>
lat: <span>-23.626550,</span>
long: <span>-46.639785</span>
</span>
</li>
<li class=”tel”>11-3477-3347</li>
</ul>

<ul class=”vcard”>
<li><img style=\"float:left; margin-right:4px\"
src=\"http://elcio.com.br/imagens/elcio.jpg\"
alt=\"photo\" class=”photo”/>
<a href=\"http://elcio.com.br\" class=”url fn n”>
<span class=”given-name”>Elcio</span>
<span class=”additional-name”>Luiz </span>
<span class=”family-name”>Ferreira</span>
</a></li>
<li class=”org”>Visie Padrões Web (<a
href=\"http://visie.com.br\">visie.com.br</a>)</li>
<li><a class=”email” href=\"mailto:elcio arroba visie.com.br\">
Ahá! Temos hCard!
elcio arroba visie.com.br</a></li>
<li class=”adr”>
<div class=”street-address”>Rua Onofre da Silveira, 574</div>
<span class=”locality”>São Paulo</span>,
<span class=”region”>SP</span>,
<span class=”postal-code”>04304-010</span>
<span class=”country-name”>Brasil</span>
<span>
lat: <span>-23.626550,</span>
long: <span>-46.639785</span>
</span>
</li>
<li class=”tel”>11-3477-3347</li>
</ul>

<ul class=”vcard”>
<li><img style=\"float:left; margin-right:4px\"
src=\"http://elcio.com.br/imagens/elcio.jpg\"
alt=\"photo\" class=”photo”/>
<a href=\"http://elcio.com.br\" class=”url fn n”>
<span class=”given-name”>Elcio</span>
<span class=”additional-name”>Luiz </span>
<span class=”family-name”>Ferreira</span>
</a></li>
<li class=”org”>Visie Padrões Web (<a
href=\"http://visie.com.br\">visie.com.br</a>)</li>
<li><a class=”email” href=\"mailto:elcio arroba visie.com.br\">
elcio arroba visie.com.br</a></li>
<li class=”adr”>
<div class=”street-address”>Rua Onofre da Silveira, 574</div>
<span class=”locality”>São Paulo</span>,
<span class=”region”>SP</span>,
<span class=”postal-code”>04304-010</span>
<span class=”country-name”>Brasil</span>
<span class=”geo”>
lat: <span class=”latitude”>-23.626550,</span>
long: <span class=”longitude”>-46.639785</span>
</span>
</li>
<li class=”tel”>11-3477-3347</li>
</ul>

<ul class=”vcard”>
<li><img style=\"float:left; margin-right:4px\"
src=\"http://elcio.com.br/imagens/elcio.jpg\"
alt=\"photo\" class=”photo”/>
<a href=\"http://elcio.com.br\" class=”url fn n”>
<span class=”given-name”>Elcio</span>
<span class=”additional-name”>Luiz </span>
<span class=”family-name”>Ferreira</span>
</a></li>
<li class=”org”>Visie Padrões Web (<a
href=\"http://visie.com.br\">visie.com.br</a>)</li>
<li><a class=”email” href=\"mailto:elcio arroba visie.com.br\">
E agora Geo!
elcio arroba visie.com.br</a></li>
<li class=”adr”>
<div class=”street-address”>Rua Onofre da Silveira, 574</div>
<span class=”locality”>São Paulo</span>,
<span class=”region”>SP</span>,
<span class=”postal-code”>04304-010</span>
<span class=”country-name”>Brasil</span>
<span class=”geo”>
lat: <span class=”latitude”>-23.626550,</span>
long: <span class=”longitude”>-46.639785</span>
</span>
</li>
<li class=”tel”>11-3477-3347</li>
</ul>

<ul class=”vcard”>
<li><img style=\"float:left; margin-right:4px\"
src=\"http://elcio.com.br/imagens/elcio.jpg\"
alt=\"photo\" class=”photo”/>
<a href=\"http://elcio.com.br\" class=”url fn n”>
<span class=”given-name”>Elcio</span>
<span class=”additional-name”>Luiz </span>
<span class=”family-name”>Ferreira</span>
</a></li>
<li class=”org”>Visie Padrões Web (<a
href=\"http://visie.com.br\">visie.com.br</a>)</li>
<li><a class=”email” href=\"mailto:elcio arroba visie.com.br\">
elcio arroba visie.com.br</a></li>
<li class=”adr”>
<div class=”street-address”>Rua Onofre da Silveira, 574</div>
<span class=”locality”>São Paulo</span>,
<span class=”region”>SP</span>,
<span class=”postal-code”>04304-010</span>
<span class=”country-name”>Brasil</span>
<span class=”geo”>
lat: <span class=”latitude”>-23.626550,</span>
long: <span class=”longitude”>-46.639785</span>
</span>
</li>
<li class=”tel”>11-3477-3347</li>
</ul>

Pronto, você está
dentro!

Pra que
serve?

Lembra
do RSS?

Exponencial

“Pra que serve RSS?”

“Pra que serve RSS?”

“Pra que serve RSS?”

“Pra que serve RSS?”

“Pra que serve RSS?”

“Pra que serve RSS?”

“Pra que serve RSS?”

“Pra que serve RSS?”

Formatos Interessantes:
hCard XFN
● ●
● hCalendar ● rel:no-follow
● Geo ● XOXO

Exemplos
com a
Operator

Tall eye

Desenvolva sua
aplicação

“We need microformats
and to get people to
agree on them. It is going
to bootstrap exchanging
data on the Web…”
Bill Gates

Mash it up!

RSS

Firefox

Firefox

Bloglines

Google Reader

iPodder

Amarok

Netvibes

Page Flakes

Odeo

Yahoo! Pipes

Democracy

Aaah, sim, claro,
Firefox 3

Escreva

Leia

Crie

? ? dúvidas ? ?

Obrigado!
Elcio Ferreira
elcio@visie.com.br
visie.com.br