Intro jQuery Mobile

1,792 views

Published on

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

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,792
On SlideShare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
72
Comments
0
Likes
2
Embeds 0
No embeds

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
  • Intro jQuery Mobile

    1. 1. Introducción ajQuery Mobile Framework Por: @FelipeDev Seven
    2. 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. 3. ¿Que esjQuery Mobile ? Seven
    4. 4. Framework web paradispositivos móviles,optimizado para dispositivos que responden a eventos de tipo “Touch” Seven
    5. 5. ¿Es el único FrameWork de este tipo? Seven
    6. 6. Sencha Touch jQTouch GWT Mobile XUI.js ZEPTO JOAPP Seven
    7. 7. Si, son bastantes.¡Y existen muchos más! Seven
    8. 8. ¿Tienen algo en común? Seven
    9. 9. HTML5 Seven
    10. 10. http://www.flickr.com/photos/kalexanderson La belleza de la web Seven
    11. 11. Jq... Jq... jQtouch? Seven
    12. 12. Y en esta esquina... Seven
    13. 13. jQuery Mobile es CrossPlatform Seven
    14. 14. jQTouch: Webkit Lover Seven
    15. 15. ¡Pero si iOS y Android usan WebKit! Seven
    16. 16. Psst! No todos usan iPhone o Android Seven http://www.flickr.com/photos/kalexanderson
    17. 17. Entonces, con WebKit...¿la historia se repite? Seven
    18. 18. if( == ) mySelf.quick(); Seven
    19. 19. Nuestra página debe lucir excelente en los diferentes dispositivos Seven
    20. 20. No creemos una página más! Seven
    21. 21. Entreguemos una experiencia Seven
    22. 22. Web:Sistema unificado fácil accesoDesarrollo simple Seven
    23. 23. Un código Seven
    24. 24. Todas las plataformas Seven
    25. 25. Aaaah... que bonito sería Seven
    26. 26. ¡Pero hay una solución! Seven
    27. 27. Construir sobre estándares Seven
    28. 28. ¡Y el Core de jQuery! Seven
    29. 29. Dispositivos móviles UIHerramientas y utilidades Seven
    30. 30. Eso para la intro. Seven
    31. 31. Características dejQuery Mobile framework Seven
    32. 32. Archivos livianos Seven
    33. 33. Pero ni tanto... Seven
    34. 34. Provee de interfaces móviles Seven
    35. 35. WEB Mobile Seven
    36. 36. Interfaces unificadas Seven
    37. 37. Accesible vía Landscape o portrait Seven
    38. 38. Utiliza CSS3 para layouts más fluidos Seven
    39. 39. Renderizado Seven
    40. 40. Soporte para eventos: Mouse Teclado Touch Seven
    41. 41. ¿Aplicaciones nativas con jQuery Mobile? Seven
    42. 42. Seven
    43. 43. Pero eso será para otra ocasión ;) Seven
    44. 44. Compatiblidad Seven
    45. 45. ¡Y también funciona ennavegadores de escritorio! Seven
    46. 46. ¿Y en que versión está? Seven
    47. 47. Seven
    48. 48. Integraciones Seven
    49. 49. Adobe CS WordPress DrupalThe m Project Seven
    50. 50. Beneficios de su utilización Seven
    51. 51. Facilita el desarrollo de UI Seven
    52. 52. Eventos personalizados Seven
    53. 53. Progressive enhancement Seven
    54. 54. Para dibujar una página “bonita”no necesito programa una sola línea Seven
    55. 55. Interfaces configuradas mediante etiquetas Seven
    56. 56. Y eso de teoría- Seven
    57. 57. ¡Pero no puede faltar lo más importante! Seven
    58. 58. http://www.flickr.com/photos/kalexandersonBueno, lo segundo más importante Seven
    59. 59. Guía paso a paso Seven
    60. 60. Documento HTML5 :)<!Doctype html><html>! <head>! ! <meta charset=“utf-8”/>!! ! <title>Ejemplo jQuery mobile</title>! </head>! <body>! </body></html> Seven
    61. 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. 62. data-role = page<body>! <div data-role=“page” >!! ! <!--/Contenido de la pagina jQuery mobile-- >! </div><!--/Fin de la página --></body> Seven
    63. 63. page Header Content Footer Seven
    64. 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. 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. 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. 67. ShowTime! Seven
    68. 68. ¬¬Nada muy interesante Seven
    69. 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. 70. Ahora si.ShowTime :) Seven
    71. 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. 72. Ítems en acción Bueno, casi... Seven
    73. 73. Let’s Play! Seven
    74. 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. 75. ¿Y como queda? Seven
    76. 76. ¡Botones! Seven
    77. 77. ...Y en el footer Seven
    78. 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. 79. Armamos una página en sólo minutos Seven
    80. 80. http://www.flickr.com/photos/kalexandersonY todos felices Seven
    81. 81. ¿Y ahora que?¿Por donde sigo? Seven
    82. 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. 83. Contacto7Talks@googlegroups.com @FelipeDevwww.MeetUp.com/MobDev Seven
    84. 84. Slides disponibleswww.slidashare.net/FelipeDev Seven
    85. 85. ¡Gracias por su asistencia! Seven

    ×