jQuery mobile

Heraldo Gonçalves Lima JuniorEudis Oliveira Teixeira

1

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

Introdução ao Framework JQuery Mobile. 2

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


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“ Introdução ao Framework JQuery Mobile.

4

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.


Principais plataformas compatíveis


Patrocinadores do projeto


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>

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.

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" ).



<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.



• 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" >

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é.

Temas de páginas


Tema A

Tema Padrão

Temas de páginas


Tema C

Tema B

Temas de páginas


Tema E

Tema D

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”

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.

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.

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”.

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>

Cabeçalho – Adicionando botões


<div data-role="header" data-position="inline"> <a href="index.html" data-icon="delete"> Cancelar </a> <h1> Editar Contato </h1> <a href="index.html" data-icon="check"> salvar </a>

</div>

Cabeçalho – Configurando botões


Mudando a cor dos botões:

<div data-role="header" data-position="inline"> <a href="index.html" data-icon="delete"> Cancelar </a> <h1> Editar Contato </h1> <a href="index.html" data-icon="check" data-theme="b"> salvar </a>

</div>

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>

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>

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>

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:

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:

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>

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:

Í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.

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>

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>

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>

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>

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.

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.

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.

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.

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.

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 :

SlideSlideupSlidedownPopFadeFlip

Obs.: A transição flip não é processadoa corretamente na maioria das versões do Android. Recomenda-se usar esta transição com moderação.

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.

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>

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>

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é.

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

Formulários


Textarea<textarea name="textarea" id="textarea-a"> .......</ Textarea>

Barra de Pesquisa<input type="search" name="search" id="searc-basic" value=""/>

Slide<input type="range" name="slider" id="slider-0" value="25" min="0"

max="100" step="5"/>

Formulários


Interruptor<select name="slider" id="flip-a" data-role="slider">

<option value="off">Off</option> <option value="on">On</option>

</select>

Radio vertical<fieldset data-role="controlgroup"><input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" />

<label for="radio-choice-1"> Cat </ label> <input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2" /> <label for="radio-choice-

2"> Dog </ label> <input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3" /> <label for="radio-choice-

3"> Hamster </ label> <input type="radio" name="radio-choice-1" id="radio-choice-4" value="choice-4" /></fieldset>

Formulários


Radio horizontalBasta colocar o <fieldset data-role="controlgroup" data-type="horizontal" >

• <div data-role="fieldcontain"> - Organiza os elementos do formulário de forma mais compacta.

Formulários


Checkboxes<input type="checkbox" name="checkbox-1" id="checkbox-0" class="custom"/> <label for="checkbox-0">I agree</label>

Menus de Seleção<label for="select-choice-0" class="select">Shipping method:</label>

<select name="select-choice-0" id="select-choice-1"> <option value="standard">Standard: 7 day</option> <option value="rush">Rush: 3 days</option><option value="express">Express: next day</option> <option value="overnight">Overnight</option>

</select>

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/4109/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.

http://jquerymobile.com/

http://www.gestordeconteudos.com/Mobile/Porqu%C3%AAdesenvolverumsitemobile/tabid/4109/Default.aspx







http://imasters.com.br/artigo/19767/jquery/falando-de-jquery-mobile

http://imasters.com.br/artigo/19767/jquery/falando-de-jquery-mobile

Obrigado pela atenção!


Contato:

• Heraldo Gonçalves– [email protected]– Facebook.com/heraldo.info

• Eudis Teixeira– [email protected]

jQuery mobile

Design

Transcript of jQuery mobile