PROGRAMAÇÃO PARA DISPOSITIVOS MÓVEIS -INTRODUÇÃO A JQUERY MOBILE Prof. Angelo Augusto Frozza, M.Sc. http://about.me/TilFrozza
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
PROGRAMAÇÃO PARA DISPOSITIVOSMÓVEIS- INTRODUÇÃO A JQUERY MOBILEProf. Angelo Augusto Frozza, M.Sc.http://about.me/TilFrozza
ROTEIRO
Introdução
Principais características
JQUERY MOBILE
jQuery Mobile é um framework baseado em HTML 5 para desenvolver UI (user interface).
Foi concebido para tornar sites e aplicativos responsivos, que podem ser acessados em todos os dispositivos do tipo smartphones, tablets e computadores de mesa.
JQUERY MOBILE
Para utilizar o jQuery Mobile você precisa incluir três coisas no seu HTML:
Script do jQuery http://code.jquery.com/jquery-1.5.min.jsOBS.: DEVE SER INSERIDO ANTES DO jQuery Mobile
Script do jQuery Mobile Contém os recursos específicos para mobile http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js
CSS da interface do usuário (UI) para jQuery Mobile http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css
A versão atual da jQuery Mobile (1.4.x) suporta jQuery 1.8 ou superior.
JQUERY MOBILE
Primeiro exemplo
<!DOCTYPE html> <html>
<head> <title>Primeira Página</title> <script type="text/javascript" src="http://code.jquery.com/jquery-
1.5.min.js"></script> <script type="text/javascript"
src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script> <link rel="stylesheet"
href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" /> </head> <body>
<div data-role="page"> <div data-role="header">
<h1>Primeira página</h1> </div> <div data-role="content">
<p>Essa é sua primeira página para dispositivos móveis</p> </div>
</div> </body>
</html>Substituído por
class="ui-content"
JQUERY MOBILE
A partir do HTML 5 pode-se colocar metadados nas tagsusando o data-*
Então, a essência do jQuery Mobile é basicamenteutilizar um atributo data-* para as diferentesfuncionalidades e aparências.
Alguns atributos data-* que podem ser utilizados nas diferentes tags: data-role data-theme data-icon data-transition
JQUERY MOBILE
Exemplo de uso do data-* (código HTML)
<li class="comentario"
data-nome="Tecnologia em Sistemas para Internet"
data-cidade="Camboriú"
data-estado="SC"
data-pais="Brasil"
data-lang="pt-br">
<b>Programação para DM</b>
<span>Muito boa essa aula!</span>
</li>
JQUERY MOBILE
Exemplo de uso do data-* (codigo CSS)
.comentario[data-pais=Brasil] {color: yellow;background-color:green;
}.comentario[data-pais=Japao] {
color: red;background-color:white;
}...
Substituído por class="ui-content"
JQUERY MOBILE
Primeiro exemplo
<!DOCTYPE html> <html>
<head> <title>Primeira Página</title> <script type="text/javascript" src="http://code.jquery.com/jquery-
1.5.min.js"></script> <script type="text/javascript"
src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script> <link rel="stylesheet"
href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" /> </head> <body>
<div data-role="page"> <div data-role="header">
<h1>Primeira página</h1> </div> <div data-role="content">
<p>Essa é sua primeira página para dispositivos móveis</p> </div>
</div> </body>
</html>
JQUERY MOBILE
Estrutura de um documento com jQuery Mobile
Como pode-se ver no exemplo, o conteúdo da página em si éenvolto em uma div com atributo data-role="page". Isso permite que o jQuery Mobile saiba em que parte o conteúdo está
na marcação.
Dentro da div "page", existem outros div data-role "header" , "content“ e "footer" Todos eles são opcionais, embora provavelmente seja incluído pelo
menos o div "content”.
v. 1.4 TROCAR: <div data-role="content">
POR: <div role="main" class="ui-content">
JQUERY MOBILE
<div data-role="header">
Essa div permite criar uma barra de ferramentas naparte superior da página, usada para coisas como otítulo da página e os botões. Normalmente existe pelo menos um botão "Voltar“, o qual o
usuário pode tocar para retornar à página anterior.
Ao acrescentar data-position="fixed" na div docabeçalho, pode-se ter certeza que o cabeçalho ficarásempre no topo da tela.
JQUERY MOBILE
<div data-role="content">
Contém o conteúdo principal da página, como texto,imagens, botões, listas, formulários e assim por diante.
OBS.: esta tag está obsoleta na versão 1.4.0 e será retiradana versão 1.5.0.
No lugar, usa-se (v. 1.4):<div role="main" class="ui-content">
JQUERY MOBILE
<div data-role="footer">
Cria uma barra de ferramentas na parte inferior dapágina, que é bastante útil para coisas como botões defunção principal. Ao adicionar data-position="fixed" no rodapé, pode-se ter
certeza que este sempre fica na parte inferior da tela.
Veja o exemplo 01-index-template.html
DICA
Experimente usar o “User Agent” do Chrome F12 -> Configurações (engrenagem) -> Overrides
JQUERY MOBILE
Dica de leitura
Manipulando a metatag Viewporthttp://tableless.com.br/manipulando-metatag-viewport/
(Fonte: http://webdesignerwall.com/tutorials/viewport-meta-tag-for-non-responsive-design)
JQUERY MOBILE
Página dentro de página
Uma página HTML pode conter duas ou mais div “page“, cada uma com um id diferente:
<div data-role="page" id="home">
...
</div>
<div data-role="page" id="about">
... </div>
JQUERY MOBILE
Página dentro de página
Neste exemplo, a página inicial possui link apontando para a página about, enquanto que a segunda página tem um link apontando para a página home.
O jQuery Mobile automaticamente intercepta essas ligações de modo que cada div apareça como uma nóva página:
<div data-role="page" id="home"><div data-role="content">
<p><a href="#about">"Sobre" deste app...</a>
</p> </div>
</div>
<div data-role="page" id="about"><div data-role="content">
<p>Isto funciona! <a href="#home">Início</a>
</p> </div>
</div>
Veja o exemplo 02-index-PaginaDentroPagina.html
JQUERY MOBILE
Transições de página
jQuery Mobile permite aplicar diferentes efeitos de transição para uma nova página.
Para tanto, basta adicionar em cada link um atributo data-transition:
<a href="#about" data-transition="flip">About</a>
Os valores possíveis estão na documentação da jQuery Mobile:http://demos.jquerymobile.com/1.4.1/transitions/
Veja o exemplo 03-index-transicaoPaginas.html
JQUERY MOBILE
Caixas de diálogo
Pode-se transformar uma página em Caixa de diálogo ao adicionar na tag de link o atributo data-rel="dialog".A caixa de dialogo aparecerá com cantos arredondados,
margens e um fundo escuro; Também pode-se adicionar uma transição, de forma a
demonstrar que está abrindo uma caixa de diálogo.
<a href="#about" data-rel="dialog" data-transition="slideup">Sobre…</a>
Veja o exemplo 04-index-caixasDeDialogo.html
JQUERY MOBILE
Botões
Botões são uma parte essencial de qualquer aplicativo baseado no toque.
Eles são preferíveis aos links porque fornecem um alvo maior quando a intenção é tocar. Lembre-se do conceito do “Dedo gordo”
Para transformar um link em um botão, basta adicionar o atributo data-role="button" na tag do link:
<a href="#about" data-role="button" data-transition="slideup">Sobre…</a>
Veja o exemplo 05-index-botoes.html
JQUERY MOBILE
Elementos de formulário
O jQuery Mobile substitui automaticamente o padrão de controles em formulários HTML. P.ex. campos de texto, caixas e listas de seleção; Controles personalizados que funcionam melhor com uma interface
sensível ao toque e mais flexível; Caixas de seleção são feitas bem maiores pois elas são mais fáceis
de tocar.
JQUERY MOBILE
Elementos de formulário
O jQuery Mobile também registra rótulos e campos de formulário com base na largura de exibição do dispositivo. P.ex. se o display tem 480 pixels de largura, os rótulos são colocados
acima dos campos para economizar espaço horizontal; Em telas mais amplas, os rótulos são exibidos ao lado dos campos.
JQUERY MOBILE
Elementos de formulário
Outro recurso interessante é o agrupamento de botões do tipo radio e checkbox em um fieldset, com atributo data-role="controlgroup"; jQuery Mobile automaticamente implemenenta estilos aos campos,
observando o modo como eles estão agrupados, sem intervalos entre cada campo e arredondando os cantos do primeiro e do último campo.
JQUERY MOBILE
Elementos de formulárioVeja o exemplo 06-index-formularios.html
Veja o exemplo 07-index-formulariosAmpliado.html
JQUERY MOBILE
Listas
Exibições de lista são um recurso muito poderoso do jQueryMobile;
Elas permitem trabalhar um padrão de listas não ordenado ou de listas ordenadas em uma variedade de formas úteis;
Para ativar uma lista regular em uma exibição de lista, adiciona-se o atributo data-role="listview" nas tags ul ou ol;
A seguir são mostradas algumas das coisas que se pode criar usando listas...
Veja o exemplo 08-index-listas.html
JQUERY MOBILE
Listas
Uma lista simples de itens de texto, com uma caixa em torno de cada item;
Uma lista de links - coloca-se uma tag link em um item da lista e o jQuery adiciona automaticamente um ícone de seta ('>' ) do lado direito de cada item da lista.
JQUERY MOBILE
Listas
Listas aninhadas - para aninhar uma tag ul dentro de uma tag li (OBSOLETO A PARTIR DA VERSÃO 1.4.0) o jQuery automaticamente cria uma "segunda" página para a lista
incorporada, ligando a partir do original. Isto é muito útil para a criação de árvores de opções de menu, configurações e assim por diante;
JQUERY MOBILE
Listas
Listas de botões divididos (Split buttons) - Ao colocar dois links dentro de uma tag li, pode-se criar um item da lista com uma barra de divisão vertical no lado direito do item. O usuário pode então tocar em qualquer lado (esquerdo ou direito) do
item da lista para conseguir coisas diferentes (como a visualização ou compra);
JQUERY MOBILE
Listas
Bolhas de contagem - ao incluir um elemento com uma classe de contagem em um item da lista, o jQuery cria um pequeno ícone de "bolha" no lado direito do item de lista contendo o conteúdo do elemento. Isso é ótimo para coisas como contagens de mensagens em listas de
correio;
JQUERY MOBILE
Listas
Filtragem de pesquisa - ao adicionar o atributo data-filter="true" para uma tag ul ou ol, então a lista fica disponível para pesquisa. Uma caixa de texto "Filtrar resultados ..." aparece acima da lista,
permitindo ao usuário diminuir as opções; Perfeito para grandes listas;
JQUERY MOBILE
Listas
Divisores de lista para as listas com divisão em seções. Basta adicionar o atributo data-role="list-divider" para qualquer item
da lista;
Miniaturas e ícones – ao colocar um elemento img no início de um item da lista, o jQuery vai usar a imagem como uma miniatura da lista em escala de 80 x 80 pixels. Ao adicionar uma classe ui-li-icon para a img, o ícone terá escala de
16 x 16 pixels.
JQUERY MOBILE
Listas
Veja mais detalhes em:
Criando lista com jQuery Mobile – Parte 01http://imasters.com.br/artigo/20192/jquery/criando-lista-com-jquery-mobile-parte-01/
Criando lista com jQuery Mobile – Parte 02http://imasters.com.br/artigo/20272/mobile/criando-lista-com-jquery-mobile-parte-02/
jQuery Mobile 1.4.1 demoshttp://demos.jquerymobile.com/1.4.1/listview/index.html#&ui-state=dialog
JQUERY MOBILE
Temas
O estilo de cores cinza, preto e azul com Widgetsarredondados produzido pelo jQuery Mobile permitem uma experiência muito agradável.
Porém, a vida seria monótona se todos tivessem que usar o mesmo estilo em todos os aplicativos móveis!
JQUERY MOBILE
Temas
Por isso, jQuery Mobile permite criar temas que personalizam coisas como, por exemplo: Família de fontes Sombras Valores de raio de botões e caixas de canto Conjuntos de ícones
Ferramenta: ThemeRoller http://jquerymobile.com/themeroller/
JQUERY MOBILE
Temas
Cada tema pode conter até 26 amostras de cores diferentes (rotuladas de 'a' a 'z'), que controlam a cor de primeiro plano, cor de fundo e gradiente. O tema padrão vem com 5 amostras.
Normalmente, para fazer um elemento de página usar uma amostra particular, usa-se o atributo data-theme:
Veja o exemplo 09-index-temas.html
JQUERY MOBILE
Eventos
Pode-se dizer que são os eventos que tornam a linguagem JavaScript útil.
Um script depende da ocorrência de um evento para realizar a ação nele prevista.
Toda vez que ocorre interação com um documento web, um evento é disparado. P.ex. O toque em um link ou o arraste da tela caracterizam a
ocorrência de um evento.
JQUERY MOBILE
Eventos
Tornam mais fácil a construção de interfaces de usuário;
jQuery Mobile adiciona alguns eventos específicos usados para detectar ações executadas em DM; P.ex: Pode-se usar o evento taphold para detectar se o usuário tocou
e segurou o dedo em um elemento (1 segundo); O evento swipe ocorre quando o usuário toca um elemento,
arrastando-o horizontalmente para a esquerda ou direita por uma distância no mínimo igual a 30px.
Veja o exemplo 10-index-eventos.html
REFERÊNCIAS
SILVA, M. S. jQuery Mobile: desenvolva aplicações web para dispositivos móveis com HTML 5, CSS3, Ajax, jQuery e jQueryUI. São Paulo: Novatec, 2012.
Material complementar no link:http://www.ifc-camboriu.edu.br/~frozza/2013.1/pdm.html
jQuery Mobile 1.4.1 demos:http://demos.jquerymobile.com/1.4.1/
DÚVIDAS?
Prof. Angelo Augusto Frozza, M.Sc.
http://www.ifc-camboriu.edu.br/~frozza
@TilFrozzahttp://www.twitter.com/TilFrozza
http://about.me/TilFrozza
Related Documents
