Tema 2: Apis y Frameworks de desarrollo Web móvil

Introducción al tema
Cuando se trata de desarrollar aplicaciones móviles, HTML5 ofrece una solución de dispositivo
que puede ofrecer información en tiempo real. Antes de HTML5, HTML sólo era bueno para la
información estática.  Como resultado, los usuarios debían constantemente "refrescar" sus
webs, además el hecho de que tendrían que desarrollar diferentes aplicaciones para diferentes
dispositivos. Desde la perspectiva de la estrategia móvil, tomó una gran cantidad de tiempo y
dinero.

Ahora, HTML5 ofrece la oportunidad de entregar datos en tiempo real, actualizaciones y

rendimiento eficaz a ser tomado en cuenta para el desarrollo móvil.  HTML5 introduce varias
APIs (interfaces de programación de aplicaciones) para proveer acceso a poderosas librerías
desde simple código Javascript.  Estas APIS tienen un enorme potencial en el desarrollo de
aplicaciones web móviles.

En esta semana vamos a repasar el uso de las principales APIS HTML5 para aprovechar los
recursos de hardware de los dispositivos móviles.  Hablaremos sobre la Geolocalización, una
de las APIS más utilizadas que nos permite conocer la ubicación geográfica del usuario.  Por
otro lado, repasaremos la API para detectar la orientación del dispositivo, el API que nos da la
posibilidad de acceder a vibrar el dispositivo y el API que nos permite interactuar con la voz.  
Además se consideran algunos aspectos adicionales como los schemes URI que nos permiten
acceder a ciertos accesos directos o servicios propios del dispositivo, así mismo es muy
importante conocer sobre los nuevos elementos INPUT semánticos de HTML5 que son vitales
en el uso de los dispositivos puesto que depende de su correcto uso para que el usuario tenga
facilidad para rellenar los campos de una forma más sencilla en cualquier formulario HTML5. 
Finalmente se repasará aquellos elementos de formulario que nos permiten interactuar con la
cámara y el micrófono del dispositivo móvil.

Terminaremos comentando sobre los dos principales frameworks de desarrollo para web
móviles más utilizados del momento:  Bootstrap y JqueryMobile.   Para cada uno, se
describirán sus características y ventajas principales y hacemos la recomendación de recursos
que nos permitirán aprender didácticamente el desarrollo con cada framework.

Mapa conceptual referido al tema

2.1. APIS HTML5
HTML5 ha sido un soplo de aire fresco para la web, que no sólo ha afectado a la web como la
conocemos, sino que además hoy HTML5 ofrece una serie de APIs que permiten a los
desarrolladores crear sitios web interactivos y mejorar la experiencia del usuario en los
dispositivos móviles.

Vamos a hablar un poco de las principales características que están disponibles en la web hoy
día y otras que también están en pleno desarrollo.

2.1.1. Geolocalización

Desde hace muchos años, los mapas de papel se han convertido en una antigüedad. Han sido
reemplazados por los dispositivos de navegación GPS dedicados y aplicaciones móviles, que se
han convertido en omnipresente. Usted los encuentra en los automóviles y, más importante
aún, en las tabletas y teléfonos inteligentes.

Una de las principales características de un dispositivo de navegación es detectar la posición

actual del dispositivo y su actualización a medida que cambia. Esto nos ayuda a llegar de un
lugar a otro, dándonos las respectivas direcciones.

Hoy en día, tenemos la ventaja de tener geolocalización de forma nativa con el apoyo de los
navegadores. Mediante esta API de geolocalización, permitimos que las aplicaciones detectar y
rastrear la ubicación del dispositivo.

La posibilidad de detectar la ubicación del dispositivo tiene una amplia gama de aplicaciones.
En la web, por ejemplo, Google, Microsoft y Yahoo utilizan la ubicación del usuario para
personalizar los SERPs (Search Engine Results Page), basado en la ubicación del usuario.

¿Qué es?

La API de geolocalización define una interfaz de alto nivel a la información de ubicación, tales
como latitud y longitud, que está vinculado al dispositivo donde se encuentra la aplicación, en
este caso el navegador que visita nuestra web móvil.

La API de geolocalización es una Recomendación del W3C lo que significa que la especificación
es estable. Podemos suponer que no va a cambiar en el futuro a menos que una nueva versión
se está trabajando. Vale la pena señalar que la API de geolocalización no es oficialmente parte
de la especificación HTML5, porque se ha desarrollado por separado.

