jquery Mobile for dummies

Transcription

1 jquery Mobile for dummies (featuring AC/DC's Let there be rock) Daniel de la danimataonrails.blogspot.com camerawc.guatdefak.com yumit.com/danimata

2 In the beginning, back in nineteen fifty five Rails 3 jquery / jquery-ui Restful API Base de clientes

3 Man didn't know 'bout a rock 'n' roll show 'N all that jive mobile.facturagem.com Tecnología a elegir Interfaz móvil API demo *** 1 persona / 2 semanas *** Web vs App nativa

4 The white man had the schmaltz, The black man had the blues alternativas Spine.js / Backbone.js Sencha Touch jquery Mobile JQTouch *** Titanium PhoneGap

5 No one knew what they were gonna do but Tschaikovsky had the news entorno Windows IDE = [consola, notepad++, gimp] conocimiento previo, puesta en marcha rápida jquery / jquery UI soporte, documentación, apoyo jquerymobile.com y... no tengo que molar

6 He said... jquery and jquery UI Compatible (A, B, C) HTML5 Ligero / Modular Progressive Enhancement Ajax Navigation / One page apps ThemeRoller

7 (silence) Ejemplos Todo y más en

8 Let there be sound... <!DOCTYPE html> <html> <head> <title>este es mi título (que luego igual no se ve)</title> <meta name="viewport" content="width=device-width, initialscale=1"> <link rel="stylesheet" href=" rc.1/jquery.mobile rc.1.min.css" /> <script src=" <script src=" rc.1/jquery.mobile rc.1.min.js"></script> </head> <body>... Y este es mi contenido... </body> </html>

9 and there was sound

10 <div data-role="page"> Let there be light... <div data-role="header"> <h1>cabecera de la página</h1> </div> <div data-role="content"> <p>contenido de la página</p> </div> <div data-role="footer"> <h4>pie de página</h4> </div> </div>

11 ...and there was light

12 Let there be drums... <div data-role="page" id="one" data-title="uno"> <div data-role="header" dataposition="fixed"> <h1>uno</h1> </div>

13 ...and there was drums

14 Let there be guitar... <div data-role="page" id="one" datatitle="uno"> <div data-role="header" dataposition="fixed"> <h1>uno</h1> </div> <div data-role="page" id="two"...>... <p><a href="#jander" data-rel="back"> volver</a></p>... <div data-role="page" id="three"...>... <p><a href="#one" datadirection="reverse">volver</a></p>... <div data-role="page" id="pop"...>... <div data-role="content"> <p><a href="#one">volver</a></p> <p><a href="#jander" data-rel="back">volver </a></p> <p><a href="#one" data-direction="reverse"> volver</a></p> <p><a href="#klander" onclick="$('.uidialog').dialog('close'); return false;"> cerrar</a></p>...

15 ...and there was guitar

16 Let there be Rock!

17 (guitar solo) Transiciones y modales <a href="popup.html" data-transition="pop">pop it</a> <a href="alert.html" data-rel="dialog">alert!</a> $mobile.defaultpagetransition = 'pop'; $mobile.defaultpagetransition = 'slide'; ['fade', 'pop', 'flip', 'turn', 'flow', 'slide', 'slideup', slidedown'] $.mobile.changepage('#id'); Precarga <a href="prefetchthispage.html" data-prefetch>enlace</a> $.mobile.loadpage( pageurl, { showloadmsg: false } );

18 And it came to pass that rock 'n' roll was born Botones I Tags button, input[type=button] e input[type=submit] reciben estilo automáticamente $('[type='submit']').button(); //just in case Los enlaces pueden coger el mismo estilo <a href="index.html" data-role="button">ir</a> data-corners="true false" data-inline="true false" data-shadow="true false" data-mini="true false" Algunas opciones

19 All across the land every rockin' band Botones II Iconos predefinidos y customizables <a href="index.html" data-icon="delete">ir</a> Predefinidos arrow-r, arrow-l, arrow-u, arrow-d, delete, plus, minus, check, gear, refresh, forward, back, grid, star, alert, home, search Algunas opciones data-iconpos="left right bottom top notext" data-iconshadow="true false"

20 Was blowin' up a storm Botones III Grupos <div data-role="controlgroup"> <a href="#index" data-role="button">yes</a> <a href="#index" data-role="button">no</a> <a href="#index" data-role="button">maybe</a> </div> data-type="horizontal" Horizontal

21 The guitar man got famous,the business man got rich

22 And in every bar there was a superstar Header Toolbar <div data-role="header" data-position="fixed"> <a href="#none" data-icon="back">volver</a> <h1>hader bar</h1> <a href="#none" data-icon="forward">seguir</a> </div> class="ui-btn-right" Algunas opciones

23 With a seven year itch Footer Toolbar <div data-role="footer" data-position="fixed" class="ui-bar"> <a href="index.html" data-role="button" data-icon="arrowu">subir</a> <a href="index.html" data-role="button" data-icon="arrowd">bajar</a> <a href="index.html" data-role="button" data-icon="arrowl">izquierda</a> <a href="index.html" data-role="button" data-icon="arrowr">derecha</a> </div> Algunas opciones <div data-role="controlgroup" data-type="horizontal">

24 There was fifteen million fingers Navbar <div data-role="navbar"> <ul> <li><a href="#none" data-role="button" data-icon="plus" class="ui-btn-active">añadir</a></li> <li><a href="#none" data-role="button" data-icon="minus"> eliminar</a></li> <li><a href="#none" data-role="button" data-icon="check"> aceptar</a></li> </ul> </div> Se pueden incluir en header y footer, y añadir otras opciones a los botones

25 Learnin' how to play

26 And you could hear the fingers pickin' Listas <ul data-role="listview"> <li><a href="#one">uno</a></li> <li><a href="#two">dos</a></li> <li><a href="#three">tres</a></li> </ul> Numeradas <ol data-role="listview">...</ol> Separadores <li data-role="list-divider">...</li> Filtro <ul data-role="listview" data-filter="true">...</ul>

27 And this is what they had to say

28 Let there be light Formularios I <form action="#" method="post"> <div data-role="fieldcontain" class="ui-hide-label"> <label for="login">login</label> <input type="text" name="login" id="login" value="" placeholder="login"/> </div> <div data-role="fieldcontain" class="ui-hide-label"> <label for="password">password</label> <input type="password" name="password" id="password" value="" placeholder="password"/> </div> <div data-role="fieldcontain" class="button"> <button type="submit">acceder</button> </div> </form>

29 sound Formularios II <input type="text" name="a" id="a" value="" placeholder="text input"/> <textarea name="b" id="b" value="" placeholder="text area"></textarea> <input type="search" name="c" id="c" value="" /> <input type=" " name="e" id="e" value="" placeholder=" "/> <input type="tel" name="t" id="t" value="" placeholder="teléfono"/> <select name="z" id="z"> <option value="s">pequeño</option> <option value="m">mediano</option> <option value="l">grande</option> </select>

30 drums Formularios III <select name="b" id="b" data-role="slider"> <option value="off">nole</option> <option value="on">síle</option> </select> <input type="range" name="a" id="a" value="15" min="0" max="100" step="5" data-highlight="true"/> <input type="checkbox" name="d" id="d"/> <div data-role="controlgroup"> <input type="radio" name="r1" id="c1" value="1" checked="checked" /> <label for="c1">piedra</label> <input type="radio" name="r1" id="c2" value="2" /> <label for="c2">papel</label> <input type="radio" name="r1" id="c3" value="3" /> <label for="c3">tijera</label> </div>

31 and guitar

32 Let there be Rock!

33 (guitar solo) Markup <form action="#" method="post"> <input type="hidden" name="format" id="format" value="json"/> <input type="hidden" name="api_version" id="api_version" value="1"/> <div data-role="fieldcontain" class="ui-hide-label"> <label for="login">login</label> <input type="text" name="login" id="login" value="" placeholder="login"/> </div> <div data-role="fieldcontain" class="ui-hide-label"> <label for="password">password</label> <input type="password" name="password" id="password" value="" placeholder="password"/> </div> <div data-role="fieldcontain" class="button"> <button type="submit">acceder</button> </div> </form>

34 (Angus' on the floor) $("#login-form").submit(function(event){ event.preventdefault(); $.ajax(' { type: 'POST', datatype: 'json', cache: false, data: $(this).serialize(), success: function(data) { }, error: function(){ } } ); Js

35 (Angus' flying)

36 One night in a club called the Shakin' Hand CORS cross origin resource sharing El navegador envía una petición OPTIONS (pide permiso) El servidor la recibe, toma una decisión y la envía (permisos, recursos, verbos, expiry...) Si el servidor concede permiso, el navegador vuelve a enviar a petición Respuesta headers['access-control-allow-origin'] = '*' headers['access-control-allow-methods'] = 'POST, GET, OPTIONS, DELETE, PUT' headers['access-control-allow-headers'] = '*' headers['access-control-max-age'] = ' '

37 There was a 42 decibel rockin' band json "user": { "name": "Daniel de la Mata Lara", " ": "[email protected]", "locale": "es", "api_key" : "995d79acc48864cf c5a9d0d5e97102dc8", "links": [ {"rel": "session", "uri": " "methods": "GET, POST, DESTROY"}, {"rel": "account", "uri": " daniel-de-la-mata-lara", "methods": "GET, PUT"}, {"rel": "clients", "uri": " daniel-de-la-mata-lara/clients", "methods": "GET, POST"}, {"rel": "invoices", "uri": " daniel-de-la-mata-lara/invoices", "methods": "GET, POST"},... ],... }

38 And the music was good, and the music was loud memoria success: function(data) { localstorage.setitem('user_data_api_key', data.user.api_key); localstorage.setitem('user_data_name', data.user.name); var uri = geturibyrel(data.user.links, 'session'); if(uri){ localstorage.setitem('user_data_session_url', uri); } uri = geturibyrel(data.user.links, 'account'); if(uri){ localstorage.setitem('user_data_account_url', uri); }... } acceso localstorage.user_data_api_key if(localstorage.user_data_name!= null){...} localstorage.clear();

39 And the singer turned and he said to the crowd... otras cosillas Theming Analytics Controlar eventos click PhoneGap Generación de aplicaciones nativas %20jQueryMobile

40 Let there be Rock!!!!

41 Bonus track Desconferencia 12-mayo-2012 API REST Concurso BBQ & Beer

42 Salud y rocanrol Chas Gracias