Negócios na Net

REDEBIZ.NET - Negócios na Net: tudo o que precisa saber para o seu sucesso online.

Subscreva o Feed de Notícias e receba no seu mail todas as novidades.
O que lê neste artigo resulta do meu trabalho.Não existem aqui conteúdos copiados. Todos os artigos têm uma assinatura digital. Se é daquela minoria que gosta de roubar o trabalho dos outros agradeço que não o faça, até porque eu vou descobrir.

Autor: Webmaster

Junho 30, 2011

Detetar e redirecionar smartphones

Com a perspectiva de crescimento explosivo do mercado dos smartphones e, em consequência, da Mobile Web cada vez se torna mais importante desenhar software para uso exclusivo deste ambiente. O layout dos sites concebidos a pensar no “desktop” não se adapta geralmente bem a este mercado por duas ordens de razões: a primeira é o peso relativo dos ficheiros carregados: como é sabido quer a velocidade quer os custos das comunicações móveis são – para já – pouco compatíveis com esse tipo de utilização; depois a dimensão (e formato) dos ecrãs é totalmente diferente, o que torna a visulalização das páginas “tradicionais” bastante penosa e por vezes praticamente ilegível no seu todo.

Alguns browsers para o mercado mobile (como o Opera) têm feito um excelente trabalho para resolver esta situação, mas sejamos claros: os terminais móveis (smartphones e PDAs) precisam de sites desenvolvidos especificamente para eles. Numa série de 3 artigos vou falar sobre esta matéria, indo começar agora pela questão um pouco mais técnica da detecção e redirecionamento automáticos dos utilizadores quando estes chegam a um site “desktop”. Isto pode ser feito em 3 passos, segundo a metodologia que eu mesmo sigo1:

1. Detectar o ecrã

A primeira pergunta que eu faço é? Quantos pixeis tem o ecrã que está a vir ao meu site? Se, digamos, tiver menos de 600 pixeis, decerto que é um dispositivo móvel (mas se o não for também não há problema , porque qualquer site normal não foi feito a pensar em resoluções tão pequenas)2.

