jQuery Mobile - Desenvolvimento para dispositivos móveis

1,190
-1

Published on

Palestra ministrada no Encontro de Tecnologia 2012 da Universidade Simonsen.

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,190
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

×