Anda di halaman 1dari 52

HTML5 & CSS3

de Recife a Natal

297 km

HTML5 & CSS3

de Recife a Natal

297 km

:)

NIVELAMENTO

Você conhece essas tags?

<cite>

Uma citação ou referência a outra fonte

<base>

Define a URL base para os links relativos da página

<optgroup>

NIVELAMENTO Você conhece essas tags? <cite> Uma citação ou referência a outra fonte <base> Define a

WORKSPACE

WORKSPACE + Google Chrome 6.0 Dev ou Webkit Nightly Build (mais recente) Notepad ++

+

Google Chrome 6.0 Dev ou Webkit Nightly Build (mais recente)

WORKSPACE + Google Chrome 6.0 Dev ou Webkit Nightly Build (mais recente) Notepad ++

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

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

HTML5 VS (X)HTML

DOCTYPE gigantesco é coisa do passado

HTML 4.01 Strict

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://

www.w3.org/TR/html4/strict.dtd">

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

HTML 5

<!DOCTYPE html>

HTML5 VS (X)HTML

Não temos que escolher entre transitional e strict

HTML 4.01 Strict

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://

www.w3.org/TR/html4/strict.dtd">

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 5

<!DOCTYPE html>

HTML5 VS (X)HTML

Tags <script> agora tem o atributo de tipo text/javascript como facultativo

(x)HTML

<script type="text/javascript" src="js/jquery.js"></script>

HTML 5

<script src="js/jquery.js"></script>

HTML5 VS (X)HTML

O charset também foi simplificado

(x)HTML

<meta http-equiv="Content-Type" content="text/html;

charset=utf-8">

HTML 5

<meta charset="utf-8" />

HTML5 VS (X)HTML

Elementos sem tag de fechamento são fechados de forma facultativa

HTML

<p> <img src=”foto.jpg” alt=”Foto”> Praesent eget neque eu.<br> Eros interdum malesuada non vel leo. </p>

XHTML

<p> <img src=”foto.jpg” alt=”Foto” /> Praesent eget neque eu.<br /> Eros interdum malesuada non vel leo. </p>

HTML 5

<p> <img src=”foto.jpg” alt=”Foto”> Praesent eget neque eu.<br /> Eros interdum malesuada non vel leo. </p>

HTML5 VS (X)HTML

Depois do XHTML a tag embed volta diferente

HTML

<object width="100" height="100"> <param name="movie" value="flash.swf"> <embed src="flash.swf" width="100" height="100"> </embed> </object>

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

HTML5 VS (X)HTML

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 - SEMÂNTICA

Novas tags

SEMÂNTICA: NOVAS TAGS

... <body> <header> <hgroup> <h1>HTML 5 e CSS3</h1> <h2>De Recife a Natal</h2> <hgroup> </header> <section id="conteudo">
...
<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>
...

SEMÂNTICA: NOVAS TAGS

1)

article

11) video

21)

rt

2)

aside

12) canvas

22) ruby

3)

audio

13) command

23) dialog

4)

figure

14) datagrid

24) hgroup

5)

figcaption

15) datalist

25) mark

6)

footer

16) details

26) meter

7)

header

17) embed

27) summary

8)

nav

18) output

28) time

9)

section

19) progress

10) source

20)

rp

SEMÂNTICA: LINK RELATIONS

Especificam a relação entra o documento atual e o alvo da URL de um link

1)

alternate

8)

icon

16)

prefetch

1)

archives

9)

index

17)

prev

2)

author

10)

last

18)

search

3)

bookmark

11)

license

19)

stylesheet

4)

contact

12)

next

20)

sidebar

5)

external

13)

nofollow

21)

tag

6)

first

14)

noreferrer

22)

up

7)

help

15)

pingback

SEMÂNTICA: LINK RELATIONS

... <body> <header> <hgroup> <h1>HTML 5 e CSS3</h1> <h2>De Recife a Natal</h2> <hgroup> </header> <section id="conteudo">
...
<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ÁRIOS

Novos tipos de campos

FORMULÁRIOS Novos tipos de campos 1) email 7) week 2) url 8) time 3) number 9)

1)

email

7)

week

2)

url

8)

time

3)

number

9)

datetime

4)

range

10) datetime-local

5)

date

11) search

6)

month

12) color

:invalid { /*Estilo do campo inválido*/ background: yellow; }

FORMULÁRIOS

Novos tipos de campos

FORMULÁRIOS Novos tipos de campos type=”datetime” type=”month” No Opera 9.0 ou mais recente type=”week” <a href=http://diveintohtml5.org/forms.html " id="pdf-obj-22-6" src="pdf-obj-22-6.jpg">

