Intro jQuery Mobile
•Als KEY, PDF herunterladen•
2 gefällt mir•1,252 views
Presentación de introducción a jQuery Mobile junto al grupo 7Talks en diferentes universidades.-
Empfohlen
Weitere ähnliche Inhalte
Andere mochten auch
Andere mochten auch (16)
Ähnlich wie Intro jQuery Mobile
Ähnlich wie Intro jQuery Mobile (20)
Mehr von Felipe Hernández Rivas
Mehr von Felipe Hernández Rivas (7)
Kürzlich hochgeladen
Kürzlich hochgeladen (10)
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
Hinweis der Redaktion
- \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