• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
HTML5 & CSS3
 

HTML5 & CSS3

on

  • 1,600 views

Projeto Capacitar setembro 2012

Projeto Capacitar setembro 2012
Tema: HTML5 & CSS3

Statistics

Views

Total Views
1,600
Views on SlideShare
1,599
Embed Views
1

Actions

Likes
0
Downloads
23
Comments
0

1 Embed 1

http://localhost 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    HTML5 & CSS3 HTML5 & CSS3 Presentation Transcript

    • 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 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
    • 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="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 adobeO 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 dotemplate com 300px de largura e 250px dealtura.
    • 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 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>
    • 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-)
    • 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á 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çõ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.
    • www.gpetec.com.brObrigado!Glauco Primoglaucoprimo@gpetec.com.br www.myscrumhalf.com