Creando la versión para dispositivos móviles de tu sitio (2)

Diseño web movil con HGR Design iphone, ipad, android, windows phone

Bueno, ha pasado más de un mes desde que escribí la primera parte de esta miniguía donde vemos las posibilidades que tenemos para adaptar nuestro proyecto web ya sea presente o futuro a los dispositivos móviles.

En está segunda y última parte  veremos algunas formas de hacer que nuestra web sea visible en la mayoría de dispositivos.

Voy a empezar por Wordpress, si utilizamos este CMS tenemos varias soluciones en forma de plugins para nuestro blog o gestor de contenido que nos harán más fácil la tarea de adaptar nuestro sitio a los nuevos gadgets que cada vez son más utilizados para acceder a Internet. Esta es una lista de algunos de los plugins que solo tendrás que instalar y configurar para tener tu versión móvil en WordPress.

WP Touch Este plug in es el más usado para que nuestro WordPress se adapte perfectamente a los smarthphones y tablets de hoy en día, es ampliamente configurable y muy fácil de instalar, como la mayoría de plug ins de WordPress.

Wordpress Mobile Edition Otra solución efectiva para que nuestro sitio sea correctamente visto en estos pequeños aparatos, detecta el dispositivo y muestra la versión móvil del mismo para navegar fácilmente.

Wordpress Mobile Pack Este es uno más, altamente configurable y versátil. Tiene un buen panel de administración donde podrás escoger que páginas mostrar al inicio o no mostrar algún post o página, etc.

Creo que no seguiré con más son decenas de plug ins que al final  cumplen la misma misión, unos mejor que otros pero desde mi punto de vista son con los que mejor me he desenvuelto. Puedes encontrar aquí otros plug ins que pueden ajustarse mejor a lo que buscas.

Desarrollos propios

Si ya tienes dominas algo de html, css, javascript u otros lenguajes de programación y maquetación web, seguro que no tendrás problemas a la hora de crear estos contenidos. Utilizando HTML5 y CSS3 más JavaScript…todo depende del sitio.

Nos puede surgir la siguiente pregunta: Tengo dos versiones de mi sitio web, una versión normal para cualquier ordenador o computadora de sobremesa y otra para dispositivos móviles.  ¿Qué debo hacer para que se cargue una u otra versión dependiendo del medio utilizado?

Tengo que decir que hay unas cuantas maneras de hacerlo, pero no nos vamos a extender mucho y veamos las que para mis son las más sencillas y así no complicar mucho la situación.

Utilizando JavaScript

Con el siguiente código se detectará la resolución de la pantalla y mostrará al usuario la versión correspondiente, solo tenemos que cambiar la ruta donde tenemos nuestra versión especial para smartphones (‘mobile.misitio.com’).

<script type=»text/javascript»>
if(screen.width < 500){
location.replace(‘mobile.misitio.com’)
}
</script>

Utilizando PHP

Navegando por la red me encontré con esta buena solución publicada en sermdesign. Se trata de utilizar la función PHP strpos(). Tenemos que decirle la ruta donde se encuentra la versión que hemos creado, en el ejemplo es http://mobile.site.com.

<?php
$iphone = strpos($_SERVER[‘HTTP_USER_AGENT’],»iPhone»);
$android = strpos($_SERVER[‘HTTP_USER_AGENT’],»Android»);
$palmpre = strpos($_SERVER[‘HTTP_USER_AGENT’],»webOS»);
$berry = strpos($_SERVER[‘HTTP_USER_AGENT’],»BlackBerry»);
$ipod = strpos($_SERVER[‘HTTP_USER_AGENT’],»iPod»);

if ($iphone || $android || $palmpre || $ipod || berry == true)
{
header(‘Location: http://mobile.site.com/’);
//OR
echo «<script type=»text/javascript»>// <![CDATA[
window.location=’http://mobile.site.com’
// ]]></script>»;
}
?>

Por el momento no es más, espero que esto te ayude si estás planeando desembarcar en el nuevo puerto de la navegación web como son los Smarthphones, las PDA, las tablet, etc.

Si utilizas o conoces más maneras de implementar versiones móviles, no dudes en compartirlas con nosotros en los comentarios!

Te puede interesar:

Creando la versión para dispositivos móviles de tu sitio (1)

Frameworks de desarrollo web móvil

Empezando con HTML5 

Comparte esta página

4 comentarios

Los comentarios están cerrados.