sexta-feira, 29 de abril de 2011

TUTORIAL: Emular navegador mobile no PC

Aqui vai um tutorial para emular navegadores mobile, como os dos celulares por exemplo. Isso pode ser uma boa para saber como algum site fica na versão mobile, para fazer testes caso não tenha como testar em um mobile, ou alguma outra coisa, cada um com sua criatividade.

É necessário usar o navegador Mozilla Firefox(clique aqui para baixar), pois é com um add-on feito para ele que vamos usar, então siga os passos abaixo já usando o Firefox.
Também vai ser necessário esse arquivo(useragentswitcher.xml) com algumas emulações, então baixe ele no link abaixo:
http://www.4shared.com/document/epKZv_jX/useragentswitcher.html
1 – Instale o User Agent Switcher(clique aqui para baixar) no Firefox, e depois de instalado vai pedir para reiniciar o navegador, e faça isso para que possa funcionar corretamente.

2 – Depois de instalado, vai ter essa função como na figura abaixo, e siga como na figura para entrar na edição do User Agent, que é onde vamos instalar as emulações.

3 – Clique no local onde pede na imagem abaixo.

4 – Agora é a hora de usar aquele arquivo que foi pedido para baixar la no inicio do post, o useragentswtcher.xml, com o procedimento acima, vai aparecer essa tela da imagem abaixo, e ai faça como pede nela.

5 – Pronto, os emuladores que tinham no arquivo .XML foram instalados, e vai aparecer como mostra na figura abaixo, e de OK como pede abaixo.

6 – Nessa parte é que vai escolher qual mobile quer emular, que basta escolher um clicando no que queira, ai pode navegar em sites como se estivesse em um celular. E para voltar ao normal, basta escolher o item que demonstra na imagem abaixo.

7 – Agora essa parte é opcional, que seria para adicionar outros mobiles alem daqueles do arquivo .XML.
Acesse esse site: http://www.tera-wurfl.com/explore/browse
Nele é que vai pegar outras informações para adicionar mais emuladores de navegador, que no caso da imagem abaixo, foi escolhido o Nokia N85 como exemplo.
Ao fazer a sua escolha, vai aparecer uma informação como essa mostrada abaixo(pode ocorrer de não ter, ai tem que buscar outra fonte de informação), e copie o texto como mostra abaixo.


8 – Faça como pede no item 2 para aparecer essa tela, e ai faça como pede na imagem abaixo.

9 – Ai vai aparecer essa tela abaixo, e faça como pede, que em Description pode ser de sua escolha, não influencia em nada, mas no User Agent, coloque aquele texto que tinha pego no item 7, o resto deixa em branco e de OK.

10 – Pronto, ai esta instalado sua nova emulação de navegador, é só dar OK.

11 – Ai este ele para selecionar.

Finalizando:
Pronto ai esta tudo explicado, mas para alguns que ficam pensando oque poderia fazer com isso, fiquem ligados, pois tem uma segunda parte  do post,  que é uma coisa bem legal do que se pode fazer com isso, por enquanto deixo só na curiosidade.
FIM

Nenhum comentário:

Postar um comentário