jQuery Mobile - Desenvolvimento para dispositivos móveis

41
jQuery Mobile Desenvolvendo para dispositivos móveis

description

Palestra ministrada no Encontro de Tecnologia 2012 da Universidade Simonsen.

Transcript of jQuery Mobile - Desenvolvimento para dispositivos móveis

Page 1: jQuery Mobile - Desenvolvimento para dispositivos móveis

jQuery MobileDesenvolvendo para dispositivos

móveis

Page 2: jQuery Mobile - Desenvolvimento para dispositivos móveis

Pablo Garrido

???

Page 4: jQuery Mobile - Desenvolvimento para dispositivos móveis

O que é jQuery Mobile?

Touch-Optimized Web Framework for Smartphones & Tablets

Version 1.2.0 Final

Page 5: jQuery Mobile - Desenvolvimento para dispositivos móveis
Page 6: jQuery Mobile - Desenvolvimento para dispositivos móveis

Suporte

Page 7: jQuery Mobile - Desenvolvimento para dispositivos móveis

`Por que mobile ?

Page 8: jQuery Mobile - Desenvolvimento para dispositivos móveis

6 bilhões de pessoas no mundo possuem telefone

Page 9: jQuery Mobile - Desenvolvimento para dispositivos móveis

+ 1 bilhão utilizam smartphones

Page 10: jQuery Mobile - Desenvolvimento para dispositivos móveis

Por quê ?

Page 11: jQuery Mobile - Desenvolvimento para dispositivos móveis

Multidispositivo

Page 12: jQuery Mobile - Desenvolvimento para dispositivos móveis

Multiplataforma

Page 13: jQuery Mobile - Desenvolvimento para dispositivos móveis

Atualizações “real-time”

Page 14: jQuery Mobile - Desenvolvimento para dispositivos móveis
Page 15: jQuery Mobile - Desenvolvimento para dispositivos móveis

????

Page 16: jQuery Mobile - Desenvolvimento para dispositivos móveis
Page 17: jQuery Mobile - Desenvolvimento para dispositivos móveis

E o melhor…

Aplicações MOBILE não precisam ser testadas no Internet Explorer

Page 18: jQuery Mobile - Desenvolvimento para dispositivos móveis
Page 20: jQuery Mobile - Desenvolvimento para dispositivos móveis

HTML5 Doctype

<!DOCTYPE html>

Page 21: jQuery Mobile - Desenvolvimento para dispositivos móveis

Data attribute reference

data-role=“”

Page 22: jQuery Mobile - Desenvolvimento para dispositivos móveis

Structure<div data-role="page"> <div data-role="header”>

Header

</div>

<div data-role="content">

Content

</div>

<div data-role="footer”>

Footer

</div>

</div>

Page 23: jQuery Mobile - Desenvolvimento para dispositivos móveis

SmartphonesUI Elements

Page 24: jQuery Mobile - Desenvolvimento para dispositivos móveis

Toolbar - Headers

<div data-role="header"> <h1>PabloGP.com</h1> </div>

http://jquerymobile.com/demos/1.2.0/docs/toolbars/index.html

Page 25: jQuery Mobile - Desenvolvimento para dispositivos móveis

Buttons

<a href="index.html" data-role="button">Link button</a>

<a href="index.html" data-role="button" data-icon="delete">Delete</a>

http://jquerymobile.com/demos/1.2.0/docs/buttons/index.html

Page 26: jQuery Mobile - Desenvolvimento para dispositivos móveis

Input - Textarea

<input type="text" name="name" id="basic" value=”" />

http://jquerymobile.com/demos/1.2.0/docs/forms/textinputs/

<textarea name="textarea" id="textarea"></textarea>

Page 27: jQuery Mobile - Desenvolvimento para dispositivos móveis

Slider

http://jquerymobile.com/demos/1.2.0/docs/forms/slider/

<input type="range" name="slider-step" id="slider-step" value=”60" min="0" max="500" step="50" />

Page 28: jQuery Mobile - Desenvolvimento para dispositivos móveis

Listview

http://jquerymobile.com/demos/1.2.0/docs/forms/slider/

<ul data-role="listview"><li><a

href="acura.html">Acura</a></li><li><a href="audi.html">Audi</a></li><li><a

href="bmw.html">BMW</a></li><li><a

href="bmw.html">Cadillac</a></li><li><a

href="bmw.html”>Chrysler</a></li><li><a

href="bmw.html">Dogde</a></li></ul>

Page 31: jQuery Mobile - Desenvolvimento para dispositivos móveis

M

ãonaassa

Page 32: jQuery Mobile - Desenvolvimento para dispositivos móveis

Mobile Page Structure<!DOCTYPE html> <html> <head>

<title>Page Title</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />

<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script><script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></

script>

</head>

<body> ...content goes here...

</body></html>

http://jquerymobile.com/test/docs/pages/page-anatomy.html

Page 33: jQuery Mobile - Desenvolvimento para dispositivos móveis

index.html<body>

<div data-role="page">

<div data-role="header"><h1>Pablo Garrido</h1>

</div>

<div data-role="content" class="contet">

<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.</p>

<br />

<ul data-role="listview"><li><a href="index.html" data-transitional="slide"

title="Home">Home</a></li><li><a href="sobre.html" data-transitional="flow"

title="">Sobre</a></li><li><a href="contato.html" data-transitional="flip"

title="">Contato</a></li></ul>

<br /></div>

<div data-role="footer"><h3>PabloGP.com<br />

[email protected]<br /><br />All Rights reserved

</h3></div>

</div></body>

Page 34: jQuery Mobile - Desenvolvimento para dispositivos móveis

sobre.html<body>

<div data-role="page">

<div data-role="header"><a href="index.html" data-icon="home">Voltar</a><h1>Sobre</h1>

</div>

<div data-role="content" class="contet">

<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.</p><br /><br />

<ul data-role="listview"><li><a href="index.html" data-transitional="slide"

title="Home">Home</a></li><li><a href="sobre.html" data-transitional="flow"

title="">Sobre</a></li><li><a href="contato.html" data-transitional="flip"

title="">Contato</a></li></ul>

<br /></div>

<div data-role="footer"><h3>PabloGP.com<br />

[email protected]<br /><br />All Rights reserved

</h3></div>

</div></body>

Page 35: jQuery Mobile - Desenvolvimento para dispositivos móveis

contato.html<table>

<tr><td>Nome:</td><td> <input required type="text" name="nome"

size="30" /> </td></tr><tr>

<td>E-mail:</td><td> <input type="email" required name="email"

size="30" /> </td></tr>

<tr><td>Assunto:</td><td>

<select size="30" required name="assunto" id="" class="select">

<option value="Projetos">Projetos</option>

<option value="Palestras">Palestras</option>

<option value="Orçamento">Orçamento</option>

</select></td>

</tr>

<tr><td>Idade:</td><td> <input type="range" required min="1" max="100" />

</td></tr>

<tr><td></td><td><button type="submit">Enviar</button></td>

</tr>

</table>

Page 37: jQuery Mobile - Desenvolvimento para dispositivos móveis

Codiqa

Codiqa – codiqa.com

Page 38: jQuery Mobile - Desenvolvimento para dispositivos móveis

jQMGallery

jQuery Mobile Gallery - jqmgallery.com

Page 40: jQuery Mobile - Desenvolvimento para dispositivos móveis

Quando utilizar ?

Pequenas aplicações

Aplicação não exige funcionalidades nativas do dispositivo (acelerômetro, câmera, contatos, notificações, gps e etc)

Quando precisar de algo rápido, bom e barato (principalmente)

Page 41: jQuery Mobile - Desenvolvimento para dispositivos móveis

Obrigado !!@devpablogp

[email protected]/devpablogp

www.pablogp.com

“Os verdadeiros artistas criam

coisas reais e que serão usadas”

Steve Jobs