Implementación

La API utiliza varias fuentes para detectar la posición del dispositivo. Por ejemplo, en un
ordenador portátil o un ordenador de sobremesa sin un chip de GPS, es probable que la
posición se deduce de la dirección IP del dispositivo, lo que significa que la ubicación devuelto
por la API no es muy precisa.

En un dispositivo móvil, sin embargo, la API se puede utilizar la información de múltiples y más
fuentes precisas, como el chip del dispositivo GPS, la conexión de red (Wi-Fi, 3G, HSPA+), y la
célula de GSM / CDMA. Usted puede contar con la información de localización más precisa en
un dispositivo móvil, especialmente si el GPS está habilitado.

La especificación de la API establece claramente que el permiso del usuario necesita ser
obtenido de manera explícita antes de ser habilitada la API.  Esto significa que se requiere que
el navegador muestre una notificación al usuario solicitando su permiso.
El API expone tres métodos que pertenecen al objeto window.navigator.geolocation.   Los
métodos proporcionados son:

getCurrentPosition
watchPosition
clearWatch

Para detectar si el navegador del dispositivo es compatible con la API de geolocalización

debemos usar lo siguiente:

Localizar el dispositivo
 
Para detectar la ubicación del dispositivo llamamos  a getCurrentPosition  o  watchPosition,
dependiendo de los requerimientos. Ambos métodos realizan la misma tarea con unas
mínimas diferencias.

La diferencia es que  getCurrentPosition  realiza una solicitud de una sola vez, mientras

que  watchPosition monitoriza la ubicación del dispositivo para cambios y notifica a la
aplicación cuando un cambio de ubicación se lleva a cabo.

Otra diferencia importante entre getCurrentPosition y watchPosition  es el valor de retorno de

cada método. El  método getCurrentPosition no devuelve nada, mientras que  watchPosition 
devuelve un identificador que se puede utilizar para detener el API de seguimiento de la
ubicación del dispositivo a través de la función clearWatch.

La sintáxis de uso es la siguiente:

getCurrentPosition (successCallback [, errorCallback [, opciones]])
watchPosition (successCallback [, errorCallback [, opciones]])

successCallback: Esta función de devolución de llamada se ejecuta después de obtener con

éxito la ubicación del usuario. La devolución de llamada acepta una posición de objeto que
contiene información de ubicación del dispositivo.

errorCallback: La devolución de llamada de error se ejecuta cuando se produce un error. La

devolución de llamada de error acepta un error de objeto, que contiene información sobre el
tipo de error que se produjo.

Opciones: La opciones  objeto le da al desarrollador la posibilidad de configurar la solicitud

asincrónica.
 
Podemos observar el siguiente código que nos da una idea del uso de estos métodos:

var geolocation = null;

if (window.navigator && window.navigator.geolocation) {
geolocation = window.navigator.geolocation;
}
if (geolocation) {
geolocation.getCurrentPosition(function(position) {
console.log(position);
});
 
var identifier = geolocation.watchPosition(function(position) {
console.log(position);
});
                console.log(identifier);
}

La función clearWatch permite detener el monitoreo de la ubicación del dispositivo, iniciado al

invocar a watchPosition.  Al llamar al método clearWatch debemos enviar como argumento, el 
identificador obtenido del método watchPosition.

Ahora analicemos con más detalle los objetos position, error, y options devueltos por la API de
geolocalización:

Position

Este objeto que es retornado desde la función devuelta de getCurrentPosition y watchPosition

contiene la información de la ubicación que nos interesa. Contiene las
propiedades timestamp and coords property. La propiedad coords es un objeto que contiene
la latitude, longitude, altitude, accuracy, altitudeAccuracy, heading, and speed.

La mayoría de navegadores de escritorio no retornan ningún valor para las propiedades

altitude, altitudeAccuracy, heading, y speed.  Sin embargo, los dispositivos móviles como los
smartphones and tablets, si proveen información más exacta gracias a la presencia del un chip
GPS u otro hardware que ayuda a detectar la localización del dispositivo.

La propiedad timestamp contiene el tiempo en que la localización fué detectada, esto puede

ser útil para saber si el dato obtenido es reciente.

PositionError

