planejamento de
corte:
o seu layout virando
código




victor montalvão
bernard de luna
designer consciente
     pensa no
  desenvolvedor
muitos designers costumam
pensar que o trabalho deles se
resume ao layout e esquecem
que o projeto tem que
“funcionar”

e ...
nossos amigos
desenvolvedores
“eles que se virem, é o trabalho
deles”
que designer web nunca falou isso? E que
desenvolvedor nunca odiou um designer por...
a ideia é:
TRABALHARMOS JUNTOS
então vamos facilitar o
trabalho deles, organizando o
nosso
baseado no layout a seguir, enumerei 4 boas
práticas para seguirmos
0
organize tudo em pastas.
1
renomeie camadas. crie este
hábito!
organize sempre seu arquivo fonte de forma
coerente e int...
utilize pastas para dividir conteúdos e
renomeie todas as camadas utilizando termos
globais e de fácil entendimento
0
2
defina padrões
padronize! seja coerente na escolha do(s)
tipos, quantidade de cores, aposte em uma
boa hierarquização d...
exemplos:


               menu:




   destaques
0
3
fechando o arquivo fonte
nessa etapa vamos preparar um arquivo
simplificado do layout final. ou seja, vamos
eliminar ou ...
0
4
manual
deve conter todas as informações necessárias
para o desenvolvedor cumprir o que está no
layout. tipografia, corp...
No próprio arquivo fonte
em um arquivo PDF de forma que o desenvolvedor possa
simplesmente copiar os atributos e colar no css, tais como
hexadecima...
planejamento de corte
analisando o GRID e o layout a
fim de identificar a estrutura e
o tipo de codificação que será
feito (macro)
reconhecimento da semântica
e identificação de tags no
layout (micro)
organização de pastas
organização de pastas
conceito de análise
de viabilidade
crítica ao GRID 960




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




          criação de uma   manutenção de uma
           estrutura 960     estrutura 960
produção
produção


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


       utilizando zen
      coding
           http://vimeo.com/
           7405114
           http://zen-
     ...
regras e sugestões
regras e sugestões

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


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


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



sempre feche as tags
regras e sugestões

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

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

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

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



ie6?
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ê é
regras e sugestões


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


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


Estude e valide a acessibilidade
do seu projeto perante o WCAG
http://www.acessibilidade.gov.pt/valid...
regras e sugestões
valide seu código quanto a
forma que o conteúdo está
sendo entregue para: Pessoas
sem deficiência, pesso...
CSS
CSS
dicas e truques
menu horizontal
centralizando o seu site
CSS Reset
                     Ateneu Popular CSS Reset
                     Chris Poteet’s Reset CSS
                    ...
box model
                    borde
                    r
            paddi
            ng



            conte
          ...
bug ie
Problemas de altura em
botões:
Coloque sempre altura na
tag pai, seja auto ou
100%.

Problemas de margem
duplicada:...
bug ff
bug no ff e fim da div,br,hr “clear”
profissionais fazem
layouts profissionais
profissionais fazem
códigos profissionais
obrigado ;)
www.victormontalvao.com |
www.bernarddeluna.com @bernarddeluna
  @victormontalvao




             www.faculda...
Oficina de Planejamento Corte: Seu layout virando código  - 15 EDTED
Oficina de Planejamento Corte: Seu layout virando código  - 15 EDTED
Oficina de Planejamento Corte: Seu layout virando código  - 15 EDTED
Oficina de Planejamento Corte: Seu layout virando código  - 15 EDTED
Oficina de Planejamento Corte: Seu layout virando código  - 15 EDTED
Oficina de Planejamento Corte: Seu layout virando código  - 15 EDTED
Oficina de Planejamento Corte: Seu layout virando código  - 15 EDTED
Oficina de Planejamento Corte: Seu layout virando código  - 15 EDTED
Oficina de Planejamento Corte: Seu layout virando código  - 15 EDTED
Oficina de Planejamento Corte: Seu layout virando código  - 15 EDTED
Oficina de Planejamento Corte: Seu layout virando código  - 15 EDTED
Oficina de Planejamento Corte: Seu layout virando código  - 15 EDTED
Oficina de Planejamento Corte: Seu layout virando código  - 15 EDTED
Oficina de Planejamento Corte: Seu layout virando código  - 15 EDTED
Oficina de Planejamento Corte: Seu layout virando código  - 15 EDTED
Oficina de Planejamento Corte: Seu layout virando código  - 15 EDTED
Oficina de Planejamento Corte: Seu layout virando código  - 15 EDTED
Oficina de Planejamento Corte: Seu layout virando código  - 15 EDTED
Oficina de Planejamento Corte: Seu layout virando código  - 15 EDTED
Oficina de Planejamento Corte: Seu layout virando código  - 15 EDTED
Oficina de Planejamento Corte: Seu layout virando código  - 15 EDTED
Oficina de Planejamento Corte: Seu layout virando código  - 15 EDTED
Oficina de Planejamento Corte: Seu layout virando código  - 15 EDTED
Oficina de Planejamento Corte: Seu layout virando código  - 15 EDTED
Oficina de Planejamento Corte: Seu layout virando código  - 15 EDTED
Oficina de Planejamento Corte: Seu layout virando código  - 15 EDTED
Upcoming SlideShare
Loading in …5
×

