Bruno Oliveira, profile picture
Uploaded byBruno Oliveira
PDF, PPTX1,146 views

Desenvolvimento Indolor com JQuery Mobile

The document discusses using jQuery Mobile to build mobile web applications. It provides the basic structure for a jQuery Mobile site including linking to the necessary CSS and JavaScript files. It demonstrates how to add pages, headers, content sections and footers using the data attributes of jQuery Mobile. The presentation emphasizes that jQuery Mobile allows building sites that work across different mobile platforms in a simple way.

Embed presentation

Download as PDF, PPTX
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

More Related Content

PDF
让开发也懂前端
bylifesinger
 
PDF
开放式类库的构建
bylifesinger
 
PDF
SeaJS - 跨环境模块化开发实践
bylifesinger
 
PDF
Opera Mobile HTML5 CSS3 Standards
byZi Bin Cheah
 
PDF
TorqueBox - Ultrapassando a fronteira entre Java e Ruby
byBruno Oliveira
 
PDF
Qconsp domesticando dragoes com soluções escaláveis
byBruno Oliveira
 
PDF
Torquebox - O melhor dos dois mundos
byBruno Oliveira
 
PPT
Flight
byr_pearson
 
让开发也懂前端
bylifesinger
 
开放式类库的构建
bylifesinger
 
SeaJS - 跨环境模块化开发实践
bylifesinger
 
Opera Mobile HTML5 CSS3 Standards
byZi Bin Cheah
 
TorqueBox - Ultrapassando a fronteira entre Java e Ruby
byBruno Oliveira
 
Qconsp domesticando dragoes com soluções escaláveis
byBruno Oliveira
 
Torquebox - O melhor dos dois mundos
byBruno Oliveira
 
Flight
byr_pearson
 

Similar to Desenvolvimento Indolor com JQuery Mobile

PDF
JavaScript por debaixo dos panos
byDouglas Campos
 
PDF
QCON SP 2012
byCristiano Sanchez
 
PDF
A Snapshot of the Mobile HTML5 Revolution
byJames Pearce
 
PDF
Cross-Platform Tools: Build Once and Run Everywhere
byAltoros
 
PDF
Building Cross Platform Mobile Web Apps
byJames Pearce
 
PDF
The Hitchhiker's guide to mobile development
byNikolai Onken
 
PDF
Mobile Web App Development
byBrian LeRoux
 
PDF
Sencha Touch for Rubyists
byJames Pearce
 
PDF
Building mobile apps with JavaScript and PHP
byfunkatron
 
PDF
Sencha.io preview
byAditya Bansod
 
PDF
Phone gap nikolaionken-08-06
bySkills Matter
 
PDF
Hybridmobileapps 130130213844-phpapp02
byweeyee
 
PDF
Cross platform mobile web apps
byJames Pearce
 
PDF
HTML5 and the dawn of rich mobile web applications pt 1
byJames Pearce
 
KEY
HTML5 is the Future of Mobile, PhoneGap Takes You There Today
bydavyjones
 
PDF
Mobile WPO
byTim Kadlec
 
PDF
Building Mobile Apps in WordPress - WordCamp Toronto 2011
byTrevor Mills
 
PDF
Building cross platform mobile web apps
byJames Pearce
 
PDF
web标准化交流会bobby分享
by裕波 周
 
PDF
web标准化交流会上海站bobby分享
by裕波 周
 
JavaScript por debaixo dos panos
byDouglas Campos
 
QCON SP 2012
byCristiano Sanchez
 
A Snapshot of the Mobile HTML5 Revolution
byJames Pearce
 
Cross-Platform Tools: Build Once and Run Everywhere
byAltoros
 
Building Cross Platform Mobile Web Apps
byJames Pearce
 
The Hitchhiker's guide to mobile development
byNikolai Onken
 
Mobile Web App Development
byBrian LeRoux
 
Sencha Touch for Rubyists
byJames Pearce
 
Building mobile apps with JavaScript and PHP
byfunkatron
 
Sencha.io preview
byAditya Bansod
 
Phone gap nikolaionken-08-06
bySkills Matter
 
Hybridmobileapps 130130213844-phpapp02
byweeyee
 
Cross platform mobile web apps
byJames Pearce
 
HTML5 and the dawn of rich mobile web applications pt 1
byJames Pearce
 
HTML5 is the Future of Mobile, PhoneGap Takes You There Today
bydavyjones
 
Mobile WPO
byTim Kadlec
 
Building Mobile Apps in WordPress - WordCamp Toronto 2011
byTrevor Mills
 
Building cross platform mobile web apps
byJames Pearce
 
web标准化交流会bobby分享
by裕波 周
 
web标准化交流会上海站bobby分享
by裕波 周
 

Recently uploaded

PDF
AI in the Real World: From University to Industry
byDarvan Shvan
 
PPTX
Workflow and decision Automation with Flowable
bychakib ch
 
PDF
TrustArc Webinar - From Trends to Action: Fitting AI Governance into Privacy Ops
byTrustArc
 
PDF
Bringing AI into R&D, Taking a Human-Centric Approach / Haim Yadid
byHaim Yadid
 
PPTX
Microsoft Azure News - February 2026 - BAUG
byDaniel Toomey
 
PDF
Automated Governance for FME Flow: Smarter Admin at Scale
bySafe Software
 
PDF
February 2026 Patch Tuesday hosted by Chris Goettl and Todd Schell
byIvanti
 
PPTX
Spacecraft Guidance Quick Research Guide by Arthur Morgan
byArthur Morgan
 
