Data e hora em qualquer idioma

Sabemos que a função date( ) é a responsável por formatar data e hora em php, contudo não é extensível a todos os idiomas. Dias da semana (sábado, sab, domingo, dom, etc) e do mês (jan, fev, janeiro, fevereiro, etc.) são retornados em inglês, o que nem sempre é conveniente.

Para resolver esse problema, utilizam-se as funções setlocale( ) e strftime( ), que fornecem resultados, conforme o idioma e país selecionado. É uma ótima solução para sites que possuem diversas versões em vários países.

Use o setlocale( ) para definir a localização padrão

Esta função permite definir a categoria da padronização (monetária, numérica, classificação e conversão de caractere, e data e hora), o idioma e o país que devem ser considerados pelo php na hora da execução do script. Abaixo, a estrutura da função:

string setlocale ( mixed $category , string $locale [, string $... ] )

ou

string setlocale ( mixed $category , array $locale )

Analisando sua estrutura, a variável $category receberá a categoria da padronização e a variável $locale receberá o idioma, país e o conjunto de caracteres (opcional). Abaixo, os valores suportados pelo parâmetro category:

• LC_MONETARY – padronização monetária. No Brasil, R$ 1.250,00, nos EUA, $1,250.00 e na Itália, EUR 1.250,00;
• LC_NUMERIC – padronização numérica. No Brasil, 1.250,00, nos EUA, 1,250.00 e na Europa, EUR 1.250,00;
• LC_CTYPE – padroniza a classificação e conversão de caracteres.
• LC_TIME – padroniza a data e hora. A data 07 de agosto de 2011 é representada nos EUA como 08-07-2011, no Brasil como 07/08/2011, Europa e diversos outros países do mundo como 07-08-2011.
• LC_ALL – configura as regras de localização para todas as categorias anteriores. E é a que vamos utilizar nos nossos exemplos.

Os valores suportados por locale possuem uma estrutura peculiar, qual seja: language_COUNTRY.charset . Em outras palavras, no nosso caso, é o conhecido pt_BR.iso-8859-1. Vamos ver alguns exemplos de valores suportados pelo parâmetro locale:

• pt_BR.iso-8859-1 – português do Brasil com conjunto de caracteres iso-8859-1 ou simplesmente pt_BR;
• de_DE – alemão;
• nl_NL – Holanda.

A função setlocale( ) aceita que seja configurado mais de um parâmetro locale, permitindo a especificação de diferentes localizações simultaneamente. Contudo, a principal utilidade dessa flexibilidade se deve ao fato de o Sistema Operacional Windows ter seu próprio conjunto de línguas e países, languange_COUNTRY. Sendo assim, podemos especificar dois valores ou mais para dois parâmetros locale ou mais. Durante a execução do script, se o PHP não encontrar o primeiro conjunto no Sistema Operacional, buscará o segundo e assim sucessivamente. Vamos a um exemplo:

//Configura a localização em SO Unix
setlocale(LC_ALL, "pt_BR");

//Configura a localização em Windows
setlocale(LC_ALL, "ptb_bra");

//Configura a localização em SO Unix e Windows
setlocale(LC_ALL, "pt_BR","ptb_bra");

Use o strftime( ) para fomatar a data e hora em qualquer idioma

A função strftime( ) formatará a data e hora de acordo com as configurações feitas em setlocale. Seu funcionamento é idêntico à função date( ), vejamos o porquê:

string strftime ( string $format [, int $timestamp ] ),

onde a variável $format receberá o formato de saída da data e $timestamp, que é opcional, receberá  o timestamp Unix da data e hora que se deseja exibir. Caso, este valor não seja fornecido, o timestamp Unix atual será padronizado pelo PHP. Vamos ver alguns exemplos de utilização da função strftime( ), lembrando que os parâmetros de formatação são diferentes dos da função date( ):

//Configura a localização em para SO Unix e Windows
setlocale(LC_ALL, "pt_BR","ptb_bra");

echo strftime("%A %a");				// Domingo Dom
echo strftime("%A, %d de %B de %Y");	// Domingo 07 de Agosto de 2011
echo strftime("%a, %d de %b de %y");    	// Dom, 07 de Ago de 11
echo strftime("%d.%m.%y");           	// 07.08.11
echo strftime("%d, %m, %Y");         	// 07, 08, 2011
echo strftime("%d%m%Y");             	// 07082011
echo strftime("%d/%m/%Y %H:%M:%S");  	// 07/08/2011 18:23:25
echo strftime("%x %X"); 			// 7/8/2011 18:23:25
echo strftime("%c");				// 7/8/2011 18:23:25
echo strftime("%Y-%m-%d %H:%M:%S");		// 2011-08-07 18:23:25
echo strftime("%w");				// 0 (dia da semana - 0 domingo a 6 sábado)
echo strftime("%W");				// 31 (número da semana do ano 1 a 52/53)
echo strftime("%j");				// 219 (dia do ano 1 a 366)

Dica importante sobre a função strftime( )

