<<<

            ● Estruturação das páginas em HTML  [\\]

Uma página é constituída por diferentes suportes de informação, tais como textos, imagens e sons. Estes elementos podem ser obtidos a partir de diversas fontes de informação e utilizando-se os recursos de hardware e software ao dispor de quem pretende criar algo para colocação na vasta rede de comunicações que é a Internet. E para que o produto do trabalho possa ser acedido de qualquer parte, é necessário encontrar um servidor, onde alojar o material, e dar a conhecer o respectivo endereço. De outro modo, todo o trabalho produzido não terá qualquer utilidade.

Quer se trate de uma simples página pessoal, quer de módulos informativos, persuasivos, lúdicos ou didácticos, a realização passa pelas seguintes etapas:

              1º - Determinação do tema a desenvolver;

              2º - Determinação dos objectivos e conteúdos específicos a inserir;

              3º - Pesquisa de documentos:
                           - textos informativos;
                           - texto icónicos (imagens, esquemas, etc.);
                           - actividades de aplicação e consolidação de conhecimentos.

              4º - Estruturação (no papel) do módulo a desenvolver:
                           - fluxograma;
                           - sistema de navegação (links das páginas).

             5º - Passagem das informações verbais e icónicas para formato digital, ou seja, passagem de toda a informação para o computador;

              6º - Criação das páginas para a Internet de acordo com o fluxograma previamente definido;

              7º - Experimentação, reavaliação e eventual correcção de todo o trabalho produzido;

              8º - Colocação num servidor e respectiva divulgação.

Se as três primeiras etapas não necessitam de esclarecimentos, o mesmo não poderemos dizer relativamente à quarta. Fazemos aqui referência a dois elementos importantes para a correcta estruturação de um módulo: fluxograma e links das páginas.

Fluxogramas são esquemas estruturados, que nos permitem facilmente visualizar de que modo estão interligados os diferentes componentes do programa.

Importa aqui referir que designamos por «objecto» tudo quanto é visualizado no ecrã. A própria página é em si um objecto, contendo, por sua vez, outros objectos, tais como textos e imagens. E os próprios textos podem conter outras unidades que funcionam como objectos, quando apresentam propriedades específicas. Por exemplo, as palavras sublinhadas e sobre as quais o cursor muda automaticamente de configuração são objectos específicos, designados por hotwords, isto é, palavras com propriedades interactivas, na medida em que clicando-se sobre elas se obtêm determinadas reacções, sendo também conhecidas como »hiperlinks».

Os hiperlinks ou hotwords constituem janelas de acesso a outras informações. Distinguem-se dos objectos passivos. Num programa multimédia, produzido, por exemplo, com o Toolbook Instructor ou com o Macromedia Director, os hiperlinks podem ser assinalados de diferentes maneiras. Mediante alteração do cursor, que pode assumir diferentes aspectos, o utilizador sabe que está perante uma forma de acesso a outras informações, devendo clicar sobre a palavra assinalada. Frequentemente, além do sublinhado, no caso de textos ou segmentos de texto ou palavras, o cursor assume a configuração de uma mão com o dedo indicador esticado, significando para o utilizador que deverá ou poderá clicar sobre essa zona.

Todos estes conceitos são importantes, quer quando trabalhamos na área da programação por objectos, quer quando procuramos simplesmente construir páginas no formato HTML para a Internet. Daí que a estruturação de todo o módulo deva ser prevista no fluxograma.

 

A estruturação é tanto mais complexa quanto maior o número de pontos que se encontrem interligados, fornecendo ao utilizador um elevadíssimo número de itinerários de navegação. No esquema da figura 6, encontramos representada uma rede em que todas as «ilhas» de informação se encontram ligadas. O utilizador pode escolher o itinerário que pretender. Pode seleccionar A, B, C, D, E, F; mas pode alterar estas ordem, criando outros itinerários diferentes, do mesmo modo que pode alterar o número de pontos a visitar.

Fig. 6: Exemplo de uma rede de informação em que todos os pontos se encontram interligados.

No esquema apresentado, a navegação permite apenas o acesso a seis nódulos informativos. Com tão reduzido número de hipóteses, não há o risco do utilizador se perder no hiperespaço.

