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:

http://www.romancortes.com/blog/xhtmlcss-mapmapa/

https://geobrainstorms.wordpress.com/2013/03/11/destacando-mapas-utilizando-cascading-style-sheets-css/

Oniguiri

     Podemos dizer que não é só de sushi e temaki vive o japonês mas também de oniguiri, udon, lámen, gyudon, yakisoba etc. Todas essas comidas são práticas e rápidas como o hot dog e o hamburguer para os americanos ou a coxinha, o quibe, o enroladinho, a empada, entre outras guloseimas para nós brasileiros. Afinal todos nós temos aquele momento que não podemos parar para apreciar um bom prato especialmente quando deixamos de terminar aquela ideia genial que tivemos no escritório ou aquela reunião que durou o nosso almoço inteiro.

     O oniguiri é muito bom nesses momentos e também para piqueniques e lanches. Geralmente ele é branco, sem recheio e precisa de algum acompanhamento mas existem os recheados que tornam o prato muito mais prático.

     Para começar é preciso cozinhar o arroz, de preferência o japonês porque é mais aderente, com um pouco ou sem sal e sem óleo também na proporção de 1 copo de água para 1 copo de arroz. Precisamos também de um recheio a gosto, pode ser até aquele bem goiano como fez o grande amigo Wilker com sua criatividade no seu blog arriscando na cozinha, algas e uma forma, geralmente vendida em lojas de produtos japoneses. Essa forma é opcional porque o oniguiri tradicional é feito com as mãos.

     O primeiro passo é preencher a forma com o arroz...

     Em seguida apertar a forma para ficar com o formato tradicional do oniguiri...

     Depois tire o oniguiri da forma e faça um pequeno orifício no meio apertando ou retirando um pouco do arroz...

     Preencha o local com o seu recheio preferido, neste é um patê de atum...

     Cubra em seguida o oniguiri com a alga...

     E está pronto o oniguiri recheado.

