Semântica: Uma jornada pelos componentes web
•
46 recomendaciones•5,507 vistas
O documento discute a evolução da semântica na web, desde a criação do HTML em 1991 até os componentes web do futuro. Aborda elementos como header, footer, article e o papel da ARIA e microdata para reconhecimento. Apresenta também templates, shadow dom e import para reutilização de código através de componentes customizados.
Recomendados
Más contenido relacionado
Similar a Semântica: Uma jornada pelos componentes web
Similar a Semântica: Uma jornada pelos componentes web (20)
Más de Bunee.io - Hiring with Intelligence
Más de Bunee.io - Hiring with Intelligence (19)
Semântica: Uma jornada pelos componentes web
- 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
- 5. 1991
- 6. 20 elementos criados HTML nasceu
- 7. 1994
- 10. é como você escreve email marketing HTML 2.0
- 11. imagemap
- 12. 1995
- 15. hoje
- 16. HTML5 não é mais o futuro, HTML5 não é nem mais o presente. zenorocha
- 17. HTML > seções
- 19. footer main elemento único e não pode estar dentro de nenhuma outra seção header
- 24. HTML > embed
- 25. track video audio <video src="brave.webm"> <track kind=”subtitles” src=”brave.pt.vtt” srclang=”pt” label="Português"> </video>
- 27. HTML > texto
- 28. italic < i > bold < b > underline < u > small < small >
- 29. italic < i > bold < b > underline < u > small < small >
- 30. voz alternada < i >
- 31. chamar atenção sem transmitir importância < b >
- 32. trecho de texto desarticulado < u >
- 33. pequeno trecho de texto < small >
- 34. estendendo a semântica HTML WAI ARIA http://www.w3.org/TR/wai-aria/roles
- 35. Aplicações que utilizam ARIA promovem a acessibilidade de componentes que não são contemplados pelas WCAG. reinaldoferraz
- 38. role=”contentinfo” role=”banner” role=” complementary ” role=”article” role=”article” role=”region”
- 41. cria um grupo itemscope especifica um item itemtype valor de um item itemprop
- 42. <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>
- 46. localização <html lang="pt-br" prefix="og: http://ogp.me/ns#" > <head> <meta property="og:locale" content="pt_BR"> </head> </html>
- 47. 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.">
- 50. e dizem para não usar mais meta tags
- 52. custom elements
- 53. que tal expandir ou criar a sua própria tag HTML? custom elements
- 56. <camera-element> </camera-element> custom elements http://customelements.github.io/camera-element/
- 57. <x-slidebox> </x-slidebox> custom elements http://registry.x-tags.org/x-tag/slidebox/x-slidebox/view
- 58. templates
- 59. templates criar templates com pedaços de código para reutilização
- 60. templates <template id="user-profile"> <h1>Bernard De Luna</h1> <img src="be.jpg" /> </template>
- 61. shadow dom
- 62. shadow dom blocos de código encapsulados dentro do DOM
- 68. import
- 69. import reutilização de web components como arquivos externos <link rel="import" href="camera" />