Design de aplicativos para dispositivos móveis / Guia para iniciantes da Dev para o jQuery Mobile

Nos últimos dois a três anos, vimos um tremendo crescimento no suporte a navegadores e sistemas operacionais para websites para dispositivos móveis. Mais notavelmente as plataformas iOS e Android da Apple vêm à mente. Mas outros como PalmOS e Blackberry ainda estão no mix. Até recentemente, era muito difícil combinar um único tema para dispositivos móveis em todas essas plataformas.

O JavaScript foi um começo, mas até agora não existe uma biblioteca verdadeiramente unificada. O jQuery Mobile pega todos os melhores recursos do jQuery e os transporta para uma fonte da Web baseada em dispositivos móveis. A biblioteca é mais como uma estrutura que inclui animações, efeitos de transição e estilos CSS automáticos para elementos HTML básicos. Neste guia, espero apresentar a plataforma de uma maneira que você possa se sentir confortável para projetar seus próprios aplicativos móveis da jQuery.

Recursos e suporte ao sistema operacional

A razão pela qual sugiro aprender o jQuery Mobile sobre qualquer outro framework é a simplicidade. O código foi construído no núcleo do jQuery e tem uma equipe ativa de desenvolvedores escrevendo scripts e editando bugs. Entre os muitos recursos, estão o suporte a HTML5, links de navegação alimentados por Ajax e manipuladores de eventos por toque / furto..

O suporte varia entre os telefones e é dividido em um gráfico de 3 categorias do A-C. A é o nível superior que possui suporte total ao jQuery Mobile, B tem tudo, exceto Ajax, enquanto C é HTML básico com pouco ou nenhum JavaScript. Felizmente, a maioria dos sistemas operacionais populares é totalmente suportada - adicionei uma lista abaixo de apenas alguns exemplos.

• IOS da Apple 3-5
• Android 2.1, 2.2, 2.3
• Windows Phone 7
• Blackberry 6.0, Blackberry 7
• Palm WebOS 1.4-2.0, 3.0

Se você quiser saber mais, tente ler em sua página oficial de documentos. Não está escrito em rabiscos e realmente se sente muito fácil de acompanhar. Agora vamos nos concentrar no básico de escrever uma página móvel do jQuery e como podemos construir um pequeno aplicativo!

O modelo HTML padrão

Para que seu primeiro aplicativo para dispositivos móveis funcione, há um modelo definido com o qual você deve começar. Isso inclui o código base do jQuery, juntamente com o JS e CSS móveis, todos hospedados externamente a partir do jQuery CDN. Confira meu código de exemplo abaixo.

Os únicos elementos estrangeiros aqui devem ser as duas metatags. O topo janela de exibição A tag atualiza os navegadores móveis para usar um efeito de zoom total. Configurando o valor largura = largura do dispositivo definirá a largura da página exatamente na largura da tela do telefone. E o melhor de tudo, isso não desabilita os recursos de zoom, já que o jQuery Mobile pode se adaptar à mudança de layouts.

A próxima meta tag X-UA-Compatible apenas força o Internet Explorer a renderizar o HTML em sua iteração mais recente. Os navegadores mais antigos e especialmente os dispositivos móveis tentam contornar erros de renderização desconhecidos.

Construindo o Conteúdo Corporal

Agora é aí que o jQuery mobile pode ser complicado. Cada página HTML não é necessariamente uma página no site para dispositivos móveis. O framework faz uso dos atributos de dados do HTML5, que você pode criar por um capricho acrescentando dados- antecipadamente. De maneira similar data-role = "page" pode ser definido para várias divs em um único arquivo HTML, oferecendo mais de uma página.

Você moveria entre essas páginas com links de âncora e um ID exclusivo. Essa configuração é uma boa ideia para aplicativos básicos e simples. Se você precisa apenas de 3 a 5 páginas, por que não armazenar tudo em um único arquivo? A menos que você tenha muito conteúdo escrito, caso em que tente usar o PHP para economizar tempo.

Verifique o exemplo de código abaixo se você estiver perdido.

 
 
 
Barra de título superior
 
 
 
Mostrar outra página??
 
dica: clique no botão abaixo!
 
Sobre nós
 
  
 
 
 
Page 2 Aqui
 
 
 
apenas algum conteúdo extra também.
 
Quer dizer, você pode volte a qualquer momento.
 
 
   

