jQueryMobile

2,311 views

Published on

Presentación de las tecnologías disponibles para el desarrollo de sitios web orientados a dispositivos móviles e introducción al desarrollo en jQueryMobile

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

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

No notes for slide

jQueryMobile

  1. 1. Introducción <br />jQuerymobile framework<br />POR: FELIPE HERNÁNDEZ R. <br />TWITTER:@FELIPEDEV<br />
  2. 2. ¿Qué es <br />jQuerymobile?<br />
  3. 3. ¿Es el único <br />framework de este tipo?<br />
  4. 4. Otros web frameworks<br />SENCHA<br />jQTouch<br />GWT Mobile<br />XUI.Js<br />ZEPTO<br />JOAPP<br />
  5. 5. Si, son muchos…<br />y hay más!<br />
  6. 6. ¿Tienen siquiera algo en común?<br />
  7. 7. HTML5<br />
  8. 8. ¿Vi por ahí otro jQAlgo?<br />Mmmm… pero tiene algo que ver jQtouch con jQuery Mobile?<br />
  9. 9. jQuerymobile<br />v/s<br />jQTouch<br />
  10. 10. jQuerymobile: CrossPlatform<br />
  11. 11. jQTouch: WebKitLover<br />
  12. 12. Pero si iOS y ANDROID tienen browser WebKit!<br />
  13. 13. Pssst!!<br />¡¡ No todos usan<br />iOS o Android !!<br />
  14. 14. =<br />Entonces…<br />¿La historia se repite?<br />
  15. 15. ¡Las personas no tienen por que preocuparse de compatibilidades de navegadores!<br />
  16. 16. No entreguemos una página más.<br />¡Entreguemos una experiencia señores!<br />
  17. 17. Web:<br />Sistema unificado<br />Acceso universal<br />Fácil desarrollo<br />
  18. 18. Un código; <br />Todas las plataformas.<br />
  19. 19. Aaah, que bonito sería…<br />
  20. 20. Pero hay una solución:<br />Construir sobre estándares<br />
  21. 21. …y sobre el core de jQuery<br />Móviles + Tablets UI<br />Herramientas + utilidades<br />
  22. 22. Eso para la intro.<br />Ahora… a lo que vinimos<br />
  23. 23. jQuery<br />Aaaah… jQuery…<br />Que tiempos aquellos…<br />
  24. 24. ¿jQuery?<br />
  25. 25. jQuery es:<br />*Fácil de utilizar<br />*POO JS Framework<br />*Efectos dinámicos<br />*AJAX<br />*CSS<br />*UI<br />Y muchos, pero muchos<br />Plug-Ins<br />
  26. 26. Core de jQuery<br />$() = La función jQuery<br />Accesorios de objetos<br />Trabajo con datos<br />Interoperabilidad<br />
  27. 27. Y claro… también los Plug-ins<br />
  28. 28. Código básico jQuery<br /><head> <br /><title>Ejemplo jQuery</title> <br /> <script src="Js/jquery-1.6.2.js”></script><br /><script> <br /> $(document).ready(function(){<br /> //Algún código a ejecutar<br /> });<br /></script> <br /></head> <br />
  29. 29. Funciones Callback<br />O<br />CallBack de funciones<br />
  30. 30. Callback<br />en acción ;)<br />
  31. 31. Parcelación de jQuery<br />*Core de jQuery<br />*Selectores de jQuery<br />*Métodos “Attributes”<br />*Métodos de CSS<br />*Eventos en jQuery<br />*Desarrollo de Plug-Ins<br />*Efectos en jQuery<br />*Otros: jQuery UI<br />
  32. 32. ¿Alguna duda respecto de jQuery?<br />
  33. 33. AHORA SI !!!<br />Ya era hora T.T<br />
  34. 34. Archivos livianos =D!<br />
  35. 35. Pero ni tanto<br />
  36. 36. Provee interface móviles<br />MÓVIL<br />WEB<br />
  37. 37. Interfaces unificadas<br />
  38. 38. Accesible via<br />Portrait y/o Landscape<br />
  39. 39. Oye y… ¿tiene soporte para movimientos de tipo touch o mouse… o teclado?<br />
  40. 40. Por supuesto!<br />
  41. 41. ¿Y que hay de una aplicación nativa?<br />¿Podría utilizar jQuery Mobile para construir una aplicación nativa… y venderla enlosmarket?<br />$_$<br />
  42. 42. Por supuesto!<br />
  43. 43. ¿Como? :S<br />
  44. 44.
  45. 45. Pero eso será para otra ocasión ;)<br />
  46. 46. Retomamos entonces…<br />
  47. 47. Compatibilidad de<br />jQuery Mobile<br /> con S.O. móviles<br />
  48. 48.
  49. 49. También funciona en escritorio<br />
  50. 50. ¿Y en que versión está?<br />
  51. 51. Versión 1.0….beta<br />Si, beta!<br />
  52. 52. ¿Alguna Integración?<br />
  53. 53. Integraciones con:<br />Adobe CSS5<br />DRUPAL<br />WORDPRESS<br />The M Project<br />
  54. 54. Utiliza CSS3 para layouts mas fluidos<br />
  55. 55. El renderizado dependerá del motor JS del navegador<br />
  56. 56. Mmm… bien, pero <br />¿En que me ayuda?<br />
  57. 57. Facilita el desarrollo<br />De interfaces web móviles<br />
  58. 58. Provee eventos personalizados para detectar acciones específicas de los dispositivos móviles<br />
  59. 59. Utiliza<br />Progressiveenhancement<br />
  60. 60. Utiliza temas…<br />O en inglés themes<br />
  61. 61. Las interfaces son creadas o más bien dicho “configuradas ”mediante etiquetas.<br />
  62. 62. ¿No me creen?<br />
  63. 63. Hagamos entonces una iterfaz de jQuerymobile<br />paso a paso<br />
  64. 64. Documento HTML5 ;)<br /><!Doctypehtml><br /><html><br /><head> <br /><meta charset=“utf-8”/><br /><title>Ejemplo jQuerymobile</title> <br /></head> <br /> <body> <br /> </body> <br /></html> <br />
  65. 65. jQuery + mobile + temas CSS<br /><!Doctypehtml><br /><html><br /> <head> <br /> <meta charset=“utf-8”/> <br /> <title>Ejemplo jQuerymobile</title> <br /> <meta name=“viewport” content=“width=device-width<br />minimum-scale=1 maximum-scale=1initial-scale=1”/><br /> <linkrel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/ jquery.mobile-1.0b1.min.css" /><br /> <script src="http://code.jquery.com/jquery-1.6.1.min.js"></script><br /> <script src="http://code.jquery.com/mobile/1.0b1/ jquery.mobile-1.0b1.min.js"></script><br /></head> <br /> <body> <br /> </body> <br /></html> <br />
  66. 66. data-role = page<br /><body><br /> <div data-role=“page” ><br /> <!--/Contenido de la pagina jQuerymobile-- ><br /> </div><!--/Fin de la página --><br /></body><br />
  67. 67. Data que!!?<br />data-role…<br />Header<br />Content<br />Footer<br />
  68. 68. Más data-role<br /><body><br /><div data-role=“page” ><br /> <div data-role=“header” > <br /> </div><br /><div data-role=“content” ><br /></div><br /> <div data-role=“footer” ><br /></div><br /> </div><br /></body><br />
  69. 69. Contenido simple<br /><body><br /><div data-role=“page” ><br /> <div data-role=“header” ><br /> <h1>Bienvenido!</h1> <br /> </div><br /><div data-role=“content” ><br /> <p>Hola mundo!</p><br /></div><br /> <div data-role=“footer” ><br /></div><br /> </div><br /></body><br />
  70. 70. Lista básica<br /><div data-role=“content” ><br /> <p>Hola mundo!</p><br /> <ul><br /> <li>Productos</li><br /> <li>Servicios</li><br /> <li>Acerca de nosotros</li><br /> <li>Contacto</li><br /> </ul><br /></div><br />
  71. 71. Showtime!<br />
  72. 72. Nada muy <br />interesante…<br />
  73. 73. Agregamos un listview role<br /><div data-role=“content” ><br /> <p>Hola mundo!</p><br /> <uldata-role=“listview”><br /> <li>Productos</li><br /> <li>Servicios</li><br /> <li>Acerca de nosotros</li><br /> <li>Contacto</li><br /> </ul><br /></div><br />
  74. 74. Ahora si:<br />Showtime!<br />
  75. 75. Agreguemos links a los<br /> ítems del listview role<br /><div data-role=“content” ><br /> <p>Hola mundo!</p><br /> <ul data-role=“listview”><br /> <li><a href=“productos.html”></a>Productos</li><br /> <li><a href=“servicios.html”></a>Servicios</li><br /> <li><a href=“acercaDe.html”></a>Acerca de nosotros</li><br /> <li><a href=“contacto.html”></a>Contacto</li><br /> </ul><br /> </div><br />
  76. 76. Ítems en acción!!<br />…Bueno casi<br />
  77. 77. Let’splay!!<br />Cambiemos los temas (CSS)<br /><div data-role=“content” data-theme=“a”><br /> <p>Hola mundo!</p><br /> <ul data-role=“listview” data-inset=“true” data-theme=“b”><br /> <li><a href=“productos.html”></a>Productos</li><br /> <li><a href=“servicios.html”></a>Servicios</li><br /> <li><a href=“acercaDe.html”></a>Acerca de nosotros</li><br /> <li><a href=“contacto.html”></a>Contacto</li><br /> </ul><br /> </div><br />
  78. 78. ¿Y como queda?<br />
  79. 79. ¿Y si le agregamos un par de botoncitos en el footer?<br />
  80. 80. Para usar el data-role footer, digo yo<br />
  81. 81. Agreguemos un par de botones al data-role:footer<br /><div data-role=“footer” ><br /><ahref="index.html" data-role="button" data-icon="delete">Eliminar</a><br /><ahref="index.html" data-role="button" data-icon="plus">Agregar</a><br /><ahref="index.html" data-role="button" data-icon="arrow-u">Subir</a><br /><ahref="index.html" data-role="button" data-icon="arrow-d">Bajar</a><br /></div><br />
  82. 82. Pueden ver el ejemplo en sus dispositivos móviles desde la siguiente URL:<br />
  83. 83. ¿Y ahora que?<br />
  84. 84. Ahora algunas recomendaciones ;)<br />
  85. 85.
  86. 86. Para mayor info de jQuery:<br />www.jquery.com<br />www.jqueryui.com<br />http://www.cristalab.com/tutoriales/tutorial-de-jquery-c214l/<br />http://www.desarrolloweb.com/manuales/manual-jquery.html<br />
  87. 87. Más sobre jQuerymobile:<br />www.jquerymobile.com<br />http://buildmobile.com/hello-jquery<br />-http://www.elated.com/articles/jquery-mobile-what-can-it-do-for-you/<br />http://www.quirksmode.org/presentations/USTourApril11/huge.pdf<br />http://oreilly.com/catalog/0636920020585<br />
  88. 88. ¿Te interesa el desarrollo móvil?<br />Participa de nuestras charlas en Imagemaker los días miércoles.<br />Mayor información en:<br />http://www.meetup.com/MobDev<br />
  89. 89. GRACIAS<br />POR SU AISTENCIA<br />POR: FELIPE HERNÁNDEZ R. <br />TWITTER:@FELIPEDEV<br />

×