Empezar a desarrollar páginas web para móviles

Durante las vacaciones recibí un mensaje de un visitante, el cual se mostraba interesado en desarrollar páginas para dispositivos móviles y tenia algunas dudas al respecto.

Como las respuestas pueden ser útiles para alguien más he decidido hacerlas públicas.

¿Puedo diseñar una pagina web y esta misma puede mostrarse en una pc y en un dispositivo móvil?

Si es posible, pero por experiencia personal no te lo recomiendo. El principal problema de un dispositivo móvil es la velocidad de conexión, esto significa que no puedes utilizar muchos elementos “pesados” como imágenes, mientras que en un PC si, el resultado sera una página compatible con dispositivos móviles pero muy simple vista desde la pc. Si por el contrario diseñas pensando en la PC puedes obtener una página muy cargada para dispositivos móviles.
La primera versión de webdebolsillo fue elaborada así, y mientras que desde la Pocket PC se veia bien desde la PC se veia muy simple.

También hay que tener en cuenta que muchos dispositivos móviles solo soportan WML y no HTML.

Lo más aconsejable es que realices dos versiones de tu sitio, revisa el tutorial de detección de dispositivos móviles para más información. Si utilizas una base de datos sera mucho más simple crear varias versiones de tu sitio.

¿El sitio puede estar alojado en en un servidor Linux como Windows?

No importa el tipo de servidor en que alojes el sitio, solo  revisa si soporta el lenguaje que utilizas, por ejemplo PHP o ASP.

¿Cómo trabajar de manera local e ir comprobando las paginas tanto en mi PC como en un Pocket PC?

Comprobar la versión para Pocket PC desde la PC no es recomendable pero tampoco es imposible.

Primero crea una página bien formada, de preferencia utiliza CSS 1, reduce la cantidad de imágenes y el tamaño de las mismas(como sugerencia menos de 120px de ancho). De ser posible valida tu código como XHTML Basic.

Los consejos anteriores permiten que tu página sea compatible, pero hace falta la apariencia. Puedes simular la apariencia utilizando un poco de CSS, para ello utiliza en la etiqueta Body este código:

<body style="width:240px;">

Con este código podras simular el ancho de la pantalla de la Pocket Pc en la PC y puedes cambiarlo dependiendo del dispositivo que desees probar, por ejemplo las Pocket PC tienen una resolución de 240×320, las modernas 480×640 y recuerda que esta puede invertirse( por ejemplo 320×240) o variar. Cuando finalices puedes quitar el código.

Si utilizas Firefox puedes ayudarte con la extensión WebDeveloperToolbar para simular el tamaño, estilo, etc.

Por último intenta mantener libre tu página de código Javascript, Flash, Applets, videos, etc. por las siguientes razones:

  • Javascript: No todos los navegadores lo soporta o puede estar desactivado. Si lo utilizas siempre utiliza la etiqueta <noscript> para ofrecer contenido alternativo.
  • Flash: No me gusta decirles que no utilicen Flash, ya que es una gran herramienta, pero no todos los navegadores la soportan. Utilizalo, pero de ser posible ofrece también una versión en XHTML.
  • Applets: Casi ningún navegador los soporta, y creo que esa es una razón suficiente para no utilizarlos.
  • Videos: La mayoría de vídeos se encuentra disponibles en formatos recientes de Flash(8 o superior) y no son compatibles, además consumen muchos recursos que los dispositivos móviles no tienen.

Si aún tienes dudas deja un comentario, te contestare lo más pronto posible.

Enlaces recomendados