Concepção, Planejamento e Arquitetura de Sites

Apresentação em tema: "Concepção, Planejamento e Arquitetura de Sites"— Transcrição da apresentação:

1 Concepção, Planejamento e Arquitetura de Sites
Centro de Estudos de Pessoal "Valorizando o Homem, serve ao Exército e ao Brasil"

2 Objetivo Conhecer os conceitos básicos de Web necessários para um profissional atualizado, abordando as principais tendência s www. Centro de Estudos de Pessoal "Valorizando o Homem, serve ao Exército e ao Brasil"

3 Noções básicas para criação na Web Cores Tipografia Imagens
Conteúdo Noções básicas para criação na Web Cores Tipografia Imagens Centro de Estudos de Pessoal "Valorizando o Homem, serve ao Exército e ao Brasil"

4 História da Internet Centro de Estudos de Pessoal
"Valorizando o Homem, serve ao Exército e ao Brasil"

5 A guerra dos browsers Centro de Estudos de Pessoal
"Valorizando o Homem, serve ao Exército e ao Brasil"

6 Um site de sucesso Centro de Estudos de Pessoal
"Valorizando o Homem, serve ao Exército e ao Brasil"

7 Um site de sucesso Um bom domínio Uma idéia inovadora
Conhecer a concorrência Conhecer o público-alvo Falar a linguagem do seu cliente Centro de Estudos de Pessoal "Valorizando o Homem, serve ao Exército e ao Brasil"

8 Site dinâmico X Site estático
Sites na Web necessitam ser atualizados constantemente com novas informações. Quando isso não acontece, o usuário não sente a necessidade de voltar ao site para obter mais informações, uma vez que são sempre as mesmas. Estático – Sempre atualizado por pessoas técnicas, que tenham o mínimo de conhecimento em HTML. Nunca pode ser delegado a uma pessoa não técnica. Dinâmico – É construído com uma ferramenta, desenvolvida com o objetivo de incluir, excluir e atualizar informações. Necessariamente usa-se banco de dados para armazenar informações. Centro de Estudos de Pessoal "Valorizando o Homem, serve ao Exército e ao Brasil"

9 Site X Portal Site – Possui uma estrutura mais simples e pode abordar um assunto específico. Visual mais clean. Poucas informações com muito espaço para textos e imagens. Pode ser dinâmico ou estático. Portal – Caracteriza-se pela estrutura complexa com o máximo de informações sobre o assunto abordado. Visual mais completo e com características próprias. Muitas informações e pouco espaço. Site dinâmico. Centro de Estudos de Pessoal "Valorizando o Homem, serve ao Exército e ao Brasil"

10 Site X Portal Exemplos de Sites
Exemplos de Portais Centro de Estudos de Pessoal "Valorizando o Homem, serve ao Exército e ao Brasil"

11 Evolução dos Sites http://www.archive.org/index.php
Centro de Estudos de Pessoal "Valorizando o Homem, serve ao Exército e ao Brasil"

12 WYSIWYG – What You See Is What You Get
São editores que nos permitem montar um página HTML sem o conhecimento mínimo necessário. Torna-se desvantajoso por não possuir códigos otimizados e que não seguem aos padrões de desenvolvimento para Web. Exemplo – google Sites Centro de Estudos de Pessoal "Valorizando o Homem, serve ao Exército e ao Brasil"

13 Centro de Estudos de Pessoal
"Valorizando o Homem, serve ao Exército e ao Brasil"

14 Anatomia de uma página Web: Estrutura básica HTML
Centro de Estudos de Pessoal "Valorizando o Homem, serve ao Exército e ao Brasil"

15 Anatomia de uma página Web: DIVisões
Centro de Estudos de Pessoal "Valorizando o Homem, serve ao Exército e ao Brasil"

16 Anatomia de uma página Web: O código da página HTML
Centro de Estudos de Pessoal "Valorizando o Homem, serve ao Exército e ao Brasil"

