Impácto visual, retroatividade, padronização de código (classes), w3c validator, CSS3. Material de estudos elaborado por Marcos César // www.marcoscesar.com Todo o conteúdo é livre e pode ser copiado, consultado sempre e divulgado em toda internet desde que citados os créditos. cc 2012 Construsite Brasil - Desenvolvimento web.

1. Construsite Brasil
Criação de sites

2. Construsite Brasil
Criação de sites
HIERARQUIA DOS PONTOS MAIS IMPORTANTES HOJE EM UM SITE:
IMPACTO
VISUAL
IDENTIFICAÇÃO VISUAL
AMBIENTAÇÃO E CONFORTABILIDADE
VISÃO DO TODO
1º
NAVEGABILIDADE
VISUAL
LEITURA DA INFORMAÇÃO
VISÃO FRAGMENTADA
2º
FUNÇÃO
VISUAL
CONTEÚDO
3º

3. Construsite Brasil
Criação de sites
FUNCIONA?
4º
HIERARQUIA DOS PONTO MAIS IMPORTANTES HOJE EM UM SITE:
A VERDADEIRA FUNÇÃO
DE UM SITE COMEÇA NO
PRIMEIRO IMPÁCTO ATÉ A
ÚLTIMA AÇÃO DO USUÁRIO.
MUNDO CONTEMPORÂNEO
MAIOR IMPORTÂNCIA
ESTÉTICA
O FUNCIONAR NÃO SE
LIMITA APENAS EM AÇÕES
DO USUÁRIO É TÃO
IMPORTANTE QUANDO O
VISUAL

4. Construsite Brasil
Criação de sites
CSS FOI CRIADO PARA FACILITAR E CENTRALIZAR
e o mais óbvio
FAZER O ESTILO
FUNÇÕES ATUAIS:
HTML = CONTEÚDO
CSS = ESTILO

5. Construsite Brasil
Criação de sites
AMBIENTAÇÃO
VALOR
Arial, Verdana, sans-serif
#FFF
20% 10% 15% 10%
SELETOR
h1
.class
#div
PROPRIEDADE
font-family:
color:
padding:
TROCANDO EM MIÚDOS
seletor {propriedade: valor;}

6. Construsite Brasil
Criação de sites
FORMAS DE APLICAÇÃO DE ESTILO
EXTERNAMENTE
<link href=”style.css” rel=”stylesheet” type=”text/css” />
INTERNAMENTE
<style type=”text/css”>
seletor {propriedade:valor;}
</style>
EM LINHA (INLINE)
<h1 style=”font-size:20px; color:#FFF; border:solid 1px ”>Construsite Brasil</h1>
PADRÃO CONSTRUSITE
NUNCA
NUNCA É DE MAIS PRA NÓS DESENVOLVEDORES! TODA REGRA TEM SUA EXCEÇÃO!

