jquery mobile - desenvolvimento para dispositivos móveis
DESCRIPTION
Palestra ministrada no Encontro de Tecnologia 2012 da Universidade Simonsen.TRANSCRIPT
![Page 2: jQuery Mobile - Desenvolvimento para dispositivos móveis](https://reader036.vdocuments.net/reader036/viewer/2022081518/54c800e74a7959786d8b4598/html5/thumbnails/2.jpg)
Pablo Garrido
???
![Page 4: jQuery Mobile - Desenvolvimento para dispositivos móveis](https://reader036.vdocuments.net/reader036/viewer/2022081518/54c800e74a7959786d8b4598/html5/thumbnails/4.jpg)
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](https://reader036.vdocuments.net/reader036/viewer/2022081518/54c800e74a7959786d8b4598/html5/thumbnails/5.jpg)
![Page 6: jQuery Mobile - Desenvolvimento para dispositivos móveis](https://reader036.vdocuments.net/reader036/viewer/2022081518/54c800e74a7959786d8b4598/html5/thumbnails/6.jpg)
Suporte
![Page 7: jQuery Mobile - Desenvolvimento para dispositivos móveis](https://reader036.vdocuments.net/reader036/viewer/2022081518/54c800e74a7959786d8b4598/html5/thumbnails/7.jpg)
`Por que mobile ?
![Page 8: jQuery Mobile - Desenvolvimento para dispositivos móveis](https://reader036.vdocuments.net/reader036/viewer/2022081518/54c800e74a7959786d8b4598/html5/thumbnails/8.jpg)
6 bilhões de pessoas no mundo possuem telefone
![Page 9: jQuery Mobile - Desenvolvimento para dispositivos móveis](https://reader036.vdocuments.net/reader036/viewer/2022081518/54c800e74a7959786d8b4598/html5/thumbnails/9.jpg)
+ 1 bilhão utilizam smartphones
![Page 10: jQuery Mobile - Desenvolvimento para dispositivos móveis](https://reader036.vdocuments.net/reader036/viewer/2022081518/54c800e74a7959786d8b4598/html5/thumbnails/10.jpg)
Por quê ?
![Page 11: jQuery Mobile - Desenvolvimento para dispositivos móveis](https://reader036.vdocuments.net/reader036/viewer/2022081518/54c800e74a7959786d8b4598/html5/thumbnails/11.jpg)
Multidispositivo
![Page 12: jQuery Mobile - Desenvolvimento para dispositivos móveis](https://reader036.vdocuments.net/reader036/viewer/2022081518/54c800e74a7959786d8b4598/html5/thumbnails/12.jpg)
Multiplataforma
![Page 13: jQuery Mobile - Desenvolvimento para dispositivos móveis](https://reader036.vdocuments.net/reader036/viewer/2022081518/54c800e74a7959786d8b4598/html5/thumbnails/13.jpg)
Atualizações “real-time”
![Page 14: jQuery Mobile - Desenvolvimento para dispositivos móveis](https://reader036.vdocuments.net/reader036/viewer/2022081518/54c800e74a7959786d8b4598/html5/thumbnails/14.jpg)
![Page 15: jQuery Mobile - Desenvolvimento para dispositivos móveis](https://reader036.vdocuments.net/reader036/viewer/2022081518/54c800e74a7959786d8b4598/html5/thumbnails/15.jpg)
????
![Page 16: jQuery Mobile - Desenvolvimento para dispositivos móveis](https://reader036.vdocuments.net/reader036/viewer/2022081518/54c800e74a7959786d8b4598/html5/thumbnails/16.jpg)
![Page 17: jQuery Mobile - Desenvolvimento para dispositivos móveis](https://reader036.vdocuments.net/reader036/viewer/2022081518/54c800e74a7959786d8b4598/html5/thumbnails/17.jpg)
E o melhor…
Aplicações MOBILE não precisam ser testadas no Internet Explorer
![Page 18: jQuery Mobile - Desenvolvimento para dispositivos móveis](https://reader036.vdocuments.net/reader036/viewer/2022081518/54c800e74a7959786d8b4598/html5/thumbnails/18.jpg)
![Page 19: jQuery Mobile - Desenvolvimento para dispositivos móveis](https://reader036.vdocuments.net/reader036/viewer/2022081518/54c800e74a7959786d8b4598/html5/thumbnails/19.jpg)
Números
42,23%
Fonte: http://trends.builtwith.com/javascript
![Page 20: jQuery Mobile - Desenvolvimento para dispositivos móveis](https://reader036.vdocuments.net/reader036/viewer/2022081518/54c800e74a7959786d8b4598/html5/thumbnails/20.jpg)
HTML5 Doctype
<!DOCTYPE html>
![Page 21: jQuery Mobile - Desenvolvimento para dispositivos móveis](https://reader036.vdocuments.net/reader036/viewer/2022081518/54c800e74a7959786d8b4598/html5/thumbnails/21.jpg)
Data attribute reference
data-role=“”
![Page 22: jQuery Mobile - Desenvolvimento para dispositivos móveis](https://reader036.vdocuments.net/reader036/viewer/2022081518/54c800e74a7959786d8b4598/html5/thumbnails/22.jpg)
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](https://reader036.vdocuments.net/reader036/viewer/2022081518/54c800e74a7959786d8b4598/html5/thumbnails/23.jpg)
SmartphonesUI Elements
![Page 24: jQuery Mobile - Desenvolvimento para dispositivos móveis](https://reader036.vdocuments.net/reader036/viewer/2022081518/54c800e74a7959786d8b4598/html5/thumbnails/24.jpg)
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](https://reader036.vdocuments.net/reader036/viewer/2022081518/54c800e74a7959786d8b4598/html5/thumbnails/25.jpg)
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](https://reader036.vdocuments.net/reader036/viewer/2022081518/54c800e74a7959786d8b4598/html5/thumbnails/26.jpg)
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](https://reader036.vdocuments.net/reader036/viewer/2022081518/54c800e74a7959786d8b4598/html5/thumbnails/27.jpg)
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](https://reader036.vdocuments.net/reader036/viewer/2022081518/54c800e74a7959786d8b4598/html5/thumbnails/28.jpg)
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 29: jQuery Mobile - Desenvolvimento para dispositivos móveis](https://reader036.vdocuments.net/reader036/viewer/2022081518/54c800e74a7959786d8b4598/html5/thumbnails/29.jpg)
data-theme=“”
http://jquerymobile.com/test/docs/content/content-themes.html
![Page 30: jQuery Mobile - Desenvolvimento para dispositivos móveis](https://reader036.vdocuments.net/reader036/viewer/2022081518/54c800e74a7959786d8b4598/html5/thumbnails/30.jpg)
data-transitional=“”
http://jquerymobile.com/demos/1.2.0/docs/pages/page-transitions.html
![Page 31: jQuery Mobile - Desenvolvimento para dispositivos móveis](https://reader036.vdocuments.net/reader036/viewer/2022081518/54c800e74a7959786d8b4598/html5/thumbnails/31.jpg)
M
ãonaassa
![Page 32: jQuery Mobile - Desenvolvimento para dispositivos móveis](https://reader036.vdocuments.net/reader036/viewer/2022081518/54c800e74a7959786d8b4598/html5/thumbnails/32.jpg)
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](https://reader036.vdocuments.net/reader036/viewer/2022081518/54c800e74a7959786d8b4598/html5/thumbnails/33.jpg)
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](https://reader036.vdocuments.net/reader036/viewer/2022081518/54c800e74a7959786d8b4598/html5/thumbnails/34.jpg)
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](https://reader036.vdocuments.net/reader036/viewer/2022081518/54c800e74a7959786d8b4598/html5/thumbnails/35.jpg)
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 36: jQuery Mobile - Desenvolvimento para dispositivos móveis](https://reader036.vdocuments.net/reader036/viewer/2022081518/54c800e74a7959786d8b4598/html5/thumbnails/36.jpg)
ThemeRoller
ThemeRoller – jquerymobile.com/themeroller/
![Page 39: jQuery Mobile - Desenvolvimento para dispositivos móveis](https://reader036.vdocuments.net/reader036/viewer/2022081518/54c800e74a7959786d8b4598/html5/thumbnails/39.jpg)
Bibliografias
http://www.jqmovel.com.br/ http://shop.oreilly.com/product/0636920020585.do
![Page 40: jQuery Mobile - Desenvolvimento para dispositivos móveis](https://reader036.vdocuments.net/reader036/viewer/2022081518/54c800e74a7959786d8b4598/html5/thumbnails/40.jpg)
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](https://reader036.vdocuments.net/reader036/viewer/2022081518/54c800e74a7959786d8b4598/html5/thumbnails/41.jpg)
Obrigado !!@devpablogp
[email protected]/devpablogp
www.pablogp.com
“Os verdadeiros artistas criam
coisas reais e que serão usadas”
Steve Jobs