Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
Desenvolvimento Indolor com JQuery Mobile
Search
abstractj
February 02, 2012
Programming
88
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
98
Torquebox - O melhor dos dois mundos
abstractj
2
100
Domesticando dragoes com soluções escaláveis
abstractj
1
97
Paradigmas de programação funcional + objetos no liquidificador com scala
abstractj
3
130
J2ME Myth Busters
abstractj
1
87
Other Decks in Programming
See All in Programming
Apple Intelligence を用いた個人情報誤送信防止、及びユーザーリクエスト体験の改善について
yukiny
0
320
Turning Architecture into Unit Tests in the AI Era (NSSpain XIV)
steliosf
PRO
1
130
更なる可用性を求めて、5年間運用したKotlinのアプリケーションをGoでリプレイスする話
ken_tunc
0
450
プロダクトコードからライブラリの境界を見つける
elmetal
PRO
0
110
re:Inventに行く前に知っておきたい現地参加のノウハウ
nokomoro3
0
380
Streamlitで実現する自然言語データアプリ開発
ayumu_yamaguchi
1
340
C#の現在地 進化の歴史と、AI時代の.NET Everywhere
neuecc
5
5k
Kubernetes祭り #2 OP/ED
bells17
0
100
見えないものを探る要求要件定義に必要な基本的思考 / invisible-requirement-thinking
minodriven
15
7.9k
SalesForceを内製化！？ ~ HR事業を支える顧客管理基盤のインフラを大公開 ~
oku053
0
150
Workers Cache を知る
syumai
0
340
そのリトライ、死んだコネクションを使い回していませんか ── GoのHTTPクライアントとHTTP/2を実プロダクト障害から学び直す
myus4a
0
400
Featured
See All Featured
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
287
14k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
16k
WCS-LA-2024
lcolladotor
0
850
HU Berlin: Industrial-Strength Natural Language Processing with spaCy and Prodigy
inesmontani
PRO
0
740
The Organizational Zoo: Understanding Human Behavior Agility Through Metaphoric Constructive Conversations (based on the works of Arthur Shelley, Ph.D)
kimpetersen
PRO
0
490
Joys of Absence: A Defence of Solitary Play
codingconduct
1
530
Reality Check: Gamification 10 Years Later
codingconduct
0
2.3k
Git: the NoSQL Database
bkeepers
PRO
433
67k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
1k
The browser strikes back
jonoalderson
0
1.8k
BBQ
matthewcrist
90
10k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
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
yukiny
steliosf
ken_tunc
elmetal
nokomoro3
ayumu_yamaguchi
neuecc
bells17
minodriven
oku053
syumai
myus4a
stephaniewalter
sstephenson
lcolladotor
inesmontani
kimpetersen
codingconduct
bkeepers
bluesmoon
jonoalderson
matthewcrist
samlambert
![#import <Foundation/Foundation.h> int main(int argc, const char argv[]) { !](https://files.speakerdeck.com/presentations/4f2ac8aee3516f0022000f01/slide_17.jpg){kind=link}
