HTML5 & CSS3

  • 1,252 views
Uploaded on

Projeto Capacitar setembro 2012 …

Projeto Capacitar setembro 2012
Tema: HTML5 & CSS3

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,252
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
31
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