Nem todas as plataformas suportam timestamps negativos, ou seja timestamps anteriores à Era Unix. Isto significa que %e, %T, %R e %D (e outras mais) e datas anteriores a 1º de Janeiro de 1970 não funcionarão em Windows, algumas distribuições Linux, e alguns outros sistemas operacionais.

Muito obrigado pela sua visita. Espero que o tutorial tenha atendido às suas expectativas.

Deixe seu comentário e inscreva-se no Feed RSS do Scriptmaster.

Abraço e até o próximo tutorial.

O assunto é extenso e possui muitos detalhes, portanto, neste artigo, apresentarei os primeiros passos de maneira clara e direta.

Use a função date( ) para formatar Data e hora

A função date( ) é a responsável por formatar data e hora em php. Esta função retorna uma string que representa a data e hora, de acordo com os valores passados para os seus parâmetros. Abaixo, a estrutura da função:

string date ( string $format [, int $timestamp ] )

Analisando sua estrutura, a variável $format receberá o formato de saída da data e $timestamp, que é opcional, receberá o timestamp Unix da data e hora que se deseja exibir. Caso, este valor não seja fornecido, o timestamp Unix atual será padronizado pelo PHP. Vamos ver alguns exemplos de utilização da função date( ):

// Considerando que hoje é 07 de agosto de 2011, 06:23:25 pm

echo date("d.m.y");             // 07.08.11
echo date("j, n, Y");           // 7, 8, 2011
echo date("dmY");               // 07082011
echo date("d/m/Y H:i:s");       // 07/08/2011 18:23:25
echo date("Y-m-d H:i:s");       // 2011-08-07 18:23:25
echo date("w");                 // 0 (dia da semana - 0 domingo a 6 sábado)
echo date("W");                 // 31 (número da semana do ano 1 a 52/53)
echo date("z");	              // 218 (dia do ano 0 a 364)
echo date("U");                 // 1291753405 (timestamp)
echo date("l F j, Y, g:i a");   // Sunday August 7, 2011, 6:23 pm
echo date("D M j G:i:s Y");     // Sun Aug 7 18:23:25 2011
echo date('\H\o\j\e \é \d\i\a j \d\e F \d\e Y');// Hoje é dia 7 de August de 2011
echo date('\A\g\o\r\a \s\ã\o H\h i\m\i\n s\s'); // Agora são 18h 23min 25s
echo date('\H\o\j\e \é \o jS \d\i\a');          // Hoje é o 7th dia
echo date('Hoje é o jS dia'); //1920117America/Sao_Paulo é 2011 7th 0708pm

Dicas importantes sobre a função date( )

1ª ) Como os nomes dos dias da semana e dos meses são representados em inglês com esta função, geralmente ela é mais utilizada quando se quer representar a data e hora sem a presença do nome do mês ou do nome do dia da semana;

2ª ) No código acima, especificamente no último exemplo, você pôde perceber o resultado indesejável ocasionado pela não utilização do caractere de escape (\). Portanto, ao utilizar caracteres que possam conflitar com os parâmetros de formatação, utilize escape. Além disso, em vez de utilizar aspas duplas utilize aspas simples para prevenir que caracteres como \n sejam interpretados como nova linha;

3ª ) Você deve estar se perguntando: como formatar datas em português? Para formatar datas em outras línguas, devemos usar as funções setlocale() e strftime() em vez de date(). O tutorial Como formatar Data e Hora em PHP com setlocale e strftime trata justamente disso.

Muito obrigado pelo seu voto de confiança no blog e no conteúdo. Espero que o tutorial tenha sido proveitoso.

Deixe seu comentário e inscreva-se no Feed RSS do Scriptmaster.

Abraço e até o próximo tutorial.

Este post contém os esclarecimentos das principais dúvidas que surgiram com o lançamento do release do Joomla 1.7. As perguntas e respostas apresentadas aqui foram retiradas e traduzidas do blog Compass Design e do Portal Comunidade Joomla. O autor do artigo é Jen Kramer, presidente da 4Web, uma consultoria de New England, especializada em sites Joomla altamente personalizados.

Vamos ao artigo.

Perguntas e Respostas sobre o Joomla 1.7

“Caso você não tenha ouvido falar, Joomla 1.7 será lançado em 19 de julho de 2011. Este é o primeiro release em cronograma da nova versão de 6 meses do Joomla.

1. Devo atualizar meu site Joomla 1.6 para Joomla 1.7?

Na verdade, você deve. Joomla 1.6 vai chegar ao fim de sua vida em agosto de 2011, daqui a um mês. Depois disso, Joomla 1.6 não terá mais atualizações de segurança, o que significa que se um problema de segurança é descoberto, não será solucionado. E isso significa que se o seu site for hackeado devido a uma vulnerabilidade 1.6, você não terá recursos para corrigir o site, terá que mudá-lo para 1.7 de qualquer maneira. Você atualizará mais cedo ou mais tarde!

Ah, e o upgrade do 1.6 para 1.7 foi projetado para ser muito simples, one-click process (processo realizado com um clique).

