Apps nativas vs apps basadas en web vs apps hibridas

Como todos sabréis, actualmente hay tres tipos de aplicaciones móviles: Nativas, basadas en web e híbridas.

apps_hibridwebnative

  • Una aplicación nativa es aquella que está escrita en java (en el caso de android) o en Objetive-C (en el caso de iOS). Como características decir que tiene acceso completo a las funcionalidades de hardware del dispotivo y sólo puede descargarse desde las app stores.
  • Una aplicación para web son webs que utilizan toolkits especiales de javascript (como jQuery Mobile y Sencha Touch) y css personalizados para hacer que los sitios parezcan y funcionen como apps nativas. Sin embargo, sólo pueden ser accedidas a través de navegador, no pueden ser descargadas desde la app store y no tienen acceso a las funciones de hardware del móvil/tablet.
  • Las aplicaciones híbridas están en el medio de las dos anteriores. Básicamente son webs que están embebidas dentro de código nativo. Lo bueno es que esto te permite utilizar funciones que utilicen características propias del dispositivo (como vibración, cámara, …), y todo ello conociendo únicamente HTML y JavaScript. Un ejemplo de una herramienta que sirve para el embebido de esta web en la aplicación es phonegap. El principal problema de esta forma de hacer las apps es que nunca serán tan buenas como las aplicaciones nativas (más lentas y menos usables, por mucho que se piense lo contrario).

Aquí te dejo un gráfico interesante con información de ello:

app_nativevshybrid

También os dejo una imagen que me ha encantado y que refleja como ninguna a qué problemas nos enfrentamos al escoger una u otra:

Hibrido Vs Nativo

¿Cual será la próxima que escogerás para hacer una aplicación para móviles?

Phonegap, ejemplos de código y posibilidades

El phonegap es una herramienta muy interesante a la hora de crear tus propias aplicaciones móviles sin necesidad de saber los lenguajes de programación de android (java) ni de iOs (Objetive-c). Mediante html, css y js podrás tener una aplicación multiplataforma (te ahorrarás muchas líneas de código).

Las APIS que posee el Apache Cordova (phonegap) y con las cuales se pueden jugar:

  • Acelerómetro – Con él se puede acceder al acelerómetro del dispositivo y guardar las modificaciones del movimiento relacionadas con la orientación.
  • Cámara – Con esta librería se puede acceder a la cámara y a la galería de imágenes de un dispositivo. (Utilizada en F2L, aunque había que insertar plugins)
  • Capturador de ficheros media – Grabar ficheros de audio, capturar imágenes o grabar vídeos.
  • Compás – Se puede obtener la dirección a la cual el dispositivo está apuntando.
  • Conexión – Se puede ver el tipo de conexión que tenemos (None, Ethernet, WiFi,Cell_2G,….).
  • Contactos – Se puede trabajar con la base de datos de contactos del dispositivo.
  • Dispositivo – Se puede obtener el modelo, la versión de phonegap, el nombre del sistema operativo, el identificador único y la versión del sistema operativo.
  • Eventos – Se puede ver cuando Cordova está cargado, cuando la aplicación se pone en segundo plano, cuando se vuelve a pasar a primer plano, si está online o no, el estatus de la batería,… (Utilizada en F2L)
  • Ficheros – Se puede escribir, leer y eliminar los ficheros en el sistema de un dispositivo.
  • Geolocalización – Se puede obtener información de geolocalización de un dispositivo desde el GPS, la dirección IP, RFID, direcciones WiFi y Bluetooth Mac, e ids GSM/CDMA de móviles.
  • Globalización – Permite obtener información de la lengua preferida, el localename, convertir fechas a cadenas y viceversa, obtener la moneda, el primer día de la semana,…
  • InAppBrowser – Se pueden lanzar urls en otras instancias del navegador.  (Utilizada en F2L)
  • Media – Grabar y reproducir ficheros de audio.
  • Notificaciones – Con esta opción se puede acceder a la notificaciones visuales, de audio o de vibraciones de un dispositivo.
  • Splashscreen – Muestra y oculta la pantalla splash de aplicaciones. (Utilizada en F2L)
  • Almacenamiento – Se pueden almacenar variables en el mismo móvil y después volverlas a recuperar. (Utilizada en F2L)

Cosas a parte de esas que se pueden hacer:

  • Hacer traducciones (con ayuda por ejemplo de apis como http://mymemory.translated.net )
  • Integración con Facebook.
  • Integración con Google Maps.
  • Realizar un carrito de la compra.
  • Tener bases de datos internas.
  • Integración con Twitter
  • Utilización del canvas para HTML
  • Utilizar cualquier API que se quiera a la que se pueda acceder mediante ajax

 

Ejemplos de aplicaciones con código disponible:

 

Página con un montón de aplicaciones que han utilizado phonegap http://phonegap.com/app/, ejemplos:

 

Espero que os haya valido para algo (yo al menos tengo un lugar al que acudir para acceder a los links que he encontrado).

(Actualización Junio 2015) He encontrado una página en donde te explican paso a paso cómo hacer un gestor de ingresos y gastos, aquí os lo dejo: http://www.sitepoint.com/creating-an-expense-manager-app-with-apache-cordova/

Dialog vs Popup – Jquery Mobile

La primera de las opciones (dialog) te abrirá una nueva página con el “pop up” en medio mientras que la segunda (popup) te abre esa ventanita por encima de la misma página. Esa es la diferencia más evidente.

A la pregunta… ¿pero puedo poner un diálogo por encima de una capa de texto? la respuesta es no, tienes que modificar y hacer que sea un pop up.
El diálogo (fuera de todo data-role=”page”)
<div data-role=”dialog” id=”documento” data-theme=”d” data-overlay-theme=”d” >
LO QUE SEA
</div>
Se le llamará con un enlace que tenga data-rel=”dialog”
Más info en jquery mobile.

El pop up (dentro del data-role=”page” en el cual queramos mostrarlo)
<div data-role=”popup” id=”documento” data-theme=”d” data-overlay-theme=”d” >
LO QUE SEA
</div>
Se le llamará con un enlace que tenga data-rel=”popup”.
Más info en jquery mobile.

Pack de iconos para jquery mobile

Como os habréis dado cuenta, siempre hay un problema cuando uno intenta utilizar los iconos que hay por defecto en el jquery mobile, y es que son muy pocos.

Para eso está este packs de iconos (realmente sería más correcto decir que es una fuente con doscientos y pico iconos en vez de caracteres).

Podéis encontrarlo en esta página http://andymatthews.net/code/jQuery-Mobile-Icon-Pack/index.html y podéis ver su totalidad si en esa misma pantalla accedéis al “Font Awesome Icons”.

Es muy fácil de instalar y de utilizar (con simplemente incluir un <i class=”icon-envelope icon-white”></i> yo puedo incluir un icono con forma de sobre de color blanco)