PDF
Session 1/5: Enhancing Automation with Screenplay & Business Rules
bysuhanisingh58689
 
PDF
apidays Paris 2025 | Zero Trust By Design
byapidays
 
PDF
Reality Drift: Why Systems Keep Working After Meaning Drops Out
byReality Drift Archive | A. Jacobs
 
PDF
Agent to agent service discovery using HashiCorp Consul and Vault
byBram Vogelaar
 
PPTX
Introducing VisualSim 2610 The Next Leap in System Level Modeling
byDeepak Shankar
 
PDF
apidays New York 2025 | AI in Application Security
byapidays
 
PDF
GTM-and-Sales-Plan for a cyber security product
byAshish Jangir
 
PDF
UiPath Modern Automation Playbook -Session 2
bysuhanisingh58689
 
PPTX
The Transformative Technology in Contemporary Businesses
bygreyaudrina
 
PDF
apidays Paris 2025 | API Layer7 Security: Real-World Use Cases (BBVA & Nexi)
byapidays
 
PDF
AI TOOLS FOR PRODUCTIVITY IN MODERN TIMES.pdf
bySantunu
 
PDF
shayk.online - Anonymous chat with Sinatra and WebSockets
byEleanor McHugh
 
AI in the Real World: From University to Industry
byDarvan Shvan
 
Workflow and decision Automation with Flowable
bychakib ch
 
TrustArc Webinar - From Trends to Action: Fitting AI Governance into Privacy Ops
byTrustArc
 
Bringing AI into R&D, Taking a Human-Centric Approach / Haim Yadid
byHaim Yadid
 
Microsoft Azure News - February 2026 - BAUG
byDaniel Toomey
 
Automated Governance for FME Flow: Smarter Admin at Scale
bySafe Software
 
February 2026 Patch Tuesday hosted by Chris Goettl and Todd Schell
byIvanti
 
Spacecraft Guidance Quick Research Guide by Arthur Morgan
byArthur Morgan
 
Session 1/5: Enhancing Automation with Screenplay & Business Rules
bysuhanisingh58689
 
apidays Paris 2025 | Zero Trust By Design
byapidays
 
Reality Drift: Why Systems Keep Working After Meaning Drops Out
byReality Drift Archive | A. Jacobs
 
Agent to agent service discovery using HashiCorp Consul and Vault
byBram Vogelaar
 
Introducing VisualSim 2610 The Next Leap in System Level Modeling
byDeepak Shankar
 
apidays New York 2025 | AI in Application Security
byapidays
 
GTM-and-Sales-Plan for a cyber security product
byAshish Jangir
 
UiPath Modern Automation Playbook -Session 2
bysuhanisingh58689
 
The Transformative Technology in Contemporary Businesses
bygreyaudrina
 
apidays Paris 2025 | API Layer7 Security: Real-World Use Cases (BBVA & Nexi)
byapidays
 
AI TOOLS FOR PRODUCTIVITY IN MODERN TIMES.pdf
bySantunu
 
shayk.online - Anonymous chat with Sinatra and WebSockets
byEleanor McHugh
 

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
  • 4.
  • 5.
  • 6.
    ~ 205 M de aparelhos celulares ~ 85 M de computadores (teleco/sercomtel) Saturday, May 14, 2011
  • 7.
  • 8.
  • 9.
    O cowboy! Java Windows Android iOS ME Mobile Saturday, May 14, 2011
  • 10.
    Java ME JavaFX #FAIL Saturday, May 14, 2011
  • 11.
  • 12.
  • 13.
  • 14.
    DOX Desenvolvimento Orientado a XML Saturday, May 14, 2011
  • 15.
  • 16.
    #comofaz? FAX?! Saturday, May 14, 2011
  • 17.
  • 18.
    Simples?! #import <Foundation/Foundation.h> int main(intargc, const char argv[]) { ! NSAutoreleasePool *anAutoreleasePool = [[NSAutoreleasePool alloc] init]; ! ! NSLog(@"Hello World"); ! ! [anAutoreleasePool drain]; ! return 0; } Saturday, May 14, 2011
  • 19.
  • 20.
  • 21.
  • 22.
  • 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.
  • 28.
    Pra que aplicações nativas? Saturday, May 14, 2011
  • 29.
    Call me JQuery titanium Rocks! guy! Saturday, May 14, 2011
  • 30.
    O que todocelular tem em comum? Saturday, May 14, 2011
  • 31.
  • 32.
    Safari Opera Android Browser BlackBerry Palm Symbian Saturday, May 14, 2011
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
    Desenvolvedores 29 devs JQuery Saturday, May 14, 2011
  • 41.
  • 42.
    O que eupreciso? 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> <metacharset="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> <metacharset="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> <metacharset="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> <metacharset="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
  • 48.
  • 49.
  • 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
  • 55.
  • 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.
  • 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.
  • 64.
  • 65.
    Validação $("#formLogin").validate({ ! submitHandler: function(form) { ! ! //Chamada pra alguma action ! } }); Saturday, May 14, 2011
  • 66.
  • 67.
    <div data-role="fieldcontain"> ! <labelfor="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"> ! <labelfor="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"> ! <labelfor="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.
  • 72.
    slidedown slideup fade flip pop Saturday, May 14, 2011
  • 73.
    Thumbnails <div data-role="content"> ! <uldata-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"> ! <uldata-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.
  • 76.
  • 77.
  • 78.
    Obrigado! @abstractj http://gitshelf.com Saturday, May 14, 2011