Tintas Tantas...

     O universo das tintas parece ser infinito porque possui uma enorme variedade cujas aplicações vão desde um tecido ou um simples pedaço de papel, passando pelo ramo mobiliário indo para o imobiliário, automotivo etc. Cada qual com as suas características e funcionalidades.

      Por isso é bom conhecer um pouco das suas funcionalidades principalmente para os que pretendem usá-las seja para fazer um trabalho escolar, pintar uma casa ou uma tela ou até mesmo reformar um móvel. 

     Neste post abordaremos um pouco das características de uso de algumas delas, sem esgotar o assunto, que farão parte do escopo deste blog porque isso definirá a qualidade e sucesso dos exemplos a serem abordados.

     As massa corrida PVA e a Acrílica são usadas para correção das superfícies em ambientes interiores (o PVA) e ambientes exteriores (o Acrílico) como paredes e concretos. Como têm um grande poder de enchimento, secagem rápida e muito fácil de lixar, no ramo de pinturas especiais elas são muitos usadas para fazerem o estuque que é um tipo de parede texturizada e também são usados para fazerem o decapê que é um tipo de pintura texturizada na madeira. Por serem solúveis em água, seus usos não são muito indicados para superfícies como vidros, metais e outras tintas não solúveis em água como os sintéticos pois suas aderências poderão ser prejudicados.

     O fundo PVA e o fundo ACRÍLICO são usados como demão primária para corrigir o alto poder de absorção de superfícies internas (fundo PVA) ou externas (fundo Acrílico) como massa corrida, massa acrílica, reboco, alvenaria etc. Como são solúveis em água não são indicados para superfícies como madeira, metal e nem por cima de outras tintas que não sejam solúveis em água como os sintéticos por exemplo.

     A tinta látex PVA e a tinta látex ACRÍLICA são solúveis em água e geralmente são usados para pinturas de alvenarias e concretos e por cima dos fundos PVA ou Acrílico seguindo os mesmos conceitos anteriores onde o látex PVA é usado para ambientes interiores e o látex Acrílico é usado para ambientes exteriores por ser mais resistente. Possuem alto poder de aderência e também não são recomendáveis em superfícies como vidros, metais ou tintas não solúveis em água.

      Neste ponto chegamos ao primeiro ponto das pinturas especiais. É perfeitamente possível fazer lindos acabamentos de pinturas manchadas ou marmorizadas em paredes ou superfícies similares e são muito ensinados em cursos famosos até mesmo na web. O segredo está em deixar secar bem a pintura anterior para trabalhar com a pintura posterior pois a pintura manchada ou marmorizada exige que a tinta atual a ser aplicada “escorregue” bem em cima da pintura anterior. A pergunta que fica novamente é: É possível usar o látex em cima de superfícies lisas como madeira, metal ou outras tintas não solúveis em água? Num primeiro momento eu diria que sim pelo alto grau de aderência mas não garanto que daqui a um tempo ela não se desprenderá das superfícies ditas.

     A massa óleo tem a função de corrigir os defeitos da superfície assim como a massa corrida ou acrílica mas ela é indicada para corrigir preferencialmente superfícies que serão usadas tintas a óleo ou sintéticas como madeiras ou metais. Não é recomendável usar tintas ou fundos solúveis em água pois poderão  comprometer a aderência das tintas sobre a massa a óleo. A cor, geralmente branca, poderá ser alterada com pigmentos conforme a tonalidade desejada. Por exemplo: para madeira da espécie mogno foi necessária a utilização de 4 partes de pigmentos vermelhos para 1 ou 2 partes de betume conforme a tonalidade da madeira.

     O fundo branco ou sintético é usado para selar a superfície antes da tinta que pode ser a óleo ou sintético. As superfícies podem ser de madeiras, metais, alvenarias e até concretos que serão pintadas com tintas a óleo ou sintéticas. Nas madeiras que usarão verniz e terão acabamento transparente o fundo indicado é o selador a base de nitrocelulose. O fundo branco fosco e o fundo sintético são muito usados na pintura especial em madeira: pátina, satinê (pátina lavada) e decapê (pátina texturizada).

     Se existisse uma cadeia alimentar das tintas certamente o esmalte sintético estaria no topo desta cadeia porque ela pode ser pintada sobre muitas bases seja de madeira, metal, alvenaria, concreto, fundos, seladores, massas e tintas. É por isso que muitas pinturas manchas, patinadas, marmorizadas, “estucadas” usam este tipo de tinta, não tinta a óleo e sim o esmalte sintético. 

    Poderia continuar descrevendo muitos tipos de produtos de pinturas como as usadas em laqueamento de móveis que usam a massa rápida, a massa plástica, o fundo cinza primer, as tintas automotivas a base de nitrocelulose ou acrílica e os vernizes a base de nitrocelulose, acrílico, poliuretano etc. Mas são produtos que fogem do escopo deste blog assim como as tintas para tecidos, papéis entre outros.

     Verniz a base de água e pode ser usada em superfícies como concretos, tijolos, telhas e pinturas a base de água como o PVA e o Acrílico. É diferente do verniz acrílico para pinturas automotivas que são solúveis em thinner.. Esse verniz é ótimo para dar acabamento em pinturas manchadas ou marmorizadas feitas com látex pva ou acrílico que também são a base de água.

     O verniz sintético também tem a propriedade de aceitação em diversos tipos de base de pinturas como pva, acrílico, óleo, esmalte e selador nitrocelulose etc. A sua maior vantagem é o tempo de secagem, muito rápida, e o brilho mas tem a desvantagem de ser amarelado podendo alterar a cor da pintura. Nesse caso o indicado seria o verniz cristal.

     Fechando o universo de tintas geralmente usados nas pinturas especiais como: manchados, marmorizados, falso granito, falsa madeira, pátina, satinê e decapê apresentamos uma das mais conhecidas tintas que é a tinta a óleo, aquela usada nas pinturas de tela. É a tinta que dá uma maior fineza no acabamento das pinturas especiais mas tem a desvantagem da secagem que é muito lenta.

      Finalmente chegamos aos diluentes. Para os produtos PVA, Acrílicos a base de água o solvente para limpeza e diluição é a água. Já os produtos sintéticos e a óleo o solvente para limpeza e diluição recomendado é a aguarrás podendo ser usado alternativamente também o thinner. Os produtos com base nitrocelulose o solvente para limpeza e diluição é o thinner e as tintas a óleo para pinturas de tela, a terebentina.

      Tudo isso foi explicado para aqueles que pretendam iniciar os trabalhos com pinturas especiais consigam terminar tranquilamente a sua arte.

Então para resumir podemos dizer que:

   1- Os produtos a base de água são usadas somente com seus similares a base de água e evitar o máximo   o uso por cima de produtos a base de óleo ou sintéticos;

   2- Os produtos a base de óleo e sintéticos não deverão servir de base para produtos a base de água. São usados com produtos similares a base de óleo ou sintéticos;

   3- Os produtos a base de óleo e sintéticos podem perfeitamente serem usados por cima dos produtos a base de água e este é o principal segredo das pinturas especiais porque elas “escorregam” e pintam o sete em cima da base fazendo surgir lindos desenhos manchados, marmorizados e “madeirados” em cima de paredes, alvenarias e concretos; 

     Este artigo foi uma pequena descrição de como usar alguns produtos mais comuns usados para fazer pinturas especiais. O objetivo não foi esgotar o assunto descritivo e técnico de cada produto e sim mostrar  um pouco como um uso indevido do produto pode estragar um lindo trabalho.