Esta detecção é feita logo no index.php3 ou outro ficheiro que esteja presente no arranque através de uma rotina deste tipo:

 
<?php 
if ($_GET["op"] != "nomobile") { 
 echo('<script type="text/javascript">
//<![CDATA[
 if (screen.width <= 600) {
 window.location.replace("http://redebiz.net/site/mobile/")
 }
//]]>
 </script>'); 
} 
?> 

Como se pode ver há umas linhas em JavaScript já que o PHP não tem nenhuma instrução para detectar a resolução dos ecrãs. Mas o que diz o código acima?

1 – Se alguém vier “de fora” e não “carregar” consigo a variável “op” com o valor “nomobile”, então…

2 – Se o ecrã tiver uma resolução igual ou inferior a 600px;

3 – É redirecionado automaticamente para o ficheiro index.php que se encontra no directório “mobile”.4

2. Mandar Smartphones para um lado e os restantes para outro

Agora que todos os “pequeninos” foram enviados para o mesmo lado há que resolver a velha máxima: “todos os telefones são iguais só que alguns são mais iguais do que outros”….

Assim, chegando ao directório ou sub-domínio onde os “Sub-600″ vão parar há que distinguir se estamos a falar de um iPhone, Blackberry, Android ou Palm Pre, ou de algo de um “campeonato” diferente5.

A minha abordagem é a seguinte:

1 – Os mais pequenos (em termos de ecrãs) separo-os atribuindo-lhe diferentes folhas de estilo dentro do mesmo “visual”;

2 – Os maiores “levam” com um site específico para eles, sendo que este também possui diferentes folhas de estilo (CSS) para evitar problemas com o display devido a diferentes dimensões de ecrãs, possibilidade de estes serem colocados na horizontal, terem “touch screens”, etc.

Assim, no site chamado há pouco automaticamente, há alguns smartphones que vão continuar o seu percurso e “aterrar” ainda noutra página…

Portanto, no recém chegado index.php vai-se ainda encontrar a seguinte rotina:

 
<?php 
$agent = $_SERVER['HTTP_USER_AGENT']; 
 if (ereg("iPhone|iPod|BlackBerry|Android |PalmSource)", $agent) !=false) 
 { 
 echo('<script type="text/javascript">
 window.location.replace("./smart/smart.php");
 </script>'); 
 } 
?> 

O que é que ela diz?

1 – Se o telefone móvel for um dos do grupo assinalado…

2 – Não fica aqui e continua para outra página;

3 – Os restantes, ficam obedecendo às regras que forem determinadas nas folhas de estilo respectivas (mais uma pequena rotina em PHP e JavaScript):

 
<?php 
if (strstr($_SERVER['HTTP_USER_AGENT'], 'Symbian')) { 
echo " <link rel='stylesheet' type='text/css' href='./symbian.css' />"; 
} 
elseif (strstr($_SERVER['HTTP_USER_AGENT'], 'Opera Mini')) { 
echo "<link rel='stylesheet' type='text/css' href='./opera.css' />"; 
} 
else { 
echo " <link rel='stylesheet' type='text/css' href='./estilomob.css' />"; 
?> 

Quer o browser “Symbian”, quer o “Opera Mini” cobrem uma infinidade de telemóveis com capacidade de navegação na Internet, pelo que dificilmente algum fica de fora; de qualquer modo na última linha há uma configuração genérica que serve – em princípio – para qualquer situação não satisfeita por eles.

Telefone Móvel correndo site no Opera Mini 5 Beta

Site Móvel correndo no Opera Mini 5 Beta

Chamava aqui a atenção para a questão referida acima da importância do design específico das páginas que deve ser feito para este tipo de terminais6.

O design e os conteúdos dos “desktop” são totalmente inadequados aos exigidos pelos smartphones.

3. Personalizar as Folhas de Estilo (CSS)

Esta é a última tarefa que deve ser feita para qualquer categoria e de que já se deu um exemplo acima. Assim, igualmente no ficheiro smart.php têm-se definidos estilos para as diferentes famílias de “smartphones”. Isto porque, como também já se disse, estamos perante diferentes comportamentos dos browsers que eles utilizam.

Creio que é importante, em todo o caso, manter a coerência gráfica entre o site “pai” e todos os restantes, por duas ordens de razões:

a) Porque as pessoas podem permutar entre eles;

b) A identidade “corporativa” deve ser coerente em todo o lado, por uma questão de “marketing”.

Assim, neste caso o site visto num iPhone apareceria assim:

iPhone correndo o Site personalizado7

Ecrã de site no iPhone

Como já disse a pessoa poderá sempre optar por visitar o site “normal”, já que foi “forçada” a ir para o desenvolvido para o seu terminal específico. Para o efeito está sempre disponível um “link” para o fazer (no caso do iPhone é a casa de “telhado amarelo” da imagem). Ao premir nesse link a variável “opt” do código PHP exibido acima adquire o valor “nomobile” e assim a rotina com que tudo começou é simplesmente ignorada.

O site principal para comparação pode ser visto aqui: http://redebiz.net/site. É a partir dele que são directamente redirecionados os terminais móveis quando chegam ao site. Pode tentar fazê-lo do seu telemóvel / celular , se quiser. Vai ver que funciona ;-)

_____________

1 – Existem outras abordagens desta questão do redirecionamento, mas esta parece-me talvez a mais simples, clara e fácil de implementar.

2 – Mas como também explico ao visitante é sempre dada a opção de navegar no site “normal”.

3- Pois, temos de usar o PHP porque vamos precisar de executar algumas funções nesta linguagem.

4 – Este nome é arbitrário; em todo o caso a ideia é reenviar para o site onde se encontram as páginas para os telemóveis (celulares) e Smartphones.

5 – Peço desculpa à Nokia mas, por uma questão prática, vamos pôr os “Symbian” – num lugar à parte.

6 – Questão que vou abordar num artigo específico sobre este assunto: Design de Páginas para a Mobile Web.

7 – Se tiver um iPhone pode ver que o ecrã fica todo cheio, quer na horizontal, quer na vertical; no exemplo comprimiu-se a página para se poder ter uma perspectiva melhor do seu conteúdo.

Be Sociable, Share!

Comentários

  1. Webmaster

    Devido a um problema no WordPress o artigo anterior teve de ser eliminado, pelo que se perderam os 6 comentários que aqui estavam.
    Peço desculpa pelo facto.
    Obrigado.

    Miguel

    Comentário feito em:
    30 de Junho 2011
  2. Sergio Lisboa Moreira

    Olá, fiz o procedimento de redirecionamento conforme consta no site. Funcionou, ou seja, ao acessar pelo celular ele redireciona para a página mobile, porém quando o site é acessado pelo internet exporer através de um computador, ele fica todo desorganizado, desalinhado. Analisei o código e no trecho if ($_GET["op"] != “nomobile”) { quando substituo o ! por = ele resolve a questão do internet explorer, porém deixa de fazer o redirecionamento. Gostaria de pedir sua colaboração!!!

    Comentário feito em:
    23 de Outubro 2011
  3. Webmaster

    Isso acontece possivelmente porque a(s) folha(s) de estilo – CSS – que criou para a aplicação mobile não estão preparadas para o Internet Explorer, o que é normal já que este não é aqui preciso para nada.

    Não se pode é esquecer de na página mobile não permitir, tal como é explicado, que um browser desktop aceda.

    Comentário feito em:
    23 de Outubro 2011
  4. Elton

    Amigo poe exemplo tenho um site em flash e css, ambos tem a mesma estrutura, porém o flash tem mais interatividade, como ficaria para mim fazer com que automaticamente o script encontre onde estou navegando, por exemplo se tiver no celular o css, no computador o flash, se puder me ajudar ficarei grato

    Comentário feito em:
    17 de Novembro 2011
  5. Webmaster

    Para o mobile esqueça o Flash para sempre: o iPhone não o aceita; os Android ainda o aceitam mas o que se passa é que a própria Adobe já anunciou que vai abandonar o suporte do Flash para plataformas móveis. A solução é simples: se seguir o que está no meu “post” crie uma folha de estilos (CSS) ou eventualmente (preferível) uma página nova para o seu site mobile. A explicação que eu dou no meu post é para PHP; para o seu caso creio que terá de ser JavaScript. Passe daqui a mais uns dias que eu coloco a rotina de “desvio” em JS.

    Comentário feito em:
    17 de Novembro 2011
  6. Enrico

    Muito legal sua dica, fiz aqui e deu certo, porém meu site é em wordpress, como faço para ele carregar um arquivo chamado categoria.php onde fiz um menu bem grande só com as categorias? Pelo que pesquisei o wordpress carrega de uma forma mais complexa que um site comum, não basta uma simples URL.

    Comentário feito em:
    17 de Dezembro 2011
  7. Webmaster

    Tem de incluir no ficheiro de arranque do WordPress um redirect caso a visita venha de um dispositivo móvel.

    Comentário feito em:
    20 de Dezembro 2011
  8. Gustavo

    Ainda não testei, mas parece promissor, muito bom o seu artigo, parabéns!

    Comentário feito em:
    25 de Janeiro 2012
  9. Adriana

    thanks for share!

    Comentário feito em:
    27 de Fevereiro 2012
  10. Robson

    Cara, tu é fera mesmo, parabéns pelas dicas, experiente, competente e eficiente, você sabe o que faz!

    Abração!

    Comentário feito em:
    10 de Março 2012
  11. Dicarlos

    Muito bom teste e deu certo!

    Comentário feito em:
    27 de Agosto 2012

Coloque aqui o seu comentário

Formulário de contacto

Deixe as suas impressoes preenchendo os campos abaixo

Introduza o seu endereço de E-mail:

Delivered by FeedBurner