SESTINFO 2012Universidade Metodista de São Paulo               novidades, adoção e mobile.                      Rafael Gui...
AgendaWebEvolução do HTMLAdoção do HTML5HTML5APIs do HTML5HTML5 no mobileReferências                         2
Web1992
 -
 Web
 1.0Web
 Sintática
 -
 documentos                                                                                                               ...
 Interpretações,
       2003
 -
 Web
 Social      inferências
 e
 relações                                            Mashup                                                               ...
O que é HTML?  HTML (HYPERTEXT MARKUP LANGUAGE - LINGUAGEM DEMARCAÇÃO DE HIPERTEXTO) É UMA LINGUAGEM DE MARCAÇÃO    UTILIZ...
História HTML                             1991   HTML 1.0    1996 CSS1 + JavaScript                             1995   HTM...
Adoção do HTML5                                                                                       BASE                ...
Adoção do HTML5http://html5test.com                       7
Adoção do HTML5   no mobile   http://mobilehtml5.org/                             8
HTML5                                          Marcação                                                                   ...
 htmlhtml                                                                                                                 ...
 rel=stylesheet
 href=estilo.css
 
 head                                                                                                                     ...
 src=arquivo.js/script
 
 
 
 meta
 charset=utf-8
 /
 
 
 
 titleHtml5/title
Upcoming SlideShare
Loading in...5
×

Html5 Sestinfo 2012

4,765

Published on

