WEB DESIGN LAYOUT DE PÁGINA

Transcrição

1 LAYOUT DE PÁGINA Parte 2 José Manuel Russo 2005

2 8 Introdução Determinados os Objectivos e a Estrutura do Site, segue-se a segunda fase o momento de definir o aspecto gráfico das páginas que constituirão o Web Site. Como em todas as obras gráficas (uma pintura, um cartaz, uma revista, etc.), a disposição dos elementos na área de representação obedecem a uma certa ordem ou estrutura uma página de Internet não foge a esta regra. Neste Módulo utilizaremos o termo Layout, termo de língua inglesa utilizado no âmbito do Design Gráfico que significa a organização de uma página. A Funcionalidade das páginas é essencial. É neste ponto que se fala em Usabilidade, ou seja como tornar o Site interessante e acessível. Jakob Nielsen tem sido uma das personalidades que mais tem investigado a comunicação na Internet, o que lhe vale o título de guru da Usabilidade. Os Elementos de uma página da Web (Web Page) Quando se consultam diversos Sites, observa-se que existem diversos elementos que variam entre eles apenas no seu grafismo e conteúdo, sendo isso que nos habitua a facilmente navergarmos em qualquer página rapidamente nos integramos no seu Layout. Os Elementos (Assets) que integram qualquer Página em html (linguagem utilizada na programação de páginas para a Web) são: Banner Elemento que se situa a toda a largura do topo das páginas. Imagem estática simples ou complexa (fotográfica ou não) ou mesmo animada, identifica, normalmente o SIte em que se encontra. É muitas vezes explorada para Publicidade ou evidenciar Novidades.

3 9 Barra de Navegação (Navigation Bar) Elemento situado, normalmente, na horizontal imediatamente abaixo do Banner, ou na vertical à esquerda (ou à direita). Permite a navegação no Site, dando acesso à primeira página dos temas principais (às páginas hierarquicamente abaixo da Home Page); pode ainda (numa prática muito comum actualmente) dar acesso a sub-divisões dos diversos temas, embora seja mais simples criar uma Barra de Navegação Secundária. Tecnicamente, as Barras de Navegação mais simples são compostas por Links de Texto (MSN) separados por linhas verticais ou por Botões de Hiperligação (M. Louvre ou Samsung)facilmente criados no Front Page; nas Barras mais complexas utiliza-se a programação em Java script (M. Prado ou Barclays) ou em Macromedia Flash (Macromedia). Botões (Buttons) Agrupados ou dispersos pela página, são elementos de hiperligação a outras páginas ou, como noutro software, executam acções. Também com formas simples ou elaborados, são constituídos por imagens, habitualmente em conjuntos de dois ou três para simular a selecção e/ou o movimento de pressão sobre ele. Marcas (Bullets) À semelhança das marcas de texto, servem para evidenciar items num Site. Em páginas Web recorre-se frequentemente a Bullets gráficos, ou seja, ficheiros de imagem integrados no texto (o Front Page tem uma funcionalidade que torna prática a sua utilização).

4 10 Outros Elementos que integram as páginas, variam com os conteúdos, sáo eles: Texto Escrito directamente nas páginas ou importado a partir de documentos criados num Processador de Texto (como o Microsoft Word). Organizam-se em Títulos, Sub-títulos e Mancha de Texto distinguem-se pelo Tamanho (Size) da Letra, medido em Pontos, e/ ou Tipo de Letra (Font), usando-se habitualmente o Arial ou o Times New Roman (existentes em qualquer computador). A utilização de Tipos artísticos ou outros é de evitar, pois num computador onde esse Tipo não esteja instalado será substituído por Helvetica, Arial ou Times, descaracterizando o Layout da página (se tal factor for fundamental, o texto deverá ser convertido em imagem, o que tornará a página pesada ). Relativamente ao Estilo do Tipo, pode ser Negro (Bold), Itálico (Italic) ou Sublinhado (Underline) em páginas Web não utilize o sublinhado, pois é utilizado nos Hyperlinks (Hiperligações) e só servirá para confundir o utilizador. Imagem São ficheiros do tipo Bitmap a Importar ou Colar na página. Os Bitmaps são em formatos criados especificamente para a Web GIF, JPEG ou PNG (este assunto será desenvolvido na Parte 4 e 5) por constituirem ficheiros de pequena dimensão, com a consequente perda de qualidade. Animação Quando utilizados com objectivos precisos, são elementos que dão uma certa dinâmica às páginas Web. Podem ser programados como bitmaps animados (em formato GIF), em Java script ou em Flash. Neste último caso será necessárioi ter o Shockwave ou o Flash Player (incluído no CD) instalado no computador para serem visualisados. Filme Pequenos filmes também podem ser integrados nas páginas html. O formato mais comum é o AVI, que são de grande qualidade mas demasiado grandes para serem de grande duração ou tamanho. Mais reduzidos são os formatos MPEG, RM da Real, embora de qualidade reduzida, ou o MOV da Apple também estes dois formatos precisam de ter o respectivo Player (Real One e Quick Time) instalado localmente. Som Finalmente, o som é outro elemento que pode ser ouvido como som/música de fundo ou quando activado num Link ou num Botão para o executar. O formato mais comum é o WAV, que são de grande qualidade mas demasiado grandes para serem de grande duração. Mais reduzidos são os formatos MIDI (em que a música é sintetizada), MPEG e o recente MP3.

