Your SlideShare is downloading. ×
jQueryMobile
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

jQueryMobile

1,937
views

Published on

Presentación de las tecnologías disponibles para el desarrollo de sitios web orientados a dispositivos móviles e introducción al desarrollo en jQueryMobile

Presentación de las tecnologías disponibles para el desarrollo de sitios web orientados a dispositivos móviles e introducción al desarrollo en jQueryMobile

Published in: Technology

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,937
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
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

Transcript

  • 1. Introducción
    jQuerymobile framework
    POR: FELIPE HERNÁNDEZ R.
    TWITTER:@FELIPEDEV
  • 2. ¿Qué es
    jQuerymobile?
  • 3. ¿Es el único
    framework de este tipo?
  • 4. Otros web frameworks
    SENCHA
    jQTouch
    GWT Mobile
    XUI.Js
    ZEPTO
    JOAPP
  • 5. Si, son muchos…
    y hay más!
  • 6. ¿Tienen siquiera algo en común?
  • 7. HTML5
  • 8. ¿Vi por ahí otro jQAlgo?
    Mmmm… pero tiene algo que ver jQtouch con jQuery Mobile?
  • 9. jQuerymobile
    v/s
    jQTouch
  • 10. jQuerymobile: CrossPlatform
  • 11. jQTouch: WebKitLover
  • 12. Pero si iOS y ANDROID tienen browser WebKit!
  • 13. Pssst!!
    ¡¡ No todos usan
    iOS o Android !!
  • 14. =
    Entonces…
    ¿La historia se repite?
  • 15. ¡Las personas no tienen por que preocuparse de compatibilidades de navegadores!
  • 16. No entreguemos una página más.
    ¡Entreguemos una experiencia señores!
  • 17. Web:
    Sistema unificado
    Acceso universal
    Fácil desarrollo
  • 18. Un código;
    Todas las plataformas.
  • 19. Aaah, que bonito sería…
  • 20. Pero hay una solución:
    Construir sobre estándares
  • 21. …y sobre el core de jQuery
    Móviles + Tablets UI
    Herramientas + utilidades
  • 22. Eso para la intro.
    Ahora… a lo que vinimos
  • 23. jQuery
    Aaaah… jQuery…
    Que tiempos aquellos…
  • 24. ¿jQuery?
  • 25. jQuery es:
    *Fácil de utilizar
    *POO JS Framework
    *Efectos dinámicos
    *AJAX
    *CSS
    *UI
    Y muchos, pero muchos
    Plug-Ins
  • 26. Core de jQuery
    $() = La función jQuery
    Accesorios de objetos
    Trabajo con datos
    Interoperabilidad
  • 27. Y claro… también los Plug-ins
  • 28. Código básico jQuery
    <head>
    <title>Ejemplo jQuery</title>
    <script src="Js/jquery-1.6.2.js”></script>
    <script>
    $(document).ready(function(){
    //Algún código a ejecutar
    });
    </script>
    </head>
  • 29. Funciones Callback
    O
    CallBack de funciones
  • 30. Callback
    en acción ;)
  • 31. Parcelación de jQuery
    *Core de jQuery
    *Selectores de jQuery
    *Métodos “Attributes”
    *Métodos de CSS
    *Eventos en jQuery
    *Desarrollo de Plug-Ins
    *Efectos en jQuery
    *Otros: jQuery UI
  • 32. ¿Alguna duda respecto de jQuery?
  • 33. AHORA SI !!!
    Ya era hora T.T
  • 34. Archivos livianos =D!
  • 35. Pero ni tanto
  • 36. Provee interface móviles
    MÓVIL
    WEB
  • 37. Interfaces unificadas
  • 38. Accesible via
    Portrait y/o Landscape
  • 39. Oye y… ¿tiene soporte para movimientos de tipo touch o mouse… o teclado?
  • 40. Por supuesto!
  • 41. ¿Y que hay de una aplicación nativa?
    ¿Podría utilizar jQuery Mobile para construir una aplicación nativa… y venderla enlosmarket?
    $_$
  • 42. Por supuesto!
  • 43. ¿Como? :S
  • 44.
  • 45. Pero eso será para otra ocasión ;)
  • 46. Retomamos entonces…
  • 47. Compatibilidad de
    jQuery Mobile
    con S.O. móviles
  • 48.
  • 49. También funciona en escritorio
  • 50. ¿Y en que versión está?
  • 51. Versión 1.0….beta
    Si, beta!
  • 52. ¿Alguna Integración?
  • 53. Integraciones con:
    Adobe CSS5
    DRUPAL
    WORDPRESS
    The M Project
  • 54. Utiliza CSS3 para layouts mas fluidos
  • 55. El renderizado dependerá del motor JS del navegador
  • 56. Mmm… bien, pero
    ¿En que me ayuda?
  • 57. Facilita el desarrollo
    De interfaces web móviles
  • 58. Provee eventos personalizados para detectar acciones específicas de los dispositivos móviles
  • 59. Utiliza
    Progressiveenhancement
  • 60. Utiliza temas…
    O en inglés themes
  • 61. Las interfaces son creadas o más bien dicho “configuradas ”mediante etiquetas.
  • 62. ¿No me creen?
  • 63. Hagamos entonces una iterfaz de jQuerymobile
    paso a paso
  • 64. Documento HTML5 ;)
    <!Doctypehtml>
    <html>
    <head>
    <meta charset=“utf-8”/>
    <title>Ejemplo jQuerymobile</title>
    </head>
    <body>
    </body>
    </html>
  • 65. jQuery + mobile + temas CSS
    <!Doctypehtml>
    <html>
    <head>
    <meta charset=“utf-8”/>
    <title>Ejemplo jQuerymobile</title>
    <meta name=“viewport” content=“width=device-width
    minimum-scale=1 maximum-scale=1initial-scale=1”/>
    <linkrel="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>
  • 66. data-role = page
    <body>
    <div data-role=“page” >
    <!--/Contenido de la pagina jQuerymobile-- >
    </div><!--/Fin de la página -->
    </body>
  • 67. Data que!!?
    data-role…
    Header
    Content
    Footer
  • 68. Más data-role
    <body>
    <div data-role=“page” >
    <div data-role=“header” >
    </div>
    <div data-role=“content” >
    </div>
    <div data-role=“footer” >
    </div>
    </div>
    </body>
  • 69. 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>
  • 70. 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>
  • 71. Showtime!
  • 72. Nada muy
    interesante…
  • 73. Agregamos un listview role
    <div data-role=“content” >
    <p>Hola mundo!</p>
    <uldata-role=“listview”>
    <li>Productos</li>
    <li>Servicios</li>
    <li>Acerca de nosotros</li>
    <li>Contacto</li>
    </ul>
    </div>
  • 74. Ahora si:
    Showtime!
  • 75. Agreguemos links a los
    ítems del listview role
    <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>
  • 76. Ítems en acción!!
    …Bueno casi
  • 77. Let’splay!!
    Cambiemos los temas (CSS)
    <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>
  • 78. ¿Y como queda?
  • 79. ¿Y si le agregamos un par de botoncitos en el footer?
  • 80. Para usar el data-role footer, digo yo
  • 81. Agreguemos un par de botones al data-role:footer
    <div data-role=“footer” >
    <ahref="index.html" data-role="button" data-icon="delete">Eliminar</a>
    <ahref="index.html" data-role="button" data-icon="plus">Agregar</a>
    <ahref="index.html" data-role="button" data-icon="arrow-u">Subir</a>
    <ahref="index.html" data-role="button" data-icon="arrow-d">Bajar</a>
    </div>
  • 82. Pueden ver el ejemplo en sus dispositivos móviles desde la siguiente URL:
  • 83. ¿Y ahora que?
  • 84. Ahora algunas recomendaciones ;)
  • 85.
  • 86. Para mayor info de jQuery:
    www.jquery.com
    www.jqueryui.com
    http://www.cristalab.com/tutoriales/tutorial-de-jquery-c214l/
    http://www.desarrolloweb.com/manuales/manual-jquery.html
  • 87. Más sobre jQuerymobile:
    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
  • 88. ¿Te interesa el desarrollo móvil?
    Participa de nuestras charlas en Imagemaker los días miércoles.
    Mayor información en:
    http://www.meetup.com/MobDev
  • 89. GRACIAS
    POR SU AISTENCIA
    POR: FELIPE HERNÁNDEZ R.
    TWITTER:@FELIPEDEV