Baixe o app para aproveitar ainda mais
Leia os materiais offline, sem usar a internet. Além de vários outros recursos!
Interface Web
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Compartilhar
Prévia do material em texto
Interface - WEB • Fornecer as definições de interface, para a construção de aplicativos WEB. O Objetivo é desenvolver uma estrutura padrão, de fácil construção e manutenção. • Sistemas web, são por definição, sistemas que podem ser acessados por qualquer pessoa conectada à internet, a qualquer hora e de qualquer lugar do mundo. Isso determina que os sistemas devem ser fáceis de usar, interativos e intuitivos. Qualquer projeto é constituído da equação: – aplicativo = sistema + interface Formulários Abertos • Em um sistema de cadastro de estabelecimentos simples, quantas telas no mínimo teremos? Lista de ações – após buscar Incluir Registro Exibir Registro Alterar Registro Alterar Registro Definições Técnicas • Deve-se utilizar, no mínimo os padrões de conformidade da W3C, que é um consórcio que define os padrões da internet, buscando desenvolver o potencial máximo da internet, através dos seus protocolos comuns que promovam sua evolução e garantam sua interoperabilidade. Definições Técnicas • O cabeçalho deve sempre conter: • <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”> • Que define e que garante que a página estará em conformidade com os padrões da W3C Definições Técnicas • <title>Geodominus</title> com o nome do sistema. • <meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1”> • Que garante que o padrão de caracteres utilizado é o português, evitando problemas de acentuação. Imagens • Em todas as imagens funcionais do conteúdo (ícones, fotos, etc.) deve ser utilizado a propriedade ALT com sua descrição. • <img src=”imagem.png” alt=”descrição”> • Os formatos de imagens utilizados devem ser JPG e PNG. Conforme recomendações da W3C. Imagens • Sugestão: • Nomenclatura: – tipodeimagem_descricao.png • O “tipodeimagem” deve conter 4 letras – icon_descricao.png - para ícone. – logo_descricao.png - para logotipos. – back_descricao.png - para backgrounds. CSS • Todas as definições devem estar em uma folha de estilos (CSS), nunca usar formatações dentro do código. • Utilizar no mínimo definições do CSS 2. • Deve ser utilizado no mínimo duas folhas de estilo independentes: – Default (obrigatório) – Tela (obrigatório) – Impressão CSS – default.css - que terá todas as definições padrões da empresa. Esse CSS deve ser alterado apenas em suas definições, não deve ser incluído nenhuma classe, id ou tag. • <link rel=”stylesheet” type=”text/css” href=”default.css”> – screen.css – que terá todas as definições de layout. Ficando livre a sua construção. • <link rel=”stylesheet” type=”text/css” href=”screen.css”> – print.css – deverá ser utilizado no caso de definições alternativas, específicas para impressão. • <link rel=”stylesheet” type=”text/css” href=”print.css” media=”print”> Estrutura • A tela de login será composta pelos campo USUÁRIO e SENHA, com seus respectivos labels. Um botão de ENTRAR e 3 opções (links): alterar senha, esqueci senha e ajuda. • Deve constar na página: a logo, ou nome do cliente; nome do sistema; e demais logos necessários. • Indicar qual a melhor resolução de browsers é suportado. Estrutura • A tela de login será composta pelos campo USUÁRIO e SENHA, com seus respectivos labels. Um botão de ENTRAR e 3 opções (links): alterar senha, esqueci senha e ajuda. • Deve constar na página: a logo, ou nome do cliente; nome do sistema; e demais logos necessários. • Indicar qual a melhor resolução de browsers é suportado. • Deve se utilizar o label USUÁRIO e SENHA, evitando a utilização de termos como: LOGIN, USER, PASSWORD, etc. Estrutura • SUGESTÃO: • A logo da Empresa desenvolvedora, como assinatura de desenvolvimento, deve ter próximo de 80x18px (presente no rodapé). • A logo do Cliente o tamanho deve ser adequado ao layout do sistema. Estrutura • PÁGINAS INTERNAS: • Deve conter na parte superior um CABEÇALHO com layout derivado da tela de login, contendo o nome/logo do sistema e a logo do cliente. Recomenda-se que internamente não se repita o rodapé. • Abaixo do CABEÇALHO entra as opções do menu e na seqüência a barra de ícones. Estrutura • DIMENSIONAMENTO DA TELA: • Define-se como dimensões padrão de tela o formato MÍNIMO de 800x600, o que equivale a um tamanho de tela útil de aproximadamente 780 x 440px. • A largura da tela deve estar previsto para a largura acima, mas deve contemplar medidas em porcentagem para se auto-ajustar as telas maiores (100%). Estrutura • CABEÇALHO: • Deve ser estreito, com altura MÉDIA de 27px e largura de 100% da tela, com layout derivado da tela de login. Logo abaixo deve possuir a barra do menu e a barra de ícones quando necessário. Estrutura • MENU: • O menu deve ter no máximo 3 níveis. Estrutura • ÍCONES: • Defini-se como formato padrão dos ícones 16px de altura por 16px de largura, com fundo transparente. Quando houver a necessidade de utilizar ícones maiores utilizar o formato 24x24px ou 32x32px. • Não deve-se utilizar um mesmo ícone, ou uma mesmo conceito de imagem, para identificar funções diferentes. Estrutura Estrutura • BARRA DE ÍCONES: • Para garantir agilidade, nesta barra virão os atalhos de algumas funções do menu. • A barra de ícones deve ter MÉDIA de 28px de altura, por 100% da largura. Estrutura • BARRA DE AÇÕES: LOCALIZAÇÃO • Deve descrever o caminho que o usuário percorreu. Separar os caminhos por “>”. • Fica localizada dentro da barra de ações superior. Estrutura • BARRA DE AÇÕES: AÇÕES • Deve apresentar algumas ações de navegação além do help do sistema. Deve ter MÉDIA de 17px de altura, por 100% da largura da página. Estrutura • TÍTULO: • O título deve descrever a função da tela. Deve ser auto-explicativos, mas não genérico. Deve conter de 2 a 6 palavras. Ex.: Não utilizar apenas “Estabelecimento” para identificar uma tela de inclusão, usar “Incluir Estabelecimento”. • É recomendado que um mesmo título não se repita em telas diferentes. • Usar, por exemplo, a tag <H1>. Estrutura • SUB-TÍTULO: • Deve ser utilizado para separar os agrupamentos de informação internamente. • Usar as tags <H#> de acordo com a hierarquia, quanto maior o número menor sua posição • na hierarquia. <H2>, <H3>, <H4>, .... Estrutura • MENSAGEM: • A aplicação deve ter um tratamento para verificar onde está a origem da mensagem (falha, sucesso, aviso), para não retornar uma mensagem genérica. • A qualidade da mensagem exibida ao usuário determinará o grau de compreensão do problema e a rapidez de sua solução. Estrutura • MENSAGEM:interna • Abaixo do TÍTULO fica reservado o espaço para as mensagens internas. • Todas as mensagens acompanham um ícone e cor de identificação de seu tipo. Estrutura • MENSAGEM:erro • Não deve intimidar o usuário, deve ajudar a esclarecer o problema. • Quando o erro não possibilita ao usuário sua correção, deve existir um código e uma informação de contato para o usuário buscar auxílio. Ex.: “Ocorreu um erro inesperado. • Contate nossa Central de Atendimento pelo telefone xx xxxx-xxx ou e-mail central@xxxx.com.br, e informe o código XXXXXXX”. • Usar fonte vermelha. Estrutura • MENSAGEM:sucesso • Identifica o sucesso da operação. Ex.: “O usuário Carlos foi incluído com sucesso”. • Utilizar fonte verde. Estrutura • MENSAGEM:aviso • Utilizar para mensagens de aviso.• Utilizar fonte preta. Estrutura • MENSAGEM:exemplos • O campo “Usuário” é de preenchimento obrigatório. • É obrigatório o preenchimento de um dos campos. • Deseja realmente excluir o usuário “nome”? • O campo peso deve possuir valores entre 10 e 20 kg. • Inclusão não permitida. O valor excedeu ao máximo de organizações que podem ser cadastradas (9 organizações). • Data de nascimento não pode ser maior que a data atual. • Confirma a alteração do nome do usuário? • Usuário Amanda incluído com sucesso! Estrutura • MENSAGEM:externas • Alerta e Confirmação – As mensagens de alerta devem utilizar o alert(). Ex.: “O campo nome é de preenchimento obrigatório.” • Neste caso deve retornar o foco para o campo mencionado. • Telas de confirmação devem existir sempre que ação for danosa a aplicação, por exemplo: – EXCLUSÃO e ALTERAÇÃO. Estrutura • ABAS • É obrigatório o uso de abas em formulários muito extensos. As abas funcionam como um identificador de ETAPAS do preenchimento, subdividindo o formulário. • Foi contemplado três estados da aba: ativa selecionada, ativa mas não selecionada e inativa (existe visualmente mas não pode ser selecionada). • Usar cores contrastantes para identificar qual aba está ativa. Estrutura • INDICAÇÕES • Deve estar presente tanto no cabeçalho quanto no rodapé do formulário. • Usar sempre “(*) Campos de preenchimento obrigatório.” Estrutura • FORMULÁRIO • O foco deve estar sempre no primeiro campo do formulário. • A área do formulário deve estar sempre bem delimitada pelo bloco de conteúdo Estrutura • FORMULÁRIO • A distribuição do conteúdo do formulário deve valorizar a distribuição horizontal sempre que possível, tendo como base a ordem de navegação do usuário. A distância entre campos deve ser em MÉDIA de 15px. Um label existente na segunda coluna nunca pode tocar o campo da primeira coluna. Estrutura • RÓTULO - LABEL • Deve ser curto e ocupar apenas uma linha. • Em campos que forem de preenchimento obrigatório deve apresentar em seu lado esquerdo o sinal de “ * ” Estrutura • TEXTÁREA • Evitar a utilização de borda, pois não funciona em todos os browsers e essa propriedade varia de acordo com o sistema operacional. • RADIO E CHECK • Apresentar o label do lado direito do input. Estrutura • BOTÕES • O texto do botão depende diretamente com o título da página. Deve-se utilizar apenas o verbo da ação. Ex.: Incluir, Alterar, Excluir, Exibir, Pesquisar, Cancelar, Voltar, ... • Em casos específicos trabalhar com mais uma palavra para auxiliar na descrição. Ex.: Uma tela de inclusão, mas que no formulário precisa de mais um botão que pesquise os usuários, então utilizar “Pesquisar Usuários”. Estrutura • LISTA • Deve possuir um cabeçalho com cor diferenciada. • Nas linhas é mais comum apresentar ao lado esquerdo o ícone de exibir e do lado direito os ícones de alterar e excluir (nesta ordem). • Deve possuir alternação de cores nas linhas para facilitar a leitura. Estrutura • BARRA DE PAGINAÇÃO • Deve apresentar qual registro está e o total de registros encontrados. Do lado direito deve apresentar os links para navegação ( primeiro | anterior | próximo | último ). • É muito comum a sua presença no cabeçalho da listagem e no rodapé. Estrutura • AGRUPAMENTO DE INFORMAÇÕES • Para fazer o ideal agrupamento das informações deve se utilizar primeiramente a marcação para identificação do formulário (exemplo), depois o subtítulo para identificação do grupo e para fazer uma subdivisão no grupo, deve utilizar o <HR> (linha). Estrutura • AJUDA • Sempre deve existir a ajuda do sistema. • Deve haver um índice que remeta aos conteúdos além de fornecer formas de contato com a Central de Atendimento. • Ao entrar no ícone de ajuda (ajuda?) é aberta uma nova janela (popup) com abas fazendo a subdivisão da ajuda, de acordo com o conteúdo disponível. O ideal é a presença de no mínimo dois tipos: Índice Geral e Mais Informações. Estrutura • AJUDA: mais informações • Em campos que necessitam um maior esclarecimento deve ser apresentado ao seu dado o ícone (i). Quando o mouse passa por cima deste ícone é apresentado um quadro com as informações. Estrutura • AJUDA: índice geral • Deve ser apresentado como referência aos conteúdos. Utiliza um menu em formato de árvore de diretórios. Estrutura • AJUDA: índice geral • Deve ser apresentado como referência aos conteúdos. Utiliza um menu em formato de árvore de diretórios. Cores • As cores têm propriedades diferentes de acordo com a cultura onde são consideradas. No caso da WWW, deve-se ter cuidados especiais para transmitir a mesma mensagem visual às pessoas de diferentes culturas . • Fator crítico: pessoas que desenvolvem interfaces WWW negligenciando as regras mais simples de uso de cores. Cores • O contraste é a base a distinção da forma, tamanho, posição, volume e aparência dos objetos. Considerando a cor, o contraste pode ser obtido através de diferenças no matiz e tonalidade ou iluminação. • O contraste entre cores pode ser usado para alterar a sensação de tamanho entre objetos. Por exemplo, uma pessoa gorda parece ser mais magra quando veste roupas pretas. Este efeito se deve a um mecanismo da visão que aumenta as diferenças de intensidade entre as cores dos objetos e os faz mais visíveis do que realmente são. Cores • Em 1958, Heison, avaliou a qualidade da visibilidade das cores, a uma distância de 180 metros, numa escala de 0 a 100 – amarelo âmbar 95 – amarelo fluorescente 73 – laranja fluorescente 69 – laranja 54 – vermelho flourescente 51 – vermelho 35 • Experiências realizadas na Alemanha, revelaram que a tela amarelo âmbar teve um desempenho 4 vezes melhor que uma preto e branco. Na seqüência ao amarelo âmbar segue-se o verde e o azul Cores Padrões www e suas Limitações para Representação de Cores • O sistema de referência para a WWW é o RGB. A partir da versão HTML 3.2, novas TAGs permitiram definir cores de alguns elementos tais como o fundo da página, blocos de texto e links. – <body bgcolor="#33FF33"> altera a cor de fundo da página; – <body link="#FFFFCC"> altera a cor de um link não visitado; – <font color="#9999CC">... </font> altera a cor no texto selecionado. Cores • Formatos para imagens: – GIF (Graphic Interchange Format) - proprietário [256 cores] – PNG (Portable Network Graphics ) - aberto – JPEG (Joint Photographic Experts Group ) [milhões cores]. Cores • Cores devem ser planejadas para interface considerando o contexto em que serão utilizadas. • Muitos usuários imprimem as páginas encontradas na WWW. Diversos fatores levam a esta atitude, entre eles: – a impressão é estável e permanente; – a leitura sobre monitores (especialmente CRT) cansa a visão. Cores • Impressões em cores são populares, mas têm alto custo e velocidade menor. Assim, como fica a versão em preto e branco da interface, se o usuário fizer esta opção? • É possível modificar a cor padrão de links e links visitados (azul e vermelho), bem como o cursor, para criar contraste sobre um fundo em cores. Cores 1. Não usar blink: O uso intensivo de piscar (blink) um texto ou imagem, causa fadiga visual, pois dependendo das cores usadas para fundo e texto ou imagem, o olho precisa reposicionar o correspondente sensor da cor a ser usada em cada instante do efeito de piscar, ou dependendo das coresusadas reposicionar o foco a cada instante. 2. Não usar fundos escuros: Fundo preto não é recomendado pois há poucas cores que contrastam e causa cansaço visual. No caso de impressão em P & B, a cor usada para o texto ou imagem pode ser convertida para escuro e se confundir com o fundo (além de gastar grande quantidade de toner/tinta). 3. Não usar cores alternativas para links. Cores 4. Priorizar textos com letras pretas: A letra preta, sobre um fundo claro, tem melhor legibilidade, e não gera problemas na hora da impressão. Com esta escolha, os fundos escuros, tais como azul, vermelho, roxo e verde-escuro, que necessitariam de letras brancas para obter bom contraste. Cores 5. Não tornar a tela muito brilhante ou escura – use as cores brilhantes em áreas pequenas e cores suaves em áreas maiores 6. Não apostar na boa habilidade visual de todos os usuários – grande nº de pesoas têm algum tipo de disfunção visual; algumas pessoas não consiguem distingüir algumas cores e confundem outras; daltonismo e a distorção de algumas lentes provoca estes efeitos. Cores 7. Não associar muitas cores para serem lembradas – as cores podem possuir um significado, além daqueles mais populares (vermelho para Pare e Verde para Seguir). 8. Cores Opostas: – se vermelho é Pare: oposto é verde – se vermelho é calor, quente: oposto é azul Cores 09. Associações comuns: – vermelho: pare, perigo, fogo, quente – amarelo: cuidado, atenção, aviso – verde: siga, OK – azul: frio, água, sono 10. Utilize combinações de cores “Clean”. Utilize, em média, entre 2 a 6 matrizes de cores Cores 11. Diferenças culturais na associação de cores alguns países têm cores associadas à alguns objetos e fatos: – no Japão marginais usam chapéu azul – no Egito o amarelo é a cor da alegria e prosperidade – as caixas de correio são vermelhas na Inglaterra, azuis nos Estados Unidos, amarelas na Grécia e verdes ou amarelas no Brasil Cores 12. Lembrar que cores mal utilizadas é pior do que não usar cores Cores 13. Considere a psicologia da cor Os visitantes do seu site formam opiniões inconscientes de sua marca no momento em que a visualizam a página inicial, a maneira como a sua marca se expõe. As cores utilizadas são o primeiro elemento que eles vêem o que desencadeia uma resposta para que o esquema de cores especial. As cores têm influência psicológica e todas têm associações inerentes. O verde é para o meio ambiente. O rosa é feminino. O azul é para empresas. Cores • Azul • Sucesso, calma, sério, o poder Cores • Roxo • Realeza, luxúria, fantasia Cores • Amarelo • Curiosidade, brincadeira, diversão Cores • Verde • Natureza e Vida, Calma, Segurança
Materiais relacionados
75 pág.
65 pág.
97 pág.
Perguntas relacionadas
Compartilhar