Oficina de "Oficina de Planejamento Corte: Seu layout virando código" dada pelo Bernard De Luna e Victor Motalvão no 15 EDTED - Rio de Janeiro dia 20/03/2010
10. 0
organize tudo em pastas.
1
renomeie camadas. crie este
hábito!
organize sempre seu arquivo fonte de forma
coerente e intuitiva para que qualquer um
possa entendê-lo. até você.
11.
12.
13.
14.
15. utilize pastas para dividir conteúdos e
renomeie todas as camadas utilizando termos
globais e de fácil entendimento
16.
17.
18.
19.
20. 0
2
defina padrões
padronize! seja coerente na escolha do(s)
tipos, quantidade de cores, aposte em uma
boa hierarquização do conteúdo (o que será
<h2>, <h3>, <p>, etc), como serão os links e
seus estados (link, hover e active).
tenha um grid bem definido e estruturado.
espaçamentos padronizados, alinhamentos
coerentes. não alinhe nada no olho pois no
código o desenvolvedor não vai por fazer isso
também.
23. 0
3
fechando o arquivo fonte
nessa etapa vamos preparar um arquivo
simplificado do layout final. ou seja, vamos
eliminar ou achatar camadas.
depos com o manual em mãos, o desenvolvedor
precisará do arquivo fonte somente para medir
espaçamentos e tamanhos.
24.
25.
26.
27.
28.
29.
30.
31. 0
4
manual
deve conter todas as informações necessárias
para o desenvolvedor cumprir o que está no
layout. tipografia, corpo dos texto, cores, link
e seus estados, padrão do tamanho de
imagens, etc.
a forma que você irá fazê-lo é pessoal. eu por
exemplo, utilizo
duas formas.
33. em um arquivo PDF de forma que o desenvolvedor possa
simplesmente copiar os atributos e colar no css, tais como
hexadecimais, corpo de fonte e suas respectivas famílias, e por
que não até espaçamentos, larguras e altura. Vai de cada um.
67. regras e sugestões
Estude e valide a acessibilidade
do seu projeto perante o WCAG
http://www.acessibilidade.gov.pt/validador.html
68. regras e sugestões
valide seu código quanto a
forma que o conteúdo está
sendo entregue para: Pessoas
sem deficiência, pessoas com
deficiência, idosos, robôs,
celulares, e veja se ele continua
coerente e estratégico
76. bug ie
Problemas de altura em
botões:
Coloque sempre altura na
tag pai, seja auto ou
100%.
Problemas de margem
duplicada:
Coloque display inline
nos elementos que estão
com float.