No ano passado fiz a aquisição de um Xperia X10, excelente smartphone com Android. Como sou bem curioso, mexi em tudo que podia. Peguei root, fiz o upgrade para o Android Gingerbread e até instalei o ambiente de desenvolvimento de aplicativos.

Fiz os testes com o JQuery Mobile e constatei que apesar de ainda estar em versão alpha já dá para brincar bastante. Nesse post vou mostrar como fazer algumas telas simples para começarmos a entender como o JQm (JQuery Mobile) funciona.

Algumas pessoas já me perguntaram, como eu faço um site para iPhone, Android, Blackberry e outros smartphones? o JQuery Mobile pode de ajudar (e muito!) a fazer isso.

Para utilizar o JQuery mobile você precisa incluir três coisas no seu HTML:

Você pode baixar um arquivo compactado com o JS, o CSS com as imagens da UI da versão mobile clicando aqui e depois é só baixar o JQuery 1.5 aqui

Vamos ao primeiro exemplo de um index.html:
 HTML |  copy code |? 
01
02
< !DOCTYPE html> 
03
<html> 
04
    <head> 
05
    <title>Primeira Página</title> 
06
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>
07
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>
08
     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" />
09
</head> 
10
<body> 
11
<div data-role="page">
12
    <div data-role="header">
13
        <h1>Primeira página</h1>
14
    </div>
15
    <div data-role="content">	
16
        <p>Essa é sua primeira página para dispositivos móveis</p> 
17
    </div>
18
</div>
19
</body>
20
</html>
21


Para ver o exemplo funcionando clique aqui.

Você deve estar se perguntando, mas que atributo data-role é esse?
A partir do HTML5 você pode colocar metadados nas suas tags usando o data-*
Está disponivel nesse outro post informações sobre esse assunto...

Então a essência do JQuery Mobile é basicamente essa, utilizar o atributo data-* para as diferentes funcionalidades e aparências.

Alguns atributos data-* que podem ser utilizados nas diferentes tags:


    	
  • data-role
    • 
	
  • data-theme
    • 
	
  • data-icon
    • 
	
  • data-transition
    • 



Esse post foi apenas para apresentar esse novo recurso que a comunidade desenvolvedora do JQuery está preparando, espero fazer posts mais aprofundados sobre esse assunto em breve.

Lembre-se que o JQuery Mobile ainda está em versão alpha, ainda não é uma boa idéia usa-lo em produção

Caso tenha interesse de ver meus testes, acesse por seu celular endereço:

http://www.mauriciofaustino.com/mobile/



								
Tags: , , , , , , 

				

					
												Esse post foi publicado  de terça-feira, 29 de março de 2011 às 20:01, e arquivado em JQuery Mobile.						Você pode acompanhar os comentários desse post através do feed RSS 2.0. 

													Você pode comentar ou mandar um trackback do seu site pra cá.