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

24,630 views
24,654 views

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,630
On SlideShare
0
From Embeds
0
Number of Embeds
12
Actions
Shares
0
Downloads
776
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

    ×