Crear aplicaciones para terminales móviles con HTML5


En el desarrollo de aplicaciones para dispositivos móviles, podemos encontrar dos tipos de aplicaciones: las aplicaciones nativas  para cada S.O  y las aplicaciones basadas en tecnología web.

Las aplicaciones nativas son desarrolladas en el lenguaje que es soportado por el sistema operativo del dispositivo, como Objective C para IOS o Java para Android. Mediante este método, podemos tener acceso a todas las características del hardware de nuestro dispositivo; pero con este tipo de desarrollo, nuestra aplicación solo puede ser ejecutada en el sistema operativo para el cual ha sido creada por lo que si deseamos que nuestra aplicación  funcione sobre diferentes sistemas operativos habrá que desarrollar cada app especialmente para dichos entornos .

Por otro lado, las aplicaciones basadas en tecnología web basadas actuamente en HTML5 , son básicamente paginas web que interactúan dinámicamente mediante JavaScript y tienen un diseño similar a una aplicación nativa con la ventaja de que la puedes hacer funcionar igual de bien en cualquiera de los SO para móviles que hay actualmente sin necesidad de cambios. De hecho, la diferencia entre una aplicación de este tipo y una nativa es prácticamente imperceptible en cuanto al diseño, y a los efectos. Estas aplicaciones no pueden interactuar con todo el hardware del dispositivo, pero si podemos hacer uso de JavaScript para interactuar con casi todo.

Las aplicaciones  que se crean en HTML5,si queremos que corran dentro del dispositivo como una nativa (no en el navegador), tenemos que “transformarlas” a nativas por medio de programas como PhoneGap para android, o bien   mediante una app que contenga al ruta del fichero o ficheros qeu contengan la aplicación .

En el caso de Android, para crear una app que contenga la apliacion HTML5 necesitaremos:

  • Eclipse con el Android SDK para crear la app que contiene la página HTML5.
  • JQuery Mobile. para el estilo y las transiciones entre páginas.

Lo primero que debemos hacer es crear una aplicación Android 2.2 y  crear un objeto del tipo WebView que contendrá la pagina web.

   1: public class PruebaActivity extends Activity {
   2:     /** Called when the activity is first created. */
   3:     @Override
   4:     public void onCreate(Bundle savedInstanceState) {
   5:         super.onCreate(savedInstanceState);
   6:         setContentView(R.layout.main);
   7:         
   8:         WebView webView = (WebView)findViewById(R.id.webView);
   9:         webView.getSettings().setJavaScriptEnabled(true);
  10:         //webView.getSettings().setGeolocationEnabled(true);
  11:         webView.setWebChromeClient(new WebChromeClient());
  12:         webView.loadUrl("file:///android_asset/www/index.html");   
  13:  
  14:          
  15:      }
  16: }

Después solo hay que crear la página html que contendrá la aplicación

Usando  jQuery Mobile es mucho  más   sencillo crear webs móviles con un aspecto muy similar al que tendriamos con Android o IPhone, además tiene eventos para controlar el scroll, el touch, etc.

Un ejemplo del aspecto que se puede conseguir usando los estilos de jQuery Mobile:

image

 

Se puede desarrollar aplicaciones HTML5 desde cero, sin embargo existen frameworks que permiten desarrollar interfaces similares al de las aplicaciones nativas pero usando tecnología web. Aquí se presentan algunos de los frameworks que existen:

 

jQuery Mobile

La famosa librería de JavaScript, nos ofrece un frameworks muy completo, basado en HTML5 y optimizado para todas las plataformas móviles. Es uno de los más populares y está desarrollado a partir de JQuery y JQuery UI. La instalación es muy sencilla y tenemos una amplia documentación.

 

PhoneJS

PhoneJS es un framework  para desarrollar apps en HTML5 compatibles para IOS, Android y WindowsPhone.
Sencilla de utilizar y de personalizar, es una de las mejores opciones.

 

Junior

Junior nos proporciona un framework muy sencillo, con diversos temas y animaciones.

 