2. Meu site Joomla 1.6 continuará funcionando caso eu não realize a atualização?

Sim, se você não atualizar seu site, ele funcionará normalmente… por enquanto. Veja os problemas de atualizações de segurança acima. Desenvolvedores de extensões estarão construindo para a versão atual do Joomla, por isso, se você quiser adicionar outra extensão para o seu site 1.6 ou você quiser alterar o modelo, você encontrará dificuldades daqui para frente.

3. Como faço para atualizar do 1.6 para o 1.7?

Primeiro, se você estiver executando o Joomla 1.6, verifique se a versão é a 1.6.5. Esta foi lançada no final de junho, e é a única versão do Joomla 1.6 que permitirá passar para a 1.7.

Veja as instruções de atualização do Joomla 1.6.5 para o 1.7.

4. Minhas extensões e templates do Joomla 1.6 são compatíveis com o Joomla 1.7?

Foi-nos dito que todas as extensões que atualmente são compatíveis com 1.6 não devem ter problemas de execução no Joomla 1.7. Como sempre, você vai querer testar primeiro. Recomendamos enfaticamente fazer uma cópia de seu site, atualizá-lo para 1.7, e testar o site inteiro cuidadosamente para ter certeza de que funcionará corretamente, incluindo as extensões de terceiros.

Os templates também devem ser compatíveis entre as versões.

5. Que novos recursos e funcionalidades posso esperar no Joomla 1.7?

A equipe que trouxe o Joomla 1.6, depois de trabalhar por três anos no projeto, trouxe o Joomla 1.7 em apenas 6 meses. Obviamente, esta versão não tem tantos recursos, uma vez que o tempo dedicado ao desenvolvimento foi menor.

Da perspectiva de um construtor de sites (operador do CMS Joomla), existem algumas pequenas melhorias, como a capacidade de adicionar uma imagem de fundo para o módulo de HTML personalizado, a capacidade de especificar o nome do site antes ou depois do título da página, e o botão “remover a pasta de instalação” como parte do processo de instalação. Não espere por grandes mudanças, como um novo modelo de administração, por exemplo.

Do ponto de vista de um desenvolvedor, as mudanças são mais significativas. O Framework do Joomla foi separado do CMS, o que significa que é possível construir novas aplicações com o framework do Joomla. (Veja este artigo da revista Joomla para mais informações). Houve também o extermínio de mais de 300 bugs nesta versão.

6. Devo atualizar meu site para Joomla 1.5 Joomla 1.7?

Como sempre, a resposta é “depende”. No entanto, se o seu site de Joomla 1.5 está funcionando bem, eu não iria atualizá-lo ainda. Joomla 1.5 terá suporte até abril de 2012. Joomla 1.8 será lançado em janeiro de 2012, e será um release de longo prazo, o que significa que terá suporte durante 18 meses em vez de seis meses.

7. Estou construindo um novo site, devo construí-lo em 1.5 ou 1.7?

A esta altura do campeonato, você acabará precisando mudar o seu site para Joomla 1.8 em seis meses ou mais, seja em Joomla 1.5 ou no Joomla 1.7. No entanto, a mudança do 1.7 para o 1.8 deve ser menos trabalhosa do que a mudança do 1.5 para o 1.7. Menos trabalho significa menor custo, então a partir da perspectiva do cliente, construir em 1.7 faz muito sentido neste momento.

Se você precisa de extensões que ainda não são compatíveis com 1.6/1.7 (K2 ainda está em beta da versão 1.6 e a maioria dos carrinhos de compras cheio de recursos como redSHOP, VirtueMart, e Tienda ainda estão apenas no Joomla 1.5), você terá que construir o site em 1.5 por enquanto. “

Considerações finais

Espero que o artigo tenha sido de grande valia e tenha agradado a todos.

Deixe seu comentário e inscreva-se no Feed RSS do Scriptmaster.

Abraço e até o próximo tutorial.

Atualmente, a responsável pela mágica de criação de cantos arredondados sem a utilização de imagens é a propriedade CSS3 border-radius.

Entendendo a propriedade border-radius

Considere o código abaixo:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html/loose.dtd">
<html>
	<head>
		<style type="text/css">
			div {
				padding: 10px;
				background: #80ff80;
				width: 200px;
				border: 2px solid #00ff00;
				border-radius: 15px; /*raio de 15px para todos os cantos*/
			}
		</style>
	</head>
	<body>
		<div>A propriedade border-radius permite adicionar cantos arredondados aos elementos.</div>
	</body>
</html>

O código CSS acima aplicará o seguinte estilo ao elemento <div>:

Aplicar “border-radius: 15px;” é equivalente à expressão reduzida de “border-top-left-radius: 15px; border-top-right-radius:15px; border-bottom-right-radius: 15px; border-bottom-left-radius: 15px;”. Ambas aplicam raio de 15px nos quatro cantos.

Agora vamos substituir o código CSS do exemplo anterior por este:

	div {
		border:3px solid #cc0000;
		padding:10px;
		background:#ff0000;
		width:200px;
		border-radius: 30px 25px 20px 10px;
	}

