Psd to html

508 visualizações

Publicada em

Um bate papo com designers, mostrando boas práticas para organização de seus arquivos PSD e conceitos básicos em HTML, CSS.

Publicada em: Design
0 comentários
1 gostou
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
508
No SlideShare
0
A partir de incorporações
0
Número de incorporações
3
Ações
Compartilhamentos
0
Downloads
16
Comentários
0
Gostaram
1
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Psd to html

  1. 1. VOCÊ NÃO ESTÁSOZINHO NO MUNDOSua tarefa é facilitar a vida das pessoas.
  2. 2. QUEM?Sua organização pode facilitar a vida do desenvolvedor.
  3. 3. PROJETO x EGONão pense somente em "pixels" ou "efeitos", pense nasfuncionalidades.
  4. 4. SEJA ORGANIZADOKeep calm and "organize suas layers"
  5. 5. RENOMEIE TODAS ASLAYERSCrie nomes significativos, referentes ao layout.
  6. 6. PASTAS = DIVSagrupe as layers seguindo o mesmo padrão de divs noHTML, separe as pastas por cores de acordo com assessões.
  7. 7. NÃO FAÇA ISSO!
  8. 8. FAÇA ISSO!
  9. 9. ÍCONES SÃO SERESSENSÍVEIS.ícones são separados por famílias e tamanhos, portantonão os redimensione.
  10. 10. www.iconfinder.com
  11. 11. MESCLE OSELEMENTOSEvite manipulação dos efeitos...
  12. 12. DOCUMENTE O LAYOUTCrie um manual para informar ao desenvolvedor ospadrões do layout, tipografias, corpo dos textos, cores,links e seus estados...
  13. 13. HTML, E AGORA?Linguagem de marcação, usa-se tags para darsignificado ao conteúdo. ex: <p>conteúdo comoparágrafo</p>
  14. 14. ESTRUTURA DE BASE<html><head> <title>Título da Página</title></head><body> Seu conteúdo aqui...</body></html>
  15. 15. EXEMPLOS TAGS<p>Parágrafo</p><h1>Título de maior importância</h1><div>Divisão no conteúdo</div><img>
  16. 16. WEB STANDARDSWeb Standards é um conjunto de normas, diretrizes,recomendações, notas, artigos, tutoriais e afins decaráter técnico, produzidos pela W3C.É destinado a orientar fabricantes, desenvolvedores eprojetistas para o uso de práticas que possibilitem acriação de uma Web acessível a todos.
  17. 17. DIVISÃO EM CAMADAS● HTML - Conteúdo● CSS - Formatação● JAVASCRIPT - Comportamento
  18. 18. JAVASCRIPTHTML CSS (SCREEN) CSS (PRINT) CSS (MOBILE)
  19. 19. CSS?Designer de web precisa saber CSS.
  20. 20. SINTAXE CSSseletor { propriedade:valor; }seletor - elemento html - identificadores (class, id)propriedade - o que será alteradovalor - valor de alteraçãobody{ background-color:#cccccc; font-family: Arial;}
  21. 21. EXEMPLOSwidth: 960px;height: 300px;background-color:#CCC;background-image: url(images/bg-body.png);background: #CCC url(images/bg-body.png);margin-left; 15px;margin:10px 5px 5px 10px;padding-top: 5px;padding: 5px 10px 10px 5px;float: left;clear:both;
  22. 22. EXEMPLOSposition: absolute;top:10px;left:20px;color: #CC9900;font-size: 12px;font-family: Verdana;font-weight: bold;line-height: 1.5em;
  23. 23. POR HOJE É SÓPESSOALPERGUNTAS?
  24. 24. THANKS!@abel_ribeirowww.ribeirart.com

×