Intro jQuery Mobile
•Descargar como KEY, PDF•
2 recomendaciones•1,252 vistas
Presentación de introducción a jQuery Mobile junto al grupo 7Talks en diferentes universidades.-
Recomendados
Más contenido relacionado
Destacado
Destacado (16)
Similar a Intro jQuery Mobile
Similar a Intro jQuery Mobile (20)
Más de Felipe Hernández Rivas
Último
Último (20)
Intro jQuery Mobile
- 1. Introducción a jQuery Mobile Framework Por: @FelipeDev Seven
- 2. ACERCA DEL AUTOR Desarrollador de 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 dispositivos móviles,optimizado para dispositivos que responden a eventos de tipo “Touch” Seven
- 5. ¿Es el único FrameWork de este tipo? Seven
- 6. Sencha Touch jQTouch GWT Mobile XUI.js ZEPTO JOAPP Seven
- 7. Si, son bastantes. ¡Y existen muchos más! Seven
- 8. ¿Tienen algo en comú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 esta esquina... Seven
- 13. jQuery Mobile es CrossPlatform Seven
- 14. jQTouch: Webkit Lover Seven
- 15. ¡Pero si iOS y Android usan WebKit! Seven
- 16. Psst! No todos usan iPhone o Android Seven http://www.flickr.com/photos/kalexanderson
- 17. Entonces, con WebKit... ¿la historia se repite? Seven
- 18. if( == ) mySelf.quick(); Seven
- 19. Nuestra página debe lucir excelente en los diferentes dispositivos Seven
- 20. No creemos una página más! Seven
- 21. Entreguemos una experiencia Seven
- 22. Web: Sistema unificado fácil acceso Desarrollo simple Seven
- 23. Un código Seven
- 24. Todas las plataformas Seven
- 25. Aaaah... que bonito sería Seven
- 26. ¡Pero hay una solución! Seven
- 27. Construir sobre estándares Seven
- 28. ¡Y el Core de jQuery! Seven
- 29. Dispositivos móviles UI Herramientas y utilidades Seven
- 30. Eso para la intro. Seven
- 31. Características de jQuery Mobile framework Seven
- 32. Archivos livianos Seven
- 33. Pero ni tanto... Seven
- 34. Provee de interfaces móviles Seven
- 35. WEB Mobile Seven
- 36. Interfaces unificadas Seven
- 37. Accesible vía Landscape o portrait Seven
- 38. Utiliza CSS3 para layouts más fluidos Seven
- 39. Renderizado Seven
- 40. Soporte para eventos: Mouse Teclado Touch Seven
- 41. ¿Aplicaciones nativas con jQuery Mobile? Seven
- 42. Seven
- 43. Pero eso será para otra ocasión ;) Seven
- 44. Compatiblidad Seven
- 45. ¡Y también funciona en navegadores de escritorio! Seven
- 46. ¿Y en que versión está? Seven
- 47. Seven
- 48. Integraciones Seven
- 49. Adobe CS WordPress Drupal The m Project Seven
- 50. Beneficios de su utilización Seven
- 51. Facilita el desarrollo de UI Seven
- 52. Eventos personalizados Seven
- 53. Progressive enhancement Seven
- 54. Para dibujar una página “bonita” no necesito programa una sola línea Seven
- 55. Interfaces configuradas mediante etiquetas Seven
- 56. Y eso de teoría- Seven
- 57. ¡Pero no puede faltar lo más importante! Seven
- 58. http://www.flickr.com/photos/kalexanderson Bueno, lo segundo más importante Seven
- 59. Guía paso a paso Seven
- 60. Documento HTML5 :) <!Doctype html> <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 ! <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> 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 <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> Seven
- 75. ¿Y como queda? Seven
- 76. ¡Botones! Seven
- 77. ...Y en el footer 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ágina en sólo minutos Seven
- 81. ¿Y ahora que? ¿Por donde 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
- 85. ¡Gracias por su asistencia! Seven
Notas del editor
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n