• Publicidad

Redireccionar si es un navegador móvil

Todo lo relacionado con el desarrollo Web con Perl: desde CGI hasta Mojolicious

Redireccionar si es un navegador móvil

Notapor bAsTeR » 2009-11-26 01:44 @114

Hola camaradas,

Hoy mi problema por el que recurro aquí a solicitar ayuda es el siguiente:

Estoy buscando un script que me redireccione a una página si es que el usuario que visita mi web lo hace desde un móvil, ya sea IPhone, celular, PDA o similar.

Encontré uno que está escrito en PHP pero estoy batallando para traducir el código, y me gustaría saber si alguien en el foro ya tiene un código que haga lo que necesito y me lo pueda compartir.

Mil gracias de antemano y saludos a todos
Última edición por explorer el 2009-11-26 11:12 @508, editado 2 veces en total
Razón: Ortografía
Always Perl :)
bAsTeR
Perlero nuevo
Perlero nuevo
 
Mensajes: 63
Registrado: 2008-10-28 11:29 @520
Ubicación: Chihuahua, Chih. Mexico

Publicidad

Re: Redireccionar si es un navegador movil

Notapor explorer » 2009-11-26 06:23 @307

Lo ideal es que las páginas que vayamos a mostrar en el dispositivo sean las mismas que en un ordenador normal. ¿Por qué? Pues porque... realmente... nunca sabremos qué dispositivo va a usar el usuario: los días laborales accede desde su ordenador del trabajo con una pantalla de 17" y 1280 puntos de resolución horizontal, pero algunas tardes se conecta desde casa y allí tiene un monitor de 24" y 2040 puntos. Luego, en el fin de semana nos ve a través de su televisión en el salón de casa, donde son 35" y 1024 puntos. Mientras está de viaje, puede vernos en su PDA de 7" y 800 puntos. En casos de urgencia, con su teléfono móvil de 3" y 400 puntos.

No hay estándares de tamaños para las páginas, porque desde el principio se diseñó para mostrar contenidos de forma independiente a lo que el usuario tuviera. Pero hay gente que se empeña en que su página se "vea bien" en su monitor, sin darse cuenta que luego se ve horrible en el monitor de su casa.

Bueno, de vez en cuando sale alguna aplicación o información en la que sí estamos obligados o tener en cuenta esos tamaños.

Hasta ahora, las soluciones para personalizar esos tamaños han venido del Javascript: la primera página de un sitio web consistía en un pequeño Javascript que preguntaba el tamaño máximo de la pantalla. Según lo que respondía, saltaba a un árbol distinto del sitio web donde se mostraba la información. Era típico ver if() anidados donde se preguntaba si era 1280x1024, 1024x768, 800x600, etc.

Lo malo de esto es que te obligaba a desarrollar distintas versiones del sitio.

La siguiente solución fue hacer el contenido dinámico por medio de entornos de trabajo web, que generaban uno u otro contenido según esos tamaños. La información de las páginas se sectorizaba (como hoy en día se hace con las capas y los bloques de información) y los motores colocaban aquellos bloques que se suponen "cabían" en la pantalla del dispositivo.

Hoy en día, las nuevas versiones de HTML traen una pequeña ayuda para crear páginas acordes al dispositivo. Por medio de los estilos CSS, existe la posibilidad de indicar qué elementos queremos que salgan cuando determinado dispositivo esté viendo la página. Es la regla @media.

El ejemplo más espectacular de uso de estas reglas es cualquiera de las páginas de IBM, por ejemplo ésta donde explican cómo hacer un gráfico compuesto con imágenes extraídas desde Flickr, con Perl. Si miras el código, verás que está lleno de estilos CSS por todas partes para decidir qué partes salen y cómo según el dispositivo (bueno, no todo es tan bonito... también tienen una buena batería de código Javascript para apoyar a esos estilos).

Todo lo anterior se refiere a atacar el problema desde el lado del cliente. Desde el lado del servidor consiste en identificar el dispositivo y derivar la petición al árbol del sitio que más conviene. O generar contenido dinámico en función de la resolución.

Lo normal en esos casos es usar el módulo mod_rewrite del Apache para hacer un redireccionamiento de la página que solicita el usuario a el árbol de páginas específicas para dispositivos móviles.

Por medio de expresiones regulares en las reglas de mod_rewrite, es posible identificar el navegador o la plataforma que están accediendo. Para ello, primero hay que modificar el aspecto de los ficheros de actividad:
Sintáxis: [ Descargar ] [ Ocultar ]
Using text Syntax Highlighting
LogFormat "%h %l %u %t \"%r\" %>s %b \"%{Referer}i\" \"%{User-Agent}i\"" combined
Coloreado en 0.000 segundos, usando GeSHi 1.0.8.4
y así sale toda la información. Por ejemplo:
Sintáxis: [ Descargar ] [ Ocultar ]
Using text Syntax Highlighting
67.195.82.169 - - [13/Nov/2009:03:00:21 +0100] "GET / HTTP/1.1" 200 4800 "-" "Nokia6682/2.0 (3.01.1) SymbianOS/8.0 Series60/2.6 Profile/MIDP-2.0 configuration/CLDC-1.1  UP.Link/6.3.0.0.0 (compatible;YahooSeeker/M1A1-R2D2; http://help.yahoo.com/help/us/ysearch/crawling/crawling-01.html)"
Coloreado en 0.000 segundos, usando GeSHi 1.0.8.4