O código CSS acima aplicará o seguinte estilo ao elemento <div>:

Aplicar “border-radius: 30px 25px 20px 10px;” é equivalente à expressão reduzida de “border-top-left-radius: 30px; border-top-right-radius:25px; border-bottom-right-radius: 20px; border-bottom-left-radius: 10px;”. Ambas aplicam raios de 30px no canto superior esquerdo, 25px no canto superior direito, 20px no canto inferior direito e 10px no canto inferior esquerdo, respectivamente. A imagem abaixo representa bem o que acontece:

Caso aplicássemos “border-radius: 30px 25px;” , as bordas superior esquerda e inferior direita teriam raio de 30px, assim como as bordas superior direita e inferior esquerda teriam raio de 25px.

Bordas arredondas com elipse

Até agora, vimos que é possível criar bordas arredondas com círculos, basta definir o tamanho do raio de cada um deles. Mas se quisermos arredondar os cantos com elipses. Será que é possível? Claro que sim, porém a sintaxe da propriedade border-radius muda. Vamos ver:

	div {
		border:4px solid #ffd700;
		padding:10px;
		background:#ffff00;
		width:200px;
		border-top-left-radius: 30px 20px;
		border-top-right-radius: 10px 30px;
		border-bottom-right-radius: 30px 20px;
		border-bottom-left-radius: 10px 30px;
	}

O código CSS acima aplicará o seguinte estilo ao elemento <div>:

Vamos entender melhor, as propriedades border-top-left-radius, border-top-right-radius, border-bottom-right-radius e border-bottom-left-radius possuem 2 (dois) valores cada uma. O primeiro valor representa o raio horizontal da elipse e o segundo valor, o raio vertical. Veja abaixo:

A expressão reduzida para se obter o mesmo efeito anterior é “border-radius: 30px 10px / 20px 30px;”. Em que o primeiro valor (30px) representa o raio horizontal das bordas superior esquerda e inferior direita; o segundo valor (10px), o raio horizontal das bordas superior direita e inferior esquerda; o terceiro valor (20px), o raio vertical das bordas superior esquerda e inferior direita; e o quarto valor (30px), o raio vertical das bordas superior direita e inferior esquerda.

Considerações importantes

A propriedade border-radius é suportada pelos navegadores IE9+, Firefox 4+, Chrome, Safari 5+, e Opera.
Espero que o tutorial tenha sido de grande valia e tenha agradado a todos.

Deixe seu comentário e inscreva-se no Feed RSS do Scriptmaster.

Abraço e até o próximo tutorial.

Frequentemente, vejo o Google Maps sendo utilizado em blogs, sites e hotsites, para mostrar a localização de endereços de grandes eventos, escritórios, empresas, lojas, restaurantes, localização de anunciantes de classificados e muito mais. Isso traz maior conforto ao usuário, uma vez que não há a necessidade de se sair da página para efetuar a busca e localização do endereço indicado em outro blog ou site.

Existem 3 (três) métodos para se colocar mapas do Google Maps no seu blog ou site. O primeiro método é o mais simples e não requer nenhum conhecimento de programação, pois utiliza o código gerado pela página do próprio Google Maps. O segundo método gerará uma imagem chamada mapa estático. Você insere parâmetros no atributo src do elemento HTML <img> como zoom, coordenadas, tamanho, tipo de mapa, extensão da imagem que será gerada, tipo de marcadores, etc. e uma imagem será gerada com a localização especificada. O terceiro método gerará um mapa dinâmico. Esse mapa é parecido com o da página do Google Maps, podendo-se aumentar ou diminuir o zoom, mudar o tipo de mapa, percorrer o mapa gerado com o Google Street View, tudo isso dinamicamente.

Se você deseja somente uma representação no mapa de um endereço ou localidade, utilize o primeiro método. Agora se você precisa manipular variáveis e coordenadas armazenadas em bancos de dados, utilize o segundo ou terceiro método.

Gerando um mapa através da página do Google Maps

Vamos gerar um mapa, utilizando o primeiro método. Acesse a página do Google Maps, digite o endereço desejado na barra de endereço e clique na lupa para pesquisar. Quando o endereço buscado aparecer no mapa, clique no terceiro botão identificado como ‘Link’ na figura abaixo.

Uma pequena caixa surgirá à direita, oferecendo 2 (duas) opções. Uma com o link que deverá ser colado em e-mails, chats ou páginas, levando o usuário ao mapa quando clicado; e a outra com o código HTML que gerará o mapa e deverá ser colado no seu site ou blog. Veja a imagem abaixo.

Ao clicar no link ‘Personalizar e visualizar mapa incorporado’, é possível modificar o tamanho do mapa gerado. Feitas as modificações, é só copiar o código e colar no seu site ou blog.

Tem interesse em saber quais são as coordenadas (latitude e longitude) do endereço? É muito simples. Basta copiar o código que gera o link para e-mails e mensagens instantâneas e colar em algum processador de texto. O código teria o seguinte formato:

