1

1.2.4. Organizar a estrutura do site

2

Organizar a estrutura do site A organizao da estrutura do site passa pela

definio das ligaes entre as pginas que o compem

Esta organizao deve ser intuitiva e fcil de compreender pelo utilizador

De acordo com as ligaes que so estabelecidas entre as pginas de um site, podem existir diferentes tipos de estruturas como hierrquico, rede ou a combinao dos dois, com maior ou menor complexidade

3

Organizar a estrutura do site A situao ideal encontrar o ponto de

equilbrio, para evitar que, por um lado, o utilizador efectue muitos cliques para atingir a informao pretendida e, por outro, tenha de escolher uma opo de entre muitas possveis

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

4

1.2.5. Desenhar o esquema de navegao

5

Desenhar o esquema de navegao Desenhar o esquema de navegao de um website

significa definir a sua estrutura de orientao, de forma a facilitar a procura da informao por parte dos utilizadores

Esta estrutura de orientao descrita em documentos designados por blueprints

Os blueprints so documentos criados para descrever as relaes entre as pginas, que permitem, depois, definir e construir o esquema de navegao do website

Existem vrios esquemas de navegao, nomeadamente global, local e contextual (figura 4.18)

6

Desenhar o esquema de navegao

7

Desenhar o esquema de navegao No esquema de navegao global, as hiperligaes

encontram-se, normalmente, em todas as pginas do site e no topo destas

Estas hiperligaes permitem o acesso s principais reas do website

No esquema de navegao local, as hiperligaes encontram-se, habitualmente, no lado esquerdo do site

Estas hiperligaes completam o esquema de navegao global, permitindo o acesso a locais mais especficos dentro da rea em que o utilizador se encontra

8

Desenhar o esquema de navegao No esquema de navegao contextual, as

hiperligaes permitem acessos a locais no abrangidos pelos esquema de navegao global e local

Dentro dos esquemas de navegao referidos anteriormente, podem identificar-se dois tipos de navegao, externa e interna, de acordo com o tipo de hiperligao existente

Designa-se por navegao externa quando as hiperligaes permitem navegar para outras pginas do mesmo site

Designa-se por navegao interna quando as hiperligaes permitem navegar dentro da mesma pgina

9

1.2.6. Definir a estrutura das pginas

10

Definir a estrutura das pginas A definio da estrutura das pginas a

ltima etapa do planeamento de um website antes da sua implementao, publicao e manuteno

Esta etapa pode implicar, inicialmente, a elaborao em papel, do esquema da estrutura das pginas com a disposio dos seus componentes e avaliando as vrias hipteses

nesta etapa que devem ser definidas as resolues das pginas para a sua impresso e visualizao por diferentes equipamentos

11

Definir a estrutura das pginas Relativamente visualizao das pginas, os valores

adoptados devem evitar o aparecimento e a utilizao da barra de deslocamento horizontal

A disposio e as caractersticas dos componentes das pginas devem ser definidas de forma a criar nveis de destaque, de acordo com o grau de importncia destes

Por outro lado, a definio da estrutura das pginas no pode perder de vista o objectivo de obter um equilbrio entre o aspecto esttico, a funcionalidade e o contedo 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 informao, sob a forma de pginas web, atravs da rede, aos computadores clientes

Para implementar um servidor web necessrio instalar software especfico como o IIS da Microsoft para o Windows e o Apache, open source tanto para Linux como para Windows

O quadro 1 mostra a distribuio 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 so

implementados com os softwares Apache ou IIS

O quadro 2 apresenta as caractersticas 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 pginas 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 evoluo para documentos com contedos grficos,

houve a necessidade de melhorar os browsers, para permitir a visualizao e a navegao nessas pginas

Estes browsers so, na sua maioria, desenvolvidos para funcionarem em diferentes sistemas operativos

Estes podem apresentar caractersticas prprias, que lhes conferem maiores ou menores capacidades para a apresentao plena das pginas web, com a incluso de outras tecnologias para alm do HTML

Os browsers mais recentes tm 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 navegao mais rpido, bastante seguro, extremamente simples de utilizar e com suporte alargado para plug-ins disponibilizados por outras empresas

Apresenta alguns problemas com operaes que envolvam a sua ligao com ferramentas da Microsoft

22

Os diferentes browsers

23

Os diferentes browsersMozilla Firefox (continuao)

As principais funes suportadas, pelo Mozilla Firefox, so: Tabbed browsing, que permite abrir vrias pginas 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 no 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 telecomunicaes norueguesa Telenor

um navegador muito rpido e simples de utilizar, sendo indicado para utilizadores profissionais da Internet com necessidades especficas

Este browser inclui bloqueadores de pop-up, tabbed browsing, pesquisas integradas e funes avanadas

Permite a personalizao do seu aspecto atravs de um pequeno nmero 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 funes suportadas pelo Internet Explorer so: Diversas ferramentas que garantem a privacidade na web, o

manuseamento de imagens, a localizao e reproduo de ficheiros multimdia e outras

Tecnologias DHTML, XML, CSS e aplicaes de Java

Integrao com o .NET, facilitando a ligao servidor/cliente

27

Os diferentes browsers

28

Os diferentes browsersMaxthon Browser

O Maxthon Browser (figura 4.24) um browser que permite a personalizao da interface e o seu funcionamento idntico ao Internet Explorer, mas com a funcionalidade tabbed browsing

29

Os diferentes browsers

30

2. Editores de pginas web

Os editores de pginas web so programas desenvolvidos para permitirem ao utilizador criar website e pginas 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) so programas de autor para a criao e edio de websites que permitem ver, na sua janela, o aspecto com que o site vai ser apresentado aps a sua publicao

Estes editores permitem ao utilizador, de uma forma acessvel e sem dominar uma linguagem de programao, desenvolver websites com aparncia profissional

Todo o cdigo necessrio ao funcionamento do website automaticamente gerado sem que o utilizador se aperceba

33

Editores WYSIWYG Os editores WYSIWYG permitem criar desde uma

simples pgina at um website com mltiplas pginas 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) so exemplos deste tipo de editores

Estes editores permitem, de uma forma geral, inserir tabelas, hiperligaes, formulrios, imagens, som, vdeo e efeitos dinmicos; criar pginas dinmicas; 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 pginas web Estes editores so, essencialmente, editores

de texto, embora alguns apresentem funcionalidades acrescidas como a gerao automtica de cdigo, a insero de cdigos de outras linguagens de programao e a pr-visualizao da pgina

A utilizao dos editores de HTML implica um conhecimento prvio da sintaxe desta linguagem

40

Editores HTML Com este conhecimento,

consegue-se um maior controlo sobre a criao das pginas 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) so exemplos de editores para HTML

41

Editores HTML

42

Editores HTML

43

Editores HTML