Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Desenvolvimento Indolor com JQuery Mobile
Search
abstractj
February 02, 2012
Programming
84
2
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
Desenvolvimento Indolor com JQuery Mobile
abstractj
February 02, 2012
More Decks by abstractj
See All by abstractj
When Java meets Ruby
abstractj
1
230
TorqueBox - Ultrapassando a fronteira entre Java e Ruby
abstractj
2
91
Torquebox - O melhor dos dois mundos
abstractj
2
96
Domesticando dragoes com soluções escaláveis
abstractj
1
94
Paradigmas de programação funcional + objetos no liquidificador com scala
abstractj
3
120
J2ME Myth Busters
abstractj
1
85
Other Decks in Programming
See All in Programming
Contextとはなにか
chiroruxx
1
380
ADKを使って簡単にAIエージェントを作ってみよう
k1mu21
0
280
dRuby over BLE
makicamel
2
390
作って学ぶ、 JSX (TSX) ランタイムの基本
syumai
7
1.7k
Even G2とAWSで推しのエージェントを召喚しよう！
har1101
1
130
コンテキストの使い捨てをやめる — ビジネスルール駆動開発と miko —
ioki
0
240
AI駆動開発を妨げる技術的負債の解消アプローチ / ai-refactoring-approach
minodriven
15
7.3k
正しくソフトウェアを作る、前提を疑うための認知の視点 / doubt-premise
minodriven
21
7.1k
AIキャラアプリkaiwaの低遅延音声通話基盤をどう作ったか - AWS Gravitonで支える低遅延・低コストAI Agent基盤
mogamit
0
110
なぜ型を書くのか？ TSKaigi2026で改めて考える #tskaigi_smarthr
kajitack
0
170
Snowflake Summitでの新機能 CoCo / CoWork / snowflake-summit-2026-overall-what-new-coco
tatsuhiro
1
190
The NotImplementedError Problem in Ruby
koic
1
960
Featured
See All Featured
The Straight Up "How To Draw Better" Workshop
denniskardys
239
140k
Discover your Explorer Soul
emna__ayadi
2
1.1k
Reality Check: Gamification 10 Years Later
codingconduct
0
2.2k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
12
1.2k
Odyssey Design
rkendrick25
PRO
2
710
Joys of Absence: A Defence of Solitary Play
codingconduct
1
400
Designing for Performance
lara
611
70k
Color Theory Basics | Prateek | Gurzu
gurzu
0
370
Statistics for Hackers
jakevdp
799
230k
More Than Pixels: Becoming A User Experience Designer
marktimemedia
3
450
Site-Speed That Sticks
csswizardry
13
1.2k
Java REST API Framework Comparison - PWX 2021
mraible
34
9.4k
Transcript
Please enable JavaScript to view this page properly Saturday, May
14, 2011
Bruno Oliveira @abstractj http://gitshelf.com Saturday, May 14, 2011
Desenvolvimento Indolor com JQuery Mobile Saturday, May 14, 2011
Obrigado! Saturday, May 14, 2011
Mobilidade Saturday, May 14, 2011
~ 205 M de aparelhos celulares ~ 85 M de
computadores (teleco/sercomtel) Saturday, May 14, 2011
Valor agregado Saturday, May 14, 2011
Plataformas Saturday, May 14, 2011
O cowboy! Windows Mobile Android iOS Java ME Saturday, May
14, 2011
Java ME JavaFX #FAIL Saturday, May 14, 2011
Windows Mobile Saturday, May 14, 2011
Saturday, May 14, 2011
Android Saturday, May 14, 2011
DOX Desenvolvimento Orientado a XML Saturday, May 14, 2011
iOS Saturday, May 14, 2011
#comofaz? FAX?! Saturday, May 14, 2011
Objective C Saturday, May 14, 2011
#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
Problemas? Saturday, May 14, 2011
$$$$$$$$$$$$$$$$$$$$$$$$$$ Saturday, May 14, 2011
Saturday, May 14, 2011
Saturday, May 14, 2011
Entregar valor > preciosimo Saturday, May 14, 2011
Wizards são tão simples! Saturday, May 14, 2011
As aparências enganam! Saturday, May 14, 2011
Alguém precisa pensar por você? Saturday, May 14, 2011
Solução?! Saturday, May 14, 2011
Pra que aplicações nativas? Saturday, May 14, 2011
Call me titanium guy! JQuery Rocks! Saturday, May 14, 2011
O que todo celular tem em comum? Saturday, May 14,
2011
Browser Saturday, May 14, 2011
Browser BlackBerry Safari Opera Android Palm Symbian Saturday, May 14,
2011
Saturday, May 14, 2011
JavaScript Saturday, May 14, 2011
MVC Saturday, May 14, 2011
MVC Saturday, May 14, 2011
MVC Saturday, May 14, 2011
Não seja cowboy! Saturday, May 14, 2011
JQuery Mobile Saturday, May 14, 2011
Desenvolvedores 29 devs JQuery Saturday, May 14, 2011
Saturday, May 14, 2011
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
Multiplataforma Cross Device Saturday, May 14, 2011
<!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
<!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
<!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
<!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
Saturday, May 14, 2011
Corpo da página Saturday, May 14, 2011
! <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
! <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
! <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
! <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
! <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
Touch Layout Saturday, May 14, 2011
<!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
<!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
<!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
Forms Saturday, May 14, 2011
! ! ! ! <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
! ! ! ! <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
! ! ! ! <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
Saturday, May 14, 2011
Validação Saturday, May 14, 2011
$("#formLogin").validate({ ! submitHandler: function(form) { ! ! //Chamada pra alguma
action ! } }); Validação Saturday, May 14, 2011
Sliders Saturday, May 14, 2011
<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
<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
<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
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
Saturday, May 14, 2011
slidedown slideup fade flip pop Saturday, May 14, 2011
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
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
Experimentais Saturday, May 14, 2011
Datepicker Saturday, May 14, 2011
Google Maps Saturday, May 14, 2011
Obrigado! @abstractj http://gitshelf.com Saturday, May 14, 2011
abstractj
chiroruxx
k1mu21
makicamel
syumai
har1101
ioki
minodriven
mogamit
kajitack
tatsuhiro
koic
denniskardys
emna__ayadi
codingconduct
tammyeverts
rkendrick25
lara
gurzu
jakevdp
marktimemedia
csswizardry
mraible
![#import <Foundation/Foundation.h> int main(int argc, const char argv[]) { !](https://files.speakerdeck.com/presentations/4f2ac8aee3516f0022000f01/slide_17.jpg){kind=link}