type=”datetime”

FORMULÁRIOS Novos tipos de campos type=”datetime” type=”month” No Opera 9.0 ou mais recente type=”week” <a href=http://diveintohtml5.org/forms.html " id="pdf-obj-22-10" src="pdf-obj-22-10.jpg">

type=”month”

No Opera 9.0 ou mais recente

FORMULÁRIOS Novos tipos de campos type=”datetime” type=”month” No Opera 9.0 ou mais recente type=”week” <a href=http://diveintohtml5.org/forms.html " id="pdf-obj-22-16" src="pdf-obj-22-16.jpg">

type=”week”

FORMULÁRIOS

FORMULÁRIOS type=”number” Novos tipos de campos type=”url” type=”email” Teclado no Safari do iOS iPhone, iPhone Touchhttp://diveintohtml5.org/forms.html " id="pdf-obj-23-4" src="pdf-obj-23-4.jpg">

type=”number”

Novos tipos de campos

FORMULÁRIOS type=”number” Novos tipos de campos type=”url” type=”email” Teclado no Safari do iOS iPhone, iPhone Touchhttp://diveintohtml5.org/forms.html " id="pdf-obj-23-10" src="pdf-obj-23-10.jpg">

type=”url”

FORMULÁRIOS type=”number” Novos tipos de campos type=”url” type=”email” Teclado no Safari do iOS iPhone, iPhone Touchhttp://diveintohtml5.org/forms.html " id="pdf-obj-23-14" src="pdf-obj-23-14.jpg">

type=”email”

Teclado no Safari do iOS iPhone, iPhone Touch e iPad

MULTIMÍDIA Ví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 suportahttp://dev.opera.com/articles/view/introduction-html5-video/ " id="pdf-obj-24-2" src="pdf-obj-24-2.jpg">

MULTIMÍDIA

Ví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>

MULTIMÍDIA Vídeo e Áudio Executa <input type="button" onclick="v. play() "; value="Executa &gt;" /> Pausa <input type="button"http://dev.opera.com/articles/view/introduction-html5-video/ " id="pdf-obj-25-2" src="pdf-obj-25-2.jpg">

MULTIMÍDIA

Vídeo e Áudio

Executa

<input type="button" onclick="v.play()"; value="Executa &gt;" />

Pausa

<input type="button" onclick="v.pause()"; value="Pausa ||" />

Mudo

<input type="button" onclick="v.muted=true"; value="Mudo" />

0,0 x y
0,0
x
y

CANVAS

Gráficos 2D

Canvas

<canvas id="quadro" width="500"

height="500"></canvas>

... #quadro { background: url(img/bg-metal.jpg) no- repeat; border: 1px solid #000;

}

500,500

CANVAS

Gráficos 2D

Um retângulo verde

//c.fillRect(x, y, width, heigth); c.fillStyle = "#92b000"; c.fillRect(18, 15, 150, 100);

Um retângulo com borda vermelha

c.strokeStyle = "#FF0000"; c.strokeRect(28, 25, 200, 200);

Limpa pixels

c.clearRect(20,20,35,55);

CANVAS //Pegou a caneta Gráficos 2D Ponto a ponto c.beginPath(); //Localizou a caneta no papel 110,100http://doctype.tv/mockups?autoplay=true " id="pdf-obj-28-2" src="pdf-obj-28-2.jpg">

CANVAS

//Pegou a caneta

Gráficos 2D

Ponto a ponto

c.beginPath(); //Localizou a caneta no papel 110,100

c.moveTo(110,100);

//Dali desenhou uma linha até 110,200

c.lineTo(110,200);

//Em seguida outra linha até 400,200

c.lineTo(400,200);

//Fecha c.closePath(); c.strokeStyle = "#fff"; c.stroke(); c.fillStyle = "rgba(255,255,255,0.5)"; c.fill();

CANVAS Gráficos 2D Texto simples c.fillStyle = "#fff"; c.font = "bold 42px Helvetica"; c. fillText ("

CANVAS

Gráficos 2D

Texto simples

c.fillStyle = "#fff"; c.font = "bold 42px Helvetica"; c.fillText("HTML 5", 248, 403);

CANVAS Gráficos 2D Círculo //c.arc(x, y, radius, start, end, anticlockwise); c. arc (100, 100, 50, 0,http://doctype.tv/mockups?autoplay=true " id="pdf-obj-30-2" src="pdf-obj-30-2.jpg">

CANVAS

Gráficos 2D

Círculo

//c.arc(x, y, radius, start, end,

anticlockwise); c.arc(100, 100, 50, 0, 2*Math.PI, false); c.strokeStyle = "#ff0000"; c.stroke();

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

