Html5- Novidades, adoção e mobile.

2,573 views

Published on

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

Published in: Technology
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,573
On SlideShare
0
From Embeds
0
Number of Embeds
560
Actions
Shares
0
Downloads
71
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • 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

    ×