Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

jQuery Mobile - Desenvolvimento para dispositivos móveis

1,456 views

Published on

Palestra ministrada no Encontro de Tecnologia 2012 da Universidade Simonsen.

  • Be the first to comment

  • Be the first to like this

jQuery Mobile - Desenvolvimento para dispositivos móveis

  1. 1. jQuery MobileDesenvolvendo para dispositivos móveis
  2. 2. Pablo Garrido ???
  3. 3. O que é jQuery Mobile? Version 1.2.0 Final Touch-Optimized Web Framework for Smartphones & Tablets
  4. 4. Suporte
  5. 5. Por que mobile ? `
  6. 6. 6 bilhões depessoas nomundo possuemtelefone
  7. 7. + 1 bilhãoutilizamsmartphones
  8. 8. Por quê ?
  9. 9. Multidispositivo
  10. 10. Multiplataforma
  11. 11. Atualizações “real-time”
  12. 12. ????
  13. 13. E o melhor… Aplicações MOBILE não precisam ser testadas no Internet Explorer
  14. 14. Números 42,23% Fonte: http://trends.builtwith.com/javascript
  15. 15. HTML5 Doctype <!DOCTYPE html>
  16. 16. Data attribute reference data-role=“”
  17. 17. Structure<div data-role="page"> <div data-role="header”> Header </div> <div data-role="content"> Content </div> <div data-role="footer”> Footer </div></div>
  18. 18. SmartphonesUI Elements
  19. 19. Toolbar - Headers<div data-role="header"> <h1>PabloGP.com</h1></div> http://jquerymobile.com/demos/1.2.0/docs/toolbars/index.html
  20. 20. Buttons<a href="index.html" data-role="button">Link button</a><a href="index.html" data-role="button" data-icon="delete">Delete</a> http://jquerymobile.com/demos/1.2.0/docs/buttons/index.html
  21. 21. Input - Textarea<input type="text" name="name" id="basic" value=”" /><textarea name="textarea" id="textarea"></textarea> http://jquerymobile.com/demos/1.2.0/docs/forms/textinputs/
  22. 22. Slider<input type="range" name="slider-step" id="slider-step"value=”60" min="0" max="500" step="50" /> http://jquerymobile.com/demos/1.2.0/docs/forms/slider/
  23. 23. Listview<ul data-role="listview"> <li><a href="acura.html">Acura</a></li> <li><a href="audi.html">Audi</a></li> <li><a href="bmw.html">BMW</a></li> <li><a href="bmw.html">Cadillac</a></li> <li><a href="bmw.html”>Chrysler</a></li> <li><a href="bmw.html">Dogde</a></li></ul> http://jquerymobile.com/demos/1.2.0/docs/forms/slider/
  24. 24. data-theme=“” http://jquerymobile.com/test/docs/content/content-themes.html
  25. 25. data-transitional=“” http://jquerymobile.com/demos/1.2.0/docs/pages/page-transitions.html
  26. 26. ãonaassa
  27. 27. Mobile Page Structure<!DOCTYPE html><html><head> <title>Page Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script></head><body> ...content goes here...</body></html> http://jquerymobile.com/test/docs/pages/page-anatomy.html
  28. 28. index.html<body> <div data-role="page"> <div data-role="header"> <h1>Pablo Garrido</h1> </div> <div data-role="content" class="contet"> <p>It is a long established fact that a reader will be distracted by the readable content of apage when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, asopposed to using Content here, content here, making it look like readable English.</p> <br /> <ul data-role="listview"> <li><a href="index.html" data-transitional="slide"title="Home">Home</a></li> <li><a href="sobre.html" data-transitional="flow" title="">Sobre</a></li> <li><a href="contato.html" data-transitional="flip" title="">Contato</a></li> </ul> <br /> </div> <div data-role="footer"> <h3>PabloGP.com<br /> contato@pablogp.com<br /><br /> All Rights reserved </h3> </div> </div>
  29. 29. sobre.html<body> <div data-role="page"> <div data-role="header"> <a href="index.html" data-icon="home">Voltar</a> <h1>Sobre</h1> </div> <div data-role="content" class="contet"> <p>It is a long established fact that a reader will be distracted by the readable content of apage when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, asopposed to using Content here, content here, making it look like readable English.It is a long established fact that a reader will bedistracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-lessnormal distribution of letters, as opposed to using Content here, content here, making it look like readable English.</p><br /><br /> <ul data-role="listview"> <li><a href="index.html" data-transitional="slide"title="Home">Home</a></li> <li><a href="sobre.html" data-transitional="flow" title="">Sobre</a></li> <li><a href="contato.html" data-transitional="flip" title="">Contato</a></li> </ul> <br /> </div> <div data-role="footer"> <h3>PabloGP.com<br /> contato@pablogp.com<br /><br /> All Rights reserved </h3> </div> </div>
  30. 30. contato.html<table> <tr> <td>Nome:</td> <td> <input required type="text" name="nome" size="30" /> </td> </tr> <tr> <td>E-mail:</td> <td> <input type="email" required name="email" size="30" /> </td> </tr> <tr> <td>Assunto:</td> <td> <select size="30" required name="assunto" id=""class="select"> <optionvalue="Projetos">Projetos</option> <optionvalue="Palestras">Palestras</option> <optionvalue="Orçamento">Orçamento</option> </select> </td> </tr> <tr> <td>Idade:</td> <td> <input type="range" required min="1" max="100" /> </td> </tr> <tr> <td></td> <td><button type="submit">Enviar</button></td> </tr>
  31. 31. ThemeRoller ThemeRoller – jquerymobile.com/themeroller/
  32. 32. Codiqa Codiqa – codiqa.com
  33. 33. jQMGallery jQuery Mobile Gallery - jqmgallery.com
  34. 34. Bibliografias http://www.jqmovel.com.br/ http://shop.oreilly.com/product/0636920020585.do
  35. 35. Quando utilizar ? Pequenas aplicações Aplicação não exige funcionalidades nativas do dispositivo (acelerômetro, câmera, contatos, notificações, gps e etc) Quando precisar de algo rápido, bom e barato (principalmente)
  36. 36. “Os verdadeiros artistas criam coisas reais e que serão usadas” Steve JobsObrigado !! @devpablogp www.pablogp.com contato@pablogp.com github.com/devpablogp

×