SlideShare une entreprise Scribd logo

Desenvolvimento Indolor com JQuery Mobile

•
•
Bruno Oliveira
Bruno Oliveira
TechnologieDivertissement et humour
1  sur  78
Télécharger pour lire hors ligne
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! Java Windows Android iOS ME Mobile 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
Simples?! #import <Foundation/Foundation.h> int main(int argc, const char argv[]) { ! NSAutoreleasePool *anAutoreleasePool = [[NSAutoreleasePool alloc] init]; ! ! NSLog(@"Hello World"); ! ! [anAutoreleasePool drain]; ! return 0; } 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 JQuery titanium Rocks! guy! Saturday, May 14, 2011
O que todo celular tem em comum? Saturday, May 14, 2011
Browser Saturday, May 14, 2011
Safari Opera Android Browser BlackBerry 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
O que eu preciso? JQuery 86 KB (minified) JQuery Mobile JS 66 KB (minified) JQuery Mobile CSS 45 KB (minified) Total = 197 KB Saturday, May 14, 2011
Multiplataforma Cross Device Saturday, May 14, 2011
Estrutura básica <!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> Saturday, May 14, 2011
Estrutura básica <!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> Saturday, May 14, 2011
Estrutura básica <!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> Saturday, May 14, 2011
Estrutura básica <!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> Saturday, May 14, 2011
Saturday, May 14, 2011
Corpo da página Saturday, May 14, 2011
Corpo da página ! <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> Saturday, May 14, 2011
Corpo da página ! <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> Saturday, May 14, 2011
Corpo da página ! <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> Saturday, May 14, 2011
Corpo da página ! <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> Saturday, May 14, 2011
Corpo da página ! <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> 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
Validação $("#formLogin").validate({ ! submitHandler: function(form) { ! ! //Chamada pra alguma action ! } }); 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

Recommandé

让开发也懂前端
让开发也懂前端让开发也懂前端
让开发也懂前端
lifesinger
 
开放式类库的构建
开放式类库的构建开放式类库的构建
开放式类库的构建
lifesinger
 
SeaJS - 跨环境模块化开发实践
SeaJS - 跨环境模块化开发实践SeaJS - 跨环境模块化开发实践
SeaJS - 跨环境模块化开发实践
lifesinger
 
Opera Mobile HTML5 CSS3 Standards
Opera Mobile HTML5 CSS3 StandardsOpera Mobile HTML5 CSS3 Standards
Opera Mobile HTML5 CSS3 Standards
Zi Bin Cheah
 
TorqueBox - Ultrapassando a fronteira entre Java e Ruby
TorqueBox - Ultrapassando a fronteira entre Java e RubyTorqueBox - Ultrapassando a fronteira entre Java e Ruby
TorqueBox - Ultrapassando a fronteira entre Java e Ruby
Bruno Oliveira
 
Qconsp domesticando dragoes com soluções escaláveis
Qconsp domesticando dragoes com soluções escaláveisQconsp domesticando dragoes com soluções escaláveis
Qconsp domesticando dragoes com soluções escaláveis
Bruno Oliveira
 
Torquebox - O melhor dos dois mundos
Torquebox - O melhor dos dois mundosTorquebox - O melhor dos dois mundos
Torquebox - O melhor dos dois mundos
Bruno Oliveira
 
Flight
FlightFlight
Flight
r_pearson
 

Recommandé

让开发也懂前端
让开发也懂前端让开发也懂前端
让开发也懂前端
lifesinger
 
开放式类库的构建
开放式类库的构建开放式类库的构建
开放式类库的构建
lifesinger
 
SeaJS - 跨环境模块化开发实践
SeaJS - 跨环境模块化开发实践SeaJS - 跨环境模块化开发实践
SeaJS - 跨环境模块化开发实践
lifesinger
 
Opera Mobile HTML5 CSS3 Standards
Opera Mobile HTML5 CSS3 StandardsOpera Mobile HTML5 CSS3 Standards
Opera Mobile HTML5 CSS3 Standards
Zi Bin Cheah
 
TorqueBox - Ultrapassando a fronteira entre Java e Ruby
TorqueBox - Ultrapassando a fronteira entre Java e RubyTorqueBox - Ultrapassando a fronteira entre Java e Ruby
TorqueBox - Ultrapassando a fronteira entre Java e Ruby
Bruno Oliveira
 
Qconsp domesticando dragoes com soluções escaláveis
Qconsp domesticando dragoes com soluções escaláveisQconsp domesticando dragoes com soluções escaláveis
Qconsp domesticando dragoes com soluções escaláveis
Bruno Oliveira
 
Torquebox - O melhor dos dois mundos
Torquebox - O melhor dos dois mundosTorquebox - O melhor dos dois mundos
Torquebox - O melhor dos dois mundos
Bruno Oliveira
 
Flight
FlightFlight
Flight
r_pearson
 
Rendering Views in JavaScript - "The New Web Architecture"
Rendering Views in JavaScript - "The New Web Architecture"Rendering Views in JavaScript - "The New Web Architecture"
Rendering Views in JavaScript - "The New Web Architecture"
Jonathan Julian
 
Introduction to JavaScriptMVC
Introduction to JavaScriptMVCIntroduction to JavaScriptMVC
Introduction to JavaScriptMVC
Pedro Pimentel
 
Koss, How to make desktop caliber browser apps
Koss, How to make desktop caliber browser appsKoss, How to make desktop caliber browser apps
Koss, How to make desktop caliber browser apps
Evil Martians
 
YOU WILL REGRET THIS
YOU WILL REGRET THISYOU WILL REGRET THIS
YOU WILL REGRET THIS
MononcQc
 
Discussing Java's Future
Discussing Java's FutureDiscussing Java's Future
Discussing Java's Future
Ray Gauss
 
The Hitchhiker's guide to mobile development
The Hitchhiker's guide to mobile developmentThe Hitchhiker's guide to mobile development
The Hitchhiker's guide to mobile development
Nikolai Onken
 
Edted 2010 Dicas de Web
Edted 2010 Dicas de WebEdted 2010 Dicas de Web
Edted 2010 Dicas de Web
Fabio Akita
 
Building Mobile Apps using HTML CSS & Javascript
Building Mobile Apps using HTML CSS & JavascriptBuilding Mobile Apps using HTML CSS & Javascript
Building Mobile Apps using HTML CSS & Javascript
Moses Ngone
 
Building Mobile Apps in WordPress - WordCamp Toronto 2011
Building Mobile Apps in WordPress - WordCamp Toronto 2011Building Mobile Apps in WordPress - WordCamp Toronto 2011
Building Mobile Apps in WordPress - WordCamp Toronto 2011
Trevor Mills
 
JavaScript por debaixo dos panos
JavaScript por debaixo dos panosJavaScript por debaixo dos panos
JavaScript por debaixo dos panos
Douglas Campos
 
DevOps Introduction @Cegeka
DevOps Introduction @CegekaDevOps Introduction @Cegeka
DevOps Introduction @Cegeka
dieterdm
 
2011 The Year of Web apps
2011 The Year of Web apps2011 The Year of Web apps
2011 The Year of Web apps
JungHyuk Kwon
 
Accessibility Lightning Talk
Accessibility Lightning TalkAccessibility Lightning Talk
Accessibility Lightning Talk
Russell Heimlich
 
MILOFest 2010
MILOFest 2010MILOFest 2010
MILOFest 2010
Larry Staton
 
Beginning Android Development
Beginning Android DevelopmentBeginning Android Development
Beginning Android Development
José Ferreiro
 
Velocity2011 chef-workshop
Velocity2011 chef-workshopVelocity2011 chef-workshop
Velocity2011 chef-workshop
jtimberman
 
Movable Type 5 Smartphone Option
Movable Type 5 Smartphone OptionMovable Type 5 Smartphone Option
Movable Type 5 Smartphone Option
Six Apart KK
 
Resume.docx
Resume.docxResume.docx
Resume.docx
Harish0612813021
 
Wordpress accessibility enhancements
Wordpress accessibility enhancementsWordpress accessibility enhancements
Wordpress accessibility enhancements
Ted Drake
 
Wordpress accessibility enhancements
Wordpress accessibility enhancementsWordpress accessibility enhancements
Wordpress accessibility enhancements
Ted Drake
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Juan lago vázquez
 
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
apidays
 

Contenu connexe

Similaire à Desenvolvimento Indolor com JQuery Mobile

Introduction to JavaScriptMVC
Introduction to JavaScriptMVCIntroduction to JavaScriptMVC
Introduction to JavaScriptMVC
Pedro Pimentel
 
Koss, How to make desktop caliber browser apps
Koss, How to make desktop caliber browser appsKoss, How to make desktop caliber browser apps
Koss, How to make desktop caliber browser apps
Evil Martians
 
Building Mobile Apps using HTML CSS & Javascript
Building Mobile Apps using HTML CSS & JavascriptBuilding Mobile Apps using HTML CSS & Javascript
Building Mobile Apps using HTML CSS & Javascript
Moses Ngone
 
Wordpress accessibility enhancements
Wordpress accessibility enhancementsWordpress accessibility enhancements
Wordpress accessibility enhancements
Ted Drake
 
Wordpress accessibility enhancements
Wordpress accessibility enhancementsWordpress accessibility enhancements
Wordpress accessibility enhancements
Ted Drake
 

Similaire à Desenvolvimento Indolor com JQuery Mobile (20)

Rendering Views in JavaScript - "The New Web Architecture"
Rendering Views in JavaScript - "The New Web Architecture"Rendering Views in JavaScript - "The New Web Architecture"
Rendering Views in JavaScript - "The New Web Architecture"
 
Introduction to JavaScriptMVC
Introduction to JavaScriptMVCIntroduction to JavaScriptMVC
Introduction to JavaScriptMVC
 
Koss, How to make desktop caliber browser apps
Koss, How to make desktop caliber browser appsKoss, How to make desktop caliber browser apps
Koss, How to make desktop caliber browser apps
 
YOU WILL REGRET THIS
YOU WILL REGRET THISYOU WILL REGRET THIS
YOU WILL REGRET THIS
 
Discussing Java's Future
Discussing Java's FutureDiscussing Java's Future
Discussing Java's Future
 
The Hitchhiker's guide to mobile development
The Hitchhiker's guide to mobile developmentThe Hitchhiker's guide to mobile development
The Hitchhiker's guide to mobile development
 
Edted 2010 Dicas de Web
Edted 2010 Dicas de WebEdted 2010 Dicas de Web
Edted 2010 Dicas de Web
 
Building Mobile Apps using HTML CSS & Javascript
Building Mobile Apps using HTML CSS & JavascriptBuilding Mobile Apps using HTML CSS & Javascript
Building Mobile Apps using HTML CSS & Javascript
 
Building Mobile Apps in WordPress - WordCamp Toronto 2011
Building Mobile Apps in WordPress - WordCamp Toronto 2011Building Mobile Apps in WordPress - WordCamp Toronto 2011
Building Mobile Apps in WordPress - WordCamp Toronto 2011
 
JavaScript por debaixo dos panos
JavaScript por debaixo dos panosJavaScript por debaixo dos panos
JavaScript por debaixo dos panos
 
DevOps Introduction @Cegeka
DevOps Introduction @CegekaDevOps Introduction @Cegeka
DevOps Introduction @Cegeka
 
2011 The Year of Web apps
2011 The Year of Web apps2011 The Year of Web apps
2011 The Year of Web apps
 
Accessibility Lightning Talk
Accessibility Lightning TalkAccessibility Lightning Talk
Accessibility Lightning Talk
 
MILOFest 2010
MILOFest 2010MILOFest 2010
MILOFest 2010
 
Beginning Android Development
Beginning Android DevelopmentBeginning Android Development
Beginning Android Development
 
Velocity2011 chef-workshop
Velocity2011 chef-workshopVelocity2011 chef-workshop
Velocity2011 chef-workshop
 
Movable Type 5 Smartphone Option
Movable Type 5 Smartphone OptionMovable Type 5 Smartphone Option
Movable Type 5 Smartphone Option
 
Resume.docx
Resume.docxResume.docx
Resume.docx
 
Wordpress accessibility enhancements
Wordpress accessibility enhancementsWordpress accessibility enhancements
Wordpress accessibility enhancements
 
Wordpress accessibility enhancements
Wordpress accessibility enhancementsWordpress accessibility enhancements
Wordpress accessibility enhancements
 

Dernier

Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Victor Rentea
 
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Orbitshub
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
WSO2
 
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Angeliki Cooney
 

Dernier (20)

Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
 
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
 
Six Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal OntologySix Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal Ontology
 
FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
 
Vector Search -An Introduction in Oracle Database 23ai.pptx
Vector Search -An Introduction in Oracle Database 23ai.pptxVector Search -An Introduction in Oracle Database 23ai.pptx
Vector Search -An Introduction in Oracle Database 23ai.pptx
 
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
 
[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf
 
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
 
Elevate Developer Efficiency & build GenAI Application with Amazon Q​
Elevate Developer Efficiency & build GenAI Application with Amazon Q​Elevate Developer Efficiency & build GenAI Application with Amazon Q​
Elevate Developer Efficiency & build GenAI Application with Amazon Q​
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
 
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
 
Understanding the FAA Part 107 License ..
Understanding the FAA Part 107 License ..Understanding the FAA Part 107 License ..
Understanding the FAA Part 107 License ..
 
WSO2's API Vision: Unifying Control, Empowering Developers
WSO2's API Vision: Unifying Control, Empowering DevelopersWSO2's API Vision: Unifying Control, Empowering Developers
WSO2's API Vision: Unifying Control, Empowering Developers
 
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
 
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ..."I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
 

Desenvolvimento Indolor com JQuery Mobile

  • 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
  • 6. ~ 205 M de aparelhos celulares ~ 85 M de computadores (teleco/sercomtel) Saturday, May 14, 2011
  • 9. O cowboy! Java Windows Android iOS ME Mobile Saturday, May 14, 2011
  • 10. Java ME JavaFX #FAIL Saturday, May 14, 2011
  • 14. DOX Desenvolvimento Orientado a XML Saturday, May 14, 2011
  • 16. #comofaz? FAX?! Saturday, May 14, 2011
  • 18. Simples?! #import <Foundation/Foundation.h> int main(int argc, const char argv[]) { ! NSAutoreleasePool *anAutoreleasePool = [[NSAutoreleasePool alloc] init]; ! ! NSLog(@"Hello World"); ! ! [anAutoreleasePool drain]; ! return 0; } 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
  • 28. Pra que aplicações nativas? Saturday, May 14, 2011
  • 29. Call me JQuery titanium Rocks! guy! Saturday, May 14, 2011
  • 30. O que todo celular tem em comum? Saturday, May 14, 2011
  • 32. Safari Opera Android Browser BlackBerry Palm Symbian Saturday, May 14, 2011
  • 40. Desenvolvedores 29 devs JQuery Saturday, May 14, 2011
  • 42. O que eu preciso? JQuery 86 KB (minified) JQuery Mobile JS 66 KB (minified) JQuery Mobile CSS 45 KB (minified) Total = 197 KB Saturday, May 14, 2011
  • 43. Multiplataforma Cross Device Saturday, May 14, 2011
  • 44. Estrutura básica <!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> Saturday, May 14, 2011
  • 45. Estrutura básica <!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> Saturday, May 14, 2011
  • 46. Estrutura básica <!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> Saturday, May 14, 2011
  • 47. Estrutura básica <!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> Saturday, May 14, 2011
  • 50. Corpo da página ! <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> Saturday, May 14, 2011
  • 51. Corpo da página ! <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> Saturday, May 14, 2011
  • 52. Corpo da página ! <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> Saturday, May 14, 2011
  • 53. Corpo da página ! <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> Saturday, May 14, 2011
  • 54. Corpo da página ! <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> 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
  • 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
  • 65. Validação $("#formLogin").validate({ ! submitHandler: function(form) { ! ! //Chamada pra alguma action ! } }); 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
  • 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
  • 78. Obrigado! @abstractj http://gitshelf.com Saturday, May 14, 2011