17 Layout fixo X layout fluido
Fixo Centro de Estudos de Pessoal "Valorizando o Homem, serve ao Exército e ao Brasil"

18 Resolução da Tela Para 1024X768 usar 1000 px de largura
Centro de Estudos de Pessoal "Valorizando o Homem, serve ao Exército e ao Brasil"

19 Cores A cor exerce influência na vida de uma pessoa, interferindo nos sentidos, emoções e intelecto; pode ser usada para se atingir objetivos específicos. O uso apropriado de cores pode resultar em uma rápida e correta assimilação da informação. Mas seu uso incorreto pode trazer resultados indesejáveis. Centro de Estudos de Pessoal "Valorizando o Homem, serve ao Exército e ao Brasil"

20 • representar associações simbólicas • chamar e direcionar a atenção
Conhecer um pouco de teoria das cores, ajuda a chegar no resultado esperado mais rapidamente: • representar associações simbólicas • chamar e direcionar a atenção • enfatizar alguns aspectos da interface • determinar um estado de espírito • não devemos abusar do uso de cores • temos que entender o que cada tonalidade representa. • conhecer que emoção passa Centro de Estudos de Pessoal "Valorizando o Homem, serve ao Exército e ao Brasil"

21 Centro de Estudos de Pessoal
"Valorizando o Homem, serve ao Exército e ao Brasil"

22 Centro de Estudos de Pessoal
"Valorizando o Homem, serve ao Exército e ao Brasil"

23 Centro de Estudos de Pessoal
"Valorizando o Homem, serve ao Exército e ao Brasil"

24 Centro de Estudos de Pessoal
"Valorizando o Homem, serve ao Exército e ao Brasil"

25 Centro de Estudos de Pessoal
"Valorizando o Homem, serve ao Exército e ao Brasil"

26 Centro de Estudos de Pessoal
"Valorizando o Homem, serve ao Exército e ao Brasil"

27 Centro de Estudos de Pessoal
"Valorizando o Homem, serve ao Exército e ao Brasil"

28 Centro de Estudos de Pessoal
"Valorizando o Homem, serve ao Exército e ao Brasil"

29 RGB - Adotado em monitores e TV
Centro de Estudos de Pessoal "Valorizando o Homem, serve ao Exército e ao Brasil"

30 CMYK - Adotado em impressões
Centro de Estudos de Pessoal "Valorizando o Homem, serve ao Exército e ao Brasil"

31 Tipografia na Web Sites interessantes: www.dafont.com
Centro de Estudos de Pessoal "Valorizando o Homem, serve ao Exército e ao Brasil"

32 Tipografia na Web Famílias Centro de Estudos de Pessoal
"Valorizando o Homem, serve ao Exército e ao Brasil"

33 Imagens na Web Bitmap X Vetorial
PIXEL – Ponto que compõe uma imagem bitmap. Quando a imagem é ampliada, os pixels se tornam visíveis, na forma de quadrados de cor e luz. Dando o efeito de textura e profundidade. VETOR – É um segmento de reta que possui comprimento e direção, podendo ser definido também como uma expressão matemática que indica tamanho e direção. Gráficos vetoriais são compostos por “nós”, os quais interconectam-se por meio de linhas e curvas. Existem imagens que se baseiam em pixels, como é o caso das fotografias, e imagens que se baseiam em vetores, como os logotipos. Centro de Estudos de Pessoal "Valorizando o Homem, serve ao Exército e ao Brasil"

34 Imagens na Web Bitmap Centro de Estudos de Pessoal
"Valorizando o Homem, serve ao Exército e ao Brasil"

35 Imagens na Web Vetorial Centro de Estudos de Pessoal
"Valorizando o Homem, serve ao Exército e ao Brasil"

