<<<
III -
DESENVOLVIMENTO DE UM PROTÓTIPO
Fase 9: Construção da segunda página
Na fase anterior,
deixámos quase concluída a «homepage», a página
inicial do módulo, correspondente ao ficheiro «Index.htm».
Tal como prevíramos no início dessa fase, nasceu, cresceu e
atingiu o estado adulto. Já tem corpo e alma. Falta-lhe
aperaltar-se e entrar no exercício das suas funções.
Mas estes novos atributos só serão adquiridos quando lhe
conferirmos o estatuto que merece. Agora, que atingiu o estado
adulto, terá de se reproduzir, terá de ser o elemento
gerador das páginas que lhe ficarão ligadas, não por laços
de familiaridade, mas por hiperligações, de modo que os
utilizadores possam navegar livremente em todo o conjunto. Se
já ligaram o computador e estão prontos para esta fase,
procurem a pasta com o vosso trabalho, utilizando o Explorador
do Windows. Se não desligaram o computador no final da fase
anterior, desliguem-no e façam uma pausa. Roma e Pavia não
se fizeram num dia. Vão dar uma volta, antes de voltarem a
sentar-se em frente ao computador. Não vos digo que fumem um
cigarrito, porque sou vosso amigo. Mas que devem descansar uns
minutos, isso sim. Desliguem o computador e dêem uma pequena
volta. Nem que seja à volta da mesa, para fazerem um pouco de
exercício. Conversem um pouco com os familiares ou com os
amigos, antes de passarem ao parágrafo seguinte. Se
já está tudo operacional e estão com uma grande vontade de produzir
obra, vamos ao trabalho. E a primeira coisa que devem fazer é
abrir a vossa pasta, se já têm o computador a trabalhar,
utilizando o Explorador do Windows. Só isto! Mais nada! Por
enquanto o FrontPage não nos interessa para nada. Se
já têm a pasta aberta, devem lá ter os mesmos elementos
representados na figura 26,
ou seja, devem ter na pasta principal o ficheiro «Index.htm»,
agora ocupando 7 KB, e mais duas pastas: uma para as imagens;
a outra para os sons. E na pasta das imagens devem ter as
três fotografias, ainda com 600 píxeis de largura, e três
réplicas em miniatura das mesmas, sem falar nos botões de
navegação. A
nossa actividade, por enquanto, consiste apenas na
duplicação do ficheiro «Index.htm» e mudança de nome,
porque é a partir da página já feita que vamos construir a
seguinte. Seguramente que sabem como duplicar o ficheiro e
renomeá-lo. Como?!
Está o leitor a dizer que já não se lembra! Não sei qual o
sistema operativo que está a utilizar. Será o Windows 98? Ou
já passou para versões mais recentes? Seja como for, os
procedimentos são idênticos. Desde que passámos do DOS para
o ambiente Windows, o trabalho com os computadores ficou
altamente facilitado. Mas, mesmo assim, vamos dar uma ajuda.
Como a maioria ainda trabalha com o Windows 98, vamos tomá-lo
como base para vos reavivarmos a memória, fornecendo-vos as
necessárias instruções. Sigam-nas e terão meio caminho
andado. 1º
- Abram a vossa pasta de trabalho utilizando o Explorador do
Windows, se ainda não o fizeram. 2º
- Coloquem o cursor sobre o ficheiro «Index.htm» e arrastem-no
para um espaço livre do ambiente de trabalho, premindo a
tecla direita do rato. Quando levantarem o dedo da tecla do
rato, escolham a opção «Copiar para aqui». 3º
- Mudem o nome do ficheiro que têm agora duplicado no ambiente
de trabalho. Mudem de «Index.htm» para «Pg000100.htm»,
mantendo um total de oito caracteres antes da extensão. Estão
com dúvidas? Para lhe mudar o nome?! Isso é fácil. Cliquem
sobre o ficheiro com o botão direito do rato. Na janela que
surge, escolham a opção «Mudar o nome». Em vez
disto, após terem seleccionado o ficheiro, poderão também utilizar a
tecla F2. O resultado é precisamente o mesmo. Estão
certamente admirados pelo facto de atribuirmos o número 100 à
página um do módulo. Porque não chamar-lhe simplesmente
«Pg000001.htm» em vez de «Pg000100.htm»? Muito
simplesmente porque vamos numerar as páginas seguintes com
incrementos de cem. Deste modo, entre cada página numerada,
haverá um grande intervalo, que nos deixará com «muito pano
para mangas». Se, um dia mais tarde, quisermos meter outras
páginas de permeio, teremos muito espaço de manobra, sem
necessidade de mexer na estrutura global. Estamos aqui a
utilizar um procedimento muito semelhante ao que adoptávamos
quando programávamos e tínhamos de numerar as linhas de
instruções para o computador interpretar e executar. Neste
caso específico, chegávamos a efectuar incrementos na ordem
dos mil, o que nos permitia, em qualquer altura, reformular os
projectos e introduzir novas linhas de programação, sem
termos de mexer noutras rotinas já criadas. Continuamos a
aplicar procedimentos similares e não nos temos dado mal! 4º
- Agora, que atribuíram o nome «Pg000100.htm» ao ficheiro,
coloquem-no na pasta onde estão a desenvolver o módulo.
Passaram a ter, além das duas pastas para as imagens e os
sons, dois ficheiros com a
extensão HTM. 5º
- Cliquem sobre o ficheiro «Pg000100.htm», para o visionarem
tal como é visto na Internet. Temos na frente uma réplica da
página «Index.htm». E como neste momento já temos um total
de duas páginas, antes de alterarmos a estrutura, podemos
desde já estabelecer a hiperligação entre elas. Como é que
vamos fazer? Seguindo as instruções. 6º
- Editem a página recorrendo ao botão do FrontPage e
aguardem que o programa arranque. 7º
- Cliquem com o cursor sobre o botão com o formato
simultaneamente de casa e de botão para cima. É este o
botão que permite voltar sempre à homepage. Deverá
ter ficado activado. Verifiquem se ele apresenta uns pequenos
quadrados nas margens, sinal de que o ícone está
seleccionado.
|
8º - Procurem o botão para estabelecimento de
hiperligações, representado na figura 41. Ao
clicar aqui, surge uma janela com quatro botões
situados na metade inferior. Deverão clicar no botão
que apresenta uma lupa sobre uma pasta. Ao fazê-lo,
surge nova janela, a pedir que seleccionem o
ficheiro. Deverão indicar a localização da vossa pasta
de trabalho e seleccionar o ficheiro «Index.htm»,
clicando finalmente em OK. |
Fig. 41:
Botão para estabelecer as hiperligações, quer a
outras páginas, quer a ficheiros colocados em
servidores da Internet. |
9º -
Seleccionem o botão para «Página anterior» e efectuem os
mesmos procedimentos da alínea anterior, uma vez que é
também a página da homepage que precede esta. 10º
- Salvem o trabalho e passem para a janela do Internet
Explorer. Carreguem em F5 para actualizar e verifiquem o que
sucede quando colocam o cursor do rato sobre os dois botões
acabados de linkar. Aproveitem para passar à página
«Index.htm». 11º
- Agora que verificaram que as hiperligações estão a
funcionar e passaram à página «Index.htm», mudem para o
FrontPage. Vamos estabelecer as ligações entre esta e a
página um. Lembrem-se que estão na homepage. Temos aqui um total de seis hiperligações a estabelecer,
sem contarmos com o botão para acesso à ficha técnica.
Passem à etapa seguinte, para estabelecer a ligação entre a
homepage e as restantes páginas, mesmo sem ainda estarem
construídas. Vamos aqui aprender um pequeno truque que
enganará o programa e nos adiantará o trabalho. 12º
- Estamos agora na homepage e já temos criada a
página um, a que demos o nome de «Pg000100.htm». Como temos
ainda as páginas dois e três, estas irão ter, logicamente,
as designações «Pg000200.htm» e «Pg000300.htm». No
entanto, ainda só temos na pasta dois ficheiros. Vamo-nos
servir disto para estabelecer já as ligações às páginas
futuras, enganando o computador. Sigam as instruções. 12.1
- Estabeleçam as ligações dos três botões de navegação.
Atenção que as setas para a esquerda e para a direita
deverão estabelecer a ligação à página seguinte
«Pg000100.htm», enquanto a seta para cima é para ligar ao
ficheiro «Index.htm». Depois disto salvem o trabalho. 12.2
- Seleccionem o texto do primeiro botão situado na coluna da
esquerda, passando o cursor sobre o texto com a tecla esquerda
do rato premida. Efectuem a hiperligação à página
«Pg000100.htm», utilizando rigorosamente os mesmos
procedimentos que adoptaram para os ícones do rodapé. As
palavras deverão passar a estar sublinhadas, sinal que a
ligação foi estabelecida. 12.3
- Façam exactamente o mesmo da alínea anterior para os dois
botões da coluna da esquerda. Deste modo, ficámos com os
restantes botões ligados à página seguinte. Aquilo que nos
interessa, realmente, é que eles, mais tarde, permitam aceder
às páginas respectivas. Como é que vamos proceder, ainda
sem termos as páginas criadas? Será que o programa permite
isto? Correctamente, tal não é possível. Todavia, vamos
enganar o computador, de tal modo que, mais tarde, uma vez
inserido o módulo na Internet, a navegação se processe sem
erros. Vamos
ao truque. Antes, salvem o vosso projecto, para evitar
imprevistos. Se passarem para a janela do Explorador da
Internet e actualizarem a página, verão que todos os botões
estão a funcionar, embora todos eles nos remetam para a
página seguinte. 13º
- Regressando ao FrontPage, vamos fazer com que os botões da
coluna da esquerda fiquem desde já ligados às páginas
futuras. Sigam as etapas. 13.1
- Coloquem o cursor do rato a meio da palavra do segundo
botão. Clicando nesse ponto com o botão direito do rato,
surge uma janela. Seleccionem «Hyperlink properties». Na
janela que surge, verão que aparece automaticamente
seleccionada a página para onde a ligação se estabelece.
Mudem o 1 para 2 e cliquem no OK. Passará a ficar a
indicação da futura página «Pg000200.htm». Façam
rigorosamente o mesmo em relação ao botão seguinte e mudem
o 1 para 3. Como o botão do rodapé para a página anterior
deverá estabelecer a ligação à última página do módulo,
liguem-no à página «Pg000100.htm» e depois mudem o 1 para
3. Temos
as hiperligações estabelecidas às futuras páginas. Embora
teoricamente isto não seja viável, a verdade é que na
prática a navegação se processa sem erros, ficando deste
modo o nosso trabalho bastante adiantado. Salvem o trabalho,
passem à janela do Explorador da Internet e naveguem para a
página cuja estrutura vai ter de ser alterada. 14º
- Estamos neste momento de regresso à página um,
correspondente ao ficheiro «Pg00100.htm». Passem para o FrontPage. Antes de alterarmos a estrutura da página,
estabeleçam as hiperligações de todos os botões de
navegação, aplicando os conhecimentos e o truque que
aprenderam nas alíneas anteriores. Não se esqueçam que o
ícone com a seta para a direita deverá ficar com a ligação
ao ficheiro «Pg000200.htm». Salvem o trabalho e, passando
para a janela do Explorador da Internet, verifiquem se as
hiperligações estão activas. 15º
- Agora que as hiperligações estão estabelecidas e
funcionam, é chegado o momento de alterar a estrutura da
página que deverá conter o primeiro postal antigo da cidade onde vivemos. A
alteração vai começar pela eliminação dos elementos que
estão a mais, deixando apenas a estrutura básica da primeira
página e os botões de navegação de acesso directo que se
encontram na coluna da esquerda. 15.1
- Eliminem as três imagens em miniatura e a tabela em cujas
células elas foram inseridas. Para isso, vão clicando nas
imagens, para as seleccionar, e carregando na tecla «Del».
Depois, seleccionem a tabela de 6x1, onde estavam as imagens, e
carreguem na tecla «Del». Depois disto, salvem, para evitar
acidentes. 15.2
- Coloquem o cursor na célula estreita ao lado da coluna da
direita e, seleccionando «Cell properties», mudem a cor do
fundo (background) para «Automatic». E salvem. 15.3
- Seleccionem a tabela de 3x1 onde está o texto de
apresentação, a linha horizontal separadora e a tabela que
diz «Ficha Técnica» e carreguem na tecla «Del». Salvem o
trabalho. 15.4
- Como a tabela que ficou contém mais colunas do que aquelas
que nos interessam, vamos unir as células 3 e 4 numa só.
Como? Seleccionem estas células passando o cursor do rato
sobre elas e premindo o botão esquerdo. Uma vez seleccionadas
(ficam escurecidas), carreguem no botão «Table» da
barra de ferramentas e seleccionem «Merge Cells». Acabámos
de transformar uma tabela de 1x5 numa de 1x4. Como a célula 4
é demasiado larga, coloquem o cursor entre a três e a quatro
e reduzam-na, deslizando o cursor em direcção à margem
direita. Deixem-na ficar com a largura de cerca de 1 cm, ou
seja, cerca de 5% de largura.
|
|
|
|
Fig. 42:
Aspecto da estrutura central da página 1, após
eliminação dos elementos criados na página inicial do
módulo. |
|
16º
- Com as eliminações anteriores, ficaram neste momento com
uma página vazia, apenas com a coluna lateral esquerda com os
botões de acesso às páginas seguintes. É no grande espaço
em branco, situado à direita do separador vertical azul, que
iremos colocar a primeira imagem antiga da cidade. Vamos
então reconstruir a estrutura desta página, que irá
manter-se nas seguintes, apenas mudando os conteúdos. Em
cada página, pretendemos colocar uma imagem antiga com a
respectiva legenda explicativa. Para isso, necessitaremos de
uma tabela contendo uma célula para a
fotografia, um espaço de separação e um texto explicativo.
Como, mais tarde, poderemos querer incluir novos elementos,
poderemos deixar desde já uma célula a mais, muito
embora elas possam ser acrescentadas em qualquer altura.
Insiram na terceira célula ou coluna um nova tabela com as
dimensões de 5x1 e ponham os bordos a zero. Para que
fique encostada à margem superior, seleccionem a tabela na
qual se encontra esta nova e carreguem no botão para posicionamento
em cima. Deverão ficar com um aspecto idêntico ao
representado na figura 42. 17º
- Coloquem o cursor do rato na célula onde está o título do
módulo. Substituam-no por outro que esteja de acordo com a
fotografia e o conteúdo informativo. No
nosso caso, como a primeira imagem nos mostra o canal central,
será este o título da página. Seleccionamos o texto
anterior e escrevemos aí «O Canal Central» 18º
- Vamos agora proceder à colocação da primeira imagem na
primeira célula da tabela de 5x1. Se aí a colocarmos nas
dimensões em que está, fica perfeitamente no ecrã do
monitor. Todavia, se mandarmos imprimir a página, ficará
cortada do lado direito, porque a largura é superior à de
uma folha A4 na vertical. A solução para este problema, se
quisermos a página correctamente impressa, passa pela
redução para 500 píxeis, deixando ainda 114 livres para os
restantes elementos. Esta redução é necessária, porque as
imagens, ao contrário das tabelas e dos textos, não são
elásticas. Ainda
se lembram como se alteram as dimensões de uma imagem?
Recordem o que aprenderam na fase dois. Observem atentamente a
figura 12. A única
alteração que têm de fazer é substituir o valor 600 por
500. Os restantes parâmetros são automaticamente mudados
pelo PSP, mantendo-se rigorosamente as proporções do postal. E
já que neste momento estão a reduzir a imagem de 600 para
500, aproveitem para fazer o mesmo às restantes. Se quiserem
manter as imagens originais, salvem com outro nome. Nós vamos
conservar o nome original. Não estamos preocupados em perder
a digitalização inicial. Os postais são nossos e podemos
voltar a digitalizá-los, se isso vier a ser necessário. E
já que falámos de redução de imagens, será que era mesmo
preciso reduzi-las utilizando o PSP? A resposta é não. Não
era necessário. Podemos conservar as imagens originais,
embora mostrando-as num formato mais pequeno, para caberem na
página. Como
é isso possível? E se é possível, por que razão nos demos
ao trabalho de as reduzir? Estas duas questões são
importantes. Ainda bem que foram formuladas, porque nos
permitem reflectir um pouco sobre o problema. O
FrontPage permite inserir uma imagem onde pretendemos
independentemente do tamanho. Se ela é demasiado grande, a
solução está em clicar nela com o botão direito do rato e
alterar-lhe as dimensões recorrendo às propriedades da
imagem (Picture Properties). Observem a figura 34.
Seleccionando a opção «Appearance», é possível reduzir
as imagens para o tamanho conveniente, desde que cliquemos na
quadrícula que diz «Specify size» e mudemos os valores. Nós
preferimos reduzir as imagens no PSP e salvá-las na nova
dimensão, mantendo o mesmo nome. Deste modo, os ficheiros
ficam mais pequenos. Como é sabido, quanto mais pequenos
forem os ficheiros, mais depressa as páginas serão
carregadas na Internet, evitando longas e desesperantes
esperas. Já
colocaram a primeira imagem na célula da tabela? Se já o
fizeram, centrem-na clicando no botão respectivo (Center=Ctrl+E). Agora,
mudem, se quiserem, a apresentação. Há muitas maneiras de
destacar uma imagem, se utilizarmos um programa de edição
gráfica. Uma das formas consiste em criar um sombreado à
volta da fotografia, nas margens inferior e lateral direita.
Isto dará o efeito de relevo, dando-nos a impressão de que a
imagem está afastada uns milímetros do fundo. É um efeito
que exige pouco trabalho, mas necessita de software
capaz de o fazer. Em
vez do sombreado, vamo-nos limitar às possibilidades
oferecidas pelo FrontPage. Não são muitas! Mas são
as suficientes para destacar as gravuras. Geralmente,
as fotografias apresentam uma moldura branca com alguns
milímetros de largura. Vamos fazer algo de similar, mas
utilizando um rebordo escuro. Seleccionem
a imagem, clicando sobre ela com o botão direito do rato. Na
janela que surge, igual à da figura 34, seleccionem
a opção «Appearance» e alterem o «Border thickness» para
o tamanho 5. Se quiserem, experimentem vários valores e cores
de bordo. Vejam o que mais vos agrada. Nós preferimos deixar
o bordo a preto, com a espessura 5. 19º
- Colocada a imagem no local, criem a legenda para a mesma,
utilizando os mesmos procedimentos que aprenderam no final da
fase 7, quando legendaram os botões de navegação. Nós
já seleccionámos a imagem e escrevemos, na janela relativa
ao texto, «Aspecto do canal central, na década de 1950.». 20º
- Agora, para conclusão desta fase, vem a parte mais
complicada. Temos que inserir, na terceira linha da tabela, o
texto explicativo. E, para isso, é necessário redigi-lo. E
para o redigir, é necessário ter as ideias. E para termos as
ideias, é necessário recorrer às fontes de informação. E
estas têm de ser procuradas e a informação assimilada, para
podermos produzir o nosso texto. E depois... E depois, é toda
uma série de trabalhos, em suma, uma carga pior que criar a
estrutura desta página, porque é preciso redigir, passar
para o computador, imprimir, reler, para detecção de erros
ou gralhas de digitação, e voltar a dar a volta ao texto, se
quisermos que ele tenha alguma qualidade e originalidade e
não seja uma mera cópia. E se, por ventura, aproveitarmos
parte de textos escritos por outros, não podemos esquecer de
indicar quem são os autores e onde os encontrámos. Isto é
fundamental. O plágio é tão grave como subtrair a carteira
a alguém. O seu a seu dono! Pensem bem nisto. Não façam
como alguns que, sem os mínimos escrúpulos, têm a
grandessíssima lata e o descaramento, ou o que lhe queiram
chamar, de colocar na Internet material que não lhes
pertence, omitindo as fontes e os nomes dos autores. Já
redigiram o vosso texto? Se sim, coloquem-no no devido lugar.
E o devido lugar é a terceira linha ou célula da tabela de
5x1, que inseriram na etapa 16. Se já lá colocaram o texto,
façam o favor de o formatar devidamente, com uma letra
facilmente legível. Tal como na homepage, nós
continuamos a preferir o Arial, com as mesmas características
e formatação. Embora se gaste um pouco mais de tinta, se as
páginas forem impressas, a verdade é que a leitura é muito
mais fácil e cómoda no ecrã. Nós
acabámos agora mesmo de inserir o texto explicativo da
imagem. Foi o texto curtíssimo que vos transcrevemos:
|
|
|
|
Fig. 43:
Aspecto da página 1, com a janela reduzida à largura
de 614 píxeis. |
|
«O canal
central percorre o centro da parte baixa da cidade, desde o
jardim do Rossio até ao antigo edifício da Capitania do
Porto de Aveiro, a partir do qual segue outro canal que,
outrora, servia de ligação à fábrica de tijolo António
Maria Campos, actualmente transformada no Centro Cultural e de
Congressos de Aveiro.» Teremos
tempo de o ampliar e melhorar noutra altura. Agora, o que nos
interessa é completar esta fase, porque o nosso objectivo,
como bem se recordam, não é produzir nenhuma obra-prima, mas
sim adquirirmos os conhecimentos básicos para criação de
páginas para a Internet. Vai
sendo altura de pôr um ponto final nesta fase. Salvem o vosso
trabalho. Passem para a janela do Explorador do Windows.
Carreguem na tecla F5 para actualização da página. E vejam
se a página está apresentável e, sobretudo, se a
navegação se processa sem erros entre esta e a homepage.
Se clicarem para as páginas seguintes, verificarão que o
computador as vai procurar, dando, passados uns segundos, uma
mensagem de erro, porque não é possível encontrar o que
ainda não foi criado. Se
tudo está a funcionar bem, desliguem o computador e façam
uma pausa, antes de passarem à fase seguinte.
>>>
|