desenvolvimento indolor com jquery mobile
Post on 15-May-2015
2.816 Views
Preview:
TRANSCRIPT
Please enable JavaScriptto view this page properly
Saturday, May 14, 2011
Bruno Oliveira@abstractj
http://gitshelf.com
Saturday, May 14, 2011
Desenvolvimento Indolor com JQuery
MobileSaturday, May 14, 2011
Obrigado!
Saturday, May 14, 2011
Mobilidade
Saturday, May 14, 2011
~ 205 Mde aparelhos celulares
~ 85 Mde computadores
(teleco/sercomtel)
Saturday, May 14, 2011
Valor agregado
Saturday, May 14, 2011
Plataformas
Saturday, May 14, 2011
O cowboy!
Windows Mobile
Android iOSJavaME
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 JQuerySaturday, 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
MultiplataformaCross 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
top related