Aqui no Escola Criatividade já aprendemos algumas tecnologias de desenvolvimento mobile, aprendendo como construir um formulário HTML para ser bem visualizado em dispositivos móveis e também aprendemos a construir aplicativos nativos para a plataforma Android, hoje iremos iniciar a discurssão a respeito de uma tecnologia que considero incrível, o jQuery Mobile.

jQuery Mobile é um framework baseado em jQuery utilizado para o desenvolvimento web, bastante otimizado para a interação através de toques e é largamente utilizado para a criação de aplicativos voltados para serem acessados através de smartphones e tablets. O jQuery mobile utiliza o HTML 5 e o CSS 3, sendo assim capaz de apresentar interfaces funcionais em todas as plataformas móveis.

O jQuery Mobile além ter funcionalidades para a criação de layouts também disponibiliza um rico conjunto de controles e widgets para que seja possível a construção de ricas interfaces e ainda sim otimizadas tanto para a apresentação em dispositivos móveis quanto a interação através do toque.

jquery mobile

SUPORTE E INSTALAÇÃO

A grande vantagem de se utilizar o jQuery Mobile é que ele é Cross Browser, ou seja, é suportado por todos os navegadores de dispositivos móveis do mercado, claro que em dispositivos mais antigos que não possuem tantos recursos a exibição dos elementos não ficará ótima, apenas funcional. Em dispositivos modernos certamente você terá todo o poder do jQuery Mobile em suas mãos.

Para a utilização do jQuery Mobile não é necessária qualquer instalação, o que você irá fazer na hora do desenvolvimento é apenas o link para os arquivos do jQuery, do framework e a folha de estilo padrão. Neste quesito o jQuery mobile é fantástico, nada de complicações e configurações imensas, basta fazer o link para três arquivos e você estará pronto para o desenvolvimento.

Para o uso do jQuery você possui duas opções: baixar os arquivos e hospedá-los todos em seu servidor ou usar arquivos hospedados em CDN que são sistemas de computadores que hospedam cópias de arquivos de dados colocados em diferentes nós da rede com o intuito de ter uma cópia disponível o mais rápido possível. Você poderá usar as CDN’s do Google, Microsoft ou a própria jQuery CDN. A verdade é que é sempre melhor utilizar uma CDN, já que isso ajudará a não sobrecarregar o seu servidor e ainda fará com que o acesso seja mais rápido.

PRINCIPAIS CARACTERÍSTICAS

As principais características deste fantástico framework são as seguintes:

  • Desenvolvido baseado a biblioteca, para muitos framework, jQuery e utilizando muito dos elementos do jQuery UI, um framework para interface para o usuário. Como é baseado em jQuery possui a mesma sintaxe que o mesmo, facilitando muito o seu uso e tendo uma curva de aprendizagem bem interessante.
  • Compatibilidade com dispositivos móveis é o forte do jQuery Mobile, todos os dispositivos móveis irão exibir de forma satisfatório as páginas criadas no framework. Claro que dispositivos mais modernos terão uma página com os elementos mais rebuscados e os navegadores mais limitados exibirão apenas o essencial, mas certamente a compatibilidade do jQuery Mobile é um dos seus pontos mais fortes.
  • O carregamento é ultra rápido. Como o jQuery Mobile utiliza pouquíssimas imagens e praticamente todos os seus elementos são formados da combinação do HTML 5 com o CSS 3, as páginas carregam de forma muito rápida, perfeito para dispositivos móveis que geralmente possuem pouca banda para a navegação, geralmente um sinal de internet 3G.
  • Uso de AJAX. Em muitos momentos poderemos utilizar recursos do AJAX, para fazer com que as transições sejam animadas ou mesmo uma página não precise ser recarregada.
  • Os temas são totalmente customizados para o gosto e necessidade da equipe de desensenvolvimento através do ThemToller, que é também de fácil uso.

TEMPLATE MÍNIMO PARA O USO DO JQUERY MOBILE

Para que possamos iniciar os trabalhos com o jQuery Mobile precisamos primeiro saber o que é necessário ter em uma página que pretenda exibir elementos deste framework, abaixo você pode visualizar o template mínimo para a exibição de páginas adaptadas para dispositivos móveis através do jQuery Mobile, ou seja, sem algum destes elementos a exibição irá ficar comprometida.

<!DOCTYPE html>
<html lang="pt-br">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<title>Template mínimo 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>
<body>
	<!-- Aqui iremos colocar tudo o que desejamos que o browser exiba.-->
</body>
</html>

Neste template podemos visualizar alguns elementos interessantes e quem sabe desconhecidos por muitos como a tag viewport. Esta tag é fundamental para que o código funcione corretamente em dispositivos móveis, já falamos bastante sobre esta tag e de forma bem detalhada em outro artigo aqui mesmo no Escola Sites, se deseja saber mais sobre ela, considere acessar o artigo Construindo um formulário HTML para dispositivos móveis (Parte I).

