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

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,

11.
2003

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

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

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

28. src=arquivo.js/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. =

75. requestFileSystemSync(TEMPORARY,

76. 1024*1024);
temporário var

77. fileEntry

78. =

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

80. {create:

81. true});
var

82. file

83. =

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

85. =

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

87. =

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

89. =

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

91. =

92. file.lastModifiedDate.toString();
17

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

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

99. ['soap',

100. 'xmpp']);
connection.onmessage

101. =

102. function

103. (e)

104. {
SSE

106. console.log('Server:

107. '

108. +

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

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

120. HTML5 - Multimídia
audio

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

128. src=BigBuckBunny_640x360.mp4

129. type=video/mp4/
/video
video

130. =

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

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

149. Playground
http://playground.html5rocks.com/
32

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

152. 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/
35

153. 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
36

154. 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/
37

155. Obrigado!
@rafaelsakurai @rodrigocasca
38