JQueryMobile

1,467 views

Published on

Un vistazo a lo que ofrece JQuery Mobile para el desarrollo móvil

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,467
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

JQueryMobile

  1. 1. JQuery Mobile Marco Arce Andrés Deza Esaú Hernandez
  2. 2. Contenido <ul><ul><li>Qué es Jquery? </li></ul></ul><ul><ul><li>Qué es Jquery Mobile? </li></ul></ul><ul><ul><li>Fortalezas y Características Clave </li></ul></ul><ul><ul><li>Sistemas Móviles Soportados </li></ul></ul><ul><ul><li>Componentes </li></ul></ul>
  3. 3. Qué es JQuery? <ul><ul><li>Es una rápida y concisa librería JavaScript que simplifica los documentos HTML, manejo de eventos, animaciones e interacciones Ajax para un rápido desarrollo Web. </li></ul></ul>
  4. 4. Qué es JQuery Mobile? <ul><ul><li>Es un sistema de interfaz de usuario unificado que funciona a la perfección en todas las plataformas de dispositivos móviles más comunes, construida sobre la base de jQuery y jQuery UI. Enfocado en tener código liviano y un diseño flexible. </li></ul></ul><ul><ul><li>Es un framework touch HTML5 optimizado para construir websites y aplicaciones móviles. </li></ul></ul>
  5. 5. Fortalezas <ul><ul><li>Orientado a una amplia variedad de browser y dispositivos móviles. </li></ul></ul><ul><ul><li>Esta basado en pura semántica HTML para asegurar compatibilidad. </li></ul></ul><ul><ul><li>En dispositivos que interpretan CSS y JS aplica técnicas de mejora progresiva para lograr paginas ricas e interactivas. </li></ul></ul><ul><ul><li>Características accesibles como WAI-ARIA </li></ul></ul>
  6. 6. Características clave <ul><ul><li>Construido en el core jQuery. </li></ul></ul><ul><ul><li>Compatible con todas las principales plataformas moviles y desktop, iOS, Android, Blackberry, Palm WebOS, Nokia/Symbian, Windows Mobile, Opera Mobile/Mini, Firefox Mobile y todos los browser desktop actuales. </li></ul></ul><ul><ul><li>Peso ligero (comprimido en un aproximado de 20k) </li></ul></ul><ul><ul><li>HTML5 Markup-driven, configuración de paginas y comportamiento para desarrollo más óptimo y mínimo uso de scripting. </li></ul></ul><ul><ul><li>Aproximación mejorada progresiva trae un contenido core y funcionalidades para todas las plataformas móviles, tablets y desktop. </li></ul></ul><ul><ul><li>Inicialización automática usando atributos HTML5 data-role en HTML para acturar como un trigger para automaticamente inicializar todos los widgets jQuery Mobile en una página. </li></ul></ul><ul><ul><li>Características accesibles como WAI-ARIA para que las pagina trabajen para lectores de pantalla (ejemplo. VoiceOver en iOS) y otras tecnologías asistidas. </li></ul></ul><ul><ul><li>Soporte a eventos Touch, Mouse y Métodos de Entrada enfocados en cursores con una simple API. </li></ul></ul><ul><ul><li>UI widgets mejoran los controles nativos con touch optimizados. </li></ul></ul>
  7. 7. SO Móviles Soportados
  8. 8. Matriz de soporte a dispositivos A - Calidad Alta. B - Calidad Media. C - Calidad Baja.
  9. 9. Componentes <ul><ul><li>Estructura y Data Roles </li></ul></ul><ul><ul><li>Páginas y Diálogos </li></ul></ul><ul><ul><li>Themes </li></ul></ul><ul><ul><li>Botones (Incluyendo un conjunto de iconos) </li></ul></ul><ul><ul><li>Toolbars (Barras Header & Footer bars) </li></ul></ul><ul><ul><li>List View Control </li></ul></ul><ul><ul><li>Controles para Formulario (Slider’s, Toggles, radio, checkbox, etc) </li></ul></ul>
  10. 10. Estructura <ul><ul><ul><li>1) HTML5 Doctype </li></ul></ul></ul><ul><ul><ul><li>2) jQuery Mobile CSS </li></ul></ul></ul><ul><ul><ul><li>2) jQuery Core JS </li></ul></ul></ul><ul><ul><ul><li>3) jQuery Mobile JS </li></ul></ul></ul>
  11. 11. Data Role’s <ul><li>  </li></ul><ul><ul><li>jQuery Mobile usa un atributo HTML llamado  data-role para asociar un elemento con un widget. Por ejemplo: </li></ul></ul><ul><ul><ul><li>data-role=”page” </li></ul></ul></ul><ul><ul><ul><li>data-role=”header” </li></ul></ul></ul><ul><ul><ul><li>data-role=”footer” </li></ul></ul></ul><ul><ul><ul><li>data-role=”navbar” </li></ul></ul></ul><ul><ul><ul><li>data-role=”button” </li></ul></ul></ul><ul><ul><ul><li>data-role=”listview” </li></ul></ul></ul><ul><ul><ul><li>data-role=”controlgroup” </li></ul></ul></ul><ul><ul><ul><li>data-role=”fieldcontain” </li></ul></ul></ul>
  12. 12. Data Role’s <ul><ul><li>HTML5 agrega una característica llamada custom data attributes. </li></ul></ul><ul><ul><li>Algún atributo tag que inicia con data- quizá sea usado como un custom data storage asociado con el elemento. </li></ul></ul><ul><ul><li>En lugar de </li></ul></ul><ul><ul><ul><li><div id=”cat#cat.id#”></div> se puede tener </li></ul></ul></ul><ul><ul><ul><li>  <div data-id=”#cat.id#”>...</div> </li></ul></ul></ul><ul><ul><li>Esto pasaría como HTML5. </li></ul></ul>
  13. 13. Páginas <ul><ul><li>Un documento HTML puede consistir un múltiples páginas. Las páginas están enlazadas a través de #pageElementID </li></ul></ul>
  14. 14. Theme’s <ul><ul><li>jQuery Mobile viene con muchos esquemas de color los cuales pueden ser controlados usando el atributo data-theme. </li></ul></ul><ul><ul><li>Se puede especificar data-theme en una página, botones, toolbar’s, etc. </li></ul></ul><ul><ul><li>Intenta especificar data-theme=a,b,c,d,e </li></ul></ul>
  15. 15. Buttons <ul><ul><li>Se puede crear un botón agregando data-role=”button” a una etiqueta botón </li></ul></ul><ul><ul><li>button tag, un tag, o input type=submit|button|reset|image </li></ul></ul><ul><ul><li>Se puede agregar un icono en el botón usando data-icon=” icon-name ” </li></ul></ul><ul><ul><li>Por defecto el icono va a la derecha pero se puede cambiar especificando data-iconpos. </li></ul></ul>
  16. 16. Agregando Botones <ul><ul><li>Se puede crear una lista de botones </li></ul></ul><ul><ul><li>Por defecto la lista de botones no tienes un &quot;padding&quot; definido para incluirlo en la barra se debe agregar    class=&quot;ui-bar&quot; </li></ul></ul><ul><ul><li><div data-role=&quot;footer&quot; class=&quot;ui-bar&quot;> <a href=&quot;index.html&quot; data-role=&quot;button&quot; data-icon=&quot;delete&quot;>Remove</a> <a href=&quot;index.html&quot; data-role=&quot;button&quot; data-icon=&quot;plus&quot;>Add</a> <a href=&quot;index.html&quot; data-role=&quot;button&quot; data-icon=&quot;arrow-u&quot;>Up</a> <a href=&quot;index.html&quot; data-role=&quot;button&quot; data-icon=&quot;arrow-d&quot;>Down</a> </div> </li></ul></ul><ul><ul><li>Para el grupo de botones dentro de un conjunto de botones se debe usar el data-role=&quot;controlgroup&quot; y el atributo data-type=&quot;horizontal&quot;. </li></ul></ul><ul><ul><li><div data-role=&quot;footer&quot; class=&quot;ui-bar&quot;> </li></ul></ul>
  17. 17. List View <ul><ul><li>List view más avanzados. </li></ul></ul>
  18. 18. Formularios <ul><ul><li>Elementos del formulario deben estar contenidos en un div con un atributo datarole=“fieldcontain”. </li></ul></ul>
  19. 19. Distribución y uso <ul><ul><li>Actualmente se encuentra su versión 1.0 en Beta 3. </li></ul></ul><ul><ul><li>El framework jQuery Mobile en sí se descarga de manera independiente, adicionalmente hay que descargar alrededor de 12KB (la versión comprimida) del core de jQuery . Como el el resto del framework de jQuery, jQuery Mobile es gratis, bajo una doble licencia (MIT y GPL). </li></ul></ul>
  20. 20. Aplicación Demo
  21. 21. Feed Reader
  22. 24. Descarga la demo http://code.google.com/p/training-samples

×