Desenvolvimento Indolor com JQuery Mobile

3,159 views

Published on

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

No Downloads
Views
Total views
3,159
On SlideShare
0
From Embeds
0
Number of Embeds
13
Actions
Shares
0
Downloads
49
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Desenvolvimento Indolor com JQuery Mobile

  1. 1. Please enable JavaScript to view this page properlySaturday, May 14, 2011
  2. 2. Bruno Oliveira @abstractj http://gitshelf.comSaturday, May 14, 2011
  3. 3. Desenvolvimento Indolor com JQuery MobileSaturday, May 14, 2011
  4. 4. Obrigado!Saturday, May 14, 2011
  5. 5. MobilidadeSaturday, May 14, 2011
  6. 6. ~ 205 M de aparelhos celulares ~ 85 M de computadores (teleco/sercomtel)Saturday, May 14, 2011
  7. 7. Valor agregadoSaturday, May 14, 2011
  8. 8. PlataformasSaturday, May 14, 2011
  9. 9. O cowboy! Java Windows Android iOS ME MobileSaturday, May 14, 2011
  10. 10. Java ME JavaFX #FAILSaturday, May 14, 2011
  11. 11. Windows MobileSaturday, May 14, 2011
  12. 12. Saturday, May 14, 2011
  13. 13. AndroidSaturday, May 14, 2011
  14. 14. DOX Desenvolvimento Orientado a XMLSaturday, May 14, 2011
  15. 15. iOSSaturday, May 14, 2011
  16. 16. #comofaz? FAX?!Saturday, May 14, 2011
  17. 17. Objective CSaturday, May 14, 2011
  18. 18. Simples?!#import <Foundation/Foundation.h>int main(int argc, const char argv[]){! NSAutoreleasePool *anAutoreleasePool = [[NSAutoreleasePool alloc]init];!! NSLog(@"Hello World");!! [anAutoreleasePool drain];! return 0;}Saturday, May 14, 2011
  19. 19. Problemas?Saturday, May 14, 2011
  20. 20. $$$$$$$$$$$$$$$$$$$$$$$$$$Saturday, May 14, 2011
  21. 21. Saturday, May 14, 2011
  22. 22. Saturday, May 14, 2011
  23. 23. Entregar valor > preciosimoSaturday, May 14, 2011
  24. 24. Wizards são tão simples!Saturday, May 14, 2011
  25. 25. As aparências enganam!Saturday, May 14, 2011
  26. 26. Alguém precisa pensar por você?Saturday, May 14, 2011
  27. 27. Solução?!Saturday, May 14, 2011
  28. 28. Pra que aplicações nativas?Saturday, May 14, 2011
  29. 29. Call me JQuery titanium Rocks! guy!Saturday, May 14, 2011
  30. 30. O que todo celular tem em comum?Saturday, May 14, 2011
  31. 31. BrowserSaturday, May 14, 2011
  32. 32. Safari Opera Android Browser BlackBerry Palm SymbianSaturday, May 14, 2011
  33. 33. Saturday, May 14, 2011
  34. 34. JavaScriptSaturday, May 14, 2011
  35. 35. MVCSaturday, May 14, 2011
  36. 36. MVCSaturday, May 14, 2011
  37. 37. MVCSaturday, May 14, 2011
  38. 38. Não seja cowboy!Saturday, May 14, 2011
  39. 39. JQuery MobileSaturday, May 14, 2011
  40. 40. Desenvolvedores 29 devs JQuerySaturday, May 14, 2011
  41. 41. Saturday, May 14, 2011
  42. 42. O que eu preciso? JQuery 86 KB (minified) JQuery Mobile JS 66 KB (minified) JQuery Mobile CSS 45 KB (minified) Total = 197 KBSaturday, May 14, 2011
  43. 43. Multiplataforma Cross DeviceSaturday, May 14, 2011
  44. 44. Estrutura básica<!DOCTYPE html><meta charset="utf-8"><head>! <title>Brazil JS</title>! <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />! <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>! <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>! <script type="text/javascript" src="experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script></head>Saturday, May 14, 2011
  45. 45. Estrutura básica<!DOCTYPE html><meta charset="utf-8"><head>! <title>Brazil JS</title>! <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />! <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>! <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>! <script type="text/javascript" src="experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script></head>Saturday, May 14, 2011
  46. 46. Estrutura básica<!DOCTYPE html><meta charset="utf-8"><head>! <title>Brazil JS</title>! <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />! <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>! <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>! <script type="text/javascript" src="experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script></head>Saturday, May 14, 2011
  47. 47. Estrutura básica<!DOCTYPE html><meta charset="utf-8"><head>! <title>Brazil JS</title>! <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />! <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>! <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>! <script type="text/javascript" src="experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script></head>Saturday, May 14, 2011
  48. 48. Saturday, May 14, 2011
  49. 49. Corpo da páginaSaturday, May 14, 2011
  50. 50. Corpo da página! <body>! ! <div data-role="page" id="foo">! ! !! ! ! <div data-role="header">! ! ! ! <h1>Header</h1>! ! ! </div>! ! !! ! ! <div data-role="content">!! ! ! ! <p>Conteúdo</p>! !! ! ! </div>! ! !! ! ! <div data-role="footer">! ! ! ! <h4>Footer</h4>! ! ! </div>! ! </div>! !! </body>Saturday, May 14, 2011
  51. 51. Corpo da página! <body>! ! <div data-role="page" id="foo">! ! !! ! ! <div data-role="header">! ! ! ! <h1>Header</h1>! ! ! </div>! ! !! ! ! <div data-role="content">!! ! ! ! <p>Conteúdo</p>! !! ! ! </div>! ! !! ! ! <div data-role="footer">! ! ! ! <h4>Footer</h4>! ! ! </div>! ! </div>! !! </body>Saturday, May 14, 2011
  52. 52. Corpo da página! <body>! ! <div data-role="page" id="foo">! ! !! ! ! <div data-role="header">! ! ! ! <h1>Header</h1>! ! ! </div>! ! !! ! ! <div data-role="content">!! ! ! ! <p>Conteúdo</p>! !! ! ! </div>! ! !! ! ! <div data-role="footer">! ! ! ! <h4>Footer</h4>! ! ! </div>! ! </div>! !! </body>Saturday, May 14, 2011
  53. 53. Corpo da página! <body>! ! <div data-role="page" id="foo">! ! !! ! ! <div data-role="header">! ! ! ! <h1>Header</h1>! ! ! </div>! ! !! ! ! <div data-role="content">!! ! ! ! <p>Conteúdo</p>! !! ! ! </div>! ! !! ! ! <div data-role="footer">! ! ! ! <h4>Footer</h4>! ! ! </div>! ! </div>! !! </body>Saturday, May 14, 2011
  54. 54. Corpo da página! <body>! ! <div data-role="page" id="foo">! ! !! ! ! <div data-role="header">! ! ! ! <h1>Header</h1>! ! ! </div>! ! !! ! ! <div data-role="content">!! ! ! ! <p>Conteúdo</p>! !! ! ! </div>! ! !! ! ! <div data-role="footer">! ! ! ! <h4>Footer</h4>! ! ! </div>! ! </div>! !! </body>Saturday, May 14, 2011
  55. 55. Touch LayoutSaturday, May 14, 2011
  56. 56. <!DOCTYPE html><meta charset="utf-8">! <html>! ! <head>! ! ! <title>Brazil JS</title>! ! ! <link ... />! ! ! <script src="..."></script>! ! </head>! ! <body>! ! ! <div data-role="header" data-theme="b">! ! ! ! <h1>Sábado</h1>! ! ! </div>! ! ! <div data-role="page" id="listing">! ! ! !! ! ! ! <div data-role="content">! ! ! ! ! <ol data-role="listview">! ! ! ! ! ! <li>7h00! Credenciamento</li>! ! ! ! ! ! <li>7h50! Abertura</li>! ! ! ! ! ! <li>8h00! Keynote David Herman </li>! ! ! ! ! ! <li>9h00! Keynote Marcelo Campos - Rocha Conhecendo oEngine, o servidor Javascript do ERP da UNUM.</li>! ! ! ! ! ! <li>10h00!Coffee Break</li>! ! ! ! ! ! ! ! ....! ! ! ! ! </ol>! ! ! ! </div>! ! ! </div>Saturday, May 14, 2011
  57. 57. <!DOCTYPE html><meta charset="utf-8">! <html>! ! <head>! ! ! <title>Brazil JS</title>! ! ! <link ... />! ! ! <script src="..."></script>! ! </head>! ! <body>! ! ! <div data-role="header" data-theme="b">! ! ! ! <h1>Sábado</h1>! ! ! </div>! ! ! <div data-role="page" id="listing">! ! ! !! ! ! ! <div data-role="content">! ! ! ! ! <ol data-role="listview">! ! ! ! ! ! <li>7h00! Credenciamento</li>! ! ! ! ! ! <li>7h50! Abertura</li>! ! ! ! ! ! <li>8h00! Keynote David Herman </li>! ! ! ! ! ! <li>9h00! Keynote Marcelo Campos - Rocha Conhecendo oEngine, o servidor Javascript do ERP da UNUM.</li>! ! ! ! ! ! <li>10h00!Coffee Break</li>! ! ! ! ! ! ! ! ....! ! ! ! ! </ol>! ! ! ! </div>! ! ! </div>Saturday, May 14, 2011
  58. 58. <!DOCTYPE html><meta charset="utf-8">! <html>! ! <head>! ! ! <title>Brazil JS</title>! ! ! <link ... />! ! ! <script src="..."></script>! ! </head>! ! <body>! ! ! <div data-role="header" data-theme="b">! ! ! ! <h1>Sábado</h1>! ! ! </div>! ! ! <div data-role="page" id="listing">! ! ! !! ! ! ! <div data-role="content">! ! ! ! ! <ol data-role="listview">! ! ! ! ! ! <li>7h00! Credenciamento</li>! ! ! ! ! ! <li>7h50! Abertura</li>! ! ! ! ! ! <li>8h00! Keynote David Herman </li>! ! ! ! ! ! <li>9h00! Keynote Marcelo Campos - Rocha Conhecendo oEngine, o servidor Javascript do ERP da UNUM.</li>! ! ! ! ! ! <li>10h00!Coffee Break</li>! ! ! ! ! ! ! ! ....! ! ! ! ! </ol>! ! ! ! </div>! ! ! </div>Saturday, May 14, 2011
  59. 59. FormsSaturday, May 14, 2011
  60. 60. ! ! ! ! <div data-role="content">! ! ! ! !! ! ! ! ! <form id="frmLogin">! ! ! ! ! ! <div data-role="fieldcontain">! ! ! ! ! ! ! <label for="email">! ! ! ! ! ! ! ! <em>* </em> Email: </label>! ! ! ! ! ! ! <input type="text" id="email"! ! ! ! ! ! ! name="email" class="required email" />! ! ! ! ! ! </div>! ! ! ! ! !! ! ! ! ! ! <div data-role="fieldcontain">! ! ! ! ! ! ! <label for="password">! ! ! ! ! ! ! ! <em>* </em>Senha: </label>! ! ! ! ! ! ! <input type="password" id="password"! ! ! ! ! ! ! name="password" class="required" />! ! ! ! ! ! </div>! ! ! ! ! !! ! ! ! ! ! <div class="ui-body ui-body-b">! ! ! ! ! ! ! <button class="btnLogin" type="submit"! ! ! ! ! ! ! ! data-theme="a">Login</button>! ! ! ! ! ! </div>! ! ! ! ! </form>! ! ! ! !! ! ! ! </div>Saturday, May 14, 2011
  61. 61. ! ! ! ! <div data-role="content">! ! ! ! !! ! ! ! ! <form id="frmLogin">! ! ! ! ! ! <div data-role="fieldcontain">! ! ! ! ! ! ! <label for="email">! ! ! ! ! ! ! ! <em>* </em> Email: </label>! ! ! ! ! ! ! <input type="text" id="email"! ! ! ! ! ! ! name="email" class="required email" />! ! ! ! ! ! </div>! ! ! ! ! !! ! ! ! ! ! <div data-role="fieldcontain">! ! ! ! ! ! ! <label for="password">! ! ! ! ! ! ! ! <em>* </em>Senha: </label>! ! ! ! ! ! ! <input type="password" id="password"! ! ! ! ! ! ! name="password" class="required" />! ! ! ! ! ! </div>! ! ! ! ! !! ! ! ! ! ! <div class="ui-body ui-body-b">! ! ! ! ! ! ! <button class="btnLogin" type="submit"! ! ! ! ! ! ! ! data-theme="a">Login</button>! ! ! ! ! ! </div>! ! ! ! ! </form>! ! ! ! !! ! ! ! </div>Saturday, May 14, 2011
  62. 62. ! ! ! ! <div data-role="content">! ! ! ! !! ! ! ! ! <form id="frmLogin">! ! ! ! ! ! <div data-role="fieldcontain">! ! ! ! ! ! ! <label for="email">! ! ! ! ! ! ! ! <em>* </em> Email: </label>! ! ! ! ! ! ! <input type="text" id="email"! ! ! ! ! ! ! name="email" class="required email" />! ! ! ! ! ! </div>! ! ! ! ! !! ! ! ! ! ! <div data-role="fieldcontain">! ! ! ! ! ! ! <label for="password">! ! ! ! ! ! ! ! <em>* </em>Senha: </label>! ! ! ! ! ! ! <input type="password" id="password"! ! ! ! ! ! ! name="password" class="required" />! ! ! ! ! ! </div>! ! ! ! ! !! ! ! ! ! ! <div class="ui-body ui-body-b">! ! ! ! ! ! ! <button class="btnLogin" type="submit"! ! ! ! ! ! ! ! data-theme="a">Login</button>! ! ! ! ! ! </div>! ! ! ! ! </form>! ! ! ! !! ! ! ! </div>Saturday, May 14, 2011
  63. 63. Saturday, May 14, 2011
  64. 64. ValidaçãoSaturday, May 14, 2011
  65. 65. Validação $("#formLogin").validate({! submitHandler: function(form) {! ! //Chamada pra alguma action! } });Saturday, May 14, 2011
  66. 66. SlidersSaturday, May 14, 2011
  67. 67. <div data-role="fieldcontain">! <label for="slider2">Beer mode:</label>!! <select name="slider2" id="slider2" data-role="slider">! ! <option value="off">Off</option>! ! <option value="on">On</option>! </select></div><div data-role="fieldcontain">! <label for="search">Search beer:</label>! <input type="search" name="search" id="search" value="" /></div><div data-role="fieldcontain">! <label for="slider">Grau alcoólico:</label>!! <input type="range" name="slider" id="slider" value="0" min="0"max="100" /></div>Saturday, May 14, 2011
  68. 68. <div data-role="fieldcontain">! <label for="slider2">Beer mode:</label>!! <select name="slider2" id="slider2" data-role="slider">! ! <option value="off">Off</option>! ! <option value="on">On</option>! </select></div><div data-role="fieldcontain">! <label for="search">Search beer:</label>! <input type="search" name="search" id="search" value="" /></div><div data-role="fieldcontain">! <label for="slider">Grau alcoólico:</label>!! <input type="range" name="slider" id="slider" value="0" min="0"max="100" /></div>Saturday, May 14, 2011
  69. 69. <div data-role="fieldcontain">! <label for="slider2">Beer mode:</label>!! <select name="slider2" id="slider2" data-role="slider">! ! <option value="off">Off</option>! ! <option value="on">On</option>! </select></div><div data-role="fieldcontain">! <label for="search">Search beer:</label>! <input type="search" name="search" id="search" value="" /></div><div data-role="fieldcontain">! <label for="slider">Grau alcoólico:</label>!! <input type="range" name="slider" id="slider" value="0" min="0"max="100" /></div>Saturday, May 14, 2011
  70. 70. Transição de páginas<div data-role="content">! ! <a href="transition-success.html" data-role="button" data-rel="dialog" data-transition="slide">slide</a></div>Saturday, May 14, 2011
  71. 71. Saturday, May 14, 2011
  72. 72. slidedown slideup fade flip popSaturday, May 14, 2011
  73. 73. Thumbnails<div data-role="content">! <ul data-role="listview">! ! <li><a href="index.html">! ! ! <img src="images/album-bb.jpg" />! ! ! <h3>Broken Bells</h3>! ! ! <p>Broken Bells</p>! ! </a></li>! </ul></div>Saturday, May 14, 2011
  74. 74. Thumbnails<div data-role="content">! <ul data-role="listview">! ! <li><a href="index.html">! ! ! <img src="images/album-bb.jpg" />! ! ! <h3>Broken Bells</h3>! ! ! <p>Broken Bells</p>! ! </a></li>! </ul></div>Saturday, May 14, 2011
  75. 75. ExperimentaisSaturday, May 14, 2011
  76. 76. DatepickerSaturday, May 14, 2011
  77. 77. Google MapsSaturday, May 14, 2011
  78. 78. Obrigado! @abstractj http://gitshelf.comSaturday, May 14, 2011

×