Intro jQuery Mobile

  • 1,298 views
Uploaded on

Presentación de introducción a jQuery Mobile junto al grupo 7Talks en diferentes universidades.-

Presentación de introducción a jQuery Mobile junto al grupo 7Talks en diferentes universidades.-

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,298
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
61
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • \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

Transcript

  • 1. Introducción ajQuery Mobile Framework Por: @FelipeDev Seven
  • 2. ACERCA DEL AUTORDesarrollador de aplicaciones móviles en ImageMaker Miembro del consejo de ancianos del Encuentro Linux Organizador de www.MeetUp.com/MobDev @FELIPEDEVProfesor Taller de aplicaciones móviles en Instituto CIISA Miembro de FW Adamantiohttp://developer.adamantio.org/ Seven
  • 3. ¿Que esjQuery Mobile ? Seven
  • 4. Framework web paradispositivos 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 accesoDesarrollo 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 UIHerramientas y utilidades Seven
  • 30. Eso para la intro. Seven
  • 31. Características dejQuery 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 ennavegadores de escritorio! Seven
  • 46. ¿Y en que versión está? Seven
  • 47. Seven
  • 48. Integraciones Seven
  • 49. Adobe CS WordPress DrupalThe 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/kalexandersonBueno, 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
  • 80. http://www.flickr.com/photos/kalexandersonY todos felices 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.pdfhttp://oreilly.com/catalog/0636920020585 Seven
  • 83. Contacto7Talks@googlegroups.com @FelipeDevwww.MeetUp.com/MobDev Seven
  • 84. Slides disponibleswww.slidashare.net/FelipeDev Seven
  • 85. ¡Gracias por su asistencia! Seven