PushState no HTML – Pra mudar a url do browser sem dar Refresh

Lembro até hoje o dia que ví um site mudando a url do navegador sem dar refresh: “que bruxaria é essa?”. Era um tema de blogspot que o Google tinha desenvolvido.

A função pushState do objeto History do javascript serve pra isso. Altera a url sem recarregar a página, desde que seja no mesmo domínio.

Veja os dois exemplos. Clique e depois olhe a sua barra de endereços:

Exemplo 1: /teste

Exemplo 2: /url-falsa-sem-dar-refresh

A função é simples.

history.pushState(data,titulo,nova_url);

O primeiro parâmetro serve pra passar informações ao objeto history (dá pra passar até 640 kbytes de váriaveis) pra ser acessado depois.
O segundo parâmetro seria o título da página.
O terceiro parâmetro é a url relativa que você vai passar “/teste” foi usado no exemplo. Obviamente, a url tem que ser do mesmo domínio da url original.

Ou seja, o exemplo foi feito assim:

<a href="#" onclick="history.pushState('teste','Titulo de teste','/teste'); return false;">/teste</a></h2>

Mas o que dá pra fazer com isso?

Dá pra fazer Single Page Aplications que tenham, de verdade, links únicos sendo tudo indexado pelos buscadores de maneira correta.

Antigamente, se trabalhava com location.hash ( tipo http://www.site.com#!/quem-somos )

E com isso, chamando a url corretamente é possível controlar a mesma página via server side para deixar uma resposta pra Ajax e outra normal.

if( (!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest')){
    include('header.php');
}

// conteudo

if( (!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest')){
    include('footer.php');
}

Essa funcionalidade já está disponível pra Safari, Chrome, Firefox, IE10, etc..
Só no IE9 que não funciona.

De toda forma, recomendo (muito) o uso disso pra aplicações mobile.

IE6 morreu, e agora? O que dá pra fazer diferente no HTML / CSS?

Pedimos por anos a morte do IE6 e hoje considero ele morto, mas e aí? Agora é começar a xingar o IE7 e fazer as mesmas coisas? Nem tanto, algumas possibilidades que não usávamos, podem ser exploradas.

E a grande notícia é que o uso de IE7 vai caindo drasticamente. Hoje segundo a global stats, IE6 no Brasil está na casa de 8%, enquanto IE7 bate cerca de 5% do total.

Então, veja a gama de features que podemos usar se não formos nos preocupar com o IE6.

  • CSS Attribute selectors
  • min-height / max-height / min-width / max-width
  • General Sibling Selector
  • Float Left + Margin Left
  • border-color: transparent
  • Porcentagem na margin / padding
  • position:fixed
  • png24
  • :hover em qualquer elemento
  • > no css (filho direto)

Veja uma pequena apresentação que fiz falando de cada uma dessas features:

Mas e o FDP que ainda usa IE6?

Recomendo usar o IE7.js que minimiza os bugs do browser, vai rodar tipo LENTO, mas se o cara ainda usa IE6, não deve ser alguém muito preocupado com performance, né?

Novas possibilidades com o Google Maps

O Google Maps foi lançado em fevereiro de 2005 e nesses 6 anos ele virou referência pra se indicar um lugar, na internet. E hoje ele está dentro de qualquer smartphone; nos traça rotas de carro / ônibus; mostra como está o transito; o StreetView do maps está presente em 36 países.

E as aplicações neles estão crescendo. Listei 10 sites e experimentos de programadores (isso significa sem design nenhum) fuçando novas possibilidades pro Google Maps:

1 – Dual Maps

Dual Map no Google Maps
Aplicação que sincroniza o Google Maps, o StreetView e a visão aérea do mesmo local.

2 – Stas Kulesh

Fotos do Flickr  no Google Maps
Monta um mosaico de fotos do Flickr no Maps e deixa navegar nele.

3 – Valor do Taxi

Calculadora de Taxi no Google Maps
Escolha dois endereços e o site calcula a rota e um valor aproximado de uma viagem de taxi do ponto A ao B.

4 – MegaFoto

MegaFoto no Google Maps
Aquele esquema de gigafotos é possível fazer usando o google maps.
Nesse caso eu que fiz um teste (#VaiCorinthians). Mas teve algum site que já usou isso comercialmente mesmo.

5 – Pop Places (Made In Web)

Pilote um avião no Google Maps
Uma espécie de game / site interativo, que traça uma rota pra você pilotar um avião dentro do maps. Foi desenvolvido como um case pra um concurso de HTML5 do Google.

6 – Rota animada

Rota animada no Google Maps
Percorre uma rota animada com um carrinho feio do ponto A ao ponto B.

7 – TwitterVision

Aplicação usando o Google Maps
Na verdade quando fui tirar o print não estava funcionando, mas basicamente ele procurava algo no twitter, identificava o lugar de origem do post e apontava no mapa onde foi postado (movendo o mapa) e aparece a mensagem do tweet com a foto de que publicou. O efeito é legal. Fiz algo parecido pra click em 2009 mas acabou não sendo aproveitado.

8 – Los Angeles Firemap

Mapa de incêndio no Google Maps
Quando houve o grande incêndio em Los Angeles, o site Los Angeles Times publicou um mapa estilizado, desenhando os pontos de risco, pontos de evacuação, etc.

9 – ShowStreet

Street View e Google Maps juntos
Site que mostra o Google Maps sincronizado com o StreetView

10 – Guiarte

Aplicativo usando o Google Maps
Pega fotos do próprio maps e adiciona no mapa antes de ter que escolher o local.