Organizar a estrutura do site

Transcrição

1 Organizar a estrutura do site 1

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 2

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 3

4 Desenhar o esquema de navegação 4

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) 5

6 Desenhar o esquema de navegação 6

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 7

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 8

9 Definir a estrutura das páginas 9

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 10

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 11

12 1.3. Conceber websites para diferentes suportes Servidores Linux e Windows 12

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 13

14 Servidores Linux e Windows Quadro 1 Servidor Windows Linux Apache IIS Xitami OmniHTTPd 14

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 15

16 Servidores Linux e Windows 16

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 17

18 Servidores Linux e Windows 18

19 Os diferentes browsers 19

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 20

21 Os diferentes browsers Mozilla 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 21

23 Os diferentes browsers Mozilla 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 23

24 Os diferentes browsers Opera 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 24

26 Os diferentes browsers Internet 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 26

28 Os diferentes browsers Maxthon 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 28

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 30

31 2.1. Editores WYSIWYG 31

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 32

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 33

34 Editores WYSIWYG 34

38 2.2. Editores HTML 38

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 39

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 40

41 Editores HTML 41

42 Editores HTML 42

43 Editores HTML 43