Artigos HTML e CSS Introdução ao framework jQuery Mobile

Neste artigo vamos tratar sobre jQuery Mobile.Iremos ver sua definição e as configurações básicas para começarmos a desenvolver com esse framework. jQuery Mobile é um framework para desenvolvimento web, personalizado para a interação por toque, excelente para a criação de aplicações para dispositivos móveis.

Foi desenvolvido para fornecer mecanismo capaz de nos permitir a criação de sistemas unificados de interface do usuário, com base em HTML5 e CSS3, sendo capaz de ser eficiente em todas as plataformas móveis.Foi criado com base nas bibliotecas jQuery e jQuery UI. Ambos os sistemas não incluem apenas ferramentas para a criação de layout como divisão em colunas, layout responsivo, etc, mas também disponibilizam um excelente conjunto de controles (widgets) como, por exemplo, sliders, toggles, abas etc. Mantendo o principio de fazer mais escrevendo menos com a finalidade de criarmos aplicações únicas para todos os dispositivos móveis e sistemas operacionais.

Características

  • Seu desenvolvimento se deu (dá) com base na biblioteca jQuery, adicionando os mecanismos e as funcionalidades da jQuery UI.A sua sintaxe é baseada na da biblioteca jQuery, assim nos proporcionando aprendizagem mais rápida, sem a necessidade de programação sofisticada, já que usa o padrão da programação com jQuery.
  • Tamanho pequeno e com mínima necessidade de imagens, proporcionando assim um carregamento mais rápido.
  • Sua arquitetura modular nos disponibiliza a seleção personalizada dos componentes de acordo com as necessidades de cada uma de nossas aplicações.
  • Tem compatibilidade com a maioria dos dispositivos móveis, tablets, e-readers e também das plataformas desktop: iOs, Android, Blackberry, Palm WebOs, Nokia/Sybian, Windows phone 7, MeeGo, Opera Mobile/Mini, FireFox Mobile, Kindle, Nook e todos os outros navegadores modernos com suporte aos três grupos de classificação dos navegadores.
  • Utiliza a HTML5 para a estrutura e inserção de comportamento nas páginas, melhorando assim nosso resultado em desenvolvimento ágil e tendo a mínima necessidade de utilizar script.
  • Sistema de navegação baseado em AJAX, que nos permite fazer animações de transação de páginas sem comprometermos a funcionalidade de botões de retrocesso, o armazenamento de favoritos e o controle de URLs.
  • Contém também funcionalidades para acessibilidade com adicionamento de mecanismos da WAI-ARIA, fornecendo correta leitura das páginas por leitores de tela, como o VoiceOver no iOs.
  • Suporte a interação via toque, para os eventos de mouse e de foco com a utilização de uma API simples.
  • Contém um conjunto de widgets para interface de usuário personalizado para interação por toque, estilizáveis, fáceis de usar, multiplataforma e com capacidade de substituir controles nativos.
  • Framework para a utilização de temas, ThemeRoller, personalizável e de fácil utilização.
  • Utiliza uma API própria, robusta e completa, capaz de fornecer funcionalidades para desenvolvimento de scripts para personalização de todos os mecanismos do framework.

Suporte

jQuery Mobile é uma ferramenta capaz de desenvolver aplicações que sejam suportadas pela grande maioria dos modernos navegadores desktop e dispositivos móveis. Isso se dá graças aos princípios da incrementação progressiva e da degradação graciosa, destinados a não bloquearem o acesso aos conteúdos, levando em conta que navegadores antigos e dispositivos com limitações são capazes também de renderizar consideravelmente as aplicações desenvolvidas com o jQuery Mobile.

Para facilitar o suporte, o grupo de desenvolvimento do framework jQuery Mobile dividiu os diversos dispositivos móveis em três grupos, nomeando-os da seguinte maneira: A, B e C, definindo essas três classes da seguinte maneira.

  1. Dispositivos que tem suporte total às funcionalidades desenvolvidas pelo framework.
  2. Diapositivos que tem suporte pleno, menos em AJAX.
  3. Dispositivos que tem apenas disponibilidade para as funcionalidades básicas.

Módulos

O jQuery Mobile framework foi criado adotando uma arquitetura modular e esses módulos foram divididos em dois grandes grupos, que são: componentes e API. Abaixo podemos ver como foram definidos esses dois grupos.

Módulo Componentes

  • Páginas e caixas de diálogos
  • Barra de ferramentas
  • Botões
  • Formatação de conteúdo
  • Elementos de formulário
  • Listas

Módulo API

  • Configurações padrão
  • Eventos
  • Métodos e unidades
  • Temas

Instalação

