2. Porquê desenvolver um site mobile?
• Os seus clientes já estão mobile! E você?
• Até 2013 estima-se que os usuários vão usar mais os
dispositivos móveis do que o PC para acessar a internet.
• Procura por dispositivos móveis cresceram 400% desde
2010.
• Em 2015 vai haver um aparelho móvel para cada pessoa
na terra.
Fontes: Gartner, 2010; Google Internal Data, 2011; Cisco, 2011
2
3. Como desenvolver um site mobile?
• Os usuários esperam que a sua experiência mobile seja tão boa
como a do PC.
• 60% dos usuários esperam que o site carregue em 3 segundos
ou menos.
• 71% dos usuários esperam que o site mobile carregue tão
rápido quanto o do PC.
• 78% vai voltar ao site duas vezes ou menos se este não carregar
inicialmente.
Fontes: Compuware, "What Users Want from Mobile," 2011
3
4. O jQuery Mobile
• Um sistema de interface unificada, baseada
em HTML5. Para usuários de todas as
plataformas populares de dispositivos móveis,
construído sobre as sólidas fundações jQuery
e jQuery UI. Tem um design flexível,
facilmente personalizável.
• “Escrever menos, fazer mais“
4
5. Principais características
• Construído no núcleo jQuery com uma sintaxe familiar e consistente, fácil aprendizagem e
aproveita códigos e padrões do jQuery UI.
• Compatível com todos as plataformas
• Tamanho leve
• Baseado em HTML5 e CSS3
• Poderoso Ajax-powered sistema de navegação para permitir transições de página animadas.
• Acessibilidade, recursos como WAI-ARIA também são incluídos para assegurar que as páginas
funcionam para leitores de tela (por exemplo, o VoiceOver no iOS) e outras tecnologias
assistidas.
5
8. Instalando o jQuery Mobile
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css"/>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
[Bloco de códigos html JQM]
</body>
</html>
8
9. Páginas – Anatomia de uma página
• <meta name="viewport" content="width=device-width, initial-scale=1">
• especifica como o navegador deve exibir o nível de zoom da página e suas
dimensões. Se isso não for definido, muitos navegadores móveis irão
utilizar uma largura de página em torno de 900px. Ao definir os atributos
de viewport para content="width=device-width, initial-scale=1" , a
largura será definida para a largura de pixels da tela do dispositivo.
• Essas configurações não desativam a capacidade do usuário para fazer
zoom das páginas, o que é bom do ponto de vista da acessibilidade.
9
10. Páginas – Estrutura Multi-page
• Um único documento HTML pode conter várias "páginas" que
são carregados em conjunto pelo empilhamento de várias divs
com um data-role="page“.
• Cada "página" bloco precisa de uma identificação única ( id =
“contato" ), que será usado para ligar internamente as
“páginas” ( href = "# contato" ).
10
11. Páginas – Estrutura Multi-page
<div data-role="page" id=“pagina1">
<p/> Ir para a página 2<p/> <a href="#pagina2"> Página 2 </a>
</div>
<div data-role="page" id=“pagina2">
<p/> Voltar a página 1/> <a href="#pagina1"> Página 1 </a>
</div>
*Desvantagem: O título da página é sempre o da primeira página.
11
12. Páginas – Estrutura Multi-page
• data-title = “Página 1“
• Colocando este atributo em cada div com o atributo data-
role="page" fará com que cada página tenha o seu título
específico.
• Ex: <div data-role="page" data-title=“Página 2” id="pagina2" >
12
13. Temas de páginas
• O atributo data-theme pode ser aplicado para os recipientes
cabeçalho, rodapé, conteúdo ou a div que compreende a página
toda, que possui o atributo data-role=“page”, para garantir que a cor
de fundo será aplicada à página completa. Quando isso é feito, todos
os widgets na página também irão herdar o tema especificado no
recipiente da página. No entanto, os cabeçalhos e rodapés serão
padrão para o tema "a". Se você quer ter uma página com, por
exemplo, apenas o tema "b" para todos os seus elementos, incluindo
o seu cabeçalho e rodapé, você terá que especificar data-
theme="b" para a div da página bem como para o cabeçalho e
rodapé.
13
17. Botões
• Botões são atribuídos a links html. Podem ser apenas botões de links ou inputs de formulários.
• No conteúdo de uma página, você pode estilizar qualquer link âncora como um botão, adicionando
o atributo data-role="button“ .
• <a href="index.html" data-role="button">Link button</a>
• Elementos de formulários dos tipos input: reset, button, image, etc. serão convetidos
automaticamente em botões.
– Input type="button”
– Input type="submit“
– Input type="reset“
– Input type="image”
17
18. Botões - Ícones
• Um ícone pode ser adicionado a um botão adicionando o atributo data-icon na
âncora especificando o ícone a exibir. Por exemplo:
• <a href="index.html" data-role="button" data-icon="delete">Delete</a>
• Para alterar o posicionamento do ícones se adiciona o atributo data-iconpos
ao link, com os valores left, right, top ou bottom, para definir se o ícone ficará
acima, abaixo ou a direita. Por padrão o ícone fica a esquerda do título.
18
19. Botões em Linha
• Por padrão os botões no corpo do documento são determinados para
preencherem toda a largura da tela:
• No entanto, se você quiser um botão mais compacto, que seja tão grande
quanto o texto e ícone dentro, adicione o atributo data-inline="true" para o
botão:
• Se você tem vários botões e quer que eles fiquem lado a lado na mesma linha,
adicione o atributo data-inline="true" para cada botão.
19
20. Barras de Ferramentas
Barras de ferramentas padrão:
Cabeçalho
Rodapé
• As barras de ferramentas utilizam o posicionamento “inline” por padrão.
• O modo de posicionamento “fixed” faz com que as barras de ferramentas
fiquem sempre fixas nas suas posições na tela. Para adicionar este
comportamento à página, adicione o atributo data-position=“fixed”.
20
21. Barras de Ferramentas - Cabeçalho
• O cabeçalho é uma barra de ferramentas na parte superior da página, que
normalmente contém o texto do título da página e botões opcionais
posicionados à esquerda e/ou à direita do título para a navegação ou ações.
• O texto do título é normalmente um elemento H1 título, mas é possível usar
qualquer nível de título (H1-H6) para permitir a flexibilidade semântica.
<div data-role="header">
<h1>Page Title</h1>
</div>
21
24. Cabeçalho – Posição dos botões
• A posição do botão também pode ser controlada pela adição de classes para as
âncoras do botão, em vez de confiar na ordem de origem. Isto é especialmente
útil se você quer apenas um botão no canto direito por exemplo. Para
especificar a posição do botão, adicione a classe de ui-btn-left ou ui-btn-
right à âncora.
<div data-role="header" data-position="inline“>
<h1>Page Title</h1>
<a href="index.html" data-icon="gear" class="ui-btn-right">Options</a>
</div>
24
25. Corpo
• Todo o conteúdo da página fica dentro da div com o atributo data-
role=“content“.
<div data-role=“content">
Conteúdo da página
</div>
25
26. Rodapé
• O rodapé tem a mesma estrutura básica do cabeçalho, só que usa o atributo
data-role com o valor de footer.
<div data-role="footer">
<h4>Footer content</h4>
</div>
26
27. Rodapé – Adicionando botões
• Para incluir o preenchimento na barra, de forma mais organizada, adicione a class = "ui-
bar" ao rodapé.
<div data-role="footer" class="ui-bar">
<a href="index.html" data-role="button" data-icon="delete"> Remover </a>
<a href="index.html" data-role="button" data-icon="plus"> Adicionar </a>
<a href="index.html" data-role="button" data-icon="arrow-u"> Up </a>
<a href="index.html" data-role="button" data-icon="arrow-d"> de Down </a>
</ div>
Isto cria uma barra de ferramentas com ícones organizados em fileira:
27
28. Rodapé – Adicionando botões
• Para agrupar um conjunto de botões, enrole os links em uma div com os atributos data-
role="controlgroup“ e data-type="horizontal".
• <div data-role="controlgroup" data-type="horizontal">
• Isto cria um conjunto agrupado de botões:
28
29. Navbar (Barras de Navegação)
• O jQuery Mobile tem um widget de barra de navegação básico que é útil para fornecer
até 5 botões com ícones opcionais, normalmente dentro de um cabeçalho ou rodapé.
• A barra de navegação é codificada como uma lista de links desordenados envoltos por
uma div que possui o atributo data-role="navbar". Para definir um dos links para o
estado ativo (selecionado), adicione a classe class="ui-btn-active" para o link. Neste
exemplo, temos uma barra de navegação de dois botões no rodapé com o item “One“
definido como ativo:
<div data-role="navbar">
<ul>
<li><a href="a.html" class="ui-btn-active">One</a></li>
<li><a href="b.html">Two</a></li>
</ul>
</div>
29
30. Navbar (Barras de Navegação)
• Adicionando um terceiro item, automaticamente cada botão ocupará 1/3 da largura da janela do navegador:
• Adicionando um quarto, cada botão ocupe 1/4 da largura da janela do navegador:
• Se a barra de navegação possuir até 5 itens, eles se organizarão igualmente em uma única linha, como nos
exemplos anteriores. Se forem mais de cinco itens, a navbar vai quebrar em mais de uma linha:
30
31. Ícones em Navbars
• Ícones podem ser adicionados aos itens da navbar adicionando o atributo data-icon especificando um
determinado ícone ao link. Por padrão, os ícones são adicionados acima do texto ( data-iconpos="top" ).
• A posição do ícone é definida no recipiente navbar em, e não em links individuais. Por exemplo, para colocar os
ícones abaixo dos títulos, adicione o atributo data-iconpos=“bottom” ao recipiente navbar.
• A posição de ícone pode ser definido como data-iconpos=“left” :
• Ou a posição de ícone pode ser configurada para data-iconpos=“right” :
Todas essas instruções também se aplicam a botões de
links ou elemento de formulários, não a penas a navbars.
31
32. Navbars em Cabeçalhos e Rodapés
• Se você quiser adicionar uma barra de navegação no topo da página ou no rodapé, basta adicionar o recipiente
navbar dentro do bloco de cabeçalho ou rodapé.
<div data-role=“header">
<div data-role="navbar">
<ul>
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
</ul>
</div>
</div>
32
33. Conteúdo Dobrável
• Para criar um bloco de conteúdo dobrável, adicione o atributo data-role="collapsible" a uma div. O atributo
data-content-theme permite que você defina um tema para o conteúdo desta div.
• Dentro desta div, adicione um elemento de cabeçalho (H1-H6), este elemento será exibido com um botão
clicável e possuirá um ícone "+" a esquerda para indicar que é expansível.
• Após o cabeçalho, adicionar qualquer marcação HTML que você quer que seja desmontável. O quadro vai
quebrar essa marcação em um recipiente que será escondido/mostrado quando o título é clicado.
<div data-role="collapsible" data-theme="a" data-content-theme="a">
<h3>Header swatch A</h3>
<p>I'm the collapsible content with a themed content block set to "A".</p>
</div>
33
34. Conteúdos Dobráveis(Acordeões)
• Conjuntos de conteúdos dobráveis começam com a mesma marcação exata dos collapsibles individuais . Ao
adicionar uma div pai com o atributo data-role="collapsible-set" em torno de várias collapsibles, todas passarão
a ser visualmente agrupadas e se comportarão como um acordeão, onde apenas uma seção pode ser aberta de
cada vez.
<div data-role="collapsible-set“ data-theme="c" data-content-theme="d">
<div data-role="collapsible”>
<h3>Section 1</h3>
<p>I'm the collapsible set content for section B.</p>
</div>
<div data-role="collapsible">
<h3>Section 2</h3>
<p>I'm the collapsible set content for section B.</p>
</div>
</div>
34
35. Listas
• É exibida como uma simples lista ordenada contendo itens ligados com o atributo data-role="listview".O jQuery
Mobile irá aplicar todos os estilos necessários para transformar a lista em uma exibição de lista móvel amigável
com indicador de seta para a direita e que preenche toda a largura da janela do navegador. Veja todos os
atributos de lista disponíveis na documentação do jQuery Mobile.
<ul data-role="listview" data-theme="g">
<li><a href="acura.html">Acura</a></li>
<li><a href="audi.html">Audi</a></li>
<li><a href="bmw.html">BMW</a></li>
</ul>
35
36. Links – Links com Ajax(padrão)
• Para permitir transições de página animados, todos os links que apontam
para uma página externa (ex. products.html) será carregado via Ajax.
• Se a solicitação Ajax é bem sucedido, o conteúdo da nova página é
adicionado ao DOM(modelo de objeto de documento), todos os widgets
móveis são auto-inicializado, então a nova página é colocada em exibição
com uma transição de página.
• Se o pedido Ajax falhar, o quadro irá visualizar uma mensagem de erro
pequena, que desaparece após um breve período
de tempo para que isso não quebre o fluxo de
navegação.
36
37. Links – Links com Ajax(padrão)
• *Obs.: Não se pode ligar links a páginas de estrutura Multi-page
utilizando Ajax, porque ao abrir um documento desse tipo só a primeira
página é carregada com o recurso, e não o conjunto completo de páginas
internas. Nestes casos, você deve ligar sem Ajax, para uma atualização de
página inteira para evitar possíveis erros.
• Alguns navegadores apresentam incompatibilidade ao utilizar o Ajax.
37
38. Links – Sem Ajax
• Links que apontam para outros domínios ou que têm
rel = "external", data-ajax = "false" ou target não serão
carregados com o Ajax. Em vez disso, estes links causam uma
atualização de página inteira, sem transição animada.
• Ambos os atributos ( rel = "external" e data-ajax = "false" )
têm o mesmo efeito, mas um significado semântico
diferente: rel = "external" deve ser usado quando o link
aponta para outro site ou domínio, enquanto data-ajax =
"false" é útil para apontar uma página dentro do seu próprio
domínio sem ser carregado via Ajax.
38
39. Links – Sem Ajax
• Ex: <a href=“www.ifsertao-pe.edu.br" rel="external"> ou
<a href="contato.html“ data-ajax=“false”>
*Obs.: Ao construir uma aplicação jQuery Mobile, onde o
sistema de navegação global Ajax está desativado ou
frequentemente desativado em links individuais, recomenda-
se desabilitar a a função nas configurações padrões do jQuery
mobile, para evitar o comportamento de navegação
inconsistente em alguns navegadores.
39
40. Links – Botão voltar
• Se você usar o atributo data-rel = “back" em uma âncora,
cliques sobre essa âncora vão imitar o botão voltar, voltando
uma entrada do histórico, ignorando o href da âncora padrão.
• Certifique-se de ainda fornecer um valor significativo que
realmente aponta para a URL da página de referência para que
o recurso funcione para que não haja incompatibilidade com
nenhum navegador.
40
41. Transição de páginas
• O jQuery Mobile inclui um conjunto de seis efeitos baseados
em CSS de transição que podem ser aplicadas a qualquer link
da página ou envio de formulário com navegação Ajax :
Slide Obs.: A transição flip não é processadoa
corretamente na maioria das versões do
Slideup Android. Recomenda-se usar esta transição
com moderação.
Slidedown
Pop
Fade
Flip
41
42. Transição de páginas
• Por padrão, se aplica a transição slide da direita para a
esquerda.Para definir um efeito de transição personalizada,
adicione o atributo data-transition para o link.
• <a href="index.html" data-transition="pop"> pop</a>
• Quando o botão Voltar for pressionado, o quadro aplicará
automaticamente a versão inversa da transição que foi usada
para mostrar a página. Para especificar que a versão inversa de
uma transição deve ser usada, adicione o atributo data-
direction="reverse” para um link.
42
43. Diálogos
• Qualquer página pode ser apresentada como um diálogo
modal, adicionando o atributo data-rel="dialog" para o link da
página. Quando o atributo de "diálogo" é aplicado, a estrutura
adiciona estilos para adicionar cantos arredondados, margens
em torno da página e um fundo escuro para fazer o "diálogo"
parecer ser suspensa, acima da página.
• <a href=“contato.html" data-rel="dialog“>Abrir contato</a>
43
44. Diálogos - Transições
• Por padrão, a caixa de diálogo será aberta com uma transição
'pop'. Como todas as páginas, você pode especificar qualquer
transição de página que você quer na caixa de diálogo,
adicionando o atributo data-transition para o link.
• <a href="foo.html" data-rel="dialog" data-transition="pop">Open dialog</a>
44
45. Diálogos - Temas
• Diálogos podem ser decorados com temas diferentes, como
qualquer página, adicionando o atributo data-theme para o
cabeçalho, conteúdo, ou rodapé.
45
46. Formulários
• Todos os formulários devem ser envoltos por uma tag form
que tem uma ação e método que irá lidar com a forma de
processamento dos dados no servidor.
• <form action="form.php" method="post"> ... </Form>
Entradas de texto
<input type="text" name="nome" id="basic" value="" />
Podem ser do tipo text, password, etc. De acordo com os tipos do
HTML 5
46
49. Formulários
Radio horizontal
Basta colocar o <fieldset data-role="controlgroup" data-type="horizontal" >
• <div data-role="fieldcontain"> - Organiza os elementos do formulário de
forma mais compacta.
49
51. Referências
• jQuery Mobile Documentation – Disponível em: http://jquerymobile.com/. Acesso em 12 Out
de 2012.
• Porquê desenvolver um site mobile? – Disponível em:
http://www.gestordeconteudos.com/Mobile/Porqu%C3%AAdesenvolverumsitemobile/tabid/4
109/Default.aspx . Acesso em 10 out de 2012.
• Falando de jQuery Mobile – Disponível em:
http://imasters.com.br/artigo/19767/jquery/falando-de-jquery-mobile Acesso em 12 Out de
2012.
51