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

10,063 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
1 Comment
12 Likes
Statistics
Notes
  • 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
No Downloads
Views
Total views
10,063
On SlideShare
0
From Embeds
0
Number of Embeds
85
Actions
Shares
0
Downloads
415
Comments
1
Likes
12
Embeds 0
No embeds

No notes for slide

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

×