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

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

Publicado por Helmer Galvis4 Comentarios
Sábado, Octubre 2, 2010

Diseño web movil con HGR Design iphone, ipad, android, windows phoneBueno, 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.

Utilidades en la red

Vamos a ver ahora algunos sitios que nos permiten tener el servicio para móviles activado basandose en el RSS de nuestro sitio como pueden ser las entradas de un blog, el sistema de noticias de tu web, todos los contenidos de una web, etc. Algunos de estos sitios son de pago pero tienen versiones gratis aunque suelen poner publicidad.

Google Reader

Utilizando Gogle reader, podemos crear un minisitio perfecto para cualquier dispositivo móvil simplemente indicándole nuestro Fedd RSS. Ejemplo: http://www.google.com/reader/m/view/feed/http://feeds.feedburner.com/hgrdesign Solo tienes que cambiar la url que está en negrita por la url de tu  feed RSS. Puedes poner un enlace en tu web que indique la versión mobile o configurar el códio interno de tu sitio para que redirija automáticamente.

Mippin

Este es un servicio muy fácil de usar, simplemente insertas tu url, detecta tus Feeds, te muestra un ejemplo, el siguiente paso es customizar los colores de la nueva versión móvil y por último te dice la manera de implementarlo para que empiece a funcionar de inmediato

Enlace:  Mippin

Ubik

Terminamos con Ubik, es una aplicación  también muy fácil de usar y disponible en varios idiomas. te permite escoger entre muchas plantillas diferentes para que se adapte mejor a la temática de tu web, puedes editar las diferentes secciones, colocar fotos, etc. En definitiva tienes un completo entorno de edición para tu nueva versión móvil. No es necesario un RSS pero deberás crear las secciones una a una de tu sitio así como toda la información del mismo.

Enlace: Ubik

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