Universidade Federal de Santa Maria Colégio agrícola de Frederico Westphalen. Aplicações Web. Elisa Maria Pivetta Cantarelli

Transcrição

1 Universidade Federal de Santa Maria Colégio agrícola de Frederico Westphalen Aplicações Web Elisa Maria Pivetta Cantarelli

2 WWW (World Wide Web) Originalmente composta só por texto H de HTML significa hypertext e não hypermedia. Em 1993, Marc Andreessen e Eric Bina adicionaram o tag <img>, consolidando imagens na Web. - responsável: especificações, diretrizes e ferramentas - guiar a Web e toda a sua potencialidade

3 Definições Página Web - é uma "página, uma unidade de um projeto. Website - aplicação web que publica informações bem específicas sobre um único tema. Ex: Website sobre Química do Estado Sólido. Site - formado por várias páginas ligadas entre si Portal - aplicação web que publica grandes volumes de informações de uma organização e presta serviços. Homepage é apenas a página inicial Hotsites promocionais - Pequena aplicação web promocionais compostos de uma ou duas páginas para divulgação de produtos e eventos. Sistemas de comércio eletrônico - Aplicações web de serviços de vendas on-line.

4 O layout O layout é a forma pela qual os itens estão diagramados. No projeto de páginas na Web, devem ser definidos layouts consistentes para todas as páginas do site. Devem ser equilibrados no aproveitamento das áreas livres das telas

5 Princípios de layout 1- hierarquia da informação; 2 - foco e ênfase; 3 - estrutura, equilíbrio e integração.

6 1 - Hierarquia da Informação Determina: que informação o usuário vê e o que ele é encorajado a fazer primeiro. Recomenda-se fazer estas perguntas: Qual é a informação mais importante para o usuário? Quais são as prioridades de um usuário quando encontrar um site? O que o usuário quer ou precisa ver em primeiro, segundo, terceiro lugar e assim por diante?

7 2 - Foco e ênfase O princípio do foco e ênfase auxilia o usuário na colocação de itens prioritários. escolher os elementos que devem ser proeminentes na região do foco isolar outros elementos ou fazendo com que eles se sobressaiam de outra maneira.

8 Foco e ênfase Em países ocidentais, da esquerda para a direita e de cima para baixo. Informações mais importantes devem estar localizadas no canto superior esquerdo. O início ou a base da tela são os melhores locais para mostrar informações sobre orientações que devem estar sempre visíveis.

9 3 - Estrutura,equilíbrio e Integração A falta de estrutura e equilíbrio torna a página mais difícil de ser entendida pelo usuário. Se possui integração entre as páginas: Oferece um ambiente de navegação consistente e previsível Fica mais fácil navegar

10 Estrutura do Site O desenho de um web site origina o esboço da página principal e páginas internas. O desenho será definido a partir de uma pesquisa visual e de informação sobre a organização, produto ou serviço. O desenho é o modelo de comunicação inicial a ser validado junto ao cliente.

11

12 Ex. Padrão de um Portal - Homepage 1 Logotipo 2- banner padrão; área busca; anúncios externos 3 menu administrativo 4 menu de navegação 5 área de destaque 6 corpo do portal 7- anúncios, compras, promoções internas, banners, anúncios 8 rodapé: menu institucional, dados site

13 1 3 2 Ex. Padrão de um Portal - Homepage Logotipo 2- banner padrão; área busca; anúncios externos 3 menu administrativo 4 menu de navegação 5 área de destaque 6 corpo do portal 7- anúncios, compras, promoções internas, banners, anúncios 8 rodapé: menu institucional, dados site direitos autorais 8

14 Esboço Elaborar uma relação de "tudo" o que website deve conter. Consolidar os "grupos de assuntos" que darão origem aos grupos de páginas. Agrupar os conteúdos e definir as ligações que os assuntos têm entre si. Pense e rascunhe o caminho lógico para se encontrar a informação

15 Homepage A homepage é a nau do site é deve ser diferenciada das demais páginas Mas devem ter o mesmo estilo Homepage deve conter o nome e/ou logotipo Tem que responder: Onde estou? O que faz este site? Morre as telas Splash: são irritantes, atrasam. Para as demais páginas: um link para homepage

16 Elementos Identificadores Topo Ex: se 800 largura 780x75 pixeis ; Máximo 95; Mínimo 60 Logotipo Superior esquerda Encaixar no layout Título Escrever para ser encontrado. Bom Título Autônomo e significativo. Texto de duas a seis palavras Páginas Diferentes, Títulos Diferentes Primeira palavra seja importante: Ex. Nome empresa Aplicar os princípios básicos de design

