Tutorial

Tutorial: Estudo de Caso utilizando Html5 + CSS3
No ms passado eu ministrei uma palestra na Campus Party, um dos maiores eventos de tecnologia do mundo, falando sobre Fireworks, Html5 e CSS3. Estava muito bacana, a receptividade do pblico foi sensacional, e pensando que muitos de vocs tambm gostariam de ver o contedo da Oficina, resolvi montar um estudo de caso completo e compartilhar aqui no blog. Muita gente me pergunta sobre as reais possibilidades de se comear a utilizar Html5 e CSS3 hoje, e tenho certeza que temos que explorar o mximo que a web proporciona para ns com o objetivo sempre de melhorar a experincia dos usurios. Talvez no consigamos atingir 100% deles, devido h alguns browsers ainda no suportarem a maioria dessas novas funcionalidades (sabemos bem de que navegador estamos falando :). Mas acredito que trabalhando de forma a permitir a legitimidade de contedo e navegao para 100% dos usurios, porque no facilitar e deixar ainda mais agradvel a navegao de tantos usurios que utilizam navegadores que permitem isto? Minhas bibliografia principal para este estudo de caso foram 2 livros: Html5 for Web Designers and CSS3 for Web Designers. Vale muito a leitura!
PREVIEW TEMPLATE - DOWNLOAD

*Este template ser visualizado melhor com todas em browsers Webkit, como Safari e Chrome.
Layout
Para comear nosso estudo de caso, elaborei um layout simples, mas onde pudesse aplicar diversos conceitos de CSS3 e ainda montar uma estrutura em Html5 utilizando as principais mudanas semnticas que ocorreram. O layout que vamos montar est abaixo:
A partir deste layout vamos dividir ele em uma estrutura base, com as principais regies que iro compor nosso Html.
HTML5
Tendo toda a base do layout finalizada, a estrutura na cabea e com as imagens j exportadas, vamos comear a montar nosso HTML. Aqui j podemos notar algumas diferenas, at mesmo simplificaes em relao ao XHTML 1.0. Vejam como ficou fcil de decorar agora esta base do Html, ou vai me dizer que voc sabia de cor tudo que deveria conter dentro do DOCTYPE por exemplo? Temos mais uma coisa para chamar ateno aqui, este script. Na verdade isso faz com que estes nossos novos elementos sejam renderizados em browsers que ainda no suportam Html5.
<!DOCTYPE html> <html lang="en"><head> <meta charset="utf-8" /> <title>Ferris Buller on Abduzeedo</title> <link rel="stylesheet" href="style.css">

