Introdução ao framework jQuery Mobile
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.
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.
- Dispositivos que tem suporte total às funcionalidades desenvolvidas pelo framework.
- Diapositivos que tem suporte pleno, menos em AJAX.
- 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.
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:
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
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:
Artigos relacionados
-
Artigo
-
Artigo
-
Artigo
-
Artigo
-
Artigo