Olá Pessoal, esta é a segunda parte do pequeno tutorial sobre Jquery Mobile.
Vamos lá?
No artigo anterior onde apresentamos jQuery Mobile me cansei de dizer o simples que é desenvolver com este framework e como com pouco código podemos fazer grandes coisas. Realmente, neste artigo não vamos explorar as enormes possibilidades que nos oferecem estas bibliotecas, já que vamos fazer uma página muito básica, mas pelo menos servirá para começar a apreciar algumas de suas características comentadas anteriormente.
A continuação vamos realizar nossa primeira página básica, por um lado incluiremos os scripts para instalar o framework, e por outro veremos também qual é a estrutura de código HTML que devemos implementar para criar esta primeira página. Tudo isto nos servirá para ver como se pode fazer uma página para móveis com estrutura fundamental de cabeçalho, corpo e pé e como jQuery Mobile coloca automaticamente alguns estilos básicos.
Código HTML da página básica
Neste primeiro exercício, em lugar de comentar passo a passo como construir a página, quero mostrar diretamente qual seria o código HTML necessário para criá-la. Isto nos dará uma ideia global sobre esta estrutura de documento e depois comentarei as diferentes partes do código.
<!DOCTYPE html>
<html>
<head>
<title>Testando jQuery Mobile</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
Página para móveis
</div>
<div data-role="content">
Esta é a versão para móveis de meu website
</div>
<div data-role="footer">
Contata e o que for...
</div>
</div>
</body>
</html>
A continuação podemos ver comentado, parte por parte, todo o código HTML anterior.
Isto é HTML5!
Como foi dito no artigo anterior, jQuery Mobile funciona com HTML5. Ou seja, para poder dispor de todas as funcionalidades do framework devemos escrever código HTML5.
Por isso, poderemos apreciar como se define o doctype de HTML5 na primeira linha de código.
<!DOCTYPE html>
Etiqueta META Viewport
O segundo ponto que salta à vista é a etiqueta META “viewport”, que serve para dizer a jQuery que deve mostrar a página com escala 1.
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
Esta etiqueta deve ser indicada porque alguns dispositivos realizam uma escala automática da página para mostrá-la em algumas dimensões que não têm razão para serem as desejadas Em alguns casos se utiliza uma largura virtual de 900 pixels aproximadamente, o que faz com que nossa página possa ser vista em escala. Com esta etiqueta, a largura da página será igual à largura da tela do dispositivo.
No entanto, esta definição não entrará em conflito com a possibilidade de fazer zoom na página, o que é interessante do ponto de vista da acessibilidade. O único problema desta etiqueta é que em iOS não se atualiza automaticamente a largura da página ao mudar a orientação do dispositivo (de horizontal para vertical ou vice-versa), com o que as dimensões podem não se ajustar à tela quando alteremos a posição do móvel. Segundo indicado na documentação, fica pendente corrigir este assunto em próximas versões do framework.
Incluir os scripts do framework
A continuação vemos todas as etiquetas para instalar jQuery Mobile na nossa página. Consiste em um link para uma folha de estilos CSS e a inclusão dos scripts Javascript de jQuery e jQuery Mobile.
<link rel=”stylesheet” href=”http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css” />
<script type=”text/javascript” src=”http://code.jquery.com/jquery-1.6.4.min.js”></script>
<script type=”text/javascript” src=”http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js”></script>
Na documentação do framework nos recomendam fazer os links com os scripts alojados no CDN (Content Delivery Network) de jQuery, para um melhor desempenho. Porém, se preferirmos também podemos alojá-los em nosso próprio servidor.
Definir a estrutura de página e os data-role
A continuação, podemos observar no corpo da página, dentro da etiqueta BODY. Veremos que a página básica inclui diversas divisões DIV com distintas utilidades, definidas pelos atributos data-role. Estas formam a estrutura da página básica em jQuery Mobile.
Para começar veremos que existe uma divisão que engloba toda a estrutura da página básica, com o data-role=”page”.
<div data-role=”page”>
Dentro dessa divisão teremos outros DIV com os três roles fundamentais de toda a página jQuery Mobile: cabeçalho, corpo e pé.
O cabeçalho é indicado com o data-role=”header”.
<div data-role=”header”>
Colocamos o corpo da página com um data-role=”content”.
<div data-role=”content”>
Finalmente, o pé de página se indica com um data-role=”footer”.
<div data-role=”footer”>
Com isto terminamos com a página básica.
Conclusão
O mais certo é que você não tenha ficado muito surpreso com esta primeira página jQuery Mobile. Realmente não tem nada de especial e certamente, se a virmos em um navegador, não observaremos nada que resulte espetacular. Entretanto, no artigo seguinte que publicaremos em CódigoSimples.net modificaremos esta página básica, para aprender como é a estrutura da página multipágina de jQuery Mobile, que já nos permitirá mostrar algumas das características interessantes deste framework.
Quero, no entanto, que se considere que jQuery Mobile já nos alterou um pouco o aspecto de nossa página básica a partir de alguns estilos no cabeçalho e no pé, que são meramente automáticos. Novamente, peço um pouco de paciência para conhecer em detalhes todas os benefícios anunciados deste framework em futuros artigos.
E você, está gostando do nosso tutorial?
Deixe suas sugestões nos comentários! 🙂
Ah, já deu aquela passada na nossa Fã Page?
