Download - j Query Mobile
-
Dr. Jos Martn Molina Espinosa
jQUery Mobile
-
jQuery Mobile
http://jquerymobile.com/
Cmo crear aplicaciones con el look-and-feel de Android a travs del uso de estilos CSS y de javascript?
Actualmente encontramos:
jQTouch, iUI, y Sencha Touch
-
Libreras Javascript
Jquery es una librera de funciones para Javascript que permite la manipulacin del DOM con funciones orientadas a la programacin.
Jquery tambin no slo incluye funcionalidad sino tambin widgets grficos.
Jquery Mobile, es la librera exclusiva para navegadores mviles.
-
Interfaz grfica
Emular el look & feel
Usar el marco
Colocar botones de accin en el marco
Crear menus deslizantes
Incluir botones de regreso
Separar las ligas
Usar el viewport
Apagar la capacidad de zoom
-
Elementos de diseo para dispositivos mviles
Siempre en Internet
Uso de AJAX para acceso de datos sin bloque de aplicacin
Bajo consumo
Limitado al navegador mvil
Geo-Localizacin
Posibilidad de acceso a la localizacin del dispositivo mvil desde web!!!
Entrada / salida
Uso de gestos
-
Obtencin de la librera jQueryMobile
Pgina web: http://jquerymobile.com
Instalacin:
Uso de los archivos contenidos en directorio de distribucin
jquery.mobile-version.css
jquery.mobile-version.js
-
Desarrollando con jQuery
-
Plataformas soportadas
http://jquerymobile.com/original-graded-browser-matrix/
-
Plataformas de desarrollo
PhoneGap. SDK que puede integrarse a IDEs como eclipse para el desarrollo de aplicaciones hbridas. Costo, gratuito.
Codiqa. Desarrollo de aplicaciones web a travs del navegador. Costo $19-$149 USD al mes. No permite la programacin en Javascript, pero genera HTML.
Handheld designer. Aplicacin Mac para desarrollo exclusivo para iOS, costo $600 MXP
Sencha Architect 2. Aplicacin win/Mac para desarrollo visual de aplicaciones web, costo $399-$7195 USD al ao.
-
Formato de una pgina
Page Title
-
Formato de una pgina
Page Title
Page content goes here.
Page Footer
-
Pginas dentro de pginas
-
Paso de parmetros para cambio de pgina
El paso de parmetros para cambio de pgina es mediante el uso de # en el URL de la pgina, lo que cambio el significado de uso del mismo.
As pagina.html#otraPagina significa cambiar la vista actual a otraPagina en lugar de hacer scroll de la pgina hasta el identificador otraPagina
-
HTML 5 etiqueta data-
En HTML 5 es posible definir datos definidos por el usuario mediante el uso de la etiqueta data-
var fruta = document.getElementById('fresa');
var contador = fruta.getAttribute('data-cuantas'); // contador = '15'
fruta.setAttribute('data-cuantas','7');
-
Uso de etiqueta data-
var planta = document.getElementById('rosa');
var npetalos = planta.dataset.petalos; // npetalos = 20;
var estatura = planta.dataset.altura;
planta.dataset.altura = '1.6m';
-
Manejo de ttulos de pginas
Cada pgina en html puede contener un ttulo que aparece en la parte superior del navegador
Cmo cambiar el ttulo de una pgina html que contiene varias pginas mediante el uso de la etiqueta data-?
Jquerymobile carga las pginas mediante el uso de AJAX usando las etiquetas data-
El atributo data-title permite cambiar el ttulo de cada pgina que es presentada como pgina principal del navegador.
-
Ligado de pginas
El ligado de pginas se realiza mediante AJAX.
El atributo href es parseado y usado para hacer la carga asincrnica de la pgina mediante la modificacin del DOM actual.
En caso de que la carga AJAX tenga problemas, se desplegar un error.
El uso de AJAX permite tener una animacin de transicin entre pginas.
-
Ligado de pginas sin AJAX
Si se desea cargar un documento html multi-pgina, se debe de desactivar el atributo AJAX mediante
rel="external" o bien data-ajax="false"
Multi-page link
La carga de pginas en este estilo NO tendrn animacin de transicin
- Botn de regreso
-
TransicionesLa animacin que ocurre en la presentacin de un nuevo elemento, dialogo o pgina, se le llama transicin.
Lista de transiciones:
fade. Desaparece la pantalla actual y aparece del nuevo elemento.
pop. Nuevo elemento aparece desde el centro
flip. La pantalla gira 180% sobre el eje Y central.
turn. La pantalla gira 180% sobre el eje Y de la izquierda.
flow. La pantalla es minimizada y luego re-emplazada por el nuevo elemento.
slidefade. Una cortina recorre desde un extremo la pantalla y luego aparece el nuevo elemento.
slide. Una cortina recorre desde un extremo la pantalla dejando aparecer de inmediato el nuevo elemento.
slideup y slidedowm. Una cortina recorre desde el Top / Bottom de la pantalla dejando aparecer de inmediato el nuevo elemento.
none
-
Dialogos
Cualquier pgina puede ser presentada como un dialogo modal cuya funcionalidad es idntica a la funcin alert de Javascript.
Se utiliza el atributo data-rel="dialog"
Open dialog
-
Formularios
La obtencin de datos se hace a travs de formularios HTML tradicionales en donde se acomodan los elementos de interaccin con el usuario.
...
-
Formularios
Debido a que en un mismo archivo HTML pueden estar definas varios elementos de pginas distintas, todos los elementos deben tener identificadores distintos.
Para asociar elementos se utiliza el atributo for
Text Input:
-
Ejercicio guiado
Crear una calculadora de IMC usando JqueryMobile
Crear la GUI usando codiqa
http://www.codiqa.com/
Modificar el HTML generado e incluir la funcionalidad de clculo de IMC
-
Usando codiqa
-
Agregar funcin de clculo IMC
function calcular()
{
var estatura=document.getElementById("textinput1");
var peso=document.getElementById("textinput2");
var resultado=peso.value/(estatura.value*estatura.value);
document.getElementById("textinput3").value=resultado;
//alert(resultado);
}
-
Asociar invocacin de funcin
-
Componentes en jQuery
Pginas y dilogos
Barras de herramientas
Botones
Formateo de contenido
Formularios
Listas
-
Listas con jQuery Mobile
Acura
Audi
BMW
-
Laboratorio guiado
Creacin de una pgina que consume datos JSON
Crear una nueva pgina web que contenga informacin institucional o personal
-
Creacin del contenido
-
Pgina de detalle
Crear una pgina con una lista que muestre la informacin obtenida a travs de un JSON
Usar JSONP para la obtencin de datos de sitios 3ros.
-
Eventos
Existen un conjunto de eventos que son ejecutados en jQueryMobile
http://jquerymobile.com/demos/1.1.0/docs/api/events.html
Entrada desde la GUI
Ciclo de vida de las pginas
Carga de pginas
pagebeforeload
pageload