O futuro da internet
EVOLUÇÃO
<ul><li>O HTML 4.0 surgiu em 1997, há mais de uma década; </li></ul><ul><li>O HTML5 começou a ser desenvolvido em 2004, co...
SEMÂNTICA
<ul><li>A estruturação de páginas em HTML 4.0 é basicamente constituída pelo elemento <div>, com classes e IDs diferentes;...
 
ÁUDIO E VÍDEO
<ul><li>Com o HTML 4.0 era impossível anexar áudio ou vídeo na página, e para suprir essa necessidade surgiram as tecnolog...
 
<ul><li>YouTube já utiliza uma página com vídeos em HTML5:  http://www.youtube.com/html5 </li></ul>
O PODEROSO ELEMENTO CANVAS
<ul><li>O elemento <canvas> consiste na utilização de elementos JavaScript para a criação de gráficos no navegador, sem a ...
<ul><li>Exemplos do poder do elemento <canvas> </li></ul><ul><ul><li>http :// html5demos.com/canvas </li></ul></ul><ul><ul...
Drag & Drop
<ul><li>Com o HTML 5, podemos facilmente arrastar e soltar elementos no browser, tanto da própria página quanto do Desktop...
<ul><li>Exemplos de Drag & Drop com HTML 5 </li></ul><ul><ul><li>http:// html5demos.com/drag </li></ul></ul><ul><ul><li>ht...
OUTRAS FUNCIONALIDADES
<ul><li>contenteditable (conteúdo editável) </li></ul><ul><ul><li>http:// html5demos.com/contenteditable </li></ul></ul>
<ul><li>Geolocation (localização geográfica) </li></ul><ul><ul><li>http:// html5demos.com/geo </li></ul></ul>
<ul><li>Network status (online/offline) </li></ul><ul><ul><li>http:// html5demos.com/offline </li></ul></ul>
<ul><li>Armazenamento de dados </li></ul><ul><ul><li>http:// html5demos.com/storage </li></ul></ul>
IMPLANTAÇÃO
<ul><li>O HTML5 ainda está em fase de desenvolvimento; </li></ul><ul><li>Calendário de implantação do HTML5 </li></ul><ul>...
REFERÊNCIAS
<ul><li>Lista de tags HTML5 </li></ul><ul><ul><li>http://www.pinceladasdaweb.com.br/html5/ </li></ul></ul><ul><li>HTML5 Do...
OBRIGADO :) Alexandre Romero
Upcoming SlideShare
Loading in …5
×

HTML5 - O Futuro da web

3,416 views
3,324 views

Published on

Apresentação sobre HTML5 ministrada em abril de 2010.

Published in: Design, Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,416
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

