HTML5, o que já é e o que pode ser.

1,265 views

Published on

Palestra sobre o que é possível se fazer com HTML5

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,265
On SlideShare
0
From Embeds
0
Number of Embeds
17
Actions
Shares
0
Downloads
14
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

HTML5, o que já é e o que pode ser.

  1. 1. Mozart Diniz mozart.diniz@gmail.com @mozartdiniz Friday, September 20, 13
  2. 2. Friday, September 20, 13
  3. 3. Friday, September 20, 13
  4. 4. Friday, September 20, 13
  5. 5. WHATWG Friday, September 20, 13
  6. 6. HMTL + CSS + JS + + Friday, September 20, 13
  7. 7. <!doctype html> <meta charset="utf-8" /> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> Antes Agora Friday, September 20, 13
  8. 8. <div id="header"></div> <div id="navigation"></div> <div id="article"> <div id="section"> </div> </div> <div id="aside"></div> <div id="foorter"></div> Antes Friday, September 20, 13
  9. 9. <header></header> <navigation></navigation> <article> <section> </section> </article> <aside></aside> <foorter></foorter> Agora Friday, September 20, 13
  10. 10. Muitas novas <tag>s Friday, September 20, 13
  11. 11. Vídeo em HTML é apenas para não ter que usar mais Flash e ter algo para reproduzir mídía, certo? Vejamos o que conseguimos fazer. Apple showcase This Shell Vídeo Friday, September 20, 13
  12. 12. <video width="640" height="480" id="video1" controls="controls"> <source src="media/mov_bbb.mp4" type="video/mp4"> <source src="media/mov_bbb.ogg" type="video/ogg"> O seu navegador não dá suporte à vídeo com HMTL5 </video> Vídeo Friday, September 20, 13
  13. 13. function videoControl(){ var v = document.getElementById("video1"); if(v.paused) { v.play(); } else { v.pause(); } }; Que tal um pouco de controle? Vídeo Friday, September 20, 13
  14. 14. Balldroppings.com Tuner | Instinct Soundcloud.com Audio Simples e poderoso como o vídeo. Friday, September 20, 13
  15. 15. <audio controls="controls" id="audio1"> <source src="media/naturesounds.ogg" type="audio/ogg"> Seu browser deve ser o IE6-8, não suporta audio </audio> Audio Friday, September 20, 13
  16. 16. Audio function videoControl(){ var v = document.getElementById("audio1"); if(v.paused) { v.play(); } else { v.pause(); } }; Que tal um pouco de controle? Friday, September 20, 13
  17. 17. Audio Api http://chromium.googlecode.com http://chromium.googlecode.com Friday, September 20, 13
  18. 18. Canvas Um novo e completo mundo para o HTML, praticamente tudo que possa ser representado por um desenho 2D ou 3D pode ser feito com o <canvas> Friday, September 20, 13
  19. 19. Kaleidoscope Jscloth Cnn-ecosphere.com Canvas Friday, September 20, 13
  20. 20. var ctx = document.querySelector("canvas").getContext("2d"); ctx.fillStyle = "rgb(0, 255, 0)"; ctx.fillRect(10,20,50,50); ctx.strokeStyle = "rgb(255, 0, 0)"; ctx.lineWidth = 3; ctx.strokeRect(9, 19, 52, 52); Canvas Friday, September 20, 13
  21. 21. Picozu Tenha seu próprio Photoshop online. Canvas Friday, September 20, 13
  22. 22. Primeiro, alguns clássicos. Atari Arcade Games Games Canvas + Audio +Vídeo + Muito JavaScript Friday, September 20, 13
  23. 23. Hex GL http://hexgl.bkcore.com/ Que tal esse então? Epic Cidadel Suporte a eventos de Touch! http://www.contrejour.ie/#fbid=SEAxT7ZGYCn Games Jogando com 3D Friday, September 20, 13
  24. 24. Muita coisa pode acontecer com um pouco de <canvas> e uma web cam. Webcamtoy.com Devices Friday, September 20, 13
  25. 25. Easysubtitles.com Armadillog File API Não é só um upload com drag and drop. Friday, September 20, 13
  26. 26. WebRTC | demo WebRTC (Web Real-Time Communication) Friday, September 20, 13
  27. 27. Com a adição do Media Types e o Media Queries ao CSS3 podemos ter um único conjunto de regras de CSS que mudam completamente nos mais diferentes dispositivos e tamanhos de telas. Layout Responsivo Friday, September 20, 13
  28. 28. Mais do que um Fluid Layout Friday, September 20, 13
  29. 29. www.fork-cms.com myrainbownursery.co.uk www.printgr.am Mais do que um Fluid Layout Friday, September 20, 13
  30. 30. Transitions No more JavaScript to donkey tasks Agora com o CSS você pode animar várias mudanças de estilos entre os diferentes níveis de interação. Hover Effects Transitions em Listas Planetarium Friday, September 20, 13
  31. 31. Animation Mostre-me algo mais animado do que isso! BetaFishIE http://demo.tutorialzine.com/2012/02/css3-product- showcase/#/upload CSS3 :A new hope Friday, September 20, 13
  32. 32. 3D Effects Movie Info Time Machine Swatch Book 3D Thumbnail Friday, September 20, 13
  33. 33. Apps Existe todo um novo mercado voltado para as novas possibilidades de aplicações com HMTL5, principalmente no mundo mobile. http://www.sencha.com/ http://phonegap.com/ Friday, September 20, 13
  34. 34. Além dos frameworks mobile as grandes empresas estão adotando o HMTL5 como possibilidade de camada de interface com o usuário, ou como plataforma. MacOs Dashboard Windows 8 Apps Gnome Desktop Apps Firefox OS Chrome Além dos sites Apps SO Friday, September 20, 13
  35. 35. <duvidas todas="true"> Apps Friday, September 20, 13
  36. 36. <obrigado> Apps Friday, September 20, 13

×