O que mudou depois do HTML5 ?

Apresentação para o evento Front-end manaus - Qual será o futuro da web

Transcript

1. O que mudou depois do HTML5? Kirmayr Tomaz Conteúdo : https://github.com /Kirmayrtomaz
3. Introdução Criado por Tim Berners-Lee, HyperText Markup Language significa “Linguagem de marcação de hipertexto”. A ideia era criar um meio de comunicação que pudesse ser acessado por todo mundo em qualquer lugar de uma determinada rede de comunicação.
11. Semântica (regras) Antes Depois
12. <i> - Italic <b> - Bold <u> - underline <small> Semântica (regras) <i> - Voz Alternada <b> - Chamando atenção <u> - trecho desarticulado <small> - pequeno trecho
13. Semântica - WAI- ARIA
14. Semântica - MicroData
15. Semântica (regras) <figure></figure>
16. Formulário (Pattern) <input></input> • type: ◦ color ◦ date ◦ range ◦ email ◦ url ◦ tel ◦ ... • autocomplete: off ou on • O valor do atributo deve ser um id de um elemento <form> • inputmode: ◦ latin ◦ latin-name ◦ latin-prose ◦ ...
18. Mídia • Áudio • Vídeo
19. Gráficos e efeitos 2D/3D
20. Canvas
21. WebGL http://threejs.org/examples
22. Armazenamento Offline • WebStorage ◦ localStorage.getItem() ◦ localStorage.setItem() • WebSQL(Descontinuado) • Indexed Database
23. Drag and Drop
24. Notification
25. Geolocation
26. Web Worker http://www.html5rocks.com/pt/tutorials/workers/basics/
27. Mobile • Vibration • Ambient Light API • Battery Status API • Device Orientation API
28. http://pt.slideshare.net/bernarddeluna/semntica-uma-jornada-pelos-componentes-web
29. O que vem por aí ? • Web Components • Shadow Dom • HTML Imports
30. Referências • http://www.maujor.com/blog/2010/04/13/os-elementos-figure-e-figcaptio n-da-html5/ • https://github.com/AurelioDeRosa/HTML5-API-demos • https://www.sitepoint.com/10-html5-apis-worth-looking/ • http://www.slideshare.net/zenorocha/slides-25535365 • http://tableless.com.br/wai-aria-estendendo-o-significado-das-interacoes/ • http://tableless.com.br/introducao-a-microdata-no-html5/
31. Referências • https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video • http://jaydson.org/html5-web-notifications/ • https://github.com/AurelioDeRosa/HTML5-API-demos • •