Your SlideShare is downloading. ×
0
Html5 - O futuro da Web
Html5 - O futuro da Web
Html5 - O futuro da Web
Html5 - O futuro da Web
Html5 - O futuro da Web
Html5 - O futuro da Web
Html5 - O futuro da Web
Html5 - O futuro da Web
Html5 - O futuro da Web
Html5 - O futuro da Web
Html5 - O futuro da Web
Html5 - O futuro da Web
Html5 - O futuro da Web
Html5 - O futuro da Web
Html5 - O futuro da Web
Html5 - O futuro da Web
Html5 - O futuro da Web
Html5 - O futuro da Web
Html5 - O futuro da Web
Html5 - O futuro da Web
Html5 - O futuro da Web
Html5 - O futuro da Web
Html5 - O futuro da Web
Html5 - O futuro da Web
Html5 - O futuro da Web
Html5 - O futuro da Web
Html5 - O futuro da Web
Html5 - O futuro da Web
Html5 - O futuro da Web
Html5 - O futuro da Web
Html5 - O futuro da Web
Html5 - O futuro da Web
Html5 - O futuro da Web
Html5 - O futuro da Web
Html5 - O futuro da Web
Html5 - O futuro da Web
Html5 - O futuro da Web
Html5 - O futuro da Web
Html5 - O futuro da Web
Html5 - O futuro da Web
Html5 - O futuro da Web
Html5 - O futuro da Web
Html5 - O futuro da Web
Html5 - O futuro da Web
Html5 - O futuro da Web
Html5 - O futuro da Web
Html5 - O futuro da Web
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 futuro da Web

1,520

Published on

Palestra apresentada no I Congresso de Software Livre do Agreste de Pernambuco em Belo Jardim, no dia 30 de maio de 2010