Pero yo no conozco ningún estándar (es posible que exista) referente a cómo han de ser las cadenas de caracteres que definen al "User-Agent". Como ves en el ejemplo, aparece las palabras Nokia, SymbianOS y Series60, que nos definen muy claramente el dispositivo, sistema operativo y versión del software de usuario. Pero en otros casos no es nada seguro que el dispositivo entregue toda esa información. Incluso más oscuro es la información del navegador que el usuario está utilizando para ver la página. Otro ejemplo:
Sintáxis: [ Descargar ] [ Ocultar ]
Using text Syntax Highlighting
77.209.174.21 - - [28/Sep/2009:01:57:04 +0200] "GET /ppm/Manual_ActivePerl_PPM_06.png HTTP/1.1" 200 204653 "http://sisamon.com/index.php/tutoriales/guia-de-instalacion-de-activeperl-gestion-de-modulos-con-ppm" "Mozilla/5.0 (SymbianOS/9.3; U; Series60/3.2 Nokia6210Navigator/04.13; Profile/MIDP-2.1 Configuration/CLDC-1.1 ) AppleWebKit/413 (KHTML, like Gecko) Safari/413"
Coloreado en 0.000 segundos, usando GeSHi 1.0.8.4
Aquí hay otro Nokia, en el que vemos claramente que está usando un navegador Safari (con motoro KHTML que "se parece" -like :)- al del Gecko del Mozilla.

Lo que sí se puede hacer es un conjunto de reglas con expresiones regulares para identificar esas palabras claves, y llevar al usuario a su destino.

Ejemplo (sacado de la página de mod_rewrite):
Sintáxis: [ Descargar ] [ Ocultar ]
Using text Syntax Highlighting
RewriteCond  %{HTTP_USER_AGENT}  ^Mozilla.*
RewriteRule  ^/$                 /homepage.max.html  [L]
Coloreado en 0.000 segundos, usando GeSHi 1.0.8.4
quiere decir que si el usuario se conecta con un navegador que se identifica con un motor de renderizado Mozilla, entonces derivamos todas las peticiones de la página inicial a la página homepage.max.html, que, por el nombre, ya indicamos que es la página donde se muestran todos los elementos. Si quisiéramos tener un sitio especial para los teléfonos Nokia, sería algo así:
Sintáxis: [ Descargar ] [ Ocultar ]
Using text Syntax Highlighting
RewriteCond  %{HTTP_USER_AGENT}  Nokia
RewriteRule  ^/(.*)$             /nokia/$1  [L]
Coloreado en 0.000 segundos, usando GeSHi 1.0.8.4
que quiere decir que si el usuario se conecta con un Nokia -mejor dicho: ÉL dice que se conecta con un Nokia- entonces todas las peticiones de todas las páginas se derivan a páginas con el mismo nombre, pero dentro de la carpeta /nokia.

Hoy en día, y en los próximos años, estas cuestiones tendrán cada vez menos importancia, porque todos los dispositivos tienden a tener una resolución de pantalla cada vez mayor, con prestaciones de presentación iguales a las de los ordenadores de sobremesa o portátiles. Por ejemplo, yo tengo un Nokia N810, con una pantalla de 800x480, 16 bits de resolución de color y soporte de Javascript y Flash. Con este tipo de aparatos en el mercado, ya no necesito hacer páginas específicas para ellos.

El último trabajo que hice para dispositivos móviles fue el Boletín Oficial de Castilla y León, pero la única complicación fue programar la salida de una versión simplificada del HTML original del boletín de cada día (es decir, el programa pide al propio servidor web la página original del boletín que quiere ver el usuario, y luego filtra y quita todo lo superfluo para mostrar solo el texto). No hay adaptación al dispositivo. No se pregunta el tamaño de la pantalla. Solo hay un gráfico más o menos adaptado al tamaño de un teléfono normal y todo lo demás es puro HTML generado en tiempo real (con Perl, of course).

Espero haberte aclarado algo sobre este tema.
JF^D Perl programming & Raku programming. Grupo en Telegram: https://t.me/Perl_ES
Avatar de Usuario
explorer
Administrador
Administrador
 
Mensajes: 14480
Registrado: 2005-07-24 18:12 @800
Ubicación: Valladolid, España

Re: Redireccionar si es un navegador móvil

Notapor explorer » 2009-11-27 23:05 @003

(añado a lo anterior) Acaba de aparecer un artículo en la Linux Magazine, en la que comentan la detección de dispositivos móviles por medio de Javascript.
JF^D Perl programming & Raku programming. Grupo en Telegram: https://t.me/Perl_ES
Avatar de Usuario
explorer
Administrador
Administrador
 
Mensajes: 14480
Registrado: 2005-07-24 18:12 @800
Ubicación: Valladolid, España

Re: Redireccionar si es un navegador móvil

Notapor elistraus » 2011-11-09 09:03 @419

Muy buena información, justo tengo que trabajar en aquello...

Saludos

:mrgreen:
elistraus
Perlero nuevo
Perlero nuevo
 
Mensajes: 37
Registrado: 2011-10-31 23:37 @026


Volver a Web

¿Quién está conectado?

Usuarios navegando por este Foro: No hay usuarios registrados visitando el Foro y 2 invitados