JS APIS

Mais que marcação para o HTML5

JS APIS

Novos seletores

Encontrando elementos pela classe

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 sintaxe do CSS

var els = document.querySelectorAll('#conteudo aside');

var els = document.querySelectorAll('.invalido');

JS APIS

Dados Offline

localStorage

document.querySelector('#save').addEventListener('click', function () { window.localStorage.setItem('value', area.value); window.localStorage.setItem('timestamp', (new Date()).getTime()); }, false);

sessionStorage

document.querySelector('#save').addEventListener('click', function () { window.sessionStorage.setItem('value', area.value); window.sessionStorage.setItem('timestamp', (new Date()).getTime()); }, false);

Web SQL Database

var db = window.openDatabase("meudb", "1.0"); db.executeSql("SELECT * FROM teste", [], successCallback, errorCallback);

JS APIS

Dados Offline

Offline Cache

<html manifest=”/cache.manifest”>

Configuração server-side (no Apache com .htaccess)

AddType text/cache-manifest .manifest

exemplo.manifest

CACHE MANIFEST

# Offline cache v1 index.html css/style.css js/script.js

# images img/bg.png img/bt.png

Offline ou não?

<script>var on = navagator.onLine;</script>

JS APIS

Geolocalização

Latitude e Longitude

navigator.geolocation.getCurrentPosition(positionCallback, error);

Acompanha localização

var id = navigator.geolocation.watchPosition(positionCallback);

Para de acompanhar a localização

navigator.geolocation.clearWatch(id);

JS APIS

Geolocalização

Armazenado em .coords

function positionCallback(position) { position.coords.latitude; //graus decimais position.coords.longitude; position.coords.accuracy; //metros

position.coords.altitude; //metros position.coords.altitudeAccuracy; //metros

position.coords.speed; //metros / segundos position.coords.heading; //Graus em relação ao Norte

}

Multimídia (Vídeo & Audio)

POR ONDE JÁ PASSAMOS

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)

...

)

CSS3

Estilo, editoração e animação

CSS3

Novos seletores

Por atributos específicos

input[type=”text”]{ border: 1px solid #000 }

Negação (Firefox, Safari e Opera)

:not(div) { display: inline; }

Parentesto

p:first-child {

}

li:last-child {

}

CSS3

Melhorias no controle do tamanho do background

Cover (menor possível)

background-size: cover;

Contain (maior possível)

background-size: contain;

Porcentagem

background-size: 80%;

CSS3

Suporte a outros formatos de web fonts

CSS3 Suporte a outros formatos de web fonts TrueType/Openype TT(.ttf) OpenType PS (.otf) Outros <a href=http://www.webfonts.info/wiki/index.php?title=@font-face_browser_support " id="pdf-obj-43-6" src="pdf-obj-43-6.jpg">

TrueType/Openype TT(.ttf) OpenType PS (.otf)

Outros

CSS3

Colunas

CSS3 Colunas Webkit -webkit-column-count :3; -webkit-column-rule :1px solid #ccc; -webkit-column-gap :40px; Firefox -moz-column-count :3; -moz-column-rule :1px

Webkit

-webkit-column-count:3;

-webkit-column-rule:1px solid #ccc;

-webkit-column-gap:40px;

Firefox

-moz-column-count:3;

-moz-column-rule:1px solid #ccc;

-moz-column-gap:40px;

CSS3

Decoração de texto e boxes

rgba()

background: rgba(255, 255, 255, 0.8); /*red, green, blue, alpha*/

text-shadow

text-shadow: #000 3px 2px 9px; /*cor horizontal vertical blur*/

box-shadow

-webkit-box-shadow: #000 3px 2px 9px; /*cor horizontal vertical blur*/

text-stroke

-webkit-text-stroke: 1px #F00;

CSS3

Decoração de texto e boxes

CSS3 Decoração de texto e boxes Bordas arredondadas border-radius : 8px 0 8px 0; /*sentido horário

Bordas arredondadas

border-radius: 8px 0 8px 0; /*sentido horário do canto superiror esquerdo*/

CSS3

CSS Transitions e Transforms

Prepara a transição

-webkit-transition: margin-left 1s ease-in-out; margin-left: 120px; ...

Transforms

-webkit-transform: scale(0.5) rotate(45deg);

Juntas

-webkit-transition: -webkit-transform 1s ease-in-out; -webkit-transform: scale(.5) rotate(45deg);

CSS3

CSS Animation

keyframes

@-webkit-keyframes zoom { from { font-size: 100%;

} to { font-size: 300%; }

}

 

Aplicando a animação

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;

}

4H DEPOIS

...

CHEGAMOS!

PERGUNTAS?