Desenvolvimento Indolor com JQuery Mobile
Upcoming SlideShare
Loading in...5
×
 

Desenvolvimento Indolor com JQuery Mobile

on

  • 3,131 views

 

Statistics

Views

Total Views
3,131
Views on SlideShare
3,122
Embed Views
9

Actions

Likes
2
Downloads
47
Comments
0

1 Embed 9

http://www.techgig.com 9

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Desenvolvimento Indolor com JQuery Mobile Desenvolvimento Indolor com JQuery Mobile Presentation Transcript

    • Please enable JavaScript to view this page properlySaturday, May 14, 2011
    • Bruno Oliveira @abstractj http://gitshelf.comSaturday, May 14, 2011
    • Desenvolvimento Indolor com JQuery MobileSaturday, May 14, 2011
    • Obrigado!Saturday, May 14, 2011
    • MobilidadeSaturday, May 14, 2011
    • ~ 205 M de aparelhos celulares ~ 85 M de computadores (teleco/sercomtel)Saturday, May 14, 2011
    • Valor agregadoSaturday, May 14, 2011
    • PlataformasSaturday, May 14, 2011
    • O cowboy! Java Windows Android iOS ME MobileSaturday, May 14, 2011
    • Java ME JavaFX #FAILSaturday, May 14, 2011
    • Windows MobileSaturday, May 14, 2011
    • Saturday, May 14, 2011
    • AndroidSaturday, May 14, 2011
    • DOX Desenvolvimento Orientado a XMLSaturday, May 14, 2011
    • iOSSaturday, May 14, 2011
    • #comofaz? FAX?!Saturday, May 14, 2011
    • Objective CSaturday, 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 > preciosimoSaturday, 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
    • BrowserSaturday, May 14, 2011
    • Safari Opera Android Browser BlackBerry Palm SymbianSaturday, May 14, 2011
    • Saturday, May 14, 2011
    • JavaScriptSaturday, May 14, 2011
    • MVCSaturday, May 14, 2011
    • MVCSaturday, May 14, 2011
    • MVCSaturday, May 14, 2011
    • Não seja cowboy!Saturday, May 14, 2011
    • JQuery MobileSaturday, May 14, 2011
    • Desenvolvedores 29 devs JQuerySaturday, 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 KBSaturday, May 14, 2011
    • Multiplataforma Cross DeviceSaturday, 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áginaSaturday, 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 LayoutSaturday, 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 oEngine, 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 oEngine, 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 oEngine, o servidor Javascript do ERP da UNUM.</li>! ! ! ! ! ! <li>10h00!Coffee Break</li>! ! ! ! ! ! ! ! ....! ! ! ! ! </ol>! ! ! ! </div>! ! ! </div>Saturday, May 14, 2011
    • FormsSaturday, 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çãoSaturday, May 14, 2011
    • Validação $("#formLogin").validate({! submitHandler: function(form) {! ! //Chamada pra alguma action! } });Saturday, May 14, 2011
    • SlidersSaturday, 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 popSaturday, 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
    • ExperimentaisSaturday, May 14, 2011
    • DatepickerSaturday, May 14, 2011
    • Google MapsSaturday, May 14, 2011
    • Obrigado! @abstractj http://gitshelf.comSaturday, May 14, 2011