</head> <body> </body> </html>
Com a base do Html pronta comeamos a inserir nossos elementos. Comeando pelo header, as novidades aqui so bem claras, como os elementos < header > e < section >. Para no ficar um post muito longo no entrarei no mrito de todas as novas tags e para que servem cada uma, mas eeiste muita documentao boa na internet, inclusive nos 2 livros que passei no incio do post.
<header id="main-header"> <section id="block-twitter"> <p class="tweet-text">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate.<span class="tweet-time">21 minutes ago via Twitter</span></p> </section> <section id="block-title"> <h1>Ferris Bueller</h1> </section> </header>
Feito o header partimos para o contedo. Na coluna da esquerda temos um elemento muito importante para falarmos aqui, so os formulrios. Tem bastante novidade legal em Html5 a respeito deles, como utilizar os atributos "placeholder", "type" e "autofocus". Brinque um pouco com eles e se quiser leia um pouco mais nesse timo artigo em 24ways.org.
<div id="main-content"> <section id="content">
<section class="one-col"> <h3>Hey guys,</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <p> <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </section>
<section class="two-col"> <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est culpa qui officia deserunt mollit anim id estmollit anim id est enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex.</p> <ul id="social-icons"> <li class="bt-twitter"><a href="#">Twitter</a></li> <li class="bt-facebook"><a href="#">Facebook</a></li> <li class="bt-linkedin"><a href="#">Linkedin</a></li> </ul> </section>
<section class="one-col"> <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </section>
<aside id="form"> <form action="template_submit" method="get"> <input id="name" name="name" type="text" class="textfield nome" placeholder="Escreva seu nome" > <input id="email" name="email" type="text" class="textfield email" placeholder="Email"> <textarea id="message" name="message" type="textarea" placeholder="Mensagem"></textarea> <input type="submit" value="Enviar" class="submit"> </form> </aside> </section>
Na coluna da direita, temos o portfolio. Aqui a novidade so os elementos < figure > e < video >. Os videos e audios so agora facilmente inseridos nohtml sem necessidade de se fazer um embed de um Flash por exemplo. Cada browser tem (ou ter) seu prprio player, e com uma simples linha de cdigo temos nosso vdeo rodando! Claro, para os browsers que no suportam ainda, bom, basta inserir o embed do flash que est pronto, todos os usurios atingidos!
<section id="portfolio"> <figure> <a href="#" class="link-thumbs"><img src="images/thumb-1.png" alt="Nome do projeto"></a> <a href="#" class="link-thumbs"><img src="images/thumb-2.png" alt="Nome do projeto"></a> <a href="#" class="link-thumbs"><img src="images/thumb-3.png" alt="Nome do projeto"></a> <a href="#" class="link-thumbs"><img src="images/thumb-4.png" alt="Nome do projeto"></a> <a href="#" class="link-thumbs"><img src="images/thumb-5.png" alt="Nome do projeto"></a> <a href="#" class="link-thumbs"><img src="images/thumb-6.png" alt="Nome do projeto"></a> </figure> <video controls width="380" height="210" poster="images/placeholder.jpg"> <source src="video/video-1.mp4" type="video/mp4"> <object type="application/x-shockwave-flash" width="380" height="268" data="player.swf?file=video/video-1.mp4"> <param name="movie" value="player.swf?file=video/video-1.mp4"> </object> </video>
</section> </div>
E por ltimo a nova tag < footer >. Aqui sem muitas novidades!
<footer> <p>Design by Fabiano Meneghetti<br/> 2011 - Oficina Campus Party</p> </footer>
Aqui da pra ver o que temos ate agora.
CSS3
Com o html pronto vamos iniciar nosso CSS. Nesta imagem eu mostro os principais recursos de CSS3 que vamoso testar aqui.
Para iniciar nosso CSS eu gosto de utilizar sempre um reset.css, no template para download podese analisar um pouco melhor ele. Alm disto precisamos incluir nossos elementos novos do Html5 comodisplay:block, assim atingimos todos os browsers, mesmo aqueles que no suportam html5.
@import url("reset.css");
/* New HTML5 elements */
article, aside, figure, footer, header, hgroup, nav, section { display:block; }
/* -------- */
Bom a partir de agora meter a mo no CSS, aqui temos somente os elementos principais, que formam a base do nosso site.
body {
margin: 0; font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; font-size: 13px; line-height: 20px; color: #5F5E59; background: url(images/bg_body.jpg) left top repeat; } a:link, a:active, a:visited { color: #305F9B; text-decoration: none; } a:hover { color: #000; text-decoration: underline; }
/* ID's */
header { background: url(images/bg_header.jpg) left top repeat-x; margin-bottom: 25px; } #block-twitter { width: 700px; height: 60px; position: relative; margin: 0 auto; padding: 20px 200px 0 0;
} #block-title { width: 900px; height: 80px; position: relative; margin: 0 auto; padding-top: 25px; } #main-content { width: 900px; position: relative; margin: 0 auto; } footer { width: 900px; position: relative; margin: 0 auto; clear: both; padding: 30px 0; background: url(images/img_star.png) left top repeat-x; }
/* -------- */
As novidades do CSS comeam aqui. Reparem que nos textos j utilizamos elementos como column-countand column-gap, para textos em mltiplas colunas. Reparem tambm o uso dos prefixos -mox e -webkit, voc pode ver neste artigo a lista de prefixos para os principais browsers http://peter.sh/.
/* Header */ #block-twitter p.tweet-text {
color: #FFF; font-family: Georgia, "Times New Roman", Times, serif; font-style: italic; font-size: 14px; text-shadow: 0 -1px 0 #000; }
#block-twitter span.tweet-time { color: #E3BACA; font-family: Georgia, "Times New Roman", Times, serif; font-style: italic; font-size: 12px; text-shadow: 0 -1px 0 #000; padding-left: 6px; }
header h1 { width: 454px; height: 53px; background: url(images/img_ferris.png) left top no-repeat; text-indent: -9000px; margin: 0 auto; }
/* -------- */
/* Text */
section#content { width: 400px; float: left; text-shadow: 0 1px 0 #FFF; padding-bottom: 40px; } section#content h3 { margin-bottom: 15px; color: #949691; font-size: 18px; font-weight: bold; } section#content p { margin-bottom: 15px; } section#content section.two-col { -moz-column-count: 2; -moz-column-gap: 40px; -webkit-column-count: 2; -webkit-column-gap: 40px; column-count: 2; column-gap: 40px; padding-bottom: 20px; } section#content section.two-col p { font-size: 20px; line-height: 28px; }
ul#social-icons { border-top: 2px dashed #AAA19F; width: 180px; height: 55px; padding-top: 20px; } ul#social-icons li, ul#social-icons li a { width: 60px; height: 55px; float: left; display: block; text-indent: -9000px; } ul#social-icons li a:link, ul#social-icons li a:active, ul#social-icons li a:visited{ -webkit-transition: background 0.3s ease-out; } #social-icons li.bt-twitter a { background: url(images/social_icons.png) 2px top no-repeat; } #social-icons li.bt-twitter a:hover { background: url(images/social_icons.png) 2px -56px no-repeat; } #social-icons li.bt-facebook a { background: url(images/social_icons.png) -59px top no-repeat; }
#social-icons li.bt-facebook a:hover { background: url(images/social_icons.png) -59px -58px no-repeat; } #social-icons li.bt-linkedin a { background: url(images/social_icons.png) -121px top no-repeat; } #social-icons li.bt-linkedin a:hover { background: url(images/social_icons.png) -121px -57px no-repeat; }
/* -------- */
Aqui comeamos a trabalhar no nosso formulrio. Note que aqui usamos funes como boxshadow andtransition, Transition eu acredito que uma das principais novidades do CSS3, usando como cuidado e em locais certos podemos enriquecer muito a experincia do usurio. o tipo de caracterstica que no afeta os usurios que no suportam CSS3, e usando corretamente podemos manter a fidelidade de contedo atingindo 100% dos usurios da forma correta.
/* Form */
aside#form input.textfield, aside#form textarea { width: 380px; padding-left: 8px; margin-bottom: 10px; border: 1px solid #CCC; padding: 10px; color: #6C595F; -webkit-box-shadow:inset 1px 1px 2px #999; -moz-box-shadow:inset 1px 1px 2px #999; -khtml-box-shadow:inset 1px 1px 2px #999;
box-shadow:inset 1px 1px 2px #999; -webkit-transition: border 0.4s ease-out; -webkit-transition:-webkit-transform .2s ease-in; } aside#form textarea { height: 100px; } aside#form input.textfield:hover, aside#form textarea:hover { border: 1px solid #999; -webkit-transform:scale(1.1); -moz-transform:scale(1.1); } aside#form input.textfield:focus, aside#form textarea:focus { outline: none; border: 1px solid #6C595F; -webkit-transform:scale(1.1); -moz-transform:scale(1.1);
} #form form input.submit { background: #6C595F; font-size: 13px; font-weight: bold; color: #FFF; padding: 5px 10px; border: none;
-webkit-border-radius:4px; -moz-border-radius:4px; -khtml-border-radius:4px; border-radius:4px; float: right; -webkit-transition: background 0.4s ease-out; cursor: pointer; } #form form input.submit:hover { background: #333; }
/* -------- */
No portfolio temos um efeito muito bacana, usando a funo "transform" do CSS3. Dificlmente algum acreditaria que isto foi feito sem JS ou at mesmo Flash. Outra novidade a funo "nthchild", com ela temos controle sobre todos os elementos de uma repetio, como os thumbs do portfolio, retirando a margin-right somente dos elementos da direita. Pra saber um pouco mais confiram esse artigo css-tricks.com.
/* Portfolio */
section#portfolio { width: 410px; float: right; padding-bottom: 40px; } #portfolio figure a.link-thumbs { width: 190px; height: 156px; display: block;
float: left; -webkit-border-radius: 8px; -moz-border-radius: 8px; -khtml-border-radius: 8px; border-radius: 8px; -webkit-box-shadow: 1px 1px 2px #999; -box-box-shadow: 1px 1px 2px #999; -khtml-box-shadow: 1px 1px 2px #999; box-shadow: 1px 1px 2px #999; margin: 0 20px 20px 0; opacity: .6; -webkit-transition: opacity 0.4s ease-out; -webkit-transition: -webkit-transform 0.4s ease-out; } #portfolio figure a.link-thumbs:hover { opacity: 1; -webkit-transform:rotate(-15deg); } #portfolio figure a.link-thumbs:nth-child(2n) { margin-right: 0; } #portfolio video { background: #C9CEC8; padding: 10px; -webkit-border-radius: 8px; -moz-border-radius: 8px; -khtml-border-radius: 8px; border-radius: 8px;
-webkit-box-shadow: 1px 1px 2px #999; -box-box-shadow: 1px 1px 2px #999; -khtml-box-shadow: 1px 1px 2px #999; box-shadow: 1px 1px 2px #999; clear: both; }
/* -------- */
E por ltimo nosso footer, sem grandes novidades ;)