Dê uma olhada no link de âncora da página de índice por um momento. Observe que eu adicionei o atributo data-role = "button" para configurar o link como um botão. Mas em vez de usar os estilos padrão, incluímos data-theme = "c". Isso alterna entre 1 de 5 (temas a-e) modelos que vêm empacotados por padrão como estilos CSS dentro do jQ Mobile.

Meu botão também abrange toda a largura da página. Para remover o comportamento, precisamos definir o elemento de bloco para exibição in-line. O atributo para fazer isso é data-in-line = "true" que você poderia acrescentar em qualquer botão de ancoragem.

Barras de cabeçalho e rodapé

Na parte superior e inferior de seus aplicativos, você deve anexar o conteúdo do cabeçalho e do rodapé. Esse estilo de design é frequentemente atribuído a aplicativos iOS que se tornaram populares usando a App Store da Apple. O jQ Mobile usa atributos de data-role para definir o cabeçalho, o rodapé e o conteúdo da página. Vamos dar uma breve olhada nessas áreas.

Botões de barra superior

Por padrão, a barra superior suporta um conjunto de dois (2) links de maneira semelhante a outros aplicativos móveis. O padrão do iOS é usar um “de volta” botão para a esquerda e muitas vezes um “opções” ou “config” a direita.

 
 Definições 
Page 2 Aqui
 
 

O código acima está focando apenas no contêiner div para nossa página Sobre junto com o conteúdo do cabeçalho. O atributo HTML adicional data-add-back-btn = "true" só funcionará quando adicionado a uma função de dados da página. O objetivo é incluir automaticamente um botão Voltar que funcione de forma semelhante ao botão Voltar do seu navegador..

Poderíamos ter adicionado um botão de volta manualmente com código semelhante ao usado na área de conteúdo. Mas eu sinto que isso leva muito mais tempo para configurar, especialmente em várias páginas. Todos os links de âncora dentro da seção de cabeçalho serão padronizados nas posições dos botões esquerdo / direito. Usando class = "ui-btn-right" isso reposicionou meu botão Configurações para que haja espaço livre para o botão Voltar. Também estou usando os estilos de tema secundário para dar um pouco de coragem extra!

Rodapé de Navegação

A área de rodapé não é muito útil no início. É um lugar onde você pode armazenar material protegido por direitos autorais e links mais importantes, mas isso pode ser facilmente adicionado na parte inferior de sua área de conteúdo. Então, o que é bom usar o rodapé?

Bem, o melhor exemplo que já vi utiliza o espaço de rodapé como um sistema de navegação, onde os links das guias aparecem para controlar a navegação da página. Há muitas opções onde você pode selecionar efeitos de tela cheia, adicionar ícones, ajustar o posicionamento e alguns outros atributos também. Mas vamos apenas construir um simples rodapé nav com 3 botões para ter uma idéia de como isso funciona.

• Visualizar demonstração ao vivo

Então aqui está um código de rodapé para a seção sobre a página. data-role = "navbar" deve ser adicionado ao elemento recipiente que contém uma lista não ordenada e NÃO ao próprio elemento UL. Cada link na lista é tratado como uma barra de guias, que é dividida igualmente com base no número total de links. A classe adicional de ui-corpo-b apenas acrescenta efeitos estéticos à medida que trocamos entre os poucos estilos disponíveis.

Se você notar no primeiro botão eu tenho o atributo direção de dados = "reversa". Embora eu possa usar a configuração do botão Voltar como antes para retornar à página inicial, usei o ID da página de #índice. Por padrão, a janela do aplicativo faz a transição para a direita, o que parece bastante brega, já que você espera que a animação se mova para trás. Você pode brincar com mais desses efeitos animados se tiver tempo. Confira a página de informações sobre transições na documentação do jQuery.

Páginas Ajax e Dinâmicas

O primeiro segmento realmente abriu os pontos-chave para a criação de um aplicativo móvel com o jQuery. Mas eu quero começar um novo aplicativo que carrega dados de uma página externa. Eu vou estar usando um script PHP muito simples para atingir o $ _REQUEST [] variável e exibir um pequeno Dribbble tiro em conformidade. O screenhow abaixo deve dar uma ideia do que vamos construir.

Primeiro, farei com que uma página index.html seja definida no modelo padrão. Para esta tela inicial, estou usando uma configuração de exibição de lista para exibir cada link em ordem. Isso é feito na área de conteúdo com um data-role = "listview" atributo no contêiner da lista. Cortando o mesmo material de cabeçalho de antes, adicionei todo o meu código desta nova página de índice abaixo.

 
 
 
Fotos de outubro de 2011
 
 
 
 
Primeira imagem
 
Segunda imagem
 