36 Introdução a usabilidade na Web
Definições Ergonomia Ergonomia (ou Fatores Humanos) é a disciplina científica que trata da compreensão das interações entre os seres humanos e outros elementos de um sistema, e a profissão que aplica teorias, princípios, dados e métodos, a projetos que visam otimizar o bem estar humano e a performance global dos sistemas. Os praticantes da Ergonomia, Ergonomistas contribuem para o planejamento, projeto e a avaliação de tarefas, postos de trabalho, produtos, ambientes e sistemas para torná-los compatíveis com as necessidades, habilidades e limitações das pessoas. Centro de Estudos de Pessoal "Valorizando o Homem, serve ao Exército e ao Brasil"

37 Introdução a usabilidade na Web
Definições Usabilidade Pela definição da International Organization for Standardization, usabilidade é a extensão na qual um produto pode ser usado por usuários específicos para alcançar objetivos específicos com efetividade, eficiência e satisfação em um contexto de uso específico (ISO ). Para Jacob Nielsen, um site deve ser ser de fácil aprendizagem, permitir utilização eficiente e apresentar poucos erros são os três aspectos fundamentais para a percepção da boa usabilidade por parte do usuário. Centro de Estudos de Pessoal "Valorizando o Homem, serve ao Exército e ao Brasil"

38 Introdução a usabilidade na Web
Usabilidade X Funcionalidade Centro de Estudos de Pessoal "Valorizando o Homem, serve ao Exército e ao Brasil"

39 Introdução a usabilidade na Web
Padrões para Web – Abas Centro de Estudos de Pessoal "Valorizando o Homem, serve ao Exército e ao Brasil"

40 Introdução a usabilidade na Web
Padrões para Web – Link Principal Centro de Estudos de Pessoal "Valorizando o Homem, serve ao Exército e ao Brasil"

41 Introdução a usabilidade na Web
Padrões para Web – Seletor de Idiomas Centro de Estudos de Pessoal "Valorizando o Homem, serve ao Exército e ao Brasil"

42 Introdução a usabilidade na Web
Padrões para Web – Pesquisa Simples Centro de Estudos de Pessoal "Valorizando o Homem, serve ao Exército e ao Brasil"

43 Introdução a usabilidade na Web
Padrões para Web – Página 404 Centro de Estudos de Pessoal "Valorizando o Homem, serve ao Exército e ao Brasil"

44 Introdução a usabilidade na Web
Testes de Usabilidade Centro de Estudos de Pessoal "Valorizando o Homem, serve ao Exército e ao Brasil"

45 Introdução a usabilidade na Web
Testes de Usabilidade - Laboratório Centro de Estudos de Pessoal "Valorizando o Homem, serve ao Exército e ao Brasil"

46 Introdução a usabilidade na Web
Testes de Usabilidade – Protótipo de Papel Centro de Estudos de Pessoal "Valorizando o Homem, serve ao Exército e ao Brasil"

47 Padrões e Acessibilidade
Leis e Padrões Web “ O poder da Web está em sua universalidade. O acesso feito por qualquer pessoa, independentemente de sua capacidade, é um aspecto essencial. “ Tim Berners-Lee, W3C Director and Inventor of the World Wide Web Centro de Estudos de Pessoal "Valorizando o Homem, serve ao Exército e ao Brasil"

48 Padrões e Acessibilidade
Leis Lei Federal: Lei nº , de 19 de dezembro de 2000, assinada pelo ex-Presidente Fernando Henrique Cardoso. Decreto nº 5.296, assinado em 2 de dezembro de 2004 que estabelece as normas gerais e critérios básicos para a promoção da acessibilidade das pessoas portadoras de deficiência ou com mobilidade reduzida. Centro de Estudos de Pessoal "Valorizando o Homem, serve ao Exército e ao Brasil"

49 Padrões e Acessibilidade
Usuários Centro de Estudos de Pessoal "Valorizando o Homem, serve ao Exército e ao Brasil"

50 Padrões e Acessibilidade
Avaliação de Sites W3C Acessibilidade Brasil Centro de Estudos de Pessoal "Valorizando o Homem, serve ao Exército e ao Brasil"

51 Como fazer um Site online grátis
Google – Sites Wix Webs Webnode Centro de Estudos de Pessoal "Valorizando o Homem, serve ao Exército e ao Brasil"