quarta-feira, 2 de fevereiro de 2011

Parte 02 Navegação Simples entre Páginas Usando jQuery Mobile

No post anterior mostrei uma estrutura simples para montar uma página de site WAP usando o jQuery Mobile. Agora irei mostrar como realizar uma navegação entre páginas usando o mesmo framework.

Vejo o código abaixo:



<html>
<head>
<title>Parte 02 jQuery Mobile</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.css" />
<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.js"></script>
</head>

<body>
<div data-role="page" id="pg01">
<div data-role="header">
<h1>Cabeçalho da página 01
</div>
<div data-role="content">
<p>Conteúdo da página 01</p>
<p>Clique <a href="pg02">aqui</a> para ver a página 02</p>
</div>
<div data-role="footer">
<h1>Rodapé da página 01</h1>
</div>
</div>

<div data-role="page" id="pg02">
<div data-role="header">
<h1>Cabeçalho da página 02</h1>
</div>
<div data-role="content">
<p>Conteúdo da página 02</p>
<p>Clique <a href="pg01">aqui</a> para ver a página 01</p>
</div>
<div data-role="footer">
<h1>Rodapé da página 02</h1>
</div>
</div>

</body>
</html>


Como você pode perceber a única coisa que fiz foi repetir aquela estrutura apresentada no post Conhecendo o jQuery Mobile . A diferença foi um id que coloquei para cada div com a propriedade data-role=”Page”. A navegação é a mesma como em HTML, usei a tag <a> </a> e pronto. O resto é feito pelo próprio jQueryMobile.

Abaixo um vídeo mostrando como ficou:






Veja aqui:
Parte 01 de jQueryMobile.

terça-feira, 1 de fevereiro de 2011

Lançamento do primeiro smartphone 3D

A empresa LG confirmou o lançamento do primeiro smartphone 3D em Barcelona na Mobile World Congress, que tem início dia 14 de fevereiro. O smartphone já com nome de Optimus 3D, virá com uma câmera onde o usuário poderá gravar em 3D e sua tela não necessita de óculos especiais.

Acompanhe o evento no site da Mobile World Congress clicando aqui.

Conhecendo o jQuery Mobile

O jQuery Mobile é um framework de interface voltada para usuários de dispositivos móveis com base no jQuery. Encontra-se agora na versão 1.0 Alpha 2.0. Ele tem suporte as plataformas: iOS; Symbian S60; Symbian UIQ; Symbian Platform; Blackberry OS; Android, Windows Mobile; webOS; bada, Maemo e MeeGo.

Existe uma tabela muito legal mostrando o suporte do framework, clique aqui para ver.

Vamos para o código:



<head>
<title>Tutorial 01 jQuery Mobile</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />
<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
</head>


Note que inseri o css e dois javascripts, um do jQuery padrão e ou o outro do tipo mobile.

Nas minhas pesquisas, percebi que a página mobile deve ter a seguinte estrutura dentro da tag
<body></body>

<body>
<div data-role="page">
<div data-role="header">
<h1>Cabeçalho</h1>
</div>
<div data-role="content">
<p>Conteúdo.</p>
</div>
<div data-role="footer">
<h4>Rodapé</h4>
</div>
</div>
</body>

A primeira div utiliza a propriedade data-role=”page” indicando que ali é o início de uma página. Logo em seguida encontramos data-role=”header”, onde seria o cabeçalho da página. Depois aparece o data-role=”content” aqui fica o conteúdo da página do site. E para finalizar, aparece o data-role=”footer”

Veja o resultado na imagem abaixo:













Assim finalizo esse post de introdução.

Estou começando os estudos do jQuery Mobile e no que eu for descobrindo irei divulgando aqui no blog.

Abaixo alguns links úteis:
jQuery Mobile 
Demos 
Download