Webdesign - Elementos de um página web

10,221 views
10,009 views

Published on

Definições e composição de um site.

Published in: Technology
1 Comment
6 Likes
Statistics
Notes
No Downloads
Views
Total views
10,221
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
404
Comments
1
Likes
6
Embeds 0
No embeds

No notes for slide

Webdesign - Elementos de um página web

  1. 1. Elementos de um página web Definições e composição de um site
  2. 2. O que é um site ? <ul><li>Conjunto de hipertextos acessíveis pela internet (protocolo HTTP) dedicado a um tópico ou propósito em particular; </li></ul><ul><li>Escritos ou dinamicamente convertidos para HTML e acessados usando um software cliente chamado web browser ou navegador; </li></ul><ul><li>Uma interface gráfica composta por metáforas que possibilitam o usuário interagir com as informações; </li></ul><ul><li>São restritos por limites de recursos. </li></ul>
  3. 3. A origem <ul><li>Desenvolvida por americanos na década de 50 para o sistema militar ARPANET para troca disponibilização de informação; </li></ul><ul><li>O projeto no CERN (1990), desenvolvido por Tim Berners-Lee, desenvolveu um sistema padrão, criando URL, o protocolo HTTP e a linguagem HTML. Esse sistema serviu como modelo para o World Wide Web; </li></ul><ul><li>Se apropria do conceito de hipertexto (recurso de suporte complementam a informação e um texto). </li></ul>
  4. 4. Estruturação <ul><li>Os conceitos de estruturação da informação tem origem da mídia impressa para o segmento informativo (livros, revistas e jornais); </li></ul><ul><li>Um site deve ser estruturado por segmentação de informação; </li></ul><ul><li>Deve se apropriar de conceitos de comunicação específicos para transmitir uma mensagem de forma adequada para seu público alvo. </li></ul>
  5. 5. Linguagem emocional <ul><li>Identificar o grupo emocional associado a categoria do site; </li></ul><ul><li>Imagem arquetípica; </li></ul><ul><li>Definição do estilo e espírito; </li></ul><ul><li>Relação entre a forma e pensamento; </li></ul><ul><li>Relação entre o criador e consumidor. </li></ul>
  6. 6. Linguagem racional <ul><li>Identificação da necessidade; </li></ul><ul><li>Identificação ou geração de desejo do consumidor; </li></ul><ul><li>Definição do conceito competitivo. </li></ul>
  7. 7. Capa <ul><li>Tem a função de apresentar o estilo (tema) do site para seu pública alvo; </li></ul><ul><li>Busca o decorativo e não um desenvolvimento tipológico com finalidades de legibilidade; </li></ul><ul><li>Utilização para públicos específicos, basicamente que apresentam tendências visuais; </li></ul><ul><li>Pode: </li></ul><ul><ul><li>Ser ilustrativa; </li></ul></ul><ul><ul><li>Ser informativa; </li></ul></ul><ul><ul><li>Indicar restrições; </li></ul></ul><ul><ul><li>Limitar o acesso. </li></ul></ul>
  8. 8. Página principal <ul><li>É a página onde o usuário será ambientado, se familiarizando com o ambiente e conduzido a informação que procura; </li></ul><ul><li>Deve fornecer condições de navegação ao usuário, tanto para acessar os serviços quanto para entrar em contato; </li></ul><ul><li>TEM QUE SER direto, apresentando apenas o necessário para atingir sua meta. </li></ul>
  9. 9. Cabeçalho <ul><li>Permite dar mais visibilidade a identidade visual da empresa ou do próprio site; </li></ul><ul><li>Reforça a ação de ênfase, continuidade e unidade; </li></ul><ul><li>Características comuns: </li></ul><ul><ul><li>Assinatura; </li></ul></ul><ul><ul><li>Navegação; </li></ul></ul><ul><ul><li>Links administrativos; </li></ul></ul><ul><ul><li>Títulos e temas. </li></ul></ul>
  10. 10. Rodapé <ul><li>Além de reforçar a visibilidade da identidade visual, possibilita criar um vínculo com a origem da empresa ou do próprio site; </li></ul><ul><li>Características comuns: </li></ul><ul><ul><li>Assinatura; </li></ul></ul><ul><ul><li>Dados da empresa; </li></ul></ul><ul><ul><li>Complementos informação e acessibilidade. </li></ul></ul>
  11. 11. Navegação <ul><li>Deve ser segmentada por assunto ou tipo de informação, podendo apresentar vários níveis; </li></ul><ul><li>Pode ser linear ou não; </li></ul><ul><li>TEM QUE TER condições para o usuário retornar para a seção anterior ou para a página principal; </li></ul><ul><li>O menu não deve ser uma representação da estrutura hierárquica da empresa. </li></ul>
  12. 12. Links administrativos <ul><li>Criam um canal de comunicação entre o usuário e o site; </li></ul><ul><li>Informações comuns: </li></ul><ul><ul><li>Sobre o site (ou a empresa); </li></ul></ul><ul><ul><li>Acesso restrito; </li></ul></ul><ul><ul><li>Contato; </li></ul></ul><ul><ul><li>Atendimento (dúvidas); </li></ul></ul><ul><ul><li>Endereço físico; </li></ul></ul><ul><ul><li>Mapa do site; </li></ul></ul><ul><ul><li>Parceiros; </li></ul></ul><ul><ul><li>Credenciais. </li></ul></ul>
  13. 13. Conteúdo <ul><li>Material que será exibido ao público pelo site; </li></ul><ul><li>Deve ser segmentado de acordo com o tipo da natureza da informação, sendo apresentado de forma específica; </li></ul><ul><li>TEM QUE SER direto, lógico e intuitivo. </li></ul><ul><li>Organize a arquitetura das informações: </li></ul><ul><ul><li>Divida o conteúdo em unidades lógicas; </li></ul></ul><ul><ul><li>Relacione uma hierarquia de importância; </li></ul></ul><ul><ul><li>Verifique o padrão funcional e estético do site. </li></ul></ul>
  14. 14. Documentos eletrônicos <ul><li>Toda informação disponível na internet é um documento pontual e, perante a lei, pode ser utilizado como evidência; </li></ul><ul><li>Para garantir a veracidade do conteúdo, devem ser fornecidas as seguintes informações: </li></ul><ul><ul><li>Endereço do site; </li></ul></ul><ul><ul><li>Origem da informação (menu de navegação); </li></ul></ul><ul><ul><li>Autor da informação; </li></ul></ul><ul><ul><li>Data da publicação; </li></ul></ul><ul><ul><li>Condições para emitir uma versão impressa; </li></ul></ul><ul><ul><li>Condições para retornar a seção principal. </li></ul></ul>
  15. 15. Atualizações <ul><li>Permite que o usuário saiba se há novas informações no site; </li></ul><ul><li>Pode ser apresentado como: </li></ul><ul><ul><li>Lista; </li></ul></ul><ul><ul><li>Blog; </li></ul></ul><ul><ul><li>Notas ( newletter ); </li></ul></ul><ul><ul><li>Feedback (RSS). </li></ul></ul>
  16. 16. Mapa do site <ul><li>Permite que o usuário tenha uma visão geral do conteúdo disponibilizado; </li></ul><ul><li>Deve facilitar a localização de uma informação, agrupando o conteúdo por temas; </li></ul><ul><li>Pode assumir a forma de um índice, sumário ou mapa mental. </li></ul>
  17. 17. Erro 404 – Arquivo não encontrado <ul><li>São páginas retornadas do servidor indicando que não localizou o arquivo na URL indicada; </li></ul><ul><li>Um bom projeto deve prever essa situação, preparando canais para redirecionamento; </li></ul><ul><li>Podem conter: </li></ul><ul><ul><li>Explicações sobre o erro; </li></ul></ul><ul><ul><li>Sugestão para alternativas; </li></ul></ul><ul><ul><li>Acesso para outras páginas sobre o mesmo assunto; </li></ul></ul><ul><ul><li>Recurso de busca por palavra-chave; </li></ul></ul><ul><ul><li>Canal de contato; </li></ul></ul><ul><ul><li>Canal para retornar ao menu principal. </li></ul></ul>
  18. 18. Elementos de um página web Definições e composição de um site

×