HTML5 - O Futuro da web

  1. 1. O futuro da internet
  2. 2. EVOLUÇÃO
  3. 3. <ul><li>O HTML 4.0 surgiu em 1997, há mais de uma década; </li></ul><ul><li>O HTML5 começou a ser desenvolvido em 2004, com o intuito de suprir as novas expectativas do usuário; </li></ul><ul><li>O projeto, iniciado pela W3C, conta com o apoio de Apple, Mozilla, Opera e Microsoft. </li></ul>
  4. 4. SEMÂNTICA
  5. 5. <ul><li>A estruturação de páginas em HTML 4.0 é basicamente constituída pelo elemento <div>, com classes e IDs diferentes; </li></ul><ul><li>Novas tags facilitam a semântica no documento HTML; </li></ul><ul><li>Há uma maior visibilidade aos mecanismos de busca; </li></ul><ul><li>Fim da “sopa de DIVs”; </li></ul><ul><li>Fim das grandes quantidades de IDs e classes. </li></ul>
  6. 7. ÁUDIO E VÍDEO
  7. 8. <ul><li>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); </li></ul><ul><li>No HTML5 temos a inclusão das tags <audio> e <video>, que permitem anexar estes elementos sem a necessidade de nenhum plugin. </li></ul>
  8. 10. <ul><li>YouTube já utiliza uma página com vídeos em HTML5: http://www.youtube.com/html5 </li></ul>
  9. 11. O PODEROSO ELEMENTO CANVAS
  10. 12. <ul><li>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; </li></ul><ul><li>Este é o principal motivo pelo qual o HTML5 é considerado uma ameaça às Rich Internet Applications (RIA) proprietárias, como Flash, Silverlight e JavaFX; </li></ul>
  11. 13. <ul><li>Exemplos do poder do elemento <canvas> </li></ul><ul><ul><li>http :// html5demos.com/canvas </li></ul></ul><ul><ul><li>http:// html5demos.com/canvas-grad </li></ul></ul><ul><ul><li>http://www.addyosmani.com/resources/googlebox / </li></ul></ul><ul><ul><li>http:// cs.helsinki.fi/u/ilmarihe/canvas_animation_demo/mozcampeu09.html </li></ul></ul><ul><ul><li>http://9elements.com/io/projects/html5/canvas / </li></ul></ul>
  12. 14. Drag & Drop
  13. 15. <ul><li>Com o HTML 5, podemos facilmente arrastar e soltar elementos no browser, tanto da própria página quanto do Desktop; </li></ul>
  14. 16. <ul><li>Exemplos de Drag & Drop com HTML 5 </li></ul><ul><ul><li>http:// html5demos.com/drag </li></ul></ul><ul><ul><li>http:// html5demos.com/drag-anything </li></ul></ul><ul><ul><li>http://wave.google.com </li></ul></ul><ul><ul><li>http://www.chromeexperiments.com/detail/browser-ball / (+ canvas) </li></ul></ul>
  15. 17. OUTRAS FUNCIONALIDADES
  16. 18. <ul><li>contenteditable (conteúdo editável) </li></ul><ul><ul><li>http:// html5demos.com/contenteditable </li></ul></ul>
  17. 19. <ul><li>Geolocation (localização geográfica) </li></ul><ul><ul><li>http:// html5demos.com/geo </li></ul></ul>
  18. 20. <ul><li>Network status (online/offline) </li></ul><ul><ul><li>http:// html5demos.com/offline </li></ul></ul>
  19. 21. <ul><li>Armazenamento de dados </li></ul><ul><ul><li>http:// html5demos.com/storage </li></ul></ul>
  20. 22. IMPLANTAÇÃO
  21. 23. <ul><li>O HTML5 ainda está em fase de desenvolvimento; </li></ul><ul><li>Calendário de implantação do HTML5 </li></ul><ul><ul><li>Primeira especificação: 2012 </li></ul></ul><ul><ul><li>Segunda especificação: 2015 </li></ul></ul><ul><ul><li>Terceira especificação: 2019 </li></ul></ul><ul><ul><li>Especificação final: 2022 </li></ul></ul><ul><li>Muitos sites já utilizam HTML5, incluindo YouTube, Google Wave, Apple, entre outros; </li></ul><ul><li>Existe um script que permite ao Internet Explorer ler as principais novas tags do HTML5 </li></ul><ul><ul><li>http://remysharp.com/2009/01/07/html5-enabling-script / </li></ul></ul>
  22. 24. REFERÊNCIAS
  23. 25. <ul><li>Lista de tags HTML5 </li></ul><ul><ul><li>http://www.pinceladasdaweb.com.br/html5/ </li></ul></ul><ul><li>HTML5 Doctor </li></ul><ul><ul><li>http://html5doctor.com / </li></ul></ul><ul><li>Pinceladas da Web </li></ul><ul><ul><li>http://www.pinceladasdaweb.com.br/blog/category/html5 / </li></ul></ul><ul><li>Chrome Experiments </li></ul><ul><ul><li>http://www.chromeexperiments.com / </li></ul></ul><ul><li>HTML5 Demos </li></ul><ul><ul><li>http://html5demos.com / </li></ul></ul><ul><li>Meus bookmarks (sim, eu pesquiso bastante sobre isso) </li></ul><ul><ul><li>http:// delicious.com/aleromero/html5 </li></ul></ul>
  24. 26. OBRIGADO :) Alexandre Romero

×