5 11 Regras da Usabilidade Definidos os objectivos do Web Site, põe-se a questão de como gerir os elementos a integrar as páginas do site. É neste ponto que se fala em Funcionalidade ou na sua Usabilidade, ou seja como tornar o Site interessante e acessível. Jakob Nielsen tem contribuído neste campo com o assinalar de sucessivos erros cometidos na criação de Web Sites. Em 1996, Nielsen indicava como os 10 erros a evitar: Uso de Frames. Técnica de construção de páginas com janelas independentes, que podem confundir o utilizador. Uso gratuito de tecnologia de topo. A utilização das últimas novidades de programação não fazem sentido se não tiverem um objectivo definido. Rolamento de texto e animações constantes. Evitar o rolamento de texto devido a uma linha ou uma imagem a mais. As animações constantes são um elemento mais de distracção do que de chamada de atenção. URL s complexas. Endereços demasiado longos de uma página (não devendo exceder os 75 caracteres) é um convite a não consultá-la. Páginas órfãs. Ou seja páginas que, de repente, deixam de ter ligação com outras. Páginas longas. Páginas com textos longos ou carregadas de imagens que nunca mais acabam são desmotivadoras da consulta hoje em dia as pessoas aborrecem-se rapidamente. Falta de suporte de navegação. Cada página deve incluir um sistema de navegação que permita aceder a outras páginas. Cores de Links não convencional. Os internautas habituaram-se a determinados códigos (como o azul e o vermelho) que, se forem alterados, apenas lançarão a confusão. Informação desactualizada. Se uma informação já não tiver sentido, deve ser retirada ou actualizada. Caso contrário, apenas servirá para afugentar uma próxima visita. Tempos de download longos. As páginas deverão ser construídas de acordo com o perfil (tecnológico e etário) dos utilizadores, nunca devendo o tempo de composição de uma página exceder os 10 segundos (outros autores consideram este valor exagerado e preferem apontar para os 20 segundos).

6 12 Salientem-se ainda estas regras (1999): Colocar o Logotipo e Nome da empresa em cada página Num site com mais de 100 páginas, incluir um motor de procura Títulos e sub-títulos simples Estruturar a página para facilitar a sua consulta Utilizar Hipertexto para melhorar a estrutura Usar fotos de produtos moderadamente Reduzir as imagens até uma dimensão inteligível Títulos com Links Páginas importantes com acessibilidade a deficientes Fazer igual a Todos ou seja, não inovar por inovar. Outros conselhos podem ser consultados no Site de Nielsen em ou do recém-criado Grupo Português de Profissionais da Usabilidade em Definir o Layout da Página Web Agora que se definiram regras de Usabilidade, é chegado o momento de criar uma Estrutura organizadora dos elementos/conteúdos a inserir nas páginas Web. Antes de passar ao desenho da página, pense para que Resolução de Écran vai criar a sua Web hoje em dia, há a tendência de projectar para resoluções elevadas (como1200x1600) mas não se esqueça do perfil do público alvo em meios de parcos recursos económicos ou onde pouco se despende na aquisição do último grito da informática, deve-se apostar numa resolução de 800x600 pixels, senão mesmo 640x480 (que já não são habituais, mas...). Os exemplos que aqui serão dados baseiam-se nessa resolução ainda muito comum: 800x600. Como se verá nos dois exemplos a seguir apresentados, qualquer paginação (seja de uma revista, livro ou mesmo página web) a colocação de textos, imagens, barras, etc. deve assentar numa estrutura definida por linhas horizontais e verticais uma matriz ou retícula igual para todas as páginas (pelo menos do mesmo nível hierárquico), conforme se ilustra com estes esboços/estudos. Se observar uma página de Internet verificará que o texto e as imagens estão normalmente alinhados em colunas e em linhas esta estrutura é fácil de perceber: os programas dedicados à criação de páginas (como o Microsoft Front Page ou o Macromedia Dreamweaver) exigem a criação de tabelas para colocação dos elementos de texto e de imagem nas suas células e poder alinhá-los uns ao lado dos outros.