Terceira imagem
 
Quarta imagem
 
 
  
   

Cada um dos links de âncora na minha visão de lista aponta para o mesmo arquivo - index.php. Mas estamos passando o parâmetro imgid como uma variável de solicitação. No arquivo image.php, pegamos o ID e testamos com 4 valores pré-definidos. Se houver alguma correspondência, usaremos o URL e o título da imagem correspondente, caso contrário, exibiremos apenas um tiro padrão do Dribbble.

Script do Carregador de Imagens

O script image.php ainda tem o modelo padrão do jQuery para dispositivos móveis incluído no código. Na verdade, compartilha um cabeçalho e rodapé muito semelhante, exceto pela adição de nosso atributo back link data-add-back-btn = "true". Observe que este botão só aparecerá se chegarmos de index.html primeiro! Tente carregar diretamente image.php e nada aparecerá, pois não há “de volta” para mover para.

Eu acho que podemos fazer um pouco mais de sentido do código examinando primeiro minha lógica PHP. Nós usamos um interruptor / caso método para verificar os 4 IDs diferentes e fornecer um título de cabeçalho, um URL de imagem e um link de origem do artista original.

Tudo parece bastante simples - mesmo um novato PHP dev deve ser capaz de acompanhar! E se você não entender, não é importante para o código jQuery, então não se preocupe. Devemos mudar agora e dar uma olhada no modelo que criei nesta nova página. Todo o código HTML é adicionado após todo o bloco PHP acima. Eu usei o ID de “imagens” para o contêiner e até mesmo configurar o cabeçalho para alterar a cada nova foto.

 
 
 
 
 
 Visualizar o original
 
 
  
 

Você provavelmente pode ver como essa demonstração é simplista. Mas todo o propósito é demonstrar a escalabilidade do jQuery mobile. O PHP pode ser facilmente adicionado ao mix e você pode produzir alguns aplicativos realmente interessantes com apenas algumas horas de desenvolvimento.

Design extravagante com miniaturas de lista

Um último efeito adicionado que podemos implementar é o uso de miniaturas para animar a página de listagem. Eu também vou dividir o texto em um título e caixa de descrição para exibir o título da obra de arte e o nome do artista.

Para começar, abra o Photoshop e crie um documento de 80 × 80 px. Vou redimensionar rapidamente cada imagem e salvar miniaturas para corresponder a cada uma delas. Em seguida, atualizando os itens de exibição de lista, devemos incluir mais alguns elementos.

Confira o código abaixo e meu exemplo de demonstração para ver o que quero dizer.

[Preview Live Demo]

 
 
  
Tarefas Wunderkit
 
de Sebastian Scheerer
 
  
Colleeeeeeeeeeeeege
 
de Scott Hill
 
  
Aplicativo do fórum para o Facebook
 
por Ionut Zamfir
 
  
Twitter
 
de Sam Jones
 
 
 

As aulas para ui-li-título e ui-li-desc são adicionados por padrão na folha de estilo do jQuery Mobile. Isso é semelhante à classe de imagem ui-li-thumb que redimensiona automaticamente cada barra de exibição de lista de acordo com a altura da imagem. Agora a partir daqui você pode construir mais no frontend com animações, efeitos de página, folhas de estilo, etc.

Ou, alternativamente, você pode começar a construir um sistema de back-end para carregar novas imagens e aparar automaticamente miniaturas para incluir na lista. Há tanta flexibilidade com o jQuery Mobile que você quase não pode rotulá-lo apenas como uma biblioteca JavaScript. É mais uma estrutura inteira de HTML5 / CSS / jQuery para criar aplicativos móveis rápidos e dimensionáveis.

Conclusão

Ao escrever este artigo, a equipe do jQuery Mobile lançou oficialmente a RC1.0 da biblioteca de códigos. Isso significa que a maioria, se não todas, as principais correções de bugs foram eliminadas e agora os testadores estão se preparando para uma versão completa. Por causa disso, você não encontrará muitas informações na web.

Mas, à medida que os meses avançam, os desenvolvedores da web certamente vão perceber a tendência. Aplicativos móveis e até mesmo layouts de web móveis estão crescendo em popularidade com o enorme aumento de smartphones. Os desenvolvedores da Web não têm tempo para aprender uma linguagem de programação completa para criar aplicativos Android / iOS. Assim, o jQuery Mobile é uma alternativa esbelta que inclui suporte para a maioria dos softwares da indústria móvel, e continua crescendo a cada dia com uma comunidade ativa de desenvolvedores..