Palestras: HTML5 – A moderna linguagem de marcação / CSS3 – Estilizando a Web do futuro
Palestrante: Leonardo Balter (iLearn/RJ)
Local: Auditório da Faculdade São Lucas
14. <!DOCTYPE html
PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//
EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-
transitional.dtd">
14sexta-feira, 22 de outubro de 2010
27. Progressive
Enhancement
■ conteúdo e funcionalidades básicas
disponível para qualquer browser
■ marcação semântica
■ CSS e JavaScript em arquivos
externos e modularizados
■ manter os padrões do browser do
usuário
27sexta-feira, 22 de outubro de 2010
28. Shims, Fallbacks e
Polyfills
@rem // Remy Sharp
http://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
http://goo.gl/KQDB
28sexta-feira, 22 de outubro de 2010
29. Estamos coletando todos os shims, fallbacks e polyfills a fim de
implementar a funcionalidade do HTML 5 em browsers que não oferecem
suporte ao mesmo.
A ideia geral é: nós, desenvolvedores, devemos ser capazes de desenvolver
com as APIs do HTML 5 e scripts podem criar os métodos e objetos que
precisam existir. Desenvolver nesse modo “a prova de futuro” significa que
enquanto os usuários se atualizam, seu código não precisa mudar e assim
eles já migram para uma experiência melhor e nativa, através de uma
forma limpa.
29sexta-feira, 22 de outubro de 2010
34. aside
conteúdo que não representa o assunto principal do documento
ou seção
nav
seção de navegação
34sexta-feira, 22 de outubro de 2010
35. article
uma seção independente do documento
hgroup
conjunto de títulos e subtítulos em um cabeçalho
35sexta-feira, 22 de outubro de 2010
36. video
coisa mais linda do mundo
audio
coisa mais linda do mundo, só que você não vê
36sexta-feira, 22 de outubro de 2010
37. video
elemento contento vídeo nativo, sem utilização de plugin
externo
audio
o mesmo que acima, mas obviamente indica um áudio
37sexta-feira, 22 de outubro de 2010
43. article
h1 com título do artigo
header
algumas informações nesse rodapé do artigo, sobre o artigo
footer
algum texto aqui, o próprio conteúdo do artigo
43sexta-feira, 22 de outubro de 2010
44. H1 no artigo?? E a
hierarquia???!?!
44sexta-feira, 22 de outubro de 2010
55. <script> não precisa mais
de declaração de tipo
<script type=”text/javascript” src=”script.js”></script>
<script src=”script.js”></script>
54sexta-feira, 22 de outubro de 2010
69. <form>
<input type=”search” id="q"
autofocus required
placeholder=”Pesquisar...”>
<script>
if (!("autofocus" in document.createElement("input"))) {
document.getElementById("q").focus();
}
</script>
<input type="submit" value="Ir">
</form>
67sexta-feira, 22 de outubro de 2010
70. Validando um form
<script>
form = document.getElementById(‘f’);
if ( form.checkValidity() )
console.log(‘form válido’);
</script>
68sexta-feira, 22 de outubro de 2010
72. CACHE MANIFEST
#comentarios e versões
CACHE:
index.html
stylesheet.css
imagens/logo.png
js/script.js
NETWORK:
login.php
/myapi
http://api.twitter.com
FALLBACK:
/main.php /static.html
Arquivos cacheados
Arquivos que necessitam
de status online
Fallback para recurso
não disponível
70sexta-feira, 22 de outubro de 2010
73. var cacheStatus = window.applicationCache.status;
window.applicationCache.update();
window.applicationCache.swapCache();
71sexta-feira, 22 de outubro de 2010
74. Web Storage
Cookies
Máximo de 20
Limitados a 4KB
Reduzem velocidade da
página pois são
transferidos via headers
do HTTP
72sexta-feira, 22 de outubro de 2010
79. var db = openDatabase(“nome”, “versão”);
db.transaction(function(tx) {
tx.executeSql(“SELECT * FROM tabela”,
callbackSucesso, callbackErro);
});
77sexta-feira, 22 de outubro de 2010
82. if (navigator.geolocation) {
var geo = navigator.geolocation;
geo.getCurrentPosition( function (posicao) {
lat = posicao.coords.latitude;
lng = posicao.coords.longitude;
});
}
80sexta-feira, 22 de outubro de 2010
87. main.js:
var worker = new Worker('paralelo.js');
worker.onmessage = function(event) {
alert(event.data);
};
paralelo.js:
self.onmessage = function(event) {
// trabalho a ser exeucado em paralelo.
self.postMessage(dados);
}
http://leobalter.net/html5/webworkers.html
83sexta-feira, 22 de outubro de 2010
98. <video width="480" height="267"
poster="imagemPoster.jpg" controls>
<source type="video/mp4" src="video.mp4" />
<source type="video/webm" src="video.webm" />
<source type="video/ogg" src="video.ogv" />
</video>
94sexta-feira, 22 de outubro de 2010
99. Tipos deVídeo
WEBM MP4/h.264 OGV
Safari
Chrome 5
Firefox 3.5
Opera 10.5
Safari
Chrome 5
IE 9
iPhone
Android
Safari
Chrome 6
IE 9 com v8
Firefox 4
Opera 10.6
95sexta-feira, 22 de outubro de 2010
100. Atributos HTML e JS
para <video>
loop
autoplay
controls
preload
96sexta-feira, 22 de outubro de 2010
101. <video src=”exp.mov” controls preload=”false” loop autoplay></video>
var vid = document.getElementById('idVideo');
console.log(vid.controls);
console.log(vid.preload);
console.log(vid.loop);
console.log(vid.autoplay);
HTML:
JS:
97sexta-feira, 22 de outubro de 2010
102. Controles JS
play() / play
pause() / pause
volume
muted
currentTime
loadeddata
ended
98sexta-feira, 22 de outubro de 2010
104. Como colocar vídeo
para funcionar em
qualquer browser?
100sexta-feira, 22 de outubro de 2010
105. <video controls>
<source type="video/mp4" src="video.mp4" />
<img src="placeholder.jpg" />
</video>
<video controls>
<source type="video/mp4" src="video.mp4" />
Esse browser não toca esse vídeo super legal
</video>
<video controls>
<source type="video/mp4" src="video.mp4" />
<object><embed>
// Muito flash no meio disso
</embed></object>
</video>
101sexta-feira, 22 de outubro de 2010
123. a[hrefˆ=http]
Toda tag “a” com atributo href em que o valor começa com a
palavra “http”:
119sexta-feira, 22 de outubro de 2010
124. a[rel*=nofollow]
Toda tag “a” com atributo rel em que nele esteja contido - em
qualquer parte - o valor “nofollow”:
120sexta-feira, 22 de outubro de 2010
152. -webkit-box-reflect: below 5px
-webkit-gradient(linear, left top,
left bottom, from(transparent),
color-stop(0.5, transparent), to(white));
<img src="http://www.saomateus.edu.br/Images/logo.jpg" />
http://jsbin.com/ufusa4/edit
148sexta-feira, 22 de outubro de 2010
156. -webkit-gradient(linear, left top, left bottom,
from(#00abeb), to(white),
color-stop(0.5, white), color-stop(0.5, #66cc00))
152sexta-feira, 22 de outubro de 2010