“http://maps.google.com.br/maps?q=Rua+Prof.+Eurico+Rabelo,+s%2Fn%C2%BA+,+Maracan%C3%A3,+rio+de+janeiro&hl=pt-BR&ie=UTF8&ll=-22.913871,-43.23103&spn=0.004941,0.008497&sll=-22.912537,-43.23089&sspn=0.004941,0.008497&t=h&z=17”

Perceba que os parâmetros são separados, utilizando-se o caractere ‘&’. O parâmetro “q” indica o endereço pesquisado, o “hl” indica o idioma, o “ie” o conjunto de caracteres e o “ll” indica a latitude e a longitude, que neste caso são -22.913871 e -43.23103. Caso digite a latitude e a longitude, separadas por vírgula, na barra de endereço e clique na lupa para buscar, o Google Maps levará ao mesmo endereço.
Pronto, agora você também já sabe como obter as coordenadas (latitude, longitude) de um endereço.

Um mapa estático é mais simples do que você imagina

Quem conhece HTML sabe que a tag <img> é utilizada para exibir imagens. Sua estrutura é muito simples, veja:

	<img  src=”endereço_da_imagem” alt=”texto_alternativo” /> 

	<!--
	o atributo src contém o endereço da imagem e o atributo alt contém
	um texto alternativo que será exibido caso a imagem não possa ser visualizada.
	-->

É com base nessa estrutura que vamos trabalhar para gerar um mapa estático do Google Maps. Vamos a um exemplo:

<!--
Observe a estrutura do atributo src.
-->
<img  src=”http://maps.google.com/maps/api/staticmap?center=-22.91387,-43.231031&zoom=12&size=400x400&sensor=false” alt=”Exemplo de mapa estático” />

A estrutura base de uma URL para gerar mapas estáticos sempre será http://maps.google.com/maps/api/staticmap?parâmetros, em que ‘parâmetros’ representa o local onde virão as configurações de exibição do mapa. No exemplo acima, o parâmetro ‘center’ indica o centro do mapa com a latitude e longitude separadas por vírgula, o parâmetro ‘zoom’ indica o nível de aproximação, ’ size’ o tamanho do mapa e ‘sensor’ se as coordenadas foram fornecidas por dispositivo móvel ou não. A estrutura base da URL não poderá ultrapassar 2.048 caracteres.

Veja abaixo os principais parâmetros para gerar um mapa estático.

• center (obrigatório, se não houver marcadores) – define o centro do mapa;
• zoom (obrigatório, se não houver marcadores) – nível de zoom do mapa. Valor máximo 21;
• size (obrigatório) – define tamanho do mapa. 400×400 exibe um mapa de 400 pixels por 400 pixels. Valor máximo 640×640;
• format (opcional) – formato da imagem resultante. Pode ser png8, png, png32, gif, jpg, jpg-baseline;
• maptype (opcional) – define o tipo de mapa a ser construído. As opções são: roadmap, satellite, hybrid e terrain;
• markers (opcional) – define um ou mais marcadores para coordenadas especificadas. Possui 3 atributos: size, color e label, todos opcionais. O atributo size pode assumir os valores tiny, mid e small, o atributo color pode assumir cores de 24 bits (0xFFFFCC) ou cores pré-definidas (black, brown, green, purple, yellow, blue, gray, orange, red, White), já o atributo label especifica um único caractere alfanumérico em caixa alta entre A-Z e 0-9 para identificar o marker (marcador);
• Path (opcional) – usado para exibir um caminho. Possui 3 atributos: weight, color e fillcolor, todos opcionais. O atributo weight especifica a espessura da linha em pixels (padrão 5 pixels), o atributo color segue as mesmas regras do atributo color do parâmetro markers, e o atributo fillcolor configura a cor de preenchimento quando o caminho sai da área poligonal;
• Sensor (obrigatório) especifica se o aplicativo que está solicitando o mapa estático está usando um sensor para determinar a localização do usuário. Aceita os valores ‘true’ ou ‘false’.

Lembrando que cada par ‘parâmetro=valor’ deve ser separado pelo caractere &.

Mapas estáticos na prática

Exemplo 1: mapa estático sem marcador e tipo de mapa roadmap.

<!--
mapa estático sem marcador e tipo de mapa roadmap
-->
<img  src=”http://maps.google.com/maps/api/staticmap?center=-22.91387,-43.231031&zoom=12&size=400x400&sensor=false” alt=”Exemplo de mapa estático 1” />

Clique e veja o exemplo 1.

Exemplo 2: mapa estático com 1 (um) marcador e tipo de mapa satélite.

<!--
mapa estático com 1 (um) marcador e tipo de mapa satélite
-->
<img  src=”http://maps.google.com/maps/api/staticmap?markers=-22.91387,-43.231031&zoom=17&size=400x400&maptype=satellite&sensor=false” alt=”Exemplo de mapa estático 2” />

Clique e veja o exemplo 2.

