of 43 /43
1 1.2.4. Organizar a estrutura do site

1.2.4. Organizar a estrutura do site - marcosoares.com · O quadro 1 mostra a distribuição do software de ... o XHTML, o Flash, o HTTP, o HTTPS, o CSS, o JavaScript, os plug-ins

  • Author
    vuthu

  • View
    214

  • Download
    0

Embed Size (px)

Text of 1.2.4. Organizar a estrutura do site - marcosoares.com · O quadro 1 mostra a distribuição do...

  • 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