Introdução ao Jquery Mobile – Parte 1

0

Olá Pessoal, esta é a primeira parte do pequeno tutorial sobre Jquery Mobile.

Vamos lá?

jQuery Mobile Framework é um produto que sem dúvida vai dar muito que falar nos próximos anos. Estamos assistindo à revolução dos dispositivos móveis de acesso à Internet e este framework, baseado no popular jQuery, vai se converter no melhor aliado para o desenvolvimento de websites orientados para o segmento de consumidores web em movimento.

Nesta introdução a jQuery Mobile vou dar chaves ou características deste framework, de modo que as pessoas possam saber que tipos de ajudas nos oferece para o desenvolvimento e por que vai significar uma revolução à hora de criar aplicações web compatíveis com a maioria das plataformas móveis.

jQuery se reinventa a si próprio

Talvez recordemos o lema ou slogan de jQuery: “Write Less, Do More“. Pois jQuery Mobile Framework é essa mesma ideia, mas elevado à potência seguinte.

Para explicar isto quero antes perguntar aos leitores Para que serve um framework? Suponho que a maioria saberá de sobra, mas comento basicamente estas duas situações:

  1. Não ter que lutar com as particularidades de cada navegador. Desenvolver uma vez com código jQuery e que seja visualizado corretamente em todos os navegadores do mercado. Inclusive, quando apareçam com outro navegador ou versões novas dos existentes, que você não tenha que retocar seu código para adaptá-lo também a eles.
  2. Também serve para escrever menos código fonte e fazer coisas mais espetaculares.

Agora , por que jQuery Mobile é um passo à frente?

  1. Porque com os dispositivos móveis se multiplicou o número de navegadores e de plataformas. Temos muitos fabricantes de tablets e smartphones e diversos dispositivos com características distintas, como tamanhos de telas, sistemas operativos diferentes e diversos navegadores baseados em cada um deles. Tudo bem, que se antes com os navegadores para PCs havia problemas de compatibilidade, quando tínhamos apenas 3 sistemas operativos e 3 navegadores populares, agora, com os móveis, a coisa se torna ainda mais complicada.
  2. Porque o desenvolvimento de websites com jQuery Mobile é ainda mais automático do que era trabalhar com jQuery. Com muito menos código você faz muito mais coisas.

Como você pode imaginar, com os dispositivos móveis ainda é mais necessário usar um framework, que te facilite desenvolver uma vez e executar de maneira compatível em todos os dispositivos. Além disso, com jQuery Mobile você reduzirá drasticamente o tempo de desenvolvimento de seu siteweb para dispositivos de mobilidade.

Características de jQuery Mobile

O primeiro que deve ficar claro para descrever jQuery Mobile é que não se trata de um novo framework criado do zero. Em absoluto. Podemos entender jQuery Mobile como um plugin para jQuery posto que é um produto que está baseado no próprio framework Javascript jQuery. Portanto, aquelas pessoas que já conhecem jQuery não vão ter que aprender nada novo, senão aplicar seus conhecimentos e desenvolver facilmente aplicações para móveis. Isto significa uma grande vantagem, uma vez que há muitas pessoas que conhecem jQuery e que vão poder passar sem praticamente nenhum problema ao desenvolvimento para dispositivos.

O segundo que quero assinalar é que, se bem que jQuery nos serve para desenvolvimento de funcionalidades Javascript compatíveis com todos os navegadores, jQuery Mobile vai um pouco mais adiante. Não se trata simplesmente de uma camada para realizar código Javascript que funcione em todos os navegadores, mas sim um conjunto de ferramentas que simplificará o processo de criar páginas para móveis, a partir da escritura do próprio código HTML, a maquetação com CSS e a criação de efeitos dinâmicos com Javascript.

Um momento: como jQuery Mobile nos vai ajudar a fazer HTML? Não é que você vá escrever código HTML a partir de jQuery, senão que, ao incluir jQuery Mobile seu código HTML básico será otimizado para realizar diversos comportamentos dinâmicos nos navegadores móveis, de maneira automática. Ademais, você vai poder configurar muitas coisas do próprio framework diretamente através de atributos HTML.

