Html5 Sestinfo 2012
1 like3,114 views
Palestra HTML5- Novidades, ado巽達o e mobile apresentada durante a SestInfo 2012 na Universidade Metodista de S達o Paulo.
Html5 Sestinfo 2012
- 1. SESTINFO 2012 Universidade Metodista de S達o Paulo novidades, ado巽達o e mobile. Rafael Guimar達es Sakurai @rafaelsakurai Rodrigo Cascarrolho @rodrigocasca 1
- 2. Agenda Web Evolu巽達o do HTML Ado巽達o do HTML5 HTML5 APIs do HTML5 HTML5 no mobile Refer棚ncias 2
- 3. Web 1992
- 4. 油-
- 5. 油安艶恢
- 6. 油1.0 Web
- 7. 油皆庄稼岳叩岳庄界温
- 8. 油-
- 9. 油糸看界顎馨艶稼岳看壊 2006
- 10. 油鴛稼岳艶姻沿姻艶岳温巽探艶壊,
- 11. 油 2003
- 12. 油-
- 13. 油安艶恢
- 14. 油Social 庄稼韓艶姻棚稼界庄温壊
- 15. 油e
- 16. 油rela巽探es Mashup 3
- 17. O que 辿 HTML? HTML (HYPERTEXT MARKUP LANGUAGE - LINGUAGEM DE MARCAO DE HIPERTEXTO) UMA LINGUAGEM DE MARCAO UTILIZADA PARA PRODUZIR PGINAS NA WEB E SO INTERPRETADOS POR NAVEGADORES. (HTTP://PT.WIKIPEDIA.ORG/WIKI/HTML) HTML HEAD TITLETTULO DA PGINA/TITLE META NAME=KEYWORDS CONTENT=HTML, CSS, XML / /HEAD BODY H1PRIMEIRO NVEL D TTULO./H1 PAPENAS UM PARGRAFO./P /BODY /HTML 4
- 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 Tableless HTML5 - WHATWG 2004 XHTML 2.0 - W3C 2005 Ajax 2007 Uni達o WHATWG + W3C HTML5 - FINAL 2014 100% completo* 2022 5
- 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 I CONT SVG TR ANS Y ENTE DITA E D ISPLA BLE TABL ES CORS MED IA QUERI HTML5 PARSING MULTIPLE BACKGROUNDS http://html5readiness.com/ 6
- 21. Ado巽達o do HTML5 no mobile http://mobilehtml5.org/ 8
- 22. HTML5 Marca巽達o Apresenta巽達o Comportamento HTML + CSS3 + JavaScript !doctype
- 23. 油html html link
- 24. 油rel=stylesheet
- 25. 油href=estilo.css
- 26. 油
- 27. 油head script
- 29. 油
- 30. 油
- 31. 油
- 32. 油meta
- 33. 油charset=utf-8
- 34. 油/
- 35. 油
- 36. 油
- 37. 油
- 39. 油
- 40. 油/head
- 41. 油
- 42. 油body
- 43. 油
- 44. 油/body /html 9
- 45. HTML5 NovasAPIs Sem但ntica Armazenamento Arquivo Conectividade Multim鱈dia 3D/Gr叩鍖cos Desempenho Apresenta巽達o 10
- 46. HTML5 - Sem但ntica !doctype
- 47. 油html Novos elementos de m鱈dia. html
- 48. 油
- 49. 油head Novos elementos estruturais.
- 50. 油
- 51. 油
- 52. 油
- 53. 油meta
- 54. 油charset=utf-8
- 55. 油/
- 56. 油
- 57. 油
- 58. 油
- 59. 油titleHtml5/title Novos atributos.
- 60. 油
- 61. 油/head Novos tipos de formul叩rio.
- 62. 油
- 63. 油body
- 64. 油
- 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. HTML5 - Sem但ntica HTML4 HTML5 novas tags facilita uso de JavaScript SEO - Search Engine Optimization 12
- 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 / 油油油 vos No input type=color / 油油油 油油油 input type=submit value=Enviar / /form 13
- 68. HTML5 - Armazenamento Web Storage. Cache da aplica巽達o. Indexed Database API. Eventos online e of鍖ine. 14
- 69. HTML5 - Armazenamento Chave Valor guardar localStorage.setItem(nome, Rafael Sakurai); localStorage.getItem(nome); pegar localStorage.removeItem(nome); apagar localStorage.clear(); Web
- 70. 油Storage limpar 15
- 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. HTML5 - Acesso ao Arquivo Criar um arquivo var
- 73. 油fs
- 74. 油=
- 76. 油1024*1024); tempor叩rio var
- 77. 油fileEntry
- 78. 油=
- 80. 油{create:
- 81. 油true}); var
- 82. 油file
- 83. 油=
- 85. 油=
- 87. 油=
- 89. 油=
- 91. 油=
- 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. HTML5 - Conectividade Web Socket var
- 95. 油connection
- 96. 油=
- 97. 油new
- 99. 油['soap',
- 101. 油=
- 102. 油function
- 103. 油(e)
- 104. 油{ SSE
- 105. 油
- 107. 油'
- 108. 油+
- 110. 油message'); var
- 111. 油source
- 112. 油=
- 113. 油new
- 114. 油EventSource('/stats'); source.addEventListener('connections',
- 115. 油updateConnections,false); source.addEventListener('requests',
- 116. 油updateRequests,
- 117. 油false); source.addEventListener('uptime',
- 118. 油updateUptime,
- 119. 油false); 19
- 121. 油id=id_audio
- 122. 油src=arquivo.mp3
- 123. 油controls/audio MP3, Wav, Ogg MP4, WebM, Ogg video
- 124. 油id=video
- 125. 油autoplay=true
- 126. 油controls
- 127. 油 source
- 130. 油=
- 132. 油(video.paused
- 133. 油==
- 134. 油false)
- 135. 油{ video.pause(); }
- 136. 油else
- 137. 油{ video.play(); } 20
- 138. HTML5 - 3D/Gr叩鍖cos 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. HTML5 - 3D/Gr叩鍖cos 22
- 140. HTML5 - 3D/Gr叩鍖cos 23
- 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. HTML5 - Desempenho http://peacekeeper.futuremark.com http://ie.microsoft.com/testdrive/Views/SiteMap 25
- 143. HTML5 - Desempenho 26
- 144. HTML5 - Apresenta巽達o 27
- 145. HTML5 - Mobile 28
- 146. HTML5 - Mobile Microfone Camera Orienta巽達o (Landscape ou Portrait) Tela multi toque Gestos GPS Navegadores 29
- 147. HTML5 - Mobile meta name=viewport content=width=device-width, initial-scale=2.0 30
- 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
- 150. Tutoriais http://www.html5rocks.com/pt/ http://html5doctor.com/ http://www.html-5-tutorial.com/ 33
- 151. Templates http://www.initializr.com/ http://br.html5boilerplate.com/ http://html5boilerplate.com/mobile 34
- 155. Obrigado! @rafaelsakurai @rodrigocasca 38