Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

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

27.129 visualizaciones

Publicado el

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

Publicado en: Diseño, Tecnología
  • DOWNLOAD THI5 BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Responder 
    ¿Estás seguro?    No
    Tu mensaje aparecerá aquí
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Responder 
    ¿Estás seguro?    No
    Tu mensaje aparecerá aquí
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Responder 
    ¿Estás seguro?    No
    Tu mensaje aparecerá aquí
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Responder 
    ¿Estás seguro?    No
    Tu mensaje aparecerá aquí
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Responder 
    ¿Estás seguro?    No
    Tu mensaje aparecerá aquí

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

×