Html5- Novidades, adoção e mobile.

2. SESTINFO 2012 Universidade Metodista de São Paulo novidades, adoção e mobile. Rafael Guimarães Sakurai @rafaelsakurai Rodrigo Cascarrolho @rodrigocasca

3. Agenda Web Evolução do HTML Adoção do HTML5 HTML5 APIs do HTML5 HTML5 no mobile Referências

4. Web 1992

6. Web

7. 1.0 Web

8. Sintática

10. documentos

11. Web 1992

13. Web

14. 1.0 Web

15. Sintática

17. documentos 2006

18. Interpretações,

19. 2003

21. Web

22. Social inferências

24. relações Mashup

25. 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

26. História HTML

27. 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

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 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/

32. Adoção do HTML5 http://html5test.com

33. Adoção do HTML5 no mobile http://mobilehtml5.org/

34. HTML5 + +

35. HTML5 Marcação Apresentação Comportamento HTML + CSS3 + JavaScript !doctype

36. html html link

37. rel=stylesheet

38. href=estilo.css

40. head script

41. src=arquivo.js/script

45. meta

46. charset=utf-8

51. titleHtml5/title

53. /head

55. body

57. /body /html

58. HTML5

59. HTML5 NovasAPIs Semântica Armazenamento Arquivo Conectividade Multimídia 3D/Gráﬁcos Desempenho Apresentação

60. 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.

61. HTML5 - Semântica !doctype

62. html • Novos elementos de mídia. html

64. head • Novos elementos estruturais.

68. meta

69. charset=utf-8

74. titleHtml5/title • Novos atributos.

76. /head • Novos tipos de formulário.

78. body

80. /body • Novos tipos de relação de links. /html • Nova semântica para a internacionalização. • Nova sintaxe de microdados para semântica adicional.

81. HTML5 - Semântica

82. HTML5 - Semântica HTML4 HTML5 novas tags facilita uso de JavaScript SEO - Search Engine Optimization

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 / vos No input type=color / input type=submit value=Enviar / /form

84. 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

85. HTML5 - Armazenamento • Web Storage. • Cache da aplicação. • Indexed Database API. • Eventos online e ofﬂine.

86. HTML5 - Armazenamento Chave Valor guardar localStorage.setItem(“nome”, “Rafael Sakurai”); localStorage.getItem(“nome”); pegar localStorage.removeItem(“nome”); apagar localStorage.clear(); Web

87. Storage limpar

88. 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.

89. HTML5 - Acesso ao Arquivo Criar um arquivo var

90. fs

92. requestFileSystemSync(TEMPORARY,

93. 1024*1024); temporário var

94. fileEntry

96. fs.root.getFile('log.txt',

97. {create:

98. true}); var

99. file

100. =

101. event.dataTransfer.files[0]; getElementById('name').textContent

102. =

103. file.fileName; getElementById('size').textContent

104. =

105. file.fileSize; getElementById('type').textContent

106. =

107. file.type; getElementById('last').textContent

108. =

109. file.lastModifiedDate.toString();

110. HTML5 - Acesso ao Arquivo Criar um arquivo var

111. fs

112. =

113. requestFileSystemSync(TEMPORARY,

114. 1024*1024); temporário var

115. fileEntry

116. =

117. fs.root.getFile('log.txt',

118. {create:

119. true}); var

120. file

121. =

122. event.dataTransfer.files[0]; getElementById('name').textContent

123. =

124. file.fileName; getElementById('size').textContent

125. =

126. file.fileSize; getElementById('type').textContent

127. =

128. file.type; getElementById('last').textContent

129. =

130. file.lastModifiedDate.toString();

131. 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).

132. HTML5 - Conectividade

133. HTML5 - Conectividade Web Socket var

134. connection

135. =

136. new

137. WebSocket('ws://dominio/texto',

138. ['soap',

139. 'xmpp']); connection.onmessage

140. =

141. function

142. (e)

143. { SSE

145. console.log('Server:

146. '

147. +

148. e.data); }; connection.send('your

149. message'); var

150. source

151. =

152. new

153. EventSource('/stats'); source.addEventListener('connections',

154. updateConnections,false); source.addEventListener('requests',

155. updateRequests,

156. false); source.addEventListener('uptime',

157. updateUptime,

158. false);

159. HTML5 - Multimídia

160. HTML5 - Multimídia audio

161. id=id_audio

162. src=arquivo.mp3

163. controls/audio MP3, Wav, Ogg MP4, WebM, Ogg video

164. id=video

165. autoplay=true

166. controls

167. source

168. src=BigBuckBunny_640x360.mp4

169. type=video/mp4/ /video video

170. =

171. document.getElementById('video'); if

172. (video.paused

173. ==

174. false)

175. { video.pause(); }

176. else

177. { video.play(); }

178. 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();

179. 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();

180. HTML5 - 3D/Gráﬁcos

184. 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.

185. HTML5 - Desempenho

186. HTML5 - Desempenho http://peacekeeper.futuremark.com http://ie.microsoft.com/testdrive/Views/SiteMap

189. HTML5 - Apresentação

190. HTML5 - Apresentação

191. HTML5 - Mobile

192. HTML5 - Mobile

193. HTML5 - Mobile • Microfone • Camera • Orientação (Landscape ou Portrait) • Tela multi toque • Gestos • GPS • Navegadores

194. HTML5 - Mobile meta name=viewport content=width=device-width, initial-scale=2.0

195. HTML5 - Mobile meta name=viewport content=width=device-width, initial-scale=2.0

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. 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; } }

198. Playground http://playground.html5rocks.com/

199. Playground http://playground.html5rocks.com/

200. Tutoriais http://www.html5rocks.com/pt/ http://html5doctor.com/ http://www.html-5-tutorial.com/

201. Templates http://www.initializr.com/ http://br.html5boilerplate.com/ http://html5boilerplate.com/mobile

202. Referências http://html5test.com/compare/browser/ff12/chrome18/ ie09.html http://en.wikipedia.org/wiki/HTML5 http://www.html5rocks.com http://www.broken-links.com/2009/10/06/building- html5-video-controls-with-javascript/ http://html5test.com/ http://madebyevan.com/webgl-water/

203. Referências http://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.html http://ie.microsoft.com/testdrive/Graphics/CanvasPinball/ Default.html http://wolfenstein.bethsoft.com/game_EU.php

204. Referências http://getﬁrebug.com/ http://www.opera.com/dragonﬂy/ 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/

205. Obrigado! @rafaelsakurai @rodrigocasca

206. Obrigado! @rafaelsakurai @rodrigocasca

Html5- Novidades, adoção e mobile.

Recomendados

Recomendados

Mais conteúdo relacionado

Mais de Rodrigo Cascarrolho

Mais de Rodrigo Cascarrolho (8)

Último

Último (20)

Html5- Novidades, adoção e mobile.

Notas do Editor