html5 css3 de recife a natal - wordshop para a ufpe
Post on 04-Apr-2015
416 Views
Preview:
DESCRIPTION
TRANSCRIPT
297 km
de Recife a Natal
HTML5 & CSS3
297 km
de Recife a Natal
HTML5 & CSS3
:)
NIVELAMENTO
<cite>
<base>
<optgroup>
Define a URL base para os links relativos da página
Uma citação ou referência a outra fonte
Você conhece essas tags?
WORKSPACE
Google Chrome 6.0 Devou Webkit Nightly Build
(mais recente)
Notepad ++
+
POR ONDE PASSAREMOS✓ Novas tags de marcação
✓ Semântica em Links (Link relations)
✓ Novos tipos de campos de formulário
✓ Multimídia (Vídeo & Audio)
✓ Desenhar (Canvas)
✓ JS APIs
✓ Novos seletores
✓ Dados Offline
✓ Geolocalização
...
✓ Melhorias em Backgrounds
✓ Suporte a novos formatos de web fonts
✓ Colunas
✓ Decoração de textos (rgba, text-shadow, text stroke...)
✓ Decoração de boxes (rgba, border-radius, gradient, shadows)
✓ CSS Transitions, Transforms, Animação
POR ONDE PASSAREMOS✓ Novos seletores CSS3
✓ Melhorias em Backgrounds
✓ Suporte a novos formatos de web fonts
✓ Colunas
✓ Decoração de textos (rgba, text-shadow, text stroke...)
✓ Decoração de boxes (rgba, border-radius, shadows)
✓ CSS Transitions, Transforms, Animação
MAS ANTES...
e HTML 4.01
HTML5 VS XHTML
http://officespam.chattablogs.com/archives/2007/03/tattoos-of-the-geeky-kind.html
DOCTYPE gigantesco é coisa do passadoHTML5 VS (X)HTML
HTML 4.01 Strict<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html>HTML 5
XHTML 1.0 Transitional<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
HTML 4.01 Frameset<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
Não temos que escolher entre transitional e strictHTML5 VS (X)HTML
<!DOCTYPE html>
HTML 4.01 Strict<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML 5
XHTML 1.0 Transitional<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Tags <script> agora tem o atributo de tipo text/javascript como facultativo
HTML5 VS (X)HTML
(x)HTML<script type="text/javascript" src="js/jquery.js"></script>
<script src="js/jquery.js"></script>HTML 5
O charset também foi simplificadoHTML5 VS (X)HTML
(x)HTML<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta charset="utf-8" />HTML 5
Elementos sem tag de fechamento são fechados de forma facultativa
HTML5 VS (X)HTML
HTML<p><img src=”foto.jpg” alt=”Foto”> Praesent eget neque eu.<br>Eros interdum malesuada non vel leo.
</p>
<p><img src=”foto.jpg” alt=”Foto”> Praesent eget neque eu.<br />Eros interdum malesuada non vel leo.
</p>
HTML 5
XHTML<p><img src=”foto.jpg” alt=”Foto” /> Praesent eget neque eu.<br />Eros interdum malesuada non vel leo.
</p>
Depois do XHTML a tag embed volta diferenteHTML5 VS (X)HTML
XHTML<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="foobar/swflash.cab" width="100" height="100" id="movie">
<param name="movie" value="flash.swf" /><param name="quality" value="high" />
</object>
HTML 5<embed src=”flash.swf” id=”movie” width="100" height="100">
HTML<object width="100" height="100"><param name="movie" value="flash.swf">
<embed src="flash.swf" width="100" height="100"></embed>
</object>
✓ DOCTYPE gigantesco não é mais necessário
✓ Não temos que escolher entre transitional e strict
✓ Tags <script> não precisam de atributo de tipo text/javascript
✓ Charset também foi simplificado
✓ Elementos sem tag de fechamento são fechados de forma facultativa (ex.: <br>)
✓ Nova tag embed
HTML5 VS (X)HTML
Novas tags
HTML5 - SEMÂNTICA
http://www.flickr.com/photos/jesper/346483230
SEMÂNTICA: NOVAS TAGS...
<body><header>
<hgroup><h1>HTML 5 e CSS3</h1><h2>De Recife a Natal</h2>
<hgroup></header>
<section id="conteudo"> <article> <header> <h1>Lorem ipsum dolor sit</h1> <p>Publicado em <time datetime="2010-08-25">Agosto de 2010</time></p> </header> <section> ... </seciton> </article> </section> <aside> <ul> ... </ul> </aside> <footer> <a rel="license" href="http://creativecommons.org/licenses/by/2.0/">Creative Commons Attribution 2.0 Generic</a> - Conteúdo para fins educacionais. </footer>
</body>...
1) article
2) aside
3) audio
4) figure
5) figcaption
6) footer
7) header
8) nav
9) section
10) source
11) video
12) canvas
13) command
14) datagrid
15) datalist
16) details
17) embed
18) output
19) progress
20) rp
21) rt
22) ruby
23) dialog
24) hgroup
25) mark
26) meter
27) summary
28) time
SEMÂNTICA: NOVAS TAGS
http://www.w3schools.com/html5/html5_reference.asp
Especificam a relação entra o documento atual e o alvo da URL de um link
SEMÂNTICA: LINK RELATIONS
http://www.w3schools.com/html5/att_a_rel.asp
1) alternate
1) archives
2) author
3) bookmark
4) contact
5) external
6) first
7) help
8) icon
9) index
10) last
11) license
12) next
13) nofollow
14) noreferrer
15) pingback
16) prefetch
17) prev
18) search
19) stylesheet
20) sidebar
21) tag
22) up
SEMÂNTICA: LINK RELATIONS...
<body><header>
<hgroup><h1>HTML 5 e CSS3</h1><h2>De Recife a Natal</h2>
<hgroup></header>
<section id="conteudo">... </section> <aside> <ul> <li><a rel="external" href="http://www.w3.org/TR/html5/">HTML5 - WC3</a></li> <li><a rel="external" href="http://www.lipsum.com/">Gerador de Lorem Ipsum</a></li> </ul> </aside> <footer> <a rel="license" href="http://creativecommons.org/licenses/by/2.0/">Creative Commons Attribution 2.0 Generic</a> - Conteúdo para fins educacionais. </footer>
</body>...
FORMULÁRIOSNovos tipos de campos
1) email
2) url
3) number
4) range
5) date
6) month
7) week
8) time
9) datetime
10) datetime-local
11) search
12) color
:invalid {/*Estilo do campo inválido*/
background: yellow;}
FORMULÁRIOSNovos tipos de campos
No Opera 9.0 ou mais recente
type=”datetime” type=”month” type=”week”
http://diveintohtml5.org/forms.html
FORMULÁRIOSNovos tipos de campos
Teclado no Safari do iOS iPhone, iPhone Touch e iPad
type=”number” type=”url” type=”email”
http://diveintohtml5.org/forms.html
MULTIMÍDIAVídeo e Áudio
<video src="http://upload.wikimedia.org/wikipedia/commons/0/05/Black_and_white_cat_drinks_from_a_puddle.ogg"controls id="testeCat" width="480"> Seu navegador não suporta o vídeo desta página.</video>
http://dev.opera.com/articles/view/introduction-html5-video/
MULTIMÍDIAVídeo e Áudio
<input type="button" onclick="v.play()"; value="Executa >" />
<input type="button" onclick="v.pause()"; value="Pausa ||" />
Executa
Pausa
<input type="button" onclick="v.muted=true"; value="Mudo" />
Mudo
http://dev.opera.com/articles/view/introduction-html5-video/
CANVASGráficos 2D
<canvas id="quadro" width="500" height="500"></canvas>...#quadro { background: url(img/bg-metal.jpg) no-repeat; border: 1px solid #000;}
Canvas
y
x0,0
500,500
CANVASGráficos 2D
//c.fillRect(x, y, width, heigth);c.fillStyle = "#92b000";c.fillRect(18, 15, 150, 100);
Um retângulo verde
c.strokeStyle = "#FF0000";c.strokeRect(28, 25, 200, 200);
Um retângulo com borda vermelha
c.clearRect(20,20,35,55);
Limpa pixels
http://doctype.tv/canvas?autoplay=true
CANVASGráficos 2D
//Pegou a canetac.beginPath();//Localizou a caneta no papel 110,100c.moveTo(110,100);//Dali desenhou uma linha até 110,200c.lineTo(110,200);//Em seguida outra linha até 400,200c.lineTo(400,200);//Fechac.closePath();c.strokeStyle = "#fff";c.stroke();c.fillStyle = "rgba(255,255,255,0.5)";c.fill();
Ponto a ponto
http://doctype.tv/mockups?autoplay=true
CANVASGráficos 2D
c.fillStyle = "#fff";c.font = "bold 42px Helvetica";c.fillText("HTML 5", 248, 403);
Texto simples
CANVASGráficos 2D
//c.arc(x, y, radius, start, end, anticlockwise);c.arc(100, 100, 50, 0, 2*Math.PI, false);c.strokeStyle = "#ff0000";c.stroke();
Círculo
http://doctype.tv/mockups?autoplay=true
CANVASGráficos 2D
Exemplos
http://www.chromeexperiments.com/
http://alteredqualia.com/canvasmol/#DNA
http://pixie.strd6.com/sprites/new
http://www.kevs3d.co.uk/dev/asteroids/
WebGL
http://webkit.org/blog/603/webgl-now-available-in-webkit-nightlies/
POR ONDE JÁ PASSAMOS
✓ Novas tags de marcação
✓ Semântica em Links (Link relations)
✓ Novos tipos de campos de formulário
✓ Multimídia (Vídeo & Audio)
✓ Desenhar (Canvas)
✓ JS APIs
✓ Novos seletores
✓ Dados Offline
✓ Geolocalização
✓ Novos seletores CSS3
✓ Melhorias em Backgrounds
✓ Suporte a novos formatos de web fonts
✓ Colunas
✓ Decoração de textos (rgba, text-shadow, text stroke...)
✓ Decoração de boxes (rgba, border-radius, gradient, shadows)
✓ CSS Transitions, Transforms, Animação
Mais que marcação para o HTML5
JS APIS
JS APISNovos seletores
var e = document.getElementById('login');e.focus();
var els = document.getElementsByTagName('input');els[0].focus();
var els = document.getElementsByClassName('invalido');els[0].focus();
Encontrando elementos pela classe
var els = document.querySelectorAll('#conteudo aside');
var els = document.querySelectorAll('.invalido');
Encontrando elementos pela sintaxe do CSS
JS APISDados Offline
document.querySelector('#save').addEventListener('click', function () { window.localStorage.setItem('value', area.value); window.localStorage.setItem('timestamp', (new Date()).getTime());}, false);
localStorage
document.querySelector('#save').addEventListener('click', function () { window.sessionStorage.setItem('value', area.value); window.sessionStorage.setItem('timestamp', (new Date()).getTime());}, false);
sessionStorage
var db = window.openDatabase("meudb", "1.0");db.executeSql("SELECT * FROM teste", [], successCallback, errorCallback);
Web SQL Database
http://dev.w3.org/html5/webstorage/
JS APISDados Offline
<html manifest=”/cache.manifest”>
Offline Cache
AddType text/cache-manifest .manifest
Configuração server-side (no Apache com .htaccess)
CACHE MANIFEST # Offline cache v1index.htmlcss/style.cssjs/script.js # imagesimg/bg.pngimg/bt.png
exemplo.manifest
<script>var on = navagator.onLine;</script>
Offline ou não?
JS APISGeolocalização
navigator.geolocation.getCurrentPosition(positionCallback, error);
Latitude e Longitude
var id = navigator.geolocation.watchPosition(positionCallback);
Acompanha localização
navigator.geolocation.clearWatch(id);
Para de acompanhar a localização
http://dev.w3.org/geo/api/spec-source.html
JS APISGeolocalização
function positionCallback(position) {position.coords.latitude; //graus decimaisposition.coords.longitude;position.coords.accuracy; //metros
position.coords.altitude; //metrosposition.coords.altitudeAccuracy; //metros
position.coords.speed; //metros / segundosposition.coords.heading; //Graus em relação ao Norte
}
Armazenado em .coords
http://dev.w3.org/geo/api/spec-source.html
POR ONDE JÁ PASSAMOS
✓ Novas tags de marcação
✓ Semântica em Links (Link relations)
✓ Novos tipos de campos de formulário
✓ Multimídia (Vídeo & Audio)
✓ Desenhar (Canvas)
✓ JS APIs
✓ Novos seletores
✓ Dados Offline
✓ Geolocalização
✓ Novos seletores CSS3
✓ Melhorias em Backgrounds
✓ Suporte a novos formatos de web fonts
✓ Colunas
✓ Decoração de textos (rgba, text-shadow, text stroke...)
✓ Decoração de boxes (rgba, border-radius, shadows)
✓ CSS Transitions, Transforms, Animação
Estilo, editoração e animação
CSS3
http://www.flickr.com/photos/atzu/4365152223
CSS3Novos seletores
input[type=”text”]{border: 1px solid #000
}
Por atributos específicos
:not(div) {display: inline;
}
Negação (Firefox, Safari e Opera)
p:first-child { ... }li:last-child { ... }
Parentesto
CSS3Melhorias no controle do tamanho do background
background-size: cover;
Cover (menor possível)
background-size: contain;
Contain (maior possível)
background-size: 80%;
Porcentagem
CSS3Suporte a outros formatos de web fonts
TrueType/Openype TT(.ttf)
OpenType PS (.otf)
Outros
http://www.webfonts.info/wiki/index.php?title=@font-face_browser_support
CSS3Colunas
-webkit-column-count:3;-webkit-column-rule:1px solid #ccc;-webkit-column-gap:40px;
Webkit
-moz-column-count:3;-moz-column-rule:1px solid #ccc;-moz-column-gap:40px;
Firefox
CSS3Decoração de texto e boxes
background: rgba(255, 255, 255, 0.8);/*red, green, blue, alpha*/
rgba()
text-shadow: #000 3px 2px 9px;/*cor horizontal vertical blur*/
text-shadow
-webkit-box-shadow: #000 3px 2px 9px;/*cor horizontal vertical blur*/
box-shadow
-webkit-text-stroke: 1px #F00;
text-stroke
CSS3Decoração de texto e boxes
border-radius: 8px 0 8px 0;/*sentido horário do canto superiror esquerdo*/
Bordas arredondadas
CSS3CSS Transitions e Transforms
-webkit-transition: margin-left 1s ease-in-out;margin-left: 120px;...
Prepara a transição
-webkit-transform: scale(0.5) rotate(45deg);
Transforms
-webkit-transition: -webkit-transform 1s ease-in-out;-webkit-transform: scale(.5) rotate(45deg);
Juntas
http://webkit.org/blog/138/css-animation/
CSS3CSS Animation
@-webkit-keyframes zoom { from { font-size: 100%; } to { font-size: 300%; }}
keyframes
p { -webkit-animation-name: zoom; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; -webkit-animation-direction: alternate;}
Aplicando a animação
http://webkit.org/blog/324/css-animation-2/
CHEGAMOS!PERGUNTAS?
4H DEPOIS...
:)
@rdmuniz
eu@rodrigomuniz.com
rodrigomuniz.com
facebook.com/rodrigomuniz
linkedin.com/in/rodrigomuniz
***
wenetus.com
http://creativecommons.org/licenses/by-sa/3.0/
REFERÊNCIAS
http://www.flickr.com/photos/jesper/346483297
http://slides.html5rocks.com/
http://diveintohtml5.org/
http://developer.apple.com/safari/
http://webkit.org/
http://whatwg.org/html5
http://www.w3schools.com/html5/html5_reference.asp
http://w3c.br/cursos/html5/conteudo/
http://html5demos.com/
http://www.css3.info/
http://www.w3.org/
http://www.w3c.br/
top related