Exemplo 3: mapa estático com 3 marcadores customizados formando a palavra ‘olá’, tipo de mapa satélite e formato da imagem png.

<!--
mapa estático com 3 marcadores customizados formando a palavra ‘olá’,
tipo de mapa satélite e formato da imagem png
-->
<img  src=”http://maps.google.com/maps/api/staticmap?markers=color:blue|label:O|-22.91387,-43.232000&markers=color:green|label:L|-22.91387,-43.231500&markers=color:red|label:A|-22.91387,-43.231000&zoom=15&size=512x512&maptype=satellite&format=png&sensor=false” alt=”Exemplo de mapa estático 3” />

Clique e veja o exemplo 3.

Exemplo 4: mapa estático com um caminho e tipo de mapa hybrid.

<!--
mapa estático com um caminho e tipo de mapa hybrid
-->
<img  src=”http://maps.google.com/maps/api/staticmap?path=color:0xff0000ff|weight:5|-22.91387,-43.232000|-22.91387,-43.231500|-22.91387,-43.231000|-22.91387,-43.230500
&zoom=14&size=512x512&maptype=hybrid&format=png&sensor=false” alt=”Exemplo de mapa estático 4” />

Clique e veja o exemplo 4.

Como se pode ver não existem mistérios para se gerar mapas estáticos, porém é uma solução que ganha poder quando utilizada em conjunto com server side scripts e banco de dados. Todos o parâmetros podem ser modificados dinamicamente utilizando-se variáveis. Isso dá uma flexibilidade incrível ao recurso oferecido pelo Google.

Com o mapa dinâmico não tem limites

As possibilidades de criação com mapas dinâmicos do Google Maps são tantas, que é impossível cobrir todas as funcionalidades em um tutorial. Para se ter uma idéia, é possível exibir posições (localizações) dinamicamente no mapa, gerando a sensação de movimento, à medida que um dispositivo móvel (smart phone, notebook, netbook, GPS e outros) envia dados de posição para um sistema de informação. Essa é uma das inúmeras aplicações que um mapa dinâmico pode ter.

Portanto, neste tutorial, vamos nos ater a gerar o mapa e exibir uma posição. Primeiramente, construiremos a nossa estrutura HTML e escolheremos um local para exibição do mapa.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>Como criar mapas do Google Maps</title>

	</head>

<body>

		<div class="resultado">

			<h1>Exemplo de mapa dinâmico</h1>
			<div id="map_canvas"></div>

		</div>	

</body>
</html>

O mapa será gerado no interior do elemento <div>, identificado pelo id ‘map_canvas’. A classe ‘resultado’ será construída mais à frente, pois é ela quem dará estilo à exibição do HTML. Vamos ao JavaScript que criará o mapa.

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
  	function initialize() {
    		var latlng = new google.maps.LatLng(-22.91387,-43.231031);
    		var myOptions = {
      		zoom: 17,
      		center: latlng,
      		mapTypeId: google.maps.MapTypeId.SATELLITE
    		};
    		var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    		var marker = new google.maps.Marker({
    			 	position: latlng,
    			      map: map,
    			      title:"Hello World!"
    			  });
  	}
</script>

A primeira tag <script> carrega dos servidores do Google Maps o código-base que permite a criação e manipulação do mapa. A segunda tag <script> contém a função ‘initialize’ que será responsável pela criação do mapa e sua configuração. O objeto ‘latlng’ contém as coordenadas (latitude e longitude), já o literal de objeto ‘myOptions’ contém as configurações do mapa (zoom, center – centro do mapa e mapTypeId – tipo de mapa) e o objeto ‘map’ cria o mapa no local especificado(‘map_canvas’) e aplica as configurações do ‘myOptions’. O objeto ‘marker’ define o marcador no mapa.

Para que o mapa seja renderizado, é necessário inserirmos o código JavaScript anterior no elemento <head>, bem como inserirmos o evento ‘onload’ na tag <body>, o qual chamará a função ‘initialize’ assim que a página for totalmente carregada.

Abaixo, veja o código completo juntamente com CSS para aplicar o estilo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>Como criar mapas do Google Maps</title>
		<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
		<script type="text/javascript">
  			function initialize() {
    			var latlng = new google.maps.LatLng(-22.91387,-43.231031);
    			var myOptions = {
      			zoom: 17,
      			center: latlng,
      			mapTypeId: google.maps.MapTypeId.SATELLITE
    			};
    			var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    			var marker = new google.maps.Marker({
    			      position: latlng,
    			      map: map,
    			      title:"Hello World!"
    			  });
  			}
		</script>

		<style type="text/css">

			body {
				text-align: center; /*centraliza no IE*/
			}
			.resultado {
				width: 500px;
				margin-top: 20px;
				margin-left: auto;
				margin-right: auto;
				text-align: center;
			}
			.resultado h1 {
				font-size: 1.3em;
				background: #4682b4;
				color: #fff;
				border: 2px double #b0c4de;
			}
			.resultado #map_canvas {
				width: auto;
				height: 500px;
				border: 1px solid #4682b4;
			}

		</style>

	</head>

	<body onload="initialize()">

	<div class="resultado">

		<h1>Exemplo de mapa dinâmico</h1>
		<div id="map_canvas"></div>

	</div>	