El objeto error es el segundo objeto obtenido de la función de retorno de getCurrentPosition y

watchPosition, Este tienen las propiedades code y message.

La propiedad message describe brevemente el tipo de error. La propiedad code puede tener
cualquier valor siguiente:

0 : La solicitud ha fallado, pero la razón se desconoce.

1 : La solicitud ha fallado porque el usuario no ha dado permiso para usar la ubicación del
dispositivo.
2 : La solicitud ha fallado, como resultado de un error de red.
3 : La solicitud ha fallado, ya que tomó demasiado tiempo resolver la posición del dispositivo.
PositionOptions

El tercer argumento opcional obtenido de getCurrentPosition y watchPosition es un objeto

PositionOptions, que permite al desarolador personalizar la solicitud asíncrona.

Actualmente PositionOptions admite tres opciones:

enableHighAccuracy : Si el valor se establece en  true, la página web o la aplicación indica que
quiere lo mejor-resultado preciso posible. Esto puede resultar en un tiempo de respuesta más
lento o mayor consumo de energía. El valor predeterminado es  false.

Tiempo de espera : Esta propiedad especifica el número máximo de milisegundos después de

lo cual la solicitud debe considerarse fuera de tiempo. El valor predeterminado es infinito.

maximumAge: Cuando una solicitud de ubicación es correcta, el explorador almacena en

caché el resultado para su uso posterior. Esta propiedad maximumAge  especifica el tiempo
tras el que la caché debe ser invalidada. El valor por defecto es 0 , lo que significa que la
solicitud no se debe almacenar en caché.

A continuación otro fragmento de código que podemos utilizar:

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(success, fail);
}
function success(position) {
  alert('Latitud: '+ position.coords.latitude +  ', Longitud: '+ position.coords.longitude);
}
function fail(error) {
switch(error.code) {
case error.UNKNOWN_ERROR:
alert("La geolocalización ha encontrado un error.");
break;  
case error.PERMISSION_DENIED:
alert("El usuario no ha autorizado el acceso a su posición.");
break;
case error.POSITION_UNAVAILABLE:
alert("El usuario no puede ser localizado.");
break;
case error.TIMEOUT:
alert("La geolocalización ha excedido el tiempo límite.");
break;
}
}

Finalmente para complementar el uso de esta API tenemos la librería de Google Maps para
localizar de una forma muy sencilla la posición del dispositivo en un mapa e interactuar con
otras características que deseemos dar a nuestra aplicación. 
2.1.2 Device Orientation
La mayoría de los dispositivos móviles modernos están equipados con acelerómetros,
giroscopios y brújulas.  La detección de la orientación de un dispositivo es útil para una amplia
gama de aplicaciones, desde aplicaciones de navegación para juegos, por ejm.  Un juego de
carreras en un dispositivo móvil que le permite controlar el coche por la inclinación del
dispositivo.  Otra aplicación de la API es la actualización de la interfaz de usuario de una
aplicación cuando la orientación del dispositivo cambia para ofrecer al usuario la mejor
experiencia posible mediante el aprovechamiento de toda la pantalla.

La API expone tres eventos que proporcionan información acerca de la orientación del
dispositivo:

deviceorientation

devicemotion

compassneedscalibration

Estos eventos se disparan en el objeto window.

deviceorientation

El evento deviceorientation se activa cuando el acelerómetro detecta un cambio de la

orientación del dispositivo. Podemos detectar este evento y responder a cualquier cambio
adjuntando un controlador de eventos al objeto window.  Cuando se invoca el controlador de
eventos, recibirá un argumento de tipo  DeviceOrientationEvent, que contiene cuatro
propiedades:

 alfa. Es el ángulo alrededor del eje z. Su valor oscila entre 0 a 360 grados. Cuando la
parte superior de los puntos de dispositivo al norte verdadero , el valor de esta
propiedad es 0 .
 beta  Es el ángulo alrededor del eje x. Su rango de valores de  -180 a 180 grados.
Cuando el dispositivo es paralelo a la superficie de la Tierra, el valor de esta propiedad
es 0 .
 gamma.  Es el ángulo alrededor del eje y. Sus valores oscilan entre -90 a 90 grados.
Cuando el dispositivo es paralelo a la superficie de la Tierra, el valor de esta propiedad
es 0 .
 absolute.  Especifica si el dispositivo está proporcionando datos de orientación que
