See discussions, stats, and author profiles for this publication at: https://www.researchgate.

net/publication/270885057

Desarrollo de Aplicaciones Móviles con HTML5, CSS y JavaScript

Article · January 2015

CITATIONS READS

0 1,610

1 author:

Carlos Soriano
Universidad Don Bosco
3 PUBLICATIONS   0 CITATIONS   

SEE PROFILE

All content following this page was uploaded by Carlos Soriano on 15 January 2015.

The user has requested enhancement of the downloaded file.

 1

Desarrollo rápido de Aplicaciones Móviles

Híbridas con HTML5, JavaScript y CSS
Carlos Rodolfo Soriano López
Universidad Don Bosco de El Salvador
csoriano@sorianocarlos.com


Ultramobiles,
21,517 32,251 55,032
Premium

Resumen—El uso de dispositivos móviles está creciendo muy

rápido y usan diferentes sistemas operativos por lo que se hace PC Market
muy difícil mantener el desarrollo de aplicaciones para estos y 317,648 308,472 316,689
Total
llevarle el paso a la actual tendencia de desarrollo orientado a
dispositivos móviles; para esto surgen frameworks* que nos Tablets 206,807 256,308 320,964
permiten desarrollar aplicaciones móviles usando HTML5, CSS y
JavaScript ahorrándonos tiempo de desarrollo y aprendizaje de Mobile Phones 1,806,964 1,862,766 1,946,456
nuevos lenguajes.

I. INTRODUCCIÓN
Other Ultramobiles

L A nueva tendencia de uso de dispositivos móviles exige

que los desarrolladores y empresas se adapten a esta y
empiecen a crear aplicaciones para complementar o suplantar a
(Hybrid and
Clamshell)
2,981 5,381 7,645

las aplicaciones desarrolladas en la web y abarcar una mayor

cantidad de usuarios. Total 2,334,400 2,432,927 2,591,753
FUENTE: GARTNER(JUNIO 2014) [2]
Pero crear estas aplicaciones adicionales a los sitios/sistemas
web para los diferentes sistemas operativos móviles conlleva a
incrementar los costos del desarrollo al tener que reescribir el Como podemos observar en la Tabla 1, el envío a
código para cada plataforma. Para ello existen frameworks* distribuidores y clientes de dispositivos tradicionales como
que son capaces de transformar un sitio web (altamente PC’s de escritorio y Laptops prevee una disminución en el
recomendado Adaptable**) en una aplicación móvil para 2015 mientras que el de dispositivos móviles crece, lo que
cualquier sistema operativo con ciertas limitaciones del uso del confirma la tendencia del uso de móviles.
hardware (dependiendo del framework*) como pueden ser: uso
del giroscopio, GPS, uso de cámaras, etc. II. DESARROLLO DE SITIOS WEB ADAPTABLES

TABLA I
ENVÍOS DE DISPOSITIVOS POR SEGMENTOS A NIVEL MUNDIAL (CIENTOS DE El primer paso para crear una aplicación móvil híbrida es el
UNIDADES) desarrollo de un sitio web Adaptable para lograr que el diseño
y tamaños de los componentes se adapten a la resolución de la
pantalla del dispositivo en el que correrá.
Device Type 2013 2014 2015

A. HTML5

Traditonal PCs HTML es un lenguaje de etiquetas con el que se generan

(Desk-Based and 296,131 276,221 261,657 páginas web. Actualmente se encuentra en su quinta revisión.
Notebook)
Es importante recalcar que se debe de usar esta versión
debido a las nuevas etiquetas y soportes de elementos
embebidos como audio y video sin necesidad de plugins
adicionales como flash.
*
Conjunto de herramientas que contienen rutinas y clases predefinidas para B. CSS3
ahorrar el tiempo de desarrollo.
Las hojas de estilo en cascada se usan para definir la
** Es una filosofía de diseño y desarrollo cuyo objetivo es adaptar la
apariencia de las páginas web al dispositivo que se esté utilizando para presentación del documento HTML que previamente hemos
visualizarla [1].
 2

desarrollado a través de reglas aplicadas a sus etiquetas y REFERENCIAS

lograr separar la estructura de la presentación.
[1] Diseño web adaptable. (2014, 26 de diciembre). Wikipedia, La
C. JavaScript enciclopedia libre. Fecha de consulta: 06:55, enero 10, 2015 desde
http://es.wikipedia.org/w/index.php?title=Dise%C3%B1o_web_adaptabl
e&oldid=79003139.
Es un lenguaje de programación que se ejecuta del lado del [2] Worldwide Device Shipments by Segment. Gartner. Fecha de consulta:
cliente mejorando la interfaz de usuario y hacer el sitio web 06:55, enero 10, 2015 desde
dinámico al agregarle interactividad con el usuario sin enviar http://www.gartner.com/newsroom/id/2791017
peticiones al servidor.

III. CONVERSIÓN DEL SITIO WEB EN APLICACIÓN MÓVIL

Ahora que ya tenemos un “sitio web Adaptable”
procederemos a convertirlo en una Aplicación empaquetada
para la plataforma móvil que tenemos como objetivo (Android,
iOS, Blackberry, etc.) usando Frameworks que ya incluyen las
API’s del sistema destino para hacer lo más cercana a una
Aplicación nativa. Las instrucciones y formas de compilar
varían entre uno y otro framework, pero todos tienen el mismo
propósito.

TABLA II
FRAMEWORKS PARA CREAR APLICACIONES HÍBRIDAS MÁS POPULARES
Nombre URL
Ionic http://ionicframework.com/
PhoneGap http://phonegap.com/
Kendo UI Mobile http://www.telerik.com/kendo-ui
App Acelerator Titanium http://www.appcelerator.com/
Rhodes http://rhomobile.com/products/rhodes/

IV. LIMITACIONES DE LA APLICACIÓN MÓVIL

Dependiendo del Framework que se use para convertir
nuestro desarrollo web en Aplicación Móvil se puede encontrar
con limitantes del uso del hardware y sistema de ficheros del
dispositivo ya que nuestra APP es un sitio web embebido en la
Aplicación Móvil; aunque varios ya cuentan con las API’s
necesarias para poder acceder a estos recursos.

V. CONCLUSIONES
Sin duda las aplicaciones Híbridas por el momento no
pueden compararse con el desempeño que puede tener una
nativa en cuanto al uso de los periféricos del teléfono; pero es
la mejor opción para desarrollar aplicaciones informativas o
donde la interacción con el usuario depende únicamente de
entradas de datos de su parte y la manipulación y salida del
resultado del lado de la Aplicación Móvil. Y su tiempo de
desarrollo es relativamente bajo respecto a las aplicaciones
nativas y no dependen de aprender un nuevo lenguaje de
programación o a utilizar las API´s del sistema, agregando
también que se escribe un solo código en HTML5 para la APP
y el framework se encarga de crear el paquete para los
diferentes sistemas operativos móviles que soporte.

View publication stats