0
HML5 e CSS 3.0   Glauco Primo            Projeto Capacitar – GPE                   Setembro de 2012
HTML 5O HTML5 veio para substituir o HTML 4.0O Novidades:  O Reorganização semântica, Vídeo, audio,    Canvas
Reorganização semânticaO Originalmente os websites utilizam  tabelas para posicionar o layout na páginaO Com o html 3.0 as...
Reorganização semânticaO Principais elementos estruturais:  O Header  O Nav  O Section  O Article  O Aside  O Footer
Reorganização semânticaO Então a estrutura de um HTML segundo a nova semântica da W3C seria:  <!DOCTYPE html>  <html lang=...
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.: ...
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 adobeO Compativel com IE9, Firefox 4+, Chrome...
Vídeo ExemploO   <video width=”640" height=”480" controls="controls">    <source src=”video.mp4" type="video/mp4" />     <...
CanvasO O elemento canvas é utilizado para desenhar    gráficos, via scripting, normalmente javascript.O    Na verdade o e...
Canvas Exemplo<canvas id="myCanvas" width="200" height="100"style="border:1px solid #d3d3d3;">    Your browser does not su...
CSS 3.0O CSS 3 é a mais nova versão do CSS  (cascade style sheeting)O Muitas novidades incorporadas:  O  Não utilizar mais...
Border RadiusO Adiciona Borda arredondada a borda  padrão dos elementos.O Sintaxe do Border radius:  border:2px #Cor solid...
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 ...
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 ...
CSS 3 FontesO Agora os web Designers não estão limitados  as fontes do navegador.O Basta importar com o projeto a fonte  d...
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 é...
TransiçõesO Transições tem as seguintes propriedades:  O transition-property – nome da propriedade    que será afetada  O ...
TransiçõesO Exemplos:  transition-delay: 2s;  -moz-transition-delay: 2s; /* Firefox 4 */  -webkit-transition-delay: 2s; /*...
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...
www.gpetec.com.brObrigado!Glauco Primoglaucoprimo@gpetec.com.br                            www.myscrumhalf.com
Upcoming SlideShare
Loading in...5
×

HTML5 & CSS3

1,500

Published on

Projeto Capacitar setembro 2012
Tema: HTML5 & CSS3

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,500
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
42
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "HTML5 & CSS3"

  1. 1. HML5 e CSS 3.0 Glauco Primo Projeto Capacitar – GPE Setembro de 2012
  2. 2. HTML 5O HTML5 veio para substituir o HTML 4.0O Novidades: O Reorganização semântica, Vídeo, audio, Canvas
  3. 3. Reorganização semânticaO Originalmente os websites utilizam tabelas para posicionar o layout na páginaO Com o html 3.0 as tabelas saíram, e deram lugar a divs e posicionamento relativo/absolutoO Com o html 5 as divs voltam a assumir o papel inicial delas de recurso estilístico
  4. 4. Reorganização semânticaO Principais elementos estruturais: O Header O Nav O Section O Article O Aside O Footer
  5. 5. Reorganização semânticaO 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>
  6. 6. 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>
  7. 7. Exercício 1O Uma seção com dois artigosO Um rodapé com algumas informaçõesO Resultado com alguns estilos em html5.html
  8. 8. VídeoO Simples de ImplementarO Para não utilizar mais a tecnologia Flash da adobeO Compativel com IE9, Firefox 4+, Chrome 6+, Safari 5+, Opera 10+O Propriedades: O Width, Height, Controls, source, type
  9. 9. 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 dotemplate com 300px de largura e 250px dealtura.
  10. 10. 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.
  11. 11. Canvas Exemplo<canvas id="myCanvas" width="200" height="100"style="border:1px solid #d3d3d3;"> Your browser does not support the HTML5canvas tag.</canvas><script>var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");ctx.font="30px Arial";ctx.strokeText("Hello World",10,50);</script>
  12. 12. 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ções O SeletoresO Mesmo ambiente do CSS 2.0O Até browser mais antigos tem compatibilidade (exceto IE 8, 7-)
  13. 13. 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 */
  14. 14. ExercícioO Colocar uma borda ligeiramente arredonada no menu horizontal da página html5.html
  15. 15. 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
  16. 16. ExercícioO Adicionar sombra ao menu horizontal da página.
  17. 17. 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)
  18. 18. 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+ */ }
  19. 19. ExercícioO Adicionar Ao título (header) da sua página a fonte da GPE que se encontra no repositório.
  20. 20. 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.
  21. 21. TransiçõesO 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.
  22. 22. TransiçõesO Exemplos: transition-delay: 2s; -moz-transition-delay: 2s; /* Firefox 4 */ -webkit-transition-delay: 2s; /* Safari and Chrome */ -o-transition-delay: 2s; /* Opera */
  23. 23. 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.
  24. 24. www.gpetec.com.brObrigado!Glauco Primoglaucoprimo@gpetec.com.br www.myscrumhalf.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×