Pixel do facebook

Muitas vezes é só um protótipo navegável que ajuda o cliente ou a equipe do projeto a chegar a algum lugar, seja na definição do sistema ou seja no entendimento do que será entregue. No entanto um protótipo navegável costuma demorar muito mais que um esquema wireframe ou um leiaute no editor de imagens para ficar pronto. Sendo assim, para ajudar nossos amigos desenvolvedores, vamos mostrar a seguir uma forma rápida de criar uma demonstração para o chefe ou cliente.

Antes de falar do protótipo em si, precisamos explicar de que se trata a tecnologia de base. Saiba mais nos próximos parágrafos.

O framework jQuery Mobile é um sistema totalmente gratuito de interface do usuário baseado em HTML5 projetado para criar sites e aplicativos responsivos acessíveis em todos os smartfones, tablets e desktops. Ele é estruturado com as bibliotecas javascript jQuery e jQuery UI, e dessa forma oferece navegação Ajax com transições de página, eventos de toque e vários widgets. Seu código leve é construído com aprimoramento progressivo, e além disso cria um design flexível e fácil de usar.

Pronto! A partir desse momento você já conhece os conceitos essenciais sobre o framework JQuery Mobile e pode avançar para a criação do protótipo navegável nos próximos parágrafos.

Por onde eu começo uma página JQuery Mobile?

Uma página no jQuery Mobile consiste em um elemento com um atributo data-role = “page”. Dentro do contêiner “page”, qualquer marcação HTML válida pode ser usada, mas para páginas típicas no jQuery Mobile, os filhos imediatos de uma “página” são divs com data-role = “header”, class = “ui-content”, e data-role = “rodapé”.

O requisito obrigatório é chamar os scripts JQuery e o tema CSS no <head> e depois criar o encapsulador de página dentro do <body> para suportar o sistema de navegação. Portanto, o resto é opcional.

<!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/[version]/jquery.mobile-[version].min.css" />
	<script src="http://code.jquery.com/jquery-[version].min.js"></script>
	<script src="http://code.jquery.com/mobile/[version]/jquery.mobile-[version].min.js"></script>
</head>

<body>
    <div data-role="page">
	...
    </div>
</body> </html>

Além disso, uma página pode ser estilizada como uma caixa de diálogo que faz a página parecer com uma sobreposição de estilo modal. Para dar uma página padrão a aparência de um diálogo modal, adicione o atributo data-rel = “dialog” ao link. Transições também podem ser definidas em links de diálogo.

Nosso Exemplo de Protótipo Navegável

Nosso protótipo navegável é uma página de amostra para pizzaria com cabeçalho, painel embutido com menu e uma lista  pesquisável de produtos. Observe o print abaixo:

Print do Protótipo Navegável

Continue essa leitura para assim aprender a fazer uma página dessa no passo a passo logo adiante.

Passo 1: Crie o arquivo index.html e a estrutura básica JQuery Mobile

<html>
<head>
<title>Delivery Vitória</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">

<!-- O próximo conteúdo será inserido aqui-->
</div>

</body>
</html>

 

Passo 2: Crie o painel com menu embutido respeitando a marcação JQuery Mobile

<div data-role="panel" id="painel-1">
<ul data-role="listview">
<li><a href="#">Meu Perfil</a></li>
<li><a href="#">Últimos Pedidos</a></li>
<li><a href="#">Preferências</a></li>
<li><a href="#">Sair</a></li>
</ul>
<div style="margin-top: 32px;">
<a data-rel="close" class="ui-btn ui-corner-all ui-icon-cancel">
Fechar
</a></div>
</div>

Você pode observar no código acima que os atributos data-role indicam para o framework qual é a função daquele contêiner e o atributo data-rel também da significado aos elementos html. As classes CSS como ui-btn e ui-icon-cancel estilizam automaticamente os itens da página de acordo com o tema css invocado no <head>.

Passo 3: Estruture o restante do conteúdo, mas antes entenda o sistema de grades

A estrutura do jQuery Mobile fornece uma maneira simples de construir colunas baseadas em CSS que também podem ser responsivas.

