Html5 Sestinfo 2012
1 like3,117 views
The document discusses the evolution and adoption of HTML, focusing on HTML5 features and APIs, as well as its applications in mobile. It outlines the history of HTML, the introduction of new semantic elements, storage capabilities, file access, and connectivity through WebSockets. Additionally, it emphasizes improvements in multimedia integration and user interface elements in HTML5.
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. Web
- 6. 1.0 Web
- 7. Sintática
- 8. -
- 9. documentos 2006
- 10. Interpretações,
- 12. -
- 13. Web
- 14. Social inferências
- 15. e
- 16. relações Mashup 3
- 17. O que é HTML? HTML (HYPERTEXT MARKUP LANGUAGE - LINGUAGEM DE MARCAÇÃ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. 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
- 27. head script
- 32. meta
- 33. charset=utf-8
- 34. /
- 38. titleHtml5/title
- 40. /head
- 42. body
- 44. /body /html 9
- 45. HTML5 NovasAPIs Semântica Armazenamento Arquivo Conectividade Multimídia 3D/Gráficos Desempenho Apresentação 10
- 46. HTML5 - Semântica !doctype
- 47. html • Novos elementos de mídia. html
- 49. head • Novos elementos estruturais.
- 53. meta
- 54. charset=utf-8
- 55. /
- 59. titleHtml5/title • Novos atributos.
- 61. /head • Novos tipos de formulário.
- 63. body
- 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 offline. 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
- 106. console.log('Server:
- 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á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. HTML5 - 3D/Gráficos 22
- 140. HTML5 - 3D/Gráficos 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