Bom. E o que há de CSS? Bem não é que você tenha que escrever seu código CSS a partir de jQuery Mobile, senão que este framework vai dispor diversas ferramentas CSS, também de maneira automática, que você poderá utilizar em seus desenvolvimentos. Dando dois exemplos, com este framework seus componentes de formulários se estilizarão de maneira automática, substituindo os feios elementos nativos dos navegadores de dispositivos móveis. Além disso, você vai dispor de um pequeno framework CSS para poder fazer coisas como a maquetação a partir de uma grade.

À parte de tudo que foi comentado até agora, que segundo minha opinião é chave para entender bem o que é jQuery Mobile Framework, aqui vai outra série de características rápidas do produto:

  • Criado sobre jQuery com arquitetura de jQueryUI: Os próprios criadores de jQuery usaram sua experiência para desenvolver o framework para móveis e ademais implementaram a arquitetura desenhada para as bibliotecas de interfaces de usuário jQueryUI. Portanto, trata-se de um produto muito bem pensando, com base na experiência de anos.
  • Está desenvolvido para trabalhar com HTML5: na verdade, somos obrigados a fazer páginas HTML5 para aproveitar todas as características do framework.
  • Repleto de automatismos: Se já era fácil fazer Ajax em jQuery, é ainda mais fácil em jQueryMobile. Na verdade, se o framework capta que pode fazer uma conexão Ajax em lugar de uma convencional, o faz de forma automática por Ajax. E isso é só um exemplo, também são automáticas as transições entre páginas, a personalização do aspecto da página, etc.
  • Preparado para dispositivos sensoriais: Os dispositivos sensoriais têm mudanças na gestão de eventos e jQuery Mobile nos facilita o trabalho de nos adaptarmos a eles.
  • Personalização de temas: Igual ao que ocorria com as jQueryUI, com o jQuery Mobile podemos escolher entre vários temas gráficos já prontos para aplicar ao aspecto de nossa página. Ademais, podemos criar nossos próprios temas personalizados.

Compatível com o maior número de plataformas

Os criadores do framework comentam entre suas características que se esforçaram para cobrir o maior número de plataformas de dispositivos móveis possível. Dizem que o target que buscaram é maior do que o do resto de frameworks disponíveis no mercado.

Nota: Para dizer a verdade, não comprovei até que ponto a compatibilidade de jQuery Mobile é maior ou menor do que a de outros produtos como Sencha Touch. Porém, se formos à página de Sencha veremos que eles comentam que o framework está preparado para iOS, Android e BlackBerry, ao passo que jQuery Mobile alcança muitas outras plataformas.

Na próxima imagem podemos ver os logos dos sistemas operativos que jQuery Mobile suporta.

Não obstante, cabe assinalar que existem diversos graus de compatibilidade para cada sistema, ou melhor dito, para cada navegador dentro de cada família de dispositivos. Na documentação do framework, na seção de “Supported Platforms” veremos que o grau de compatibilidade está dividido em três níveis distintos, de Grau-A (onde estão a maioria dos navegadores para iOS e Android, assim como BlackBerry, Palm WebOS, os navegadores de computadores de área de trabalho, etc.) a Grau-B (onde encontramos Symbian, Opera Mini 5.0 e 6.0 para iOS ou Blackberry 5.0) ou Grau-C (com o resto dos smartphones, entre os que se encontra Windows Mobile ou Blackberry 4).

Em resumo. Segundo indicado na documentação, só deixaram sem suporte, deliberadamente, o sistema Samsung Bada nesta versão 1.0 do framework (O sistema operativo proprietário de Samsumg para smartphones), embora digam que provavelmente funcione relativamente bem inclusive sem tê-la testado, pois ainda não há no dispositivos ou emuladores.

Nos próximos artigos do CódigoSimples.net começaremos a desenvolver jQuery Mobile, começando pelas explicações sobre como fazer uma primeira página básica. De momento deixo dois links que podem complementar esta informação:

  • É claro, é imprescindível dar o link para este framework, para que vocês o possam ir conhecendo:http://jquerymobile.com

 

 

Compartilhe.