HTML5 & CSS3

HML5 e CSS 3.0
Glauco Primo

Projeto Capacitar – GPE
Setembro de 2012

HTML 5

O HTML5 veio para substituir o HTML 4.0

O Novidades:
O Reorganização semântica, Vídeo, audio,
Canvas

Reorganização semântica
O Originalmente os websites utilizam
tabelas para posicionar o layout na página
O Com o html 3.0 as tabelas saíram, e
deram lugar a divs e posicionamento
relativo/absoluto
O Com o html 5 as divs voltam a assumir o
papel inicial delas de recurso estilístico

O Principais elementos estruturais:
O Header
O Nav
O Section
O Article
O Aside
O Footer

O Então a estrutura de um HTML segundo a
nova semântica da W3C seria:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="css/estilo.css" rel="stylesheet“ type="text/css">
<title>Titulo</title>
</head>
<body>
<header>Titulo da sua página</header>
<nav class="menu">Menu da sua página</nav>
<aside class="publicidade">Banner Publicitário da sua página</aside>
<section class="post"><article>Seu Post aqui</article> </section>
<footer>Rodapé da sua página</footer>
</body>
</html>

Exercício 1
O Fazer uma página estática que contenha:
O Um título no topo (ex.: <h1>Texto</h1>)
O um Menu na navegação. ex.:
<ul>
<li>menu1</li>
<li>menu2</li>
</ul>

Exercício 1
O Uma seção com dois artigos
O Um rodapé com algumas informações
O Resultado com alguns estilos em
html5.html

Vídeo
O Simples de Implementar
O Para não utilizar mais a tecnologia Flash
da adobe
O Compativel com IE9, Firefox 4+, Chrome
6+, Safari 5+, Opera 10+
O Propriedades:
O Width, Height, Controls, source, type

Vídeo Exemplo
O <video width=”640" height=”480" controls="controls">
<source src=”video.mp4" type="video/mp4" />
<source src=”video.ogg" type="video/ogg" />
Your browser does not support the video tag.
</video>

Colocar o vídeo do repositório no aside do
template com 300px de largura e 250px de
altura.

Canvas
O O elemento canvas é utilizado para desenhar
gráficos, via scripting, normalmente javascript.
O Na verdade o elemento canvas é
simplesmente um container para gráficos
O Exemplo:
O <canvas id="myCanvas" width="200"
height="100"></canvas>
O Via Javascript voce pode capturar o id deste
elemento e usar as bibliotecas gráficas
disponíveis para esta linguagem para
desenhar os gráficos.

Canvas Exemplo
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5
canvas tag.
</canvas>

<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.strokeText("Hello World",10,50);
</script>

CSS 3.0
O CSS 3 é a mais nova versão do CSS
(cascade style sheeting)
O Muitas novidades incorporadas:
O Não utilizar mais imagens como background
graças a propriedades de gradiente,
transparência, bordas arredondadas.
O Utilização de transições e animações
O Seletores
O Mesmo ambiente do CSS 2.0
O Até browser mais antigos tem
compatibilidade (exceto IE 8, 7-)

Border Radius
O Adiciona Borda arredondada a borda
padrão dos elementos.
O Sintaxe do Border radius:
border:2px #Cor solid;
border-radius:25px; /*Chrome*/
-moz-border-radius:25px; /* Firefox 3.6 and
earlier */

Exercício
O Colocar uma borda ligeiramente
arredonada no menu horizontal da página
html5.html

Box-shadow
O Faz a projeção da sombra do elemento
em questão. Temos 4 parametros:
div
{
box-shadow: 10px 10px 5px #888888;
}
O Primeiro parametro: deslocamento horizontal
O Segundo parametro: deslocamento vertical
O Terceiro parametro: Desfoque Gaussiano
O Quarto parametro: Cor da sombra

Exercício
O Adicionar sombra ao menu horizontal da
página.

Text-shadow
O Adiciona sombra aos textos da página.
O Sintaxe :
O text-shadow: 5px 5px 5px #FF0000;
O Mesmas propriedades e funcionamento
semelhante ao box-shadow.

O Exercício: Adicionar Sombras aos textos
da página. (utilize o bom senso, e coloque
onde achar pertinente)

CSS 3 Fontes
O Agora os web Designers não estão limitados
as fontes do navegador.
O Basta importar com o projeto a fonte
desejada.
O Sintaxe:
O @font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
url('Sansation_Light.eot'); /* IE9+ */
}

Exercício
O Adicionar Ao título (header) da sua
página a fonte da GPE que se encontra
no repositório.

Transições
O Para fazer pequenas animações para
adicionar dinamismo as páginas.
O Se combinada com seletores e
animações é possível criar designs
realmente complexos e dinâmicos sem
utilizar javascripts ou flash.

Transições
O Transições tem as seguintes
propriedades:
O transition-property – nome da propriedade
que será afetada
O transition-duration – duração da transiçã

O transition-timing-function – tipo de
transição, ex.: linear
O transition-delay – quanto tempo demora
até começar a animar.

Transições
O Exemplos:
transition-delay: 2s;
-moz-transition-delay: 2s; /* Firefox 4 */
-webkit-transition-delay: 2s; /* Safari and
Chrome */
-o-transition-delay: 2s; /* Opera */

Exercício
O Fazer com que o link do menu horizontal
da página html5.html demore 1 segundo
para se tornar branco ao passar o mouse
por cima.

www.gpetec.com.br

Obrigado!
Glauco Primo
glaucoprimo@gpetec.com.br

www.myscrumhalf.com

HTML5 & CSS3

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (16)

Similar a HTML5 & CSS3

Similar a HTML5 & CSS3 (20)

Más de ScrumHalf Tool

Más de ScrumHalf Tool (13)

HTML5 & CSS3