Your SlideShare is downloading. ×

HTML5 & CSS3

1,438

Published on

Projeto Capacitar setembro 2012 …

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,438
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
40
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. HML5 e CSS 3.0 Glauco Primo Projeto Capacitar – GPE Setembro de 2012
  • 2. HTML 5O HTML5 veio para substituir o HTML 4.0O Novidades: O Reorganização semântica, Vídeo, audio, Canvas
  • 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. Reorganização semânticaO Principais elementos estruturais: O Header O Nav O Section O Article O Aside O Footer
  • 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. 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. Exercício 1O Uma seção com dois artigosO Um rodapé com algumas informaçõesO Resultado com alguns estilos em html5.html
  • 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. 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. 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. 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. 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. 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. ExercícioO Colocar uma borda ligeiramente arredonada no menu horizontal da página html5.html
  • 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. ExercícioO Adicionar sombra ao menu horizontal da página.
  • 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. 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. ExercícioO Adicionar Ao título (header) da sua página a fonte da GPE que se encontra no repositório.
  • 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. 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. 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. 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. www.gpetec.com.brObrigado!Glauco Primoglaucoprimo@gpetec.com.br www.myscrumhalf.com

×