Workshop HTML5 + CSS3

html5 css3 davi ferreira

html5 / css3 projeto base / links git clone git://github.com/daviferreira/html5
https://gist.github.com/1818034 http://speakerdeck.com/u/daviferreira/

html5 / css3 html5? ‣ html5 continua sendo html ‣
simpliﬁca o desenvolvimento ‣ reduz o número de elementos no dom ‣ é semanticamente correto

html5 / css3 compatibilidade  http://code.google.com/p/html5shiv/ document.createElement("section"); somente as versões 8 e 7 do IE não oferecem suporte a HTML5 e CSS3

html5 / css3 novas tags ‣ <header> ‣ <nav> ‣
<section> ‣ <article> ‣ <aside> ‣ <footer> ‣ <hgroup> ‣ <ﬁgure> ‣ <ﬁgcaption> ‣ <time>

html5 / css3 <!DOCTYPE html> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML
1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <doctype>

html5 / css3 <html lang="pt-br"> <html xmlns="http://www.w3.org/1999/xhtml" lang="pt-br"> <html>

html5 / css3 <meta charset="UTF-8"> <meta http-equiv="Content-Type" charset="UTF-8" /> charset

html5 / css3 <link href="style.css" rel="stylesheet"> <script src="script.js"></script> <link href="style.css"
rel="stylesheet" type="text/css" /> <script src="script.js" type="text/javascript"></script> <link> & <script>

html5 / css3 “ <header> <h1>Caldeirão do Huck</h1> </header> <div
id="glb-header"> <h1>Caldeirão do Huck</h1> </div> apresenta uma introdução ou um grupo de elementos de navegação para um documento <header>

html5 / css3 “ <nav> <a href="/">Home</a> <a href="/sobre">Sobre</a> <a
href="/contato">Contato</a> </nav> <ul id="glb-menu"> <li><a href="/">Home</a></li> <li><a href="/sobre">Sobre</a></li> <li><a href="/contato">Contato</a></li> </ul> define os links de navegação de uma seção <nav>

html5 / css3 “ <section id="main"> <header> <h1>Caldeirão do Huck</h1>
</header> [...] </section> <div id="glb-corpo"> <div id="glb-cabecalho"> <h1>Caldeirão do Huck</h1> </div> [...] </div> define seções em um documento, tais como capítulos, cabeçalhos e rodapés <section>

html5 / css3 “ <footer> <p>© Copyright 2012 | <a
href="/contato">Contato</a></p> </footer> <div id="glb-footer"> <p>© Copyright 2012 | <a href="/contato">Contato</a></p> </ul> representa o rodapé de um documento ou seção <footer>

html5 / css3 “ <article> <header><h1>Luciano Huck em Salvador!</h1></header> <p>[...]</p>
</article> <div class="item-plantao"> <h3>Luciano Huck em Salvador!</h3> <p>[...]</p> </div> um artigo deve fazer sentido quando isolado - deve ser possível distribuí-lo independente do restante do site <article>

html5 / css3 “ <article> [...] <aside> <h3>Links relacionados</h3> [...]
</aside> </article> <div class="glb-materia"> [...] <div class="glb-sidebar"> <h3>Links relacionados</h3> [...] </div> </div> representa um conteúdo a parte do conteúdo no qual está inserido - deve estar relacionado aos elementos ao seu redor <aside>

html5 / css3 converter o doctype, html e os elementos
do <head> no projeto base <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http:// www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html dir="ltr" xml:lang="pt-br" lang="pt-br" xmlns="http://www.w3.org/ 1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml"> <head> <title>Blog | ACME Group</title> <meta content="text/html;charset=UTF-8" http-equiv="Content-Type" /> <meta content="Blog oficial do conglomerado ACME." name="description" /> <meta content="acme, coyote, blog" name="keywords" /> <link type="text/css" href="stylesheets/reset.css" rel="stylesheet" / > <link type="text/css" href="stylesheets/grid.css" rel="stylesheet" /> <link type="text/css" href="stylesheets/acme.css" rel="stylesheet" /> </head> exercício 1

html5 / css3 converter o doctype, html e os elementos
do <head> no projeto base <!DOCTYPE html> <html lang="pt-br"> <head> <title>Blog | ACME Group</title> <meta charset="UTF-8"> <meta content="Blog oficial do conglomerado ACME." name="description"> <meta content="acme, coyote, blog" name="keywords"> <link href="stylesheets/reset.css" rel="stylesheet"> <link href="stylesheets/grid.css" rel="stylesheet"> <link href="stylesheets/acme.css" rel="stylesheet"> </head> exercício 1 solução

