1

1.2.4. Organizar a estrutura do site

2

Organizar a estrutura do site A organização da estrutura do site passa pela

definição das ligações entre as páginas que o compõem

Esta organização deve ser intuitiva e fácil de compreender pelo utilizador

De acordo com as ligações que são estabelecidas entre as páginas de um site, podem existir diferentes tipos de estruturas como hierárquico, rede ou a combinação dos dois, com maior ou menor complexidade

3

Organizar a estrutura do site A situação ideal é encontrar o ponto de

equilíbrio, para evitar que, por um lado, o utilizador efectue muitos cliques para atingir a informação pretendida e, por outro, tenha de escolher uma opção de entre muitas possíveis

Desta forma, o tamanho do site pode influenciar de forma decisiva a organização da sua estrutura e, por isso, esta deve ser ponderada com flexibilidade

4

1.2.5. Desenhar o esquema de navegação

5

Desenhar o esquema de navegação Desenhar o esquema de navegação de um website

significa definir a sua estrutura de orientação, de forma a facilitar a procura da informação por parte dos utilizadores

Esta estrutura de orientação é descrita em documentos designados por blueprints

Os blueprints são documentos criados para descrever as relações entre as páginas, que permitem, depois, definir e construir o esquema de navegação do website

Existem vários esquemas de navegação, nomeadamente global, local e contextual (figura 4.18)

6

Desenhar o esquema de navegação

7

Desenhar o esquema de navegação No esquema de navegação global, as hiperligações

encontram-se, normalmente, em todas as páginas do site e no topo destas

Estas hiperligações permitem o acesso às principais áreas do website

No esquema de navegação local, as hiperligações encontram-se, habitualmente, no lado esquerdo do site

Estas hiperligações completam o esquema de navegação global, permitindo o acesso a locais mais específicos dentro da área em que o utilizador se encontra

8

Desenhar o esquema de navegação No esquema de navegação contextual, as

hiperligações permitem acessos a locais não abrangidos pelos esquema de navegação global e local

Dentro dos esquemas de navegação referidos anteriormente, podem identificar-se dois tipos de navegação, externa e interna, de acordo com o tipo de hiperligação existente

Designa-se por navegação externa quando as hiperligações permitem navegar para outras páginas do mesmo site

Designa-se por navegação interna quando as hiperligações permitem navegar dentro da mesma página

9

1.2.6. Definir a estrutura das páginas

10

Definir a estrutura das páginas A definição da estrutura das páginas é a

última etapa do planeamento de um website antes da sua implementação, publicação e manutenção

Esta etapa pode implicar, inicialmente, a elaboração em papel, do esquema da estrutura das páginas com a disposição dos seus componentes e avaliando as várias hipóteses

É nesta etapa que devem ser definidas as resoluções das páginas para a sua impressão e visualização por diferentes equipamentos

11

Definir a estrutura das páginas Relativamente à visualização das páginas, os valores

adoptados devem evitar o aparecimento e a utilização da barra de deslocamento horizontal

A disposição e as características dos componentes das páginas devem ser definidas de forma a criar níveis de destaque, de acordo com o grau de importância destes

Por outro lado, a definição da estrutura das páginas não pode perder de vista o objectivo de obter um equilíbrio entre o aspecto estético, a funcionalidade e o conteúdo informativo das mesmas

12

1.3. Conceber websites para diferentes suportes

1.3.1. Servidores Linux e Windows

13

Servidores Linux e Windows Um servidor web ou servidor http é um computador

que disponibiliza informação, sob a forma de páginas web, através da rede, aos computadores clientes

Para implementar um servidor web é necessário instalar software específico como o IIS da Microsoft para o Windows e o Apache, open source tanto para Linux como para Windows

O quadro 1 mostra a distribuição do software de servidor web, de acordo com as plataformas suportadas

14

Servidores Linux e Windows

OmniHTTPdXitami

IISApache

LinuxWindowsServidor

Quadro 1

15

Servidores Linux e Windows A maioria dos servidores web são

implementados com os softwares Apache ou IIS

O quadro 2 apresenta as características e funcionalidades de cada um destes

16

Servidores Linux e Windows

17

Servidores Linux e Windows As figuras 4.19 e 4.20 representam,

respectivamente, as janelas do browser Internet Explorer com as páginas abertas a partir de um servidor Apache e de um servidor IIS

18

Servidores Linux e Windows

19

1.3.2. Os diferentes browsers

20

Os diferentes browsers Inicialmente, a Internet funcionava apenas com documentos de

texto criados utilizando o hipertexto Com a evolução para documentos com conteúdos gráficos,

houve a necessidade de melhorar os browsers, para permitir a visualização e a navegação nessas páginas

Estes browsers são, na sua maioria, desenvolvidos para funcionarem em diferentes sistemas operativos

Estes podem apresentar características próprias, que lhes conferem maiores ou menores capacidades para a apresentação plena das páginas web, com a inclusão de outras tecnologias para além do HTML