Se um programa contiver centenas ou milhares de nódulos de informação, ao fim de algum tempo, o navegador poderá sentir-se perdido e incapaz de voltar ao ponto de partida. Isto não sucederá se o programa contiver um sistema de navegação fácil, com um menu de opções que dê ao utilizador a possibilidade de escolher diferentes percursos de acordo com diferentes níveis de conhecimento ou de interesse e com a hipótese de, em qualquer momento, regressar à página inicial.

 

	Fig. 7: Fluxograma de uma estrutura linear com um total de quatro páginas.

Os quadros das figuras 7 e 8 apresentam-nos exemplos de estruturação de páginas. São dois exemplos que se caracterizam pela simplicidade e facilidade de navegação. É preferível criarmos esquemas simples, claros e fáceis de utilizar do que complicados e susceptíveis de desmotivar os utilizadores. Geralmente, as melhores páginas para a Internet não são as mais espalhafatosas, as mais deslumbrantes e sobrecarregadas de informação. Estas são normalmente como o fogo de artifício. Muito efeito espectacular, mas de curta duração. Um grande deslumbramento rapidamente se transforma em fumo. 

Os dois esquemas correspondem a uma estruturação linear e a uma estruturação em arborescência. Observe-se a imagem correspondente à primeira.

No exemplo documentado, a informação encontra-se repartida por quatro páginas, todas elas com um layout semelhante, isto é, com uma apresentação quase igual: um cabeçalho, um corpo central constituído por texto e imagem e um rodapé, com botões de navegação. Embora a última página esteja indicada como sendo a «página 3», a verdade é que ela é a quarta página do conjunto. A primeira corresponde à que se encontra indicada como homepage. E esta difere das três seguintes por apresentar, no corpo central, uma coluna do lado esquerdo com botões de acesso às páginas seguintes. Significa isto que o utilizador pode saltar directamente para qualquer uma sem necessidade de passar pelas outras.

Em linguagem de programação por objectos, poderemos dizer que a homepage é constituída por um total de 9 objectos: a página global, na qual se encontram todos os elementos, um cabeçalho, três botões laterais de acesso a qualquer uma das páginas seguintes, um texto introdutório e um rodapé com três botões de navegação. E se prestarmos um pouco mais de atenção, verificaremos que há mais um objecto que omitimos: a linha separadora entre o corpo central e o rodapé.

Os botões de navegação no rodapé permitem uma navegação linear, isto é, permitem que as páginas possam ser folheadas como se de uma publicação impressa se tratasse. Todavia, apresentam um botão central com uma seta para cima, o que significa que, a todo o momento, é possível regressar à página inicial.

Estamos na presença de uma navegação simultaneamente linear e circular, na medida em que a navegação não termina na última página. Carregando-se no botão da página seguinte volta-se à primeira. E isto acontece quer se consultem as páginas para a frente, quer para trás. Há pessoas que, quando pegam numa revista ou num jornal, gostam de começar do fim para o princípio, enquanto outras levam a leitura toda seguida da primeira à última página. O esquema da figura 7 permite uma consulta ao gosto de cada um.

 

	Fig. 8: Fluxograma com uma estrutura em arborescência.

A imagem da figura 8 mostra-nos uma estrutura em arborescência, obtida facilmente a partir do esquema anterior. O fluxograma poderá corresponder, por exemplo, a um bloco de três unidades didácticas ou a três etapas informativas.

No primeiro ecrã, o utilizador depara-se com três secções distintas, por ventura interligadas e sequenciais. Terá de optar por uma delas. Uma vez seleccionada a secção ou o nível, tem acesso imediato ao menu inicial de cada sequência, podendo aí optar pela forma de navegação pretendida, isto é, ou vai imediatamente para a página que lhe interessa ou efectua uma progressão linear, utilizando os botões de navegação colocados no rodapé. E se, a meio de uma secção, pretender saltar para outra, terá de voltar obrigatoriamente ao primeiro menu.

Para facilidade de construção de uma sequência de páginas em HTML, há algumas regras que deveremos respeitar, de modo a evitarmos um acumular de erros, em regra só detectados mais tarde e depois de difícil eliminação.