7. Construsite Brasil
Criação de sites
| HOME | QUEM SOMOS | SERVIÇOS | CONTATO HOME | QUEM SOMOS | SERVIÇOS | CONTATO
PSEUDOCLASSES:
PROBLEMA:
Você deseja criar um menu com borda de
separação somente entre os elementos.
Você define a propriedade border-left na lista:
li { border-left:solid 1px #333; } li:first-child { border-left:none; }
SOLUÇÃO:
Você define a poseudoclasse :first-child no seletor li.
Você define a propriedade border-left com o valor none.
A PSEUDOCLASSE :LAST-CHILD FOI IMPLEMENTADA EM CSS3
*ver as novas pseudoclasses no livro CSS Cookbook pg.: 76-77.

8. Construsite Brasil
Criação de sites
PSEUDOELEMENTOS:
::FIRST-LETTER
::FIRST-LINE
::BEFORE
::AFTER

9. Construsite Brasil
Criação de sites
REDUZIR E REAPROVEITAR

10. Construsite Brasil
Criação de sites
backgrond: url(img.jpg) top center no-repeat #333;
backgrond-repeat: no-repeat;
backgrond-color: #333;
backgrond-position: top center;
EXEMPLO DE PROPRIEDADE ABREVIADA:
backgrond-image: url(img.jpg);

11. Construsite Brasil
Criação de sites
CSS RETROATIVO

12. Construsite Brasil
Criação de sites
EXEMPLO DE PROPRIEDADE ABREVIADA:
PROPRIEDADE ABREVIADA TEM MAIS RELEVÂNCIA.
QUANDO NÃO UTILIZAR?
TEMOS UM BOTÃO COM UM ÍCONE, COMO NO EXEMPLO
ABAIXO, PORÉM EXISTE UMA VARIAÇÃO DE COR.
PODEMOS REAPROVEITAR O MESMO ÍCONE MUDANDO
APENAS O BACKGROUND-COLOR.
botão
botão
<a href=”#” class=”bt green”>botão</a>
<a href=”#” class=”bt red”>botão</a>
.bt {
background-image:url(img.jpg);
background-position: top left;
background-repeat:
padding:10px 10px 10px 30px;
}
.green {
background-color: green;
}
.red {
background-color: red;
}

13. Construsite Brasil
Criação de sites
EVITEM UTILIZAR HERANÇA
.content h2 {}
.title {}
<div class=”content”>
<h2 class=”title”>Lorem ipsum</h2>
<p>Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Donec interdum
bibendum porta. Nulla congue cursus dolor
at facilisis. Nunc nisl lorem, gravida
at fringilla sed, mattis id ligula. Cras
eget nunc velit, in luctus ligula. Vivamus
fringilla dapibus gravida. Nulla vel lacus
sit amet tellus condimentum interdum a
vitae quam. Morbi sit amet urna est, at
ullamcorper ligula.</p>
</div>
REUTILIZAÇÃO DO CÓDIGO
ATRAVÉS DA CLASSE
DIFÍCIL REUTILIZAÇÃO DO
CÓDIGO

14. Construsite Brasil
Criação de sites
Evite utilizar IDs para estilização
#submit {}
.bt {}
enviar enviar
SE EXISTIR MAIS DE UM BOTÃO COM ESTILOS IGUAIS
O ID NÃO PODERÁ SER REUTILIZADO.
Utilize classes ao invés de criar seletores semelhantes, diminui o
tamanho e ajuda o estilo a ser reaproveitado.
ID NÃO PODE SER UTILIZADO MAIS DE UMA VEZ NUMA MESMA PÁGINA!

15. Construsite Brasil
Criação de sites
REUTILIZE SEUS CÓDIGOS!
utilize classes
botão
botão
botão
<a href=”#” class=”bt”>botão</a>
<a href=”#” class=”bt yellow”>botão</a>
<a href=”#” class=”bt red”>botão</a>
Sempre relacionem imagem,
estrutura e estilo ao nomear.
<style type=”text/css”>
.bt {padding:20px, backgroud:#FFF; color: blue;}
.yellow { background: yellow;}
.red { background: red;}
.btBorder { border:solid 4px #333;}
</style>
botão <a href=”#” class=”bt red btBorder”>botão</a>
“Uma boa nomeclatura vale ouro”.
BERNARD DE LUNA

16. Construsite Brasil
Criação de sites
VANTAGENS DA UTILIZAÇÃO DE SPRITES
RETROATIVIDADE
APENAS UMA REQUISIÇÃO AO SERVIDOR
CENTRALIZAÇÃO DAS IMAGENS
MELHOR MANIPULAÇÃO, AUMENTANDO A PRODUTIVIDADE

17. Construsite Brasil
Criação de sites
UTILIZAÇÃO DE ELEMENTOS VISUAIS EM CSS
HTML
CSS
estruturar
estilizar
comportar a informação escrita
(hipertextualidade)
comportar a informação visual
(criar interação visual)

18. Construsite Brasil
Criação de sites
UTILIZAÇÃO DE ELEMENTOS VISUAIS EM CSS
IMAGENS
DE ÍCONES, BOTÕES, MARCADORES, SETAS, ETC.
SÃO INFORMAÇÕES VISUAIS

19. Construsite Brasil
Criação de sites
UTILIZAÇÃO DE ELEMENTOS VISUAIS EM CSS
- DEVEMOS CRIAR PÁGINAS QUE SOBRE TUDO CARREGUEM INFORMAÇÃO.
- DEVEMOS CRIAR ELEMENTOS QUE MANTENHAM A RESPONSABILIDADE COM A
ACESSIBILIDADE, NAVEGABILIDADE E VISIBILIDADE AOS MECANISMOS DE BUSCA ORGÂNICA.

20. Construsite Brasil
Criação de sites
UTILIZAÇÃO DE ELEMENTOS VISUAIS EM CSS
EXEMPLO SIMPLES:
<input type=”submit” value=”enviar”>
Enviar
Botão normal
Como foi projetado
pelo designer

21. Construsite Brasil
Criação de sites
<input type=”submit” value=”enviar”>
É INTERESSANTE REMOVER OU DEFINIR O VALUE COMO NULO?
UTILIZAÇÃO DE ELEMENTOS VISUAIS EM CSS

22. Construsite Brasil
Criação de sites
SE NÃO DEFINIRMOS VALUE COMO NULO:
En-
UTILIZAÇÃO DE ELEMENTOS VISUAIS EM CSS

23. Construsite Brasil
Criação de sites
<input type=”submit” value=”enviar”>
UTILIZAÇÃO DE ELEMENTOS VISUAIS EM CSS
MANTENDO A ESTRUTURA BÁSICA:
- O GOOGLE AGRADECE
- OS LEITORES DE TELA AGRADECEM
- A ACESSIBILIDADE AGRADECE

24. Construsite Brasil
Criação de sites
<input type=”submit” value=”enviar”>
UTILIZAÇÃO DE ELEMENTOS VISUAIS EM CSS
<style type=”text/css”>
input[type=”submit”] {
width:50px;
height:50px;
background: url(bt.jpg) top center;
text-indent:9999px;
overflow:hidden;
}
</style>
Ocultar elementos que transbordam
Recuo de texto
OBS.: PODEMOS UTILIZAR A MESMA TÉCNICA EM QUAISQUER OUTROS ELEMENTOS, COMO CONTROLES DE SLIDE,
PAGERS, SETAS. ASSIM MANTEMOS A INFORMAÇÃO ESCRITA E A VISUAL.

25. Construsite Brasil
Criação de sites
<input type=”submit” value=”enviar”>
UTILIZAÇÃO DE ELEMENTOS VISUAIS EM CSS
Como foi projetado
pelo designer

26. Construsite Brasil
Criação de sites
PADRONIZAÇÃO DE ESCRITA E
RELAÇÃO ENTRE NOMENCLATURAS
elementoSecao
Exemplos:
#slideshow
.slideImages
.slideNav
.slidePrev
.slideNext
.slidePager
. . .

27. Construsite Brasil
Criação de sites
Sempre relacionem imagem, estrutura e estilo ao nomear.
.slideNav slideNav.jpg
.slidePager slidePager.jpg . .

28. Construsite Brasil
Criação de sites
PADRONIZAÇÃO DE ESCRITA E
RELAÇÃO ENTRE NOMENCLATURAS
seletor {
[fonte e propriedades de texto]
[plano de fundo]
[tamanho]
[bordas]
[espaçamentos]
[posicionamento]
}

29. Construsite Brasil
Criação de sites
CSS VALIDO É SEMPRE IMPORTANTE
CSS Validation Service
W3C
http://jigsaw.w3.org/css-validator/

30. Construsite Brasil
Criação de sites

31. Construsite Brasil
Criação de sites
UM NOVO CONCEITO COM NOVOS RECURSOS

32. Construsite Brasil
Criação de sites
OLD RADIO
Pure CSS3
20 Things I Learned About Browsers and the Web
OUR SOLAR SYSTEM
CAN HAZ UR CURSOR?
EXEMPLOS:

33. Construsite Brasil
Criação de sites
border-radius
transition
transform
background
text-shadow / box-shadow
RGBA
content
NOVOS PARÂMETROS QUE VAMOS
UTILIZAR COM MAIS FREQUÊNCIA:
background-color:
rgba(0,181,173,0.74);
alpha
HEX: #FFFFFF
RGB: 255,255,255
ur(img01.jpg), url(img02.jpg)ur(img03.jpg), url(img04);

34. Construsite Brasil
Criação de sites
30minutos
PORQUE UTILIZAR UM FRAMEWORK COMO O LESS?
5minutos
sem framework com framework
83%
+
produtividade
=

35. Construsite Brasil
Criação de sites
Créditos
Construsite Brasil
Criação de sites
www.construsitebrasil.com
Marcos César
Desenvolvedor front-end e Designer
Material elaborado por:

36. Construsite Brasil
Criação de sites
Referêcias
6 estratégias para melhorar a organização do seu CSS/ Algumas estratégias simples podem ser utilizadas para deixar o seu CSS mais organizado, consistente e de fácil
manutenção. Tabeless. [acesso em 26 de novembro de 2012]. Disponível em: http://tableless.com.br/6-estrategias-para-melhorar-a-organizacao-do-seu-css-2/
Christopher Schmitt. Livro: CSS Cookbook/Soluções rápidas para problemas comuns com CSS. Novatec Editora Ltda. 2010.
Eric A. Meyer, CSS: The Definitive Guide. O’Reilly Media; Third Edition edition (November 14, 2006).
Diego Eis Elcio Ferreira. Livro: HTML5 e CSS3 com farinha e pimenta.
W3C, CSS Validation Service. Disponível em: http://jigsaw.w3.org/css-validator/acess
Bernard De Luna - Sexy web projects specialist | Web design speaker and teacher. Disponível em: http://bernarddeluna.com/
Zeno Rocha | HTML5, CSS3 e JavaScript. Disponível em: http://zenorocha.com/
CSS3 Generator. Disponível em: http://css3generator.com/