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

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

3.
Padrões são legais

4.
São libertadores

5.
São acopláveis

6.
Adoção exponencial

7.
usuários
tempo

8.
usuários
tempo

9.
usuários
Barulhentos
tempo

10.
As Webs Semânticas

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

12.
interessante

13.
complexa

14.
possível?

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

16.
interessante

17.
simples

18.
possível hoje

19.
O plano

20.
Iniciando

21.
Use o seu
XHTML atual

22.
<h2>Sobre mim</h2>
<ul>
<li><img style=quot;float:left; margin-right:4pxquot;
src=quot;http://elcio.com.br/imagens/elcio.jpgquot;
alt=quot;photoquot;/>
<a href=quot;http://elcio.com.brquot;>Elcio Luiz
Ferreira</a></li>
<li>Visie Padrões Web (<a
href=quot;http://visie.com.brquot;>visie.com.br</a>)</li>
<li><a href=quot;mailto:elcio arroba visie.com.brquot;>
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>

23.
Acrescente significado

24.
<h2>Sobre mim</h2>
<ul>
<li><img style=quot;float:left; margin-right:4pxquot;
src=quot;http://elcio.com.br/imagens/elcio.jpgquot;
alt=quot;photoquot;/>
<a href=quot;http://elcio.com.brquot;>Elcio Luiz
Ferreira</a></li>
<li>Visie Padrões Web (<a
href=quot;http://visie.com.brquot;>visie.com.br</a>)</li>
<li><a href=quot;mailto:elcio arroba visie.com.brquot;>
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>

25.
<ul>
<li><img style=quot;float:left; margin-right:4pxquot;
src=quot;http://elcio.com.br/imagens/elcio.jpgquot;
alt=quot;photoquot;/>
<a href=quot;http://elcio.com.brquot;>
<span>Elcio</span>
<span>Luiz </span>
<span>Ferreira</span>
</a></li>
<li>Visie Padrões Web (<a
href=quot;http://visie.com.brquot;>visie.com.br</a>)</li>
<li><a href=quot;mailto:elcio arroba visie.com.brquot;>
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>

26.
<ul>
<li><img style=quot;float:left; margin-right:4pxquot;
src=quot;http://elcio.com.br/imagens/elcio.jpgquot;
alt=quot;photoquot;/>
<a href=quot;http://elcio.com.brquot;>
<span>Elcio</span>
<span>Luiz </span>
<span>Ferreira</span>
</a></li>
<li>Visie Padrões Web (<a
href=quot;http://visie.com.brquot;>visie.com.br</a>)</li>
<li><a href=quot;mailto:elcio arroba visie.com.brquot;>
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>

27.
<ul class=”vcard”>
<li><img style=quot;float:left; margin-right:4pxquot;
src=quot;http://elcio.com.br/imagens/elcio.jpgquot;
alt=quot;photoquot;/>
<a href=quot;http://elcio.com.brquot;>
<span>Elcio</span>
<span>Luiz </span>
<span>Ferreira</span>
</a></li>
<li>Visie Padrões Web (<a
href=quot;http://visie.com.brquot;>visie.com.br</a>)</li>
<li><a href=quot;mailto:elcio arroba visie.com.brquot;>
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>

28.
<ul class=”vcard”>
<li><img style=quot;float:left; margin-right:4pxquot;
src=quot;http://elcio.com.br/imagens/elcio.jpgquot;
alt=quot;photoquot; class=”photo”/>
<a href=quot;http://elcio.com.brquot; 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=quot;http://visie.com.brquot;>visie.com.br</a>)</li>
<li><a href=quot;mailto:elcio arroba visie.com.brquot;>
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>

29.
<ul class=”vcard”>
<li><img style=quot;float:left; margin-right:4pxquot;
src=quot;http://elcio.com.br/imagens/elcio.jpgquot;
alt=quot;photoquot; class=”photo”/>
<a href=quot;http://elcio.com.brquot; 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=quot;http://visie.com.brquot;>visie.com.br</a>)</li>
<li><a class=”email” href=quot;mailto:elcio arroba visie.com.brquot;>
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>

30.
<ul class=”vcard”>
<li><img style=quot;float:left; margin-right:4pxquot;
src=quot;http://elcio.com.br/imagens/elcio.jpgquot;
alt=quot;photoquot; class=”photo”/>
<a href=quot;http://elcio.com.brquot; 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=quot;http://visie.com.brquot;>visie.com.br</a>)</li>
<li><a class=”email” href=quot;mailto:elcio arroba visie.com.brquot;>
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>

31.
<ul class=”vcard”>
<li><img style=quot;float:left; margin-right:4pxquot;
src=quot;http://elcio.com.br/imagens/elcio.jpgquot;
alt=quot;photoquot; class=”photo”/>
<a href=quot;http://elcio.com.brquot; 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=quot;http://visie.com.brquot;>visie.com.br</a>)</li>
<li><a class=”email” href=quot;mailto:elcio arroba visie.com.brquot;>
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>

32.
<ul class=”vcard”>
<li><img style=quot;float:left; margin-right:4pxquot;
src=quot;http://elcio.com.br/imagens/elcio.jpgquot;
alt=quot;photoquot; class=”photo”/>
<a href=quot;http://elcio.com.brquot; 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=quot;http://visie.com.brquot;>visie.com.br</a>)</li>
<li><a class=”email” href=quot;mailto:elcio arroba visie.com.brquot;>
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>

33.
<ul class=”vcard”>
<li><img style=quot;float:left; margin-right:4pxquot;
src=quot;http://elcio.com.br/imagens/elcio.jpgquot;
alt=quot;photoquot; class=”photo”/>
<a href=quot;http://elcio.com.brquot; 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=quot;http://visie.com.brquot;>visie.com.br</a>)</li>
<li><a class=”email” href=quot;mailto:elcio arroba visie.com.brquot;>
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>

34.
<ul class=”vcard”>
<li><img style=quot;float:left; margin-right:4pxquot;
src=quot;http://elcio.com.br/imagens/elcio.jpgquot;
alt=quot;photoquot; class=”photo”/>
<a href=quot;http://elcio.com.brquot; 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=quot;http://visie.com.brquot;>visie.com.br</a>)</li>
<li><a class=”email” href=quot;mailto:elcio arroba visie.com.brquot;>
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>

35.
<ul class=”vcard”>
<li><img style=quot;float:left; margin-right:4pxquot;
src=quot;http://elcio.com.br/imagens/elcio.jpgquot;
alt=quot;photoquot; class=”photo”/>
<a href=quot;http://elcio.com.brquot; 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=quot;http://visie.com.brquot;>visie.com.br</a>)</li>
<li><a class=”email” href=quot;mailto:elcio arroba visie.com.brquot;>
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>

36.
Pronto, você está
dentro!

37.
Pra que
serve?

38.
Lembra
do RSS?

39.
Exponencial

40.
“Pra que serve RSS?”

41.
“Pra que serve RSS?”

42.
“Pra que serve RSS?”

43.
“Pra que serve RSS?”

44.
“Pra que serve RSS?”

45.
“Pra que serve RSS?”

46.
“Pra que serve RSS?”

47.
“Pra que serve RSS?”

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

49.
Exemplos
com a
Operator

50.
Tall eye

51.
Desenvolva sua
aplicação

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

53.
Mash it up!

54.
RSS

55.
Firefox

56.
Firefox

57.
Bloglines

58.
Google Reader

59.
iPodder

60.
Amarok

61.
Netvibes

62.
Page Flakes

63.
Odeo

64.
Yahoo! Pipes

65.
Democracy

66.
Aaah, sim, claro,
Firefox 3

67.
Escreva

68.
Leia

69.
Crie

70.
? ? dúvidas ? ?

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