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
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
abstractj
February 02, 2012
Programming
85
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
93
Torquebox - O melhor dos dois mundos
abstractj
2
97
Domesticando dragoes com soluções escaláveis
abstractj
1
96
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
AI Engineeringは、AIプロダクトだけのものか？ 〜AIがソフトウェアを作る時代の新しい当たり前〜 / No AI in your product. AI Engineering in your development.
rkaga
4
430
FDEが実現するAI駆動経営の現在地
gonta
2
280
TSX の <Hoge<Fuga>> という構文に驚いた話 / tsx-type-argument-syntax
kanaru0928
0
230
Google Apps Script で Ruby を動かす
kawahara
0
230
自動化したのに回らないテスト運用の壁ーAI時代の品質責任と生産性
mfunaki
0
130
torikago - Ruby::Boxで照らすモジュラモノリスの実行境界
se4weed
1
380
Go 1.27 における memory allocation の高速化
andpad
0
180
GDG Korea Android: 2026 I/O Extended ~ What's new in Android development tools
pluu
0
220
使いながら育てる Claude Code — 開発フローの1コマンド化 × 繰り返し指摘の自動仕組み化
shiki_kakaku
0
1.8k
Terraform標準の組織で AWS CDKをどう使うか
mu7889yoon
1
520
freee が目指す データ マネジメント戦略 AI-Ready 時代を支える 攻めのガバナンスとは
freee
PRO
0
370
Laravelで学ぶ Webアプリケーションチューニング入門/web_application_tuning_101
hanhan1978
4
1.8k
Featured
See All Featured
Code Review Best Practice
trishagee
74
20k
Building Applications with DynamoDB
mza
96
7.2k
AI in Enterprises - Java and Open Source to the Rescue
ivargrimstad
0
1.4k
Mozcon NYC 2025: Stop Losing SEO Traffic
samtorres
1
490
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
soudai
PRO
68
56k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Gemini Prompt Engineering: Practical Techniques for Tangible AI Outcomes
mfonobong
2
480
Measuring & Analyzing Core Web Vitals
bluesmoon
9
960
Beyond borders and beyond the search box: How to win the global "messy middle" with AI-driven SEO
davidcarrasco
3
210
GitHub's CSS Performance
jonrohan
1033
470k
Imperfection Machines: The Place of Print at Facebook
scottboms
270
14k
Designing Powerful Visuals for Engaging Learning
tmiket
1
490
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
rkaga
gonta
kanaru0928
kawahara
mfunaki
se4weed
andpad
pluu
shiki_kakaku
mu7889yoon
freee
hanhan1978
trishagee
mza
ivargrimstad
samtorres
soudai
marcelosomers
mfonobong
bluesmoon
davidcarrasco
jonrohan
scottboms
tmiket
![#import <Foundation/Foundation.h> int main(int argc, const char argv[]) { !](https://files.speakerdeck.com/presentations/4f2ac8aee3516f0022000f01/slide_17.jpg){kind=link}
