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

1. planejamento de
corte:
o seu layout virando
código
victor montalvão
bernard de luna

2. designer consciente
pensa no
desenvolvedor

3. muitos designers costumam
pensar que o trabalho deles se
resume ao layout e esquecem
que o projeto tem que
“funcionar”
e quem dá vida ao projeto?

4. nossos amigos
desenvolvedores

5. “eles que se virem, é o trabalho
deles”
que designer web nunca falou isso? E que
desenvolvedor nunca odiou um designer por
esse tipo de comentário?

6. a ideia é:
TRABALHARMOS JUNTOS

7. então vamos facilitar o
trabalho deles, organizando o
nosso

8. baseado no layout a seguir, enumerei 4 boas
práticas para seguirmos

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

15. utilize pastas para dividir conteúdos e
renomeie todas as camadas utilizando termos
globais e de fácil entendimento

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.

22. exemplos:
menu:
destaques

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.

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.

32. No próprio arquivo fonte

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.

34. planejamento de corte

35. analisando o GRID e o layout a
fim de identificar a estrutura e
o tipo de codificação que será
feito (macro)

42. reconhecimento da semântica
e identificação de tags no
layout (micro)

45. organização de pastas

46. organização de pastas

47. conceito de análise
de viabilidade

49. crítica ao GRID 960
criação de uma
estrutura 960

50. crítica ao GRID 960
criação de uma manutenção de uma
estrutura 960 estrutura 960

51. produção

52. produção
por que não vamos
direto ao ponto?

53. produção
utilizando zen
coding
http://vimeo.com/
7405114
http://zen-
coding.ru/demo

54. regras e sugestões

55. regras e sugestões
o head é um espaço para
vínculos do arquivo, inclusive o
CSS e JS

56. regras e sugestões
não faça uso de CSS ou JS
inline

57. regras e sugestões
as tags são educadas, então
NÃO GRITEM!

58. regras e sugestões
sempre feche as tags

59. regras e sugestões
seja necessário pela sua
qualidade e não pelo seu
egoísmo, comente o código

60. regras e sugestões
experimente utilizar <hr />
para separar estruturas de
contextos diferentes

61. regras e sugestões
nunca use imagem ou flash
como logotipo no HTML,
aplique uma técnica de Image
Replacement

62. regras e sugestões
não tenha medo de aprender e
usar o DOCTYPE, ele é o seu
cão guia!

63. regras e sugestões
ie6?

64. regras e sugestões
me diga se você coloca alt em
imagens e title em links e eu te
direi que tipo de web designer
você é

65. regras e sugestões
nunca coloque uma tag BLOCK
dentro de uma tag INLINE

66. regras e sugestões
valide seu código no W3C
Validator

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

69. CSS

70. CSS

71. dicas e truques

72. menu horizontal

73. centralizando o seu site

74. CSS Reset
Ateneu Popular CSS Reset
Chris Poteet’s Reset CSS
Yahoo’s CSS Reset
Eric Meyer Reset CSS
Tantek Celik Reset CSS
Christian Montoya Reset CSS
Rudeworks Reset CSS
Anieto2K Reset CSS
CSSLab CSS Reset
http://www.pinceladasdaweb.com.br/blog/2008/11/10/10-tecnicas-para-reset-css/

75. box model
borde
r
paddi
ng
conte
nt
margi
n

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.

77. bug ff
bug no ff e fim da div,br,hr “clear”

78. profissionais fazem
layouts profissionais

79. profissionais fazem
códigos profissionais

80. obrigado ;)
www.victormontalvao.com |
www.bernarddeluna.com @bernarddeluna
@victormontalvao
www.faculdadeccaa.edu.br