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

Desenvolvimento Indolor com JQuery Mobile

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for abstractj abstractj
February 02, 2012
Programming
85
2

Desenvolvimento Indolor com JQuery Mobile

Avatar for abstractj

abstractj

February 02, 2012

More Decks by abstractj

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

Other Decks in Programming

See All in Programming
Cloudflare is Agents
Avatar for chimame chimame
0
170
リアルな遅延を測る仕様
Avatar for kota-yata kota_yata
1
100
ITヒヤリハットを整理してみた ～ライフサイクルと原因から考える再発防止策～
Avatar for kouki.miura koukimiura
1
140
今さら聞けない .NET CLI
Avatar for tkym htkym
0
190
Foundation Models frameworkで画像分析
Avatar for リョウ ryodeveloper
1
610
Flow は今どうなっているか
Avatar for mizdra mizdra
PRO
0
540
仕様駆動開発へのトライを機に チームに適合する手法を模索し続けている話
Avatar for freee freee
PRO
0
510
SlackアプリとLambdaの 連携を構築した話
Avatar for pawn pawn_4_s
1
120
複数の Claude Code が"放置"されてしまう問題をCLI ダッシュボードを自作して解決した話
Avatar for sumihiro3 sumihiro3
1
680
型も通る、synthも通る、それでも危ない 〜AIのCDKの権限とコストを機械で検証する〜 / It Passes Type Checks, It Passes Synth Checks, but It’s Still Risky — Automatically Verifying Permissions and Costs in AI’s CDK —
Avatar for shiro seike seike460
PRO
1
550
AWS DevOps AgentのAzure接続機能を検証して見えた活用法／Use Cases Verified for the AWS DevOps Agent's Azure Connectivity Feature
Avatar for モブエンジニア（Masaki Okuda） masakiokuda
1
230
React本体のコードリーディング
Avatar for high-g high_g_engineer
1
140

Featured

See All Featured
How to build a perfect <img>
Avatar for Jono Alderson jonoalderson
1
5.9k
The Art of Delivering Value - GDevCon NA Keynote
Avatar for David Neal reverentgeek
16
2.1k
Money Talks: Using Revenue to Get Sh*t Done
Avatar for Nikki Halliwell nikkihalliwell
0
460
Unlocking the hidden potential of vector embeddings in international SEO
Avatar for Frank van Dijk frankvandijk
0
890
How People are Using Generative and Agentic AI to Supercharge Their Products, Projects, Services and Value Streams Today
Avatar for Helen Beal helenjbeal
1
260
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
13
1.4k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
Avatar for Tammy Everts tammyeverts
11
990
Designing for humans not robots
Avatar for Tammie Lister tammielis
254
26k
The Limits of Empathy - UXLibs8
Avatar for Cassini Nazir cassininazir
1
600
Designing for Performance
Avatar for Lara Hogan lara
611
70k
What the history of the web can teach us about the future of AI
Avatar for Ines Montani inesmontani
PRO
1
650
SEO in 2025: How to Prepare for the Future of Search
Avatar for Michael King ipullrank
3
3.7k

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