Pisito en Madrid

La incursión de los móviles en Internet es imparable. Debido a este hecho y a las limitaciones de descarga y velocidad y a las tarifas excesivas todas las webs y blogs deberían tener su versión móvil, que cargue más rápido y con menos peso. Realizar una "movilización" de una página web no es tarea sencilla si la creas tú mismo desde cero pero con este tutorial voy a interntar proponer una forma rápida y sin mucho esfuerzo para conseguir la versión móvil de nuestra web o blog.

Identificar los usuarios móviles

Antes de nada debemos identificar qué usuarios son móviles. Para ello sólo hay que preguntar al HTTP_USER_AGENT por el navegador y comparar su valor con un array de navegadores móviles. Gracias a Webdebolsillo no he tenido que darle mucho al coco. Una vez identificados debemos pensar qué hacer con ellos. Yo propongo lo siguiente: si no son usuarios móviles no hacer nada (se cargará la página de forma habitual) pero si lo son habría que llevarlos a una web donde puedan decidir si ir a la versión móvil o si seguir en la normal.

Esto es bastante sencillo pero para que no nos pregunte cada vez que introduzcamos una dirección de nuestro blog o que no tenga que comprobar que estamos en un pc vamos a jugar un poco con las variables sesión. Tendremos dos variables: versionMovil y versionWeb. Según el valor de éstas haremos una acción u otra. También hay que tener en cuenta desde donde nos ha llegado el visitante (no todos entran por la portada) por lo que si entra directamente a un post y le hacemos la pregunta de "¿versión móvil o no?" al responderla deberemos redirigirlo al post de donde venía. Para ello creamos otra variable de sesión, url, que almacene esa dirección. He copiado mi código final y he explicado sobre él cada parte ya que creo que es más claro:

< ? php session_start();

//Guardamos de dónde ha venido el usuario
$_SESSION["url"] = $_SERVER["HTTP_HOST"].$_SERVER["REQUEST_URI"];

//Comprobamos que de momento no se ha inicializado las variables móvil y web
if(($_SESSION["versionMovil"]!='on') && ($_SESSION["versionWeb"]!='on'))
{
$dm_usergent = array(
'PIE4' => 'compatible; MSIE 4.01; Windows CE; PPC; 240x320',
'PIE4_Smartphone' => 'compatible; MSIE 4.01; Windows CE; Smartphone;',
'PIE6' => 'compatible; MSIE 6.0; Windows CE;',
'Minimo' => 'Minimo',
'OperaMini' => 'Opera Mini',
'AvantGo' => 'AvantGo',
'Plucker' => 'Plucker',
'NetFront' => 'NetFront',
'SonyEricsson' => 'SonyEricsson',
'Nokia' => 'Nokia',
'Motorola' => 'mot-',
'BlackBerry' => 'BlackBerry',
'Skweezer'=>'.NET CLR 1.1.4322',
'GoogleMobilizer'=>'Google Wireless Transcoder',
'WindowsMobile' => 'Windows CE',
'PPC' => 'PPC',
'PDA' => 'PDA',
'Smartphone' => 'Smartphone',
'Palm' => 'Palm'
);

function obtenerNavegador($useragents, $useragent){
foreach($useragents as $nav=>$ua){
if(strstr($useragent, $ua)!=false){
return $nav;
}
}
return 'Desconocido';
}
//Obtenemos el navegador y lo comparamos con el array de navegadores móviles
$navegador= obtenerNavegador($dm_usergent,$_SERVER['HTTP_USER_AGENT']);
//Si no es móvil ponemos la versionWeb a 'on'
if($navegador=='Desconocido')
{
$_SESSION["versionWeb"] = 'on';
}
//Si lo es lo llevamos mediante Javascript (el header no vale en este punto en Wordpress) a la página de selección
else if($navegador!='Desconocido'){
? >
< script type="text/javascript">window.location = "http://www.pisitoenmadrid.com/movil";< / script>
< ? php
}
}
// En el caso de que se haya inicializado la varible móvil se redireccionará a la dirección correspondiente de la versión móvil
else if($_SESSION["versionMovil"]=='on') {
$url = $_SESSION["url"]; ? >
< script type="text/javascript">window.location = "http://www.skweezer.net/s.aspx?q=http://";
< ? php
} ? >

El código anterior deberá estar al principo de TODAS las páginas (en el caso de Wordpress en el header.php) y ella se encargará de redirigir dependiendo de las variables de sesión. El código de la página web donde permitimos que el usuario elija sólo tendrá una explicación de qué es eso y dos enlaces: uno a dw.php y otro a dm.php (por ejemplo). Las páginas dw.php (dispositivo web) y dm.php (dispositivo móvil) se encargarán de colocar el valor correspondiente, dependiendo de la elección del usuario, en las variables de sesión y redirigiendo a donde toque. Este es el código de cada uno:

dm.php

< ? php
session_start();
$_SESSION["versionMovil"]='on';
$_SESSION["versionWeb"]='off';
$url = $_SESSION["url"];
header("Location: http://www.skweezer.net/s.aspx?q=http://$url");
? >

dw.php

< ? php
session_start();
$_SESSION["versionWeb"]='on';
$_SESSION["versionMovil"]='off';
$url = $_SESSION["url"];
header("Location: http://$url");
? >

¡Listo! Con esto ya tendremos la identificación y redirección cubierta.

Versión móvil de la web o blog

En este punto (más sencillo que el anterior) tenemos un amplio abanico de posibilidades para crearnos una versión móvil de forma muy rápida de nuestro blog o página web.

• RSS: es bastante cutre pero muy rápido. Con el RSS tendremos una versión reducida de nuestra web en segundos
• Andanza: plataforma que nos permite crearnos de forma muy visual una versión móvil de nuestro blog. Para mi gusto es demasiado minimalista y no deja poner comentarios. Esta es la que me creé de prueba para Pisito.
• Mowser: página web en la que añadiendo la dirección de nuestra web como coletilla a su url nos genera de forma automática una versión móvil. La pega es que tiene publicidad...
• Skweezer: muy similar a Mowser pero sin publicidad. De momento esta es mi elección (hasta que encuentre una mejor).

En el código de arriba habrán podido observar que he puesto en las redirecciones a "versión móvil" la dirección de Skweezer junto con la URL que había almacenado por donde había llegado el usuario. Si queremos cambiar la versión móvil bastará con cambiar esas líneas. De esta forma tendremos una versión móvil de nuestra página web o blog de una forma sencilla y sin mucho esfuerzo.