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

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

5. -

6. Web

7. 1.0
Web

8. Sintática

9. -

10. documentos

11. Web
1992

12. -

13. Web

14. 1.0
Web

15. Sintática

16. -

17. documentos
2006

18. Interpretações,

19.
2003

20. -

21. Web

22. Social inferências

23. e

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/

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

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

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

47. /

51. titleHtml5/title

53. /head

55. body

57. /body
/html

58. HTML5

59. HTML5
NovasAPIs
Semântica Armazenamento Arquivo Conectividade
Multimídia 3D/Gráficos 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

70. /

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

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

91. =

92. requestFileSystemSync(TEMPORARY,

93. 1024*1024);
temporário var

94. fileEntry

95. =

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

180. HTML5 - 3D/Gráficos

181. HTML5 - 3D/Gráficos

182. HTML5 - 3D/Gráficos

183. HTML5 - 3D/Gráficos

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

187. HTML5 - Desempenho

188. HTML5 - Desempenho

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

205. Obrigado!
@rafaelsakurai @rodrigocasca

206. Obrigado!
@rafaelsakurai @rodrigocasca