Introdução ao framework jQuery Mobile

Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Para efetuar o download você precisa estar logado. Clique aqui para efetuar o login
Confirmar voto
0
 (3)  (0)

Veja neste artigo uma introdução ao framework CSS/JavaSCript jQuery Mobile, que permite desenvolver páginas web adequadas a dispositivos móveis e independentes de plataforma.

Introdução

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 CSS 3, 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.

  • A: Dispositivos que tem suporte total às funcionalidades desenvolvidas pelo framework.
  • B: Diapositivos que tem suporte pleno, menos em AJAX.
  • C: 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, podemos estar acessando o seguinte link: http://jquerymobile.com/download/, 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.

Listagem1: Referenciando arquivos jQuery Mobile

<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>

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ísticaDescrição
WidthIndica a Largura da viewport
HeightIndica a altura da viewport
User-scalableIndica se o usuário poderá ou não dae zoom
Initial-scaleValor inicial para o zoom no documento
Maximum-scaleValor máximo para o zoom no documento
Minimum-scaleValor 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.

Listagem2: Arquivos externos

<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>

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.

Listagem 3: Template Básico

<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>
 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

Curso de iOS

Curso de Windows Phone - Instrodução

Curso de jQuery Mobile

Curso de Web Design Mobile

 
Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Receba nossas novidades
Ficou com alguma dúvida?