Your SlideShare is downloading. ×
HTML5, o que já é e o que pode ser.
HTML5, o que já é e o que pode ser.
HTML5, o que já é e o que pode ser.
HTML5, o que já é e o que pode ser.
HTML5, o que já é e o que pode ser.
HTML5, o que já é e o que pode ser.
HTML5, o que já é e o que pode ser.
HTML5, o que já é e o que pode ser.
HTML5, o que já é e o que pode ser.
HTML5, o que já é e o que pode ser.
HTML5, o que já é e o que pode ser.
HTML5, o que já é e o que pode ser.
HTML5, o que já é e o que pode ser.
HTML5, o que já é e o que pode ser.
HTML5, o que já é e o que pode ser.
HTML5, o que já é e o que pode ser.
HTML5, o que já é e o que pode ser.
HTML5, o que já é e o que pode ser.
HTML5, o que já é e o que pode ser.
HTML5, o que já é e o que pode ser.
HTML5, o que já é e o que pode ser.
HTML5, o que já é e o que pode ser.
HTML5, o que já é e o que pode ser.
HTML5, o que já é e o que pode ser.
HTML5, o que já é e o que pode ser.
HTML5, o que já é e o que pode ser.
HTML5, o que já é e o que pode ser.
HTML5, o que já é e o que pode ser.
HTML5, o que já é e o que pode ser.
HTML5, o que já é e o que pode ser.
HTML5, o que já é e o que pode ser.
HTML5, o que já é e o que pode ser.
HTML5, o que já é e o que pode ser.
HTML5, o que já é e o que pode ser.
HTML5, o que já é e o que pode ser.
HTML5, o que já é e o que pode ser.
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

682

Published on

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

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
682
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
14
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Mozart Diniz mozart.diniz@gmail.com @mozartdiniz Friday, September 20, 13
  • 2. Friday, September 20, 13
  • 3. Friday, September 20, 13
  • 4. Friday, September 20, 13
  • 5. WHATWG Friday, September 20, 13
  • 6. HMTL + CSS + JS + + Friday, September 20, 13
  • 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. <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. <header></header> <navigation></navigation> <article> <section> </section> </article> <aside></aside> <foorter></foorter> Agora Friday, September 20, 13
  • 10. Muitas novas <tag>s Friday, September 20, 13
  • 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. <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. 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. Balldroppings.com Tuner | Instinct Soundcloud.com Audio Simples e poderoso como o vídeo. Friday, September 20, 13
  • 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. 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. Audio Api http://chromium.googlecode.com http://chromium.googlecode.com Friday, September 20, 13
  • 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. Kaleidoscope Jscloth Cnn-ecosphere.com Canvas Friday, September 20, 13
  • 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. Picozu Tenha seu próprio Photoshop online. Canvas Friday, September 20, 13
  • 22. Primeiro, alguns clássicos. Atari Arcade Games Games Canvas + Audio +Vídeo + Muito JavaScript Friday, September 20, 13
  • 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. Muita coisa pode acontecer com um pouco de <canvas> e uma web cam. Webcamtoy.com Devices Friday, September 20, 13
  • 25. Easysubtitles.com Armadillog File API Não é só um upload com drag and drop. Friday, September 20, 13
  • 26. WebRTC | demo WebRTC (Web Real-Time Communication) Friday, September 20, 13
  • 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. Mais do que um Fluid Layout Friday, September 20, 13
  • 29. www.fork-cms.com myrainbownursery.co.uk www.printgr.am Mais do que um Fluid Layout Friday, September 20, 13
  • 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. 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. 3D Effects Movie Info Time Machine Swatch Book 3D Thumbnail Friday, September 20, 13
  • 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. 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. <duvidas todas="true"> Apps Friday, September 20, 13
  • 36. <obrigado> Apps Friday, September 20, 13

×