Semântica: Uma jornada pelos componentes web

5,265 views

Published on

História do HTML, Semântica do HTML5, WAI ARIA, Microdata, Open Graph Protocol e Web components.

Published in: Technology
2 Comments
46 Likes
Statistics
Notes
No Downloads
Views
Total views
5,265
On SlideShare
0
From Embeds
0
Number of Embeds
172
Actions
Shares
0
Downloads
96
Comments
2
Likes
46
Embeds 0
No embeds

No notes for slide

Semântica: Uma jornada pelos componentes web

  1. 1. semântica uma jornada pelos componentes web
  2. 2. bernard de luna @bernarddeluna
  3. 3. - team leader de produto na Petrobras - creative director da Melt DSP - criador do treinamento Coding on Weekend - colunista do iMasters e Tableless - +50 eventos pelo Brasil - HTML5DevConf em San Francisco
  4. 4. 1991
  5. 5. 20 elementos criados HTML nasceu
  6. 6. 1994
  7. 7. é como você escreve email marketing HTML 2.0
  8. 8. imagemap
  9. 9. 1995
  10. 10. Javascript foi lançado!
  11. 11. Habemus internet explorer!
  12. 12. hoje
  13. 13. HTML5 não é mais o futuro, HTML5 não é nem mais o presente. zenorocha
  14. 14. HTML > seções
  15. 15. footer main header
  16. 16. footer main elemento único e não pode estar dentro de nenhuma outra seção header
  17. 17. footer header article aside
  18. 18. footer header article aside article article article
  19. 19. footer header article aside section
  20. 20. footer header article aside section nav
  21. 21. HTML > embed
  22. 22. track video audio <video src="brave.webm"> <track kind=”subtitles” src=”brave.pt.vtt” srclang=”pt” label="Português"> </video>
  23. 23. svg canvas track video audio
  24. 24. HTML > texto
  25. 25. italic < i > bold < b > underline < u > small < small >
  26. 26. italic < i > bold < b > underline < u > small < small >
  27. 27. voz alternada < i >
  28. 28. chamar atenção sem transmitir importância < b >
  29. 29. trecho de texto desarticulado < u >
  30. 30. pequeno trecho de texto < small >
  31. 31. estendendo a semântica HTML WAI ARIA http://www.w3.org/TR/wai-aria/roles
  32. 32. Aplicações que utilizam ARIA promovem a acessibilidade de componentes que não são contemplados pelas WCAG. reinaldoferraz
  33. 33. role=”contentinfo” role=”banner”
  34. 34. role=”contentinfo” role=”banner” role=” complementary ” role=”article”
  35. 35. role=”contentinfo” role=”banner” role=” complementary ” role=”article” role=”article” role=”region”
  36. 36. role=”contentinfo” role=”banner” role=” complementary ” role=”navigation” role=”article” role=”article” role=”region”
  37. 37. reconhecimento para busca microdata http://www.w3.org/TR/wai-aria/roles
  38. 38. cria um grupo itemscope especifica um item itemtype valor de um item itemprop
  39. 39. <div itemscope itemtype="http://schema.org/Person">   <span itemprop="name">Bernard De Luna</span>   <img src="be-bonitao.jpg" itemprop="image" />   <span itemprop="jobTitle">palestrante</span>   <a href="mailto:deluna@bernarddeluna.com" itemprop="email">deluna@bernarddeluna.com </a>   <a href="http://www.bernarddeluna.com" itemprop="url">bernarddeluna.com</a> </div>
  40. 40. person place organi zation product itemtype
  41. 41. http://www.google.com/webmasters/tools/richsnippets
  42. 42. reconhecimento para facebook opengraph http://ogp.me/
  43. 43. localização <html lang="pt-br" prefix="og: http://ogp.me/ns#" > <head> <meta property="og:locale" content="pt_BR"> </head> </html>
  44. 44. título e descrição <meta property="og:title" content="Semântica: uma jornada pelos componentes web"> <meta property="og:description" content="Vamos passear pela criação do HTML, seus significados para humanos, robôs e seu futuro, os web components.">
  45. 45. tipo <meta property="og:type" content="website">
  46. 46. imagem <meta property="og:image" content="http:// frontinsampa.com.br/img/temp/bernard.jpg">
  47. 47. e dizem para não usar mais meta tags
  48. 48. um futuro chamado webcomponents http://ogp.me/
  49. 49. custom elements
  50. 50. que tal expandir ou criar a sua própria tag HTML? custom elements
  51. 51. <bernard-luna> </bernard-luna> custom elements
  52. 52. <camera-element> </camera-element> custom elements http://customelements.github.io/camera-element/
  53. 53. <x-slidebox> </x-slidebox> custom elements http://registry.x-tags.org/x-tag/slidebox/x-slidebox/view
  54. 54. templates
  55. 55. templates criar templates com pedaços de código para reutilização
  56. 56. templates <template id="user-profile"> <h1>Bernard De Luna</h1> <img src="be.jpg" /> </template>
  57. 57. shadow dom
  58. 58. shadow dom blocos de código encapsulados dentro do DOM
  59. 59. shadow dom <input id="busca-campo" type="text" name="query" autocomplete="off" accesskey="s" lang="pt-BR" x-webkit-speech="" speech="" >
  60. 60. shadow dom <video> <source /> </video>
  61. 61. <div id=”cart”> </div> http://registry.x-tags.org/x-tag/slidebox/x-slidebox/view shadow dom
  62. 62. import
  63. 63. import reutilização de web components como arquivos externos <link rel="import" href="camera" />
  64. 64. @zenorocha @eduardolundgren @bernarddeluna
  65. 65. @bernarddeluna obrigado!

×