Os browsers mais recentes têm de interpretar as tecnologias como o ActiveX, o DHTML, o XML, o XHTML, o Flash, o HTTP, o HTTPS, o CSS, o JavaScript, os plug-ins e os Java Applets

21

Os diferentes browsersMozilla Firefox

O Mozilla Firefox (figura 4.21) é o browser de navegação mais rápido, bastante seguro, extremamente simples de utilizar e com suporte alargado para plug-ins disponibilizados por outras empresas

Apresenta alguns problemas com operações que envolvam a sua ligação com ferramentas da Microsoft

22

Os diferentes browsers

23

Os diferentes browsersMozilla Firefox (continuação)

As principais funções suportadas, pelo Mozilla Firefox, são: Tabbed browsing, que permite abrir várias páginas na

mesma janela, mas em separadores diferentes

Controlos de janelas pop-up, que permitem activar ou desactivar janelas pop-up

Gestor de cookies, que permite aceitar ou não cookies

Gestor de imagens, que permite activar ou desactivar o carregamento de imagens

Gestor de downloads, que permite organizá-los a partir de uma única janela

24

Os diferentes browsersOpera

O Opera (figura 4.22) é um browser desenvolvido, em 1994, pelos pesquisadores Jon Stephenson von Tetzchner e Geir Ivarsoy, da empresa de telecomunicações norueguesa Telenor

É um navegador muito rápido e simples de utilizar, sendo indicado para utilizadores profissionais da Internet com necessidades específicas

Este browser inclui bloqueadores de pop-up, tabbed browsing, pesquisas integradas e funções avançadas

Permite a personalização do seu aspecto através de um pequeno número de cliques

25

Os diferentes browsers

26

Os diferentes browsersInternet Explorer

O Internet Explorer (figura 4.23) foi desenvolvido pela Microsoft, em 1995, e é um dos browsers mais divulgados entre os utilizadores da Internet

As principais funções suportadas pelo Internet Explorer são: Diversas ferramentas que garantem a privacidade na web, o

manuseamento de imagens, a localização e reprodução de ficheiros multimédia e outras

Tecnologias DHTML, XML, CSS e aplicações de Java

Integração com o .NET, facilitando a ligação servidor/cliente

27

Os diferentes browsers

28

Os diferentes browsersMaxthon Browser

O Maxthon Browser (figura 4.24) é um browser que permite a personalização da interface e o seu funcionamento é idêntico ao Internet Explorer, mas com a funcionalidade tabbed browsing

29

Os diferentes browsers

30

2. Editores de páginas web

Os editores de páginas web são programas desenvolvidos para permitirem ao utilizador criar website e páginas web. Existem editores do tipo WYSIWYG ou HTML

31

2.1. Editores WYSIWYG

32

Editores WYSIWYG Os editores WYSIWYG (What You See Is What You

Get) são programas de autor para a criação e edição de websites que permitem ver, na sua janela, o aspecto com que o site vai ser apresentado após a sua publicação

Estes editores permitem ao utilizador, de uma forma acessível e sem dominar uma linguagem de programação, desenvolver websites com aparência profissional

Todo o código necessário ao funcionamento do website é automaticamente gerado sem que o utilizador se aperceba

33

Editores WYSIWYG Os editores WYSIWYG permitem criar desde uma

simples página até um website com múltiplas páginas relacionadas entre si

O FrontPage (figura 4.25), o Dreamweaver (figura 4.26), o Easy Website Pro (figura 4.27), o BlueVoda (figura 4.28) e o CoffeeCup (figura 4.29) são exemplos deste tipo de editores

Estes editores permitem, de uma forma geral, inserir tabelas, hiperligações, formulários, imagens, som, vídeo e efeitos dinâmicos; criar páginas dinâmicas; utilizar folhas de estilo e publicar o site na web

34

Editores WYSIWYG

35

Editores WYSIWYG

36

Editores WYSIWYG

37

Editores WYSIWYG

38

2.2. Editores HTML

39

Editores HTML Os editores HTML podem ser classificados

como ferramentas de autor de páginas web Estes editores são, essencialmente, editores

de texto, embora alguns apresentem funcionalidades acrescidas como a geração automática de código, a inserção de códigos de outras linguagens de programação e a pré-visualização da página

A utilização dos editores de HTML implica um conhecimento prévio da sintaxe desta linguagem

40

Editores HTML Com este conhecimento,

consegue-se um maior controlo sobre a criação das páginas web

O Bloco de notas (figura 4.30), o HotDog (figura 4.31), o Visual Workshop (figura 4.32), o Crismon Editor (figura 4.33), o Site Builder (figura 4.34), o tsWebEditor (figura 4.35) e o LightPad (figura 4.36) são exemplos de editores para HTML

41

Editores HTML

42

Editores HTML

43

Editores HTML