/* Footer */
footer p { font-size: 11px; line-height: 18px; background: url(images/logo_abduzeedo.png) right center no-repeat; text-shadow: 0 1px 0 #FFF; }
/* -------- */
PREVIEW TEMPLATE - DOWNLOAD

Em geral o que posso falar que temos que comear a utilizar Html5 e CSS3 hoje, possvel. Existe muita documentao mostrando dicas e truques para sempre atendermos todos os usurios no quisito principal do site: contedo e navegao. Permitindo acesso a isto para 100% dos usurios, depois trabalhar para melhorar a experincia de quem utiliza navegadores compatveis!
Sobre o autor
I'm from Brazil, co-founder of Zee with Fabio. Nowadays I like to play with Fireworks, Photoshop and improve my skills in CSS. If you wanna request some posts, please feel free to contact me or follow on Twitter.

Tutorial

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Tutorial

Enviado por

Direitos autorais:

Formatos disponíveis

Tutorial: Estudo de Caso utilizando Html5 + CSS3

PREVIEW TEMPLATE - DOWNLOAD

</head> <body> </body> </html>

<div id="main-content"> <section id="content">

<footer> <p>Design by Fabiano Meneghetti<br/> 2011 - Oficina Campus Party</p> </footer>

Aqui da pra ver o que temos ate agora.

/* New HTML5 elements */

article, aside, figure, footer, header, hgroup, nav, section { display:block; }

E por ltimo nosso footer, sem grandes novidades ;)

PREVIEW TEMPLATE - DOWNLOAD

Você também pode gostar