Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Logo

Aprende Web

Crea y diseña tus sitios en la Web.

Versión móvil

Cómo adaptar una página a una versión para poder verla en un móvil


Y ahora tambien aprende a programar en C++ con Aprende Web C++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net





Sobre ésta página

Ültima modificación: 29-01-2016.

Visitas este mes: 132

Visitas el mes pasado: 228

logo
WEB-GRAFÍA

Mi agradecimiento a las siguientes páginas Web. en las cuales me he basado para la elaboración de este manual:


Diseño web para dispositivos móviles
Desarrollo Web
Consejos sobre usabilidad de móviles: W3C
The World Wide Web Consortium (W3C)
Recursos de diseño para web móvil
webdebolsillo.com/recursos
Tutorial: crea una versión móvil de tu web o blog
Blog de David Alayón (pisitoenmadrid.com)

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




Version móvil (III)

Dos versiones

imagen móvil

Versión móvil y escritorio

Una vez que hemos creado una versión móvil de nuestro sitio, éste tiene que "convivir" con la versión de escritorio. Es decir queremos que el usuario vea la versión correcta cuando abra nuestra página. Al abrirla desde un ordenador de escritorio tiene que ver la versión de escritorio, y al abrirla desde un móvil, debe ver la versión de móvil. Y esto simplemente al abrir el sitio, el cual tiene una sóla dirección web.

Cuando el usuario abre nuestro sitio le debemos redireccionar a la versión móvil si éste esta usando un dispositivo móvil. Para hacer esto, antes de mostrar la página, debemos detectar cual es el navegador que esta usando, y si éste corresponde a un teléfono móvil. En ese caso le redireccionamos la página a la versión móvil, para que pueda verlo correctamente en su teléfono.


Detectar un disposititivo móvil


bucar el "userAgent" con javascript

El "userAgent" es un texto que usan los navegadores para identificarse con los servidores en Internet y en donde comparten características y alguna otra información útil. Con el "userAgent" podemos saber desde qué navegador o dispositivo nos están viendo.

Para detectar el "userAgent" con javascript tenemos la propiedad navigator.userAgent, que nos devuelve el "userAgent", es decir, la información sobre el navegador que está usando el usuario.

Por ejemplo, si queremos ver el navegador que estamos usando en esta página utilizaremos el siguiente código javascript:

navegador=navigator.userAgent;

Ahora si queremos ver el "userAgent" que estamos utilizando, no tenemos más que sacarlo en pantalla, por ejemplo en un elemento con id="miuseragent", el código para verlo será:

document.getElementById("miuseragent").innerHTML=navegador;

Recuerda que este código debes ponerlo dentro de la estructura window.onload = function(){ ... } ya que la página debe haberse cargado.

Siguiendo estos pasos vemos cual es el "userAgent" que estás utilizando:

Puedes comprobar que si abres esta página en distintos navegadores saldrán diferentes "userAgent". El "userAgent" indica no sólo el navegador, sino la versión y muchas veces el sistema operativo o dispositivo que estamos utilizando.


Buscar el UserAgent con PHP

Si utilizas un servidor PHP, también puedes detectar el "userAgent" mediante PHP,

Para ello no tenemos mas que usar el siguiente código:

$miuseragent=$_SERVER['HTTP_USER_AGENT'];

Ahora sacamos en pantalla el "userAgent" guardado en la variable para comprobar que es el mismo que con javascript:

echo "<p>$miuseragent</p>";

Hemos aplicado el código y vemos aquí el resultado, comprobando que el "userAgent" es exactamente igual:

CCBot/2.0 (http://commoncrawl.org/faq/)


"UserAgent" en dispositivos móviles

Cada modelo de teléfono móvil utiliza un "userAgent" distinto. Esto nos llevaría a una lista interminable de "userAgent" que tendríamos que comprobar para saber si el usuario está utilizando un móvil. Además están saliendo constantemente modelos nuevos, por lo que tendríamos que estar renovando la lista.

Sin embargo no debemos desistir, ya que lo que buscamos no es el modelo que tiene el usuario, sino saber si éste está utilizando un móvil o no. En esto el "userAgent" puede darnos en la gran mayoría de los casos una respuesta.

Los "userAgent" de los dispositivos móviles suelen llevar unos identificadores que nos indican que estamos utilizando un móvil. Estos suelen ser la palabra "Mobile", o la marca o sistema operativo particular que utiliza el teléfono.

Por tanto el problema se reduce a buscar en el "userAgent" este identificador. Con la siguiente lista de palabras podemos localizar la gran mayoría de teléfonos móviles:

"Mobile", "iPhone", "iPod", "BlackBerry", "Opera mini", "Sony", "MOT" (Motorola), "Nokia", "samsung".

Por tanto, comprobaremos si en el "userAgent" está alguna de estas palabras, y si es así redireccionaremos la página hacia su version móvil.

No olvidemos que el usuario puede entrar en nuestra web, no por la página principal o "index", sino por cualquier otra página, por lo que esta operación debe hacerse para todas las páginas de nuestra web que tengan versión para móvil.


Redireccionar con javascript

Proponemos aquí un código javascript para redireccionar una página hacia su versión móvil cuando el usuario esté utilizando un móvil para ver la página. El código quedará así:

navegador=navigator.userAgent; //busco el "userAgent" del usuario.
//lista de palabras del "userAgent" en los móviles
moviles=["Mobile","iPhone","iPod","BlackBerry","Opera Mini","Sony","MOT","Nokia","samsung"];
detector=0; //Variable que detectará si se usa un móvil
for (i in moviles) { //comprobar en la lista ...
   //si el método "indexOf" no devuelve -1, indica que la palabra está en el "userAgent"
   compruebo=navegador.indexOf(moviles[i]); 
   if (compruebo>-1) { 
      detector=1; //Si es un móvil, cambio el valor del detector
      }
   }
if (detector==1) { //si es un móvil redirecciono la página.
   location.href="movil/index.php"; //Se redirecciona hacia la versión móvil.
   }

El código para redireccionar la página hacia su versión móvil puede ser parecido a este. Lo hemos comentado para una mejor comprensión. En resumen, hemos buscado el "userAgent", comprobamos si éste es el de un móvil, y si es así redireccionamos la página hacia su versión movil.


Redireccionar con PHP

Para redireccionar un página hacia su versión móvil utilizando un código PHP haremos algo similar a lo que hemos visto con javascript. Es decir comprobamos el "userAgent", y si éste es de un móvil, redireccionamos la página. Proponemos aquí el siguiente código, que sigue los mismos pasos que el código visto para javascript:

$miuseragent=$_SERVER['HTTP_USER_AGENT']; //Busco el "userAgent" del usuario
//lista de palabras del "userAgent" en los móviles
$moviles=array("Mobile","iPhone","iPod","BlackBerry","Opera Mini","Sony","MOT","Nokia","samsung");
$detector=0; //variable para detectar si el usuario utiliza un móvil (0=no, 1=si);
$numMoviles=count($moviles); //número de palabras en la lista
for ($i=0;$i<$numMoviles;$i++) { //comprobar en la lista ...
    $comprobar=strpos($miuseragent,$moviles[$i]);
    if ($comprobar!="") { //si detectamos un móvil ...
       $detector=1; //cambiamos la variable de detección.
       }
    }
if ($detector==1) { //si es un móvil redireccionamos la página.
   header("Location:movil/index.php");
   }

El código está comentado para indicar lo que estamos haciendo en cada paso. Los pasos que damos son lo mismos que en javascript.

Este código es conveniente ponerlo al principio de la página, antes del HTML, de esta manera nos redireccionará hacia la versión web antes de cargar la página en versión escritorio.

No olvidemos que el usuario no tiene porqué entrar en nuestra web por su página de inicio, por lo que todas las páginas deberían disponer de un redireccionamiento hacia su versión móvil, bien sea hacia la página de inicio o hacia la página que se abre en su versión móvil.




Veremos en la siguiente página una serie de herramientas para comprobar la versión móvil mientras la vamos creando, Estas son herramientas que emulan la página vista desde un teléfono móvil u otros dispositivos.

Emuladores



Versión móviles

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un manda un correo

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com