58
1 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

Unidade 4 – Concepção de WEBSITES · 2008-01-30 · Recentemente, surgiu o XHTML (Extensible Hypertext Markup Language), que combina estas duas tecnologias anteriores, HTML e

Embed Size (px)

Citation preview

1

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

2

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

3

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

4

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

5

1.1.2. Sobre a forma

6

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

7

Regras para um website eficaz – sobre a forma

8

Regras para um website eficaz – sobre a forma

9

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

10

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

11

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

12

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

13

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)

14

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

15

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

16

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

17

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:

18

Regras para um website eficaz – sobre a forma

19

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

20

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

21

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

22

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

23

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

24

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

25

Regras para um website eficaz – sobre a forma

26

1.1.3. Modelos de páginas

27

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

28

Modelos de páginasPá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

29

Modelos de páginas

Fig. 4.5. Janela do Internet Explorer com a páginaDe abertura do website da Universidade do Porto

30

Modelos de páginasPá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

31

Modelos de páginas

32

Modelos de páginas

33

Modelos de páginas

34

Modelos de páginas

35

Modelos de páginasFAQ

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

36

Modelos de páginas

37

Modelos de páginasContactos

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 e-mail, o fax e outros

38

Modelos de páginas

39

Modelos de páginasMapa 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

40

Modelos de páginas

41

Modelos de páginas

42

Modelos de páginasLivro 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 web-site

Através do preenchimento do formulário, a entidade pode requerer dados do utilizador e, em alguns casos, comentários ao website

43

Modelos de páginas

44

Modelos de páginasPá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

45

Modelos de páginas

46

1.2. Planear o website

47

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.

48

1.2.1. Estabelecer os seus objectivos

49

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”

50

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

51

1.2.2. Reflectir sobre a audiência

52

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

53

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

54

1.2.3. Listar as características e os conteúdos pretendidos para o site

55

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

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

58

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