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
Web1992
 -
 Web
 1.0Web
 Sintática
 -
 documentos
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
História HTML                             1991   HTML 1.0    1996 CSS1 + JavaScript                             1995   HTM...
Adoção do HTML5                                                                                       BASE                ...
Adoção do HTML5                                                                                       BASE                ...
Adoção do HTML5                                                                                       BASE                ...
Adoção do HTML5                                                                                       BASE                ...
Adoção do HTML5http://html5test.com
Adoção do HTML5   no mobile   http://mobilehtml5.org/
HTML5+      +
HTML5                                          Marcação                                                                   ...
 htmlhtml                                                                                                                 ...
 rel=stylesheet
 href=estilo.css
 
 head                                                                                                                     ...
 src=arquivo.js/script
 
 
 
 meta
 charset=utf-8
 /
 
 
 
 titleHtml5/title
 
 /head
 
 body
 
 /body/html
HTML5
HTML5                               NovasAPIsSemântica Armazenamento Arquivo    ConectividadeMultimídia   3D/Gráficos Desem...
HTML5 - Semântica•   Novos elementos de mídia.•   Novos elementos estruturais.•   Novos atributos.•   Novos tipos de formu...
HTML5 - Semântica                                           !doctype
 html•   Novos elementos de mídia.              html
 
 head•   Novos elementos estruturais.
Nächste SlideShare
Wird geladen in …5
×

Html5- Novidades, adoção e mobile.

2.598 Aufrufe

Veröffentlicht am

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

Esta palestra também pode ser vista em http://www.slideshare.net/rafaelsakurai

Veröffentlicht in: Technologie
  • Als Erste(r) kommentieren