html5 / css3 converter o header para html5 <div id="masthead"
class="row"> <div id="logo" class="column grid_8"> <h1><a href="#">ACME inc.</a></h1> <h2><a href="#">Blog oficial</a></h2> </div> <div id="search" class="column grid_4"> <form action="/" method="GET"> <input type="text" id="fld-search" /> <input type="submit" value="OK" id="btn-search" /> </form> </div> </div> exercício 2

html5 / css3 converter o header para html5 <section id="masthead"
class="row"> <header class="column grid_8"> <h1><a href="#">ACME inc.</a></h1> <h2><a href="#">Blog oficial</a></h2> </header> <div id="search" class="column grid_4"> <form action="/" method="GET"> <input type="text" id="fld-search" id="pesquisar"> <input type="submit" value="OK" id="btn-search"> </form> </div> </section> exercício 2 solução

html5 / css3 converter o menu para html5 <div id="menu"
class="row"> <div class="column grid_12"> <ul> <li> <a href="#">Home</a> </li> <li> <a href="#">Sobre</a> </li> <li class="twitter"> <a href="#">Twitter</a> </li> </ul> </div> </div> exercício 3

html5 / css3 converter o menu para html5 <section id="menu"
class="row"> <nav class="column grid_12"> <a href="#">Home</a> <a href="#">Sobre</a> <a href="#">Arquivo</a> <a href="#">Twitter</a> </nav> </section> exercício 3 solução

html5 / css3 converter o footer para html5 <div id="footer"
class="row"> <div class="column grid_2"> <h4><a href="#">ACME inc.</a></h4> </div> <div class="column grid_6"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Sobre</a></li> <li><a href="#">Contato</a></li> <li class="twitter"><a href="#">Twitter</a></li> </ul> </div> <div id="copyright" class="column grid_4"> <p>© Copyright 2012 ACME inc.</p> </div> </div> exercício 4

html5 / css3 converter o footer para html5 <footer> <section
class="column grid_2"> <h4><a href="#">ACME inc.</a></h4> </section> <section class="column grid_6"> <nav> <a href="#">Home</a> <a href="#">Sobre</a> <a href="#">Contato</a> <a href="#" class="twitter">Twitter</a> </nav> </section> <section id="copyright" class="column grid_4"> <p>© Copyright 2012 ACME inc.</p> </section> </div> exercício 4 solução

html5 / css3 converter o div#content para html5 <div id="content">
<div id="post" class="column grid_8"> <h2>Hello, world!</h2> <h3>ACME é uma palavra usada como um substantivo genérico, assim como XPTO. propaganda de bigorna ACME</h3> [...] </div> <div id="sidebar" class="column grid_4"> <div class="box"> [...] </div> </div> </div> </div> exercício 5

html5 / css3 converter o div#content para html5 <section id="content">
<article id="post" class="column grid_8"> <header> <h2>Hello, world!</h2> <h3>ACME é uma palavra usada como um substantivo genérico, assim como XPTO. propaganda de bigorna ACME</h3> </header> [...] </article> <aside class="column grid_4"> <section class="box"> [...] </section> </aside> </section> exercício 5 solução

html5 / css3 css3 ‣ acaba com hacks ‣ reduz
o número de requests (imagens & javascripts) ‣ responsive design

html5 / css3 -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; border-radius
-webkit-border-top-left-radius: 6px; -moz-border-radius-topleft: 6px; border-top-left-radius: 6px; -webkit-border-radius: 6px 0 0 6px; -moz-border-radius: 6px 0 0 6px; border-radius: 6px 0 0 6px;

html5 / css3 text-shadow: 0px -1px 2px #000; text-shadow offset
horizontal offset vertical blur text-shadow: #000 0px -1px 2px; text-shadow: #000 0px -1px 2px, #ccc 2px 1px 3px;

html5 / css3 box-shadow: inset 3px 3px 4px #ccc; box-shadow
offset horizontal offset vertical blur -webkit-box-shadow: 2px 1px 2px #fff, inset 3px 3px 4px #ccc; -moz-box-shadow: 2px 1px 2px #fff, inset 3px 3px 4px #ccc; box-shadow: 2px 1px 2px #fff, inset 0px 3px 3px 4px #ccc; opcional

html5 / css3 color: #4ca5fe; color: rgba(76, 165, 254, 1);
cores & opacidade color: rgba(122, 134, 98, 0.5); color: rgba(122, 134, 98, .3); color: hsla(220, 98.8%, 64.7%, 1); http://mattpatenaude.com opacity: 0.5; opacity: .3;