Oficina de Planejamento Corte: Seu layout virando código - 15 EDTED

24,150
-1

Published on

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

Published in: Design, Technology
16 Comments
77 Likes
Statistics
Notes
No Downloads
Views
Total Views
24,150
On Slideshare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
774
Comments
16
Likes
77
Embeds 0
No embeds

No notes for slide









































































  • Oficina de Planejamento Corte: Seu layout virando código - 15 EDTED

    1. 1. planejamento de corte: o seu layout virando código victor montalvão bernard de luna
    2. 2. designer consciente pensa no desenvolvedor
    3. 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. 4. nossos amigos desenvolvedores
    5. 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. 6. a ideia é: TRABALHARMOS JUNTOS
    7. 7. então vamos facilitar o trabalho deles, organizando o nosso
    8. 8. baseado no layout a seguir, enumerei 4 boas práticas para seguirmos
    9. 9. 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ê.
    10. 10. utilize pastas para dividir conteúdos e renomeie todas as camadas utilizando termos globais e de fácil entendimento
    11. 11. 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.
    12. 12. exemplos: menu: destaques
    13. 13. 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.
    14. 14. 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.
    15. 15. No próprio arquivo fonte
    16. 16. 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.
    17. 17. planejamento de corte
    18. 18. analisando o GRID e o layout a fim de identificar a estrutura e o tipo de codificação que será feito (macro)
    19. 19. reconhecimento da semântica e identificação de tags no layout (micro)
    20. 20. organização de pastas
    21. 21. organização de pastas
    22. 22. conceito de análise de viabilidade
    23. 23. crítica ao GRID 960 criação de uma estrutura 960
    24. 24. crítica ao GRID 960 criação de uma manutenção de uma estrutura 960 estrutura 960
    25. 25. produção
    26. 26. produção por que não vamos direto ao ponto?
    27. 27. produção utilizando zen coding http://vimeo.com/ 7405114 http://zen- coding.ru/demo
    28. 28. regras e sugestões
    29. 29. regras e sugestões o head é um espaço para vínculos do arquivo, inclusive o CSS e JS
    30. 30. regras e sugestões não faça uso de CSS ou JS inline
    31. 31. regras e sugestões as tags são educadas, então NÃO GRITEM!
    32. 32. regras e sugestões sempre feche as tags
    33. 33. regras e sugestões seja necessário pela sua qualidade e não pelo seu egoísmo, comente o código
    34. 34. regras e sugestões experimente utilizar <hr /> para separar estruturas de contextos diferentes
    35. 35. regras e sugestões nunca use imagem ou flash como logotipo no HTML, aplique uma técnica de Image Replacement
    36. 36. regras e sugestões não tenha medo de aprender e usar o DOCTYPE, ele é o seu cão guia!
    37. 37. regras e sugestões ie6?
    38. 38. 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ê é
    39. 39. regras e sugestões nunca coloque uma tag BLOCK dentro de uma tag INLINE
    40. 40. regras e sugestões valide seu código no W3C Validator
    41. 41. regras e sugestões Estude e valide a acessibilidade do seu projeto perante o WCAG http://www.acessibilidade.gov.pt/validador.html
    42. 42. 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
    43. 43. CSS
    44. 44. CSS
    45. 45. dicas e truques
    46. 46. menu horizontal
    47. 47. centralizando o seu site
    48. 48. 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/
    49. 49. box model borde r paddi ng conte nt margi n
    50. 50. 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.
    51. 51. bug ff bug no ff e fim da div,br,hr “clear”
    52. 52. profissionais fazem layouts profissionais
    53. 53. profissionais fazem códigos profissionais
    54. 54. obrigado ;) www.victormontalvao.com | www.bernarddeluna.com @bernarddeluna @victormontalvao www.faculdadeccaa.edu.br

    ×