17 Menu Administrativo (Seção 3) Home Quem somos ou Sobre empresa Política de privacidade Cadastro de usuário Mapa site Fale conosco ou contato Ajuda On-line Menu importante, mas deve ser mais discreto que outros componentes do topo

18 Menu de Navegação (Seção 4) Geralmente a esquerda vertical Organização do conteúdo agrupe por categoria Não repetir mesma informação em mais de um menu

19 Menu de Navegação (Seção 4) Menu pop-up (menu de salto) organiza sem ocupar muito espaço Menu ocultável

20 Menu Institucional (Seção 8) Menu de rodapé Links com informações de aspecto jurídicos, funcionamento do portal Não necessariamente de uso a usuários comuns, mas talvez com interesse específico Termos de uso do serviço; Política de privacidade; anuncie no site; sobre o site; avisos legais; sala de imprensa; promoções; trabalhe no portal

21 Divisão Áreas de Conteúdo Seção 5 Ex. 350 x 200 pixeis (média) Manchetes, notícias Publicidade interna Seções especiais Alinhamento dos quadros internos

22 Exercício Análise das seções 1, 2 e 3 ( ver slide 12) em referência aos sites dados: Verifique como eram as secções e como estão atualmente O que mudou? O que melhorou? Tem problemas?????

23

24

25 Texto Objetivo, parágrafos curtos Contraste texto e fundo Usar pequenos parágrafos, subtítulos e listas Deixe espaçamento entre parágrafos. Bloco de textos: esquerda ou justificado A velocidade de leitura é 25% menor do que em um documento em papel. Deve-se escrever 50% menos na Web.

26 Texto Textos pequenos (9 a menos) devem ser sem serifa e de preferência somente em rodapés, anotações... Usar hipertexto para dividir as informações em níveis de detalhamento. Agrupar os diferentes tipos de informações, apresentando as mais importantes em primeiro lugar. Usar no máximo dois tipos de fontes. Não usar propaganda. Se for necessária, utilizar parte do espaço destinado à navegação, e não do espaço destinado ao conteúdo.

27 Texto Não usar caixa alta em excesso. Evitar desenhos ou texturas no fundo da página. O fundo não deve chamar mais atenção do que a informação. Evitar cores berrantes, caracteres brilhando ou piscando. Para realçar textos, usar cores ao invés de sublinhado ou elementos piscando. O usuário pode confundir o termo sublinhado com um link. Testar o projeto da página retirando um elemento de cada vez. Após o teste, retirar os elementos considerados desnecessários. Texto imóvel (Mover, piscar... Dificulta a leitura)

28 Animações Animações são ótimas para: mostrar continuidade nas transições ilustrar mudança de tempo visualizar estruturas tridimensionais chamar a atenção Pergunta-se: Posso comunicar bem por um elemento gráfico sem animação? Se a resposta for sim, acabe com a animação Minimizar animações - No máximo movimentos vagarosos Testes indicam (usuários não lêem animações pois a experiência demonstra que geralmente não tem informação útil)

29 Links Links Principais: Vertical ou Horizontal Se vertical: A esquerda e alinhar por suas extremidades esquerdas Se Horizontal: No topo Não forçar a retornar a Homepage para visitar todo o site Utilizar textos com informações suficientes sobre o conteúdo do endereço apontado. Não usar expressões como Clique aqui. Marcar o texto (nome da empresa, título da página, assunto etc.) e não o endereço URL. Não sublinhe texto que não tenha link. No máximo 4 links de profundidade

30 Pop-up são irritantes Não proliferar janelas Janelas Elementos de design Resposta negativa usuário Janela Pop-up 95% Carrega lentamente 94% Tenta levá-lo a clicar nele 94% Não tem um botão fechar 93% Cobre o que você está tentando ver 93% Não informa seu propósito 92% Move o conteúdo 92% Ocupa a maior parte da página 90% Pisca intermitentemente 87% Flutua sobre a tela 79% Reproduz som automaticamente 79

31 Consistência na navegação Todas as páginas devem sempre ter links de navegação: no mesmo lugar; usando o mesmo tipo de letra, ou os mesmos ícones; usando as mesmas cores. Um elemento importante do controle de navegação BACK Evitar rolagem horizontal da tela.

32 Cor Projetistas de interfaces gráficas freqüentemente esbarram nas seguintes perguntas: Que cores eu devo usar? Quantas cores eu devo usar? Estas cores são apropriadas? Como eu posso melhorá-las? O código de cores deve satisfazer o propósito de cada site recomenda-se usar de duas a cinco cores. Cores com contraste entre texto e fundo Use: fundo de cores lisas;

