Como o HTML5 pretende revolucionar a forma
como desenvolvemos aplicativos, sejam eles para
web, iPhone/iPad ou sistemas na...
Cleiton Francisco
Gerente de Tecnologia
do Jus Navigandi

cleitonfco@gmail.com
Twitter: @cleitonfco




         não... eu...
HTML 4
HTML 5
HTML 5 no Google IO
Polêmica: Flash X HTML 5
http://blogdoiphone.com/2010/04/steve-jobs-publica-carta-
aberta-explicando-a-relacao-entre-apple-e-adobe/
O que o HTML 5 tem de
      novidade?
Áudio
<audio controls>
    <source src="demo-audio.ogg" />
    <source src="demo-audio.mp3" />
</audio>
Vídeo
<video width="320" height="240" controls
preload="none" poster="videoframe.jpg">
    <source src="demo-video.mp4"
type="vi...
Referências


http://dev.opera.com/articles/view/everything-you-need-
to-know-about-html5-video-and-audio/
http://www.webm...
Canvas / SVG
Referências
http://imasters.uol.com.br/artigo/16455/
desenvolvimento/html_5_na_pratica_canvas_parte_01/
http://diveintohtm...
Geolocation
Onde estou?
http://www.mozilla.com/firefox/geolocation/
Referências

http://maxheapsize.com/2009/04/11/getting-the-
browsers-geolocation-with-html-5/
http://html5demos.com/geo
ht...
Banco de Dados
Referências

http://net.tutsplus.com/tutorials/html-css-techniques/
quick-tip-learning-about-html5-local-storage/
http://w...
Novos elementos
  (semânticos)
Novos elementos
  (semânticos)
Novos elementos
  (semânticos)
Referências

http://blog.whatwg.org/supporting-new-elements-in-ie
http://html5doctor.com/the-figure-figcaption-elements/
htt...
Formulários
  mais inteligentes
 color, email, date, month, week, time,
datetime, number, range, search, tel, url
Referências

http://24ways.org/2009/have-a-field-day-with-html5-
forms
http://www.456bereastreet.com/archive/201004/
html5_...
Browsers
http://html5readiness.com
Perguntas?
Cleiton Francisco
 cleitonfco@gmail.com
  Twitter: @cleitonfco
HTML5: o que vem aí...
HTML5: o que vem aí...
Upcoming SlideShare
Loading in …5
×

HTML5: o que vem aí...

1,515 views

Published on

Como o HTML 5 pretende revolucionar a forma como desenvolvemos aplicativos, sejam eles para web, iPhone/iPad ou sistemas na Nuvem.

Published in: Technology
  • Be the first to comment

HTML5: o que vem aí...

  1. 1. Como o HTML5 pretende revolucionar a forma como desenvolvemos aplicativos, sejam eles para web, iPhone/iPad ou sistemas na Nuvem. por Cleiton Francisco
  2. 2. Cleiton Francisco Gerente de Tecnologia do Jus Navigandi cleitonfco@gmail.com Twitter: @cleitonfco não... eu ainda não trabalho no Google
  3. 3. HTML 4
  4. 4. HTML 5
  5. 5. HTML 5 no Google IO
  6. 6. Polêmica: Flash X HTML 5
  7. 7. http://blogdoiphone.com/2010/04/steve-jobs-publica-carta- aberta-explicando-a-relacao-entre-apple-e-adobe/
  8. 8. O que o HTML 5 tem de novidade?
  9. 9. Áudio
  10. 10. <audio controls>     <source src="demo-audio.ogg" />     <source src="demo-audio.mp3" /> </audio>
  11. 11. Vídeo
  12. 12. <video width="320" height="240" controls preload="none" poster="videoframe.jpg">     <source src="demo-video.mp4" type="video/mp4" />     <source src="demo-video.ogv" type="video/ogg" /> </video>
  13. 13. Referências http://dev.opera.com/articles/view/everything-you-need- to-know-about-html5-video-and-audio/ http://www.webmonkey.com/2010/02/ embed_audio_and_video_in_html_5_pages/ http://html5doctor.com/native-audio-in-the-browser/ http://diveintohtml5.org/video.html
  14. 14. Canvas / SVG
  15. 15. Referências http://imasters.uol.com.br/artigo/16455/ desenvolvimento/html_5_na_pratica_canvas_parte_01/ http://diveintohtml5.org/canvas.html http://tai-dev.blog.co.uk/2009/07/17/a-quick-test-of- the-html5-geolocation-api-with-firefox-3-5-spookily- accurate-on-my-work-pc-6533920/ http://www.alistapart.com/articles/get-ready-for-html-5/ http://srcware.com/programacao/html-5-introducao-a- tag-canvas/ http://realtech.burningbird.net/painting-the-web/svg/ svg-html
  16. 16. Geolocation
  17. 17. Onde estou? http://www.mozilla.com/firefox/geolocation/
  18. 18. Referências http://maxheapsize.com/2009/04/11/getting-the- browsers-geolocation-with-html-5/ http://html5demos.com/geo http://tai-dev.blog.co.uk/2009/07/17/a-quick-test-of- the-html5-geolocation-api-with-firefox-3-5-spookily- accurate-on-my-work-pc-6533920/
  19. 19. Banco de Dados
  20. 20. Referências http://net.tutsplus.com/tutorials/html-css-techniques/ quick-tip-learning-about-html5-local-storage/ http://www.thecssninja.com/javascript/how-to-create- offline-webapps-on-the-iphone http://www.webreference.com/authoring/languages/ html/HTML5-Client-Side/ http://dev.w3.org/html5/webstorage/
  21. 21. Novos elementos (semânticos)
  22. 22. Novos elementos (semânticos)
  23. 23. Novos elementos (semânticos)
  24. 24. Referências http://blog.whatwg.org/supporting-new-elements-in-ie http://html5doctor.com/the-figure-figcaption-elements/ http://html5doctor.com/why-designers-should-care- about-html5/ http://www.brucelawson.co.uk/2010/html5-articles-and- sections-whats-the-difference/ http://orderedlist.com/our-writing/resources/html-css/ structural-tags-in-html5/
  25. 25. Formulários mais inteligentes color, email, date, month, week, time, datetime, number, range, search, tel, url
  26. 26. Referências http://24ways.org/2009/have-a-field-day-with-html5- forms http://www.456bereastreet.com/archive/201004/ html5_input_types/ http://net.tutsplus.com/tutorials/html-css-techniques/ rethinking-forms-in-html5/ http://diveintohtml5.org/forms.html
  27. 27. Browsers
  28. 28. http://html5readiness.com
  29. 29. Perguntas?
  30. 30. Cleiton Francisco cleitonfco@gmail.com Twitter: @cleitonfco

×