O documento discute a evolução da internet com o HTML5, que introduz novas tags para melhorar a semântica das páginas, permite incorporar áudio e vídeo nativamente, e traz o poderoso elemento <canvas> para criação de gráficos no navegador. O HTML5 ainda está em desenvolvimento com previsão de especificação final em 2022, mas muitos sites já o utilizam.

1. O futuro da internet

2. EVOLUÇÃO

3. O HTML 4.0 surgiu em 1997, há mais de uma década; O HTML5 começou a ser desenvolvido em 2004, com o intuito de suprir as novas expectativas do usuário; O projeto, iniciado pela W3C, conta com o apoio de Apple, Mozilla, Opera e Microsoft.

4. SEMÂNTICA

5. A estruturação de páginas em HTML 4.0 é basicamente constituída pelo elemento <div>, com classes e IDs diferentes; Novas tags facilitam a semântica no documento HTML; Há uma maior visibilidade aos mecanismos de busca; Fim da “sopa de DIVs”; Fim das grandes quantidades de IDs e classes.

7. ÁUDIO E VÍDEO

8. Com o HTML 4.0 era impossível anexar áudio ou vídeo na página, e para suprir essa necessidade surgiram as tecnologias proprietárias (Flash, Silverlight); No HTML5 temos a inclusão das tags <audio> e <video>, que permitem anexar estes elementos sem a necessidade de nenhum plugin.

10. YouTube já utiliza uma página com vídeos em HTML5: http://www.youtube.com/html5

11. O PODEROSO ELEMENTO CANVAS

12. O elemento <canvas> consiste na utilização de elementos JavaScript para a criação de gráficos no navegador, sem a necessidade de nenhum plugin instalado; Este é o principal motivo pelo qual o HTML5 é considerado uma ameaça às Rich Internet Applications (RIA) proprietárias, como Flash, Silverlight e JavaFX;

13. Exemplos do poder do elemento <canvas> http://html5demos.com/canvas http://html5demos.com/canvas-grad http://www.addyosmani.com/resources/googlebox/ http://cs.helsinki.fi/u/ilmarihe/canvas_animation_demo/mozcampeu09.html http://9elements.com/io/projects/html5/canvas/

14. Drag & Drop

15. Com o HTML 5, podemos facilmente arrastar e soltar elementos no browser, tanto da própria página quanto do Desktop;

16. Exemplos de Drag & Drop com HTML 5 http://html5demos.com/drag http://html5demos.com/drag-anything http://wave.google.com http://www.chromeexperiments.com/detail/browser-ball/ (+ canvas)

17. OUTRAS FUNCIONALIDADES

18. contenteditable (conteúdo editável) http://html5demos.com/contenteditable

19. Geolocation (localização geográfica) http://html5demos.com/geo

20. Network status (online/offline) http://html5demos.com/offline

21. Armazenamento de dados http://html5demos.com/storage

22. IMPLANTAÇÃO

23. O HTML5 ainda está em fase de desenvolvimento; Calendário de implantação do HTML5 Primeira especificação: 2012 Segunda especificação: 2015 Terceira especificação: 2019 Especificação final: 2022 Muitos sites já utilizam HTML5, incluindo YouTube, Google Wave, Apple, entre outros; Existe um script que permite ao Internet Explorer ler as principais novas tags do HTML5 http://remysharp.com/2009/01/07/html5-enabling-script/

24. REFERÊNCIAS

25. Lista de tags HTML5 http://www.pinceladasdaweb.com.br/html5/ HTML5 Doctor http://html5doctor.com/ Pinceladas da Web http://www.pinceladasdaweb.com.br/blog/category/html5/ ChromeExperiments http://www.chromeexperiments.com/ HTML5 Demos http://html5demos.com/ Meus bookmarks (sim, eu pesquiso bastante sobre isso) http://delicious.com/aleromero/html5

26. OBRIGADO :) Alexandre Romero