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