Projeto de Sites da Web

Transcrição

1 Introdução Projeto de Sites da Web Mário Meireles Teixeira UFMA DEINF Hipertexto É um documento composto por um conjunto de nós contendo texto, imagens, sons e ações, a interligados entre si e formando uma complexa teia de associações não-seq seqüenciais, enciais, que pode ser percorrida livremente pelos usuários. Hipermídia = Hipertexto + Multimídia A Web é um repositório rio de informações hipermídia Web Site Local da Internet com nome e endereço o conhecidos, que contém m informações sobre um determinado assunto, indivíduo, duo, instituição, empresa etc. 2 Utilização de Hipertexto Vantagens: Fácil navegação de um documento para outro, através dos links; Facilidade de criação de novos links quando necessário; Força a o autor a organizar melhor a informação; Modularidade das informações; Eliminação de redundância de informação; O documento não se limita a um único tipo de mídia m ou forma de publicação; Facilita a colaboração entre autores distantes fisicamente. Utilização de Hipertexto Desvantagens: É mais trabalhoso criar um documento em hipertexto; É necessário manter os links atualizados ao longo do tempo; Em documentos complexos, o leitor pode ter a sensação de estar perdido; Há a possibilidade de distração do leitor, devido às inúmeras possibilidades de navegação oferecidas. 3 4

2 O Desafio do Projeto de Sites A metáfora de interação dos leitores com uma página p HTML é diferente da sua experiência com livros. Os usuários não se limitam a olhar a informação na web, eles interagem com a mesma Algum desafios para os web designers: Como subdividir, organizar e apresentar a informação; É necessário fornecer ao leitor ferramentas de busca e navegação, assim como dicas de onde ele está; Qual o tamanho ótimo para uma página; p Que tipo(s) de mídia m utilizar e em que combinação; É importante conhecer a audiência do site e suas expectativas. Fases de Projeto No projeto de sites da web, pode-se encontrar as seguintes fases: Determinação dos objetivos do site e o retorno esperado; Identificação da audiência do site; Determinação do tipo de informação que se quer armazenar (escopo); Projeto do site: a metáfora de navegação utilizada; Projeto das páginas: p o visual do site. 5 6 Atividade Páginas Independentes Definição do site a ser construído por cada equipe... Páginas web diferem das páginas p de um livro fundamentalmente num aspecto: os hyperlinks permitem o acesso a elas sem nenhum preâmbulo, logo páginas p web precisam ser mais independentes que as páginas p de um livro As páginas p precisam conter informações para situar o leitor: Quem Sempre informe ao leitor qual a fonte da informação, quem está falando com ele; O Quê O documento deve ter um título t tulo explicativo que resuma seu contéudo udo.. Este título t tulo também m se tornará o texto dos bookmarks feitos pelos usuários; Quando A informação na web é bastante volátil, logo é importante informar a data de criação ou revisão de um documento; Onde Uma página p deve informar onde está localizada, a que organização pertence, qual a sua vizinhança. a. 7 8

