1
INTRODUCCIN
El desarrollo de aplicaciones mviles empresariales conlleva a construir software pensando en las diversas plataformas y diversos sistemas operativos que existen en el mercado. PhoneGap es un framework que, a partir del mismo cdigo fuente, permite generar versiones del software para diversos sistemas operativos. OBJETIVOS
Desarrollar aplicaciones mviles multiplataforma utilizando el framework PhoneGap.
Disear interfaces de usuario con PhoneGap Escribir aplicaciones que utilicen los diversos componentes del mvil Utilizar las libreras del sistema de comunicacin para llamadas y mensajes Escribir aplicaciones que consuman Servicios Web REST
UNIDADES:
1. Diseo Web para mviles 2. Entorno de desarrollo para PhoneGap 3. APIs de PhoneGap (1/2) 4. APIs de PhoneGap (2/2)
TECSUP Programacin en Mviles Multiplataforma
2
TECSUP Programacin en Mviles Multiplataforma
3
TECSUP Programacin en Mviles Multiplataforma
4
TECSUP Programacin en Mviles Multiplataforma
5
TEMAS: Esta unidad est compuesta por los siguientes temas: Tema 1: Fundamentos de jQuery Tema 2: Introduccin a jQuery Mobile Tema 3: Creacin de pginas con jQuery Mobile Tema 4: Componentes Tema 5: Temas de diseo
TECSUP Programacin en Mviles Multiplataforma
6
TECSUP Programacin en Mviles Multiplataforma
7
TECSUP Programacin en Mviles Multiplataforma
8
TECSUP Programacin en Mviles Multiplataforma
Instalacin de jQuery Descargamos la librera jquery-1.x.x.js de su pgina oficial: www.jquery.com y lo colocamos en nuestro directorio Web. Se podra utilizar la librera JavaScript sin descargarla, incluyndola directamente desde su URL, pero no es muy adecuado porque cargara toda la librera cada vez que se acceda a ella. La librera jQuery mantiene la separacin entre la estructura de la pgina diseo) y su comportamiento (lgica en JavaScript). A su vez, se mantiene una separacin entre los estilos y la estructura de la pgina.
9
TECSUP Programacin en Mviles Multiplataforma
DOM en jQuery DOM viene de las siglas Document Object Model y es un mecanismo para analizar documentos XML. El lenguaje HTML est basado en etiquetas XML y deben estar bien escritas (etiquetas de apertura y cierre) para que la librera funcione adecuadamente. jQuery permite agregar o quitar elementos de una pgina HTML en el instante (on the fly). Tambin podemos cambiar los atributos y contenido de cualquier elemento DOM, osea de cualquier etiqueta HTML en el instante. Definicin de DOM: a cross-platform and language-independent convention for representing and interacting with objects in HTML, XHTML and XML documents. Aspects of the DOM (such as its "Elements") may be addressed and manipulated within the syntax of the programming language in use. Fuente: Wikipedia
10
TECSUP Programacin en Mviles Multiplataforma
Funciones de jQuery jQuery() = $() $(function) Expresin para manejar cuando la pgina est lista (cargada completamente) $(selector) Expresin para seleccionar un elemento $(element) Expresin para especificar directamente un elemento $(HTML) Expresin para crear un HTML $.function() Expresin para ejecutar una funcin jQuery $.fn.myfunc(){} Crea una funcin jQuery
11
TECSUP Programacin en Mviles Multiplataforma
Seleccionando elementos La sintaxis para seleccionar es: $(selector): $(#id) id del elemento $(p) nombre de la etiqueta $(.class) una clase CSS $(p.class) Etiquetas que tengan el atributo class $(p:first) $(p:last) $(p:odd) $(p:even) $(p:eq(2)) obtiene la segunda etiqueta (el primero es 1) $(p)[1] obtiene la segunda etiqueta (el primero es 0) $(p:nth-child(3)) obtiene la tercera etiqueta empezando en la etique padre. n=par, o= impar. $(p a) Etiqueta dentro de $(p>a) Etiqueta directamente hijo de $(p+a) Etiqueta directamente que le sigue a $(p, a) Etiqueta y etiqueta $(li:has(ul)) Etiquetas que tengan por lo menos un $(:not(p)) Todas las etiqeutas que no tengan la etiqueta $(p:hidden) Solo la etiqueta que estn ocultas $(p:empty) Solo las etiquetas que no tienen elementos dentro $(img[alt]) Las etiquetas que tengan el atributo alt $(a[href^=http://]) Las etiquetas que tengan alt y que empiecen con http:// $(a[href$=.pdf]) Las etiquetas que tengan href y terminen en .pdf $(a[href*=abcde]) Las etiquetas con href que contengan abcde
12
TECSUP Programacin en Mviles Multiplataforma
Ms funciones de jQuery .empty() Elimina el contenido del elemento .filter(fn/sel) Selecciona los elementos donde la funcin retorne true o sel .find(selector) Selecciona los elementos que pongamos como criterio selector .parent() Retorna las etiquetas padres de cada elemento en un conjunto .children() Retorna las etiquetas hijas de un elemento .next() Obtiene los siguientes elementos de cada elemento .prev() Obtiene el elemennto previo .siblings() Obtiene todas las etiquetas hermanas del elemento actual
13
TECSUP Programacin en Mviles Multiplataforma
Agregar elementos a la pgina $(#ejemplo).before(Insertado antes de #ejemplo); $(#ejemplo).after(Agregado despus de #ejemplo); $(#ejemplo).append(Va dentro de #ejemplo); $(#ejemplo).wrap();
14
TECSUP Programacin en Mviles Multiplataforma
Enlazando funciones $(img).bind(click, function(event){ alert(abcde); } ); $(img).bind(click, imgclick(event) ); Desenlazando funciones $(img).unbind(click, imgclick() ); $(img).unbind(click); $(img).one(click, imgclick(event) ); Slo trabaja una vez $(img).click(imgclick); $(img).toggle(click1, click2); $(img).hover(mouseover, mouseout);
15
TECSUP Programacin en Mviles Multiplataforma
Funciones de event .stopPropagation() Detiene la propagacin del evento sobre otros .preventDefault() Cancela la accin predeterminada del evento (por ejemplo: un
hipeenlace). .trigger(eventType) Disparar controladores de eventos sobre algn elemento sin
requerir la accin del usuario .click(func) Agrega el evento clic a un elemento .submit(func) Agrega el evento submit a un elemento formulario .dblclick(func) Agrega el evento doble click .mouseover(func) Agrega el evento on mouse over (posiciona el mouse) .mouseout(func) Agrega el evento on mouse out (se quita el mouse del elemento) .hide() Ocultar una etiqueta .show() Mostrar una etiqueta .toggle(func1, func2) Primer click llama a func1, siguiente click llama a func2 .hover(over, out) Primero cuando sea mouseover y la segunda funcin cuando sea
mouseout
16
TECSUP Programacin en Mviles Multiplataforma
Eventos de jQuery .bind() .blur() .change() .click() .focus() .hover() .select() .toggle() .trigger() .submit()
.mousedown()
.mouseenter()
.mouseleave()
.keypress()
.keyup() $(document).keyup(function(event) { switch(event.which) { case 32: alert(32 pressed); break; } }); 17
TECSUP Programacin en Mviles Multiplataforma
Mtodos de manipulacin de elementos .add() .children() .contents() .filter() .find() .next() .not() .prev() .append() .appendTo() .clone() .detach() .insertAfter() .insertBefore() .remove()
18
TECSUP Programacin en Mviles Multiplataforma
Seleccin de elementos de formularios jQuery ofrece varios selectores de elementos de formulario. Estos elementos son: :button = Selecciona los elementos y con el atributo type=button :checkbox = Selecciona elementos con el atributo type=checkbox :checked = Selecciona elementos del tipo checkbox que estn seleccionado (checked) :disabled = Selecciona elementos del formulario que estn deshabilitado :enabled = Selecciona elementos del formulario que estn habilitados :file = Selecciona elementos con el atributo type=file :image = Selecciona elementos con el atributo type=image :input = Selecciona elementos , y :password = Selecciona elementos con el atributo type=password :radio = Selecciona elementos con el atributo type=radio :reset = Selecciona elementos con el atributo type=rest :selected = Selecciona elementos que estn seleccionados :submit = Selecciona elementos con el atributo type=submit :text = Selecciona elementos con el atributo type=text
19
TECSUP Programacin en Mviles Multiplataforma
Obtener las propiedades CSS La siguiente lnea retorna el tamao de la letra de la etiqueta h1: $(h1).css(fontSize); Las siguientes lneas sirven para establecer las propiedades CSS: $(h1).css(fontSize, 32px); $(h1).css( { fontSize : 32px, color : #008888 });
20
TECSUP Programacin en Mviles Multiplataforma
21
TECSUP Programacin en Mviles Multiplataforma
Caractersticas de jQuery Mobile Facilidad de diseo Web para mviles. El framework proporciona diversos
componentes que sin mucha programacin en JavaScript ni configuraciones complicadas. Si se desea darle funcionamiento adicional a los componentes, se podra utilizar el lenguaje JavaScript para lograrlo.
Estructura simple. jQuery Mobile permite utilizar un solo documento HTML para colocar diversas pginas para mviles. Aunque tambin permite separar la aplicacin en varis documentos HTML.
Adaptabilidad a los navegadores Web de los dispositivos mviles. jQuery Mobile est basado en HTML5, CSS3 y JavaScript, pero si algunos dispositivos mviles no cuentan con ests versiones, entonces jQuery Mobile mostrar el contenido lo ms adecuadamente posible, tratando siempre de dar la mejor apariencia.
Pensando en pantallas tctiles. jQuery Mobile trae controles que permiten su uso a travs de pantallas tctiles.
Tamao reducido para mejorar la velocidad. El archivo CSS y JS comprimidos pueden alcanzar tamaos de 24KB y 7KB respectivamente.
Herramienta para generar temas. jQuery Mobile nos proporciona el ThemeRoller, el cual nos permite crear nuestros propios temas para la aplicacin.
22
TECSUP Programacin en Mviles Multiplataforma
Compatibilidad con los navegadores Web para mviles Cada vez ms los navegadores soportan HTML5, CSS3 y JavaScript. El framework jQuery Mobile es compatible con esos navegadores as como tambin con navegadores de menor gama. Si deseamos saber el soporte que ofrece el framework jQuery Mobile a los navegadores, podemos acceder a la lista completa que se encuentra en la misma pgina del framework (http://jquerymobile.com/gbs/). Estn clasificados en tres categoras: Grado A: Estn los dispositivos que son totalmente compatibles con las ltimas
caractersticas del framework.
Grado B: Estn los dispositivos que son bastante compatibles con las ltimas caractersticas del framework, salvo algunas de sus caractersticas como el uso de AJAX.
Grado C: Estn los dispositivos que no son muy compatibles con el framework pero a pesar de ello, se pueden observar como HTML bsico.
23
TECSUP Programacin en Mviles Multiplataforma
24
TECSUP Programacin en Mviles Multiplataforma
Estructura de la pgina en jQuery Mobile El atributo data-role determina el tipo de elemento: Las pginas tienen tres bloques de cdigo: header, content y footer. Para aprovechar las funciones avanzadas de jQuery Mobile, debemos declarar la pgina como HTML5: David Rodrguez Condezo
25
TECSUP Programacin en Mviles Multiplataforma
Ejemplo de navegacin entre pginas Cabecera Estamos en pgina 1 Ir a pgina 2 Pie Cabecera Estamos en pgina 2 Ir a pgina 1 Pie
26
TECSUP Programacin en Mviles Multiplataforma
Ejemplo de navegacin entre documentos HTML Cabecera Estamos en Productos Ir a Servicios Pie Cabecera Estamos en Servicios Ir a Productos Pie
27
TECSUP Programacin en Mviles Multiplataforma
28
TECSUP Programacin en Mviles Multiplataforma
Creacin de formulario La etiqueta tradicional para crear un formulario:
Los mtodos HTTP permitidos son POST y GET. Recordemos que POST sirve para enviar datos en texto plano y tambin en binario (como archivos JPG, PDF, entre otros). Mientras que GET slo sirve para enviar datos en texto plano. El atributo action indica el programa que recibir los datos y los procesar. Por otro lado, el submit del formulario puede hacerse de manera tradicional o a travs de AJAX. Si desea deshabilitar la opcin de AJAX pues tendremos que configurar en el formulario el atributo data-ajax=false .
29
TECSUP Programacin en Mviles Multiplataforma
Atributo data-clear-btn=true El atributo data-clear-btn agrega un cono que permite borrar el contenido de las cajas de entrada. Cajas de fechas Estas cajas de fechas se pueden configurar en algunos aspectos ms. Por ejemplo, la siguiente caja permite elegir por meses (no das): La siguiente caja permite elegir por semanas: La siguiente caja permite elegir la hora: La siguiente caja permite elegir fecha y hora: La siguiente caja permite ingresar una URL (tengamos en cuenta que no se validar que sea una URL, sino que el teclado del smartphone ayudar a que se ingrese una URL): 30
TECSUP Programacin en Mviles Multiplataforma
Creacin de un checkbox Lnea de carrera: Infraestructura Telecomunicaciones Desarrollo de software
31
TECSUP Programacin en Mviles Multiplataforma
Creacin de un conjunto de Radio Tiene experiencia profesional? S No Creacin de una lista desplegable Sistema operativo favorito: Android iOS WebOS Firefox OS Creacin de un slider Nota:
32
TECSUP Programacin en Mviles Multiplataforma
Configuracin del Control Plegable Si desea eliminar las esquinas redondeadas se configura el atributo data-corners="false" Si desea configurar el control plegable para que abarque el ancho completo de la pantalla, entonces establecemos el atributo data-inset="false" Formacin acadmica Contenido 1 Capacitacin Contenido 2 Reconocimientos Contenido 3
33
TECSUP Programacin en Mviles Multiplataforma
Ejemplo de ListView con separador, navegable y con filtro Ciclo III Diseo con HTML5 Sistemas Operativos Marketing Recursos humanos Ciclo IV Meteorologa Gestin de empresas
34
TECSUP Programacin en Mviles Multiplataforma
Ejemplo de barra de navegacin: Cliente 1 Cliente 2 Cliente 3 Cliente 4 Cliente 5
35
TECSUP Programacin en Mviles Multiplataforma
Creacin de un panel izquierdo y derecho Aqu se describirn los sitios tursticos de las ciudades del Per. Compartir via... Cerrar Menu Lima Cuzco Cerrar Compartir esta pgina via: Twitter Facebook
36
TECSUP Programacin en Mviles Multiplataforma
Creando un tooltip Si desea mas informacin... Seleccione para ver detalles Ms informacin. Creando un elemento para agrandar imgenes Cerrar
37
TECSUP Programacin en Mviles Multiplataforma
Creacin de una tabla Provincia Lugar Descripcin Arequipa Valle del Colca El caon del Colca Cuzco Machu Picchu La Capital Arqueolgica de Amrica
38
TECSUP Programacin en Mviles Multiplataforma
Creando un componente deslizable Temperatura mxima y mnima del da:
39
TECSUP Programacin en Mviles Multiplataforma
40
TECSUP Programacin en Mviles Multiplataforma
Procedimiento para utilizar el ThemeRoller En principio, debemos personalizar los estilos globales y luego de cada plantilla (a, b, c, etc). Luego, descargamos el tema del diseo con un nombre, por ejemplo clasico. Se descargar a la computadora un archivo comprimido, de donde obtendremos el archivo clasico.css Ese archivo debemos incluirlo en nuestras pginas HTML:
41
TECSUP Programacin en Mviles Multiplataforma
42
TECSUP Programacin en Mviles Multiplataforma
43
BIBLIOGRAFA
http://jquerymobile.com/ http://www.ibm.com/developerworks/ssa/library/wa-jquerymobileupdate/index.html
TECSUP Programacin en Mviles Multiplataforma
44
TECSUP Programacin en Mviles Multiplataforma
Top Related