El androide y la telaraña         móvil             Adrián Catalán  adriancatalan@elementalgeeks.com                 @ykro
Demos enhttp://ykro.net     /jqm
¿qué esjQueryMobile?
diversión “a lo jQuery” para móviles
Librería de widgets
Soporte para eventos
UI Unificada
Me vuelvesuperhéroe
Personalizable con temas
Soporte• A-grade – Full enhanced experience with Ajax-  based animated page transitions.• B-grade – Enhanced experience ex...
Soporte• A-grade – Full enhanced experience with  Ajax-based animated page transitions.  –Android 2.1 – 2.3  –Android Hone...
¿qué me    proveejQueryMobile?
Elementos de interface
¿qué NO me   proveejQueryMobile?
Geo / Canvas / Storage
¿cómo usojQueryMobile?
Dirección de loopback es 10.0.2.2
¿Algo más osólo botones?
Listas
Forms
Eventos
El androide y la telaraña móvil
El androide y la telaraña móvil
El androide y la telaraña móvil
El androide y la telaraña móvil
El androide y la telaraña móvil
El androide y la telaraña móvil
El androide y la telaraña móvil
El androide y la telaraña móvil
El androide y la telaraña móvil
El androide y la telaraña móvil
El androide y la telaraña móvil
El androide y la telaraña móvil
El androide y la telaraña móvil
El androide y la telaraña móvil
El androide y la telaraña móvil
El androide y la telaraña móvil
El androide y la telaraña móvil
El androide y la telaraña móvil
El androide y la telaraña móvil
El androide y la telaraña móvil
El androide y la telaraña móvil
El androide y la telaraña móvil
El androide y la telaraña móvil
Upcoming SlideShare
Loading in …5
×

El androide y la telaraña móvil

1,007 views

Published on

Presentación sobre jQuery Mobile para Cultura Android Guatemala

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

  • Be the first to like this

No Downloads
Views
Total views
1,007
On SlideShare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
13
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Forget What you think you know
  • <html> <head> <title>Hello World</title> <script src="sencha-touch.js" type="text/javascript"></script> <link href="sencha-touch.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> new Ext.Application({ launch: function() { new Ext.Panel({fullscreen: true, html: 'HolaMundo!' }); } }); </script> </head> <body></body></html>
  • <html> <head> <title>Page Title</title> <link rel="stylesheet" href="jquery.mobile.css" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.mobile.js"></script> </head> <body> <div data-role="page"> <div data-role="content"> <p>Hello World.</p> </div> </div> </body></html>
  • <script type="text/javascript" language="javascript"> $(document).bind("mobileinit", function() { $.extend( $.mobile, { key: value }); } );</script>
  • <div data-role="page"> <div data-role="content"> <p>Hello World.</p> </div></div>
  • <div data-role="page"> <div data-role="header"> <h1>Titulo</h1> </div> <div data-role="content"> <p>Contenido</p> </div> <div data-role="footer"> <h4>Page Footer</h4> </div></div>
  • <a href="#" data-role="button">soy un botón</a><a href="#tres" data-rel="dialog">diálogo</a>
  • <a href= "# " data-role="button" data-icon="arrow-l"> arrow-l</a>
  • <a href="#" data-role="button" data-icon="plus" data-iconpos="top"> plus</a>
  • <ul data-role="listview"> <li>Hugo</li> <li>Paco</li> <li>Luis</li> </ul>
  • <ul data-role="listview" data-inset="true" data-filter="true"> <li><a href="#nx1">Nexus One</a></li> <li><a href="#nxs">Nexus S</a></li> <li><a href="#gn">Galaxy Nexus</a></li></ul>
  • <div data-role="fieldcontain"> <label for="comments"> Comentarios:</label> <textarea name="comments" id="comments"></textarea></div>
  • <div data-role="fieldcontain"> <fieldset data-role="controlgroup"> <legend>Midía de la semanafavorito</legend> <input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" /> <label for="radio-choice-1">Lunes</label> </fieldset></div>
  • <div data-role="fieldcontain"> <fieldset data-role="controlgroup" data-type="horizontal"> <legend>Midía de la semanafavorito</legend> <input type="radio" name="radio-choice-1a" id="radio-choice-1a" value="choice-1" checked="checked" /> <label for="radio-choice-1a">Lunes</label> </fieldset></div>
  • <div data-role="fieldcontain"> <fieldset data-role="controlgroup”> <legend>Midía de la semanafavorito</legend> <input type="checkbox" name="cb-choice-1a" id="cb-choice-1a" value="choice-1" checked="checked" /> <label for="cb-choice-1a">Lunes</label> </fieldset></div>
  • <div data-role="fieldcontain"> <fieldset data-role="controlgroup" data-type="horizontal"> <legend>Midía de la semanafavorito</legend> <input type="checkbox" name="cb-choice-1a" id="cb-choice-1a" value="choice-1" checked="checked" /> <label for="cb-choice-1a">Lunes</label> </fieldset></div>
  • <script type="text/javascript" language="javascript"> $("#uno").live("tap", function(e) { $("#test").html("Detectadoevento de tap"); });</script><div data-role="page" id="uno"><p id="test">tap, tap, tap</p>
  • $("#uno").live("swipe", function(e) { $("#test").append("Swipe<br/>");});$("#uno").live("swipeleft", function(e) { $("#test").append("Izquierda<br/>");});
  • $(document).ready(function() { $(window).bind("orientationchange", function(e) { $("#headerText").html(e.orientation); if(e.orientation == "portrait") { $("#small").hide(); $("#fat").show(); } else { $("#small").show(); $("#fat").hide(); } }); });
  • El androide y la telaraña móvil

    1. 1. El androide y la telaraña móvil Adrián Catalán adriancatalan@elementalgeeks.com @ykro
    2. 2. Demos enhttp://ykro.net /jqm
    3. 3. ¿qué esjQueryMobile?
    4. 4. diversión “a lo jQuery” para móviles
    5. 5. Librería de widgets
    6. 6. Soporte para eventos
    7. 7. UI Unificada
    8. 8. Me vuelvesuperhéroe
    9. 9. Personalizable con temas
    10. 10. Soporte• A-grade – Full enhanced experience with Ajax- based animated page transitions.• B-grade – Enhanced experience except without Ajax navigation features.• C-grade – Basic, non-enhanced HTML experience that is still functional
    11. 11. Soporte• A-grade – Full enhanced experience with Ajax-based animated page transitions. –Android 2.1 – 2.3 –Android Honeycomb – Apple iOS 3.2 – 5.0 – Windows Phone 7 - 7.5 – Blackberry 6.0 – Blackberry 7 – Blackberry Playbook
    12. 12. ¿qué me proveejQueryMobile?
    13. 13. Elementos de interface
    14. 14. ¿qué NO me proveejQueryMobile?
    15. 15. Geo / Canvas / Storage
    16. 16. ¿cómo usojQueryMobile?
    17. 17. Dirección de loopback es 10.0.2.2
    18. 18. ¿Algo más osólo botones?
    19. 19. Listas
    20. 20. Forms
    21. 21. Eventos

    ×