Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Desenvolvimento Indolor com JQuery Mobile

Avatar for abstractj abstractj
February 02, 2012
Programming
2
80

Desenvolvimento Indolor com JQuery Mobile

Avatar for abstractj

abstractj

February 02, 2012
Tweet

More Decks by abstractj

See All by abstractj
When Java meets Ruby
Avatar for abstractj abstractj
1
210
TorqueBox - Ultrapassando a fronteira entre Java e Ruby
Avatar for abstractj abstractj
2
78
Torquebox - O melhor dos dois mundos
Avatar for abstractj abstractj
2
84
Domesticando dragoes com soluções escaláveis
Avatar for abstractj abstractj
1
82
Paradigmas de programação funcional + objetos no liquidificador com scala
Avatar for abstractj abstractj
3
110
J2ME Myth Busters
Avatar for abstractj abstractj
1
79

Other Decks in Programming

See All in Programming
事業戦略を理解してソフトウェアを設計する
Avatar for 増田 亨 masuda220
PRO
22
6.2k
Cursor Meetup Tokyo ゲノミクスとCursor： 進化と制約のあいだ
Avatar for Masaru Koido koido
2
1k
ktr0731/go-mcpでMCPサーバー作ってみた
Avatar for kashiwa takak2166
0
170
単体テストの始め方/作り方
Avatar for toms toms74209200
0
510
Using AI Tools Around Software Development
Avatar for inouehi inouehi
0
1.2k
Kotlin エンジニアへ送る：Swift 案件に参加させられる日に備えて～似てるけど色々違う Swift の仕様 / from Kotlin to Swift
Avatar for Elvis Shi lovee
1
240
Go1.25からのGOMAXPROCS
Avatar for kuro kuro_kurorrr
1
770
TypeScript LSP の今までとこれから
Avatar for Yosuke Kurami quramy
1
510
Rails産でないDBを Railsに引っ越すHACK - Omotesando.rb #110
Avatar for lni_T lnit
1
170
AIコーディング道場勉強会#2 君（エンジニア）たちはどう生きるか
Avatar for misaki.otb misakiotb
1
240
エラーって何種類あるの？
Avatar for Takuma Kajikawa kajitack
5
260
業務自動化をJavaとSeleniumとAWS Lambdaで実現した方法
Avatar for GreenFlagProject greenflagproject
1
120

Featured

See All Featured
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
31
1k
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
45
7.4k
Building Applications with DynamoDB
Avatar for Matt Wood mza
95
6.5k
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
657
60k
Fireside Chat
Avatar for paigeccino paigeccino
37
3.5k
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1370
200k
The MySQL Ecosystem @ GitHub 2015
Avatar for Sam Lambert samlambert
251
13k
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
248
1.3M
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
68
11k
How GitHub (no longer) Works
Avatar for Zach Holman holman
314
140k
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
16
940
Visualization
Avatar for Eitan Lees eitanlees
146
16k

Transcript

  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! Windows Mobile Android iOS Java ME 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. #import <Foundation/Foundation.h> int main(int argc, const char argv[]) { !

    NSAutoreleasePool *anAutoreleasePool = [[NSAutoreleasePool alloc] init]; ! ! NSLog(@"Hello World"); ! ! [anAutoreleasePool drain]; ! return 0; } Simples?! Saturday, May 14, 2011

  19. Problemas? Saturday, May 14, 2011

  20. $$$$$$$$$$$$$$$$$$$$$$$$$$ 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 titanium guy! JQuery Rocks! Saturday, May 14, 2011

  30. O que todo celular tem em comum? Saturday, May 14,

    2011

  31. Browser Saturday, May 14, 2011

  32. Browser BlackBerry Safari Opera Android 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. JQuery 86 KB (minified) JQuery Mobile JS 66 KB (minified)

    JQuery Mobile CSS 45 KB (minified) Total = 197 KB O que eu preciso? Saturday, May 14, 2011

  43. Multiplataforma Cross Device Saturday, May 14, 2011

  44. <!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> Estrutura básica Saturday, May 14, 2011

  45. <!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> Estrutura básica Saturday, May 14, 2011

  46. <!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> Estrutura básica Saturday, May 14, 2011

  47. <!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> Estrutura básica Saturday, May 14, 2011

  48. Saturday, May 14, 2011

  49. Corpo da página Saturday, May 14, 2011

  50. ! <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> Corpo da página Saturday, May 14, 2011

  51. ! <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> Corpo da página Saturday, May 14, 2011

  52. ! <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> Corpo da página Saturday, May 14, 2011

  53. ! <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> Corpo da página Saturday, May 14, 2011

  54. ! <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> Corpo da página 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. $("#formLogin").validate({ ! submitHandler: function(form) { ! ! //Chamada pra alguma

    action ! } }); Validação 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