sábado, 28 de fevereiro de 2015

Mapa Prático com XHTML e CSS

     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:

     
      Agora é preciso selecionar um local vazio com o Magic wand tool ...

     
     O local ficará selecionado por fora...
 
      
      Para selecionar somente o objeto é preciso selecionar e clicar em: Selection -> Invert...

     
     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...

 
     Com o objeto copiado para a área de transferência, agora é preciso criar uma nova imagem para saber o tamanho exato da figura. 

 
     A nova imagem pode ser de qualquer tamanho porque este passo é para verificar o tamanho da imagem...
   

     
      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...






      Neste caso é 117 por 113 ...




      Agora é preciso repetir o passo anterior criando uma nova imagem dessa vez no tamanho exato da imagem: 177 x 113 .






     Em seguida é preciso colar a imagem na nova janela...

  
       O passo seguinte é deixar o fundo da imagem transparente. No PhotoFiltre é preciso selecionar e clicar: Image -> Transparent color ...

 
     O fundo (background) ficará transparente conforme a figura abaixo:


     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.

   
     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:




Nenhum comentário:

Postar um comentário