desenvolvimento indolor com jquery mobile

Please enable JavaScriptto view this page properly

Saturday, May 14, 2011

Bruno Oliveira@abstractj

http://gitshelf.com

Desenvolvimento Indolor com JQuery

MobileSaturday, May 14, 2011

Obrigado!

Mobilidade

~ 205 Mde aparelhos celulares

~ 85 Mde computadores

(teleco/sercomtel)

Valor agregado

Plataformas

O cowboy!

Windows Mobile

Android iOSJavaME

Java ME

JavaFX #FAIL

Windows Mobile

Android

DOX Desenvolvimento

Orientado a

#comofaz?

Objective C

#import <Foundation/Foundation.h>

int main(int argc, const char argv[]){! NSAutoreleasePool *anAutoreleasePool = [[NSAutoreleasePool alloc] init];!! NSLog(@"Hello World");!! [anAutoreleasePool drain];! return 0;}

Simples?!

Problemas?

$$$$$$$$$$$$$$$$$$$$$$$$$$

Entregar valor > preciosimo

Wizards são tão simples!

As aparências enganam!

Alguém precisa pensar por você?

Solução?!

Pra que aplicações nativas?

Call me titanium

guy!JQuery Rocks!

O que todo celular tem em comum?

Browser

Browser BlackBerry

Safari Opera

Android

Palm Symbian

JavaScript

Não seja cowboy!

JQuery Mobile

Desenvolvedores

29 devs JQuerySaturday, 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?

MultiplataformaCross Device

<!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

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>

Corpo da página

Touch Layout

<!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

! ! ! ! <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>

Validação

$("#formLogin").validate({! submitHandler: function(form) {! ! //Chamada pra alguma action! } });

Validação

Sliders

<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>

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>

slidedown slideup fade flip pop

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>

Experimentais

Datepicker

Google Maps

Obrigado!@abstractj

http://gitshelf.com

desenvolvimento indolor com jquery mobile

Technology