jQuery mobile

5,469 views

Published on

jQuery Mobile e todo o seu poder!

Published in: Design

jQuery mobile

  1. 1. Heraldo Gonçalves Lima Junior Eudis Oliveira Teixeira 1
  2. 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. 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. 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. 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
  6. 6. Principais plataformas compatíveis 6
  7. 7. Patrocinadores do projeto 7
  8. 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. 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. 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. 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. 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. 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
  14. 14. Temas de páginasTema Padrão Tema A 14
  15. 15. Temas de páginas Tema B Tema C 15
  16. 16. Temas de páginas Tema D Tema E 16
  17. 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. 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. 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. 20. Barras de FerramentasBarras 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. 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
  22. 22. 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> 22
  23. 23. Cabeçalho – Configurando botõesMudando 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> 23
  24. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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>Im the collapsible content with a themed content block set to "A".</p></div> 33
  34. 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>Im the collapsible set content for section B.</p> </div> <div data-role="collapsible"> <h3>Section 2</h3> <p>Im the collapsible set content for section B.</p> </div></div> 34
  35. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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
  47. 47. FormuláriosTextarea<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"/> 47
  48. 48. FormuláriosInterruptor<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> 48
  49. 49. FormuláriosRadio horizontalBasta colocar o <fieldset data-role="controlgroup" data-type="horizontal" >• <div data-role="fieldcontain"> - Organiza os elementos do formulário de forma mais compacta. 49
  50. 50. FormuláriosCheckboxes<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> 50
  51. 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
  52. 52. Obrigado pela atenção!Contato:• Heraldo Gonçalves – Heraldo.info@gmail.com – Facebook.com/heraldo.info• Eudis Teixeira – Eudisnet@gmail.com 52

×