ESTRUTURAÇÃO DE PÁGINAS NO JQUERY MOBILE

A primeira coisa a se ter em mente quando o assunto é desenvolvimento com jQuery Mobile é a necessidade em escrever as páginas totalmente em HTML 5, de qualquer outra forma a estilização e interação com os códigos jQuery do framework não acontecerão de forma adequada. As páginas continuarão a ser exibidas normalmente mas todo o potencial do jQuery será desperdiçado visto que a estilização não poderá acontecer. Também é necessário, como vimos no template mínimo, a importação de pelo menos 3 arquivos relativos ao jQuery que devem ser, via de regra, importados diretamente da CDN oficial do jQuery, isso evitará que a biblioteca seja atualizada, muitas vezes por questões de segurança e sua página continua exibindo as bibliotecas antigas.

ATRIBUTO DATA-*

Algo muito importante quando desenvolvemos utilizando o jQuery Mobile é a comunicação feita entre o framework e os elementos de nossa página. Foi necessário prover algum método que o jQuery pudesse ter algumas informações a cerca de cada elemento. Para isso os desenvolvedores utilizaram uma funcionalidade nativa do HTML 5, o atributo data-* , este atributo possui a finalidade de guardar informações relativas aquele elemento que está o definindo. Este atributo pode ser utilizado em qualquer elemento da página, desde que esta esteja em HTML 5. O * contido no elemento é chamado de coringa, porque pode ser totalmente customizada por quem está contruindo a página, ou seja, eu posso determinar que um elemento possui o atributo data-titulo, ou outro possua o atributo data-descricao, este método foi construído para que a própria página HTML pudesse guardar certas informações sem a necessidade de uso de uma linguagem de programação back-side.

ATRIBUTO DATA-ROLE

Baseados no uso do atributo data-* os desenvolvedores do jQuery desenvolveram um série de marcações, cada uma delas com uma função, ou seja, guardando uma informação importante para a estilização e interação com o código jQuery, para determinar o papel de cada elemento na página foi determinado o uso do data-role. Com o data-role podemos identificar se um elemento é uma página, uma barra de navegação, um cabeçalho ou qualquer outro elemento da página, a sintaxe básica deste atributo é:

<div data-role="page" id="page">
     <!-- elementos internos da página -->
</div>

O jQuery ao encontrar este elemento com o data-role=”page” saberá que se trata de um elemento do tipo página e fará as devidas estilizações e tratará o elemento dentro da lógica jQuery como sendo uma página. Há uma grande quantidade de tipos de elementos que podem ser definidos através do data-role, que veremos no decorrer desta série de artigos. De qualquer forma deixarei uma tabela abaixo com os que considero os principais.

  • page: atributo identificador de uma página;
  • header: atributo identificador de um cabeçalho;
  • content: atributo identificador de uma área de conteúdo principal;
  • navbar: atributo identificador de uma barra de navegação, geralmente um menu;
  • footer: atributo identificador de um rodapé;
  • button: atributo identificador de um botão.

Certamente há muitos outros valores possíveis para o data-role mas estes acima são os principais e serão os mais usados no decorrer desta série se houver a necessidade da inclusão de outro valor, este será explicado no decorrer do respectivo artigo.

ASPECTOS QUE DEVEMOS SABER ANTES DE CRIAR PÁGINAS COM O JQUERY MOBILE

Para a exemplificação e iniciação de fato no desenvolvimento iremos criar páginas referente a uma versão mobile de um site de apresentação de um profissional liberal, um freelancer. Para tanto iremos criar 3 páginas, serão: Home, Portfólio e Contato. As páginas serão bem simples e irão conter apenas um cabeçalho, que conterá o nome do respectivo profissional, um menu principal, uma área para o conteúdo principal e um rodapé. Apenas isso, para que fique de uma forma bem didática.

Antes de partir para o desenvolvimento de fato, o que será feito no próximo artigo, devemos ter em mente alguns aspectos importantes. Tudo em desenvolvimento mobile é reduzido, com isso aspectos comuns em sites para computadores são totalmente ruins de se aplicar em dispositivos móveis, esqueça aquele menu com 10 opções ou mesmo aquela barra lateral imensa, cheia de opções. No desenvolvimento para dispositivos móveis devemos dar a máxima importância ao conteúdo principal, tanto por motivos da tela ser reduzida quanto a banda de internet também ser bem reduzida.

O framework permite no máximo 5 links em uma mesma linha, se for necessário mais do que isso, o mesmo irá quebrar e exibir os links em mais de uma linha, o que não é muito convencional, causando desconforto, então evite ao máximo o fazer. Também é necessário muitas vezes realizar abreviações sobretudo em títulos e menus para que a exibição seja mais clara e limpa não ocupando toda a tela do dispositivo. Outros aspectos também serão levados em consideração durante todo o processo de desenvolvimento, para que a exibição do conteúdo seja feita de forma sempre clara e fazendo com que o leitor tenha acesso a informação de forma mais fácil possível.

