Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Minicurso HTML5

1,878 views

Published on

Minicurso de HTML5 ministrado no evento Computer on the Beach 2011, em Florianópolis.

Published in: Design

Minicurso HTML5

  1. 1. Computer onthe Beach 2011 | Manoel dos Santos<br />
  2. 2. Manoel F. C. dos Santos<br />manoeldossantos@gmail.com<br />@manoeldossantos<br />www.manoeldossantos.com<br />
  3. 3. User Experience Designer<br />Consultor de Interfaces<br />
  4. 4. Primeiro, umaintroduçãoaos<br />Web Standards<br />
  5. 5. O quê?<br />Conjunto de especificaçõestécnicas e guidelines parainterpretação e criação de web sites<br />
  6. 6. Quem?<br />W3C<br />World Wide Web Consortium<br />
  7. 7. Onde?<br />www.w3.org/standards<br />
  8. 8. Porque?<br />SEO<br />Arquivosmenores<br />Acessibilidade<br />Compatibilidade<br />Fácilmanutenção<br />Flexibilidade de layout<br />
  9. 9. Torre de Babel<br />
  10. 10. Conteúdo+Apresentação+Comportamento<br />A receita<br />
  11. 11. Conteúdo<br />HTML<br />
  12. 12. Apresentação<br />CSS<br />HTML<br />
  13. 13. Comportamento<br />Javascript/AJAX<br />CSS<br />HTML<br />
  14. 14. A História<br />
  15. 15. A Evolução<br />HTML5<br />
  16. 16. Apple ama HTML5<br />apple.com/html5<br />
  17. 17. Google ama HTML5<br />html5rocks.com<br />
  18. 18. Mozilla ama HTML5<br />mozillademos.org/demos/planetarium/demo.html<br />
  19. 19. Opera ama HTML5<br />dev.opera.com/articles/view/get-familiar-with-html5/<br />
  20. 20. Microsoft ama HTML5<br />ie.microsoft.com/testdrive/<br />
  21. 21. X<br />X<br />
  22. 22. Focoem<br />Aplicações Web<br />
  23. 23. O Quehá de Novo<br />Semântica/Sintaxe<br />Formulários<br />Multimídia<br />Gráficos<br />Estilos/CSS3<br />E muitomais…<br />
  24. 24. Semântica<br />
  25. 25. O velho<br /><div id=“header”><br /><div class=“section”><br /><div id=“nav”><br /><div id=“sidebar”><br /><div class=“article”><br /><div id=“footer”><br />
  26. 26. O novo<br /><header><br /><section><br /><nav><br /><aside><br /><article><br /><footer><br />
  27. 27. Novo Doctype<br /><!DOCTYPE html><br />
  28. 28. Semfrescuras<br /><img src=“imagem.jpg” /><br /><img src=“imagem.jpg”><br /><img src=imagem.jpg><br /><IMG SRC=imagem.jpg><br />
  29. 29. Formulários<br />
  30. 30. Elementosmaisricos<br /><input type=“date”><br /><input type=“time”><br /><input type=“month”><br /><input type=“week”><br /><input type=“range”><br /><input type=“number”><br />
  31. 31.
  32. 32. Validaçãoembutida<br /><input … required><br /><input type=“tel”><br /><input type=“email”><br /><input type=“url”><br /><input … pattern=“[a-z] {3} [0-9] {3}”><br />
  33. 33. Multimídia<br />
  34. 34. <audio id=“audio” src=“musica.mp3” controls></audio><br /><video id=“video” src=“filme.mp4” controls></video><br />
  35. 35. Gráficos<br />
  36. 36. Canvas<br /><canvas id=“canvas” width=“500” height=“500”></canvas><br /><script><br />varcanvasContext = document.getElementById("canvas").getContext("2d");<br /> canvasContext.fillRect(250, 25, 150, 100);<br />canvasContext.beginPath();<br />canvasContext.arc(450, 110, 100, Math.PI * 1/2, Math.PI * 3/2);<br />canvasContext.lineWidth = 15;<br />canvasContext.lineCap = 'round';<br />canvasContext.strokeStyle = 'rgba(255, 127, 0, 0.5)';<br />canvasContext.stroke();<br /></script><br />
  37. 37. CSS3<br />
  38. 38. MenosImagens<br />border-radius<br />text-shadow<br />box-shadow<br />gradient<br />
  39. 39. E muito mais...<br />
  40. 40. Offline<br />Geolocalização<br />Drag and Drop<br />Web SQL Database<br />Web Workers<br />APIs<br />
  41. 41. 2012?<br />Posso usar isso tudo hoje?<br />
  42. 42. A situaçãoAtual<br />
  43. 43. Suporte dos Navegadores<br />http://www.findmebyip.com/litmus/<br />
  44. 44. Para osDesatualizados<br />http://www.modernizr.com/<br />
  45. 45. Links<br />http://dev.w3.org/html5/spec-author-view/<br />http://slides.html5rocks.com/<br />http://html5demos.com/<br />http://html5doctor.com/<br />http://www.apple.com/html5/<br />http://www.nevermindthebullets.com/<br />http://diveintohtml5.org/<br />http://www.edesignerz.net/html/2913-html-5-and-css-3-the-techniques-youll-soon-be-using<br />
  46. 46. Obrigado!<br />manoeldossantos@gmail.com<br />@manoeldossantos<br />Perguntas?<br />

×