html5 / css3 @font-face { font-family: "Aller"; src: url("../fonts/aller.ttf") format("truetype");
} fontes http://webfonts.info/wiki/index.php?title=@font-face_browser_support http://www.fontsquirrel.com/fontface/generator

html5 / css3 .img:hover { -webkit-transform: scale(1.5) rotate(-10deg); -moz-transform: scale(1.5)
rotate(-10deg); -o-transform: scale(1.5) rotate(-10deg); transform: scale(1.5) rotate(-10deg); } transform scale(1.5) rotate(-10deg) skew(-10deg, 20deg) translate(20px, 40px)

html5 / css3 nav a { -webkit-transition: opacity .2s ease-in-out;
-moz-transition: opacity .2s ease-in-out; -o-transition: opacity .2s ease-in-out; transition: opacity .2s ease-in-out; } nav a:hover { opacity: .6; } transition http://css3.bradshawenterprises.com/transitions/

html5 / css3 body { background-color: #4ca5fe; background-image: url(images/fallback-gradient.png); background-image:
-webkit-gradient(linear, 0% 0%, 0% 100%, from (#2F2727), to(#4ca5fe)); background-image: -webkit-linear-gradient(top, #2F2727, #4ca5fe); background-image: -moz-linear-gradient(top, #2F2727, #4ca5fe); background-image: -ms-linear-gradient(top, #2F2727, #4ca5fe); background-image: -o-linear-gradient(top, #2F2727, #4ca5fe); background-image: linear-gradient(top, #2F2727, #4ca5fe); } degradês http://gradients.glrzad.com/

html5 / css3 background-color:#d7d4c3; background:url(../image/bg.jpg) no-repeat center top; backgrounds background:url(../image/bg.jpg)
no-repeat center top, url (../images/bg2.jpg) repeat center top;

html5 / css3 @media screen { * { font-family: sans-serif
} } @media all and (min-width:500px) { … } @media (min-width:500px) { … } @media screen and (color), projection and (color) { … } media queries <link href="stylesheets/16-9.css" rel="stylesheet" media="all and (device-aspect-ratio: 16/9"> <link href="stylesheets/projection.css" rel="stylesheet" media="projection and (min-device-width: 800px">

html5 / css3 adicionar borda arredondada de 4px ao botão
de busca e borda arredondada superior direita de 6 px no campo de busca #btn-search{ -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } exercício 1 #fld-search{ -webkit-border-radius: 0 6px 0 0; -moz-border-radius: 0 6px 0 0; border-radius: 0 6px 0 0; }

html5 / css3 adicionar uma sombra aos elementos h1 e
h2 com 2px de oﬀset X, 3px de oﬀset Y, 4px de blur e cor #999 h1, h2{ -webkit-text-shadow: 2px 3px 4px #999; -moz-text-shadow: 2px 3px 4px #999; text-shadow: 2px 3px 4px #999; } exercício 2

html5 / css3 o :hover dos links passam a ter
a cor de fundo #000 animar esta propriedade utilizando a transition ease-in-out, com 3 segundos a { -webkit-transition: background-color .3s ease-in-out; -moz-transition: background-color .3s ease-in-out; -o-transition: background-color .3s ease-in-out; transition: background-color .3s ease-in-out; } a:hover { background-color: #000; } exercício 3 -webkit-transition-property:color, background; -webkit-transition-duration: 1s, 1s; -webkit-transition-timing-function: linear, ease-in;

html5 / css3 no hover da imagem dos posts, utilize
a propriedade transform para aumentar a foto em uma escala de 1.3 e girar a foto em 30 graus p.photo img:hover{ -webkit-transform: scale(1.3) rotate(30deg); -moz-transform: scale(1.3) rotate(30deg); transform: scale(1.3) rotate(30deg); } exercício 4

html5 / css3 utilizando uma media query deﬁna que, para
todos os dispositivos com largura máxima de 640px, a fonte dos parágrafos dos elementos <article> deve possuir o tamanho de 18px e as imagens dos elementos <article> deve ser alterada via transform para uma escala de 0.8 @media (max-width:640px) { article p { font-size: 18px; } article img { -webkit-transform: scale(0.8); -moz-transform: scale(0.8); transform: scale(0.8); } } exercício 5

html5 / css3 retrospectiva ‣ html5 é só html ‣
quando e como utilizar as novas tags ‣ simpliﬁcação ‣ ﬁm dos hacks ‣ responsive design

html5 / css3 fim

Workshop HTML5 + CSS3

Workshop HTML5 + CSS3

More Decks by Davi Ferreira

Other Decks in Programming

Featured

Transcript