Programacion Para Moviles

Manual de Mviles usando jQuery Mobile

Ing. Yosip Urquizo Gmez Pgina 1

PROGRAMACION PARA MOVILES

Qu es jQuery Mobile?

jQuery Mobile es un framework para desarrollo de aplicaciones y sitios web optimizados para smartphones y tablets.

Por qu Utilizarlo?

Podemos desarrollar una sola aplicacin que funcione en las plataformas ms populares de smartphones y tablets, en vez de tener que escribir aplicaciones nativas para cada dispositivo mvil o sistema operativo, siempre teniendo en cuenta las limitaciones del navegador utilizado.

Algunas plataformas compatibles con jQuery Mobile son:

Para definir el grado de compatibilidad con los dispositivos, jQueryMobile nos ofrece el siguiente sistema de clasificacin:

Sistema completo o de grado-A, con animaciones entre transiciones de pginas basado en Ajax.

Sistema completo menos Ajax o de grado-B. Sistema bsico o de grado-C, para smartphones antiguos. Sistema no soportado oficialmente. Funciona en el dispositivo aunque no est

testeado.

Para ms informacin sobre el grado de compatibilidad con los dispositivos, visitar el siguiente enlace http://jquerymobile.com/gbs/#gbs

Versin Actual

Actualmente (06/09/2013) est disponible la versin 1.3.2 del framework y lo puedes descargar desde la siguiente direccin http://jquerymobile.com/download/

Estructura Bsica de una Pgina Web Mvil

En esta seccin dareamos una mirada rpida a la estructura de una pgina con jQueryMobile. jQuery Mobile cuenta con unas directrices sobre la estructura de las pginas en si mismas. En general, una estructura de pgina debe tener las siguientes secciones:



Barra de encabezado (Header Bar)

Normalmente contiene el ttulo de la pgina y el botn Atrs.

Contenido (Content section)

El contenido de nuestra aplicacin.

Barra de pi (Footer Bar)

Normalmente contiene los elementos de navegacin, la informacin de copyright o la informacin que necesitemos aadir en el footer.

Por ejemplo, la siguiente imagen muestra las diferentes secciones.

La codificacin para el ejemplo anterior seria:

La seccin de footer es muy sencilla. Aadir una barra de navegacin no es muy complicado, por ejemplo.



El Cdigo fuente seria de esta forma:

Componentes de una Pgina Web mvil

Adems de poder utilizar elementos html bsicos como listas, headings o tablas, jQuery Mobile nos proporciona los siguientes componentes.

Toolbars

En jQuery Mobile hay dos tipos estndar de toolbars. La Header bar y la Footer bar. La Header bar, por ejemplo, podr incluir, sin necesidad de realizar ninguna modificacin css, un ttulo y dos botones. Si queremos una barra de navegacin con ms de dos enlaces lo correcto sera introducir el widget Navbar en la cabecera o en el pie. Tambin podemos indicar si queremos las toolbars con posicin fija. Veamos el siguiente ejemplo de header con 2 botones



Ahora veamos un ejemplo de un footer con una barra de navegacin, con posicin fija, que contiene seis enlaces (cuando contiene ms de cinco items los muestra en varias lneas horizontales). Destacamos las propiedades data-role=footer, data-position=fixed y data-role=navbar.



Buttons

Podemos crear botones con o sin iconos y/o con o sin texto. Tambin podemos crear agrupaciones de botones, posicionarlos en la misma lnea o posicionar su icono. En este ejemplo podemos ver una agrupacin de dos botones en horizontal con su icono correspondiente. Destacamos las propiedades data-role=controlgroup, data-type=horizontal, data-role=button, data-icon=arrow-l y data-iconpos=right.

Grids

A continuacin podemos ver un ejemplo de un grid de 3 filas y 5 columnas. En este caso particular para generar 5 columnas utilizamos la clase ui-grid-d (por ejemplo si quisiramos generar nicamente un grid con dos columnas utilizaramos la clase ui-grid-a o ui-grid-b para generar uno de 3 columnas). Luego para cada bloque la clase ui-block-x siendo x=a cuando es la primera columna, x=b cuando es la segunda y as sucesivamente empezando otra vez por ui-block-a cuando cambiamos de fila.



Collapsible content blocks

A continuacin mostramos un ejemplo de un collapsible block sencillo. Destacamos las propiedades data-role=collapsible para definir el tipo de elemento y data-collapsed para indicar si queremos ver el contenido desplegado o no. El contenido, como veremos en el ejemplo de accordions, puede ser de cualquier tipo (un listview, un formulario, etc,)

Accordions

Es posible agrupar varios collapsible content blocks en un accordion. Tambin se puede introducir cualquier elemento dentro de un bloque (por ejemplo un list view bsico). Adems de las propiedades destacadas en el ejemplo anterior destacamos el data-role=collapsible-set.



Form elements

Veamos en varios ejemplos los elementos bsicos que se pueden introducir en un formulario.



Text input

Password input

Textarea



Search input

Slider

Flip toggle switch



Radio buttons

Checkboxes



Select



Select menu personalizado

Submit buttons

Ejemplo de List View



List View 01

List View 02

Si deseas profundizar en muchas mas opciones sobre jQuery mobile, te invito a que visites este link: http://jquerymobile.com/demos/1.1.0/

Programacion Para Moviles

Documents

Transcript of Programacion Para Moviles