HTML5 e CSS3

Davidson Fellipe | @davidsonfellipe
Aug 26, 2011

Quem sou?

http://www.flickr.com/photos/julianamalta/

assuntos abordados

Tim Berners-Lee

web

http://www.w3c.br/cursos/html5/conteudo/capitulo1.html

html

suporte html5 e css3

algumas das tags que iremos ver...

<article> 
<aside> 	
<audio> 	
<canvas> 	
<datalist>
<details> 
<embed> 	
<figcaption> 
<figure> 	
<footer> 	
<header> 	
<hgroup> 	
<nav> 	
<progress>
<section> 
<time> 	
<video>

você lembra seu DOCTYPE do xhtml?

  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    									"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    									"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" 
    									"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
    									"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  • X

DOCTYPE do html5 :)

  • <!DOCTYPE html">

simplificação do charset

xhtml

<meta http-equiv="content-type" content="text/html; charset=utf-8">

html

<meta charset="utf-8">

estrutura básica do html5

<!DOCTYPE HTML>
<html lang="pt-br">
	<head>
	    <meta charset="utf-8">
	    <link rel="stylesheet" type="text/css" href="estilo.css">
	    <title>titulo da pagina</title>
	</head>
	<body>
	    <header>  
	        <!-- cabeçalho -->  
	    </header>  
	    <nav>  
	        <!-- navegação principal -->  
	    </nav>    
	    <section>  
	        <!-- conteúdo principal -->  
	    </section>  
	    <aside>  
	        <!-- sidebar -->  
	    </aside>  
	    <footer>  
	        <!-- rodapé -->  
	    </footer>
	</body>
</html>

html5 shiv

suporte para internet explorer antigos

<!DOCTYPE  html>
<html>
	<head>
		<!--[if  lt  IE  9]>
		<script  src="http://html5shiv.googlecode.com/svn/trunk/html5.js"  
		type="text/javascript"></script>
		<![endif]-->
	</head>
	<body>
	</body>
</html>
ask not what your browser can do for you, but what you can do for your browser.
progressive enhancement

cross-browser : adicionando class apenas para o internet explorer

			<!--[if lt IE 8]> <body class="ie ie7"> <![endif]-->
			<!--[if IE 8]> <body class="ie ie8"> <![endif]-->
			<!--[if IE 9]> <body class="ie9"> <![endif]-->
			<!--[if (gt IE 9)|!(IE)]><!-->
			<body class=''>
			<!--<![endif]-->
							

html5 : datalist

<label>informe sua cidade</label>
<input list="cidades"/>
<datalist id="cidades">                   
  <option value="Frederico Westphalen"/>  
  <option value="Porto Alegre"/>
  <option value="Ijui"/>
  <option value="Recife"/>
  <option value="Rio de Janeiro"/>                  
</datalist>                               

html5 : header

<header>
<h1>Frederico Westphalen</h1>
<p>Rio Grande do Sul</p>
</header>                             

Frederico Westphalen

Rio Grande do Sul

html5 : hgroup

<hgroup>
<h1>Frederico Westphalen</h1>
<h2>EATI</h2>
</hgroup>                             

Frederico Westphalen

EATI 2011

html5 : progress

<progress>carregando...</progress>
carregando...

<progress value="57" max="100">57% complete</progress>    
57% completo

html5 : microdata

<div itemscope itemtype="http://globoesporte.com/Time">
 	<p>time: <span itemprop="name">Gremio</span>.</p>
 	<p>país: <span itemprop="country">Brasil</span>.</p>
</div>
<div itemscope itemtype="http://globoesporte.com/Time">
 	<p>time: <span itemprop="name">Internacional</span>.</p>
 	<p>país: <span itemprop="country">Brasil</span>.</p>
</div>
						

html5 : video

<video width="320" height="240" controls="controls">
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.webm" type="video/webm" />
Your browser does not support the video tag.
</video>
						
document.getElementById("video").play();

html5 : audio

<audio src="song.ogg" controls="controls"></audio>
						
document.getElementById("audio").muted = false;

html5 : figure

<figure>
  <p>html5 em libras?</p>
  <img src="sinais.png"
   width="200"
   height="282" />
</figure>                           

html5 em libras?

canvas

canvas

canvas libraries

canvas no internet explorer

<!--[if lt IE9]>
<script src="excanvas.js"></script>
<![endif]-->
var el = document.createElement('canvas');
G_vmlCanvasManager.initElement(el);
var ctx = el.getContext('2d');

doodle do google usando canvas

svg

excanvas

svg

<!--[if lt IE9]>
<meta name="svg.render.forceflash" content="true">
<![endif]-->

<script src="svg.js"></script>
			  

svg libraries

mathML

<math> 
  <mrow> 
    <mi>x</mi> 
    <mo>=</mo> 
    <mfrac> 
      <mrow> 
        <mo form="prefix">−</mo> 
        <mi>b</mi> 
        <mo>±</mo> 
        <msqrt> 
          <msup> 
            <mi>b</mi><mn>2</mn> 
          </msup> 
          <mo>−</mo> 
          <mn>4</mn><mo>⁢</mo><mi>a</mi> 
          <mo>⁢</mo> 
          <mi>c</mi> 
        </msqrt> 
      </mrow> 
      <mrow> 
        <mn>2</mn> 
        <mo>⁢</mo> 
        <mi>a</mi> 
      </mrow> 
    </mfrac> 
  </mrow> 
</math>
x = b ± b2 4a c 2 a

css3 : nth-child / first-child

.code-example .zebra:nth-child(2n+1) {
	background: #E3E3E3;}
.code-example .zebra:nth-child(odd) {
	background: #E3E3E3;
}
.code-example .zebra:nth-child(even) {
	background: #fff;
}
.code-example .zebra:first-child{
    border:2px solid #f00;
}
1
2
3
4
5
6
7
8
9

css3 : box-shadow

.code-example .box-shadow{
	box-shadow: 0px 0px 10px #ccc;
}

css3 : border-radius

.code-example .border-radius{
	border-radius: 25px;
}

css pie

css3 : Opacity

.code-example .box-opacity{
	color: rgba(255, 0, 0, 0.75);
}
		

css3 : font-face

@font-face {
    font-family: 'tahoma';
    src: url('font/tahoma.eot?#iefix') format('embedded-opentype'),
    url('font/tahoma.woff') format('woff'),
    url('font/tahoma.ttf') format('truetype');
}
.font-face-teste {
    font-family: "tahoma";
}
Frederico Westphalen

Ultimate CSS Gradient Generator

html5 : forms

<input type="color" value="#b97a57">
<input type="date" value="2011-06-08">
<input type="datetime" value="2011-06-09T20:35:34.32">
<input type="datetime-local" value="2011-06-09T22:41">
<input type="email" value="email@fellipe.com">
<input type="month" value="2012-06">
<input type="number" value="3">
<input type="range" value="15">

<input type="search" value="[Any search text]">

<input type="tel" value="[Any numeric value]">

<input type="time" value="22:38">
<input type="url" value="http://robertnyman.com">

<input type="week" value="2011-W24">
		

html5 > Device Orientation

window.addEventListener('deviceorientation', function(event) {
				var a = event.alpha;
				var b = event.beta;
				var g = event.gamma;
}, false);

links

prefixr

modernizr

html5 boilerplate

camanjs

popcornjs

excanvas

Obrigado

Davidson Fellipe | @davidsonfellipe
Aug 26, 2011 / www.fellipe.com