Palestra HTML5- Novidades, adoção e mobile apresentada durante a SestInfo 2012 na Universidade Metodista de São Paulo.

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,765
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
45
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Html5 Sestinfo 2012

  1. 1. SESTINFO 2012Universidade Metodista de São Paulo novidades, adoção e mobile. Rafael Guimarães Sakurai @rafaelsakurai Rodrigo Cascarrolho @rodrigocasca 1
  2. 2. AgendaWebEvolução do HTMLAdoção do HTML5HTML5APIs do HTML5HTML5 no mobileReferências 2
  3. 3. Web1992
  4. 4.  -
  5. 5.  Web
  6. 6.  1.0Web
  7. 7.  Sintática
  8. 8.  -
  9. 9.  documentos 2006
  10. 10.  Interpretações,
  11. 11.   2003
  12. 12.  -
  13. 13.  Web
  14. 14.  Social inferências
  15. 15.  e
  16. 16.  relações Mashup 3
  17. 17. O que é HTML? HTML (HYPERTEXT MARKUP LANGUAGE - LINGUAGEM DEMARCAÇÃO DE HIPERTEXTO) É UMA LINGUAGEM DE MARCAÇÃO UTILIZADA PARA PRODUZIR PÁGINAS NA WEB E SÃO INTERPRETADOS POR NAVEGADORES. (HTTP://PT.WIKIPEDIA.ORG/WIKI/HTML) HTML HEAD TITLETÍTULO DA PÁGINA/TITLE META NAME=KEYWORDS CONTENT=HTML, CSS, XML / /HEAD BODY H1PRIMEIRO NÍVEL DÉ TÍTULO./H1 PAPENAS UM PARÁGRAFO./P /BODY /HTML 4
  18. 18. História HTML 1991 HTML 1.0 1996 CSS1 + JavaScript 1995 HTML 2.0 1998 CSS2 1997 jan/HTML 3.2 - dez/HTML4 1999 HTML 4.01 2000 XHTML 1.0 2001 XHTML 1.1 2002 TablelessHTML5 - WHATWG 2004 XHTML 2.0 - W3C 2005 Ajax 2007 União WHATWG + W3C HTML5 - FINAL 2014 100% completo* 2022 5
  19. 19. Adoção do HTML5 BASE QUERY SELECTOR DIUS DATA WEB S ND MS BORDER RA OU OR GR IS DR XED TORAG CK SF A UR W AUD G EB BA CA AN VID S INDE AN NS TA W N TR AS D IO W O O T E DA TI VA EB RK EO S EN DR M T 3D G A SO ER OR ON SV M O C CK S NI NSF P ET A A T ED OU T FO SV GF RM TR NERA X LAY GEO ILT S GE X BO LO ER E CA TIO S FLE FAC NT- N @FO TIO NS ICONT SVG TR ANS Y ENTE DITA E D ISPLA BLE TABL ES CORS MED IA QUERI HTML5 PARSING MULTIPLE BACKGROUNDS http://html5readiness.com/ 6
  20. 20. Adoção do HTML5http://html5test.com 7
  21. 21. Adoção do HTML5 no mobile http://mobilehtml5.org/ 8
  22. 22. HTML5 Marcação Apresentação Comportamento HTML + CSS3 + JavaScript!doctype
  23. 23.  htmlhtml link
  24. 24.  rel=stylesheet
  25. 25.  href=estilo.css
  26. 26.  
  27. 27.  head script
  28. 28.  src=arquivo.js/script
  29. 29.  
  30. 30.  
  31. 31.  
  32. 32.  meta
  33. 33.  charset=utf-8
  34. 34.  /
  35. 35.  
  36. 36.  
  37. 37.  
  38. 38.  titleHtml5/title
  39. 39.  
  40. 40.  /head
  41. 41.  
  42. 42.  body
  43. 43.  
  44. 44.  /body/html 9
  45. 45. HTML5 NovasAPIsSemântica Armazenamento Arquivo ConectividadeMultimídia 3D/Gráficos Desempenho Apresentação 10
  46. 46. HTML5 - Semântica !doctype
  47. 47.  html• Novos elementos de mídia. html
  48. 48.  
  49. 49.  head• Novos elementos estruturais.
  50. 50.  
  51. 51.  
  52. 52.  
  53. 53.  meta
  54. 54.  charset=utf-8
  55. 55.  /
  56. 56.  
  57. 57.  
  58. 58.  
  59. 59.  titleHtml5/title• Novos atributos.
  60. 60.  
  61. 61.  /head• Novos tipos de formulário.
  62. 62.  
  63. 63.  body
  64. 64.  
  65. 65.  /body• Novos tipos de relação de links. /html• Nova semântica para a internacionalização.• Nova sintaxe de microdados para semântica adicional. 11
  66. 66. HTML5 - Semântica HTML4 HTML5novas tagsfacilita uso de JavaScriptSEO - Search Engine Optimization 12
  67. 67. HTML5 - Semântica Sem necessidade de JS para validações form         label for=CEPCEP:             input type=”text” id=CEP required pattern=d{5}-?d{3} /         /label         input type=email required placeholder=”seunome@dominio.com / t n pu osi tip     input type=number name=quantity min=1 max=5 /     vosNo input type=color /         input type=submit value=Enviar / /form 13
  68. 68. HTML5 - Armazenamento • Web Storage. • Cache da aplicação. • Indexed Database API. • Eventos online e offline. 14
  69. 69. HTML5 - Armazenamento Chave Valor guardar localStorage.setItem(“nome”, “Rafael Sakurai”); localStorage.getItem(“nome”); pegar localStorage.removeItem(“nome”); apagar localStorage.clear(); Web
  70. 70.  Storage limpar 15
  71. 71. HTML5 - Acesso ao Arquivo • Ler arquivo (síncrono ou assíncrono). • Gravar arquivo temporário. • Arrastar e soltar (drag-and-drop). • Upload. • Validações (formato, tamanho, etc). • Gravação off-line. 16
  72. 72. HTML5 - Acesso ao Arquivo Criar um arquivo var
  73. 73.  fs
  74. 74.  =
  75. 75.  requestFileSystemSync(TEMPORARY,
  76. 76.  1024*1024);temporário var
  77. 77.  fileEntry
  78. 78.  =
  79. 79.  fs.root.getFile(log.txt,
  80. 80.  {create:
  81. 81.  true});var
  82. 82.  file
  83. 83.  =
  84. 84.  event.dataTransfer.files[0];getElementById(name).textContent
  85. 85.  =
  86. 86.  file.fileName;getElementById(size).textContent
  87. 87.  =
  88. 88.  file.fileSize;getElementById(type).textContent
  89. 89.  =
  90. 90.  file.type;getElementById(last).textContent
  91. 91.  =
  92. 92.  file.lastModifiedDate.toString(); 17
  93. 93. HTML5 - Conectividade• Web Sockets e Server-Sent Events(SSE).• Web Sockets são bidirecionais.• SSE - push.• Aplicação: chat, jogos, monitoramento (jogos, saúde, processos de TI). 18
  94. 94. HTML5 - ConectividadeWeb Socketvar
  95. 95.  connection
  96. 96.  =
  97. 97.  new
  98. 98.  WebSocket(ws://dominio/texto,
  99. 99.  [soap,
  100. 100.  xmpp]);connection.onmessage
  101. 101.  =
  102. 102.  function
  103. 103.  (e)
  104. 104.  { SSE
  105. 105.  
  106. 106.  console.log(Server:
  107. 107.  
  108. 108.  +
  109. 109.  e.data);};connection.send(your
  110. 110.  message); var
  111. 111.  source
  112. 112.  =
  113. 113.  new
  114. 114.  EventSource(/stats); source.addEventListener(connections,
  115. 115.  updateConnections,false); source.addEventListener(requests,
  116. 116.  updateRequests,
  117. 117.  false); source.addEventListener(uptime,
  118. 118.  updateUptime,
  119. 119.  false); 19
  120. 120. HTML5 - Multimídiaaudio
  121. 121.  id=id_audio
  122. 122.  src=arquivo.mp3
  123. 123.  controls/audio MP3, Wav, Ogg MP4, WebM, Oggvideo
  124. 124.  id=video
  125. 125.  autoplay=true
  126. 126.  controls
  127. 127.   source
  128. 128.  src=BigBuckBunny_640x360.mp4
  129. 129.  type=video/mp4//videovideo
  130. 130.  =
  131. 131.  document.getElementById(video);if
  132. 132.  (video.paused
  133. 133.  ==
  134. 134.  false)
  135. 135.  { video.pause();}
  136. 136.  else
  137. 137.  { video.play();} 20
  138. 138. HTML5 - 3D/Gráficos var canvas = document.getElementById(cubo); var context = canvas.getContext(2d);2D Canvas context.beginPath(); context.lineWidth = 4; context.clearRect (75, 75, 70, 70); context.strokeRect(75, 75, 70, 70); context.clearRect (50, 50, 70, 70); context.strokeRect(50, 50, 70, 70); context.clearRect (75, 75, 45, 45); context.strokeRect(75, 75, 45, 45); context.moveTo(75, 75); context.lineTo(50, 50); context.moveTo(146, 75); context.lineTo(120, 50); context.moveTo(50, 120); context.lineTo(75, 145); context.moveTo(120, 120); context.lineTo(145, 145); context.stroke(); context.closePath(); 21
  139. 139. HTML5 - 3D/Gráficos 22
  140. 140. HTML5 - 3D/Gráficos 23
  141. 141. HTML5 - Desempenho• Aceleração do hardware.• Cache local e database indexada.• Retorna de chamadas assíncronas.• Sprites (muitas imagens em um único arquivo).• Diminuir tamanho de js, css e html. 24
  142. 142. HTML5 - Desempenho http://peacekeeper.futuremark.comhttp://ie.microsoft.com/testdrive/Views/SiteMap 25
  143. 143. HTML5 - Desempenho 26
  144. 144. HTML5 - Apresentação 27
  145. 145. HTML5 - Mobile 28
  146. 146. HTML5 - Mobile• Microfone• Camera• Orientação (Landscape ou Portrait)• Tela multi toque• Gestos• GPS• Navegadores 29
  147. 147. HTML5 - Mobilemeta name=viewport content=width=device-width, initial-scale=2.0 30
  148. 148. HTML5 - Mobile@media screen and (orientation: portrait) { #orientation:after { content: Portrait orientation; } body { text-align: center; font-weight: bold; color: blue; }}@media screen and (orientation: landscape) { #orientation:after { content: Landscape orientation; } body { text-align: center; font-weight: bold; color: red; }} 31
  149. 149. Playgroundhttp://playground.html5rocks.com/ 32
  150. 150. Tutoriais http://www.html5rocks.com/pt/http://html5doctor.com/ http://www.html-5-tutorial.com/ 33
  151. 151. Templates http://www.initializr.com/ http://br.html5boilerplate.com/http://html5boilerplate.com/mobile 34
  152. 152. Referênciashttp://html5test.com/compare/browser/ff12/chrome18/ie09.htmlhttp://en.wikipedia.org/wiki/HTML5http://www.html5rocks.comhttp://www.broken-links.com/2009/10/06/building-html5-video-controls-with-javascript/http://html5test.com/http://madebyevan.com/webgl-water/ 35
  153. 153. Referênciashttp://chrome.angrybirds.com/http://www.benjoffe.com/code/games/torus/http://www.cuttherope.ie/http://agent8ball.com/http://bejeweled.popcap.com/html5/0.9.12.9490/html5/Bejeweled.htmlhttp://ie.microsoft.com/testdrive/Graphics/CanvasPinball/Default.htmlhttp://wolfenstein.bethsoft.com/game_EU.php 36
  154. 154. Referênciashttp://getfirebug.com/http://www.opera.com/dragonfly/http://www.smushit.com/ysmush.it/https://developers.google.com/web-toolkit/speedtracer/http://yslow.org/https://developers.google.com/speed/pagespeed/http://peacekeeper.futuremark.com/http://ie.microsoft.com/testdrive/Views/SiteMap/ 37
  155. 155. Obrigado!@rafaelsakurai @rodrigocasca 38
  1. A particular slide catching your eye?

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

×