está en relación con el sistema de coordenadas de la Tierra, en cuyo caso su valor es
verdadero , o un sistema arbitrario de coordenadas.

La ilustración siguiente, tomada de la especificación oficial, muestra las direcciones X, Y y Z

mencionados en relación con el dispositivo.
devicemotion

El evento devicemotion se activa cada vez que el dispositivo se acelera o desacelera. Puede
detectar este evento al igual que hicimos para el  evento deviceorientation. Cuando se invoca
el controlador de eventos, recibe un argumento de tipo  DeviceMotionEvent , que tiene cuatro
propiedades:

 acceleration.  Especifica la aceleración del dispositivo con respecto al bastidor de la

Tierra en las direcciones X, Y y Z, accesible a través de sus  x , Y , y Z propiedades. Los
valores se expresan en m/s2 .
 accelerationIncludingGravity.  Mantiene los mismos valores que la aceleración de la
propiedad, pero se toma en cuenta la gravedad terrestre. Los valores de esta
propiedad deben utilizarse en situaciones en las que el hardware del dispositivo no
sabe cómo quitar la gravedad de los datos de aceleración. De hecho, en tales casos, la
aceleración de la propiedad no debe ser proporcionada por el agente de usuario.
 rotationRate.  Especifica la velocidad a la que el dispositivo está girando alrededor de
cada uno de sus ejes en grados por segundo. Podemos acceder a sus valores
individuales a través de sus propiedades alfa, beta, y gamma.
 interval.  Proporciona el intervalo en el que se obtienen los datos. Este valor no debe
cambiar una vez que se establece. Se expresa en milisegundos.

compassneedscalibration

Este evento se activa cuando el agente de usuario determina que la brújula necesita
calibración. La especificación afirma que "los agentes de usuario sólo debe desencadenar el
evento si la calibración de la brújula aumenta la exactitud de los datos proporcionados por el
evento deviceorientation." Este evento se debe utilizar para informar al usuario que la brújula
necesita calibración y también debe indicar al usuario cómo hacer esto.

Implementación

Para detectar si el navegador o agente de usuario soporta uno de los primeros dos eventos,  
deviceorientation y devicemotion , debemos usar lo siguiente:

if (window.DeviceOrientationEvent) {

   // Navegador soporta

} else {

   // Navegador no soporta

}
2.1.3 Vibration API
Cuando el PlayStation fue introducido por primera vez en los años noventa hubo una pequeña
revolución que se creó con la introducción del DualShock, un controlador que introdujo
retroalimentación por medio de la vibración. Esto fue un gran éxito.  El factor clave fue su
capacidad para proporcionar información al jugador en forma de vibración, que te hace sentir
más conectado con el juego como si estuviera en el juego.

La web se ha convertido en mucho más poderoso y el resultado es que el desarrollo del juego
se ha trasladado a la web. Por otro lado, la potencia que tenemos hoy en la web significa la
capacidad que nos ayuda a crear una mejor experiencia de usuario y de aprovechar las nuevas
tecnologías disponibles en los dispositivos móviles.

La API de vibración fue diseñado para hacer frente a los casos de uso en los que la
retroalimentación táctil es necesaria o deseada. Prácticamente cada dispositivo moderno,
móvil incluye tiene la capacidad de vibrar. La API de vibración ofrece la posibilidad de acceder
mediante programación capacidades de vibración del dispositivo y trabajar con ellos.

Al igual que con las aplicaciones móviles nativas, las posibilidades de la API de vibración son
infinitas. Se puede utilizar para alguna notificación o para aplicación en juegos en web. 

Implementación

Es muy fácil de usar. Sólo hay un método que debe conocer, vibrate.  Este método pertenece
al objeto window del navegador.  Acepta un parámetro, que puede ser un entero o una matriz
de enteros.

Si se pasa como parámetro un solo número entero, el dispositivo vibra durante la duración del
entero en milisegundos.  Si se pasa una matriz de números, se define un patrón de vibraciones
y pausas. Cada valor indica el número de milisegundos que durará la vibración y la pausa,
respectivamente.  Para detener la vibración, se puede pasar 0 al vibrate o invocar el método
sin parámetros.

Veamos algunos ejemplos:

Para detectar si el navegador del dispositivo es compatible con la API de vibración, debemos
usar lo siguiente:

