Tutorial: crea una versión móvil de tu web o blog

Posted by: David Alayón

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.

movilizate.jpg

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; 240×320′,
‘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.

  1. Marcus
    Marcus
    at /

    Mofuse.com también sirve para crear versiones móbiles de los blogs, detectando los iPhone e iPod Touch para adaptarse a los mismo.

  2. ballener0
    ballener0
    at /

    Tú y tus tutoriales, menudo crack. He estado viendo la versión con Andanza y, efectivamente, era bastante minimalista, por no decir cutrosa. Luego me conecto con la HTC y pruebo a ver qué tal se ve la otra versión (la buena, vaya).

  3. Jess
    Jess
    at /

    Hola: entré a pisito desde mi SonyEricsson y al redireccionar a la versión móvil lo que me aparece es:

    Resultados de la búsqueda: http

    Y una lista de enlaces.

    :???:

  4. Rosa
    Rosa
    at /

    Trovator es otra opcion, permite la navegacion con movil por toda la web

  5. Namor
    Namor
    at /

    Hola, muy interesante este manual, pero tengo una duda …. ??

    Una vez compruebe la conexion, el diseño de la web, he de hacerlo con unos de esos programas o puedo hacerlo como yo quiera, teniendo en cuanta la velocidad movil de conexión ??

    Saludos y gracias.

  6. Sencillo truco para tener una versión móvil del blog Espineli
    Sencillo truco para tener una versión móvil del blog Espineli
    at /
  7. isyal_2000
    isyal_2000
    at /

    hola amigos estube probando con el codigo y pude por fin despues de algunos cambios hacer que se redirija el dominio nomral al dominio movil.

    Cual es la diferencia simple

    si yo entro desde un enlace como dicen aqui por version de escritorio desde un dispositivo movil necesito ser redirigido al mismo link pero de la version movil.

    Les pongo el codigo esperando les sirva a otras personas

    $mobile_browser = ’0′;

    //$_SERVER['HTTP_USER_AGENT'] -> el agente de usuario que está accediendo a la página.
    //preg_match -> Realizar una comparación de expresión

    if(preg_match(‘/(up.browser|up.link|mmp|symbian|smartphone|midp|wap|phone)/i’,strtolower($_SERVER['HTTP_USER_AGENT']))){ $mobile_browser++;}

    // $_SERVER['HTTP_ACCEPT'] -> Indica los tipos MIME que el cliente puede recibir.

    if((strpos(strtolower($_SERVER['HTTP_ACCEPT']),’application/vnd.wap.xhtml+xml’)>0) or ((isset($_SERVER['HTTP_X_WAP_PROFILE']) or isset($_SERVER['HTTP_PROFILE'])))){ $mobile_browser++;}

    $mobile_ua = strtolower(substr($_SERVER['HTTP_USER_AGENT'],0,4));$mobile_agents = array( ‘w3c ‘,’acs-’,'alav’,'alca’,'amoi’,'audi’,'avan’,'benq’,'bird’,'blac’, ‘blaz’,'brew’,'cell’,'cldc’,'cmd-’,'dang’,'doco’,'eric’,'hipt’,'inno’, ‘ipaq’,'java’,'jigs’,'kddi’,'keji’,'leno’,'lg-c’,'lg-d’,'lg-g’,'lge-’, ‘maui’,'maxo’,'midp’,'mits’,'mmef’,'mobi’,'mot-’,'moto’,'mwbp’,'nec-’, ‘newt’,'noki’,'oper’,'palm’,'pana’,'pant’,'phil’,'play’,'port’,'prox’, ‘qwap’,'sage’,'sams’,'sany’,'sch-’,'sec-’,'send’,'seri’,'sgh-’,'shar’, ‘sie-’,'siem’,'smal’,'smar’,'sony’,'sph-’,'symb’,'t-mo’,'teli’,'tim-’, ‘tosh’,'tsm-’,'upg1′,’upsi’,'vk-v’,'voda’,'wap-’,'wapa’,'wapi’,'wapp’, ‘wapr’,'webc’,'winw’,'winw’,'xda’,'xda-’);

    //buscar agentes en el array de agentes

    if(in_array($mobile_ua,$mobile_agents)){ $mobile_browser++;}

    //$_SERVER['ALL_HTTP'] -> Todas las cabeceras HTTP
    //strpos -> Primera aparicion de una cadena dentro de otra

    if(strpos(strtolower($_SERVER['ALL_HTTP']),’OperaMini’)>0) { $mobile_browser++;}if(strpos(strtolower($_SERVER['HTTP_USER_AGENT']),’windows’)>0) { $mobile_browser=0;}if($mobile_browser>0){

    // Mostrar contenido para dispositivos móviles
    // Aqui se coloca la direccion a donde sera redirigido el visitante para moviles
    // importante si queremos que siempre llegen a la pagina principal solo colocamos la direccion del index
    // Por ejemplo: http://miweb.com/movil ó http://movil.miweb.com

    // pero si queremoe que llegen al mismo link de donde provienen pero en version movil usamos el siguiente codigo
    // en mi caso tengo dos links el de escritorio es que es http://zonadjs.com
    // y el movil http://m.zonadjs.com que es una redireccion a la carpeta http://zonadjs.com/movil
    // lo que se hace con este codigo es: despues de comprobar que estoy navegando desde un dispositivo movil
    // me redirige al link movil, primero guarda la direccion desde donde venimos en la variable $url
    // solo agrego m. antes de $url que es el inicio del dominio movil haciendo lo siguiente

    // de http://zonadjs.com/direccion link pasa a http://m.zonadjs.com/direccion link

    $_SESSION["url"] = $_SERVER["HTTP_HOST"].$_SERVER["REQUEST_URI"];
    $url = $_SESSION["url"];

    Header(“Location: http://m.$url“);

    //si no solo colocamos Header(“Location: http://miweb.com/movil ó http://movil.miweb.com“);

    }else{

    // Contenido que se puede apreciar en navegadores de escritorio
    }

Los comentarios están cerrados.