Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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

5,162 views

Published on

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

  • Be the first to comment

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

×