Palestra apresentada no I Congresso de Software Livre do Agreste de Pernambuco em Belo Jardim, no dia 30 de maio de 2010

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,520
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
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. HTML 5 o futuro da web jose berardo – especializa treinamentos
  • 2. <ul><li>agenda: </li></ul><ul><ul><li>- de onde vem a web? </li></ul></ul><ul><ul><li>- e para onde ela vai? </li></ul></ul><ul><ul><li>- html? quem é esse cara? </li></ul></ul><ul><ul><li>- o que o html5 traz de novo? </li></ul></ul><ul><ul><li>- já devo usar agora? </li></ul></ul><ul><ul><li>- perguntas? </li></ul></ul>
  • 3. rede acadêmica utilizada para troca de informações entre universidades
  • 4. portais e-commerce características: Portifólios digitais - o que importa é a interface - o que importa é o conteúdo - o que importa é o software Clara divisão produtor x consumidor WEB 1.0
  • 5. interativa
  • 6. interativa colaborativa
  • 7. interativa colaborativa produtiva
  • 8. <ul><li>agenda: </li></ul><ul><ul><li>- de onde vem a web? </li></ul></ul><ul><ul><li>- e para onde ela vai? </li></ul></ul><ul><ul><li>- html? quem é esse cara? </li></ul></ul><ul><ul><li>- o que o html5 traz de novo? </li></ul></ul><ul><ul><li>- já devo usar agora? </li></ul></ul><ul><ul><li>- perguntas? </li></ul></ul>
  • 9. onde e como encontrar o que queremos ?
  • 10. qual o verdadeiro significado das coisas?
  • 11. web semântica “ I have a dream for the Web in wich computers become capable of analyzing all the data on the web”
  • 12. 2004 RDF resource description framework
  • 13. 5 2006 microformats
  • 14. html 2008
  • 15. <ul><li>agenda: </li></ul><ul><ul><li>- de onde vem a web? </li></ul></ul><ul><ul><li>- e para onde ela vai? </li></ul></ul><ul><ul><li>- html? quem é esse cara? </li></ul></ul><ul><ul><li>- o que o html5 traz de novo? </li></ul></ul><ul><ul><li>- já devo usar agora? </li></ul></ul><ul><ul><li>- perguntas? </li></ul></ul>
  • 16. H. T. M. L. H I P E R T E X T M A R K U P L A N G U A G E
  • 17. - criada por Tim Berners-Lee em 1993 - aplicação formal da s.g.m.l. - i.e.t.f. até a versão 2.0 em 1995 - Regida pelo W.3.C. desde 1996 - maiores fabricantes de browsers - diversos fabricantes de hardware - brasileiras: SERPRO e Nic.br - HTML 1.0, 2.0, 3.2, 4.01 H. T. M. L.
  • 18. - substituta natural do html - sintaxe mais rígida - versões 1.0 e 1.1 - versão 2.0 iniciada e abandonada - R.D.F.a. - para obter semântica - substituída pela HTML5 X. H. T. M. L.
  • 19. <ul><li>agenda: </li></ul><ul><ul><li>- de onde vem a web? </li></ul></ul><ul><ul><li>- e para onde ela vai? </li></ul></ul><ul><ul><li>- html? quem é esse cara? </li></ul></ul><ul><ul><li>- o que o html5 traz de novo? </li></ul></ul><ul><ul><li>- já devo usar agora? </li></ul></ul><ul><ul><li>- perguntas? </li></ul></ul>
  • 20. novas tags
  • 21. web como plataforma
  • 22. convergência e ubiquidade
  • 23. sem plugins
  • 24. <! DOCTYPE html> < html > < head > < meta charset = &quot;utf-8&quot; /> < title > Conteúdo editável </ title > </ head > < body > < header > < h1 contenteditable = &quot;true&quot; > Hello World </ h1 > </ header > </ body > </ html > conteúdo editável
  • 25. <!DOCTYPE html > < html > < head > < meta charset =&quot; utf-8 &quot; /> < title > Local storage </ title > < script src =&quot; lib/jquery/jquery-min.js &quot; ></ script > </ head > < body > < section > < ul id =&quot; itens &quot; contenteditable =&quot; true &quot; /></ ul > < input type =&quot; button &quot; id =&quot; limpar &quot; value =&quot; limpar &quot; /> </ section > </ body > </ html >
  • 26. < script > $ ( function (){ var conteudo = localStorage . getItem ( 'itens' ); $ ( '#itens' ). blur ( function (){ localStorage . setItem ( 'itens' , $ ( this ). html ()); }). html ( conteudo ? conteudo : &quot;<li/>&quot; ) $ ( '#limpar' ). click ( function () { localStorage . removeItem ( 'itens' ); $ ( '#itens' ). html ( &quot;<li/>&quot; ) }) }) </ script >
  • 27. <!DOCTYPE html > < html > < head > < meta charset =&quot; utf-8 &quot; /> < title > On/Offline </ title > </ head > < script src =&quot; lib/jquery/jquery.min.js &quot; ></ script > < body > < hea d er > < h1 id =&quot; estado &quot; /> </ header > </ body > </ html > OnLine e OffLine
  • 28. < script > $ ( document ). bind ( ' online ' , function () { $ ( '#estado' ). text ( 'Estou Online' ); }); $ ( document ). bind ( ' offline ' , function () { $ ( '#estado' ). text ( 'Estou Offline' ); }); </ script > < script > $ ( function (){ setInterval ( 'checarEstado()' , 200 ); }) function checarEstado (){ if ( navigator . onLine ) $ ( '#estado' ). html ( &quot;Estou Online&quot; ) else $ ( '#estado' ). html ( &quot;Estou Offline&quot; ) } </ script > eventos Checagem de estado
  • 29. Tag <canvas> + biblioteca Javascript rgraph
  • 30. <!DOCTYPE html > < html > < head > < meta charset =&quot; utf-8 &quot; > < title > Canvas </ title > < script src =&quot; lib/jquery/jquery.min.js &quot; ></ script > < style > canvas { display : block ; border : 1px dashed #000 } </ style > </ head > < body > < sectio n > < canvas id = &quot; quadro &quot; ></ canvas > </ section > </ body > </ html >
  • 31. < script > $ ( function () { $ ( '#quadro' ). click ( function ( event ) { var context = this . getContext ( '2d' ) context . strokeStyle = '#ABC' context . lineWidth = 3 // bom usar jquery - elementlocation var x = event . pageX - 10 var y = event . pageY - 10 context . moveTo ( x + 40 , y ) context . arc ( x , y , 40 , 0 , Math . PI * 2 , true ) context . stroke () }) }) </ script >
  • 32. <!DOCTYPE html > < html > < head > < meta charset =&quot; utf-8 &quot; > < title > Canvas </ title > < script src =&quot; lib/jquery/jquery.min.js &quot; ></ script > </ head > < body > < sectio n > < figure > < img id =&quot; foto &quot; src =&quot; lib/citeupg.jpg &quot; /> < figcaption > Da n s une cite universitaire </ figcaption > </ figure > < audio id =&quot; s om &quot; src =&quot; lib/cap02.ogg &quot; controls > Troca esse browser aí... </ audio > </ section > </ body > </ html >
  • 33. < script > $ ( function () { $ ( '#foto' ). toggle ( function () { $ ( '#som' ). get ( 0 ). play () ; }, function () { $ ( '#som' ). get ( 0 ). pause () ; }) }) </ script >
  • 34.  
  • 35. <!DOCTYPE html > < html > < head > < meta charset =&quot; utf-8 &quot; > < title > Video </ title > < script src =&quot; lib/jquery/jquery-1.3.2.min.js &quot; > </ script > </ head > < body > < section > < video id =&quot; vid1 &quot; > < source src =&quot; trailer_iphone.m4v &quot; /> < source src =&quot; media/bbb400p.ogv &quot; /> </ video > </ section > </ body > </ html >
  • 36. < script > var w = new Worker ( 'teste.js' ); w . onmessage = function ( event ) { $ ( '#conteudo' ). html ( event . data ); } </ script >
  • 37. Websockets new WebSocket('ws://servidor') flash js silverlight javafx python java php .net ruby
  • 38. <ul><li>agenda: </li></ul><ul><ul><li>- de onde vem a web? </li></ul></ul><ul><ul><li>- e para onde ela vai? </li></ul></ul><ul><ul><li>- html? quem é esse cara? </li></ul></ul><ul><ul><li>- o que o html5 traz de novo? </li></ul></ul><ul><ul><li>- já devo usar agora? </li></ul></ul><ul><ul><li>- perguntas? </li></ul></ul>
  • 39. roda nos principais browsers opera 10+, firefox 3.5+ Chrome 5+, Safari 4+
  • 40. mas ainda não no ie
  • 41. será mais rápido e suportará html 5 felizmente...
  • 42.  
  • 43. dica: 1 não complique a vida de seu cliente
  • 44. dica: 2 estude!
  • 45. não durma no ponto. dica: 3
  • 46. dúvidas?
  • 47. obrigado! jose berardo – especializa treinamentos

×