Programacion Moviles Multiplataforma 1 1

TECSUP
Programacin en Mviles Multiplataforma
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.
2.
3.
4.
Diseo Web para mviles

Entorno de desarrollo para PhoneGap
APIs de PhoneGap (1/2)
APIs de PhoneGap (2/2)
TECSUP
TECSUP
TECSUP
TECSUP
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
TECSUP
TECSUP
TECSUP
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.
TECSUP
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
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
Seleccionando elementos
La sintaxis para seleccionar es: $(selector):

$(#id)
id del elemento
$(p)
nombre de la etiqueta
$(.class)
una clase CSS
$(p.class)
Etiquetas <p> que tengan el atributo class
$(p:first)
$(p:last)
$(p:odd)
$(p:even)
$(p:eq(2)) obtiene la segunda etiqueta <p> (el primero es 1)
$(p)[1]
obtiene la segunda etiqueta <p> (el primero es 0)
$(p:nth-child(3))
obtiene la tercera etiqueta <p> empezando en la
etique padre. n=par, o= impar.
$(p a)
Etiqueta <a> dentro de <p>
$(p>a)
Etiqueta <a> directamente hijo de <p>
$(p+a)
Etiqueta <a> directamente que le sigue a <p>
$(p, a)
Etiqueta <p> y etiqueta <a>
$(li:has(ul)) Etiquetas <li> que tengan por lo menos un <ul>
$(:not(p))
Todas las etiqeutas que no tengan la etiqueta <p>
$(p:hidden) Solo la etiqueta <p> que estn ocultas
$(p:empty) Solo las etiquetas <p> que no tienen elementos dentro
$(img[alt]) Las etiquetas <img> que tengan el atributo alt
$(a[href^=http://])
Las etiquetas <a> que tengan alt y que empiecen
con http://
$(a[href$=.pdf])
Las etiquetas <a> que tengan href y terminen en
.pdf
$(a[href*=abcde])
Las etiquetas <a> con href que contengan abcde
12
TECSUP
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
Agregar elementos a la pgina
$(#ejemplo).before(<p>Insertado antes de #ejemplo</p>);

$(#ejemplo).after(<p>Agregado despus de #ejemplo</p>);
$(#ejemplo).append(<p>Va dentro de #ejemplo</p>);
$(#ejemplo).wrap(<div></div>);
14
TECSUP
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
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
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
Mtodos de manipulacin de elementos
.add()
.children()
.contents()
.filter()
.find()
.next()
.not()
.prev()
.append()
.appendTo()
.clone()
.detach()
.insertAfter()
.insertBefore()
.remove()
18
TECSUP
Seleccin de elementos de formularios
jQuery ofrece varios selectores de elementos de formulario. Estos elementos son:

:button = Selecciona los elementos <button> y con el atributo type=button
:checkbox = Selecciona elementos <input> con el atributo type=checkbox
:checked = Selecciona elementos <input> del tipo checkbox que estn
seleccionado (checked)
:disabled = Selecciona elementos del formulario que estn deshabilitado
:enabled = Selecciona elementos <input> del formulario que estn habilitados
:file = Selecciona elementos <input> con el atributo type=file
:image = Selecciona elementos <input> con el atributo type=image
:input = Selecciona elementos <input>, <textarea> y <select>
:password = Selecciona elementos <input> con el atributo type=password
:radio = Selecciona elementos <input> con el atributo type=radio
:reset = Selecciona elementos <input> con el atributo type=rest
:selected = Selecciona elementos <options> que estn seleccionados
:submit = Selecciona elementos <input> con el atributo type=submit
:text = Selecciona elementos <input> con el atributo type=text
19
TECSUP
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
21
TECSUP
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
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
24
TECSUP
Estructura de la pgina en jQuery Mobile
El atributo data-role determina el tipo de elemento:

<div data-role="page" id="pagina1">
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:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>David Rodríguez Condezo</title>
<link rel="stylesheet" href="css/jquery.mobile.structure-1.3.0.css">
<link rel="stylesheet" href="temas/clasico.css">
<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery.mobile-1.3.0.js"></script>
</head>
<body>
25
TECSUP
Ejemplo de navegacin entre pginas

<div data-role="header">
Cabecera
</div>
<div data-role="content">
<p>Estamos en página 1<p>
<p><a href="#pagina2">Ir a página 2</a></p>
</div>
<div data-role="footer">
Pie
</div>
</div>
<div data-role="header">
Cabecera
</div>
<p>Estamos en página 2<p>
<p><a href="#pagina1">Ir a página 1</a></p>
</div>
<div data-role="footer">
Pie
</div>
</div>
26
TECSUP
Ejemplo de navegacin entre documentos HTML
<! Este va en el documento productos.html -->

<div data-role="header">Cabecera</div>
<p>Estamos en Productos<p>
<p><a href="servicios.html">Ir a Servicios</a></p>
</div>
<div data-role="footer">Pie</div>
</div>
<! Este va en el documento servicios.html -->
<div data-role="header">Cabecera</div>
<p>Estamos en Servicios<p>
<p><a href="productos.html">Ir a Productos</a></p>
</div>
<div data-role="footer">Pie</div>
</div>
27
TECSUP
28
TECSUP
Creacin de formulario
La etiqueta tradicional para crear un formulario:

<form
name="form1"
action="test.php"
method="post"
data-ajax="false">
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
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):
<input type="month" name=mes" id=mes" />
La siguiente caja permite elegir por semanas:
<input type="week" name=semana" id=semana" />
La siguiente caja permite elegir la hora:
<input type="time" name=hora" id=hora" />
La siguiente caja permite elegir fecha y hora:
<input type="datetime" name=fechahora" id=fechahora" />
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):
<input type="url" name=direccionweb" id=direccionweb" />
30
TECSUP
Creacin de un checkbox
<fieldset data-role="controlgroup">
<legend>Línea de carrera:</legend>
<input type="checkbox" name="1a" id="checkbox-1a"/>
<label for="checkbox-1a">Infraestructura</label>
<label for="checkbox-2a">Telecomunicaciones</label>
<label for="checkbox-3a">Desarrollo de software</label>
</fieldset>
31
TECSUP
Creacin de un conjunto de Radio

<fieldset data-role="controlgroup">
<legend>¿Tiene experiencia profesional?</legend>
<input type="radio" name="exper" id="exper_si">
<label for="exper_si">Sí</label>
<input type="radio" name="exper" id="exper_no">
<label for="exper_no">No</label>
</fieldset>
Creacin de una lista desplegable
<label for="sistemaop" class="select">Sistema operativo favorito:</label>
<select name="sistemaop" id="sistemaop">
<option value="1">Android</option>
<option value="2">iOS</option>
<option value="3">WebOS</option>
<option value="4">Firefox OS</option>
</select>
Creacin de un slider
<label for="slider-nota">Nota:</label>
<input type="range" name="slider-nota" id="slider-nota" data-highlight="true"
min="0" max="20" value="10">
32
TECSUP
Configuracin del Control Plegable
Si desea eliminar las esquinas redondeadas se configura el atributo datacorners="false"

Si desea configurar el control plegable para que abarque el ancho completo de la
pantalla, entonces establecemos el atributo data-inset="false"
<div data-role="collapsible-set" data-corners="false">
<div data-role="collapsible">
<h3>Formación académica</h3>
<p>Contenido 1</p>
</div>
<h3>Capacitación</h3>
<p>Contenido 2</p>
</div>
<h3>Reconocimientos</h3>
<p>Contenido 3</p>
</div>
</div>
33
TECSUP
Ejemplo de ListView con separador, navegable y con filtro
<ul
data-role="listview"
data-inset="true"
data-filter="true"
data-filterplaceholder="Escriba un criterio de búsqueda" data-inset="true" >
<li data-role="list-divider">Ciclo III</li>
<li><a href="#">Diseño con HTML5</a></li>
<li><a href="#">Sistemas Operativos</a></li>
<li><a href="#">Marketing</a></li>
<li><a href="#">Recursos humanos</a></li>
<li data-role="list-divider">Ciclo IV</li>
<li><a href="#">Meteorología</a></li>
<li><a href="#">Gestión de empresas</a></li>
</ul>
34
TECSUP
Ejemplo de barra de navegacin:
<div data-role="navbar">
<ul>
<li><a href="#" class="ui-btn-active">Cliente 1</a></li>
<li><a href="#">Cliente 2</a></li>
</ul>
</div>
35
TECSUP
Creacin de un panel izquierdo y derecho

<div data-role="page">
<p>Aquí se describirán los sitios turísticos de las ciudades
del Perú.</p>
<a href="#panel_derecha" data-role="button" data-inline="true" datamini="true" data-shadow="false">Compartir via...</a>
</div>
<div data-role="panel" id="panel_izquierda" data-display="push" dataposition="left">
<ul data-role="listview">
<li data-icon="delete"><a href="#" data-rel="close">Cerrar</a></li>
<li data-role="list-divider">Menu</li>
<li data-icon="back"><a href="#">Lima</a></li>
<li data-icon="back"><a href="#">Cuzco</a></li>
</ul>
</div>
<div data-role="panel" id="panel_derecha" data-display="overlay" dataposition="right" >
<ul data-role="listview" data-icon="false">
<li data-icon="delete"><a href="#" data-rel="close">Cerrar</a></li>
<li data-role="list-divider">Compartir esta página via:</li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Facebook</a></li>
</ul>
</div>
</div>
36
TECSUP
Creando un tooltip
<p>Si desea mas información...

<a href="#popup1" data-rel="popup" data-role="button" class="ui-icon-alt" datainline="true" data-transition="pop" data-icon="info" dataiconpos="notext">Seleccione para ver detalles</a></p>
<div data-role="popup" id="popup1" class="ui-content" style="max-width:350px;">
<p>Más información.</p>
</div>
Creando un elemento para agrandar imgenes
<a href="#popupImagen1" data-rel="popup" data-position-to="window" datatransition="fade"><img class="popphoto" src="img/machupicchu.jpg"

style="width:30%"></a>
<div data-role="popup" id="popupImagen1" data-corners="false">
<a href="#" data-rel="back" data-role="button" data-icon="delete" dataiconpos="notext" class="ui-btn-right">Cerrar</a>
<img class="popphoto" src="img/machupicchu.jpg" style="max-height:512px;">
</div>
37
TECSUP
Creacin de una tabla
<table data-role="table" id="tabla1" data-mode="columntoggle" class="ui-body-d

ui-shadow table-stripe ui-responsive" data-column-btn-text="Columnas" >
<thead>
<tr class="ui-bar-d">
<th data-priority="3">Provincia</th>
<th data-priority="1">Lugar</th>
<th data-priority="2">Descripción</th>
</tr>
</thead>
<tbody>
<tr>
<th>Arequipa</th>
<td><a href="#">Valle del Colca</a></td>
<td>El cañon del Colca</td>
</tr>
<tr>
<th>Cuzco</th>
<td><a href="#">Machu Picchu</a></td>
<td>La Capital Arqueológica de América</td>
</tr>
</tbody>
</table>
38
TECSUP
Creando un componente deslizable
<div data-role="rangeslider">
<label for="rango1">Temperatura
día:</label>
<input type="range"
value="12">
<input type="range"
value="28">
máxima
mínima
del
name="rango1"
id="rango1"
min="10"
max="30"
name="rango2"
id="rango2"
min="10"
max="30"
</div>
39
TECSUP
40
TECSUP
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:
<link rel="stylesheet" href="temas/clasico.css">
41
TECSUP
42
TECSUP
BIBLIOGRAFA
http://jquerymobile.com/
http://www.ibm.com/developerworks/ssa/library/wa-jquerymobileupdate/index.html
43
TECSUP
44

Programacion Moviles Multiplataforma 1 1

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Programacion Moviles Multiplataforma 1 1

Caricato da

Copyright:

Formati disponibili

TECSUP

Programacin en Mviles Multiplataforma

El desarrollo de aplicaciones mviles empresariales conlleva a construir software

Desarrollar aplicaciones mviles multiplataforma utilizando el framework

Diseo Web para mviles

Programacin en Mviles Multiplataforma

Programacin en Mviles Multiplataforma

Programacin en Mviles Multiplataforma

Programacin en Mviles Multiplataforma

Tema 1: Fundamentos de jQuery

Programacin en Mviles Multiplataforma

Programacin en Mviles Multiplataforma

Programacin en Mviles Multiplataforma

Programacin en Mviles Multiplataforma

Descargamos la librera jquery-1.x.x.js de su pgina oficial: www.jquery.com y lo

Programacin en Mviles Multiplataforma

Programacin en Mviles Multiplataforma

Expresin para seleccionar un elemento

Expresin para especificar directamente un elemento

Expresin para crear un HTML

Expresin para ejecutar una funcin jQuery

$.fn.myfunc(){} Crea una funcin jQuery

Programacin en Mviles Multiplataforma

La sintaxis para seleccionar es: $(selector):

Programacin en Mviles Multiplataforma

Elimina el contenido del elemento

Selecciona los elementos donde la funcin retorne true o sel

Selecciona los elementos que pongamos como criterio selector

Retorna las etiquetas padres de cada elemento en un conjunto

Retorna las etiquetas hijas de un elemento

Obtiene los siguientes elementos de cada elemento

Obtiene el elemennto previo

Obtiene todas las etiquetas hermanas del elemento actual

Programacin en Mviles Multiplataforma

Agregar elementos a la pgina

$(#ejemplo).before(<p>Insertado antes de #ejemplo</p>);

Programacin en Mviles Multiplataforma

$(img).bind(click, function(event){ alert(abcde); } );

Slo trabaja una vez

Programacin en Mviles Multiplataforma

.stopPropagation() Detiene la propagacin del evento sobre otros

Programacin en Mviles Multiplataforma

Programacin en Mviles Multiplataforma

Mtodos de manipulacin de elementos

Programacin en Mviles Multiplataforma

Seleccin de elementos de formularios

jQuery ofrece varios selectores de elementos de formulario. Estos elementos son:

Programacin en Mviles Multiplataforma

Obtener las propiedades CSS

La siguiente lnea retorna el tamao de la letra de la etiqueta h1:

Programacin en Mviles Multiplataforma

Programacin en Mviles Multiplataforma

Caractersticas de jQuery Mobile

Facilidad de diseo Web para mviles. El framework proporciona diversos

Programacin en Mviles Multiplataforma

Compatibilidad con los navegadores Web para mviles

Cada vez ms los navegadores soportan HTML5, CSS3 y JavaScript. El framework

Programacin en Mviles Multiplataforma

Programacin en Mviles Multiplataforma

Estructura de la pgina en jQuery Mobile

El atributo data-role determina el tipo de elemento:

Programacin en Mviles Multiplataforma

Ejemplo de navegacin entre pginas

Programacin en Mviles Multiplataforma

<p>Si desea mas información...