jQuery Mobile - Desenvolvimento para dispositivos móveis

jQuery Mobile
Desenvolvendo para dispositivos móveis

O que é jQuery Mobile?

Version 1.2.0 Final
Touch-Optimized Web Framework for Smartphones & Tablets

6 bilhões de
pessoas no
mundo possuem
telefone

+ 1 bilhão
utilizam
smartphones

Atualizações “real-time”

E o melhor…

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

Números

42,23%

Fonte: http://trends.builtwith.com/javascript

HTML5 Doctype

<!DOCTYPE html>

Data attribute reference

data-role=“”

Structure
<div data-role="page">
<div data-role="header”>
Header
</div>
<div data-role="content">
Content
</div>
<div data-role="footer”>
Footer
</div>
</div>

Toolbar - Headers

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

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

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

Input - Textarea

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

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

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

Slider

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

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

Listview

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

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

data-theme=“”

http://jquerymobile.com/test/docs/content/content-themes.html

data-transitional=“”

http://jquerymobile.com/demos/1.2.0/docs/pages/page-transitions.html

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

index.html
<body>


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

<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 />
contato@pablogp.com<br /><br />
All Rights reserved
</h3>
</div>

</div>

sobre.html
<body>


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

<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 />
contato@pablogp.com<br /><br />
All Rights reserved
</h3>
</div>
</div>

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>

ThemeRoller

ThemeRoller – jquerymobile.com/themeroller/

Codiqa

Codiqa – codiqa.com

jQMGallery

jQuery Mobile Gallery - jqmgallery.com

Bibliografias

http://www.jqmovel.com.br/ http://shop.oreilly.com/product/0636920020585.do

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)

“Os verdadeiros artistas criam
coisas reais e que serão usadas”
Steve Jobs

Obrigado !!
@devpablogp
www.pablogp.com

contato@pablogp.com
github.com/devpablogp

jQuery Mobile - Desenvolvimento para dispositivos móveis

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (6)

Similar to jQuery Mobile - Desenvolvimento para dispositivos móveis

Similar to jQuery Mobile - Desenvolvimento para dispositivos móveis (20)

jQuery Mobile - Desenvolvimento para dispositivos móveis