Desenvolvimento Indolor com JQuery Mobile
3 likes1,146 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 (minified) JQuery Mobile JS 66 KB (minified) JQuery Mobile CSS 45 KB (minified) 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="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. 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. 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. 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. 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="..."></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="..."></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="..."></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. Sliders 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 flip pop Saturday, May 14, 2011
- 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. 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. 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