Unidade 4 Concepção de WEBSITES Fundamentos do planeamento de um website 1.1. Regras para um website eficaz 1.1.1. Sobre o conteúdo 1
Regras para um website eficaz sobre o conteúdo Um website é composto por um conjunto de páginas web Dentro das páginas web podem existir diversos conteúdos apresentados em diferentes formatos como Texto Imagem Vídeo Som Após um estudo prévio, em que são definidos os objectivos e os utilizadores a que se destina, devem ser definidos os conteúdos do website Na definição dos conteúdos é importante ter em atenção a categorização dos conteúdos e a sua condensação 2
Regras para um website eficaz sobre o conteúdo Categorização dos conteúdos O desenvolvimento de um website é efectuado a partir de um tema previamente definido Depois de conhecido o tema, é necessário decompôlo nos diversos conteúdos do site Esta decomposição deve reflectir a categorização dos conteúdos do site, isto é, toda a estrutura lógica dos conteúdos, organizados em diferentes categorias e subcategorias Quando o site resulta de uma adequada categorização dos conteúdos apresenta uma maior flexibilidade, escalabilidade e convertibilidade, que permitem, no futuro, a sua expansão ou renovação 3
Regras para um website eficaz sobre o conteúdo Condensação Os conteúdos a apresentar numa página web devem ser orientados aos utilizadores que constituem o público-alvo a atingir Desta forma, estes conteúdos, para além da sua utilidade, devem ser apresentados de forma condensada, ou seja, simples e directa Estas características permitem não afastar os utilizadores, conduzindo-os à consulta dos conteúdos do site de uma forma agradável 4
1.1.2. Sobre a forma 5
Regras para um website eficaz sobre a forma Consistência e previsibilidade A consistência e a previsibilidade de um website (figuras 4.1 e 4.2) correspondem a um conjunto de características que são definidas para os elementos que constituem as páginas de um website, como o esquema organizativo, os tipos de letra e o tamanho dos tipos de letra Relativamente À consistência, a definição das características permitem, ao utilizador, identificar, de forma mais fácil, as páginas como pertencentes ao mesmo website 6
Regras para um website eficaz sobre a forma 7
Regras para um website eficaz sobre a forma 8
Regras para um website eficaz sobre a forma Quanto à previsibilidade, a definição das características permitem ao utilizador localizar, de uma forma fácil e rápida, os principais elementos que podem estar presentes em todas as páginas, como o menu de navegação, botões e imagens O conjunto das características definidas para os elementos que constituem as páginas pode ser concretizado através da criação de folhas de estilo 9
Regras para um website eficaz sobre a forma Uso racional da tecnologia Inicialmente, o desenvolvimento das páginas web, utilizando apenas o HTML (Hipertext Markup Language), resultava em páginas com conteúdos estáticos O desenvolvimento de páginas com conteúdos dinâmicos e interactivos era feito recorrendo à tecnologia CGI (Common Gateway Interface) Esta tecnologia é suportada pela maioria dos servidores web e define a interface que as aplicações devem utilizar de forma a estender as funcionalidades do servidor web 10
Regras para um website eficaz sobre a forma Uso racional da tecnologia (continuação) A alteração do conteúdo das páginas é efectuado do lado do servidor, isto é, as páginas são reescritas e enviadas para o browser Esta forma leva a um maior processamento do lado do servidor e, por conseguinte, a uma sobrecarga de tráfego na rede, tornando os processos mais lentos Hoje em dia existe um conjunto de novas tecnologias, tanto do lado do servidor como do lado do cliente, que permitem criar conteúdos dinâmicos e interactivos de forma diferente 11
Regras para um website eficaz sobre a forma Uso racional da tecnologia (continuação) Do lado do cliente, a utilização de tecnologias como o Java Applet, o ActiveX e os plug-ins permitem adicionar conteúdos activos às páginas criadas em HTML, mas requerem browsers e plataformas próprias No caso dos Java Applets é necessário existir a máquina virtual Java (JVM Java Virtual Machine) Relativamente aos controlos do ActiveX, estes funcionam principalmente com browsers da Microsoft Quanto aos plug-ins, estes têm de ser descarregados, instalados e actualizados 12
Regras para um website eficaz sobre a forma Uso racional da tecnologia (continuação) Para ultrapassar as limitações apresentadas do lado do cliente pelas tecnologias anteriores na criação de páginas web, foram definidos novos standards pelo W3C (World Wide Web Consortium), como, por exemplo, o DHTML (Dynamic HTML), o XML (Extensible Markup Language) e outros O DHTML é interpretado pelo browser, tal como o HTML, permitindo adicionar interactividade às páginas web sem necessidade de recorrer às tecnologias anteriores Para obter páginas web com esta tecnologia, é necessário utilizar a linguagem HTML, uma linguagem de scripting (por exemplo, o JavaScript) e, em substituição dos atributos de formatação do HTML, as folhas de estilo CSS (Cascading Style Sheets) 13
Regras para um website eficaz sobre a forma Uso racional da tecnologia (continuação) O XML, utilizando o HTML, permite interactivamente trocar dados entre aplicações e organizações e é muito utilizado em websites de comércio electrónico Foi concebido apenas para estruturar o conteúdo dos dados, enquanto que o HTML lhe dá o formato e a apresentação Recentemente, surgiu o XHTML (Extensible Hypertext Markup Language), que combina estas duas tecnologias anteriores, HTML e XML, isto é, consiste nos elementos do HTML 4.01 combinados com a sintaxe do XML 14
Regras para um website eficaz sobre a forma Uso racional da tecnologia (continuação) O W3C (World Wide Web Consortium) é um consórcio internacional criado com o objectivo de tornar universal o acesso à web, através do desenvolvimento de normas e padrões abertos que conduzem à sua evolução e asseguram a interoperacionalidade entre as várias tecnologias Por exemplo, as recomendações do W3C indicam que, caso se usem tecnologias recentes, deve ser criada uma versão alternativa para que todos os utilizadores possam ter acesso e não se criem barreiras tecnológicas 15
Regras para um website eficaz sobre a forma Uso racional da tecnologia (continuação) A figura 4.3 mostra uma visão da infra-estrutura da web e as áreas de incidência do trabalho do W3C A acessibilidade, a internacionalização, a independência da plataforma e dos dispositivos utilizados e a segurança da qualidade são os objectivos transversais presentes nas várias áreas de trabalho do w3c, transformando a arquitectura inicial da web, assente essencialmente no HTML, no URL e no HTTP, numa arquitectura de futuro Desta forma, as tecnologias W3C ajudam a criar uma infra-estrutura da web robusta, escalável e adaptável ao novo mundo da informação 16
Regras para um website eficaz sobre a forma Uso racional da tecnologia (continuação) A figura 4.3 apresenta um modelo em três camadas, que mostra a ligação entre as aplicações web, desenvolvidas pelas várias tecnologias, e a Internet A parte intermédia da figura corresponde às áreas de interesse e às tecnologias desenvolvidas pela W3C Neste esquema, a arquitectura web é descrita em camadas, construídas umas sobre as outras, tal como se apresentam a seguir: 17
Regras para um website eficaz sobre a forma 18
Regras para um website eficaz sobre a forma Uso racional da tecnologia (continuação) URI/IRI, HTTP Web Architectural Principles XML Infosets; RDF Graphs XML, Namespaces, Schemas, XQuery/XPath, XSLT, DOM, XML Base, XPointer, RDF/XML, SPARQL No cimos destas camadas existem seis caixas correspondendo aos grupos de maior actividade da W3C: Interacção, Mobilidade Web, Voz, Serviços Web, Semântica Web e Privacidade 19
Regras para um website eficaz sobre a forma Recurso a imagens A utilização de imagens pode ajudar a tornar as páginas web mais atractivas e legíveis, podendo contribuir para um aumento do número de utilizadores Por outro lado, uma página web que contenha muitas imagens, cujos tamanhos dos ficheiros sejam grandes, torna-se lenta, contribuindo para a diminuição do número de utilizadores Estas limitações impostas pelo tamanho das imagens a utilizar na Internet podem ser minimizadas através da utilização de formatos de imagens mais indicados, como o PNG, JPEG e GIF Estes formatos originam ficheiros mais pequenos que noutros formatos A representação de texto através de imagens deve ser evitada, pois dificulta a pesquisa de informação e o redimensionamento do texto ao ser visualizados nos navegadores 20
Regras para um website eficaz sobre a forma Combinação de cores A utilização da cor é um aspecto bastante importante a ter em atenção no desenvolvimento das páginas web As cores, ao serem seleccionadas, podem transmitir, à partida, muita informação relacionada com o assunto a tratar Estas podem inicialmente aproximar ou afastar os utilizadores da página onde foram aplicadas As cores não devem ser utilizadas só por si, como elemento único na transmissão do significado de uma página, mas associadas a um determinado contexto 21
Regras para um website eficaz sobre a forma Combinação de cores (continuação) As cores e as suas combinações devem ser seleccionadas com cuidado, para criar conjuntos mais harmoniosos Estas combinações podem ser efectuadas segundo um conjunto de regras, tais como cores com o mesmo tom, cores com o mesmo nível de saturação e luminosidade, etc. O fundo de uma página web deve contrastar com o texto e os elementos gráficos da mesma 22
Regras para um website eficaz sobre a forma Uso de frames As frames ou molduras são, em simultâneo, elementos estruturais e de navegação de uma página web São estruturais porque permitem a definição de uma estrutura dividindo o espaço de uma página web num conjunto de espaços rectangulares mais pequenos Este conjunto é também conhecido por frameset que, depois de implementado, consiste num espaço com múltiplas páginas web 23
Regras para um website eficaz sobre a forma Uso de frames (continuação) Cada um dos espaços vai poder conter um documento e para cada um deles terá de existir um ficheiro com a sua informação Por exemplo (figura 4.4), para dividir uma página em três frames diferentes são necessários três ficheiros, correspondentes a cada uma das frames e mais um ficheiro onde é guardada toda a informação da página com as três frames A utilização de frames permite, por exemplo, definir uma como menu, outra como título e outra para apresentação de conteúdos No entanto, a utilização de frames apresenta como dificuldade a impressão da página e o seu carregamento inicial 24
Regras para um website eficaz sobre a forma 25
1.1.3. Modelos de páginas 26
Modelos de páginas Um modelo de página é um conjunto predefinido de formatos de texto e gráficos, a partir do qual se criam as páginas do website Os modelos de páginas web podem incluir tabelas de esquemas, estilos, formatação, gráficos ou outros elementos de página Os programas editores de páginas web do tipo WYSIWYG (What You See Is What You Get) têm um conjunto de páginas-modelo que podem ser seleccionadas, permitindo de uma forma mais fácil a sua criação 27
Modelos de páginas Páginas de abertura A página de abertura corresponde à primeira página que é carregada no browser quando se acede a um website A figura 4.5 mostra um exemplo de uma página de abertura 28
Modelos de páginas Fig. 4.5. Janela do Internet Explorer com a página De abertura do website da Universidade do Porto 29
Modelos de páginas Páginas iniciais A página inicial (figuras 4.6, 4.7, 4.8 e 4.9) corresponde à página que é carregada no browser após a página de abertura, quando se acede a um website Em alguns websites, devido à inexistência da página de abertura, a página inicial e a página de abertura são a mesma Os ficheiros onde são guardados os dados das páginas de abertura ou inicial são, normalmente, designados por default ou index e têm extensões htm ou html No entanto, no caso da utilização de tecnologias mais recentes, podem apresentar outros nomes e extensões 30
Modelos de páginas 31
Modelos de páginas 32
Modelos de páginas 33
Modelos de páginas 34
Modelos de páginas FAQ A página de FAQ (Frequently Asked Questions) (figura 4.10) é utilizada nos websites para apresentar um conjunto de questões e as respectivas respostas As questões são formuladas de acordo com o contexto e o assunto em que se insere o website 35
Modelos de páginas 36
Modelos de páginas Contactos A página de contactos (figura 4.11) permite divulgar dados sobre a empresa, a instituição ou outras entidades Normalmente, os dados referidos nesta página podem ser a direcção, o telefone, o email, o fax e outros 37
Modelos de páginas 38
Modelos de páginas Mapa do site A página Mapa do site (figuras 4.12 e 4.13) mostra aos utilizadores a organização hierárquica das páginas do website, através de uma representação esquemática A partir desta página é possível navegar nas páginas do website, através dos seus links, à semelhança do índice de um livro 39
Modelos de páginas 40
Modelos de páginas 41
Modelos de páginas Livro de visitas A página Livro de visitas (figura 4.14) é constituída por um formulário, que depois de preenchido é enviado para o servidor do website Através do preenchimento do formulário, a entidade pode requerer dados do utilizador e, em alguns casos, comentários ao website 42
Modelos de páginas 43
Modelos de páginas Páginas de conteúdo As páginas de conteúdo correspondem às páginas web utilizadas para divulgar informação relacionada com os objectivos do site, sobre a forma de texto, gráfico, vídeo e/ou som A figura 4.15 mostra um exemplo de uma página de conteúdo 44
Modelos de páginas 45
1.2. Planear o website 46
Planear o website O planeamento do desenvolvimento de um website pode passar por um conjunto de etapas, como estabelecer os seus objectivos, reflectir sobre a audiência, listar as características pretendidas para o site, organizar a estrutura do site, desenhar o esquema de navegação, definir a estrutura das páginas, etc. 47
1.2.1. Estabelecer os seus objectivos 48
Estabelecer os seus objectivos O estabelecimento dos objectivos do website na fase de planeamento permite estruturar todo o seu desenvolvimento Antes da definição dos objectivos, é necessário efectuar um estudo prévio, em que a equipa de desenvolvimento procura conhecer melhor todos os aspectos relacionados com a intenção de criar o website Este estudo prévio deve ser conduzido pelos elementos da equipa responsável pelo desenvolvimento do website, procurando trabalhar em conjunto com os clientes 49
Estabelecer os seus objectivos Através da definição de objectivos é necessário identificar, de forma clara, uma resposta a questões como a sua finalidade, os objectivos principais a atingir, a quem se destina e quais as informações a divulgar Como conclusão da definição dos objectivos, é necessário discriminá-los por ordem da sua importância, devendo ser divulgados a todos os elementos envolvidos 50
1.2.2. Reflectir sobre a audiência 51
Reflectir sobre a audiência A reflexão sobre a audiência do website a desenvolver deve permitir conhecer melhor os potenciais futuros utilizadores A reflexão deve ser efectuada em conjunto com os clientes e procurar respostas para questões como quem são os potenciais utilizadores, que idades têm, qual o seu nível económico, que nível de instrução possuem, quais os seus interesses, quais as suas competências técnicas, quais as actividades desempenhadas e quais os novos utilizadores que podem ser fidelizados 52
Reflectir sobre a audiência Desta reflexão deve resultar uma lista onde são enumerados todos os potenciais utilizadores Sempre que necessário, para a simplificar, esta lista pode ser subdividida em conjuntos definidos com objectivos mais específicos 53
1.2.3. Listar as características e os conteúdos pretendidos para o site 54
Listar as características e os conteúdos pretendidos para o site A elaboração da lista das características pretendidas deve ser efectuada tendo por base os dados das duas etapas anteriores, identificando a marca principal e outras propriedades que caracterizam o site e permitem diferenciá-lo dos demais, ainda que considerados dentro da mesma categoria As figuras 4.16 e 4.17 mostram características próprias do website Google, desde o seu logótipo até à estrutura da sua página 55
Listar as características e os conteúdos pretendidos para o site 56
Listar as características e os conteúdos pretendidos para o site 57
Listar as características e os conteúdos pretendidos para o site Apesar do logótipo estar adaptado a momentos diferentes, o website continua a manter as suas características de marca, que o permitem identificar facilmente A inventariação dos conteúdos pretendidos para o site resulta também dos dados das duas etapas anteriores 58