Desarrollo deaplicaciones móvilesconMsg. Yamil Lambert
ylambert@espol.edu.ecLección: jQuery• Introducción• Características• Requisitos• Compatibilidad
ylambert@espol.edu.ec
ylambert@espol.edu.ecPara todas las plataformas1 código base
ylambert@espol.edu.ecHacer que funcioneen todas partesy para todos
ylambert@espol.edu.ec
ylambert@espol.edu.ecTemas
ylambert@espol.edu.ec
ylambert@espol.edu.ec
ylambert@espol.edu.ec
ylambert@espol.edu.ecIntroducciónUna alternativa a jQuery. De hecho jQueryMobile utiliza a jQuery.Un SDK/compilador para...
ylambert@espol.edu.ecIntroducciónUn framework de interfaz de usuario multi-plataforma que permite crear webapps y Appspar...
ylambert@espol.edu.ecIntroducciónDocenas de plataformas distintas(iOS, Android, WindowsPhone, Blackberry, Symbian, WebOS,...
ylambert@espol.edu.ecCaracterísticas– Código HTML5 no intrusivo– Código abierto– Liviano– Multiplataforma usando mejora pr...
ylambert@espol.edu.ecRequisitos– HTML 5– CSS 3– JavaScript– jQueryNecesitas saberLo que necesitas– Un editor de texto– Un ...
ylambert@espol.edu.ecCompatibilidad– iOS (iPhone - iPad)– Android ( Desde la versión 1.5 )– BlackBerry ( Desde la versión ...
ylambert@espol.edu.ecCompatibilidadCalidad AltaUn navegador que es capaz de, comomínimo, la utilización de jQuery Mobile.C...
ylambert@espol.edu.ecFramework – 1/2Un archivo JavaScript y CSS baseUn archivo JavaScript y Css por componenteUn grupo ...
ylambert@espol.edu.ecFramework – 2/2– Alojamiento propio• Lo descargamos de http://jquerymobile.com/download/ y lo ponemos...
ylambert@espol.edu.ec• Comenzando a trabajar• Estructura• Roles• Temas• Botones• Páginas Internas y Externas• Links Absolu...
ylambert@espol.edu.ecComenzando a trabajar– Versión estable• http://jquerymobile.com/download/Descargar jQuery MobileDesca...
ylambert@espol.edu.ecEstructura– 1. HTML5 Doctype– 2. jQuery Mobile CSS– 3. jQuery Core JS– 4. jQuery Mobile JS<!doctype h...
ylambert@espol.edu.ecRoles– jQuery Mobile usa un atributo HTML llamado data-role paraasociar un elemento con un widget. Po...
ylambert@espol.edu.ecData-role = page<div data-role="page“ ><!--/ContenidodelapaginajQuerymobile--></div>
ylambert@espol.edu.ecMás roles< body><div data-role="page“ ><div data-role="header"></div><div data-role="content"></div><...
ylambert@espol.edu.ecDemostración 1< body><div data-role="page"><div data-role="header"><h1>jQuery mobile</h1></div><div d...
ylambert@espol.edu.ecTemas– jQuery Mobile viene con muchos esquemas de color los cuales pueden sercontrolados usando el at...
ylambert@espol.edu.ecdata-theme=“b”data-theme=“a” data-theme=“e”Temas
ylambert@espol.edu.ecDemostración 2< body><div data-role="page“ data-theme="e"><div data-role="header“ data-theme=“c"><h1>...
ylambert@espol.edu.ecBotones– Se puede crear un botón agregando data-role="button" a una etiquetabotón.– button tag, un ta...
ylambert@espol.edu.ecDemostración 3<div data-role="page“ data-theme=“b"><div data-role="header" data-theme="e"><h1>Botones...
ylambert@espol.edu.ecDemostración 4<div data-role="page“ data-theme=“b"><div data-role="header" data-theme="e"><h1>Botones...
ylambert@espol.edu.ecPáginas Internas– Aprenderemos a generar documentos multipágina y a vincularla entre ellasde manera a...
ylambert@espol.edu.ecDemostración 5<div data-role="page" data-theme="b"id="pagina1"><div data-role="header" data-theme="e"...
ylambert@espol.edu.ecDemostración 5<div data-role="page" data-theme="b"id="pagina2" data-add-back-btn="true"><div data-rol...
ylambert@espol.edu.ecPáginas Externas– Cada vez que cargamos un nuevo documento HTML jQuery lo hace a travésde AJAX.<div d...
ylambert@espol.edu.ecDemostración 6<div data-role="page" data-theme="b“ ><div data-role="header" data-theme="e"><h1>Página...
ylambert@espol.edu.ecDemostración 6<div data-role="page" data-theme="b" ><div data-role="header" data-theme="e"><h1>Página...
ylambert@espol.edu.ecLinks Absoluto– Creamos vínculos a sitios web que están fuera de nuestro entorno(Internet) y que no s...
ylambert@espol.edu.ecDemostración 7<div data-role="page" data-theme="b" ><div data-role="header" data-theme="e"><h1>Link A...
ylambert@espol.edu.ecLaboratorio 1Uso de páginas internas, externas y Links Absoluto• El trabajo será calificado y es indi...
ylambert@espol.edu.ecTransiciones – 1/2– slide• Deslice de derecha a izquierda(default)– slideup• Deslice desde el fondo h...
ylambert@espol.edu.ecTransiciones – 2/2– pop• La nueva página crecerá a partir de un pequeño punto en medio de una página ...
ylambert@espol.edu.ecDemostración 8<div data-role="page" data-theme="b" id="pagina1"><div data-role="header" data-theme="e...
ylambert@espol.edu.ecCuadros de Diálogo– Cualquier página válida de jQuery mobile también se puede mostrar comoun cuadro d...
ylambert@espol.edu.ecDemostración 9 – 1/2 Uso de Cuadros de Diálogo<div data-role="page" data-theme="b"id="pagina1"><div ...
ylambert@espol.edu.ecDemostración 9 – 2/2 Uso de Cuadros de Diálogo<div data-role="page" data-theme="b"id="confirmacion" ...
ylambert@espol.edu.ecLaboratorio 2Uso de transiciones• El trabajo será calificado y es individual.• Tiempo: 5 minutos para...
ylambert@espol.edu.ecToolbars - Botones en el header– Podemos personalizar el encabezado con botones de acción, simplement...
ylambert@espol.edu.ecDemostración 10 Uso de botones en la cabecera<div data-role="page" data-theme="b" ><div data-role="h...
ylambert@espol.edu.ecToolbars - Botones en el footer– Podemos personalizar el pie con botones de acción, simplementeañadie...
ylambert@espol.edu.ecDemostración 11 Uso de botones en el pie<div data-role="page" data-theme="b" ><div data-role="header...
ylambert@espol.edu.ecToolbars – Iconos en Botones – 1/2– A menudo se necesita iconos en los botones, y jQuery Mobile viene...
ylambert@espol.edu.ecToolbars – Iconos en Botones – 2/2– Puede especificar la posición del ícono con el atributo data-icon...
ylambert@espol.edu.ecDemostración 12 Uso de íconos en botones y control de agrupación<div data-role="page" data-theme="b"...
ylambert@espol.edu.ecDemostración 13 Uso de íconos personalizados en botones<div data-role="page" data-theme="b" ><div da...
ylambert@espol.edu.ecToolbars – Iconos personalizados en botones– A menudo se necesita iconos personalizados para nuestras...
ylambert@espol.edu.ecDemostración 14 Uso de íconos personalizados en botones<div data-role="page" data-theme="b" ><div da...
ylambert@espol.edu.ecLaboratorio 3Uso de íconos personalizados en botones• El trabajo será calificado y es individual.• Ti...
ylambert@espol.edu.ecLección: jQuery• Encabezado y pie - Posicionamiento• Barras de Navegación• Pie de página persistente•...
ylambert@espol.edu.ecEncabezado-pie y posicionamiento – 1/2– Crearemos barras de herramientas fijas y experiencias a panta...
ylambert@espol.edu.ecEncabezado-pie y posicionamiento – 2/2
ylambert@espol.edu.ecDemostración 15<div data-role="page" data-theme="b" data-fullscreen="true" ><div data-role="header" d...
ylambert@espol.edu.ecBarras de Navegación – 1/3– Una barra de navegación (también conocido como navbar) es un conjuntode e...
ylambert@espol.edu.ecBarras de Navegación – 2/3Aquí podemos ver una barra de navegación dentro de un encabezado y un pie d...
ylambert@espol.edu.ecBarras de Navegación – 3/3Aquí podemos ver una barra de navegación con el primer botón activo<div dat...
ylambert@espol.edu.ecDemostración 16<div data-role="header" data-theme="b" data-position="fixed"><h1>jQuery Mobile</h1><di...
ylambert@espol.edu.ecDemostración 17<div data-role="header" data-theme="b" data-position="fixed"><h1>jQuery Mobile</h1><di...
ylambert@espol.edu.ecPie de página persistente– 1/3– Mientras pensaba en NavBars, entiendo que si cambiamos de undocumento...
ylambert@espol.edu.ecPie de página persistente– 2/3El uso de pie de página persistentes
ylambert@espol.edu.ecDemostración 18 – 1/3 Uso de pie de página persistente
ylambert@espol.edu.ecDemostración 18 – 2/3 Uso de pie de página persistente<div data-role="page" data-theme="b" id="home1...
ylambert@espol.edu.ecDemostración 18 – 3/3 Uso de pie de página persistente<div data-role="page" id="contacts1"><div data...
ylambert@espol.edu.ecLaboratorio 4Uso de NavBar y pie persistentes• El trabajo será calificado y es individual.• Tiempo: 3...
ylambert@espol.edu.ecContenido colapsable– 1/3– Recuerde que estamos apuntando a los dispositivos móviles. En losdispositi...
ylambert@espol.edu.ecContenido colapsable– 2/3Los paneles plegables son una buena manera de mostrar gran cantidad deinform...
ylambert@espol.edu.ecDemostración 19 – 3/3 Uso de contenido colapsable<div data-role="page”><div data-role="header“><h1>C...
ylambert@espol.edu.ecAcordeón – 1/3– Hay otro comportamiento típico de aplicaciones de Internet relacionados alcontenido c...
ylambert@espol.edu.ecAcordeón – 2/3Un control de acordeón ricos se pueden crear utilizando un conjunto de panelesplegables...
ylambert@espol.edu.ecDemostración 20 – 3/3 Uso de Acordeón<div data-role="page”><div data-role="header“><h1>Colapsable Se...
ylambert@espol.edu.ecLaboratorio 5Uso de contenido colapsable y Acordeón• El trabajo será calificado y es individual.• Tie...
ylambert@espol.edu.ecColumnas – 1/4– jQuery Mobile nos ofrece unas plantillas para definir el contenido que semuestra en c...
ylambert@espol.edu.ecColumnas – 2/4<div data-role="content"><div class="ui-grid-a"><div class="ui-block-a">Column 1</div><...
ylambert@espol.edu.ecDemostración 21 – 3/4 Uso de Columnas<div data-role="header"><h1>Columnas</h1><div data-role="navbar...
ylambert@espol.edu.ecDemostración 21 – 4/4 Uso de Columnas<div data-role="page" data-theme="e" id="pag2"><div data-role="...
ylambert@espol.edu.ecDemostración 22 – 1/2 Uso de Columnas<div data-role="header"><h1>Columnas</h1><div data-role="navbar...
ylambert@espol.edu.ecDemostración 22 – 2/2 Uso de Columnas<div data-role="page" data-theme="e" id="pag2"><div data-role="...
ylambert@espol.edu.ecLaboratorio 6 – 1/2Uso de columnas – Cuadrículas• El trabajo será calificado y es individual.• Tiempo...
ylambert@espol.edu.ecLaboratorio 6 – 2/2Uso de columnas – Cuadrículas• El trabajo será calificado y es individual.• Tiempo...
ylambert@espol.edu.ecLección: jQuery - Listas• Definición• Listas con recuadro• Listas interactivas• Listas anidadas• Divi...
ylambert@espol.edu.ecListas – 1/3– Las listas son un componente de interfaz de usuario muy popular porquehacen que la expe...
ylambert@espol.edu.ecListas – 2/3Vista de una lista básica
ylambert@espol.edu.ecDemostración 23 – 3/3<div data-role="content"><h2 align="center">Cursos</h2><ul data-role="listview">...
ylambert@espol.edu.ecListas página completa Vs listas recuadro – 1/3– Por defecto, las listas están en un modo de página c...
ylambert@espol.edu.ecListas con recuadro – 2/3– En una “lista con recuadro” no aparecerá el recuadro de borde a borde. Ens...
ylambert@espol.edu.ecDemostración 24 – 3/3<div data-role="content"><h2 align="center">Cursos</h2><ul data-role="listview“ ...
ylambert@espol.edu.ecListas Interactivas – 1/4– De forma predeterminada, los elementos de vista de lista no tienenpropieda...
ylambert@espol.edu.ecListas Interactivas – 2/4Vista de lista con botones
ylambert@espol.edu.ecDemostración 25 – 3/4<div data-role="content"><h3>Unordered List</h3><ul data-role="listview"><li><a ...
ylambert@espol.edu.ecDemostración 25 – 4/4<div data-role="page" id="it1" data-add-back-btn="true"><div data-role="header" ...
ylambert@espol.edu.ec Uso de listas interactivasLaboratorio 7 – 1/2
ylambert@espol.edu.ec Uso de listas interactivasLaboratorio 7 – 2/2• El trabajo será calificado y es individual.• Tiempo:...
ylambert@espol.edu.ecListas Anidadas – 1/3– jQuery Mobile permite crear listas anidadas y producir vistas interactivasen l...
ylambert@espol.edu.ecDemostración 26 – 2/3<div data-role="content"><h3 align="center">Pike+</h3><ul data-role="listview"><...
ylambert@espol.edu.ecDemostración 26 – 3/3<li>Bebidas<ul><li>Bebida 1</li><li>Bebida 2</li><li>Bebida 3</li><li><a href="#...
ylambert@espol.edu.ec Uso de listas interactivas anidadasLaboratorio 8 – 1/4
ylambert@espol.edu.ec Uso de listas interactivas anidadasLaboratorio 8 – 2/4
ylambert@espol.edu.ec Uso de listas interactivas anidadasLaboratorio 8 – 3/4
ylambert@espol.edu.ec Uso de listas interactivas anidadasLaboratorio 8 – 4/4
ylambert@espol.edu.ecDivisores de listas – 1/2– Usted puede utilizar separadores para dividir una lista única en lasagrupa...
ylambert@espol.edu.ecDemostración 27 – 2/2<div data-role="content"><ul data-role="listview“ data-dividertheme="d" data-the...
ylambert@espol.edu.ecBotones dobles – 1/6– A veces es útil si podemos tener dos posibles acciones interactivas queoperan e...
ylambert@espol.edu.ecDemostración 28 – 2/6<div data-role="header" data-theme="b" data-position="fixed"><h1>Platos Típicos<...
ylambert@espol.edu.ecDemostración 28 – 3/6<div data-role="page" id="deta1" data-add-back-btn="true"><div data-role="header...
ylambert@espol.edu.ecDemostración 28 – 4/6<div data-role="page" id="precio1" data-add-back-btn="true"><div data-role="head...
ylambert@espol.edu.ecDemostración 28 – 5/6<div data-role="page" id="deta2" data-add-back-btn="true"><div data-role="header...
ylambert@espol.edu.ecDemostración 28 – 6/6<div data-role="page" id="precio2" data-add-back-btn="true"><div data-role="head...
ylambert@espol.edu.ec Uso de listas con botones doblesLaboratorio 9 – 1/2CaracterísticasPrecio
ylambert@espol.edu.ec Uso de listas con botones doblesLaboratorio 9 – 2/2CaracterísticasPrecioCaracterísticasPrecio
ylambert@espol.edu.ecImágenes – 1/3– En cada fila podemos definir una imagen para identificar gráficamente elelemento.– Ha...
ylambert@espol.edu.ecDemostración 29 – 2/3<div data-role="header" data-theme="b" data-position="fixed"><h1>World Cup</h1><...
ylambert@espol.edu.ecDemostración 30 – 3/3<div data-role="header" data-theme="b" data-position="fixed"><h1>Platos Típicos<...
ylambert@espol.edu.ecContador de burbujas – 1/3– Un número de burbujas es un círculo con un número dentro puesto a laderec...
ylambert@espol.edu.ecDemostración 31 – 2/3<div data-role="page" id="pag1"><div data-role="header" data-theme="e" data-posi...
ylambert@espol.edu.ecDemostración 31 – 3/3<li><a href="#">Programación</a><span class="ui-li-count">2</span><ul data-inset...
ylambert@espol.edu.ecContenido relacionado – 1/2– Hasta ahora, todas las listas que hemos diseñado tiene una sola columnap...
ylambert@espol.edu.ecDemostración 32 – 2/2<div data-role="content"><h4 align="center">Menú</h4><ul data-role="listview" da...
ylambert@espol.edu.ecTítulo y descripción – 1/2– Si queremos mostrar un título y una descripción, como parte de lafila, po...
ylambert@espol.edu.ecDemostración 33 – 2/2<div data-role="content"><h4 align="center">Menú</h4><ul data-role="listview" da...
ylambert@espol.edu.ecFiltrado de datos con búsqueda – 1/2– La magia de jQuery Mobile ha sucedido. Al agregar este atributo...
ylambert@espol.edu.ecDemostración 34 – 2/2<div data-role="content"><h4 align="center">Menú</h4><ul data-role="listview" da...
ylambert@espol.edu.ec Uso de imágenes y filtro de datosLaboratorio 10 – 1/2CaracterísticasPrecio
ylambert@espol.edu.ec Uso de imágenes y filtro de datosLaboratorio 10 – 2/2CaracterísticasPrecioCaracterísticasPrecio
ylambert@espol.edu.ecFormularios– jQuery mobile soporta formularios con manejo automático de AJAX. Esa esla primera buena ...
ylambert@espol.edu.ecFormularios – Labels– Un elemento muy importante del control de todas las formas es laetiqueta. Siemp...
ylambert@espol.edu.ecFormularios – Text Fields– jQuery Mobile es compatible con los controles básicos de HTML5 deentrada d...
ylambert@espol.edu.ecFormularios – Text FieldsUso de nuevos tipos de entrada de texto HTML5
ylambert@espol.edu.ecDemostración 35<div data-role="content"><form action="" method="get"><label for="nombre">Nombre</labe...
ylambert@espol.edu.ecFormularios – Field Contain– Un contenedor es un campo opcional que mejora la experiencia de usuarioe...
ylambert@espol.edu.ecDemostración 36<div data-role="content"><form action="" method="get"><div data-role="fieldcontain"><l...
ylambert@espol.edu.ecFormularios – Text Area– Cuando usamos la caja de texto para la entrada de texto de variaslíneas, vam...
ylambert@espol.edu.ecDemostración 37<div data-role="content"><form action="" method="get"><div data-role="fieldcontain"><l...
ylambert@espol.edu.ecNuevos Atributos de HTML5– Es seguro usar cualquier atributo HTML 5 en nuestros campos de texto, yaqu...
ylambert@espol.edu.ecDemostración 38<div data-role="content"><form action="" method="get"><div data-role="fieldcontain"><l...
ylambert@espol.edu.ecFormularios – Date Fields– Introducción de fechas en HTML siempre fue un problema y nosacostumbramos ...
ylambert@espol.edu.ecFormularios – Date FieldsDesde la versión iOS 5 en adelante, los elementos de fecha son compatibles, ...
ylambert@espol.edu.ecDemostración 39<div data-role="content"><form action="" method="get"><div data-role="fieldcontain"><l...
ylambert@espol.edu.ecFormularios – Slider – 1/2– Un deslizador es ideal para los valores numéricos dentro de un rango.Cuan...
ylambert@espol.edu.ecFormularios – Slider – 2/2– El deslizador es compatible con una muestra de color a través de ladefini...
ylambert@espol.edu.ecDemostración 40<div data-role="content"><form action="" method="get"><div data-role="fieldcontain"><l...
ylambert@espol.edu.ecFormularios – Flip Toggle Switch– Un interruptor de palanca es un selector de valores booleanos (verd...
ylambert@espol.edu.ecDemostración 41<div data-role="content"><form action="" method="get"><div data-role="fieldcontain"><l...
ylambert@espol.edu.ecFormularios – Select Menus– Los menús a través de los elementos seleccionados son un control deforma ...
ylambert@espol.edu.ecDemostración 42<div data-role="content"><form action="" method="get"><div data-role="fieldcontain"><l...
ylambert@espol.edu.ecDemostración 43<div data-role="content"><form action="" method="get"><div data-role="fieldcontain"><l...
ylambert@espol.edu.ecFormularios – Agrupación de menús– Los Select Menu pueden agruparse usando el elemento controlgroup,v...
ylambert@espol.edu.ecDemostración 44<form action="" method="get"><div data-role="fieldcontain"><fieldset data-role="contro...
ylambert@espol.edu.ecDemostración 45<form action="" method="get"><div data-role="fieldcontain"><fieldset data-role="contro...
ylambert@espol.edu.ecDemostración 46<form action="" method="get"><div data-role="fieldcontain"><div data-role="controlgrou...
ylambert@espol.edu.ecFormularios – Radio Buttons– Todos sabemos lo que es un botón de radio. La gran cosa acerca de losbot...
ylambert@espol.edu.ecDemostración 47<form action="" method="get"><div data-role="fieldcontain"><div data-role="controlgrou...
ylambert@espol.edu.ecFormularios – Checkboxes– Las casillas de verificación funcionan de manera similar a los botones dera...
ylambert@espol.edu.ecDemostración 48<form action="" method="get"><form action="" method="get"><div data-role="fieldcontain...
ylambert@espol.edu.ecYamil LambertGracias.
Upcoming SlideShare
Loading in …5
×

JQquery Mobile por Yamil Lambert

3,099 views

Published on

Jquery Mobile es un framework de interfaz de usuario multi-plataforma que permite crear webapps y Apps para teléfonos y tabletas táctiles.

Agradecimientos a W. Villota.

Published in: Education
1 Comment
4 Likes
Statistics
Notes
  • Disculpe, me podria ayudar, tengo un ISSUE cuando cambio de pagina con un $.mobile.changePage( '#pagina2', { transition: 'slide'});
    me genera un flashing en android 2.3 y anteriores e tratado de solucionarlo como lo dice la api de jQuery mobile pero no me ha funcionado
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
3,099
On SlideShare
0
From Embeds
0
Number of Embeds
16
Actions
Shares
0
Downloads
22
Comments
1
Likes
4
Embeds 0
No embeds

No notes for slide

JQquery Mobile por Yamil Lambert

  1. 1. Desarrollo deaplicaciones móvilesconMsg. Yamil Lambert
  2. 2. ylambert@espol.edu.ecLección: jQuery• Introducción• Características• Requisitos• Compatibilidad
  3. 3. ylambert@espol.edu.ec
  4. 4. ylambert@espol.edu.ecPara todas las plataformas1 código base
  5. 5. ylambert@espol.edu.ecHacer que funcioneen todas partesy para todos
  6. 6. ylambert@espol.edu.ec
  7. 7. ylambert@espol.edu.ecTemas
  8. 8. ylambert@espol.edu.ec
  9. 9. ylambert@espol.edu.ec
  10. 10. ylambert@espol.edu.ec
  11. 11. ylambert@espol.edu.ecIntroducciónUna alternativa a jQuery. De hecho jQueryMobile utiliza a jQuery.Un SDK/compilador para appsUn framework para trabajar en JavaScript.De repente en cuestiones avanzadaspodremos utilizarla.La solución para todo¿ Qué no es jQuery Mobile ?
  12. 12. ylambert@espol.edu.ecIntroducciónUn framework de interfaz de usuario multi-plataforma que permite crear webapps y Appspara teléfonos y tabletas táctiles.¿ Qué es jQuery Mobile ?¿Qué es una Webapps ?Un sitio web o servicio en el navegador.Una aplicación a pantalla completa instalada.Una aplicación híbrido/nativa en tiendasutilizando Phonegap.
  13. 13. ylambert@espol.edu.ecIntroducciónDocenas de plataformas distintas(iOS, Android, WindowsPhone, Blackberry, Symbian, WebOS, Bada, etc.).Al menos 40 navegadores distintos.Ser multi-plataforma es clave para el éxito.La compatibilidad de HTML5 no es boolean¿ Por qué jQuery Mobile ?
  14. 14. ylambert@espol.edu.ecCaracterísticas– Código HTML5 no intrusivo– Código abierto– Liviano– Multiplataforma usando mejora progresiva– Soporte de accesibilidad– Personalizable– Soporte de la comunidad– Incluye API de JavaScript
  15. 15. ylambert@espol.edu.ecRequisitos– HTML 5– CSS 3– JavaScript– jQueryNecesitas saberLo que necesitas– Un editor de texto– Un navegador HTML5 para probar– ¿Y el framework? (Incluso es posible prescindir del mismo)– ¿Y compiladores nativos? (Puede ser en la nube ó utilizar Phonegap)– ¿Y simuladores y emuladores? (Para probar como se ve la Apps)
  16. 16. ylambert@espol.edu.ecCompatibilidad– iOS (iPhone - iPad)– Android ( Desde la versión 1.5 )– BlackBerry ( Desde la versión 5 en adelante y la versión de tablet laPlaybook )– Nokia (Symbian, touch, symbian3, symbian3-anna, symbian belle, MeeGoOS 1.1 y 1.2( Phone N9 ))– webOS ( Hewlett-Packard para sus versiones de teléfonos y tabletas)– Windows Phone ( Desde la versión Mango 7.5 que incluye ahora a losNokia)– Opera, Firefox (Navegadores)– Bada (OS y navegador de Samsung), Kindle (Que posee Amazon en susdistintas versiones para leer libros inclusive la Kindle Fire que es la tabletade Amazon)
  17. 17. ylambert@espol.edu.ecCompatibilidadCalidad AltaUn navegador que es capaz de, comomínimo, la utilización de jQuery Mobile.Calidad MediaUn navegador capaz que no tiene cuotade mercado suficiente como parajustificar el día a día de pruebas.Calidad BajaUn navegador que no es capaz de utilizarjQuery mobile. No se proporcionaráningún script jQuery Mobile o CSS(cayendo de nuevo a la versión HTML yCSS).Android BrowserSafariWeb BrowserBlackBerry BrowserInternet Explorer
  18. 18. ylambert@espol.edu.ecFramework – 1/2Un archivo JavaScript y CSS baseUn archivo JavaScript y Css por componenteUn grupo de imágenes (representan íconos delframework)Los archivos JavaScript y Css los encontramos endos formas: versión comprimida para producción versión sin compresión para desarrolloNecesitamos el framework de jQuery.
  19. 19. ylambert@espol.edu.ecFramework – 2/2– Alojamiento propio• Lo descargamos de http://jquerymobile.com/download/ y lo ponemosen nuestro servidores es decir en nuestra carpeta de proyecto.– CDN - versión estable ó versión desarrollo (cambia día a día)• Content Delivery Networks-Redes de distribución de contenidos. Estosignifica dejar alojadas en otro servidor las librerías e imágenes dejQuery.• En ese caso Jquery posee un servidor donde podemos apuntar ladescarga del javascript y el css.• También Microsoft ofrece una versión de CDN para jQuery Mobile.• La ventaja de usar CDN es que no tenemos que descargar nada ypodemos comenzar a probar jQuery en segundos.• Otra ventaja que es utiliza cache compartido en el Browser.• Desventaja del CDN es que necesitamos Internet y que tenemos queconfiar en el CDN porque si este no funciona nuestra Apps tampocofuncionará.
  20. 20. ylambert@espol.edu.ec• Comenzando a trabajar• Estructura• Roles• Temas• Botones• Páginas Internas y Externas• Links Absolutos• Transiciones• Íconos personalizados
  21. 21. ylambert@espol.edu.ecComenzando a trabajar– Versión estable• http://jquerymobile.com/download/Descargar jQuery MobileDescargar jQuery Core– Versión estable 1.6.4• http://docs.jquery.com/Downloading_jQuery
  22. 22. ylambert@espol.edu.ecEstructura– 1. HTML5 Doctype– 2. jQuery Mobile CSS– 3. jQuery Core JS– 4. jQuery Mobile JS<!doctype html><html><head><link rel="stylesheet" href="jquery.mobile.css"/><script src="jquery.js"></script><script src="jquery.mobile.js"></script></head><body></body></html>
  23. 23. ylambert@espol.edu.ecRoles– jQuery Mobile usa un atributo HTML llamado data-role paraasociar un elemento con un widget. Por ejemplo:• data-role="page"• data-role="header“• data-role=“content“• data-role="footer"• data-role="navbar"• data-role="button"• data-role="listview"• data-role="controlgroup"
  24. 24. ylambert@espol.edu.ecData-role = page<div data-role="page“ ><!--/ContenidodelapaginajQuerymobile--></div>
  25. 25. ylambert@espol.edu.ecMás roles< body><div data-role="page“ ><div data-role="header"></div><div data-role="content"></div><div data-role="footer"></div></div>< body>PageHeaderContentFooter
  26. 26. ylambert@espol.edu.ecDemostración 1< body><div data-role="page"><div data-role="header"><h1>jQuery mobile</h1></div><div data-role="content"><p> Este es un texto dentro de unapágina</p></div><div data-role="footer"><h4>www.jquerymobile.com</h4></div></div>< body> Uso de roles
  27. 27. ylambert@espol.edu.ecTemas– jQuery Mobile viene con muchos esquemas de color los cuales pueden sercontrolados usando el atributo data-theme.– Se puede especificar data-theme en una página, toolbar, botones, etc.– Intenta especificar data-theme=a,b,c,d,e y f.<div data-role="page“ data-theme="e"><div data-role="header“data-theme=“c"><h1>jQuery mobile</h1></div><div data-role="footer“data-theme=“b"><h4>www.jquerymobile.com</h4></div></div>
  28. 28. ylambert@espol.edu.ecdata-theme=“b”data-theme=“a” data-theme=“e”Temas
  29. 29. ylambert@espol.edu.ecDemostración 2< body><div data-role="page“ data-theme="e"><div data-role="header“ data-theme=“c"><h1>jQuery mobile</h1></div><div data-role="content"><p> Este es un texto dentro de unapágina</p></div><div data-role="footer“ data-theme=“b"><h4>www.jquerymobile.com</h4></div></div>< body> Uso de Temas
  30. 30. ylambert@espol.edu.ecBotones– Se puede crear un botón agregando data-role="button" a una etiquetabotón.– button tag, un tag, o input type=submit|button|reset|image.– Se puede agregar un ícono en el botón usando data-icon="icon-name".– Por defecto el ícono va a la derecha pero se puede cambiar especificandodata-iconpos.
  31. 31. ylambert@espol.edu.ecDemostración 3<div data-role="page“ data-theme=“b"><div data-role="header" data-theme="e"><h1>Botones</h1></div><div data-role="content"><a href="#" data-role="button" data-theme="d">Aceptar</a><a href="#" data-role="button" data-theme="a">Cancelar</a></div><div data-role="footer" data-theme="b"><h4>(C) Ylambert2015</h4></div></div> Uso de Botones
  32. 32. ylambert@espol.edu.ecDemostración 4<div data-role="page“ data-theme=“b"><div data-role="header" data-theme="e"><h1>Botones</h1></div><div data-role="content"><a href="#" data-role="button" data-theme="d“ data-inline="true">Aceptar</a><a href="#" data-role="button" data-theme="a“ data-inline="true">Cancelar</a></div><div data-role="footer" data-theme="b"><h4>(C) Ylambert2015</h4></div></div> Uso de Botones
  33. 33. ylambert@espol.edu.ecPáginas Internas– Aprenderemos a generar documentos multipágina y a vincularla entre ellasde manera automática.<div data-role="page“ data-theme=“b“ id="pagina1">........<div data-role="content"><a href="#pagina2" data-role="button" data-theme="d“ >Ir a página 2</a></div></div><div data-role="page" data-theme="b" id="pagina2" data-add-back-btn="true">.........<div data-role="content"><p>Esta es la segunda página</p><p><a href="#pagina1" data-rel="back">Volver</a></p></div>------ Página 2 ------
  34. 34. ylambert@espol.edu.ecDemostración 5<div data-role="page" data-theme="b"id="pagina1"><div data-role="header" data-theme="e"><h1>Página Interna</h1></div><div data-role="content"><a href="#pagina2" data-role="button">Irhacia página 2</a></div><div data-role="footer" data-theme="b"><h4>(C) Ylambert2015</h4></div></div> Uso de Páginas Internas – 1/2
  35. 35. ylambert@espol.edu.ecDemostración 5<div data-role="page" data-theme="b"id="pagina2" data-add-back-btn="true"><div data-role="header" data-theme="e"><h1>Segunda Página</h1></div><div data-role="content"><p>Esta es la segunda página</p><p><a href="#pagina1" data-rel="back">Volver</a></p></div><div data-role="footer" data-theme="b"><h4>(C) Ylambert2015</h4></div></div> Uso de Páginas Internas – 2/2
  36. 36. ylambert@espol.edu.ecPáginas Externas– Cada vez que cargamos un nuevo documento HTML jQuery lo hace a travésde AJAX.<div data-role="page“ data-theme=“b“ >........<div data-role="content"><a href=“pagina2.html" data-role="button" data-theme="d“ >Ir a páginaexterna</a></div></div><div data-role="page" data-theme="b“ >.........<div data-role="content"><p>Yo soy otro documento HTML</p></div>pagina2.html
  37. 37. ylambert@espol.edu.ecDemostración 6<div data-role="page" data-theme="b“ ><div data-role="header" data-theme="e"><h1>Página Externa</h1></div><div data-role="content"><a href="demo6_pagexterna2.html" data-role="button">Ir página externa</a></div><div data-role="footer" data-theme="b"><h4>(C) Ylambert2015</h4></div></div> Uso de Páginas Externas – 1/2
  38. 38. ylambert@espol.edu.ecDemostración 6<div data-role="page" data-theme="b" ><div data-role="header" data-theme="e"><h1>Página Externa</h1></div><div data-role="content">Yo soy otro documento HTML</a></div><div data-role="footer" data-theme="b"><h4>(C) Ylambert2015</h4></div></div> Uso de Páginas Externas – 2/2
  39. 39. ylambert@espol.edu.ecLinks Absoluto– Creamos vínculos a sitios web que están fuera de nuestro entorno(Internet) y que no son documentos jQuery.<div data-role="page“ data-theme=“b“ >........<div data-role="content"><a href=“http://www.google.com.ec" data-role="button" data-theme="d“rel=“external” >Ir a web absoluta</a></div></div>
  40. 40. ylambert@espol.edu.ecDemostración 7<div data-role="page" data-theme="b" ><div data-role="header" data-theme="e"><h1>Link Absoluto</h1></div><div data-role="content"><a href="http://www.google.com.ec" data-role="button" rel="external">Ir a web Absoluta</a><a href="mailto:info@aprendo.net" data-role="button">Email</a><a href="tel:12345678" data-role="button">Llamar</a></div><div data-role="footer" data-theme="b"><h4>(C) Ylambert2015</h4></div></div> Uso de Links Absoluto
  41. 41. ylambert@espol.edu.ecLaboratorio 1Uso de páginas internas, externas y Links Absoluto• El trabajo será calificado y es individual.• Tiempo: 30 minutos para realizar el trabajo.Página InternaPágina ExternaLink absoluto externo
  42. 42. ylambert@espol.edu.ecTransiciones – 1/2– slide• Deslice de derecha a izquierda(default)– slideup• Deslice desde el fondo hasta la parte superior– slidedown• Deslice de la parte superior al fondo
  43. 43. ylambert@espol.edu.ecTransiciones – 2/2– pop• La nueva página crecerá a partir de un pequeño punto en medio de una página apantalla completa.– fade• Una animación de fundido cruzando entre las páginas viejas y nuevas.– flip• Voltear la página de la vieja a la nueva
  44. 44. ylambert@espol.edu.ecDemostración 8<div data-role="page" data-theme="b" id="pagina1"><div data-role="header" data-theme="e"><h1>Transiciones</h1></div><div data-role="content"><a href="#pagina2" data-role="button" data-transition="slide">Slide</a><a href="#pagina2" data-role="button" data-transition="slideup">Slideup</a><a href="#pagina2" data-role="button" data-transition="slidedown">Slidedown</a><a href="#pagina2" data-role="button" data-transition="pop">Pop</a><a href="#pagina2" data-role="button" data-transition="fade">Fade</a><a href="#pagina2" data-role="button" data-transition="flip">Flip</a></div><div data-role="footer" data-theme="b"><h4>(C) Ylambert2015</h4></div></div> Uso de transiciones
  45. 45. ylambert@espol.edu.ecCuadros de Diálogo– Cualquier página válida de jQuery mobile también se puede mostrar comoun cuadro de diálogo, simplemente añadiendo el atributodata-rel = "dialog“ en el enlace.<div data-role="content" class="content"><p>First page!</p><p><a href="#page2" data-rel="dialog">Open page 2 as adialog</a></p></div>
  46. 46. ylambert@espol.edu.ecDemostración 9 – 1/2 Uso de Cuadros de Diálogo<div data-role="page" data-theme="b"id="pagina1"><div data-role="header" data-theme="e"><h1>Diálogo</h1></div><div data-role="content"><p> Estas por eliminar algo importante </p><a href="#confirmacion" data-role="button" data-rel="dialog">Eliminar</a></div><div data-role="footer" data-theme="b"><h4>(C) Ylambert2015</h4></div></div>
  47. 47. ylambert@espol.edu.ecDemostración 9 – 2/2 Uso de Cuadros de Diálogo<div data-role="page" data-theme="b"id="confirmacion" ><div data-role="header" data-theme="e"><h1>Eliminar</h1></div><div data-role="content"><a href="#pagina1" data-role="button" data-direction="reverse">Si, eliminar</a><a href="#pagina1" data-role="button" data-direction="reverse">No</a></div></div>
  48. 48. ylambert@espol.edu.ecLaboratorio 2Uso de transiciones• El trabajo será calificado y es individual.• Tiempo: 5 minutos para realizar el trabajo.Slide UpPop
  49. 49. ylambert@espol.edu.ecToolbars - Botones en el header– Podemos personalizar el encabezado con botones de acción, simplementeañadiendo la etiqueta <a href="#page2“ > Link </a> en la cabecera.<div data-role="header" data-theme="e"><h1>jQuery Mobile</h1><a href="#page2“>Link</a></div>
  50. 50. ylambert@espol.edu.ecDemostración 10 Uso de botones en la cabecera<div data-role="page" data-theme="b" ><div data-role="header" data-theme="e"><h1>jQuery Mobile</h1><a href="#pagina2" data-theme="a">Cancelar</a><a href="#pagina2" data-role="none">Grabar</a></div><div data-role="content"><p>Esto es un texto dentro de una página</p></div><div data-role="footer" data-theme="b"><h4>(C) Ylambert2015</h4></div></div>
  51. 51. ylambert@espol.edu.ecToolbars - Botones en el footer– Podemos personalizar el pie con botones de acción, simplementeañadiendo la etiqueta <a href=“#“ > Link </a> en el pie.<div data-role=“footer" data-theme="e“ class="ui-bar"><a href=“#“>Agregar</a><a href=“#“>Eliminar</a><a href=“#“>Refrescar</a></div>
  52. 52. ylambert@espol.edu.ecDemostración 11 Uso de botones en el pie<div data-role="page" data-theme="b" ><div data-role="header" data-theme="e"><h1>jQuery Mobile</h1><a href="#pagina2" data-theme="a">Cancelar</a><a href="#pagina2" data-role="none">Grabar</a></div><div data-role="content"><p>Esto es un texto dentro de una página</p></div><div data-role="footer" data-theme="b“ class="ui-bar" ><a href="#" data-theme="e">Agregar</a><a href="#">Eliminar</a><a href="#" >Refrescar</a></div></div>
  53. 53. ylambert@espol.edu.ecToolbars – Iconos en Botones – 1/2– A menudo se necesita iconos en los botones, y jQuery Mobile viene con unavariedad de íconos.– También puede controlar la posición del ícono.Para especificar el icono de un botón, se aplica el atributo data- icon. Elatributo de data-icon tiene los siguientes valores válidos:
  54. 54. ylambert@espol.edu.ecToolbars – Iconos en Botones – 2/2– Puede especificar la posición del ícono con el atributo data-iconpos. Losvalores válidos se muestran en la siguiente Tabla.
  55. 55. ylambert@espol.edu.ecDemostración 12 Uso de íconos en botones y control de agrupación<div data-role="page" data-theme="b" ><div data-role="header" data-theme="e"><h1>jQuery Mobile</h1><a href="#pagina2" data-theme="a">Cancelar</a><a href="#pagina2" data-role="none">Grabar</a></div><div data-role="content"><p>Esto es un texto dentro de una página</p></div><div data-role="footer" data-theme="b“ class="ui-bar" ><div data-role="controlgroup" data-type="horizontal"><a href="#" data-icon="plus">Agregar</a><a href="#" data-icon="delete">Eliminar</a><a href="#" data-icon="refresh">Refrescar</a></div></div></div>
  56. 56. ylambert@espol.edu.ecDemostración 13 Uso de íconos personalizados en botones<div data-role="page" data-theme="b" ><div data-role="header" data-theme="e"><h1>Botones</h1><a href="#pagina2" data-theme="a" >Cancelar</a><a href="#pagina2" data-role="none">Grabar</a></div><div data-role="content"><p>Ícono en botones en diferentes posiciones</p><div data-role="controlgroup" data-type="vertical"><a href="#" data-icon="check" data-role="button" data-theme="d" data-iconpos="top">Aceptar</a><a href="#" data-icon="plus" data-role="button" data-theme="d">Ayuda</a><a href="#" data-icon="delete" data-role="button" data-theme="d" data-iconpos="bottom">Cancelar</a><a href="#" data-icon="info" data-role="button" data-theme="d" data-iconpos="right">Información</a><a href="#" data-icon="star" data-role="button" data-theme="d" data-iconpos="notext">Inicio</a></div></div><div data-role="footer" data-theme="b“ ><h1>jQuery Mobile</h1></div> </div>
  57. 57. ylambert@espol.edu.ecToolbars – Iconos personalizados en botones– A menudo se necesita iconos personalizados para nuestras aplicaciones paralo cual debemos hacer lo siguiente:1. Crear un nuevo estilo. Ejemplo<style type="text/css">.ui-icon-myapp-reloj {background-image: url(images/reloj.png);}</style>2. Aplicar el nuevo estilo. Ejemplo<a href="#" data-icon="myapp-reloj">Hora</a>
  58. 58. ylambert@espol.edu.ecDemostración 14 Uso de íconos personalizados en botones<div data-role="page" data-theme="b" ><div data-role="header" data-theme="e"><h1>jQuery Mobile</h1></div><div data-role="content"><p>Esto es un texto dentro de una página</p></div><div data-role="footer" data-theme="b“ class="ui-bar”><div data-role="controlgroup" data-type="horizontal"><a href="#" data-icon="myapp-reloj">Hora</a><a href="#" data-icon="myapp-correo">Email</a></div></div></div><style type="text/css">.ui-icon-myapp-reloj {background-image: url(images/reloj.png);}.ui-icon-myapp-correo {background-image: url(images/mail.png);}</style>
  59. 59. ylambert@espol.edu.ecLaboratorio 3Uso de íconos personalizados en botones• El trabajo será calificado y es individual.• Tiempo: 30 minutos para realizar el trabajo.Íconos personalizadosEn botones - Footer
  60. 60. ylambert@espol.edu.ecLección: jQuery• Encabezado y pie - Posicionamiento• Barras de Navegación• Pie de página persistente• Contenido colapsable• Acordeón• Columnas• Laboratorios
  61. 61. ylambert@espol.edu.ecEncabezado-pie y posicionamiento – 1/2– Crearemos barras de herramientas fijas y experiencias a pantalla completa.– El Posicionamiento de las barras de herramientas debe estar dado, losencabezados en la parte superior y los pie de página en la parte inferior.– Para pantalla completa utilizaremos el atributo data-fullscreen=”true”.– Para fijar el encabezado y el pie en la pantalla utilizaremos el atributo data-position=”fixed”.<div data-role="page" data-theme="b" data-fullscreen="true" ><div data-role="header" data-theme="e" data-position="fixed"></div><div data-role="footer" data-theme="b" class="ui-bar" data-position="fixed"></div></div>
  62. 62. ylambert@espol.edu.ecEncabezado-pie y posicionamiento – 2/2
  63. 63. ylambert@espol.edu.ecDemostración 15<div data-role="page" data-theme="b" data-fullscreen="true" ><div data-role="header" data-theme="e" data-position="fixed"><h1>jQuery Mobile</h1><a href="#pagina2" data-theme="a">Cancelar</a><a href="#pagina2" >Comenzar</a></div><div data-role="content"><p>La presente tiene como finalidad ..........<div data-role="footer" data-theme="b" class="ui-bar"data-position="fixed"><a href="#" data-icon="plus">Agregar</a><a href="#" data-icon="delete">Eliminar</a><a href="#" >Refrescar</a></div></div> Uso de posicionamiento fijo y pantalla completa
  64. 64. ylambert@espol.edu.ecBarras de Navegación – 1/3– Una barra de navegación (también conocido como navbar) es un conjuntode enlaces que pueden ser colocados en una barra de herramientas, por logeneral un pie de página, que se combinan para crear una serie deopciones exclusivas.– La idea de una la barra de navegación es la de actuar como un método denavegación principal de nuestra aplicación web.– En algunas plataformas formas, tales como iOS o Nokia, esta barra denavegación también se llama una barra de pestañas.– La barra de navegación soporta hasta cinco elementos en la misma línea.
  65. 65. ylambert@espol.edu.ecBarras de Navegación – 2/3Aquí podemos ver una barra de navegación dentro de un encabezado y un pie de página
  66. 66. ylambert@espol.edu.ecBarras de Navegación – 3/3Aquí podemos ver una barra de navegación con el primer botón activo<div data-role="header" data-theme="b"><h1>jQuery Mobile</h1><div data-role="navbar" ><ul><li><a href="#" class="ui-btn-active">Primer</a><li><a href="#">Segundo</a><li><a href="#">Tercero</a><li><a href="#">Cuarto</a></ul></div></div>
  67. 67. ylambert@espol.edu.ecDemostración 16<div data-role="header" data-theme="b" data-position="fixed"><h1>jQuery Mobile</h1><div data-role="navbar" ><ul><li><a href="#" class="ui-btn-active">Primer</a><li><a href="#">Segundo</a><li><a href="#">Tercero</a><li><a href="#">Cuarto</a></ul></div></div><div data-role="content">Escribir.......</div><div data-role="footer" data-theme="b" data-position="fixed"><div data-role="navbar" ><ul>Lo mismo que la cabececa……………………………..</div> Uso de Barra de navegación
  68. 68. ylambert@espol.edu.ecDemostración 17<div data-role="header" data-theme="b" data-position="fixed"><h1>jQuery Mobile</h1><div data-role="navbar" ><ul><li><a href="#" class="ui-btn-active">Primer</a><li><a href="#">Segundo</a><li><a href="#">Tercero</a><li><a href="#">Cuarto</a></ul></div></div><div data-role="content">Escribir.......</div><div data-role="footer" data-theme="b" data-position="fixed"><h1>Uso de botones com íconos</h1></div> Uso de Barra de navegación con íconos
  69. 69. ylambert@espol.edu.ecPie de página persistente– 1/3– Mientras pensaba en NavBars, entiendo que si cambiamos de undocumento a otro, un nuevo pie de página aparecerá eliminando el actual.– Para resolver este problema y muchos otros, puede usar un pie de páginapersistentes .– Para hacer una barra de herramientas de persistencia, es necesario definiruna identificación data-id para un pie de página fija para todas las páginasdonde queremos tener el mismo pie de página.<div data-role="footer" data-id="main" position="fixed">
  70. 70. ylambert@espol.edu.ecPie de página persistente– 2/3El uso de pie de página persistentes
  71. 71. ylambert@espol.edu.ecDemostración 18 – 1/3 Uso de pie de página persistente
  72. 72. ylambert@espol.edu.ecDemostración 18 – 2/3 Uso de pie de página persistente<div data-role="page" data-theme="b" id="home1"><div data-role="header" data-theme="b" data-position="fixed"><h1>jQuery Mobile</h1></div><div data-role="content"><h2>HOME</h2><p>La presente tien…………<a href="#contacts1" data-role="button">Ir a Contacts</a></div><div data-role="footer" data-theme="b" data-position="fixed" data-id="pie1"><div data-role="navbar" ><ul><li><a href="#" class="ui-btn-active" data-icon="star">Home</a><li><a href="#" data-icon="gear">Contacts</a><li><a href="#" data-icon="info">Events</a><li><a href="#" data-icon="grid">News</a></ul></div></div>
  73. 73. ylambert@espol.edu.ecDemostración 18 – 3/3 Uso de pie de página persistente<div data-role="page" id="contacts1"><div data-role="header" data-theme="b" data-position="fixed"><h1>jQuery Mobile</h1></div><div data-role="content">Contenido</div><div data-role="footer" data-theme="b" data-position="fixed" data-id="pie1"><div data-role="navbar" ><ul><li><a href="#home1" class="ui-btn-active" data-icon="star">Home</a><li><a href="#" data-icon="gear">Contacts</a><li><a href="#" data-icon="info">Events</a><li><a href="#" data-icon="grid">News</a></ul></div></div>
  74. 74. ylambert@espol.edu.ecLaboratorio 4Uso de NavBar y pie persistentes• El trabajo será calificado y es individual.• Tiempo: 30 minutos para realizar el trabajo.Páginas InternasPáginas Externas
  75. 75. ylambert@espol.edu.ecContenido colapsable– 1/3– Recuerde que estamos apuntando a los dispositivos móviles. En losdispositivos móviles, el espacio es muy limitado.– Eso es cuando el contenido plegable viene muy bien. El contenido plegablese puede ocultar y se puede mostrar por JavaScript después de tocar untítulo o un botón.– Para crear contenido plegable, sólo tenemos que definir un contenedor condata-role="collapsible".– Para que el contenido siempre este abierto utilizamos data-collapsed="false"<div data-role="content"><div data-role="collapsible“data-collapsed="false">
  76. 76. ylambert@espol.edu.ecContenido colapsable– 2/3Los paneles plegables son una buena manera de mostrar gran cantidad deinformación en la misma página, dando al usuario la posibilidad de cerrar y abrir
  77. 77. ylambert@espol.edu.ecDemostración 19 – 3/3 Uso de contenido colapsable<div data-role="page”><div data-role="header“><h1>Colapsable</h1></div><div data-role="content"><div data-role="collapsible“ data-collapsed="false"><h2>Tecnología</h2><p>La red de "m……………….</p></div><div data-role="collapsible"><h2>Entretenimiento</h2><p>La Conferencia……………….</p></div></div><div data-role="footer“ ><h4>www.jquerymobile.com</h4></div>
  78. 78. ylambert@espol.edu.ecAcordeón – 1/3– Hay otro comportamiento típico de aplicaciones de Internet relacionados alcontenido colapsable.– El acordeón: Esto le permite agrupar el contenido plegable para que sóloun panel de puede ser visible a la vez. Por lo tanto, al ver un panel, todoslos demás están cerrados.– Es decir, un contenedor con data-role="collapsible-set" y un grupo depaneles plegables como hijos.<div data-role="content"><div data-role="collapsible-set”><div data-role="collapsible“data-collapsed="false">
  79. 79. ylambert@espol.edu.ecAcordeón – 2/3Un control de acordeón ricos se pueden crear utilizando un conjunto de panelesplegables, un panel visible a la vez.
  80. 80. ylambert@espol.edu.ecDemostración 20 – 3/3 Uso de Acordeón<div data-role="page”><div data-role="header“><h1>Colapsable Set</h1></div><div data-role="content"><div data-role="collapsible-set"><div data-role="collapsible“ data-collapsed="false"><h2>Tecnología</h2><p>La red de "m……………….</p></div><div data-role="collapsible"><h2>Entretenimiento</h2><p>La Conferencia……………….</p></div></div></div><div data-role="footer“ ><h4>www.jquerymobile.com</h4></div>
  81. 81. ylambert@espol.edu.ecLaboratorio 5Uso de contenido colapsable y Acordeón• El trabajo será calificado y es individual.• Tiempo: 30 minutos para realizar el trabajo.Acordeón
  82. 82. ylambert@espol.edu.ecColumnas – 1/4– jQuery Mobile nos ofrece unas plantillas para definir el contenido que semuestra en columnas, llamadas rejillas de diseño.– Estas redes actúan como una tabla sin el problema semántico de lautilización de tabla (por favor, no utilice la tabla para nada, además de losdatos tabulares).– Para crear una cuadrícula, sólo tiene que utilizar un contenedor debloque, por lo general un div con una clase de ui-grid-a para doscolumnas, ui-grid-b para tres columnas, ui-grid-c para cuatro columnas, ui-grid-d para cinco columnas.– Cada celda debe ser un contenedor de bloque usando ui-block-<letra> con<letra> siendo de A a D donde A representa la primera y D la quintacolumna de la cuadrícula.
  83. 83. ylambert@espol.edu.ecColumnas – 2/4<div data-role="content"><div class="ui-grid-a"><div class="ui-block-a">Column 1</div><div class="ui-block-b">Column 2</div></div></div><div data-role="content"><div class="ui-grid-b"><!-- Row 1 --><div class="ui-block-a">Cell 1.1</div><div class="ui-block-b">Cell 1.2</div><div class="ui-block-c">Cell 1.3</div><!-- Row 2 --><div class="ui-block-a">Cell 2.1</div><div class="ui-block-b">Cell 2.2</div><div class="ui-block-c">Cell 2.3</div></div></div>
  84. 84. ylambert@espol.edu.ecDemostración 21 – 3/4 Uso de Columnas<div data-role="header"><h1>Columnas</h1><div data-role="navbar"><ul><li><a href="#pag1">Dos Columnas</a><li><a href="#pag2">Tres Columnas</a></ul></div></div><div data-role="content"><h2>Dos columnas y una fila</h2><div class="ui-grid-a"><div class="ui-block-a">Columna 1</div><div class="ui-block-b">Columna 2</div></div></div><div data-role="footer“ data-position="fixed" data-id="pie1" ><h4>www.jquerymobile.com</h4></div>
  85. 85. ylambert@espol.edu.ecDemostración 21 – 4/4 Uso de Columnas<div data-role="page" data-theme="e" id="pag2"><div data-role="header"><h1>Columnas</h1><div data-role="navbar"><ul><li><a href="#pag1">Dos Columnas</a><li><a href="#pag2">Tres Columnas</a></ul></div></div><div data-role="content"><h2>Tres columnas y dos filas</h2><div class="ui-grid-b"><!--Fila 1 --><div class="ui-block-a">Col 1.1</div><div class="ui-block-b">Col 1.2</div><div class="ui-block-c">Col 1.3</div><!--Fila 2 --><div class="ui-block-a">Col 2.1</div><div class="ui-block-b">Col 2.2</div><div class="ui-block-c">Col 2.3</div></div> </div>
  86. 86. ylambert@espol.edu.ecDemostración 22 – 1/2 Uso de Columnas<div data-role="header"><h1>Columnas</h1><div data-role="navbar"><ul><li><a href="#pag1">Dos Columnas</a><li><a href="#pag2">Tres Columnas</a></ul></div></div><div data-role="content"><h2>Dos columnas y una fila</h2><div class="ui-grid-a"><div class="ui-block-a"><p class="marco">Columna1</p></div><div class="ui-block-b"> <p class="marco"> Columna 2 </p> </div></div></div><div data-role="footer“ data-position="fixed" data-id="pie1" ><h4>www.jquerymobile.com</h4></div><style type="text/css">.marco {background-color: #CCC;height: 50px;margin: 0px;border: thin solid #03C;}</style>
  87. 87. ylambert@espol.edu.ecDemostración 22 – 2/2 Uso de Columnas<div data-role="page" data-theme="e" id="pag2"><div data-role="header"><h1>Columnas</h1><div data-role="navbar"><ul><li><a href="#pag1">Dos Columnas</a><li><a href="#pag2">Tres Columnas</a></ul></div></div><div data-role="content"><h2>Tres columnas y dos filas</h2><div class="ui-grid-b"><!--Fila 1 --><div class="ui-block-a"> <p class="marco"> Col 1.1</p></div><div class="ui-block-b"> <p class="marco"> Col 1.2</p></div><div class="ui-block-c"> <p class="marco"> Col 1.3</p></div><!--Fila 2 --><div class="ui-block-a"> <p class="marco"> Col 2.1</p></div><div class="ui-block-b"> <p class="marco"> Col 2.2</p></div><div class="ui-block-c"> <p class="marco"> Col 2.3</p></div></div> </div>
  88. 88. ylambert@espol.edu.ecLaboratorio 6 – 1/2Uso de columnas – Cuadrículas• El trabajo será calificado y es individual.• Tiempo: 30 minutos para realizar el trabajo.
  89. 89. ylambert@espol.edu.ecLaboratorio 6 – 2/2Uso de columnas – Cuadrículas• El trabajo será calificado y es individual.• Tiempo: 30 minutos para realizar el trabajo.
  90. 90. ylambert@espol.edu.ecLección: jQuery - Listas• Definición• Listas con recuadro• Listas interactivas• Listas anidadas• Divisores de listas• Listas con botones dobles• Imágenes• Contador de burbujas• Laboratorios
  91. 91. ylambert@espol.edu.ecListas – 1/3– Las listas son un componente de interfaz de usuario muy popular porquehacen que la experiencia en la navegación sea simple y eficiente.– jQuery móvil puede generar listas con formato visual que son muysimilares a los estilos visto en las aplicaciones nativas.– jQuery Móvil puede mejorar la lista ya sea ordenada o desordenada. Sólose aplican data-role = “listview" a una lista, y jQuery Móvil se encargará delresto.<h3>Unordered List</h3><ul data-role="listview"><li>Item</li><li>Item</li><li>Item</li></ul><h3>Ordered List</h3><ol data-role="listview"><li>Item</li><li>Item</li><li>Item</li></ol>
  92. 92. ylambert@espol.edu.ecListas – 2/3Vista de una lista básica
  93. 93. ylambert@espol.edu.ecDemostración 23 – 3/3<div data-role="content"><h2 align="center">Cursos</h2><ul data-role="listview"><li>jQuery Mobile<li>Dreamweaver<li>Fireworks<li>jQuery</ul><h2 align="center">Cursos</h2><ol data-role="listview"><li>jQuery Mobile<li>Dreamweaver<li>Fireworks<li>jQuery</ol></div> Uso de listas
  94. 94. ylambert@espol.edu.ecListas página completa Vs listas recuadro – 1/3– Por defecto, las listas están en un modo de página completa. Eso significaque el contenido de la lista cubre toda la página, como se muestra acontinuación:
  95. 95. ylambert@espol.edu.ecListas con recuadro – 2/3– En una “lista con recuadro” no aparecerá el recuadro de borde a borde. Ensu lugar, una lista de inserción que se ajusta automáticamentedentro de un bloque con esquinas redondeadas y tiene márgenesestablecidos para el espacio adicional.– Permite tener contenido antes y después.– Para definirlas, sólo tiene que añadir los data-inset= "true" a los elementosUL como OL.<ol data-role="listview" data-inset="true"><!-- item rows --></ol>
  96. 96. ylambert@espol.edu.ecDemostración 24 – 3/3<div data-role="content"><h2 align="center">Cursos</h2><ul data-role="listview“ data-inset="true" ><li>jQuery Mobile<li>Dreamweaver<li>Fireworks<li>jQuery</ul><h2 align="center">Cursos</h2><ol data-role="listview“ data-inset="true" ><li>jQuery Mobile<li>Dreamweaver<li>Fireworks<li>jQuery</ol></div> Uso de listas con recuadros
  97. 97. ylambert@espol.edu.ecListas Interactivas – 1/4– De forma predeterminada, los elementos de vista de lista no tienenpropiedades interactivas.– Un uso común es hacer que los elementos de la lista serán botones dehacer tapping.– Para hacer esto con jQuery Mobile, usted tiene que incluir las etiquetas deanclaje en el elemento de la lista.<h3>Unordered List</h3><ul data-role="listview"><li><a href="#">Item</a></li><li><a href="#">Item</a></li><li><a href="#">Item</a></li></ul><h3>Ordered List</h3><ol data-role="listview"><li><a href="#">Item</a></li><li><a href="#">Item</a></li><li><a href="#">Item</a></li></ol>
  98. 98. ylambert@espol.edu.ecListas Interactivas – 2/4Vista de lista con botones
  99. 99. ylambert@espol.edu.ecDemostración 25 – 3/4<div data-role="content"><h3>Unordered List</h3><ul data-role="listview"><li><a href="#it1">Item 1</a></li><li><a href="#">Item 2</a></li><li><a href="#">Item 3</a></li></ul><h3>Ordered List</h3><ol data-role="listview"><li><a href="#it1">Item 1</a></li><li><a href="#">Item 2</a></li><li><a href="#">Item 3</a></li></ol></div> Uso de listas interactivas
  100. 100. ylambert@espol.edu.ecDemostración 25 – 4/4<div data-role="page" id="it1" data-add-back-btn="true"><div data-role="header" data-theme="b" data-position="fixed"><h1>List.Interactivas</h1></div><div data-role="content"><h2 align="center">ITEM 1</h2><p>Un framework de interfaz de usuario multi-plataforma que permite crear webapps y Apps para teléfonos ytabletas táctiles.</p></div><div data-role="footer" data-position="fixed" data-theme="b"><h4>www.jquerymobile.com</h4></div></div> Uso de listas interactivas
  101. 101. ylambert@espol.edu.ec Uso de listas interactivasLaboratorio 7 – 1/2
  102. 102. ylambert@espol.edu.ec Uso de listas interactivasLaboratorio 7 – 2/2• El trabajo será calificado y es individual.• Tiempo: 30 minutos para realizar el trabajo.
  103. 103. ylambert@espol.edu.ecListas Anidadas – 1/3– jQuery Mobile permite crear listas anidadas y producir vistas interactivasen las que el usuario puede profundizar tocando en elementosindividuales.– La primera vista constará de los elementos de la lista de nivel superior, ytocando en uno de esos artículos, se visualizará la sub-lista, y asísucesivamente.
  104. 104. ylambert@espol.edu.ecDemostración 26 – 2/3<div data-role="content"><h3 align="center">Pike+</h3><ul data-role="listview"><li>Postres<ul><li>Postre 1</li><li>Postre 2</li><li>Postre 3</li><li><a href="#pag1" data-rel="back">Volver</a></li></ul></li><li>Platos Fuertes<ul><li>Plato 1</li><li>Plato 2</li><li>Plato 3</li><li><a href="#pag1" data-rel="back">Volver</a></li></ul></li> Uso de listas anidadas
  105. 105. ylambert@espol.edu.ecDemostración 26 – 3/3<li>Bebidas<ul><li>Bebida 1</li><li>Bebida 2</li><li>Bebida 3</li><li><a href="#pag1" data-rel="back">Volver</a></li></ul></li></ul></div><div data-role="footer" data-position="fixed" data-theme="b"><h4>www.jquerymobile.com</h4></div></div> Uso de listas anidadas
  106. 106. ylambert@espol.edu.ec Uso de listas interactivas anidadasLaboratorio 8 – 1/4
  107. 107. ylambert@espol.edu.ec Uso de listas interactivas anidadasLaboratorio 8 – 2/4
  108. 108. ylambert@espol.edu.ec Uso de listas interactivas anidadasLaboratorio 8 – 3/4
  109. 109. ylambert@espol.edu.ec Uso de listas interactivas anidadasLaboratorio 8 – 4/4
  110. 110. ylambert@espol.edu.ecDivisores de listas – 1/2– Usted puede utilizar separadores para dividir una lista única en lasagrupaciones de filas con sus propios títulos, como se muestra en lasiguiente figura:- Para hacer esto en jQuery Mobile, podemos utilizar una nuevafunción disponible para los elementos li: data-role = "list-divider"
  111. 111. ylambert@espol.edu.ecDemostración 27 – 2/2<div data-role="content"><ul data-role="listview“ data-dividertheme="d" data-theme="e"><li data-role="list-divider">Grupo A<li>Argentina</li><li>Nigeria</li><li>England</li><li data-role="list-divider">Grupo B</li><li>United States</li><li>Mexico</li><li>Korea</li><li data-role="list-divider">Grupo C</li><li>Germany</li><li>Finland</li><li>Chile</li></ul></div> Uso de divisores de listas
  112. 112. ylambert@espol.edu.ecBotones dobles – 1/6– A veces es útil si podemos tener dos posibles acciones interactivas queoperan en la misma fila. El escenario más común es tener una acción dedetalle, y también una acción de edición.– Por ejemplo, ¿el usuario que consulta una lista de álbumes, que debe serpresentado con la posibilidad de comprar y escuchar a cada unode ellos de manera rápida y sencilla.
  113. 113. ylambert@espol.edu.ecDemostración 28 – 2/6<div data-role="header" data-theme="b" data-position="fixed"><h1>Platos Típicos</h1></div><div data-role="content"><ul data-role="listview"><li><a href="#deta1">Caldo de bolas</a><a href="#precio1">Precio</a><li><a href="#deta2">Caldo de Manguera</a><a href="#precio2">Precio</a></ul></div><div data-role="footer" data-position="fixed" data-theme="b"><h4>www.jquerymobile.com</h4></div> Uso de botones dobles
  114. 114. ylambert@espol.edu.ecDemostración 28 – 3/6<div data-role="page" id="deta1" data-add-back-btn="true"><div data-role="header" data-theme="b" data-position="fixed"><h1>Caldo de bolas</h1></div><div data-role="content"><h4>INGREDIENTES </h4><p>1 ½ libra de hueso 5 verdes crudos 2 hojas de col 1 pimiento ½cucharadita de pimienta y comino 1 cucharada de perejil 5 verdescocinados ½ libra de carne molida 1csebolla paiteña 3 dientes de ajo ½.</p></div></div> Uso de botones dobles
  115. 115. ylambert@espol.edu.ecDemostración 28 – 4/6<div data-role="page" id="precio1" data-add-back-btn="true"><div data-role="header" data-theme="b" data-position="fixed"><h1>Caldo de bolas</h1></div><div data-role="content"><h4><b>Precio:</b> $ 5 </h4></div></div> Uso de botones dobles
  116. 116. ylambert@espol.edu.ecDemostración 28 – 5/6<div data-role="page" id="deta2" data-add-back-btn="true"><div data-role="header" data-theme="b" data-position="fixed"><h1>Caldo de Manguera</h1></div><div data-role="content"><p>El caldo de manguera es una receta típica de la gastronomíaecutoriana y con mucha historia. </p><h4>INGREDIENTES:</h4><p> 2 tazas de sangre de Chancho, 1 col, la mitad cocida, y la otramitad cruda, menudencias e intestinos de chancho, 1 pimiento.</p></div></div> Uso de botones dobles
  117. 117. ylambert@espol.edu.ecDemostración 28 – 6/6<div data-role="page" id="precio2" data-add-back-btn="true"><div data-role="header" data-theme="b" data-position="fixed"><h1>Caldo de Manguera</h1></div><div data-role="content"><h4><b>Precio:</b> $ 4.0 </h4></div></div> Uso de botones dobles
  118. 118. ylambert@espol.edu.ec Uso de listas con botones doblesLaboratorio 9 – 1/2CaracterísticasPrecio
  119. 119. ylambert@espol.edu.ec Uso de listas con botones doblesLaboratorio 9 – 2/2CaracterísticasPrecioCaracterísticasPrecio
  120. 120. ylambert@espol.edu.ecImágenes – 1/3– En cada fila podemos definir una imagen para identificar gráficamente elelemento.– Hay dos diferentes tipos de imágenes que podemos añadir a cada fila:iconos y miniaturas.– El tamaño de las imágenes para poner como íconos en la lista es deaproximadamente 25 ancho x 16 alto.– El tamaño de las imágenes para poner como thumbnails en la lista es deaproximadamente 80 ancho x 80 alto.
  121. 121. ylambert@espol.edu.ecDemostración 29 – 2/3<div data-role="header" data-theme="b" data-position="fixed"><h1>World Cup</h1></div><div data-role="content"><ul data-role="listview" data-dividertheme="d" data-theme="e"><li data-role="list-divider">Grupo A<li><img src="images/ecuador.jpg" class="ui-li-icon">Ecuador</li><li><img src="images/alemania.jpg" class="ui-li-icon">Alemania</li><li data-role="list-divider">Grupo B</li><li><img src="images/corea.jpg" class="ui-li-icon">Corea</li><li><img src="images/brasil.jpg" class="ui-li-icon">Brasil</li></ul></div><div data-role="footer" data-position="fixed" data-theme="b"><h4>www.jquerymobile.com</h4></div> Uso imágenes en listas como íconos
  122. 122. ylambert@espol.edu.ecDemostración 30 – 3/3<div data-role="header" data-theme="b" data-position="fixed"><h1>Platos Típicos</h1></div><div data-role="content"><ul data-role="listview"><li><a href="#deta1"> <img src="images/cbola.jpg"> Caldo debolas</a><a href="#precio1">Precio</a><li><a href="#deta2"> <img src="images/csalch.jpg"> Caldo deManguera</a><a href="#precio2">Precio</a></ul></div><div data-role="footer" data-position="fixed" data-theme="b"><h4>www.jquerymobile.com</h4></div> Uso imágenes en listas como thumbnails
  123. 123. ylambert@espol.edu.ecContador de burbujas – 1/3– Un número de burbujas es un círculo con un número dentro puesto a laderecha de la fila por lo general que muestra cuántos elementos están ahíen las filas interactivas.– Se puede utilizar para mostrar elementos no leídos, tareas sin terminar, ocualquier otra información numérica en una forma muy sencilla.– Sólo tiene que utilizar cualquier elemento, como una etiqueta span, conuna clase ui-li-count dentro de una fila de la lista y eso es todo. Porejemplo:<li><a href=“cursos.html">Cursos de Programación</a><span class="ui-li-count">4</span>
  124. 124. ylambert@espol.edu.ecDemostración 31 – 2/3<div data-role="page" id="pag1"><div data-role="header" data-theme="e" data-position="fixed" ><h1>@prendamos</h1></div><div data-role="content"><h4 align="center">Cursos Interactivos</h4><ul data-role="listview" data-inset="true"><li><a href="#">Diseño</a><span class="ui-li-count">3</span><ul data-inset="true"><li>Photoshop</li><li>Illustrator</li><li>Fireworks</li><li><a href="#pag1" data-rel="back">Volver</a></li></ul></li> Uso de número de burbujas
  125. 125. ylambert@espol.edu.ecDemostración 31 – 3/3<li><a href="#">Programación</a><span class="ui-li-count">2</span><ul data-inset="true"><li>C# .net</li><li>Java</li><li><a href="#pag1" data-rel="back">Volver</a></li></ul></li><li><a href="#">Ofimática</a><span class="ui-li-count">1</span><ul data-inset="true"><li>Word 2010</li><li><a href="#pag1" data-rel="back">Volver</a></li></ul></li></ul></div><div data-role="footer" data-position="fixed" data-theme="b"><h4>www.jquerymobile.com</h4></div>/div> Uso de número de burbujas
  126. 126. ylambert@espol.edu.ecContenido relacionado – 1/2– Hasta ahora, todas las listas que hemos diseñado tiene una sola columnapara el contenido del texto. Se puede añadir una miniatura o unicono, pero sólo una columna de texto.– Podemos agregar una columna de segundo nivel a todas las filas paraobtener información adicional que desee mostrar.– Para ello, podemos utilizar cualquier elemento HTML con una clase ui-li-aside, como un elemento span ó DIV.<ul data-role="listview"><li><a href=“#">Soda</a><span class="ui-li-aside">$1.00</span><li><a href=“#">Sandwich</a><span class="ui-li-aside">$3.20</span><li><a href=“#">Ice cream</a><span class="ui-li-aside">$1.50</span></ul>
  127. 127. ylambert@espol.edu.ecDemostración 32 – 2/2<div data-role="content"><h4 align="center">Menú</h4><ul data-role="listview" data-inset="true" ><li><a href="buy.html">Soda<span class="ui-li-aside">$1.00</a></span><li><a href="#">Sandwich<span class="ui-li-aside">$3.20</a></span><li><a href="#">Ice Cream<span class="ui-li-aside">$1.50</a></span></ul></div><div data-role="footer" data-position="fixed" data-theme="b"><h4>www.jquerymobile.com</h4></div>/div> Uso de contenido relacionado
  128. 128. ylambert@espol.edu.ecTítulo y descripción – 1/2– Si queremos mostrar un título y una descripción, como parte de lafila, podemos hacerlo por utilizando algún elemento de cabecera Hx para eltítulo y un elemento P para la descripción del texto.– Por supuesto, usted puede mezclar el título y la descripción con elcontenido relacionado, con los iconos o thumbnails en la misma fila.<ul data-role="listview" data-inset="true" ><li><a href="#"><h3>Bebida</h3><p>Elige tu refresco favorito </p><span class="ui-li-aside">$1.00</a></span></ul>
  129. 129. ylambert@espol.edu.ecDemostración 33 – 2/2<div data-role="content"><h4 align="center">Menú</h4><ul data-role="listview" data-inset="true" ><li><a href="#"><h3>Bebida</h3><p>Elige tu refresco favorito </p><span class="ui-li-aside">$1.00</a></span><li><a href="#"><h3>Sandwich</h3><p>Jamón y Queso, jamón y huevo o atún</p><span class="ui-li-aside">$3.20</a></span><li><a href="#"><h3>Helado</h3><p>Chocolate, vainilla o fresa</p><span class="ui-li-aside">$1.50</a></span></ul></div><div data-role="footer" data-position="fixed" data-theme="b"><h4>www.jquerymobile.com</h4></div>/div> Uso de título y descripción
  130. 130. ylambert@espol.edu.ecFiltrado de datos con búsqueda – 1/2– La magia de jQuery Mobile ha sucedido. Al agregar este atributo simple, uncuadro de búsqueda se adjunta automáticamente en la parte superior dela lista (página completa o recuadro) y funciona!– Esta característica va a filtrar nuestros elementos de la lista sobre la basede escritura del usuario. El cuadro de texto de búsquedase ve muy bien, con un icono de búsqueda en el lado izquierdo, unmarca de agua texto de sugerencia, esquinas redondeadas, y un botón deborrado en el lado derecho.– Se puede buscar en el elemento UL como OL y agregar data-filter="true"<ul data-role="listview" data-filter="true"><!-- list rows --></ul>
  131. 131. ylambert@espol.edu.ecDemostración 34 – 2/2<div data-role="content"><h4 align="center">Menú</h4><ul data-role="listview" data-inset="true" data-filter="true" data-filter-placeholder="Buscar" ><li><a href="#"><h3>Bebida</h3><p>Elige tu refresco favorito </p><span class="ui-li-aside">$1.00</a></span><li><a href="#"><h3>Sandwich</h3><p>Jamón y Queso, jamón y huevo o atún</p><span class="ui-li-aside">$3.20</a></span><li><a href="#"><h3>Helado</h3><p>Chocolate, vainilla o fresa</p><span class="ui-li-aside">$1.50</a></span></ul></div><div data-role="footer" data-position="fixed" data-theme="b"> Filtrado de datos con búsqueda
  132. 132. ylambert@espol.edu.ec Uso de imágenes y filtro de datosLaboratorio 10 – 1/2CaracterísticasPrecio
  133. 133. ylambert@espol.edu.ec Uso de imágenes y filtro de datosLaboratorio 10 – 2/2CaracterísticasPrecioCaracterísticasPrecio
  134. 134. ylambert@espol.edu.ecFormularios– jQuery mobile soporta formularios con manejo automático de AJAX. Esa esla primera buena noticia acerca de los controles de formulario..– Los controles de formulario soportados son input, textarea, radiobuttons, checkbox, slider, select, etc.– Todos los controles se encuentran dentro de un elemento de formulario(form)con un atributo de acción que define la dirección URL que recibirálos datos del formulario.– Query Mobile mejorará todos los elementos de forma nativa para hacerlosmás atractivos y utilizable en dispositivos móviles.<form action="send.php" action="get"></form>
  135. 135. ylambert@espol.edu.ecFormularios – Labels– Un elemento muy importante del control de todas las formas es laetiqueta. Siempre debe incluir un elemento de indicación en el control dela derecha utilizando el atributo for. Veamos un ejemplo.<form action="send.php" action="get"><label for="company">Company Name:</label></form>
  136. 136. ylambert@espol.edu.ecFormularios – Text Fields– jQuery Mobile es compatible con los controles básicos de HTML5 deentrada de texto y los hace de acuerdo con el tema actual y muestra decolor. Estos son los campos de entrada de texto disponibles:– <input type="text">– <input type="password">– <input type="email">– <input type="tel">– <input type="url">– <input type="search">– <input type="number">– <textarea><form action="send.php" action="get"><label for="company">Company Name:</label><input type="text" id="company" name="company"></form>
  137. 137. ylambert@espol.edu.ecFormularios – Text FieldsUso de nuevos tipos de entrada de texto HTML5
  138. 138. ylambert@espol.edu.ecDemostración 35<div data-role="content"><form action="" method="get"><label for="nombre">Nombre</label><input type="text" id="nombre" name="nombre"></form></div> Uso de labels y text fields
  139. 139. ylambert@espol.edu.ecFormularios – Field Contain– Un contenedor es un campo opcional que mejora la experiencia de usuarioen pantallas más anchas, como dispositivos tipo tableta.– Este contenedor es cualquier elemento de bloque con data-role ="fieldcontain“.<div data-role="content"><form action="" method="get"><div data-role="fieldcontain"><label for="nombre">Nombre</label><input type="text" id="nombre" name="nombre"></div></form></div>
  140. 140. ylambert@espol.edu.ecDemostración 36<div data-role="content"><form action="" method="get"><div data-role="fieldcontain"><label for="nombre">Nombre</label><input type="text" id="nombre" name="nombre"></div><div data-role="fieldcontain"><label for="email">Email:</label><input type="email" id="email" name="email"></div></form></div> Uso de contenedores de campo
  141. 141. ylambert@espol.edu.ecFormularios – Text Area– Cuando usamos la caja de texto para la entrada de texto de variaslíneas, vamos a obtener un servicio de cortesía: auto-creciente.– jQuery Mobile se inicia con una altura de dos líneas hasta que ingrese eltexto que crea una tercera línea. Entonces, la estructura se expandeautomáticamente el área de texto para adaptarse a la nueva línea.<div data-role="fieldcontain"><label for="comen">Comentarios:</label><textarea id="comen" name="comen></textarea></div
  142. 142. ylambert@espol.edu.ecDemostración 37<div data-role="content"><form action="" method="get"><div data-role="fieldcontain"><label for="nombre">Nombre</label><input type="text" id="nombre" name="nombre"></div><div data-role="fieldcontain"><label for="email">Email:</label><input type="email" id="email" name="email"></div><div data-role="fieldcontain"><label for="comen">Comentarios</label><textarea id="comen" name="comen"></textarea></div></form></div> Uso de Text Area
  143. 143. ylambert@espol.edu.ecNuevos Atributos de HTML5– Es seguro usar cualquier atributo HTML 5 en nuestros campos de texto, yaque trabajar en dispositivos compatibles y no hará nada en los navegadoresantiguos.– Dentro de la lista de los nuevos atributos de los controles en los formulariose pueden mencionar los siguientes:• Requeridos• Patrones,• Marcador de posición,• mínima y máxima (útil sólo para <input type="number">).
  144. 144. ylambert@espol.edu.ecDemostración 38<div data-role="content"><form action="" method="get"><div data-role="fieldcontain"><label for="nombre">Nombre</label><input type="text" id="nombre" name="nombre" requiredplaceholder="Ingrese su nombre"></div><div data-role="fieldcontain"><label for="edad">Edad:</label><input type="number" id="edad" requiredplaceholder="Ingrese su edad" min="10" max="110"></div></form></div> Uso de nuevos atributos en HTML5
  145. 145. ylambert@espol.edu.ecFormularios – Date Fields– Introducción de fechas en HTML siempre fue un problema y nosacostumbramos a depender de bibliotecas de JavaScript que prestancalendarios visuales usando HTML.– HTML5 ahora se ha añadido soporte para los campos de fecha a través delelemento de entrada que utilizan los siguientes tipos:• date para un selector de fecha (día, mes, año)• Datetime para un selector de fecha completa (día, mes, año, hora, minuto) usando la sintaxisestándar, incluyendo la zona horaria GMT• Time para un selector de tiempo (horas, minutos)• datetime-local un selector de fecha completa, sin información de zona horaria• month un selector de mes (por lo general se representa como una lista desplegable)• week durante una semana del selector de año (por lo general se representa como una listadesplegable)
  146. 146. ylambert@espol.edu.ecFormularios – Date FieldsDesde la versión iOS 5 en adelante, los elementos de fecha son compatibles, por lo queobtendrá un selector de fecha bonita cuando se utiliza este tipo de entrada HTML5
  147. 147. ylambert@espol.edu.ecDemostración 39<div data-role="content"><form action="" method="get"><div data-role="fieldcontain"><label for="cumple">Cumpleaño</label><input type="date" id="cumple" name="cumple"></div><div data-role="fieldcontain"><label for="mes">Mes favorito:</label><input type="month" id="mes" name="mes"></div></form></div> Uso de Date Fields
  148. 148. ylambert@espol.edu.ecFormularios – Slider – 1/2– Un deslizador es ideal para los valores numéricos dentro de un rango.Cuando se utiliza, se proporciona un campo de texto numérico y undeslizador horizontal a la derecha.– Para utilizar un deslizador, se debe definir un control de HTML5 <inputtype="range">. Acepta mínimo, máximo, y el paso de valores:<div data-role="fieldcontain"><label for="qty">Cantidad:</label><input type="range" id="qty" name="qty" min="1" max="100" value="5"></div>
  149. 149. ylambert@espol.edu.ecFormularios – Slider – 2/2– El deslizador es compatible con una muestra de color a través de ladefinición data-theme que afecta a las teclas numéricas tipo entrada, ytambién podemos definir una data-track-theme, que sólo afecta a la pista.<div data-role="fieldcontain"><label for="qty">Cantidad:</label><input type="range" id="qty" name="qty" min="1" max="100" value="5" data-theme="e"data-track-theme="b"></div>
  150. 150. ylambert@espol.edu.ecDemostración 40<div data-role="content"><form action="" method="get"><div data-role="fieldcontain"><label for="qty">Cantidad</label><input type="range" id="qty" name="qty" min="1" max="100" value="5"></div><div data-role="fieldcontain"><label for="qty">Cantidad:</label><input type="range" id="qty" name="qty" min="1" max="100" value="5"data-theme="e" data-track-theme="b"></div></form></div> Uso de Slider
  151. 151. ylambert@espol.edu.ecFormularios – Flip Toggle Switch– Un interruptor de palanca es un selector de valores booleanos (verdaderoo falso, encendido o apagado), similar a una casilla en funcionalidad, perocon una interfaz de usuario radicalmente diferente.– Se hizo como un interruptor visual que puede ser activada o desactivadapor el usuario (tocando o arrastrando el cambiar).– Este es el primer control que necesita un explícito data-role:slider. Senecesita un elemento select con sólo dos opciones: off/false y luego elon/verdadero.<div data-role="fieldcontain"><select id="updated" name="updated" data-role="slider"><option value="no">No</option><option value="yes">Yes</option></select></div>
  152. 152. ylambert@espol.edu.ecDemostración 41<div data-role="content"><form action="" method="get"><div data-role="fieldcontain"><label for="updated">Recibir actualizaciones</label><select id="updated" name="updated" data-role="slider"><option value="no">No</option><option value="yes">Yes</option></select></form></div> Uso de Slider
  153. 153. ylambert@espol.edu.ecFormularios – Select Menus– Los menús a través de los elementos seleccionados son un control deforma típica para seleccionar uno o varios opciones de una listadesplegable. Cada navegador móvil es compatible selecciona (simple ymúltiple selección).<div data-role="fieldcontain"><label for="training">Entrenamiento</label><select id="training" name="training"><option value="1">HTML5</option><option value="2">jQuery Mobile</option><option value=“3">BlackBerry</option><option value=“4">Flash</option><option value=“5">Fireworks</option></select></div>
  154. 154. ylambert@espol.edu.ecDemostración 42<div data-role="content"><form action="" method="get"><div data-role="fieldcontain"><label for="training">Entrenamiento</label><select id="training" name="training"><option value="1">HTML5</option><option value="2">jQuery Mobile</option><option value="3">BlackBerry</option><option value="4">Flash</option><option value="5">Fireworks</option></select></div></form></div> Uso de Select Menus
  155. 155. ylambert@espol.edu.ecDemostración 43<div data-role="content"><form action="" method="get"><div data-role="fieldcontain"><label for="training">Entrenamiento</label><select id="training" name="training" data-native-menu="false"multiple><option value="1">HTML5</option><option value="2">jQuery Mobile</option><option value="3">BlackBerry</option><option value="4">Flash</option><option value="5">Fireworks</option><option value="5">DW</option></select></div></form></div> Uso de Select Menus con atributo múltiple yopciones de menú no nativas
  156. 156. ylambert@espol.edu.ecFormularios – Agrupación de menús– Los Select Menu pueden agruparse usando el elemento controlgroup,vertical o horizontalmente.– La última es útil para cortar la longitud de selección, por ejemplo: un grupode mes / día / año. Para menús agrupados, tenemos que integrar en un divcon data-role = "controlgroup"
  157. 157. ylambert@espol.edu.ecDemostración 44<form action="" method="get"><div data-role="fieldcontain"><fieldset data-role="controlgroup"><legend>Fecha de nacimiento</legend><select id="dia" name="dia" data-native-menu="false" ><option >Día</option><option value=“1">1</option><option value=“2">2 Mobile</option></select><select id="mes" name="mes" data-native-menu="false" ><option>Mes</option><option value=“1">Enero</option><option value=“2">Febrero</option></select><select id="anio" name="anio" data-native-menu="false" ><option >Año</option><option value=“1">1978</option><option value=“2">1980</option></select></fieldset> </div> </form> Agrupación de menú con div y controlgroup
  158. 158. ylambert@espol.edu.ecDemostración 45<form action="" method="get"><div data-role="fieldcontain"><fieldset data-role="controlgroup"><legend>Fecha de nacimiento</legend><select id="dia" name="dia" data-native-menu="false" ><option >Día</option><option value=“1">1</option><option value=“2">2 Mobile</option></select><select id="mes" name="mes" data-native-menu="false" ><option >Mes</option><option value=“1">Enero</option><option value=“2">Febrero</option></select><select id="anio" name="anio" data-native-menu="false" ><option >Año</option><option value=“1">1978</option><option value=“2">1980</option></select></fieldset> </div> </form> Agrupación de menú con fieldset
  159. 159. ylambert@espol.edu.ecDemostración 46<form action="" method="get"><div data-role="fieldcontain"><div data-role="controlgroup" data-type="horizontal"><legend>Día y Tiempo</legend><select id="dia" name="dia" data-native-menu="false" multiple><option >Día</option><option value="1">Lunes</option><option value="2">Martes</option><option value="3">Miércoles</option><option value="4">Jueves</option><option value="5">Viernes</option></select><select id="tiempo" name="tiempo" data-native-menu="false"><option value="1">Mañana</option><option value="2">Tarde</option><option value="3">Noche</option></select></div></div></form> Agrupación de menú con div y controlgroup
  160. 160. ylambert@espol.edu.ecFormularios – Radio Buttons– Todos sabemos lo que es un botón de radio. La gran cosa acerca de losbotones de la radio en jQuery Mobile es la forma en que se prestan sinningún tipo de trabajo de nosotros. En primer lugar, vamos a revisar losrequisitos para los botones de radio para que funcione correctamente enjQuery Mobile:• Cada opción debe ser un <input type="radio“>• Todas las opciones de un mismo grupo debe tener el mismo nombre.• Todas las opciones deben tener un identificador único y un elemento deetiqueta única que se le aplica.
  161. 161. ylambert@espol.edu.ecDemostración 47<form action="" method="get"><div data-role="fieldcontain"><div data-role="controlgroup" ><legend>Seleccione su estado civil</legend><input type="radio" id="soltero" name="estadoc" value="1"><label for="soltero">Soltero</label><input type="radio" id="casado" name="estadoc" value="2"><label for="casado">Casado</label><input type="radio" id="divorciado" name="estadoc" value="3"><label for="divorciado">Divorciado</label></select></div></div></form>Uso de Radio Buttons
  162. 162. ylambert@espol.edu.ecFormularios – Checkboxes– Las casillas de verificación funcionan de manera similar a los botones deradio, pero con selección múltiple.
  163. 163. ylambert@espol.edu.ecDemostración 48<form action="" method="get"><form action="" method="get"><div data-role="fieldcontain"><div data-role="controlgroup" ><legend>Seleccione el Género</legend><input type="checkbox" id="accion" name="accion" checked><label for="accion">Acción</label><input type="checkbox" id="comedia" name="comedia"><label for="comedia">Comedia</label><input type="checkbox" id="drama" name="drama" ><label for="drama">Drama</label></select></div></div></form>Uso de Checkboxes
  164. 164. ylambert@espol.edu.ecYamil LambertGracias.

×