7 13 Observem-se as páginas de um site (muito interessante, não só pelo conteúdo mas também pelo grafismo) sobre o Vale dos Reis no Egipto A Estrutura (marcada com linhas vermelhas) das duas páginas é diferente porque são de diferentes hierarquias, mas apresentam em comum a zona do banner (dividida ao meio por Launch Atlas ). A primeira página organiza-se um pouco irregularmente em 3 colunas de dimensão diferente e 5 linhas, estando duas delas vazias para criar espaço entre os conteúdos (deixá-los respirar ). As duas colunas ou bandas laterais devem-se à resolução de visualização. A segunda página é bastante simples mas funciona bastante bem a divisão em duas colunas assimétricas evitam que o texto, que ocupa cerca de 75% da largura, sature o écran e fica equilibrado pela imagem à esquerda.

8 14 Outro exemplo, neste caso o Site comercial da Samsung : A Estrutura das duas páginas também é diferente por serem de diferentes hierarquias, e apresentam em comum a zona do banner. A primeira página utiliza 3 colunas assimétricas e 5 linhas, sendo algumas células suddivididas (marcadas por linhas azuis) a coluna mais estreita fica equilibrada por estar mais preenchida. A segunda página, porque precisa de apresentar os diversos produtos, divide-se em colunas iguais, e a sua coluna esquerda (destinada à navegação) é igual (graficamente) à da primeira. Neste caso, a coluna mais à direita deve-se à resolução de visualização o programador preferiu alinhar a página à esquerda.

9 15 Exercício Vamos conceber uma Estrutura, esboçando o Layout de uma página pelo processo tradicional de lápis e papel, tendo já em consideração o alinhamento dos elementos que vão constituir a página modelo: Divida a superfície da folha em linhas horizontais e verticais, a toda a altura e toda a largura (passando mesmo por cima de outros elementos), considerando os limites dos diferentes componentes da página; Em seguida elimine com uma borracha as partes lineares que se sobrepõem aos elementos, ou faça sobressair as linhas que vão ficar a definir a estrutura da página. Este processo tradicional pode ser transposto na mesma metodologia para o programa de concepção de páginas para a Web assim: Abra o Front Page ; Numa página nova, insira uma tabela com tantas linhas e tantas colunas quantas as desenhadas inicialmente no esboço; Nota: se pretender que a sua página fique alinhada ao centro quando a resolução do écran é superior à prevista, acrescente 2 ao número de colunas (como acontece no site do Vale dos Reis). Pode igualmente inserir colunas (que serão estreitas) para distanciar o texto ou as imagens dos limites da sua área de inserção (como se fossem margens de uma página). Formate as colunas, definindo a largura prevista para cada uma no esboço utilize os valores em pixels, considerando que a página terá, por exemplo, a largura total de 775 pixels; Agora, para eliminar as linhas intermédias, seleccione as células que pretende fundir, clique com o botão direito do rato (sobre uma das células seleccionadas) e escolha a opção Unir Células (Merge Cells) as células seleccionadas convertem-se numa só. Por exemplo: seleccione a primeira linha e aplique a união das células, repita para a segunda linha sem a célula da esquerda e termine com a união das células da coluna esquerda. Guarde a página com o nome modelo_wd.htm na pasta criada para esta acção.