Html5- Novidades, adoção e mobile.

  1. 1. SESTINFO 2012Universidade Metodista de São Paulo novidades, adoção e mobile. Rafael Guimarães Sakurai @rafaelsakurai Rodrigo Cascarrolho @rodrigocasca
  2. 2. AgendaWebEvolução do HTMLAdoção do HTML5HTML5APIs do HTML5HTML5 no mobileReferências
  3. 3. Web1992
  4. 4.  -
  5. 5.  Web
  6. 6.  1.0Web
  7. 7.  Sintática
  8. 8.  -
  9. 9.  documentos
  10. 10. Web1992
  11. 11.  -
  12. 12.  Web
  13. 13.  1.0Web
  14. 14.  Sintática
  15. 15.  -
  16. 16.  documentos 2006
  17. 17.  Interpretações,
  18. 18.   2003
  19. 19.  -
  20. 20.  Web
  21. 21.  Social inferências
  22. 22.  e
  23. 23.  relações Mashup
  24. 24. 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
  25. 25. História HTML
  26. 26. 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
  27. 27. 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/
  28. 28. 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/
  29. 29. 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/
  30. 30. 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/
  31. 31. Adoção do HTML5http://html5test.com
  32. 32. Adoção do HTML5 no mobile http://mobilehtml5.org/
  33. 33. HTML5+ +
  34. 34. HTML5 Marcação Apresentação Comportamento HTML + CSS3 + JavaScript!doctype
  35. 35.  htmlhtml link
  36. 36.  rel=stylesheet
  37. 37.  href=estilo.css
  38. 38.  
  39. 39.  head script
  40. 40.  src=arquivo.js/script
  41. 41.  
  42. 42.  
  43. 43.  
  44. 44.  meta
  45. 45.  charset=utf-8
  46. 46.  /
  47. 47.  
  48. 48.  
  49. 49.  
  50. 50.  titleHtml5/title
  51. 51.  
  52. 52.  /head
  53. 53.  
  54. 54.  body
  55. 55.  
  56. 56.  /body/html
  57. 57. HTML5
  58. 58. HTML5 NovasAPIsSemântica Armazenamento Arquivo ConectividadeMultimídia 3D/Gráficos Desempenho Apresentação
  59. 59. HTML5 - Semântica• Novos elementos de mídia.• Novos elementos estruturais.• Novos atributos.• Novos tipos de formulário.• Novos tipos de relação de links.• Nova semântica para a internacionalização.• Nova sintaxe de microdados para semântica adicional.
  60. 60. HTML5 - Semântica !doctype
  61. 61.  html• Novos elementos de mídia. html
  62. 62.  
  63. 63.  head• Novos elementos estruturais.
  64. 64.  
  65. 65.  
  66. 66.  
  67. 67.  meta
  68. 68.  charset=utf-8
  69. 69.  /
  70. 70.  
  71. 71.  
  72. 72.  
  73. 73.  titleHtml5/title• Novos atributos.
  74. 74.  
  75. 75.  /head• Novos tipos de formulário.
  76. 76.  
  77. 77.  body
  78. 78.  
  79. 79.  /body• Novos tipos de relação de links. /html• Nova semântica para a internacionalização.• Nova sintaxe de microdados para semântica adicional.
  80. 80. HTML5 - Semântica
  81. 81. HTML5 - Semântica HTML4 HTML5novas tagsfacilita uso de JavaScriptSEO - Search Engine Optimization
  82. 82. 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
  83. 83. 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
  84. 84. HTML5 - Armazenamento • Web Storage. • Cache da aplicação. • Indexed Database API. • Eventos online e offline.
  85. 85. HTML5 - Armazenamento Chave Valor guardar localStorage.setItem(“nome”, “Rafael Sakurai”); localStorage.getItem(“nome”); pegar localStorage.removeItem(“nome”); apagar localStorage.clear(); Web
  86. 86.  Storage limpar
  87. 87. 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.
  88. 88. HTML5 - Acesso ao Arquivo Criar um arquivo var
  89. 89.  fs
  90. 90.  =
  91. 91.  requestFileSystemSync(TEMPORARY,
  92. 92.  1024*1024);temporário var
  93. 93.  fileEntry
  94. 94.  =
  95. 95.  fs.root.getFile(log.txt,
  96. 96.  {create:
  97. 97.  true});var
  98. 98.  file
  99. 99.  =
  100. 100.  event.dataTransfer.files[0];getElementById(name).textContent
  101. 101.  =
  102. 102.  file.fileName;getElementById(size).textContent
  103. 103.  =
  104. 104.  file.fileSize;getElementById(type).textContent
  105. 105.  =
  106. 106.  file.type;getElementById(last).textContent
  107. 107.  =
  108. 108.  file.lastModifiedDate.toString();
  109. 109. HTML5 - Acesso ao Arquivo Criar um arquivo var
  110. 110.  fs
  111. 111.  =
  112. 112.  requestFileSystemSync(TEMPORARY,
  113. 113.  1024*1024);temporário var
  114. 114.  fileEntry
  115. 115.  =
  116. 116.  fs.root.getFile(log.txt,
  117. 117.  {create:
  118. 118.  true});var
  119. 119.  file
  120. 120.  =
  121. 121.  event.dataTransfer.files[0];getElementById(name).textContent
  122. 122.  =
  123. 123.  file.fileName;getElementById(size).textContent
  124. 124.  =
  125. 125.  file.fileSize;getElementById(type).textContent
  126. 126.  =
  127. 127.  file.type;getElementById(last).textContent
  128. 128.  =
  129. 129.  file.lastModifiedDate.toString();
  130. 130. 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).
  131. 131. HTML5 - Conectividade
  132. 132. HTML5 - ConectividadeWeb Socketvar
  133. 133.  connection
  134. 134.  =
  135. 135.  new
  136. 136.  WebSocket(ws://dominio/texto,
  137. 137.  [soap,
  138. 138.  xmpp]);connection.onmessage
  139. 139.  =
  140. 140.  function
  141. 141.  (e)
  142. 142.  { SSE
  143. 143.  
  144. 144.  console.log(Server:
  145. 145.  
  146. 146.  +
  147. 147.  e.data);};connection.send(your
  148. 148.  message); var
  149. 149.  source
  150. 150.  =
  151. 151.  new
  152. 152.  EventSource(/stats); source.addEventListener(connections,
  153. 153.  updateConnections,false); source.addEventListener(requests,
  154. 154.  updateRequests,
  155. 155.  false); source.addEventListener(uptime,
  156. 156.  updateUptime,
  157. 157.  false);
  158. 158. HTML5 - Multimídia
  159. 159. HTML5 - Multimídiaaudio
  160. 160.  id=id_audio
  161. 161.  src=arquivo.mp3
  162. 162.  controls/audio MP3, Wav, Ogg MP4, WebM, Oggvideo
  163. 163.  id=video
  164. 164.  autoplay=true
  165. 165.  controls
  166. 166.   source
  167. 167.  src=BigBuckBunny_640x360.mp4
  168. 168.  type=video/mp4//videovideo
  169. 169.  =
  170. 170.  document.getElementById(video);if
  171. 171.  (video.paused
  172. 172.  ==
  173. 173.  false)
  174. 174.  { video.pause();}
  175. 175.  else
  176. 176.  { video.play();}
  177. 177. 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();
  178. 178. 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();
  179. 179. HTML5 - 3D/Gráficos
  180. 180. HTML5 - 3D/Gráficos
  181. 181. HTML5 - 3D/Gráficos
  182. 182. HTML5 - 3D/Gráficos
  183. 183. 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.
  184. 184. HTML5 - Desempenho
  185. 185. HTML5 - Desempenho http://peacekeeper.futuremark.comhttp://ie.microsoft.com/testdrive/Views/SiteMap
  186. 186. HTML5 - Desempenho
  187. 187. HTML5 - Desempenho
  188. 188. HTML5 - Apresentação
  189. 189. HTML5 - Apresentação
  190. 190. HTML5 - Mobile
  191. 191. HTML5 - Mobile
  192. 192. HTML5 - Mobile• Microfone• Camera• Orientação (Landscape ou Portrait)• Tela multi toque• Gestos• GPS• Navegadores
  193. 193. HTML5 - Mobilemeta name=viewport content=width=device-width, initial-scale=2.0
  194. 194. HTML5 - Mobilemeta name=viewport content=width=device-width, initial-scale=2.0
  195. 195. 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; }}
  196. 196. 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; }}
  197. 197. Playgroundhttp://playground.html5rocks.com/
  198. 198. Playgroundhttp://playground.html5rocks.com/
  199. 199. Tutoriais http://www.html5rocks.com/pt/http://html5doctor.com/ http://www.html-5-tutorial.com/
  200. 200. Templates http://www.initializr.com/ http://br.html5boilerplate.com/http://html5boilerplate.com/mobile
  201. 201. 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/
  202. 202. 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
  203. 203. 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/
  204. 204. Obrigado!@rafaelsakurai @rodrigocasca
  205. 205. Obrigado!@rafaelsakurai @rodrigocasca

×