Kendo UI

Kendo UI es un framework para el desarrollo de aplicaciones móviles con HTML5, que posee widgets basados en jQuery. Tiene una simple y consistente interfaz de programación, y numerosos temas.

 

Sencha Touch 2

Sencha Touch 2 es una framework para el desarrollo de aplicaciones móviles de alto rendimiento basados en HTML5. Tiene soporte para Blackberry 10 e IE 10, y es compatible con iOS, Android, Blackberry y Windows Phone entre otros.
Esta desarrollada a partir de la plataforma HTML5 de Sencha, y permite emplear Sencha Cmd, una linea de comandos multiplataforma que realiza tareas de manera automática.

Ahora ya solo os queda poneros a desarrollar como locos vuestras propias aplicaciones!!

 

Fuente  aqui

Desarrollo de aplicaciones móviles con jquery mobile


Primeros pasos con jQuery Mobile

jQuery Mobile proporciona un conjunto de widgets de interfaz de usuario para interfaces tactiles asi como un sistema de navegación con motor AJAX para apoyar transiciones de páginas animadas. La construcción de su primera página que use jQuery Mobile  y que podra ejecutar en su smartphone  o tableta  puede ser muy fácil como vamos  a ver :

Crear una plantilla de página básica

Abra su editor de texto favorito, pegue en la plantilla de la página a continuación, guarde y abra en un navegador. ! Ahora ya es un desarrollador móvil!

Esto es lo que hay en la plantilla. En la head , un meta viewport etiqueta establece el ancho de la pantalla para el ancho de píxel del dispositivo y las referencias a jQuery, jQuery Mobile y la hoja de estilo tema móvil de la CDN agregar todos los estilos y scripts. jQuery Mobile 1.1 funciona tanto con 1.6.4 y 1.7.1 versiones del núcleo de jQuery.

En el body , un div con un data-role de page es la envoltura usada para delinear una página y la barra de título ( data-role="header" ) y el área de contenido ( data-role="content" ) se añaden en el interior para crear una página básica (son ambos opcionales). Estos data-atributos son atributos de HTML5 se utilizan en todo jQuery Mobile transformar marcado básica en un widget de mejorado y con estilo.

<!--DOCTYPE html>My Page data-role="page">
 <div data-role="header"> <h1>My Title</h1> </div><!-- /header -->
 <div data-role="content"> <p>Hello world</p> </div><!-- /content --> </div>
<!-- /page --> 
</body> 
</html>
 pagina 

Agregue contenido

Dentro de su contenedor de contenido, puede agregar cualquier estándar elementos HTML – encabezados, listas, párrafos, etc Usted puede escribir sus propios estilos personalizados para crear diseños personalizados mediante la adición de una hoja de estilo adicional a la headdespués de que la hoja de estilo jQuery Mobile.

De forma predeterminada, los temas de jQuery Mobile utilizan estilos HTML estándar y tamaños de elementos estándar marcado como encabezados, contenido párrafo, citas en bloque, enlaces de anclaje, ordenó estándar, listas desordenadas y definición, y las tablas – como se muestra en los ejemplos siguientes:


Encabezamiento E1

Rubro H2

Rubro H3

Rubro H4

Rubro H5
Rubro H6

Este es un párrafo que contiene fuertes, enfatizó y vinculado texto. Aquí hay más texto para que pueda ver cómo funciona el formato HTML en el contenido. Aquí hay más texto para que pueda ver cómo funciona el formato HTML en el contenido.

¿Qué tal un poco de acción con un blockquote citar

Este es otro párrafo de texto para que pueda ver cómo funciona el formato HTML en el contenido. Este es otro párrafo de texto para que pueda ver cómo funciona el formato HTML en el contenido. Este es otro párrafo de texto para que pueda ver cómo funciona el formato HTML en el contenido.

Añadimos algunos estilos de tables y fieldsets para que sean más legibles, que son fáciles de reemplazar con estilos de aduana.

  • Desordenada elemento de la lista 1
  • Desordenada elemento de la lista 1
  • Desordenada elemento de la lista 1
  1. Pedido elemento de la lista 1
  2. Pedido elemento de la lista 1
  3. Pedido elemento de la lista 1
