programaÇÃo para ispositivos mÓveis …frozza/2014.2/bsi11/pdm-aula005a-jquery... · para...

42
PROGRAMAÇÃO PARA DISPOSITIVOS MÓVEIS -INTRODUÇÃO A JQUERY MOBILE Prof. Angelo Augusto Frozza, M.Sc. http://about.me/TilFrozza

Upload: lycong

Post on 27-Nov-2018

214 views

Category:

Documents


0 download

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

DICA

Experimente usar o “Modo de design adaptável” do Firefox F12 -> Modo de design adaptavel

Colocar imagem

DICA

Experimente usar o Opera Mobile Emulator

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/

EXERCÍCIO PRÁTICO

Faça o Exercício 03 sobre jQuery Mobile

DÚVIDAS?

Prof. Angelo Augusto Frozza, M.Sc.

[email protected]

http://www.ifc-camboriu.edu.br/~frozza

@TilFrozzahttp://www.twitter.com/TilFrozza

http://about.me/TilFrozza