html5 css3 de recife a natal - wordshop para a ufpe

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



✓ Colunas


✓ Decoração de boxes (rgba, border-radius, shadows)


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

http://maps.google.com/maps/api/js?sensor=true




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

http://creativecommons.org/licenses/by/2.0/


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

http://www.w3.org/TR/html5/

http://www.w3.org/TR/html5/

http://www.lipsum.com

http://www.lipsum.com



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


No Opera 9.0 ou mais recente

type=”datetime” type=”month” type=”week”

http://diveintohtml5.org/forms.html




Teclado no Safari do iOS iPhone, iPhone Touch e iPad

type=”number” type=”url” type=”email”




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




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




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





✓ JS APIs

✓ Novos seletores

✓ Dados Offline


✓ Novos seletores CSS3



✓ Colunas


✓ Decoração de boxes (rgba, border-radius, gradient, shadows)


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




POR ONDE JÁ PASSAMOS

✓ Novas tags de marcação





✓ JS APIs

✓ Novos seletores

✓ Dados Offline


✓ Novos seletores CSS3



✓ Colunas


✓ Decoração de boxes (rgba, border-radius, shadows)


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

[email protected]

rodrigomuniz.com

facebook.com/rodrigomuniz

linkedin.com/in/rodrigomuniz

***

wenetus.com

http://creativecommons.org/licenses/by-sa/3.0/

http://twitter.com/rdmuniz

http://twitter.com/rdmuniz

http://rodrigomuniz.com

http://rodrigomuniz.com

http://facebook.com/rodrigomuniz

http://facebook.com/rodrigomuniz

http://linkedin.com/in/rodrigomuniz

http://linkedin.com/in/rodrigomuniz

http://wenetus.com

http://wenetus.com



REFERÊNCIAS


http://slides.html5rocks.com/

http://diveintohtml5.org/

http://developer.apple.com/safari/

http://webkit.org/

http://whatwg.org/html5


http://w3c.br/cursos/html5/conteudo/

http://html5demos.com/

http://www.css3.info/

http://www.w3.org/

http://www.w3c.br/









http://webkit.org/

http://webkit.org/











http://www.w3.org/

http://www.w3.org/

http://www.w3c.br/

http://www.w3c.br/

html5 css3 de recife a natal - wordshop para a ufpe

Documents