Desenvolvimento Indolor com JQuery Mobile
?
3 likes?1,144 views
The document discusses using jQuery Mobile to build mobile web applications. It provides the basic structure for a jQuery Mobile site including linking to the necessary CSS and JavaScript files. It demonstrates how to add pages, headers, content sections and footers using the data attributes of jQuery Mobile. The presentation emphasizes that jQuery Mobile allows building sites that work across different mobile platforms in a simple way.
![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](https://image.slidesharecdn.com/jquerymobile-110514112231-phpapp02/85/Desenvolvimento-Indolor-com-JQuery-Mobile-18-320.jpg)
Desenvolvimento Indolor com JQuery Mobile
- 1. Please enable JavaScript to view this page properly Saturday, May 14, 2011
- 2. Bruno Oliveira @abstractj http://gitshelf.com Saturday, May 14, 2011
- 3. Desenvolvimento Indolor com JQuery Mobile Saturday, May 14, 2011
- 4. Obrigado! Saturday, May 14, 2011
- 5. Mobilidade Saturday, May 14, 2011
- 6. ~ 205 M de aparelhos celulares ~ 85 M de computadores (teleco/sercomtel) Saturday, May 14, 2011
- 7. Valor agregado Saturday, May 14, 2011
- 8. Plataformas Saturday, May 14, 2011
- 9. O cowboy! Java Windows Android iOS ME Mobile Saturday, May 14, 2011
- 10. Java ME JavaFX #FAIL Saturday, May 14, 2011
- 11. Windows Mobile Saturday, May 14, 2011
- 12. Saturday, May 14, 2011
- 13. Android Saturday, May 14, 2011
- 14. DOX Desenvolvimento Orientado a XML Saturday, May 14, 2011
- 15. iOS Saturday, May 14, 2011
- 16. #comofaz? FAX?! Saturday, May 14, 2011
- 17. Objective C Saturday, May 14, 2011
- 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. Problemas? Saturday, May 14, 2011
- 21. Saturday, May 14, 2011
- 22. Saturday, May 14, 2011
- 23. Entregar valor > preciosimo Saturday, May 14, 2011
- 24. Wizards s?o t?o simples! Saturday, May 14, 2011
- 25. As apar¨ºncias enganam! Saturday, May 14, 2011
- 26. Algu¨¦m precisa pensar por voc¨º? Saturday, May 14, 2011
- 27. Solu??o?! Saturday, May 14, 2011
- 28. Pra que aplica??es nativas? Saturday, May 14, 2011
- 29. Call me JQuery titanium Rocks! guy! Saturday, May 14, 2011
- 30. O que todo celular tem em comum? Saturday, May 14, 2011
- 31. Browser Saturday, May 14, 2011
- 32. Safari Opera Android Browser BlackBerry Palm Symbian Saturday, May 14, 2011
- 33. Saturday, May 14, 2011
- 34. JavaScript Saturday, May 14, 2011
- 35. MVC Saturday, May 14, 2011
- 36. MVC Saturday, May 14, 2011
- 37. MVC Saturday, May 14, 2011
- 38. N?o seja cowboy! Saturday, May 14, 2011
- 39. JQuery Mobile Saturday, May 14, 2011
- 40. Desenvolvedores 29 devs JQuery Saturday, May 14, 2011
- 41. Saturday, May 14, 2011
- 42. O que eu preciso? JQuery 86 KB (mini?ed) JQuery Mobile JS 66 KB (mini?ed) JQuery Mobile CSS 45 KB (mini?ed) Total = 197 KB Saturday, May 14, 2011
- 43. Multiplataforma Cross Device Saturday, May 14, 2011
- 44. Estrutura b¨¢sica <!DOCTYPE html> <meta charset="utf-8"> <head> ! <title>Brazil JS</title> ! <link rel="stylesheet" href=/slideshow/desenvolvimento-indolor-com-jquery-mobile/7964756/"http:/code.jquery.com/mobile/1.0a4.1/ jquery.mobile-1.0a4.1.min.css" /> ! <script type="text/javascript" src=/slideshow/desenvolvimento-indolor-com-jquery-mobile/7964756/"http:/code.jquery.com/ jquery-1.5.min.js"></script> ! <script type="text/javascript" src=/slideshow/desenvolvimento-indolor-com-jquery-mobile/7964756/"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. Estrutura b¨¢sica <!DOCTYPE html> <meta charset="utf-8"> <head> ! <title>Brazil JS</title> ! <link rel="stylesheet" href=/slideshow/desenvolvimento-indolor-com-jquery-mobile/7964756/"http:/code.jquery.com/mobile/1.0a4.1/ jquery.mobile-1.0a4.1.min.css" /> ! <script type="text/javascript" src=/slideshow/desenvolvimento-indolor-com-jquery-mobile/7964756/"http:/code.jquery.com/ jquery-1.5.min.js"></script> ! <script type="text/javascript" src=/slideshow/desenvolvimento-indolor-com-jquery-mobile/7964756/"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. Estrutura b¨¢sica <!DOCTYPE html> <meta charset="utf-8"> <head> ! <title>Brazil JS</title> ! <link rel="stylesheet" href=/slideshow/desenvolvimento-indolor-com-jquery-mobile/7964756/"http:/code.jquery.com/mobile/1.0a4.1/ jquery.mobile-1.0a4.1.min.css" /> ! <script type="text/javascript" src=/slideshow/desenvolvimento-indolor-com-jquery-mobile/7964756/"http:/code.jquery.com/ jquery-1.5.min.js"></script> ! <script type="text/javascript" src=/slideshow/desenvolvimento-indolor-com-jquery-mobile/7964756/"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. Estrutura b¨¢sica <!DOCTYPE html> <meta charset="utf-8"> <head> ! <title>Brazil JS</title> ! <link rel="stylesheet" href=/slideshow/desenvolvimento-indolor-com-jquery-mobile/7964756/"http:/code.jquery.com/mobile/1.0a4.1/ jquery.mobile-1.0a4.1.min.css" /> ! <script type="text/javascript" src=/slideshow/desenvolvimento-indolor-com-jquery-mobile/7964756/"http:/code.jquery.com/ jquery-1.5.min.js"></script> ! <script type="text/javascript" src=/slideshow/desenvolvimento-indolor-com-jquery-mobile/7964756/"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. Saturday, May 14, 2011
- 49. Corpo da p¨¢gina Saturday, May 14, 2011
- 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. 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. 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. 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. 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. Touch Layout Saturday, May 14, 2011
- 56. <!DOCTYPE html> <meta charset="utf-8"> ! <html> ! ! <head> ! ! ! <title>Brazil JS</title> ! ! ! <link ... /> ! ! ! <script src=/slideshow/desenvolvimento-indolor-com-jquery-mobile/7964756/"..."></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 o Engine, o servidor Javascript do ERP da UNUM.</li> ! ! ! ! ! ! <li>10h00!Coffee Break</li> ! ! ! ! ! ! ! ! .... ! ! ! ! ! </ol> ! ! ! ! </div> ! ! ! </div> Saturday, May 14, 2011
- 57. <!DOCTYPE html> <meta charset="utf-8"> ! <html> ! ! <head> ! ! ! <title>Brazil JS</title> ! ! ! <link ... /> ! ! ! <script src=/slideshow/desenvolvimento-indolor-com-jquery-mobile/7964756/"..."></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 o Engine, o servidor Javascript do ERP da UNUM.</li> ! ! ! ! ! ! <li>10h00!Coffee Break</li> ! ! ! ! ! ! ! ! .... ! ! ! ! ! </ol> ! ! ! ! </div> ! ! ! </div> Saturday, May 14, 2011
- 58. <!DOCTYPE html> <meta charset="utf-8"> ! <html> ! ! <head> ! ! ! <title>Brazil JS</title> ! ! ! <link ... /> ! ! ! <script src=/slideshow/desenvolvimento-indolor-com-jquery-mobile/7964756/"..."></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 o Engine, o servidor Javascript do ERP da UNUM.</li> ! ! ! ! ! ! <li>10h00!Coffee Break</li> ! ! ! ! ! ! ! ! .... ! ! ! ! ! </ol> ! ! ! ! </div> ! ! ! </div> Saturday, May 14, 2011
- 59. Forms Saturday, May 14, 2011
- 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. ! ! ! ! <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. ! ! ! ! <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. Saturday, May 14, 2011
- 64. Valida??o Saturday, May 14, 2011
- 65. Valida??o $("#formLogin").validate({ ! submitHandler: function(form) { ! ! //Chamada pra alguma action ! } }); Saturday, May 14, 2011
- 66. ºÝºÝߣrs Saturday, May 14, 2011
- 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. <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. <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. 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. Saturday, May 14, 2011
- 72. slidedown slideup fade ?ip pop Saturday, May 14, 2011
- 73. Thumbnails <div data-role="content"> ! <ul data-role="listview"> ! ! <li><a href="index.html"> ! ! ! <img src=/slideshow/desenvolvimento-indolor-com-jquery-mobile/7964756/"images/album-bb.jpg" /> ! ! ! <h3>Broken Bells</h3> ! ! ! <p>Broken Bells</p> ! ! </a></li> ! </ul> </div> Saturday, May 14, 2011
- 74. Thumbnails <div data-role="content"> ! <ul data-role="listview"> ! ! <li><a href="index.html"> ! ! ! <img src=/slideshow/desenvolvimento-indolor-com-jquery-mobile/7964756/"images/album-bb.jpg" /> ! ! ! <h3>Broken Bells</h3> ! ! ! <p>Broken Bells</p> ! ! </a></li> ! </ul> </div> Saturday, May 14, 2011
- 75. Experimentais Saturday, May 14, 2011
- 76. Datepicker Saturday, May 14, 2011
- 77. Google Maps Saturday, May 14, 2011
- 78. Obrigado! @abstractj http://gitshelf.com Saturday, May 14, 2011