Embed Size (px)
DESCRIPTION
Projeto Capacitar setembro 2012 Tema: HTML5 & CSS3
Citation preview
HML5 e CSS 3.0Glauco Primo
Projeto Capacitar – GPESetembro 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
Reorganização semântica
O Principais elementos estruturais:O HeaderO NavO SectionO ArticleO AsideO Footer
Reorganização semântica
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 1O 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 1O Uma seção com dois artigosO Um rodapé com algumas
informaçõesO Resultado com alguns estilos em
html5.html
VídeoO Simples de ImplementarO 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 ExemploO <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.
CanvasO O elemento canvas é utilizado para desenhar
gráficos, via scripting, normalmente javascript.O Na verdade o elemento canvas é
simplesmente um container para gráficosO 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.0O 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çõesO Seletores
O Mesmo ambiente do CSS 2.0O Até browser mais antigos tem
compatibilidade (exceto IE 8, 7-)
Border RadiusO 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ícioO Colocar uma borda ligeiramente
arredonada no menu horizontal da página html5.html
Box-shadowO 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 horizontalO Segundo parametro: deslocamento verticalO Terceiro parametro: Desfoque GaussianoO Quarto parametro: Cor da sombra
ExercícioO Adicionar sombra ao menu
horizontal da página.
Text-shadowO 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 FontesO 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ícioO Adicionar Ao título (header) da sua
página a fonte da GPE que se encontra no repositório.
TransiçõesO 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çõesO Transições tem as seguintes
propriedades:O transition-property – nome da
propriedade que será afetadaO transition-duration – duração da
transiçãO transition-timing-function – tipo de
transição, ex.: linearO transition-delay – quanto tempo
demora até começar a animar.
TransiçõesO Exemplos:
transition-delay: 2s;-moz-transition-delay: 2s; /* Firefox 4 */-webkit-transition-delay: 2s; /* Safari and Chrome */-o-transition-delay: 2s; /* Opera */
ExercícioO 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.
