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

on

  • 23,865 views

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

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

Statistics

Views

Total Views
23,865
Views on SlideShare
13,740
Embed Views
10,125

Actions

Likes
74
Downloads
729
Comments
15

31 Embeds 10,125

http://cristianoweb.net 6162
http://www.kadunew.com 1242
http://www.webdesignblog.com.br 1207
http://chiefofdesign.com.br 492
http://tudibao.com.br 433
http://bernarddeluna.com 276
http://www.slideshare.net 47
http://guilhermealves-portfolio.blogspot.com 46
http://multbit.kinghost.net 40
http://www.nfx.com.br 37
http://us-w1.rockmelt.com 35
http://feeds.feedburner.com 20
http://www.linkedin.com 16
http://guilhermealves-portfolio.blogspot.com.br 14
http://ofinaldetudo.blogspot.com 12
http://clientes.cristianoweb.net 12
http://www.blogger.com 8
http://ofinaldetudo.blogspot.com.br 5
http://cedefes.blogspot.com.br 3
http://webcache.googleusercontent.com 3
http://www.twylah.com 3
http://static.slidesharecdn.com 2
http://cedefes.blogspot.com 2
https://twimg0-a.akamaihd.net 1
http://www.taaza.com 1
http://www.google.com.br 1
http://www.uccvirtual.edu.co 1
http://www.webdesignblog.com.br. 1
url_unknown 1
http://server8.kproxy.com 1
http://mail.uol.com.br 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

110 of 15 Post a comment

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…

110 of 15

Post Comment
Edit your comment
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />

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

  • 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 quem dá vida ao projeto?
  • nossos amigos desenvolvedores
  • “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?
  • 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 intuitiva para que qualquer um possa entendê-lo. até você.
  • 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 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.
  • exemplos: menu: destaques
  • 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.
  • 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.
  • 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 hexadecimais, corpo de fonte e suas respectivas famílias, e por que não até espaçamentos, larguras e altura. Vai de cada um.
  • 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- coding.ru/demo
  • 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/validador.html
  • 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
  • CSS
  • CSS
  • dicas e truques
  • menu horizontal
  • centralizando o seu site
  • 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/
  • box model borde r paddi ng conte nt margi n
  • 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.
  • 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.faculdadeccaa.edu.br