33 Cor Cuidados Podem causar fadiga visual por cores fortes; pode contribuir para confusão visual dada a complexidade do fenômeno da cor; pode ter associações culturais e históricas negativas. Daltonismo: Visão deficiente para cor entre alguns usuários (8% da população masculina);

34 Recomendações O site utiliza estruturas de frames? Evite frames. Site em construção Não diga ao usuário o que você não tem; Causa frustração Navegação com a HOMEPAGE independente do lugar onde estiver Use Migalhas Home>>download>>software Usar o atributo ALT com o significado das imagens Em mapas de imagem, tb colocar ALT em todas as posições clicáveis.

35 Use: Mapa do site Recomendações Mecanismos de Busca (em sites grandes) Não usar URLs muito extensas ou sem significado. Evitar hífens ou outros caracteres especiais no endereço das páginas. É preferível justapor duas ou mais palavras, ou abreviá-las. Usar apenas letras minúsculas no endereço Evitar usar O e 0 no endereço das páginas.. Evitar páginas órfãs, sem qualquer indicação de opções de navegação possíveis.

36 Recomendações Planejar a estrutura de acordo com o contexto das tarefas e não com as novidades tecnológicas. Evitar estrutura linear (ordem numérica ou alfabética). As informações devem ser apresentadas seguindo uma ordem lógica relacionada à tarefa a realizar. Verificar erros de grafia, tomando como base a gramática e o glossário de termos técnicos. Não usar elementos gráficos metafóricos, a não ser que sejam de uso corrente na instituição. Utilizar palavras da linguagem natural e/ou familiares aos usuários.

37 Gráficos Tridimensionais Segundo Jacob Nielsen (2000): É quase melhor ter imagens bidimensionais do que tridimensionais, já que as pessoas não são sapos. Se fossemos sapos com olhos nas laterais a história talvez fosse outra. O uso de 3D no computador acrescenta uma série de dificuldades: A tela e o mouse são dispositivos bidimensionais, de modo que não obtemos a verdadeira tridimensinalidade, a não ser com dispositivos RV, novos monitores... A resolução da maioria das telas dificultam: texto no fundo pode ficar ilegível - Usuários precisam prestar atenção espacial, além de prestar atenção nas suas tarefas.

38 Tempo de Resposta Minimizar a quantidade de elementos gráficos Largura de banda baixa: Para transmissão de uma imagem de 50kb num modem de 56kbps (ainda disponívels para muitos usuários), o download será de aproximadamente 10s. Arquivos maiores necessitam de um alerta. Informar: Tamanho do arquivo, formato Para o usuário investir num download demorado é necessário que entendem o que obterão.

39 Verifique Velocidade de acesso: as páginas carregam rápido ou lentamente? Tamanho dos arquivos Otimizar as imagens para a web Aproveitamento do espaço "nobre"da janela (superior esquerdo): que tipo de informação ocupa este espaço? Você acha que é bem ou mal aproveitado? O que você faria para mudar? O menu de navegação tem as seções mais importantes a vista quando se entra na página (sem usar barra de rolagem)?

40 Folhas de Estilo Arquivo de regras CSS para todas as páginas do seu site. Poupa-se várias linhas de comando e, ao alterar as regras desse arquivo, as configurações das páginas mudam automaticamente, sem a necessidade de se editar uma a uma.

41 Folhas de Estilo <HTML> <HEAD> <TITLE>exemplo de CSS</TITLE> <STYLE type="text/css">  </STYLE> </HEAD> <BODY> exemplo 1 crie classes nas regras </HTML> Exemplo 1 Crie classes nas regras do css e controle seu site </BODY> do CSS e controle seu site

42 Folhas de Estilo Para ler os estilos de um arquivo de regras (.css) em uma página, a tag: <link rel="stylesheet" ref="nomedoarquivo.css" type="text/css"> deve ser inserida no cabeçalho (head></head> )

43 Etapa Inicial do Projeto Entrevistar o cliente para conhecer a organização, o produto ou serviço. Reunir documentos Pesquisar posicionamento no mercado, alcance, atuação Definir o público Identificar as estruturas dos dados, a partir da estrutura da empresa Se a empresa não possui identidade visual, o cliente deve ser orientado da importância de ser criada uma marca que o identifique no mercado.

44 Público Pesquisa ou Mineração de dados Quem é? Quantos são? Qual é a necessidade, o desejo? Quais as características do público? Demográficas (idade, renda, estado civil, profissão, local de trabalho...) Psicográficas (gosta de viajar, pratica esportes, lê, navega na Internet, vê TV, opinião sobre política, saúde, cultura, governo...)