if (window.navigator && window.navigator.vibrate) {

// Soportado
} else {
// No soportado
}

Otra opción es inspeccionar el objeto navigator.

if ('vibrate' in navigator) {
// Soportado
} else {
// Not soportado
}

Para vibrar una vez durante 1 segundo: navigator.vibrate(1000);

Múltiples vibraciones: window.navigator.vibrate([200, 100, 200]);
El dispositivo vibra durante 200 ms, hace una pausa de 100 ms y vibra nuevamente durante
otros 200 ms.

Para detener la vibración: navigator.vibrate(0);

o tambien: navigator.vibrate([]);

2.1.4 Web Speech API

Gracias a la introducción de esta API, trabajar con el reconocimiento de voz nunca ha sido tan
fácil. Esta es conocida como la API Web de voz.

El reconocimiento de voz tiene varias aplicaciones del mundo real. Muchas más personas se
han familiarizado con este concepto gracias a softwares como Siri y S-Voice. Estas aplicaciones
pueden mejorar drásticamente la forma en que los usuarios, especialmente aquellos con
discapacidades, realizar tareas. En una página web, los usuarios pueden navegar por páginas o
rellenar campos de formulario usando su voz. Los usuarios también pueden interactuar con
una página mientras se conduce.

Antes de permitir que el sitio web acceda a la voz a través del micrófono, el usuario debe
otorgar explícitamente el permiso.  Si la página que ejecuta esta API utiliza el protocolo HTTPS,
el navegador solicita el permiso de una sola vez, de lo contrario lo hace cada vez que un nuevo
proceso se inicia.

La API Speech Web define una interfaz compleja, llamada SpeechRecognition, por el momento
sólo chrome soporta esta API, y su aplicación es muy limitada. Por lo tanto, vamos a cubrir sólo
los métodos y propiedades implementadas.

Permite dos tipos de reconocimiento: de una sola vez y continua. En el primer tipo, el
reconocimiento termina tan pronto como el usuario deja de hablar, mientras que en el
segundo se termina cuando se llama al método stop().  En este caso, podemos permitir a
nuestros usuarios terminar el reconocimiento adjuntando un controlador que llame al método
stop() (a través de un botón).  

Implementación

El único navegador que soporte esta API es Chrome, a partir de la versión 25 con un
subconjunto muy limitado de la especificación. Además, Chrome soporta esta API mediante el
prefijo webkit. Por lo tanto, la creación de un objeto de reconocimiento de voz, debe hacerse
así:

var recognizer = new webkitSpeechRecognition();

Este objeto expone los métodos siguientes:

onStart:  Establece una devolución de llamada que se dispara cuando el servicio de

reconocimiento ha comenzado a escuchar el audio con la intención de reconocer.

onResult:  Establece una devolución de llamada que se dispara cuando el reconocedor de voz

devuelve un resultado. El evento debe utilizar el interfaz SpeechRecognitionEvent.

onerror:  Establece una devolución de llamada que se dispara cuando se produce un error de

reconocimiento de voz. El evento debe utilizar el interfaz SpeechRecognitionError.
onEnd: Establece una devolución de llamada que se dispara cuando el servicio se ha
desconectado. El evento siempre se genera cuando la sesión termina, no importa cuál sea la
razón.

Además de estos métodos, podemos configurar el objeto de reconocimiento de voz utilizando

las siguientes propiedades:

continuous: Establece el tipo de reconocimiento (uno solo o continuo). Si su valor se establece

en true tenemos un reconocimiento continuo, de lo contrario el proceso termina cuando el
usuario deja de hablar.  Por defecto se establece en false.

lang: Especifica el idioma de reconocimiento. Por defecto se corresponde con el idioma del

navegador.

interimResults: Especifica si queremos los resultados interinos, mientras se va hablando. Si su

valor se establece en true, tendremos acceso a los resultados interinos que podemos mostrar
a los usuarios. Si el valor es false, obtendremos los resultados sólo después de que termine el
reconocimiento. Por defecto se establece en false.

A medida que el argumento result es obtenido, recibimos un objeto de

tipo SpeechRecognitionEvent que contiene los siguientes datos:

results[i]: Una matriz que contiene los resultados del reconocimiento. Cada elemento de la
matriz corresponde a una palabra reconocida.

resultIndex: El índice de resultado de reconocimiento actual.

