XHTML -
eXtensible Hypertext Markup Language, é uma linguagem
de marcação HTML,
baseada em XML. Ela
combina as tags de
marcação HTML - Hypertext Markup Language - com
regras da XML - eXtensible
Markup
Language
. Nesta matéria usaremos essas duas linguagens de
marcação usadas nas páginas da web
juntamente com o CSS – Cascading StyleSheets, ou linguagem
de folha de estilo que é o responsável da montagem e da
personalização de uma página da web.
O exemplo seguirá
a página do blog muito interessante cujo autor é
Román
Cortez . O primeiro passo é preparar as figuras dos
estados brasileiros através dos arquivos shapes, que
são arquivos vetoriais e contém dados geoespaciais
muito usados por sistemas de informações geográficas
e podem ser encontrados na web ou em sites especializados em
geoprocessamento.
Para preparar as
imagens usaremos um software geoprocessamento chamado Quantum
GIS que abrirá o arquivo shape e o exportará
no formato .PNG - Portable Network Graphics .
Clique no botão
“Adicionar Camada Vetorial” ...
Ao abrir a janela para
adicionar navegue até o local em que o arquivo shape
está localizado no computador...
O arquivo shape
aberto terá este formato, por exemplo:
Em seguida é
preciso selecionar e clicar para salvar a imagem. Neste nosso Quantum
GIS o caminho está como: Projeto -> Guardar
com Imagem .
Ao abrir a janela para
salvar é preciso selecionar o formato da imagem que neste caso
será o .PNG pois o fundo será transparente.
Depois de salvar o
arquivo é preciso preparar a imagem para que o tamanho de
todos seja proporcional. Para esta tarefa é preciso de um bom
editor de imagens como o PhotoFiltre
, por exemplo.
Então para
preparar a imagem o primeiro passo é abrir a imagem no
aplicativo:
Em seguida selecione o
Magic wand tool que é a varinha mágica que tem o
objetivo de selecionar o local a ser trabalhado:
.jpg)
Agora é preciso
selecionar um local vazio com o Magic wand tool ...
.jpg)
O local ficará
selecionado por fora...
.jpg)
Para selecionar
somente o objeto é preciso selecionar e clicar em: Selection
-> Invert...
.jpg)
Agora somente o objeto
(mapa do Pará) estará selecionado. Então clique
com o botão de seleção de menu, geralmente o
direito, e copie a figura...
.jpg)
Com o objeto copiado
para a área de transferência, agora é preciso
criar uma nova imagem para saber o tamanho exato da figura.
.jpg)
A nova imagem pode ser
de qualquer tamanho porque este passo é para verificar o
tamanho da imagem...
.jpg)
Ao colar a figura no
novo projeto é possível ver o tamanho exato da imagem
ao clicar com o botão de seleção de menu,
geralmente o direito, sobre a imagem colada...
.jpg)
Neste caso é
117 por 113 ...
.jpg)
Agora é preciso
repetir o passo anterior criando uma nova imagem dessa vez no tamanho
exato da imagem: 177 x 113 .
.jpg)
Em seguida é
preciso colar a imagem na nova janela...
.jpg)
.jpg)
O passo seguinte é
deixar o fundo da imagem transparente. No PhotoFiltre é
preciso selecionar e clicar: Image -> Transparent color ...
.jpg)
O fundo (background)
ficará transparente conforme a figura abaixo:
.jpg)
Agora é preciso
tomar muito cuidado para salvar no formato .PNG - Portable
Network Graphics ou GIF - Graphics Interchange
Format porque se for em outro formato a transparência
será preenchida novamente. Neste projeto as imagens dos
estados estão no formato GIF.
.jpg)
Finalmente a imagem
está pronta para ser usada. Agora é preciso repetir os
passos anteriores com todos os estados brasileiros.
Ao terminar de fazer
com todos, abra os todos no Quantum GIS para formar o mapa do
Brasil completo e em seguida exporte o mapa também no formato
.PNG ou .JPG...
Para que o CSS
consiga fazer o jogo de cores na imagem, é preciso sobrepor
todas as imagens individuais sobre a imagem acima e ocultá-las
de maneira que o CSS abra ao passar com o mouse sobre a
imagem...
Então do arquivo
baixado do blog do Román Cortez abra o arquivo
test.html em um editor de texto como o bloco de notas, por
exemplo:
Aparecerá
então os códigos CSS e HTML. Para quem
não é desenvolvedor de sistemas nem programador, não
precisa assustar com os códigos porque o objetivo é só
substituir e acrescentar copiando e alterar o código abaixo:
Vamos à
explicação: Na área verde nós temos a
estrutura da página HTML e nas áreas azul, rosa
e amarelo os códigos CSS. Funciona assim: quando clicar
em uma tag que está na área verde, por exemplo a tag
com o id=”cz1” , se tiver dúvida é só
olhar o “cz1” na
área verde, ele irá apontar para o CSS rosa e
amarelo. Notem que a parte verde que tem escrito id=”#z1”
faz referência as áreas rosa e amarelo com a escrita
a#z1. Logo ao passar sobre o id=”cz1” da área verde ele
irá ativar a imagem a#z1 da área amarela , que tem o
tamanho da a#z1 da área rosa e que está na posição
do mapa na li#cz1 da área azul. São com essas
referências que o CSS vai fazer um estado aparecer e
desaparecer.
Mas a dúvida
á como descobrir a posição exata dos mapas para
colocar na área azul na parte margim-top que é a
posição superior e a margin-left que é a
posição da esquerda?
Em primeiro lugar
é preciso que todas as imagens estejam em uma pasta chamada i
ou outro nome conforme a figura abaixo:
Fazendo as alterações
seguindo as instruções acima onde verde a area1 é
igual ao id=”cz1” e id=”#z1” e na alteração
representa um estado area1 é a Bahia, por exemplo obtemos a
seguinte área verde compare com a anterior:
A tag <a
href=”http:// ....”> tem a função de dirigir
a página para uma outra. Ao clicar no local surgirá um
evento que irá abrir uma página ou uma nova página
com o devido endereço inserido.
Nosso id antes
era cz1 e agora é csc de Santa Catarina, por
exemplo, e tem o id=”sc” que vai ativar os códigos
CSS das áreas rosa, amarelo e azul descritas a seguir:
Nessa área azul
do código podemos observar que o mapa da base está na
pasta img que foi criada e se chama mapa.jpg.
Aqui podemos responder como a margem superior e a da esquerda foi
obtida: na verdade ela foi por inserção e verificação
manual dos resultados. Por exemplo: inseria um número 250px no
margin-top e 150px para o margin-left para o estado do Rio
Grande do sul e clicava no arquivo test.html para ver no
navegador onde a imagem RS estava. Se estava muito para baixo ou para
a direita era preciso alterar os pixels e assim por diante. Ou então
abrir a imagem da base mapa.jpg em um software de
geoprocessamento como o ArcGIS, Quantum GIS ou GVSig
, por exemplo, e ir verificando os valores dos posicionamentos para
obter os valores para as margens superiores e esquerdas.
Nessa área rosa
os valores são os próprios tamanhos width
(comprimento) e height(altura) da imagem .GIF.
Na área amarela
é preciso colocar somente o nome do local em que está a
imagem do mapa do estado. No nosso caso está na pasta mapa que
está dentro da pasta img.
Finalmente depois
de tudo preenchido o arquivo pode ser testado e visualizado em um
navegador clicando sobre o arquivo test.html .
Para saber mais:
next page buycheapjerseyscollections,cheapjerseyschinesesupply,cheapjerseyspa,cheapjerseyswhoesale,cheapjerseys30,cujerseys,usjerseyshop,wantcheapjerseys,cheapjerseys25
ResponderExcluir