No mês 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 público foi sensacional, e pensando que muitos de vocês também gostariam de ver o conteúdo da Oficina, resolvi montar um estudo de caso completo e compartilhar aqui no blog.

Muita gente me pergunta sobre as reais possibilidades de se começar a utilizar Html5 e CSS3 hoje, e tenho certeza que temos que explorar o máximo que a web proporciona para nós com o objetivo sempre de melhorar a experiência dos usuários. Talvez não consigamos atingir 100% deles, devido há alguns browsers ainda não suportarem a maioria dessas novas funcionalidades (sabemos bem de que navegador estamos falando :). Mas acredito que trabalhando de forma a permitir a legitimidade de conteúdo e navegação para 100% dos usuários, porque não facilitar e deixar ainda mais agradável a navegação de tantos usuários 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!

Tutorial: Case Study with Html5 + CSS3

Preview Template - Download

*Este template será visualizado melhor com todas em browsers Webkit, como Safari e Chrome.

Layout

Para começar 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 mudanças semânticas que ocorreram. O layout que vamos montar está abaixo:

Tutorial: Case Study with Html5 + CSS3

A partir deste layout vamos dividir ele em uma estrutura base, com as principais regiões que irão compor nosso Html.

Tutorial: Case Study with Html5 + CSS3

HTML5

Tendo toda a base do layout finalizada, a estrutura na cabeça e com as imagens já exportadas, vamos começar a montar nosso HTML. Aqui já podemos notar algumas diferenças, até mesmo simplificações em relação ao XHTML 1.0. Vejam como ficou fácil 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 atenção aqui, este script. Na verdade isso faz com que estes nossos novos elementos sejam renderizados em browsers que ainda não suportam Html5.

	
<!DOCTYPE html>
<html lang="en"><head>
  <meta charset="utf-8" />
  <title>Ferris Buller on Abduzeedo</title>
  <link rel="stylesheet" href="style.css">
<!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
</head>
<body>
</body>
</html>

Com a base do Html pronta começamos a inserir nossos elementos. Começando pelo header, as novidades aqui são bem claras, como os elementos < header > e < section >. Para não ficar um post muito longo não entrarei no mérito de todas as novas tags e para que servem cada uma, mas eeiste muita documentação boa na internet, inclusive nos 2 livros que passei no início do post.

Tutorial: Case Study with Html5 + CSS3

<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 conteúdo. Na coluna da esquerda temos um elemento muito importante para falarmos aqui, são os formulários. 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.

Tutorial: Case Study with Html5 + CSS3

<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 são os elementos < figure > e < video >. Os videos e audios são agora facilmente inseridos nohtml sem necessidade de se fazer um embed de um Flash por exemplo. Cada browser tem (ou terá) seu próprio player, e com uma simples linha de código temos nosso vídeo rodando! Claro, para os browsers que não suportam ainda, bom, basta inserir o embed do flash que está pronto, todos os usuários atingidos!

Tutorial: Case Study with Html5 + CSS3


<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!

Tutorial: Case Study with Html5 + CSS3

<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.

Tutorial: Case Study with Html5 + CSS3

Para iniciar nosso CSS eu gosto de utilizar sempre um reset.css, no template para download pode-se analisar um pouco melhor ele. Além disto precisamos incluir nossos elementos novos do Html5 como display:block, assim atingimos todos os browsers, mesmo aqueles que não 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 mão 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 começam aqui. Reparem que nos textos já utilizamos elementos como column-count and column-gap, para textos em múltiplas colunas. Reparem também 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 começamos a trabalhar no nosso formulário. Note que aqui usamos funções como box-shadow and transition, Transition eu acredito que é uma das principais novidades do CSS3, usando como cuidado e em locais certos podemos enriquecer muito a experiência do usuário. É o tipo de característica que não afeta os usuários que não suportam CSS3, e usando corretamente podemos manter a fidelidade de conteúdo atingindo 100% dos usuários 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 função "transform" do CSS3. Dificlmente alguém acreditaria que isto foi feito sem JS ou até mesmo Flash. Outra novidade é a função "nth-child", com ela temos controle sobre todos os elementos de uma repetição, 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 começar a utilizar Html5 e CSS3 hoje, é possível. Existe muita documentação mostrando dicas e truques para sempre atendermos todos os usuários no quisito principal do site: conteúdo e navegação. Permitindo acesso a isto para 100% dos usuários, depois é trabalhar para melhorar a experiência de quem utiliza navegadores compatíveis!

About the author of this post

I’m a UX / Web designer and manage business and projects at Zee. Also I love to spend some hours on our main projects Openjobs and as a writer and contributor here on Abduzeedo..

Also, you can take a look on my personal website.