</body>
</html>

Clique e veja o mapa dinâmico criado.

Considerações Finais

Este post apresentou as diversas formas de se gerar mapas com o Google Maps, porém as possibilidades não se esgotam por aqui. Existem inúmeros detalhes que ainda podem ser abordados para atender as mais diversas necessidades. E como as aplicações desta ferramenta são inúmeras, o limite vai até onde a imaginação permitir.

Espero que tenha sido útil e você tenha gostado. Este tutorial foi feito com muito carinho.

Deixe seu comentário e inscreva-se no Feed RSS do Scriptmaster.

Abraço e até o próximo tutorial.

É importante ressaltar que existem diversos fatores que influem na velocidade de conexão, como: qualidade e limitações de hardware (cabos, roteadores, modem, memória, etc.), carga de processamento que a CPU está sendo submetida, sobrecarga de memória, interferências, distância dos dados solicitados, quantidade de servidores que esses dados passarão e suas respectivas velocidades, quantidade de usuários realizando transferência de dados simultaneamente, dentre outros.

Portanto, exigir que uma medição represente com exatidão a velocidade real é praticamente impossível. O máximo que é alcançado com os algoritmos é uma aproximação do valor real.

Vamos ao tutorial!

Técnica Utilizada

Para poder efetuar a medição, precisamos ter dados para transferir. Para isso, criaremos um arquivo de texto de 100KB no servidor, iniciaremos a transferência dos dados para a máquina local que está realizando o teste, anotaremos o tempo inicial e final da transferência, e por fim calcularemos a velocidade da conexão, a taxa de transferência e a duração do teste.

Um fator que dever ser levado em consideração é o cache do navegador. Para evitar que ele crie uma cópia da página na máquina local e interfira na medição, precisamos criar um header anti-caching.

Criação do Header Anti-Caching e do Arquivo para Transferência

Abaixo, o código PHP para criação do header anti-caching e do arquivo que será utilizado na transferência. No nosso tutorial, este código deverá ser posto na parte superior da página, acima do DOCTYPE. Veja:

<?php
	//Header anti-caching. Força a revalidação da página
	header("Cache-Control: no-cache, must-revalidate"); 

	// Expiração da página em cache no passado
	header("Expires: Sat, 26 Jul 1997 05:00:00 GMT"); 

	//Abre um arquivo para escrita ou cria um caso não exista
	$arquivo = fopen("medidor-de-velocidade-de-internet.txt","w");

	//Tamanho do arquivo em KB
	$tamanho = 100;

	for($x=0; $x<$tamanho; $x++) 

		//A função str_pad completa com 1024 '.' (pontos) a string da esquerda
		//Com isso cada looping é escrito 1KB no arquivo
		fwrite($arquivo, str_pad('', 1024, '.'));

	//Fecha o arquivo
	fclose($arquivo);

	//Pega todos os dados do arquivo recém criado
	//Estes dados serão utilizados na transferência do arquivo
	$dados = file_get_contents("medidor-de-velocidade-de-internet.txt");
?>

Medição da Velocidade de Conexão, Taxa de Transferência e Duração do Teste

Abaixo, o código JavaScript utilizado para cálculo da Velocidade de Conexão , Taxa de Transferência e Duração do Teste. No nosso tutorial, este código deverá ser posto no head da página, ou seja, entre as tags “<head></head>”. Veja:

<script type="text/javascript">

	//Pega o tempo inicial e final da medição e passa para segundos
	function pegaTempo(){
		return (new Date().getTime())/1000;
	}

	//Velocidade da conexão em Kbps
	var velocidadeConexao = function(){

		//Passa o tamanho do arquivo de KiloBytes para bits
		//e divide pela duração da medição (bits/segundo)
		var veloc = (<?php echo $tamanho;?>)*1024*8/(fim - inicio);

		var num_veloc = new Number();

		//Passa para Kilobits/segundo
		num_veloc = veloc/1000;

		//Limita a 2 casas decimais
		veloc = num_veloc.toFixed(2);

		//Retorna o valor da velocidade no elemento html velocidade
		document.getElementById("velocidade").innerHTML = veloc+" Kbps";
	}

	//Taxa de transferência em KB/s
	var taxaDeTransferencia = function(){

		//Pega o tamanho do arquivo e divide pela duração da medição
		var taxa = (<?php echo $tamanho;?>)/(fim - inicio);

		var num_taxa = new Number();
		num_taxa = taxa;

		//Limita a 2 casas decimais
		taxa = num_taxa.toFixed(2);

		//Retorna o valor da taxa de transferência no elemento html taxa
		document.getElementById("taxa").innerHTML = taxa+" KB/s";
	}

	//Duração do teste
	var duracao = function(){
		var tempo = fim - inicio;

		var num_tempo = new Number();
		num_tempo = tempo;

		//Limita a 2 casas decimais
		tempo = num_tempo.toFixed(2);

		document.getElementById("tempo").innerHTML = tempo+" s";
	}

	//Carrega as funções ao término do carregamento da página
	window.onload = function (){
		velocidadeConexao();
		taxaDeTransferencia();
		duracao();
	}

