1.
Sítio Para Internet
Uma página web, também conhecida pelo no inglês webpage, é uma "página" na world wide web, geralmente em formato HTML e com ligações de hipertexto que permitem a navegação de uma página, pág ina, ou secção, para outra. As A s páginas web usam com frequência fr equência ficheiros gráficos gráfico s associados
para
fins
de
ilustração,
e
também
estes
ficheiros
podem
ser ligações clicáveis. Uma página web é apresentada com recurso r ecurso a um navegador, ou browser, e pode ser construída por forma a recorrer a applets (subprogramas que correm dentro da página), que muitas vezes fornecem gráficos em movimento, interação com o utilizador utilizador e som. É difícil conseguir uma receita mágica capaz de assegurar que um Web Site vá agradar a todos os utilizadores. Existem contudo, algumas orientações e princípios, que podem contribuir para a conceção de Web W eb Sites eficazes.
Definição Tema: identificação do assunto e da ideia principal do site. Objetivos: identificação da função que o site vai desempenhar. Pretende-se dar resposta a questão: para quê? Como em qualquer projeto temos de ter em mente determinados objetivos a atingir.
Destinatários: Identificação e caracterização da "audiência" (utilizadores), que idade, que experiência possuem, porque razões podem visitar o site. Pretende-se dar resposta à questão: para quem? Deve fazer-se com que os visitantes da nossa página não se sintam defraudados,
1
para tal a página deve conter conteúdo significativo. Temos de ter consciência que quem visita a nossa página, procura alguma informação. É fundamental que o visitante localize essa informação. Se a página não a possuir, deve orientar no sentido de ser localizada.
2
Organograma Uma vez conhecidos os objetivos e a audiência da página, é altura de ver como vamos apresentar a informação.
Criamos então um diagrama com a estrutura das páginas,
agrupadas por tópicos.
3
Pastas e Ficheiros Depois de termos as páginas construídas, devemos guardá-las em pastas, por tópicos. Uma pasta é um “sítio” onde pode armazenar ficheiros. Por exemplo criamos uma pasta para todas as imagens, outra para documentos, etc. Podem conter ficheiros, mas também podem conter outras pastas (subpastas).
Esquemas de navegação A estrutura deve permitir visualizar de forma fácil e clara, os conteúdos de um conjunto de páginas Web. Uma estrutura deficiente, pode produzir no espectador a sensação de estar
4
perdido e incapacidade de encontrar a informação procurada, o que conduzirá ao abandono da página. A estrutura deve dar uma ideia geral da organização da informação e consequentemente situar melhor os utilizadores. Uma boa estrutura, facilita a navegação, porque requer menos esforço cognitivo e ajuda a uma melhor assimilação da informação. A estruturação da informação pode depender muito do conteúdo do site, das finalidades e do tipo de utilizadores (deficiências, experiência, etc.) São várias as estruturas para organização da apresentação. A seguir apresentam-se algumas:
Linear Este tipo de organização é a forma que tradicionalmente tem sido usada, desde as inscrições em pedra, até ao vídeo dos nossos dias. O hipertexto/hipermedia é intrinsecamente não linear, o que não é sinónimo de incapacidade para suportar a sequencialidade. A informação linear está organizada de forma a que, para ser recuperada, não necessita referências a si mesma ou outras informações externas. Só existem duas possibilidades de navegação: para a frente ou para trás. É perfeitamente fiável, mas monotonamente previsível, seguindo a lógica tradicional da transmissão da informação.
5
Árvore Este tipo de estrutura é também bastante familiar. Esta estrutura simples é a base da classificação, da organização administrativa ou das árvores genealógicas. A organização do conteúdo, na base hipertexto faz-se de forma hierárquica, com a informação mais geral no topo, e a mais detalhada, em níveis mais baixos, submetida à mais descendem de uma raiz comum. De cada nó podem sair múltiplas ligações para outros nós de nível inferior na hierarquia.
Imagem 5 - Estrutura em Árvore
A organização hierárquica resultante, ajuda o utilizador a criar um modelo mental coerente da base da informação.
6
Estrela Estas estruturas caracterizam-se por possuírem um nó central e principal, e um conjunto de nós ligados a este. A passagem de um nó a outro requer sempre o regresso ao "local central". Adapta-se a conteúdos, onde, por exemplo, existe um tópico principal, do qual fazem parte vários sub-tópicos. Ícones nesse nó principal, podem estabelecer ligações a conteúdos mais específicos desse assunto, regressando de novo ao local central para o estabelecimento de uma nova ligação.
Mista O diagrama mostra um túnel colocado numa estrutura de roda. Isto é, o utilizador chega a uma página (de uma roda) que é o início de uma sequência que você gostaria que ele visitasse (o túnel). Poderá até combinar sites distintos num esquema de navegação mista. Considere um site sobre desporto que tem estrutura de roda ou cadeias de rodas. Na seção sobre ténis, há um link para o site de uma escolinha de ténis que tem estrutura de túnel, apresentando a escola e no final, um formulário de inscrição. Assim combina os sites estrategicamente.
7
Imagem 7 - Estrutura Mista
Não Linear
8
Ligações entre ecrãs Uma etapa importante na conceção do Web site é a conceção do sistema de navegação. É um componente da interface, muito dependente da estruturação da informação e é constituído por todas as ligações e hiperligações. É o sistema de navegação que permite mover-nos através das diferentes páginas, criando as condições e estilos de interatividade.
Imagem 8 - Ligações entre ecrãs
Coerência e funcionalidade das ligações Os sistemas de navegação podem ser constituídos por: Sequências utilizadas para ir para a página seguinte e anterior, também utilizadas pelos browsers.
9
Barras de navegação (botões ou menus), podendo ser constituídas por itens de texto, itens gráficos, ou as duas coisas. Contém apenas as ligações principais. As barras de navegação podem estar sempre presentes em todas as páginas, estar apenas na principal, ou nos níveis fundamentais. As barras ou menus não devem ser muito extensas, isto é, não devem possuir demasiadas opções.
1
Ligações de deslocação para o início e fim de página, no caso desta necessitar de barra de deslocação vertical. Ligação de deslocação, em todas as páginas, para a página principal. Existem outras estruturas de navegação que se podem usar, como os índices, formulários de pesquisa, mapas ou esquemas do site, que podem ser utilizadas para que o utilizador recupere rapidamente a informação e não se desoriente no site. Depois de concebido o sistema de navegação, devem ser testadostodas as ligações e verificar se funcionam como se esperava. Verificar que todas as ligações fazem sentido, isto é, existem por uma razão lógica. Não colocar ligações que conduzam a mensagens de erro (404 File Not Found). Evitar estabelecer ligações que conduzam a páginas em construção. Não colocar a página na Internet sem tudo estar funcional. Deve convidar alguém, outra pessoa (ou pessoas) para fazer o teste da funcionalidade, verificar as dificuldades encontradas, a correção ortográfica, e se tudo funciona corretamente considera-se o Web site validado.
A Interface O desenho visual da interface, descrevendo as ferramentas que o utilizador possui para aceder e navegar ao longo do documento hipermédia, consiste nos elementos gráficos, como a organização do ecr ã, a apresentação da informação e os comandos do ecrã. A sua conceção deve obedecer a alguns princípios da comunicação vi sual, tendo em conta fatores de perceção, legibilidade, unidade organizacional, códigos de cor e estruturas de acesso à informação.
1
Conseguir assim, boas ideias para o desenho de interfaces é algo que se reveste de certa complexidade, pois são vários os aspetos a ter em conta. O que se pretende com uma boa interface é tornar a interação do homem com o documento hipermédia, fácil, agradável, intuitiva, numa palavra – amigável -.
Design Frame lateral esquerda sempre presente de modo que o utilizador não se sinta perdido e possa em qualquer momento alterar a sua navegação;
Separadores entre as imagens; Setas personalizadas do mesmo padrão; Cores com ténues diferentes entre o menu esquerdo e as páginas do lado direito da frame;
1
Música apenas com duas repetições para não maçar o utilizador e colocada na página esquerda da frame para que possa ser ouvida até ao fim.
Cores Fundos em tons claros; Letras em tons escur os e contrastantes (preto ou azul) com o fundo; A utilização de fundos de páginas com muitos gráficos, imagens animadas ou cores muito berrantes podem funcionar como dispersantes, podendo confundir o utilizador e tornar difícil a leitura do texto que se encontra sobre o background. É importante que se crie um ambiente harmonioso entre as cores utilizadas nas fontes das letras e a cor utilizada no background da página. Atenção que o uso de cores claras (branco, por exemplo) em backgrounds escuros impossibilita ao utilizador a impressão do texto, pois o branco das letras não vai aparecer na impressão de uma folha branca.
Logotipo em cada página com uma cor que realce em relação à cor do fundo; Separador numa página entre os diferentes temas ou assuntos (em tom concordante com o fundo);
Título de cada página em tom contrastante com o fundo e a cor do restante texto.
Textos Em fonte Verdana (com a alternativa Arial) porque não têm serifa, o que facilita a leitura; Os títulos podem ser em Times ou outro tipo de letra mais desenhada (com ou sem serifa);
1
Os textos nunca sã o sublinhados para que o utilizador não confunda com uma hiperligação. Evitar a utilização de texto cintilante, animação só por si, de sviam a atenção do utilizador daquilo que é essencial para o acessório.
1
Imagens Nas imagens dever á proceder-se à introdução de uma descrição textual que identifique a imagem. Numa página WWW apenas se podem utilizar imagens com formato .gif ou .jpg, sendo o primeiro geralmente utilizado para ilustrações e o segundo para fotos. Manter os ficheiros das imagens com dimensões reduzidas por forma a manter o mínimo tempo possível para o carregamento da página. Uma imagem que apoia um texto (método aconselhável para ajudar a compreensão do texto) deve aparecer do lado direito, para que o utilizador comece por ler o texto. A consistência, a nív el de imagens, do grafismo e de ícones de navegação utilizados, ao longo de todo o sit e é importante para a sua identificação. Os ícones de navegação deverão ser óbvios, se suscitarem dúvidas é preferível substituí-los por texto, ou acompanhá-los por texto.
Outros O site pode ter um formulário para que os utilizadores possam: enviar uma mensagem ao autor do site; escrever algumas opiniões sobre um tema pré- definido; responder a um questionário sobre um tema; O site pode ter um fórum com um tema pertinente; O site deve ter um pesquisador interno para facilitar a pesquisa; A página do lado esquerdo da frame, ou shared border (o menu) deve estar totalmente observável, deste modo, evita-se de ter a barra de deslocamento vertical;
1
A página do lado direito da frame (a primeira a aparecer) deve e star 90% observável. Ao deslocar para baixo a barra de navegação vê-se informações complementares, tais como o contador ou a data; O site deverá ter um contador na página principal para informar o webmaster e os utilizadores da frequê ncia e quantidade de utilizadores que a consultam; Inserir uma data de produção em cada página de modo a servir de indicador sobre a atualidade da informa ção nela contida;
1
No final da página ini cial deverá estar visível o contacto com ligação direta ao correio eletrónico do respons ável pela produção do site. Evitar finais de páginas das quais não seja possível sair. As barras de navegação devem surgir no final de todas as páginas permitindo redirecionar o utilizador para outras páginas, nomeadamente para a página inicial.
Os dez maiores erros em Web Design Utilização de quadros- Uma página dividida em quadros é muito confusa para os utilizadores, uma vez que os quadros vão contra o modelo fundamental de uma página
web.
Não se pode
ao mesmo tempo marcar a página corrente e voltar a esta, os URL ’s param de trabalhar e as impressões tornam-se difíceis. A previsibilidade da reação dos utilizadores deixa de fazer sentido quando estes não sabem que informação será disponibilizada quando clicam num
link.
Utilização gratuita da tecnologia mais avançada- Não se deve atrair os utilizadores para um site, fazendo menção de que utiliza a última tecnologia web. Pode atrair alguns fanáticos pela informática, mas a maioria dos utilizadores prestam mais atenção aos conteúdos e à possibilidade do site oferecer um bom serviço. Utilizar a melhor e última tecnologia mesmo antes de ser lançada no mercado irá certamente desencorajar os utilizadores: se os seus sistemas forem abaixo enquanto visitam o site, podese apostar que muitos deles não voltarão a consultar o site. A não ser que se comercialize produtos ou serviços na net, torna-se mais favorável aguardar até que se obtenha experiência relativamente à forma mais apropriada de utilizar essas técnicas. Quando apareceu o desktop as pessoas colocaram vinte fontes nos seus documentos, logo há que evitar que aconteça uma situação similar relativamente à web.
Texto, marcas e constantes animações em movimento- Nunca se deve incluir numa página elementos que se movam incessantemente. As imagens em movimento têm um efeito nefasto na visão dos humanos. A página web deve dar ao utilizador alguma paz e serenidade para que este possa efetivamente ler o texto.
URL s complexas- As URL’s nunca devem estar expostas no interface do utilizador, é ’
previsível que os utilizadores tentem descodificar as URL ’s das páginas para perceber a estrutura do site. Os utilizadores tomam esta atitude devido à grande falta de apoio na navegação
e sentido de orientação no
browser
corrente. Então, a URL deve conter diretorias de leitura
acessível aos utilizadores e nomes que reflitam a natureza da informação contida no
site.
Páginas solitárias- Assegurar que todas as páginas incluem uma clara indicação de qual o website
a que pertencem, uma vez que os utilizadores podem aceder a páginas diretamente,
sem ter de passar pela página inicial. Pela mesma razão, todas as páginas deverão ter um
link
para a página inicial, bem como alguma indicação sobre a sua localização dentro da estrutura do site.
Páginas com longos textos corridos- Apenas 10% dos utilizadores, acedem à informação que está disponível para além da que está visível no ecrã quando surge a página. Todos os conteúdos importantes e opções de navegação devem estar no topo da página.
Falta de suporte à navegação - Nunca se deve assumir que os utilizadores sabem tanto acerca do site como o designer. Eles têm sempre dificuldade em encontrar informação, logo necessitam de suporte no que diz respeito à sua estrutura e localização. Começar o design com uma boa compreensão da estrutura espacial da informação e comunicar explicitamente essa estrutura ao utilizador. Disponibilizar o mapa do site para que os utilizadores saibam onde estão e para onde se podem encaminhar. É necessário, também, um bom motor de busca, uma vez que o melhor de navegação nunca é suficiente.
Cores não S tandard nos Links - Os links que não tenham sido utilizados devem ser azuis; os links
para páginas que tenham sido anteriormente visitadas devem ser púrpura ou vermelhos.
Não se deve misturar estas cores, uma vez que a possibilidade de perceber quais os já foram utilizados é uma das poucas ajudas para a navegação e é browsers.
standard
links
que
na maioria dos
A consistência é a chave para ensinar aos utilizadores o significado das cores dos
links.
Informação desatualizada- É necessário contratar um “ jardineir o” web para fazer parte da equipa, torna-se necessário que alguém retire as “ervas daninhas” e plante novamente “flores” enquanto o website se altera, mas a maioria das pessoas preferem criar novos conteúdos em detrimento da manutenção do site. Na prática, a manutenção do site é uma forma barata de realçar o conteúdo do website uma vez que muitas das páginas antigas mantém a sua relevância e devem ter um link para novas páginas. Claro que algumas páginas deverão ser totalmente removidas do server uma vez que se tornam obsoletas.
Downloads demorados- Este erro é referido em último lugar porque muitas pessoas já têm conhecimento sobre o mesmo; e não por ser menos importante. As premissas tradicionais
indicam um máximo de resposta de10 segundos até que os utilizadores percam interesse. Na web, os utilizadores têm sido treinados para suportar tanto sofrimento que se torna aceitável aumentar esse limite para 15 segundos nalgumas páginas.
Tipos de Páginas Páginas Pessoais Objetivos: partilhar informação pessoal Audiência: alunos, colegas, amigos, etc. Páginas Comerciais Objetivos: Proporcionar novos negócios, vender produtos, fornecer informações, etc. Audiência: clientes, etc. Páginas Informativas Objetivos: transmitir informações Audiência: público em gera
VIDA ATIVA
Emprego Qualificado
