0
Computer onthe Beach 2011 | Manoel dos Santos<br />
Manoel F. C. dos Santos<br />manoeldossantos@gmail.com<br />@manoeldossantos<br />www.manoeldossantos.com<br />
User Experience Designer<br />Consultor de Interfaces<br />
Primeiro, umaintroduçãoaos<br />Web Standards<br />
O quê?<br />Conjunto de especificaçõestécnicas e guidelines parainterpretação e criação de web sites<br />
Quem?<br />W3C<br />World Wide Web Consortium<br />
Onde?<br />www.w3.org/standards<br />
Porque?<br />SEO<br />Arquivosmenores<br />Acessibilidade<br />Compatibilidade<br />Fácilmanutenção<br />Flexibilidade de ...
Torre de Babel<br />
Conteúdo+Apresentação+Comportamento<br />A receita<br />
Conteúdo<br />HTML<br />
Apresentação<br />CSS<br />HTML<br />
Comportamento<br />Javascript/AJAX<br />CSS<br />HTML<br />
A História<br />
A Evolução<br />HTML5<br />
Apple ama HTML5<br />apple.com/html5<br />
Google ama HTML5<br />html5rocks.com<br />
Mozilla ama HTML5<br />mozillademos.org/demos/planetarium/demo.html<br />
Opera ama HTML5<br />dev.opera.com/articles/view/get-familiar-with-html5/<br />
Microsoft ama HTML5<br />ie.microsoft.com/testdrive/<br />
X<br />X<br />
Focoem<br />Aplicações Web<br />
O Quehá de Novo<br />Semântica/Sintaxe<br />Formulários<br />Multimídia<br />Gráficos<br />Estilos/CSS3<br />E muitomais…<...
Semântica<br />
O velho<br /><div id=“header”><br /><div class=“section”><br /><div id=“nav”><br /><div id=“sidebar”><br /><div class=“art...
O novo<br /><header><br /><section><br /><nav><br /><aside><br /><article><br /><footer><br />
Novo Doctype<br /><!DOCTYPE html><br />
Semfrescuras<br /><img src=“imagem.jpg” /><br /><img src=“imagem.jpg”><br /><img src=imagem.jpg><br /><IMG SRC=imagem.jpg>...
Formulários<br />
Elementosmaisricos<br /><input type=“date”><br /><input type=“time”><br /><input type=“month”><br /><input type=“week”><br...
Validaçãoembutida<br /><input … required><br /><input type=“tel”><br /><input type=“email”><br /><input type=“url”><br /><...
Multimídia<br />
<audio id=“audio” src=“musica.mp3” controls></audio><br /><video id=“video” src=“filme.mp4” controls></video><br />
Gráficos<br />
Canvas<br /><canvas id=“canvas” width=“500” height=“500”></canvas><br /><script><br />varcanvasContext = document.getEleme...
CSS3<br />
MenosImagens<br />border-radius<br />text-shadow<br />box-shadow<br />gradient<br />
E muito mais...<br />
Offline<br />Geolocalização<br />Drag and Drop<br />Web SQL Database<br />Web Workers<br />APIs<br />
2012?<br />Posso usar isso tudo hoje?<br />
A situaçãoAtual<br />
Suporte dos Navegadores<br />http://www.findmebyip.com/litmus/<br />
Para osDesatualizados<br />http://www.modernizr.com/<br />
Links<br />http://dev.w3.org/html5/spec-author-view/<br />http://slides.html5rocks.com/<br />http://html5demos.com/<br />h...
Obrigado!<br />manoeldossantos@gmail.com<br />@manoeldossantos<br />Perguntas?<br />
Upcoming SlideShare
Loading in...5
×

Minicurso HTML5

1,613

Published on

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

Published in: Design
1 Comment
4 Likes
Statistics
Notes
No Downloads
Views
Total Views
1,613
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
131
Comments
1
Likes
4
Embeds 0
No embeds

No notes for slide
  • A missão da W3C étornar a web um mundoperfeito. O paraíso da informação.A W3C quergarantirque a Web sejaacessívelportodotipo de pessoa e emqualquerlugar.E a visão da W3C éque a web seja um canal de duasvias, onde a interação entre osusuários e osautoressejatão forte quenãohajamaisdiferenciação entre eles. Elesvisualizam a web tambémcomotrocaintensa de informações e serviços. E, porfim, que a web sejaconfiável, segura e amigável.
  • Transcript of "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 />
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×