</script>

Aparência do Resultado

CSS para melhorar a aparência do resultado. Este código deverá ser posto no head da página, ou seja, entre as tags “<head></head>”. Veja:

<style type="text/css">

	body {
		text-align: center; /*centraliza no IE*/
	}

	.resultado {
		width: 25%;
		margin-top: 20px;
		margin-left: auto;
		margin-right: auto;
		text-align: center;
	}
	.resultado h1 {
		font-size: 1.3em;
		background: #4682b4;
		color: #fff;
		border: 2px double #b0c4de;
	}
	.resultado table {
		width: 100%;
		border: 1px solid #4682b4;
	}
	.resultado table th {
		text-align: right;
		padding: 4px;
		background: #4169e1;
		color: #fff;
	}
	.resultado table td {
		text-align: center;
		padding: 4px;
		background: #b0c4de;
		color: #ff0000;
		font-size: 0.9em;
		font-weight: bold;
	}

</style>

Página com os Resultados da Medição da Velocidade de Conexão

Esta seção é a mais importante, pois é nela que vamos montar o quebra-cabeça. Vejamos. Logo abaixo da tag “<title>”, no lugar do comentário, deverá entrar o trecho de código do CSS e em seguida do trecho de código do JavaScript, vistos anteriormente.

Logo abaixo da tag <body>, vem a parte crítica do nosso código, pois é ali que o teste acontece. A variável inicio, presente no primeiro trecho de código JavaScript, armazena o tempo inicial do teste, e a variável fim, presente no segundo trecho de código JavaScript, armazena o tempo final do teste.

É neste trecho de código, <!– $dados –>, que os dados do arquivo que está no servidor serão gerados. Porém, eles não aparecerão no navegador da máquina local porque estão comentados. Mas se você quiser vê-los, exiba o código-fonte da página. Aí sim, poderá ver os dados que foram enviados para a realização do teste.

E por último, criamos uma tabela para exibição do resultado.

Veja o código abaixo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
        <head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>Velocímetro de Internet</title>
		<!-- *** Aqui devem vir os códigos do CSS e JavaScript *** -->
	</head>

	<body>

	<?php
		//Inicia o teste
		echo <<<TESTE

				<script type="text/javascript">
					var inicio = pegaTempo();

				<!-- $dados -->

				<script type="text/javascript">
					var fim = pegaTempo();
				</script>
TESTE;
		?>

	<div class="resultado">

		<h1>Velocímetro de Internet</h1>

		<table>
			<tr>
				<th>Velocidade da Conexão:</th>
				<td id="velocidade"></td>
			</tr>
			<tr>
				<th>Taxa de Transferência:</th>
				<td id="taxa"></td>
			</tr>
			<tr>
				<th>Duração do Teste:</th>
				<td id="tempo"></td>
			</tr>
		</table>
	</div>	

</body>
</html>

Considerações Importantes

1ª) K para medida de armazenamento equivale a 1024 e K para medida de velocidade equivale a 1000. Por isso a necessidade de transformação de 100KB em bits (100*1024*8 = 819200 bits), para depois, no cálculo da velocidade, dividir por 1000 e transformar em Kbps;

2ª) Na string heredoc TESTE, o código JavaScript para pegar o tempo inicial e final da medição e os caracteres acima e abaixo do código de geração dos dados () podem afetar o resultado da medição da velocidade de 1kbps até 5kbps;

3ª) Quanto maior for o tamanho do arquivo criado, maior será a precisão da medição. Porém não crie um arquivo muito grande, pois fará com que o teste demore muito. O ideal é que o arquivo tenha até 512KB;

4ª) Ao criar o link para o medidor, você pode inserir um parâmetro na url para gerar uma string aleatória. Isso também impede que o cache do navegador afete o resultado. Exemplo: http://www.meusite.com.br/medidor_de_velocidade.php?nocache=a7E34teAsk;

5ª) A função microtime() do PHP não foi utilizada para cálculo de tempo, pois calcularia o tempo de execução do script no servidor. Isso nos daria velocidades irreais e astronômicas na casa dos Gbps;

6ª) Ao realizar o teste, feche todos os programas e janelas do seu computador para obter um resultado mais apurado da velocidade da sua internet;

7ª) Lembre-se do que falei no início do tutorial. Vários fatores influenciam a medição da velocidade de conexão com a internet. Portanto, são valores aproximados.

Considerações Finais

Espero que tenha sido útil e você tenha gostado. Este tutorial foi feito com muito carinho.

Deixe seu comentário e inscreva-se no Feed RSS do Scriptmaster.

Abraço e até o próximo tutorial.

Link de demonstração: Medidor de velocidade de conexão com a internet
Link de download do código: Download medidor de velocidade de conexão com a internet