Microformatsa web semântica

com letra minúscula

Elcio Ferreiraelcio@visie.com.br

visie.com.br

tableless.com.brelcio.com.brvisie.com.br

Padrões são legais

São libertadores

São acopláveis

Adoção exponencialAdoção exponencial

tempo

usuá

rios

tempo

usuá

rios

tempo

usuá

rios

Barulhentos

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

Ahá! Temos hCard!

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

E agora Geo!

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

Lembrado 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●hCalendar●Geo

●XFN● rel:no-follow●XOXO

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

O b r i g a d o !

Elcio Ferreiraelcio@visie.com.br

visie.com.br