results[i].isFinal: Booleano que indica si el resultado es final o interino.

results[i][j]: Una matriz 2D que contiene las palabras alternativas reconocidas. El primer

elemento es la palabra reconocida más probable.

results[i][j].transcript: La representación de texto de la palabra(s) reconocida.

results[i][j].confidence: La probabilidad de que el resultado es correcto. El valor varía de 0 a 1.

Finalmente te animamos a que investigues de forma personal sobre otras APIS que pueden
ayudarte a aprovechar al máximo los recursos de los dispositivos móviles.  A continuación te
menciono algunas:

Application cache
http://www.w3.org/TR/offline-webapps/

Storage API
http://www.w3.org/TR/webstorage/

Touch Events
http://www.w3.org/TR/touch-events/
2.1.5 URI Schemes

Los URI scheme (en español: Esquema URI) es el nivel más alto de la estructura de nombres
Uniform Resource Identifier (URI).

Son otras consideraciones más que debemos tener presente para el desarrollo de nuestras
aplicaciones web móviles.  Son utilizados para llamar directamente a algunos servicios ya
establecidos y estandarizados de una forma muy simple.

Aquí tenemos los dos ejemplos más utilizados:

<a href="tel:1-408-555-5555">Llama al 1-408-555-5555</a>

<a href="sms:1-408-555-1212">Envíame un SMS</a>

Como podemos deducir fácilmente en el primer caso, el dispositivo móvil automáticamente

realiza la llamada al número especificado.  Y en el segundo caso, utiliza el servicio de
mensajería del dispositivo para proceder a redactar nuestro SMS también para el número
indicado.

Son aspectos sencillos pero muy prácticos que mejoran la experiencia de nuestros usuarios.

2.1.6 INPUT HTML5 Semánticos

Brindar la facilidad para el ingreso de datos desde un dispositivo móvil es muy importante.   En
este aspecto HTML5 tiene un gran potencial con lo diferentes tipos semánticos de elementos
input que se pueden implementar.  Esto permite que de forma automática el móvil muestre el
tipo de teclado correspondiente al campo donde nos encontramos.  Esta es una gran utilidad
que debemos asegurarnos de aprovechar al máximo.

A la vez, al utilizar estos tipos de input semánticos, obtenemos la validación del lado del cliente
del propio tipo de entrada establecido, evitando o al menos ayudando a nuestros usuarios a
digitar correctamente sus datos.

Aquí los ejemplos de código para cada tipo del elemento INPUT:

<input type="email" />

<input type="url" />
<input type="date" />
<input type="time" />
<input type="datetime" />
<input type="month" />
<input type="week" />
<input type="number" />
<input type="range" />
<input type="tel" />
<input type="search" />
<input type="color" />
Una representación gráfica de algunos elementos:

Una demostración en línea de la aplicación de todos estos elementos input en su forma más
simple puedes ingresar con tu dispositivo móvil aquí: http://goo.gl/CNMp6

Un aspecto importante que también nos permiten estos nuevos input semánticos es la
validación de cada uno de ellos.  De esta manera nos aseguramos que el usuario digite en cada
campo lo que realmente deseamos antes que el formulario sea enviado.  A continuación se
muestra algunos ejemplos de estos atributos que nos permiten validar la entrada de datos.

Es importante mencionar que es posible también aplicar estilos personalizados cuando se está
validando un formulario.  Por ejemplo para el formulario anterior, podemos aplicar el siguiente
estilo personalizado:

2.1.7 HTML Media Capture

Estos elementos son de gran utilidad para aprovecharnos de la cámara de los dispositivos
móviles.  Es una de las características más interesantes de las aplicaciones web, especialmente
para dispositivos móviles.

Se basa básicamente en extender los elementos <input> mediante un atributo capture.  Aquí
algunos ejemplos:
Para capturar imagen
<input type="file" accept="image/*" capture="camera">

Para capturar vídeo

<input type="file" accept="video/*" capture="camcorder">

Para capturar audio

<input type="file" accept="audio/*" capture="microphone">

Si

quieres tomar una foto con la cámara del dispositivo y cargar la imagen utilizando un
formulario HTML, esto es todo el código que necesitas:

<form action="upload.html" method="post" enctype="multipart/form-data">

                <input type="file" accept="image/*" capture>

                <input type="submit" value="Upload">

</form>

