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

Desenvolvimento Indolor com JQuery Mobile

abstractj
February 02, 2012
Programming
2
78

Desenvolvimento Indolor com JQuery Mobile

abstractj

February 02, 2012
Tweet

More Decks by abstractj

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

Other Decks in Programming

See All in Programming
ts-morphを使ってコードリプレイスとASTへのハードルを下げる！
nyawach
5
320
TypeScriptから始める VR生活
tamagokakeg
2
110
Exploring the Implementation of “t.Run”, “t.Parallel”, and “t.Cleanup”
akarin
1
160
ServerAction で Progressive Enhancement はどこまで頑張れるか？ / progressive-enhancement-with-server-action
takefumiyoshii
6
510
TypeScript 関数型スタイルでバックエンド開発のリアル
naoya
49
16k
FoodGram
iseruuuuu
0
230
Webアプリをできるだけコードを手書きしないで作ってみる
tomokusaba
2
230
Docker_OSS_ホスティング入門
satokoki645
0
140
Kotlin Multiplatform at Stable and Beyond (Android Makers 2024)
zsmb
0
610
TypeScriptコードの漸進的改善 / Progressive Improvement of TypeScript Code
medley
1
420
チーム立ち上げにAWSを活用したらClaudeさんに褒められた話
mkdev10
3
230
CREってこういうこと？ 体験入社 - 提案資料 - / what-is-cre-trial-employment
shinden
1
620

Featured

See All Featured
Designing Experiences People Love
moore
136
23k
Building Your Own Lightsaber
phodgson
100
5.7k
Into the Great Unknown - MozCon
thekraken
15
1.1k
The Art of Programming - Codeland 2020
erikaheidi
43
12k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.1k
The Pragmatic Product Professional
lauravandoore
26
5.9k
Testing 201, or: Great Expectations
jmmastey
30
6.4k
Faster Mobile Websites
deanohume
300
30k
Imperfection Machines: The Place of Print at Facebook
scottboms
261
12k
Principles of Awesome APIs and How to Build Them.
keavy
121
16k
How STYLIGHT went responsive
nonsquared
92
4.8k
Making the Leap to Tech Lead
cromwellryan
125
8.6k

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