Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
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.620 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

×