Descargado 77 veces
Subido porFelipe Hernández Rivas
Intro jQuery Mobile
Este documento presenta una introducción al framework jQuery Mobile. Explica que jQuery Mobile es un framework para crear interfaces móviles optimizadas para dispositivos táctiles utilizando HTML5, CSS y jQuery. Proporciona características como interfaces unificadas para diferentes plataformas, compatibilidad con eventos táctiles y de teclado, y facilita el desarrollo de aplicaciones móviles. Además, incluye una guía paso a paso para crear una página básica con jQuery Mobile utilizando elementos como data-role, listas y botones
Intro jQuery Mobile
- 1. Introducción a jQuery MobileFramework Por: @FelipeDev Seven
- 2. ACERCA DEL AUTOR Desarrolladorde aplicaciones móviles en ImageMaker Miembro del consejo de ancianos del Encuentro Linux Organizador de www.MeetUp.com/MobDev @FELIPEDEV Profesor Taller de aplicaciones móviles en Instituto CIISA Miembro de FW Adamantio http://developer.adamantio.org/ Seven
- 3. ¿Que es jQuery Mobile? Seven
- 4. Framework web para dispositivosmóviles,optimizado para dispositivos que responden a eventos de tipo “Touch” Seven
- 5. ¿Es el únicoFrameWork de este tipo? Seven
- 6. Sencha Touch jQTouch GWT Mobile XUI.js ZEPTO JOAPP Seven
- 7. Si, son bastantes. ¡Yexisten muchos más! Seven
- 8. ¿Tienen algo encomún? Seven
- 9. HTML5 Seven
- 10. http://www.flickr.com/photos/kalexanderson La belleza de la web Seven
- 11. Jq... Jq... jQtouch? Seven
- 12. Y en estaesquina... Seven
- 13. jQuery Mobile esCrossPlatform Seven
- 14. jQTouch: Webkit Lover Seven
- 15. ¡Pero si iOSy Android usan WebKit! Seven
- 16. Psst! No todosusan iPhone o Android Seven http://www.flickr.com/photos/kalexanderson
- 17. Entonces, con WebKit... ¿lahistoria se repite? Seven
- 18. if( == ) mySelf.quick(); Seven
- 19. Nuestra página debelucir excelente en los diferentes dispositivos Seven
- 20. No creemos unapágina más! Seven
- 21.
- 22. Web: Sistema unificado fácil acceso Desarrollo simple Seven
- 23. Un código Seven
- 24. Todas las plataformas Seven
- 25. Aaaah... que bonitosería Seven
- 26. ¡Pero hay unasolución! Seven
- 27.
- 28. ¡Y el Corede jQuery! Seven
- 29. Dispositivos móviles UI Herramientasy utilidades Seven
- 30. Eso para laintro. Seven
- 31. Características de jQuery Mobileframework Seven
- 32. Archivos livianos Seven
- 33. Pero ni tanto... Seven
- 34. Provee de interfacesmóviles Seven
- 35. WEB Mobile Seven
- 36. Interfaces unificadas Seven
- 37. Accesible vía Landscapeo portrait Seven
- 38. Utiliza CSS3 paralayouts más fluidos Seven
- 39. Renderizado Seven
- 40. Soporte para eventos: Mouse Teclado Touch Seven
- 41. ¿Aplicaciones nativas con jQuery Mobile? Seven
- 42.
- 43. Pero eso serápara otra ocasión ;) Seven
- 44. Compatiblidad Seven
- 45. ¡Y también funcionaen navegadores de escritorio! Seven
- 46. ¿Y en queversión está? Seven
- 47.
- 48. Integraciones Seven
- 49. Adobe CS WordPress Drupal The m Project Seven
- 50. Beneficios de suutilización Seven
- 51. Facilita el desarrollode UI Seven
- 52. Eventos personalizados Seven
- 53. Progressive enhancement Seven
- 54. Para dibujar unapágina “bonita” no necesito programa una sola línea Seven
- 55. Interfaces configuradas mediante etiquetas Seven
- 56. Y eso deteoría- Seven
- 57. ¡Pero no puedefaltar lo más importante! Seven
- 58. http://www.flickr.com/photos/kalexanderson Bueno, lo segundo más importante Seven
- 59. Guía paso apaso Seven
- 60. Documento HTML5 :) <!Doctypehtml> <html> ! <head> ! ! <meta charset=“utf-8”/>! ! ! <title>Ejemplo jQuery mobile</title> ! </head> ! <body> ! </body> </html> Seven
- 61. jQuery + Mobile+ Css <!Doctype html> <html> ! <head> ! ! <meta charset=“utf-8”/>! ! ! <title>Ejemplo jQuery mobile</title> ! ! <meta name=“viewport” content=“width=device-width ! ! minimum-scale=1 maximum-scale=1 initial-scale=1”/>! ! ! <link rel="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> Seven
- 62. data-role = page <body> !<div data-role=“page” >! ! ! <!--/Contenido de la pagina jQuery mobile-- > ! </div><!--/Fin de la página --> </body> Seven
- 63. page Header Content Footer Seven
- 64. Mas Data-Role <body> ! <div data-role=“page” > ! ! <div data-role=“header” >! ! ! </div> ! ! <div data-role=“content” > ! ! </div> ! ! <div data-role=“footer” >! ! ! </div>! ! ! </div> </body> Seven
- 65. 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> Seven
- 66. Lista básica ! <divdata-role=“content” > ! ! ! <p>Hola mundo!</p> ! ! ! <ul> ! ! ! ! <li>Productos</li> ! ! ! ! <li>Servicios</li> ! ! ! ! <li>Acerca de nosotros</li> ! ! ! ! <li>Contacto</li> ! ! ! </ul> ! </div> Seven
- 67. ShowTime! Seven
- 68. ¬¬ Nada muy interesante Seven
- 69. Data-role=ListView <div data-role=“content” > !! ! <p>Hola mundo!</p> ! ! ! <ul data-role=“listview”> ! ! ! ! <li>Productos</li> ! ! ! ! <li>Servicios</li> ! ! ! ! <li>Acerca de nosotros</li> ! ! ! ! <li>Contacto</li> ! ! ! </ul> </div> Seven
- 70. Ahora si. ShowTime :) Seven
- 71. Agragando links <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> Seven
- 72. Ítems en acción Bueno, casi... Seven
- 73. Let’s Play! Seven
- 74. Cambiemos los temas <divdata-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> Seven
- 75. ¿Y como queda? Seven
- 76. ¡Botones! Seven
- 77. ...Y en elfooter Seven
- 78. data-role=”footer” <div data-role=“footer” > <a href="index.html" data-role="button" data-icon="delete">Eliminar</a> <a href="index.html" data-role="button" data-icon="plus">Agregar</a> <a href="index.html" data-role="button" data-icon="arrow-u">Subir</a> <a href="index.html" data-role="button" data-icon="arrow-d">Bajar</a> </div> Seven
- 79. Armamos una páginaen sólo minutos Seven
- 80.
- 81. ¿Y ahora que? ¿Pordonde sigo? Seven
- 82. Mayor información 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 Seven
- 83. Contacto 7Talks@googlegroups.com @FelipeDev www.MeetUp.com/MobDev Seven
- 84.
- 85. ¡Gracias por suasistencia! Seven
Notas del editor
- #2 \n
- #3 \n
- #4 \n
- #5 \n
- #6 \n
- #7 \n
- #8 \n
- #9 \n
- #10 \n
- #11 \n
- #12 \n
- #13 \n
- #14 \n
- #15 \n
- #16 \n
- #17 \n
- #18 \n
- #19 \n
- #20 \n
- #21 \n
- #22 \n
- #23 \n
- #24 \n
- #25 \n
- #26 \n
- #27 \n
- #28 \n
- #29 \n
- #30 \n
- #31 \n
- #32 \n
- #33 \n
- #34 \n
- #35 \n
- #36 \n
- #37 \n
- #38 \n
- #39 \n
- #40 \n
- #41 \n
- #42 \n
- #43 \n
- #44 \n
- #45 \n
- #46 \n
- #47 \n
- #48 \n
- #49 \n
- #50 \n
- #51 \n
- #52 \n
- #53 \n
- #54 \n
- #55 \n
- #56 \n
- #57 \n
- #58 \n
- #59 \n
- #60 \n
- #61 \n
- #62 \n
- #63 \n
- #64 \n
- #65 \n
- #66 \n
- #67 \n
- #68 \n
- #69 \n
- #70 \n
- #71 \n
- #72 \n
- #73 \n
- #74 \n
- #75 \n
- #76 \n
- #77 \n
- #78 \n
- #79 \n
- #80 \n
- #81 \n
- #82 \n
- #83 \n
- #84 \n
- #85 \n
- #86 \n