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
Roneymar Alves, PSA at INFRAEROParabéns... Ótimo material, gostaria de saber se alguém poderia fazer o favor de abrir no keynote e exportar para '.ppt'???2 years ago
Are you sure you want to
Leonardo Branco, Analista de SEO at AG2 Publicis ModemOlá galera, gostei muito da apresentação ao ponto de lutar para passar para .pdf, se alguém necessitar de uma cópia pode pedir através do meu email ' leovbranco@gmail.com 'que eu mando em anexo. vlw Bernard De Luna #parabens2 years ago
Are you sure you want to
Bernard De Luna, Product Coordinator at Estante VirtualGustavo, infelizmente até o momento só possuimos a apresentaçao nesse formato, se tivermos tempo, tento achar um conversos para gerar um pdf pra ti e os demais ok? Desculpa por agora.3 years ago
Oficina de Planejamento Corte: Seu layout virando código - 15 EDTEDPresentation 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.
Arnaldo Neto
Ótimo material. Parabéns! Já repassei pra todos os designers e programadores que conheço. 3 years ago
Obrigado. 3 years ago