Programacion Moviles Multiplataforma 1 1

44
1 INTRODUCCIÓN El desarrollo de aplicaciones móviles 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 código fuente, permite generar versiones del software para diversos sistemas operativos. OBJETIVOS Desarrollar aplicaciones móviles multiplataforma utilizando el framework PhoneGap. Diseñar interfaces de usuario con PhoneGap Escribir aplicaciones que utilicen los diversos componentes del móvil Utilizar las librerías del sistema de comunicación para llamadas y mensajes Escribir aplicaciones que consuman Servicios Web REST UNIDADES: 1. Diseño Web para móviles 2. Entorno de desarrollo para PhoneGap 3. API’s de PhoneGap (1/2) 4. API’s de PhoneGap (2/2) TECSUP Programación en Móviles Multiplataforma

description

Multiplataforma para dispositivos móviles.

Transcript of Programacion Moviles Multiplataforma 1 1

  • 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