Toda la información en el post 'la necesidad de adaptar tu web site a dispositivos móviles'
El siguiente paso es determinar lo que queremos, ¿web móvil o aplicación móvil?
Tenemos que partir de la base de que el diseño web es universal o compatible con cualquier dispositivo, mientras que una app tiene que aportar un valor añadido, lo que va a suponer una mayor inversión en recursos para la adaptación a la plataforma específica (Iphone, Android, Windows Phone, etc).
1- La primera opción es la de adaptar nuestro sitio web a dispositivos móviles.
Éstos son algunos de los aspectos técnicos básicos a considerar:
- si usas diseño web adaptativo en el que el código HTML es el mismo para todos los dispositivos y son las CSS las encargadas de modificar el procesamiento de la página, se recomienda el uso de media queries.
Media Queries es un módulo CSS3 que permite la representación de contenido para adaptarse a condiciones como la resolución de pantalla. Se convirtió en un estándar recomendado por la W3C en junio del 2012 y es un principio básico de la tecnología de diseño web adaptaivo. Fuente Wikipedia: Media Query.
Ejemplo: @media only screen and (max-width: 620px) {...}.
- si optamos por la publicación dinámica de diferentes HTML en la misma URL, el servidor responderá en función del user-agent que solicite la página. Se recomienda que el servidor envíe una sugerencia para detectar el contenido móvil. Esta sugerencia se implementa mediante la cabecera Vary HTTP.
El contenido de la respuesta variará en función del user-agent que solicite la página. Si el servidor ya utiliza la cabecera Vary HTTP, puedes añadir User-Agent a la lista que ya se ha proporcionado.
- en el caso de URL para móviles independientes, la recomendación es la siguiente:
- para las páginas de escritorio, añade una etiqueta de enlace especial rel="alternate" que señale la URL para móviles.
Ejemplo: <link rel="alternate" media="only screen and (max-width: 620px)" href="http://m.example.com/default"/> - y para las páginas para móviles, añade una etiqueta de enlace rel="canonical" que señale la URL para equipos de escritorio.
Ejemplo:<link rel="canonical" href="http://www.example.com/default"/>
- para las páginas de escritorio, añade una etiqueta de enlace especial rel="alternate" que señale la URL para móviles.
Errores comunes en los sitios desarrollados para smartphones que debemos evitar:
- los vídeos no se reproducen porque no usamos tecnología html5 estándar.
- redireccionamientos defectuosos.
- error 404 (Page Not Found) sólo para smartphones.
- baja velocidad de carga de la página.
- no prestar atención a la usabilidad: tamaño incorrecto de los textos e imágenes, colores inapropiados, ubicación inadecuada de las opciones de navegación, falta de implementación de los atajos de teclado, etc.
- llamadas a enlaces externos que se abren en otras ventanas.
- ausencia de un apartado de contacto o método de retroalimentación.
- no proporcionar un enlace al sitio web completo.
2- Si nos decantamos por la aplicación para móviles, tenemos que contar con conocimientos de los lenguajes de programación necesarios para su desarrollo, ¿o tal vez no?
Existen en el mercado diferentes herramientas para crear apps móviles para las distintas plataformas existentes sin conocimientos previos de programación.
Vamos a poder utilizar asistentes de edición para personalizar el diseño de la interfaz y configurar las funciones de aplicaciones básicas, siendo el propio asistente quién se ocupe de compilar nuestro proyecto en una aplicación nativa para la plataforma elegida y su posterior publicación en la tienda de aplicaciones.
- Creapp: ofrece un buen catálogo de plantillas prediseñadas para ayudar a los iniciados en este interesante campo a crear nuestra primera aplicación.
Permite integrar en nuestro proyecto, sistemas de pedidos online, pasarela de pago para tiendas virtuales y otro tipo de servicios de gran utilidad para medianas y pequeñas empresas.
- Apps Builder: la diferencia de este servicio con respecto al resto de asistentes es que su editor puede capturar los contenidos de nuestra página web para utilizarlo como base con la que desarrollar aplicaciones para los diferentes sistemas operativos móviles.
Además ofrece la posibilidad de configurar paso a paso y sin tocar una sola línea de código las características de tu aplicación añadiendo módulos como: Noticias, Foto, Vídeo, Podcasting, Tienda, Canal RSS, Facebook, Twitter, Sitio web, Radio, PDF, Texto, Código, Muro de chat, Contactos, Mapas, Mensaje de texto, Llamada y Correo.
- Mobincube App Generador: quizá sea uno de los generadores de aplicaciones móviles multiplataforma más completos dado el grado de personalización que permite.
Resulta bastante intuitiva y práctica y ofrece la posibilidad de exportar nuestro proyecto a las principales plataformas móviles como iOS, Android, HTML5, BlackBerry o Windows Phone.
- BlackBerry App Generator: nos permite crear aplicaciones para las diferentes versiones del sistema operativo BlackBerry sin tener conocimiento alguno de programación.
Fuente: Cómo crear aplicaciones móviles sin saber programar. Think Big
