Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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=quot;float:left; margin-right:4pxquot;
   src=quot;http://elcio.com.br/imagens/el...
Acrescente significado
<h2>Sobre mim</h2>
<ul>
  <li><img style=quot;float:left; margin-right:4pxquot;
   src=quot;http://elcio.com.br/imagens/el...
<ul>
  <li><img style=quot;float:left; margin-right:4pxquot;
   src=quot;http://elcio.com.br/imagens/elcio.jpgquot;
   alt...
<ul>
  <li><img style=quot;float:left; margin-right:4pxquot;
   src=quot;http://elcio.com.br/imagens/elcio.jpgquot;
   alt...
<ul class=”vcard”>
  <li><img style=quot;float:left; margin-right:4pxquot;
   src=quot;http://elcio.com.br/imagens/elcio.j...
<ul class=”vcard”>
  <li><img style=quot;float:left; margin-right:4pxquot;
   src=quot;http://elcio.com.br/imagens/elcio.j...
<ul class=”vcard”>
  <li><img style=quot;float:left; margin-right:4pxquot;
   src=quot;http://elcio.com.br/imagens/elcio.j...
<ul class=”vcard”>
  <li><img style=quot;float:left; margin-right:4pxquot;
   src=quot;http://elcio.com.br/imagens/elcio.j...
<ul class=”vcard”>
  <li><img style=quot;float:left; margin-right:4pxquot;
   src=quot;http://elcio.com.br/imagens/elcio.j...
<ul class=”vcard”>
  <li><img style=quot;float:left; margin-right:4pxquot;
   src=quot;http://elcio.com.br/imagens/elcio.j...
<ul class=”vcard”>
  <li><img style=quot;float:left; margin-right:4pxquot;
   src=quot;http://elcio.com.br/imagens/elcio.j...
<ul class=”vcard”>
  <li><img style=quot;float:left; margin-right:4pxquot;
   src=quot;http://elcio.com.br/imagens/elcio.j...
<ul class=”vcard”>
  <li><img style=quot;float:left; margin-right:4pxquot;
   src=quot;http://elcio.com.br/imagens/elcio.j...
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…”
   ...
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
Microformats, a web semântica com letra minúscula
Microformats, a web semântica com letra minúscula
Microformats, a web semântica com letra minúscula
Microformats, a web semântica com letra minúscula
Microformats, a web semântica com letra minúscula
Microformats, a web semântica com letra minúscula
Microformats, a web semântica com letra minúscula
Microformats, a web semântica com letra minúscula
Microformats, a web semântica com letra minúscula
Microformats, a web semântica com letra minúscula
Microformats, a web semântica com letra minúscula
Upcoming SlideShare
Loading in …5
×

Microformats, a web semântica com letra minúscula

10,259 views

Published on

Palestra apresentada por Elcio Ferreira no 9º ELPI. A palestra apresentou ao público os Microformats, uma maneira de incluir novas características e possibilidades no HTML atual, oferecendo significado extra ao conteúdo e facilitando a criação de mash-ups. Comparou também a adoção inicial de Microformats com o padrão de adoção de novas tecnologias abertas, em especial o RSS. Por fim, demonstrou com exemplos práticos a simplicidade para se implementar Microformats e sua grande utilidade e flexibilidade. Vídeo aqui: http://www.andrey.com.br/?p=185

Published in: Technology
  • Great display. I've taken a few of the structure graphics as well as adapted to my startup
    Teisha
    http://dashinghealth.com http://healthimplants.com
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Microformats, a web semântica com letra minúscula

  1. 1. Microformats a web semântica com letra minúscula Elcio Ferreira elcio@visie.com.br visie.com.br
  2. 2. tableless.com.br elcio.com.br visie.com.br
  3. 3. Padrões são legais
  4. 4. São libertadores
  5. 5. São acopláveis
  6. 6. Adoção exponencial
  7. 7. usuários tempo
  8. 8. usuários tempo
  9. 9. usuários Barulhentos tempo
  10. 10. As Webs Semânticas
  11. 11. A Web Semântica (com letra maiúscula)
  12. 12. interessante
  13. 13. complexa
  14. 14. possível?
  15. 15. A web semântica (com letra minúscula)
  16. 16. interessante
  17. 17. simples
  18. 18. possível hoje
  19. 19. O plano
  20. 20. Iniciando
  21. 21. Use o seu XHTML atual
  22. 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. 23. Acrescente significado
  24. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 36. Pronto, você está dentro!
  37. 37. Pra que serve?
  38. 38. Lembra do RSS?
  39. 39. Exponencial
  40. 40. “Pra que serve RSS?”
  41. 41. “Pra que serve RSS?”
  42. 42. “Pra que serve RSS?”
  43. 43. “Pra que serve RSS?”
  44. 44. “Pra que serve RSS?”
  45. 45. “Pra que serve RSS?”
  46. 46. “Pra que serve RSS?”
  47. 47. “Pra que serve RSS?”
  48. 48. Formatos Interessantes: hCard XFN ● ● ● hCalendar ● rel:no-follow ● Geo ● XOXO
  49. 49. Exemplos com a Operator
  50. 50. Tall eye
  51. 51. Desenvolva sua aplicação
  52. 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. 53. Mash it up!
  54. 54. RSS
  55. 55. Firefox
  56. 56. Firefox
  57. 57. Bloglines
  58. 58. Google Reader
  59. 59. iPodder
  60. 60. Amarok
  61. 61. Netvibes
  62. 62. Page Flakes
  63. 63. Odeo
  64. 64. Yahoo! Pipes
  65. 65. Democracy
  66. 66. Aaah, sim, claro, Firefox 3
  67. 67. Escreva
  68. 68. Leia
  69. 69. Crie
  70. 70. ? ? dúvidas ? ?
  71. 71. Obrigado! Elcio Ferreira elcio@visie.com.br visie.com.br

×