programacion html5

Programación en HTML5: Cómo programar apps multiplataforma

Mucho se ha hablado sobre programar apps en este blog. Sobre desarrollo de apps Android e iOS, también sobre aplicaciones responsive y las nativas. Sobre monetizar esos proyectos móviles. Incluso el diseño de apps se ha hecho un hueco en nuestro blog. Pero nunca hemos dejado suficientemente clara una buena opción para llevar a cabo tu desarrollo móvil. Me refiero a la programación en HTML5 para crear una app multiplataforma.

Para los que acabáis de llegar al mundo de las apps, las diferencias entre las apps nativas y multiplataforma es que las primeras están ‘escritas’ en su propio lenguaje de programación de apps. Mientras que las aplicaciones multiplataforma tienen un solo código que es interpretado y ajustado a los dispositivos, diríamos que son prácticamente sinónimo de las aplicaciones web de las que hemos hablado en varias ocasiones.

Dentro de esta categoría existen 2 ramas de aplicaciones multiplataforma: la primera sobre WebView ( que utiliza HTML5, CSS3, JavaScript y que trataremos en este artículo); y otro tipo Xamarin que escribes una vez el código en un lenguaje común y te lo “traduce” a nativo de cada una de las plataformas.

Uno de los lenguajes que precisamente nos permiten crear apps multiplataforma, que con un solo desarrollo sean accesibles desde cualquier dispositivo, ese es HTML5. Veamos un poco más en profundidad en qué consiste.

programacion html5
Imágen de JuralMin a través de Pixabay

¿Qué es exactamente HTML5?

HTML5 es un lenguaje markup que se utiliza para estructurar y mostrar contenidos en web. Proporciona soporte para aplicaciones multimedia avanzadas, incluyendo audio y video. Pero también nos permite modificar el ‘layout’ de una página y modificar así su aspecto.

En este sentido, ¿cómo pueden aprovecharlo los desarrolladores de apps? El experto podrá programar apps interactivas con HMTL5 que se verán a través del navegador de cualquier dispositivo.

Es precisamente HTML5 uno de los lenguajes más versátiles para desarrollar aplicaciones web y el más utilizado al crear apps no nativas.

Programación en HTML5

En primer lugar podemos destacar que HTML5 es un lenguaje de programación muy extendido. De hecho se ha convertido desde octubre de 2014 en el estándar de programación web, así siempre encontraremos muchos recursos al respecto. Además, el World Wide Web Consortium (W3C) puso su sello de “Recomendado” a la quinta versión del lenguaje.

Las novedades que ha traído respecto a anteriores versiones de HTML y de otros lenguajes es la inclusión nativa de vídeo y audio y también implementar diseño responsive de forma automática.

programacion html5
Imágen de Geralt a través de Pixabay

La importancia del HTML5

Ya hemos dejado bien claro porque el lenguaje de programación es importante a nivel mundial y para un programador Android o iOS. Pero ¿sabes qué características tiene este lenguaje para convertirse en uno de las mejores opciones para programar apps multiplataforma? Vamos a exponerte esas ventajas de utilizar HTML5 al crear aplicaciones móviles.

  • Ante todo está su universalidad, es decir que funciona en todos los navegadores, ya sean en dispositivos móviles o desde el ordenador tradicional. El código es interpretado y mostrado por cualquiera de los navegadores (Chrome, Safari, Firefox, Internet Explorer).
  • Es un lenguaje con vocación claramente audiovisual. Permite incluir nativamente tanto audio como vídeo. Apuesta por mostrar e incluir contenidos multimedia en las creaciones.
  • Es mobile friendly. Una de las ventajas de la programación de apps con HTML5 es que este lenguaje busca ser responsive, adaptarse a la pantalla en la que se muestra el contenido. Por eso se convierte en perfecto para crear webs que se vayan a ver como aplicaciones (es decir, web apps). Según datos de la firma de análisis Vision Mobile, más del 50% de las aplicaciones móviles utilizan HTML5 junto a JavaScript y CSS.
  • Para los presupuestos más limitados es una buena idea averiguar primero cuánto cuesta crear una app. O incluso para empezar con una beta de nuestro negocio o juego para móviles arrancar con una versión en HTML5 para ver si funciona y existe mercado puede suponer un gran ahorro. Juegos del estilo al de Candy Crush (puzzles) pueden empezar con esta tecnología y más adelante pasarse al nativo.
  • Y finalmente, pero no menos importante, el lenguaje HTML5 es de carácter abierto: Es decir, cualquiera puede modificar, mejorar, ampliar o inventarse nuevos servicios sobre aplicaciones ya desarrolladas.
programacion html5
Imágen de Geralt a través de Pixabay

Ventajas e inconvenientes de programar apps multiplataforma

Continuando lo que decíamos en el apartado anterior, la mayor de las ventajas de crear apps multiplataforma con HTML5 y otros lenguajes es para aquellos que vienen del desarrollo Web. El programador web pueden utilizar su experiencia para introducirse en el desarrollo de apps de forma muy rápida y sencilla.

Otra ventaja es que no hace falta el doble o triple de recursos para hacer la misma app en Android, iOs y Windows Phone.

Como inconvenientes cabe destacar la velocidad de la app, que se ve seriamente reducida. Del mismo modo el acceso al hardware del dispositivo se ve limitado a los plugins disponibles. Otro inconveniente es que aunque se asegure que la app vaya a funcionar de forma automática en cualquier plataforma, eso no es cierto del todo. En la práctica hay que ir comprobando el desarrollo en todas las plataformas y comprobar que lo se ve bien en una también funciona en las otras.

Eso sí, RECUERDA que aunque las aplicaciones sean multiplataforma hay que generar una apk ( para dispositivos Android) o ipa nativa (para dispositivos iOS) para que sea legible y se muestre en los dispositivos móviles. Por eso mismo nos harán falta los SDK de cada plataforma. Como alternativa podemos usar un servicio que nos lo genere automáticamente como Adobe Build.

programacion en html5
Imágen de LakeXyde a través de Unsplash

Herramientas para desarrollo multiplataforma

Las herramientas más utilizadas para la programación en HTML5 para programar apps multiplataforma, tipo WebView, son las que te presentamos a continuación:

  • Apache Cordova: es un framework para el desarrollo de aplicaciones móviles propiedad de Adobe Systems que permite a los programadores desarrollar aplicaciones para dispositivos móviles utilizando herramientas web genéricas como JavaScript, HTML5 y CSS3, resultando aplicaciones híbridas.
  • AngularJS: es un framework de JavaScript de código abierto, mantenido por Google, que se utiliza para crear y mantener aplicaciones web de una sola página.
  • Ionic:es una herramienta, gratuita y open source, para el desarrollo de aplicaciones híbridas basadas en HTML5, CSS y JS. Está construido con Sass y optimizado con AngularJS.

Aunque la calidad de este tipo de aplicaciones no es la óptima que podemos encontrar en un desarrollo nativo, funciona muy bien para proyectos pequeños y medianos que no necesitan un rendimiento muy alto ni demasiadas funcionalidades. De hecho la primera aplicación de Facebook estaba desarrollada con este tipo de tecnología hasta que se decidió por la programación de apps nativas.

Ahora es tu turno elegir este tipo de programación con HTML5. Te ayudamos a crear una app multiplataforma?

UPDATE: 12 de Julio 2018. Algunas informaciones de este artículo han sido actualizadas.

publica tu proyecto app- crear apps

¡Comparte si te ha gustado!