2.2. Bootstrap
Bootstrap es un poderoso framework CSS de gran alcance para el desarrollo web más rápido y
más fácil.  Incluye HTML y CSS basado en plantillas de diseño para componentes comunes de
interfaz de usuario como la tipografía, las formularios, botones, cuadros, Navegaciones,
Dropdowns, Alertas, Modales, Tabs, Acordeón, Carrousel y muchos otros, así como
extensiones opcionales de JavaScript.

Fue desarrollado por Mark Otto y Jacbod Thornton de Twitter y es uno de los proyectos de
código abierto más utilizados en todo el mundo para la creación de aplicaciones web. 
Bootstrap 3 se construyó basado y pensado para la web móvil “mobile-first approach” o
enfoque móvil de primera, donde se prioriza la web moderna, la web que se puede ver
correctamente en cualquier dispositivo, desde pantallas pequeñas con poca resolución hasta
dispositivos con resoluciones grandes y pantallas de gran tamaño.  
2.2.1 Características

 Permite crear componentes de interfaz avanzados como Scrollspy y Typeaheads sin

tener que escribir una sola línea de código JavaScript.
 Nos ahorra mucho tiempo y esfuerzo al momento del diseño web, ya que podemos
utilizar un conjunto de herramientas y componentes de interfaz útiles para cualquier
aplicación web, los que comparten las mismas base y los mismos estilos de diseño,
haciendo consistente todo el diseño del proyecto.
 Es responsive, nos garantiza el poder crear diseños responsivos fácilmente.
 De fácil uso – Basta un conocimiento básico de HTML y CSS para utilzarlo.
 Tiene compatibilidad con diferentes navegadores – Firefox, Chrome, Safari, Opera y
Internet Explorer.
 Es open source, puede usarse libremente.

2.3. JqueryMobile
Es un sistema de interfaz de usuario basado en HTML5 diseñado para hacer aplicaciones web
responsivas y aplicaciones que sean accesibles en todos los dispositivos smartphones, tablets,
y de escritorio.

No se trata de un nuevo framework creado desde cero, sino más bien es un plugin para la
famosa librería javascript jQuery.  Es decir, es un framework basado en jQuery.  Está
construido usando HTML5 y CSS3 y sigue los estándares web abiertos.  Consiste en un
conjunto de herramientas que simplificará el proceso de crear páginas para móviles. 
Proporciona los widgets de interfaz de usuario amigables al tacto que están especialmente
estilizados para los dispositivos móviles.
Como jQuery Mobile sigue los estándares web abiertos, usted puede estar seguro de que su
aplicación puede obtener el máximo soporte y la compatibilidad con una amplia gama de
navegadores y plataformas.

Podemos escribir nuestra  aplicación una vez y funcionará sin problemas en iPhones, iPads,
teléfonos Android y tablets, Blackberry, Bada, Windows Symbian, Meego, y hasta las próximas
Plataformas basadas en HTML5, como Boot2Gecko y Tizen. El mismo código se ejecutará en
Chrome, Firefox, Opera, Internet Explorer, Safari y otros navegadores en su escritorio. Además,
se va a trabajar incluso en su televisor inteligente o cualquier otro dispositivo que tenga un
navegador compatible que cumple con los estándares web abiertos.

2.3.1  Características
- Creado sobre jQuery con arquitectura de jQueryUI
- Repleto de automatismos. Ajax en jQuery es fácil, en jQueryMobile es super fácil.
- Preparado para dispositivos táctiles.   Soporte para eventos táctiles.
- Personalización de temas.  podemos elegir entre varios temas gráficos ya listos. 
- Ahora tambien ya es posible crear nuestros propios temas personalizados.
- Es compatible con el mayor número de plataformas.
 
2.3.2  Recursos recomendados
Un buen lugar para aprender desde lo básico el manejo de este framework es en la
documentación oficial: http://demos.jquerymobile.com/1.4.5/
Por otro lado, en el internet tambien tenemos a disposición una gran cantidad de recursos que
nos pueden ayudar a profundizar en este tema.  Un video tutorial muy didáctico puedes
encontrarlo aquí: Tutorial JqueryMobile
La lista de los navegadores soportados, plataformas certificadas en la actualidad, y el grado de
soporte está disponible en el sitio web de jQuery Mobile
en http://www.jquerymobile.com/gbs.