Quando se programam módulos com o FrontPage, este coloca todo o material em pastas previamente definidas pela Microsoft. E o resultado é que, mais tarde, quando as colocamos num servidor, surgem erros diversos, entre os quais, os mais frequentes, consistem na não localização das páginas ou dos objectos nelas inseridos. Estes imprevistos, desagradáveis e trabalhosos de corrigir, serão evitados se recusarmos certos automatismos do programa e formos nós próprios a definir o que pretendemos. Assim, aconselhamos a que adoptem as regras que passamos a indicar e que não são mais do que o resultado de uma longa experiência de formação de colegas nesta área.

Em primeiro lugar, todo o nosso trabalho deve ser colocado numa pasta por nós criada e colocada na raiz do disco duro. E os nomes das pastas não deverão ter mais do que oito caracteres, devendo ser evitados os acentos e as cedilhas.

Vejamos alguns casos práticos. Encontra a seguir nove títulos de trabalhos hipotéticos para a Internet. Tendo em conta aquilo que lhe acabámos de aconselhar, quais os que eliminaria?

Embora os números 4 e 8 sejam possíveis, visto que os modernos sistemas operativos admitem nomes mais extensos para os ficheiros, continuamos a preferir evitá-los. Os ficheiros 1 e 2 são absolutamente desaconselhados. Poderemos mesmo dizer que estão incorrectos. Se a navegação se processa sem erros dentro do computador em que o programa foi criado, uma vez colocado o material num servidor público, os problemas surgem imediatamente e são difíceis de detectar. Estamos a lembrar-nos de uma situação paradigmática, ocorrida com uma professora que frequentou uma acção de formação por nós dinamizada. Tratava-se de um módulo didáctico bilingue para aprendizagem do vocabulário relacionado com a casa. Todas as páginas da secção de iniciação ao inglês funcionavam perfeitamente. Na secção para o francês, algumas imagens teimavam em nunca aparecer. No entanto, no computador portátil em que o programa foi desenvolvido, tudo funcionava na perfeição. Os erros ocorriam apenas nas páginas colocadas num servidor público. Só depois de muitas horas, de muitas hipóteses para detecção das causas possíveis, viemos a descobrir que a formanda não respeitara as regras que lhe tínhamos fornecido. Os nomes do ficheiros das imagens estavam correctamente escritos em francês, com todos os acentos nos devidos lugares. Renomeámos os ficheiros, eliminando os acentos. Reenviámos as imagens para o servidor. E a partir daqui não se verificaram mais erros. E o programa lá continua, sem pregar partidas, à espera que o consultem, no servidor do Prof2000. Se quiserem tirar a prova dos nove, digitem o endereço do «Aveiro e Cultura» e procurem, na secção de material didáctico, o programa que tomámos como exemplo. Se não quiserem perder tempo, utilizem esta ligação directa:  Casa - La maison - The house. Se estão a efectuar a leitura a partir de uma versão impressa, o endereço é: 

http://ww3.aeje.pt/avcultur/secjeste/casa/index.htm

Apesar de todos os ficheiros poderem ser colocados na pasta principal, independentemente do tipo, não há nada como termos uma casa bem arrumada, com todos os móveis no sítio. Logo, há toda a vantagem em criar, dentro da pasta principal, as pastas para cada tipo de objecto: textos, imagens, sons, etc.

Em segundo lugar, a página inicial do conjunto, habitualmente designada como homepage, deve ser salva com a designação «Index.htm» (logicamente, sem as aspas «»).  Se utilizarmos este procedimento, não necessitaremos de indicar o nome da primeira página, porque os browsers da Internet, na ausência da indicação do nome, procuram automaticamente as páginas com esta designação.

Todos os objectos relativos a botões de navegação, separadores, marcadores e imagens deverão ser salvos nos formatos JPEG e GIF. O primeiro é reservado a imagens de alta resolução, com vários milhares de cores, geralmente de tipo fotográfico; o segundo é para imagens de baixa resolução, para imagens desenhadas e para aquelas pequenas imagens animadas, que tornam as páginas mais agradáveis ao olhar. Quer o JPEG, quer o GIF são formatos que se caracterizam por um reduzido tamanho. Isto tem a vantagem de permitir que as páginas sejam mais rapidamente descarregadas para o nosso computador, evitando uma espera de longos segundos. Ainda que tratando-se de segundos, a verdade é que estes quase sempre nos parecem horas e nos fazem perder a paciência, levando-nos a passar a outras páginas, quando não mesmo a desligar o computador e a ocupar o tempo de outra maneira menos enervante.

>>>