3 Páginas Independentes Uma página p web precisa, no mínimo, m de: Um título t tulo informativo (que se tornará também m um bookmark) A identidade do seu criador (autor ou instituição) Uma data de criação ou revisão Um link para uma página p anterior ou menu Um link para a home page do site (em suas principais páginas) p Essas pequenas dicas podem ajudar muito no sentido de construir um site que possa ser facilmente compreendido pelos seus usuários Projeto de Interface centrado no Usuário As interfaces gráficas surgiram para dar aos usuários um controle maior sobre as tarefas realizadas no computador Uma boa interface deve se adaptar às necessidades dos usuários e não o contrário rio Por isso é tão importante saber para quem se está projetando o site, conhecer sua audiência Os seguintes aspectos devem ser levados em consideração durante o projeto: [ Navegação Projeto do Site Elementos gráficos e editoriais, além m da presença a física f da obra, dão ao leitor a sensação de contexto em materiais impressos Na web, desaparece a sensação física da informação e os links fornecem pouca informação sobre onde está o usuário Páginas web devem fornecer ao leitor um conjunto de dicas sobre o contexto em que se encontram e a organização da informação, pois somente uma pequena parte do site é vista a cada vez pelo leitor Hyperlinks conferem flexibilidade ao web designer,, mas podem desorientar o usuário Top menus Barras de botões Botões Back and Forward Botões Previous and Next [ O projeto do site irá determinar sua estrutura organizacional, ou seja, como arranjar seu conteúdo a fim de melhor atender às necessidades dos usuários Lembre-se: o objetivo principal de um site é prestar serviços à sua audiência Pode ser um erro tático t tico utilizar um site meramente para descrever a estrutura de uma empresa ou instituição Exemplos: [HU Yale] ] [HU[ UFMA] 11 12

4 Subdivisão da Informação Sem uma organização lógica l e coerente da informação, um site não será bem compreendido Sabe-se que o ser humano consegue guardar cerca de quatro a sete unidades discretas de informação em sua memória de curto prazo Portanto, pequenas porções de informação são mais fáceis de lembrar e manipular do que longos tratados Passos básicos b para organizar a informação de um site: Divida o conteúdo em pequenas unidades lógicas; l Estabeleça a uma hierarquia entre as unidades; Use a hierarquia para estruturar relações entre as unidades; Construa o site segundo a estrutura de sua informação; Analise o site sob o ponto de vista estético tico e funcional. Subdivisão da Informação - Menus Uma ferramenta poderosa para a organização de um site é a utili- zação de menus. Os menus rela- cionam os grandes tópicos t do site com suas unidades individuais de informação Tome cuidado para evitar: Menus do tipo lista de supermercado Hierarquias de menus muito profundas Estrutura de um Site Organização Seqüencial encial Embora na web seja possível ligar qualquer coisa a qualquer coisa, devemos evitar essa tentação Sem uma organização lógica l do site, os usuários irão procurar a informação de que precisam em outro lugar Formas principais de organização: Seqüências Hierarquias Teias (Webs( Webs) É um dos tipos mais comuns e tradicionais de organização O projeto consiste em um conjunto de páginas p organizadas em uma seqüência pré-definida pelo autor do texto Cada documento aborda uma parte do assunto principal e tem links para o nón anterior e o próximo, com alguns possíveis desvios da narrativa O padrão de leitura (navegação) é similar ao de um livro, com capítulos, seções e sub-se seções. O leitor pode, às s vezes, querer imprimir o conteúdo do site Recomendado para a apresentação de conteúdos extensos, como: apostilas, manuais, listas indexadas, glossários, informação cronológica etc

5 Organização Hierárquica rquica Muito utilizada para a organização de conjuntos complexos de informação Impõe uma disciplina maior ao autor do site O padrão de navegação se baseia em uma seqüência de caminhos que partem de um ponto comum, a página p principal do site O leitor, então, percorre a informação segundo uma hierarquia top-down Organização em Teia Pode ser muito difícil de entender ou prever Impõe poucas restrições aos relacionamentos entre as páginasp Para que um conjunto de informação possa ser organizado desta forma, é preciso que ele seja altamente uniforme, com tópicos t e sub-tópicos bem definidos A audiência desse tipo de site é especializada e deve ser treinada para esta forma de interação Destina-se se à elaboração de manuais de procedimentos, descrições de casos médicos, m listas de cursos etc Comparação entre as formas de organização Diagrama do Site Um bom diagrama do site, de preferência feito em uma grande folha de papel, é uma excelente forma de documentar o projeto e a sua evolução Os três principais padrões de organização de sites, considerando- se a linearidade da narrativa vs. a complexidade do conteúdo 19 20

6 Temas de Projeto de Sites Atividade Para o tema escolhido anteriormente, defina a estrutura do site e a organização da informação... [ Elementos de um Site Projeto de PáginasP Home pages Menus Guias Novidades Busca Informações de contato e feedback FAQs Referências Páginas de erro [ Um bom design de página p pode conferir a um site maior clareza, legibilidade, organização e confiança a por parte dos usuários A finalidade principal do design gráfico é criar uma hierarquia visual forte e consistente, logicamente organizada, que dirija a atenção dos usuários à informação que se quer veicular 23 24

7 Projeto de PáginasP Contraste é essencial para capturar a atenção dos usuários Uma página p constituída apenas de texto torna-se monótona e indiferenciada Uma página p com excesso de cores, fontes ou gráficos também afasta a maioria dos usuários Um bom contraste visual provê um senso de organização Recomendações de Projeto de Páginas Estabeleça a uma hierarquia visual É preciso que a página p tenha uma hierarquia visual forte e consistente, que enfatize os elementos importantes Guie o olhar do leitor A parte superior de qualquer página p é a mais importante, especialmente no caso de informações lidas na tela do computador. Atenção aos primeiros 10 cm! Distrações gráficas Evite gráficos bonitinhos e desnecessários. Cuidado também m com letras muito grandes e excesso de fontes Consistência é fundamental Crie um layout básico b para o seu site e seja fiel a ele Dimensões da PáginaP Design Grids Antes de codificar um site, deve-se conceber um layout básico para as páginas p do mesmo, um design grid Este deverá delimitar a área reservada para: ilustrações barras de navegação títulostulos subtítulos tulos texto... Seu objetivo é facilitar a montagem de uma nova página, p sem que se perca tempo pensando no layout da mesma, além m de conferir consistência, equilíbrio e previsibilidade ao site como um todo 27 28

8 Design Grids Cabeçalhos: alhos: identidade do site Identificação da organização ou instituição responsável pelo site Indicação da posição daquela página p no contexto geral do site Links de navegação para as principais seções do site [ Rodapés: proveniência Tabelas O cabeçalho alho da página p deve fornecer infor- mações úteis para a localização do usuário: Os rodapés s também m são importantes na com- cepção de uma página p e podem conter infor- mações como: Origem da páginap Data de criação/atualiza ão/atualização Autor Forma de contato Links para as principais seções do site [ As tabelas servem para a apresentação de informação em forma tabular São mais utilizadas, porém, para compor o layout das páginas, p sendo empregadas para o posicionamento de textos e gráficos Podem ter largura absoluta ou relativa [

9 Frames Também m são utilizados para controlar o layout das páginasp Permitem o carregamento de múltiplos m documentos HTML simultaneamente São utilizados em sites cujos conteúdos mudam com freqüência e que exigem flexibilidade na atualização das páginasp Muitas vezes, são usados para compor páginas p de índice que referenciam uma página p principal [ Atividade Defina o projeto das páginas p do seu site