O sistema de grades

As grades têm largura de 100%, são completamente invisíveis (sem bordas ou planos de fundo) e não têm preenchimento ou margens, portanto não interferem nos estilos de seus elementos internos. Dentro do contêiner de grade (grid), os elementos filho são designados de forma sequencial ui-block-a / b / c / d / e, o que faz com que cada elemento “block” flutue lado a lado, formando a grade.

<div class="ui-grid-a">
<div class="ui-block-a"><div class="ui-bar ui-bar-a" style="height:60px">Block A</div></div>
<div class="ui-block-b"><div class="ui-bar ui-bar-a" style="height:60px">Block B</div></div>
</div>

Para construir um layout de duas colunas (50/50%), comece com um contêiner com uma classe de ui-grid-a e inclua dois contêineres filhos dentro dele classificados com ui-block-a para a primeira coluna e ui-block-b para segunda, como no exemplo acima. Essa ideia segue por toda a estruturação do leiaute, sendo que por exemplo, uma grade de cinco colunas, 20/20/20/20/20% é criada especificando class = ui-grid-d no pai e adicionando blocos até ui-block-e.

Agora sim: monte o cabeçalho com o menu e estruture as grades


<div data-role="header">
<div>
<a href="#painel-1" class="ui-btn-left ui-btn ui-btn-inline ui-mini ui-corner-all ui-btn-icon-left ui-icon-user">
Vitória Ketillin
</a>
<h1 style="padding-top: 16px; text-align: center;">Delivery Vitória</h1>
</div></div>

<div role="main" class="ui-content">

<div class="ui-grid-a ui-responsive">
<div class="ui-block">
<div style="overflow: hidden; height: 320px;">
<img src="alimentos-banner.jpg" alt="Peça agora sua comida" style="width: 130%;"/>
</div>
</div>
</div>

<div class="ui-grid-a ui-responsive">

<div class="ui-block-a">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sit amet cursus velit,
pretium faucibus libero. Donec orci mi, interdum sodales tristique at, finibus dapibus quam.
Etiam diam justo, laoreet vitae bibendum suscipit, euismod non metus.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Nunc pulvinar orci ac eros semper vehicula. Morbi rhoncus lacus in dui imperdiet pellentesque.
In cursus, tellus et rutrum hendrerit, tellus neque aliquet erat, et lacinia eros libero ac eros.
</p>
</div>
<div class="ui-block-b"><ul data-role="listview" data-filter="true" data-filter-placeholder="Pesquise no cardápio" data-inset="true">
<li><a href="#">
<img src="https://pbs.twimg.com/profile_images/740077986578202625/-89d2w6X_400x400.jpg">
<h2>Calabresa</h2>
<p>Calabresa, cebola e borda de cheddar</p></a>
</li>
<li><a href="#">
<img src="http://www.pie-eyedpizzeria.com/img/food/pizza-06.jpg">
<h2>Marguerita e Cogumelo</h2>
<p>Mista de queijo, manjericão e cogumelos.</p></a>
</li>
<li><a href="#">
<img src="http://www.pcpizza.com/wp-content/uploads/2015/04/ClubComboSub.png">
<h2>Lanche natural</h2>
<p>Pão especial da casa, peito de peru, cebola e tomate</p></a>
</li>
</ul></div>
</div>

No trecho de código acima já foi inserida uma imagem, um texto e uma lista de produtos. Outrossim, observe o atributo data-filter=true em uma <ul> data-role=listview. É esse atributo que faz a lista ser filtrável. Simples assim! É o que faz ser tão simples criar uma página JQuery Mobile.

Conclusão

Ao final sua página ficará assim:

Navegação na página de pizzaria do protótipo navegável

Existe um site com demonstrações de todos os recursos do framework JQuery Mobile onde você pode avaliar todos os recursos para construir excelentes protótipos e sistemas inteiros. Mas antes de conferir esse site, baixe os arquivos, aprenda editando em seus programa favorito e lembre-se de se cadastrar no formulário abaixo para receber mais dicas nossas sobre desenvolvimento web.