Este foi o primeiro artigo desta série de artigos sobre desenvolvimento com jQuery Mobile, espere que em breve teremos artigos fantásticos sobre o assunto e verá o potencial desta ferramenta incrível. Abraços!

Até já.

 

Autor: Jair Rebello

Blog do Autor | Artigos do Autor:

Analista de Sistemas, empreendedor e blogueiro que dedica parte de seu tempo para a partilha de material de grande qualidade relacionados a Wordpress, SEO, Tableless, JQuery, PHP, Android e outras tecnologias mais. Pode me encontrar no Escola Sites ou O Android.

  • Explorer - Factory Construction & Ship Building Joomla Theme
  • Justice - Attorney and Law Firm Joomla Template
  • OwnFolio - One Page Personal Portfolio / vCard / Resume / Showcase Joomla Template
  • Big Business - Responsive Template
  • Merab - Creative Multipurpose Drupal 8 Theme
  • Fitness Academy Joomla Template
  • Fruition - Business Joomla Template
  • Educate | Education & Courses, Kindergartens Joomla Template
  • Constructive - Contractors Multipurpose Joomla Landing Page Theme
  • Vina Bubox - VirtueMart Joomla Template for Online Stores
  • BizOne - One Page Parallax Drupal Theme
  • LawHouse - Responsive Lawyers Attorneys Joomla Template

Gostou deste artigo? Então torne-se fã do Blog no Facebook!



Comentários dos Alunos


  1. Virneto
    23 de janeiro de 2013

    Muito bom mesmo!!
    Tenho vindo sempre a acompanhar seus conteúdos e tenho aprendido imenso!!
    Já me tinha lembrado que era bom abordar jQuery Mobile ;)
    Vou ficar à espera dos próximos!!

    Melhores cumprimentos!!



    • Jair Rebello
      23 de janeiro de 2013

      Virneto, que bom que tem gostado de nossos artigos, temos sempre o objetivo de trazer conhecimentos para os leitores e creio que isso está sendo alcançado.



      • Virneto
        23 de janeiro de 2013

        Sem dúvida nenhuma.

        Força!!



  2. Givanildo
    27 de janeiro de 2013

    Simplesmente fantástico!

    Que continue nos passando seus conhecimentos dessa mesma forma, clara e objetiva!

    Ansioso pelos próximos artigos!!



    • Jair Rebello
      29 de janeiro de 2013

      Givanildo, obrigado pelos elogios, certamente é o que sempre desejamos, passar o conteúdo de forma clara e objetiva.



  3. Weber
    16 de fevereiro de 2013

    Grande Jair,

    Parabens pela magnifica aula! esse site é um dos melhores que já vi para um auto-didata como eu…

    Com certeza espero aproveitar muito seus ensinamentos com o JQuery Mobile… fantástico.

    Grande abraço e obrigado pela força!

    Weber



  4. MAURO SERGIO
    19 de fevereiro de 2013

    BOM DIA. É POSSÍVEL USAR UM BANCO DE DADOS COM O JQUERY MOBILE E GERAR UM APP ? DE QUE FORMA ? USANDO O PHONEGAP É POSSÍVEL ?



  5. juciely
    28 de fevereiro de 2013

    As pessoas ainda nao entenderam a importancia e o poder que tem a mobilidade de um site.
    Aguardo o dia em que todos os sites serão padronizados e terão suas versoes móbile.
    Até la…os usuários adeptos apenas de seus dispositivos continuaram em desvantagem e nós..apenas na ignorancia.

    Adorei este Site.Abraços.



  6. Olá Jair,

    Sem querer abusar da sua boa vontade mas já fazendo, vim aqui pois sei que aqui encontra pessoas profissionais e experientes para me ajudar.

    Aonde poderia encontrar um script de filtragem de dados com 2 ou mais dropdowns que teriam valores pré-definidos para realizar um filtro de resultados?

    Tenho que realizar um filtro de disciplina, estado, cidade para viabilizar a coerência dos resultados já que não vou buscar em São Paulo um professor para me substituir no Rio de Janeiro por exemplo.

    Obrigado pela sua ajuda.



  7. Dávila
    28 de maio de 2014

    Desculpe a indiscrição, mas a parte dois desse artigo já está disponível?


RSS
Twitter
Facebook
Comentários
ASSINANTES
SEGUIDORES
FÃS
COMENTÁRIOS
7794

Subscrever Newsletter
Subscreva a Newsletter:



Aplicativos Android, iPhone e Muito Mais!




Assine a Escola Criatividade Assine a Newsletter da Escola Criatividade Escola Criatividade no Twitter Escola Criatividade no Facebook Escola Criatividade no Youtube Escola Criatividade no Google Buzz