Construcao de Sites

7,872
-1

Published on

Dicas de construção de websites

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
7,872
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
296
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Construcao de Sites

  1. 1. Construção de Sites UNIPAC – LFDW1 Leandro Neumann
  2. 2. Construção de sites Orientações sobre o trabalho
  3. 3. Construção de sites Passos <ul><li>A idéia Definição do tema </li></ul><ul><li>Projeto do conteúdo Organize seu conteúdo, separe-o em tópicos </li></ul><ul><li>Projeto de Navegação Menu fixo e todas as páginas com link para todas </li></ul><ul><li>Projeto Gráfico Cores, figuras, layout </li></ul><ul><li>Programação HTML? Javascript? PHP? Tabelas? Frames? </li></ul>
  4. 4. Construção de sites Passos Pousada da mãe Joana index.htm Acomodações quartos.htm Como chegar mapa.htm Preços precos.htm Reservas reservas.htm
  5. 5. Construção de sites Passos Home index.htm Acomodações quartos.htm Como chegar mapa.htm Preços precos.htm Reservas reservas.htm
  6. 6. Construção de sites Passos <ul><li>Busca de imagens </li></ul>
  7. 7. Construção de sites Dicas
  8. 8. Construção de sites Dicas de preparação do conteúdo <ul><li>Qual é o objetivo do site? </li></ul><ul><li>Que tipo de visitante deseja atrair para o site? </li></ul><ul><li>Por que as pessoas devem visitar o seu site? </li></ul>
  9. 9. Construção de sites Dicas de Navegação <ul><li>Faça um projeto com todas as seções e sub-seções que pretende criar. </li></ul>Culinária Dicas de Culinária Festivais Gastronômicos Receitas Aves Massas Sobremesas
  10. 10. Construção de sites Dicas de Navegação <ul><li>Faça um projeto com todas as seções e sub-seções que pretende criar. </li></ul>Culinária Dicas de Culinária Festivais Gastronômicos Receitas Aves Massas Sobremesas Nível 0 (home) Nível 1 Nível 2
  11. 11. Construção de sites Dicas de Navegação <ul><li>Crie um projeto de navegação. </li></ul><ul><li>Máximo de 3 cliques para alcançar uma página </li></ul>
  12. 12. Construção de sites Dicas de Navegação <ul><li>Crie um projeto de navegação. </li></ul><ul><li>Máximo de 3 cliques para alcançar uma página </li></ul>
  13. 13. Construção de sites Dicas de Navegação <ul><li>Crie um projeto de navegação. </li></ul><ul><li>Máximo de 3 cliques para alcançar uma página </li></ul>1 clique
  14. 14. Construção de sites Dicas de Navegação <ul><li>Mantenha o usuário informado sobre em que página ele está </li></ul>
  15. 15. Construção de sites Dicas de Navegação <ul><li>Mantenha o usuário informado sobre em que página ele está </li></ul>
  16. 16. Construção de sites Dicas de Navegação <ul><li>Mantenha o usuário informado sobre em que página ele está </li></ul>
  17. 17. Construção de sites Dicas de Navegação <ul><li>Utilize elementos já conhecidos (compatibilidade com o mundo real) </li></ul>
  18. 18. Construção de sites Dicas de Navegação <ul><li>Imagine-se no lugar do usuário </li></ul><ul><li>Organize a navegação por ordem de importância </li></ul>UAI x UOL
  19. 19. Construção de sites Dicas de Navegação <ul><li>Não faça do menu a única forma de navegar pelo site </li></ul>“ chamadas” na capa
  20. 20. Construção de sites Dicas de Navegação <ul><li>Não faça do menu a única forma de navegar pelo site </li></ul>“ chamadas” na capa
  21. 21. Construção de sites Dicas de Navegação <ul><li>Não faça do menu a única forma de navegar pelo site </li></ul>Links contextuais
  22. 22. Construção de sites Dicas de Navegação <ul><li>Cuidado para não confundir o usuário (Estética e design minimalista) </li></ul>
  23. 23. Construção de sites Dicas de Navegação <ul><li>Não frustre seus visitantes </li></ul>
  24. 24. Construção de sites <ul><li>Crie uma identidade visual (consistência e padrões) </li></ul><ul><li>Tipologia </li></ul><ul><li>Posicionamento do menu </li></ul><ul><li>Cores </li></ul><ul><li>Disposição do texto </li></ul><ul><li>Design dos botões, tabelas, linha, imagens... </li></ul>Dicas de Layout e Padronização
  25. 25. Construção de sites <ul><li>Crie uma identidade visual (consistência e padrões) </li></ul>Dicas de Layout e Padronização
  26. 26. Construção de sites <ul><li>Crie uma identidade visual (consistência e padrões) </li></ul>Dicas de Layout e Padronização
  27. 27. Construção de sites <ul><li>Deixe o conteúdo “respirar” Espaço em branco é fundamental </li></ul>Dicas de Layout e Padronização
  28. 28. Construção de sites <ul><li>Deixe o site harmonioso </li></ul><ul><li>Cuidado com o excesso de cores </li></ul><ul><li>Contraste forte para textos (texto preto / fundo branco) </li></ul>Dicas de Layout e Padronização http://www.hitmill.com/html/rgbcolorvalues.html
  29. 29. Construção de sites <ul><li>Adeqüe o site ao público alvo </li></ul>Dicas de Layout e Padronização
  30. 30. Construção de sites Dicas de Layout e Padronização
  31. 31. Construção de sites Dicas de Layout e Padronização
  32. 32. Construção de sites Dicas de Layout e Padronização
  33. 33. Construção de sites Dicas de Velocidade <ul><li>Utilize o formato adequado para cada imagem </li></ul>BitMap (BMP) 61,5KB
  34. 34. Construção de sites Dicas de Velocidade <ul><li>Utilize o formato adequado para cada imagem </li></ul>16KB 25% de compactação - 4,7KB Joint Photographic Expert Group (JPEG) Graphics Interchange Format (GIF)
  35. 35. Construção de sites Dicas de Velocidade <ul><li>Utilize o formato adequado para cada imagem </li></ul>Graphics Interchange Format (GIF) Joint Photographic Expert Group (JPEG) 3,4KB 25% de compactação - 8,9KB
  36. 36. Construção de sites Dicas de Velocidade <ul><li>Não coloque músicas ou sons automáticos no site </li></ul>
  37. 37. Construção de sites Dicas Gerais <ul><li>Não use páginas de entrada ou boas-vindas </li></ul>
  38. 38. Construção de sites Dicas Gerais <ul><li>Previna erros do usuário </li></ul>
  39. 39. Construção de sites Dicas Gerais <ul><li>Ajude o usuário a reconhecer e corrigir erros </li></ul>
  40. 40. Construção de sites Dicas Gerais <ul><li>Faça chamadas atrativas </li></ul>
  41. 41. Construção de sites Dicas Gerais <ul><li>Padronize o nome dos arquivos Utilize apenas letras minúsculas </li></ul><ul><li>Pense no usuário padrão: 800x600 pixels e conexão discada </li></ul><ul><li>Utilize novos recursos tecnológicos apenas quando necessário </li></ul><ul><li>Não use contadores de acesso </li></ul>
  42. 42. Construção de sites Dicas Gerais <ul><li>Informe o tamanho e o tipo dos arquivos disponíveis para download </li></ul><ul><li>Teste seu site em outros navegadores a plataformas </li></ul><ul><li>Mantenha o site atualizado </li></ul><ul><li>CLIQUE EM TUDO!! </li></ul>É mais difícil fazer um usuário retornar ao site do que atrai-lo para uma primeira visita
  43. 43. Construção de sites Hospedageme Registro
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×