45 Que tipo de site será desenvolvido: 1 - Site de Conteúdo Sites horizontais: Informações gratuitas e Variedade de assunto Ex. UOL, Terra, AOL... Sites verticais: Informações sobre assunto específico Ex. Imóveis, Automóveis.. Sites de busca: cadê?, metaminer, yahoo, google... Sites de download Sites de cursos on-line

46 Que tipo de site será desenvolvido: 2 Institucional Finalidade é apresentar a empresa. Não realiza vendas As informações são apenas da empresa Mostra os produtos Notícias da empresa Divulga balanço, relatórios Lista de revendedores Estabelece comunicação Dois tipos: Sites da Empresa: Ex. Nestlé Sites de Marca: Ex. Nescau

47 Que tipo de site será desenvolvido: 3 Site Promocional ou Hot-site. Divulgar informações e obter a participação do público-alvo da campanha. O site dura o período da promoção. Ex. O site da promoção da Nestlé: 80 anos, 80 casas para você

48 Que tipo de site será desenvolvido: 4 Lojas Virtuais a) Puramente Virtual: Ex. Submarino e Amazon Sofrem forte concorrência das tradicionais Devem Oferecer: Preço vantajoso Atendimento diferenciado Prazo de entrega adequado Sistema de pagamento confiável.

49 Que tipo de site será desenvolvido: 4 Lojas Virtuais b) Loja Virtual de varejista Ex. Americanas, Ponto Frio Variedade enorme de produtos Marca conhecida Experiência de mercado Custos menores

50 Que tipo de site será desenvolvido: 4 Lojas Virtuais c) Loja Virtual de empresa de venda direta Ex. Avon, Natura A venda na Web está vicnculada a uma consultora Escolhida pelo cliente ou recomendada pela empresa É de acordo com o local da residência, com base no CEP O pedido é entregue pela consultora ou pela empresa (a escolha do cliente)

51 Que tipo de site será desenvolvido: 4 Lojas Virtuais d) Loja Virtual de fabricante Ex: General Motors Os clientes: Configuram seu carro Escolhem a forma pgto Fazem a compra, o financiamento,leasing, o consórcio. Preços menores

52 Que tipo de site será desenvolvido: 4 Lojas Virtuais d) Loja Virtual de Prestadora de serviços Caracteriza-se pela realização de serviços que podem ser digitalizados: Livros, jornais, fotografias, serviços financeiros, consultoria, aconselhamento, treinamento, ensino...

53 Que tipo de site será desenvolvido: 4 Lojas Virtuais e) Loja virtual de atacadista f) Loja Participante de Shopping Virtual Sites de e-comércio que reúnem diversas lojas virtuais. Ex: Ex: (Bradesco)

54 Que tipo de site será desenvolvido: 5 Sites de Cooperativas ou grupos de compradores: O site reúne internautas que tenham interesse em comum em um determinado bem ou serviço. O usuário se filia ao grupo Qdo o grupo atinge um número significativo de usuários, a compra do bem é realizada Vantagem: redução do preço Registra-se o aparecimento de grupos de compra formado por empresas. 6 Sites de entretenimento

55 Etapa Inicial do Projeto Todo material necessário no desenvolvimento do projeto como documentos, textos, imagens, áudio e vídeo deve ser levantado Definir os limites da aplicação Web Delimita o tempo de desenvolvimento Facilita a visualização da abrangência Definir bem os objetivos: Facilita o desenho das arquiteturas de design e informação Garante o tema da aplicação a ser desenvolvido

56 Políticas -Domínio É importante a criação de um domínio próprio para aplicações web corporativas. O nome deve ser registrado a marca notória registrada no INPI (Instituto nacional da propriedade Industrial)

57 Políticas - Divulgação Promova e registre a campanha de divulgação e lançamento da aplicação web: mecanismos de busca Publicar folders Anuncie em jornais, revistas e TV Promova campanha contínua através de publicidade direcionado ao público alvo

58 Testes Finais teste as páginas html em diferentes versões de browsers verificar links análise da performance de carregamento das páginas html; análise da performance de execução de imagens, animações, vídeos e áudios;

59 Cartilha de usabilidade a/index_html_biblioteca

60 Estudar o capítulo 3 do livro: Nielsen J. e Loranger H., Usabilidade na Web Projetando Websites com qualidade. Ed. Campus, 2007

61 Conclusão Mesmo que não seja possível tornar um site totalmente acessível Temos a responsabilidade de incluir o maior número de recursos de acessibilidade Há uma grande diferença entre um design menos que perfeito e um design totalmente arruinado.