Término Definición
Soy el texto de la definición
Término Definición
Soy el texto de la definición
Itinerario de Viaje
Vuelo: De: A:
Total: 3 vuelos
JetBlue 983 Boston (BOS) Nueva York (JFK)
JetBlue 354 San Francisco (SFO) Los Ángeles (LAX)
JetBlue 465 Nueva York (JFK) Portland (PDX)

Hacer un listview

jQuery Mobile incluye un conjunto diverso de comunes listviews que están codificados como listas con un data-role="listview" agregó.Aquí está una lista enlazada simple que tiene un papel de listview . Vamos a hacer que esto parezca un módulo de inserción mediante la adición de una data-inset="true" y añade filtros de búsqueda dinámico con el data-filter="true" atributos.


<ul data-role="listview" data-inset="true" data-filter="true&quot>
	<li><a href="#">Acura</a></li>
	<li><a href="#">Audi</a></li>
	<li><a href="#">BMW</a></li>
	<li><a href="#">Cadillac</a></li>
	<li><a href="#">Ferrari</a></li>
</ul>
filter

Añadir un control deslizante

El marco contiene un conjunto completo de elementos de forma que automáticamente se han mejorado en los widgets de estilo de toque agradable. Aquí hay un control deslizante hecha con el nuevo tipo de entrada HTML5 de rango, no data-role es necesario. Asegúrese de envolver estos en una form de elemento y siempre asociar correctamente una label a cada elemento del formulario.

 <form> 
<label for="slider-0">Input slider:</label>
 <input type="range" name="slider" id="slider-0" value="25" min="0" max="100" /> 
</form>

Regulador de entrada:Input slider:

Input slider:

Hacer un botón

Hay algunas maneras de hacer que los botones , pero permite a su vez un enlace en un botón, así que es fácil de hacer clic. Simplemente comienza con un enlace y añadir un data-role="button" atributo a la misma. Usted puede agregar un icono con el data-icon de atributos y opcionalmente fijar su posición con la data-iconpos atributo.

 <a href="#" data-role="button" data-icon="star" >Star button</a>

boton

Juegue con muestras temáticas


jQuery Mobile cuenta con un robusto marco temático que soporta hasta 26 conjuntos de barra de herramientas, el contenido y los botones de colores, llamado un “muestrario”. Sólo tiene que añadir una data-theme="e" atributo a cualquiera de los widgets en esta página: página, encabezado, lista, entrada para el deslizador o botón para activarlo amarillo. Pruebe diferentes cartas de muestras en el tema por defecto de ae de mezclar y muestras de los partidos.


Enfriar truco: añadir la muestra de tema a la página y ver cómo todos los widgets dentro del contenido heredarán automáticamente el tema (encabezados y pies de página no heredan, que por defecto a swatch “a”).

<a href="#" data-role="button" data-icon="star" data-theme="a" >Button</a>
tematicas


Cuando esté listo para construir un tema personalizado, utilice ThemeRoller para arrastrar y soltar, a continuación, descargar un tema personalizado.

Y mucho más..

Hast aqui solo ha sido  un bosquejo de todas las cosas interesantes que usted puede construir con jQuery Mobile con poco esfuerzo.Asegúrese de explorar la vinculación páginas , añadiendo transiciones de página animadas , y la creación de cuadros de diálogo .Utilice la referencia-atributo de datos para probar algunos de los otros data- atributos que se pueden probar.

Si no desea utilizar el data- sistema de configuración de atributos, puede tomar el control total de todo y llamar a los plugins directamente, porque estos son todos los plugins sólo estándar jQuery construido con la fábrica widget de interfaz de usuario. Asegúrese de ajustar  la configuración global , eventos y métodos . Luego leer sobre las páginas de scripts , generación de páginas dinámicas , y la construcción de aplicaciones PhoneGap .

 

Fuente   aqui