Para usarmos o jQuery Mobile não necessitamos realizar nenhuma instalação.Para desenvolvermos utilizando esse framework basta criarmos na marcação HTML uma referência à biblioteca jQuery, outra ao arquivo JavaScript do framework e outra para a folhas de estilo padrão do framework. Com esse procedimento teremos condições de tirar o máximo proveito das funcionalidades e principalmente da facilidade de desenvolvermos para praticamente todos os dispositivos móveis existentes no mercado, e o melhor de tudo, sem a necessidade de nos preocuparmos com modelos, marcas, plataforma ou sistema operacional.

Podemos estar realizando o download dos arquivos citados anteriormente, colocá-los em um servidor (ou em uma pasta local, por exemplo) e referenciá-los dentro no HTML. Mas os desenvolvedores do jQuery Mobile indicam que é boa prática que os links apontem para um endereço de hospedagem dos arquivos em um CDN, ou seja, uma rede de distribuição de conteúdos. Porém a escolha entre usar os arquivos baixados ou referenciá-los aos servidores CDN ficam à nossa escolha.

Download: Para realizarmos o download dos arquivos mencionados anteriormente, Clique Aqui, e descer a página até o seguinte ponto mostrado na Figura 1.
Download arquivo jQuery Mobile zip
Figura 1.Download arquivo jQuery Mobile zip

CDN

Podemos encontrar os arquivos do jQuery Mobile em três CDNs diferentes, que são os seguintes:

  • Google Libraries API
  • Microsoft Ajax Content Delivery Network
  • jQuery CDN

Mas se observamos no mesmo link que usamos para fazer o download, quase no início da página, temos uma recomendação do desenvolvedor indicando os arquivos através do servidor CDN, veja a Figura 2:

jQuery CDN recomendado
Figura 2.jQuery CDN recomendado

Mas como foi mencionado anteriormente, a escolha entre servidores CDN e a utilização de arquivos baixados fica a livre escolha de cada desenvolvedor.

Estrutura Básica

Vamos criar agora o código demonstrando um layout mínimo para estarmos desenvolvendo uma página para dispositivo móvel, e aproveitaremos para ver a maneira correta de como referenciar os arquivos necessários ao funcionamento do framework dentro desse código.

Para montar nossa estrutura, o primeiro passo é referenciarmos os arquivos necessários para o funcionamento do jQuery Mobile dentro da tag da seguinte maneira.


<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Estrutura básica JQuery Mobile.</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css"/>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js">
</script>
</head>
Listagem 1.Referenciando arquivos jQuery Mobile

Agora vamos compreender o que foi referenciado nesse código acima.

Metatag ViewPort: Essa tag é essencial para o funcionando do nosso código em dispositivos móveis.E podemos adicionar alguns atributos para definimos algumas características da viewport. Não é obrigatório incluir todos os valores para o atributo.Vejamos a tabela de atributos que podemos usar nessa tag.

Característica Descrição
Width Indica a Largura da viewport
Height Indica a altura da viewport
User-scalable Indica se o usuário poderá ou não dae zoom
Initial-scale Valor inicial para o zoom no documento
Maximum-scale Valor máximo para o zoom no documento
Minimum-scale Valor mínimo para o zoom no documento

Nessa nossa estrutura básica podemos notar que utilizamos dois desses atributos na nossa tag viewport. Usando width=device-width estamos indicando que a largura será a mesma que a largura total do dispositivo. E o outro atributo que utilizamos foi o initial-scale=1, onde determinamos que a escala inicial do zoom inicial em um.

Arquivos Externos: Para conseguirmos usar o framework precisamos referenciar três arquivos obrigatórios, seja através de servidores CDNs ou referenciando o caminho para os arquivos que fizermos download.Nessa nossa estrutura básica usamos os três arquivos de um servido CDN. Os três arquivos foram os seguintes.


<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" />
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
Listagem 2.Arquivos externos

Primeiro declaramos o link para a folha de estilo jquery.mobile.mim.css. Em seguida referenciamos a biblioteca jQuery jquery.min.js.Por último, o framework jQuery Jquery.mobile.min.js.

Template básico

Agora que já possuímos nossa estrutura básica e já conseguimos compreender como ela é formada, vamos criar um template básico no qual vamos possuir três estruturas simples: cabeçalho, corpo e rodapé.Para isso vamos inserir o seguinte código dentro da tag junto à nossa estrutura básica criada anteriormente.


<body> 
<div data-role="page"> 
    <div data-role="header"> 
           <h1>cabeçalho</h1> 
    </div><!-- /header -->

    <div data-role="content"> 
         <p>Corpo</p> 
    </div><!-- /content -->

    <div data-role="footer"> 
           <h4>Rodape</h4> 
     </div><!-- /footer -->
</div><!-- /page -->
</body>
Listagem 3.Template Básico
Página com layout básico
Figura 3. Página com layout básico

Assim terminamos mais esse artigo. Um abraço a todos e espero que o tema tenha sido do agrado de todos os leitores.

Confira alguns cursos mobile da DevMedia: