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