Aplicações móveis com j query mobile
Upcoming SlideShare
Loading in...5
×
 

Aplicações móveis com j query mobile

on

  • 2,102 views

 

Statistics

Views

Total Views
2,102
Views on SlideShare
1,874
Embed Views
228

Actions

Likes
4
Downloads
34
Comments
0

9 Embeds 228

http://davifma.blogspot.com.br 156
http://davifma.blogspot.com 53
http://www.davifma.blogspot.com.br 9
http://davifma.blogspot.pt 5
http://davifma.blogspot.it 1
http://davifma.blogspot.com.es 1
https://www.google.com.br 1
http://davifma.blogspot.jp 1
http://davifma.blogspot.com.au 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Aplicações móveis com j query mobile Aplicações móveis com j query mobile Presentation Transcript

  • AplicaçõesMóveiscomJQueryMobileAplicaçõesMóveiscomJQueryMobileAplicaçõesMóveiscomJQueryMobileAplicaçõesMóveiscomJQueryMobile    Rondinelli Mesquitarondinellimesquitas@gmail.comAplicações Móveis com
  • Aplicações  Móveis  com  JQuery  Mobile  -­‐  Rondinelli  Mesquita  É um framework para construção de interfacesgráficas baseado em HTML5 e CSS3, otimizadopara dispositivos touch como tablets esmartphones. Possui “layout responsive” capazde se adaptar aos diversos tamanhos de tela.O que é JQuery Mobile?Introdução Estrutura Interface Navegação Aplicativo
  • Aplicações  Móveis  com  JQuery  Mobile  -­‐  Rondinelli  Mesquita  O que é JQuery Mobile?Introdução Estrutura Interface Navegação Aplicativo
  • Aplicações  Móveis  com  JQuery  Mobile  -­‐  Rondinelli  Mesquita  JQuery<script> // com javascript var box1 = document.getElementById("box1"); box1.style.border = "1px solid blue"; //com jquery var box2 = $("#box2"); box2.css("border","1px solid blue"); //ou $box2 = $("#box2"); $box2.css("border","1px solid blue"); //ou ainda $("#box2”).css("border","1px solid blue"); </script> Introdução Estrutura Interface Navegação Aplicativo
  • Aplicações  Móveis  com  JQuery  Mobile  -­‐  Rondinelli  Mesquita  JQueryÉ um framework baseado em javascript quetorna mais fácil escrever código javascript.JQuery MobileÉ um framework também baseado em javascriptque usa o JQuery, porém é voltado paraconstrução de interfaces gráficas para a web.Não é uma alternativa para o JQuery!JQuery vs JQuery MobileIntrodução Estrutura Interface Navegação Aplicativo
  • Aplicações  Móveis  com  JQuery  Mobile  -­‐  Rondinelli  Mesquita  O que é JQuery Mobile?Introdução Estrutura Interface Navegação Aplicativo
  • Aplicações  Móveis  com  JQuery  Mobile  -­‐  Rondinelli  Mesquita  Características•  Write less, do more•  Cross-platform•  Flexível•  Baseado em temas•  Simples•  Plugins•  Orientado à marcaçãoO que é JQuery Mobile?Introdução Estrutura Interface Navegação Aplicativo
  • Aplicações  Móveis  com  JQuery  Mobile  -­‐  Rondinelli  Mesquita  ExemplosIntrodução Estrutura Interface Navegação Aplicativo
  • Aplicações  Móveis  com  JQuery  Mobile  -­‐  Rondinelli  Mesquita  InterfaceIntrodução Estrutura Interface Navegação Aplicativo
  • Aplicações  Móveis  com  JQuery  Mobile  -­‐  Rondinelli  Mesquita  InterfaceDialogPopupIntrodução Estrutura Interface Navegação Aplicativo
  • Aplicações  Móveis  com  JQuery  Mobile  -­‐  Rondinelli  Mesquita  InterfaceTable reflow Table column-toggleIntrodução Estrutura Interface Navegação Aplicativo
  • Aplicações  Móveis  com  JQuery  Mobile  -­‐  Rondinelli  Mesquita  InterfaceNavBarAccordionIntrodução Estrutura Interface Navegação Aplicativo
  • Aplicações  Móveis  com  JQuery  Mobile  -­‐  Rondinelli  Mesquita  InterfaceGridIntrodução Estrutura Interface Navegação Aplicativo
  • Aplicações  Móveis  com  JQuery  Mobile  -­‐  Rondinelli  Mesquita  Plataformas suportadasSuporteIntrodução Estrutura Interface Navegação Aplicativo
  • Aplicações  Móveis  com  JQuery  Mobile  -­‐  Rondinelli  Mesquita  SponsorsIntrodução Estrutura Interface Navegação Aplicativo
  • AplicaçõesMóveiscomJQueryMobileAplicaçõesMóveiscomJQueryMobileAplicaçõesMóveiscomJQueryMobileAplicaçõesMóveiscomJQueryMobile    Codificando…
  • Aplicações  Móveis  com  JQuery  Mobile  -­‐  Rondinelli  Mesquita  •  Montar a estrutura do projetoo  Linkar os arquivos csso  Linkar os arquivos jsVamos ao que interessaIntrodução Estrutura Interface Navegação Aplicativo
  • Aplicações  Móveis  com  JQuery  Mobile  -­‐  Rondinelli  Mesquita  <!– Folhas de Estilo--> <link rel="stylesheet" href=”jquery.mobile.structure-1.3.1.css"/> <link rel="stylesheet" href=“jquery.mobile.theme-1.3.1.css"/> <!– Biblioteca JQuery --> <script src=“jquery-1.9.1.min.js"></script> <!– Script --> <script src=“jquery.mobile-1.3.1.js"></script> Montando a Estrutura do ProjetoIntrodução Estrutura Interface Navegação Aplicativo
  • Aplicações  Móveis  com  JQuery  Mobile  -­‐  Rondinelli  Mesquita  <body> <a data-role="button" data-theme=”c">Botão</a> </body> BotãoResultado:Introdução Estrutura Interface Navegação Aplicativo
  • Aplicações  Móveis  com  JQuery  Mobile  -­‐  Rondinelli  Mesquita  •  Elementos são declarados usando tags comatributos data-role•  Cada arquivo deve conter pelo menos umdata-role=“page”•  Atributo data-* para adicionarcomportamentos ao elemento (onde * é otipo do comportamento)ElementosIntrodução Estrutura Interface Navegação Aplicativo
  • Aplicações  Móveis  com  JQuery  Mobile  -­‐  Rondinelli  Mesquita  Alguns atributosdata-role Declaração de elementodata-theme Define o tema do elementodata-icon Define o ícone para o elementodata-inline Define se o elemento será block ou inlinedata-iconpos Define a posição do ícone em relação ao textodata-ajax Ativa ou desativa as requisições ajaxdata-corners Ativa bordas arrendondadas do elementodata-shadow Ativa as sombras do elementodata-rel Define o relacionamento do elemento atual paraoutro elementodata-transition Define a transição do elemento atual para outroelementoIntrodução Estrutura Interface Navegação Aplicativo
  • Aplicações  Móveis  com  JQuery  Mobile  -­‐  Rondinelli  Mesquita  Alguns atributosdata-dismissible Popups: faz com que o mesmo nãopossa ser fechadodata-overlay-theme Dialog: define o tema de backgrounddata-column-btn-text Tabela: define texto do botão paraescolha das colunas a serem exibidasdata-column-btn-theme Tabela: define o tema do botão paraescolha das colunas a serem exibidasdata-column-popup-theme Tabela: define o tema do popup paraescolha de colunas a serem exibidasdata-priority th de tabela: define a prioridade dacoluna caso a janela sejaredimensionadadata-content-theme Accordion e Collapsible: defiine o temado contéudoIntrodução Estrutura Interface Navegação Aplicativo
  • Aplicações  Móveis  com  JQuery  Mobile  -­‐  Rondinelli  Mesquita  Transições: data-transition fadepopflipturnflowslidefadeslideslideupslidedownnoneIntrodução Estrutura Interface Navegação Aplicativo
  • Aplicações  Móveis  com  JQuery  Mobile  -­‐  Rondinelli  Mesquita  Ícones: data-icon plus forwardminus backdelete gridarrow-l stararrow-r alertarrow-u infoarrow-d homecheck searchgear barsrefresh editIntrodução Estrutura Interface Navegação Aplicativo
  • Aplicações  Móveis  com  JQuery  Mobile  -­‐  Rondinelli  Mesquita  data-theme e data-iconpos data-theme=“a” data-iconpos=“top” Introdução Estrutura Interface Navegação Aplicativo
  • Aplicações  Móveis  com  JQuery  Mobile  -­‐  Rondinelli  Mesquita  <!– Página Padrão do Jquery Mobile--> <div data-role="page"> <div data-role="header" data-theme="b"> <h1>Cabeçalho</h1> </div> <div data-role="content" data-theme="c"> <!– Conteúdo --> </div> <div data-role="footer" data-theme="b"> <h1>Rodapé</h1> </div> </div> Marcação básicaIntrodução Estrutura Interface Navegação Aplicativo
  • Aplicações  Móveis  com  JQuery  Mobile  -­‐  Rondinelli  Mesquita  Marcação básicaIntrodução Estrutura Interface Navegação Aplicativo
  • Aplicações  Móveis  com  JQuery  Mobile  -­‐  Rondinelli  Mesquita  <!– Página Padrão do Jquery Mobile--> <div data-role="page"> <div data-role="header" data-theme="b"> <h1>Cabeçalho</h1> </div> <div data-role="content" data-theme="c"> <p>Um botão logo abaixo</p> <a data-role="button">Botão</a> </div> <div data-role="footer" data-theme="b"> <h1>Rodapé</h1> </div> </div> Página com botãoIntrodução Estrutura Interface Navegação Aplicativo
  • Aplicações  Móveis  com  JQuery  Mobile  -­‐  Rondinelli  Mesquita  Página com botãoIntrodução Estrutura Interface Navegação Aplicativo
  • AplicaçõesMóveiscomJQueryMobileAplicaçõesMóveiscomJQueryMobileAplicaçõesMóveiscomJQueryMobileAplicaçõesMóveiscomJQueryMobile    Dialog
  • Aplicações  Móveis  com  JQuery  Mobile  -­‐  Rondinelli  Mesquita  Como funciona•  Um botão dispara uma chamada para umapágina•  O framework constrói a página html dentrodo DialogDialogIntrodução Estrutura Interface Navegação Aplicativo
  • Aplicações  Móveis  com  JQuery  Mobile  -­‐  Rondinelli  Mesquita  DialogIntrodução Estrutura Interface Navegação Aplicativo
  • Aplicações  Móveis  com  JQuery  Mobile  -­‐  Rondinelli  Mesquita  <!– dialog.html --> <!-- Dispara o dialog --> <a href="dialog-content.html" data-role="button"data-rel="dialog" data-transition="fade"> Dialog </a> DialogIntrodução Estrutura Interface Navegação Aplicativo
  • Aplicações  Móveis  com  JQuery  Mobile  -­‐  Rondinelli  Mesquita  <!– dialog-content.html --> <!-- Dispara o dialog --> <p>Deseja excluir o registro? </p> <a data-role="button" data-inline="true" data-theme="b">Sim</a> <a data-role="button" data-inline="true" data-rel="back">Não</a> DialogIntrodução Estrutura Interface Navegação Aplicativo
  • AplicaçõesMóveiscomJQueryMobileAplicaçõesMóveiscomJQueryMobileAplicaçõesMóveiscomJQueryMobileAplicaçõesMóveiscomJQueryMobile    Popup
  • Aplicações  Móveis  com  JQuery  Mobile  -­‐  Rondinelli  Mesquita  Como funciona•  Um botão dispara uma chamada para opopup•  O framework simplesmente exibe o popupque está ocultoPopupIntrodução Estrutura Interface Navegação Aplicativo
  • Aplicações  Móveis  com  JQuery  Mobile  -­‐  Rondinelli  Mesquita  PopupIntrodução Estrutura Interface Navegação Aplicativo
  • Aplicações  Móveis  com  JQuery  Mobile  -­‐  Rondinelli  Mesquita  <!-- Dispara o popup --> <a href="#login" data-role="button" data-rel="popup" data-transition="fade">Login</a> <div id="login" data-role="popup" data-theme="a" data-dismissible="false"> <div style="padding: 10px 20px"> <h3>login</h3> <form> <inputtype="text"id="username"placeholder="nomedeusuário”/> <input type="password" id="password" placeholder="senha”/> <input type="submit" value="Login" data-theme="b"/> </form> </div> </div> PopupIntrodução Estrutura Interface Navegação Aplicativo
  • Aplicações  Móveis  com  JQuery  Mobile  -­‐  Rondinelli  Mesquita  <a href="#tooltip" class="tip" data-role="button" data-icon="info"data-theme="e" data-iconpos="notext"></a> <div id="tooltip" data-role="popup" data-theme="e"> <p>Informação</p> </div> Controlando via javascriptIntrodução Estrutura Interface Navegação Aplicativo
  • Aplicações  Móveis  com  JQuery  Mobile  -­‐  Rondinelli  Mesquita  <script> $(".tip").on("taphold",function(event){ event.preventDefault(); console.log("clicou e segurou!"); $("#tooltip").popup("open"); $("#tooltip").popup({ overlayTheme: "a", shadow: true, corners: false }); }); </script> Controlando via javascriptIntrodução Estrutura Interface Navegação Aplicativo
  • AplicaçõesMóveiscomJQueryMobileAplicaçõesMóveiscomJQueryMobileAplicaçõesMóveiscomJQueryMobileAplicaçõesMóveiscomJQueryMobile    Tabelas
  • Aplicações  Móveis  com  JQuery  Mobile  -­‐  Rondinelli  Mesquita  TabelasTable reflow Table column-toggleIntrodução Estrutura Interface Navegação Aplicativo
  • Aplicações  Móveis  com  JQuery  Mobile  -­‐  Rondinelli  Mesquita  data-mode=“reflow”A tabela passa a ser “responsive” se adaptandoa tela do dispositivodata-mode=“columntoggle”Permite selecionar as colunas que serãoexibidas na tabela ou priorizando algumascolunasTabelasIntrodução Estrutura Interface Navegação Aplicativo
  • Aplicações  Móveis  com  JQuery  Mobile  -­‐  Rondinelli  Mesquita  <table data-role="table" data-mode="reflow" class="ui-responsivetable-stripe" style="display: table !important"> <thead> <tr> <th>Código</th> <th>Nome</th> <th>Email</th> <th>Telefone</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Peter</td> <td>peter@email.com</td> <td>99999999</td> </tr> </tbody> data-mode=“reflow”Introdução Estrutura Interface Navegação Aplicativo
  • Aplicações  Móveis  com  JQuery  Mobile  -­‐  Rondinelli  Mesquita  data-mode=“reflow”Introdução Estrutura Interface Navegação Aplicativo
  • Aplicações  Móveis  com  JQuery  Mobile  -­‐  Rondinelli  Mesquita  <table data-role="table" data-mode="columntoggle" class="ui-responsivetable-stroke” data-column-btn-text="colunas" data-column-btn-theme="b"data-column-popup-theme="a" style="display: table !important"> <thead> <tr> <th data-priority="2">Código</th> <th data-priority="1">Nome</th> <th data-priority="1">Email</th> <th data-priority="2">Telefone</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Peter</td> <td>peter@email.com</td> <td>99999999</td> </tr> </tbody> data-mode=“columntoggle”Introdução Estrutura Interface Navegação Aplicativo
  • Aplicações  Móveis  com  JQuery  Mobile  -­‐  Rondinelli  Mesquita  data-mode=“columntoggle”Introdução Estrutura Interface Navegação Aplicativo
  • AplicaçõesMóveiscomJQueryMobileAplicaçõesMóveiscomJQueryMobileAplicaçõesMóveiscomJQueryMobileAplicaçõesMóveiscomJQueryMobile    Accordion
  • Aplicações  Móveis  com  JQuery  Mobile  -­‐  Rondinelli  Mesquita  AccordionIntrodução Estrutura Interface Navegação Aplicativo
  • Aplicações  Móveis  com  JQuery  Mobile  -­‐  Rondinelli  Mesquita  <div data-role="collapsible-set" data-content-theme="d"> <div data-role="collapsible" data-theme="b"> <h1>Planetas</h1> <ul data-role="listview"> <li><a>Terra</a></li> <li>Marte</li> <li>Saturno</li> <li>Mercúrio</li> </ul> </div> </div> AccordionIntrodução Estrutura Interface Navegação Aplicativo
  • Aplicações  Móveis  com  JQuery  Mobile  -­‐  Rondinelli  Mesquita  AccordionIntrodução Estrutura Interface Navegação Aplicativo
  • AplicaçõesMóveiscomJQueryMobileAplicaçõesMóveiscomJQueryMobileAplicaçõesMóveiscomJQueryMobileAplicaçõesMóveiscomJQueryMobile    Grid
  • Aplicações  Móveis  com  JQuery  Mobile  -­‐  Rondinelli  Mesquita  Permite construir layout baseados em colunasresponsivas.GridIntrodução Estrutura Interface Navegação Aplicativo
  • Aplicações  Móveis  com  JQuery  Mobile  -­‐  Rondinelli  Mesquita  <!-- Coluna 50/50% --> <div class="ui-grid-a"> <div class="ui-block-a"> <a data-role="button”>Botão</a> </div> <div class="ui-block-b"> <a data-role="button”>Botão</a> </div> </div> GridIntrodução Estrutura Interface Navegação Aplicativo
  • Aplicações  Móveis  com  JQuery  Mobile  -­‐  Rondinelli  Mesquita  <!-- Coluna 33/33/33% --> <div class="ui-grid-b"> <div class="ui-block-a"> <a data-role="button”>Botão</a> </div> <div class="ui-block-b"> <a data-role="button”>Botão</a> </div> <div class="ui-block-c"> <a data-role="button”>Botão</a> </div> </div> GridIntrodução Estrutura Interface Navegação Aplicativo
  • Aplicações  Móveis  com  JQuery  Mobile  -­‐  Rondinelli  Mesquita  <!-- Coluna 50/50% --> <div class="ui-grid-a ui-responsive"> <div class="ui-block-a"> <a data-role="button”>Botão</a> </div> <div class="ui-block-b"> <a data-role="button”>Botão</a> </div> </div> Grid responsiveIntrodução Estrutura Interface Navegação Aplicativo
  • Aplicações  Móveis  com  JQuery  Mobile  -­‐  Rondinelli  Mesquita  @media all and (max-width: 560px) { .ui-block-a, .ui-block-b, .ui-block-c, .ui-block-d, .ui-block-e { width: 100%; float: none; } } A mágicaIntrodução Estrutura Interface Navegação Aplicativo
  • Aplicações  Móveis  com  JQuery  Mobile  -­‐  Rondinelli  Mesquita  Nosso próprio breakpointAdicionando a classe my-breakpoint nocontainer dos elementos<!-- Coluna 50/50% --> <div class="ui-grid-a my-breakpoint"> <div class="ui-block-a"> <a data-role="button”>Botão</a> </div> <div class="ui-block-b"> <a data-role="button”>Botão</a> </div> </div> Introdução Estrutura Interface Navegação Aplicativo
  • Aplicações  Móveis  com  JQuery  Mobile  -­‐  Rondinelli  Mesquita  Nosso próprio breakpointReescrevendo o CSS@media all and (max-width: 560px) { .my-breakpoint .ui-block-a, .my-breakpoint .ui-block-b, .my-breakpoint .ui-block-c, .my-breakpoint .ui-block-d, .my-breakpoint .ui-block-e { width: 100%; float: none; } } Introdução Estrutura Interface Navegação Aplicativo
  • AplicaçõesMóveiscomJQueryMobileAplicaçõesMóveiscomJQueryMobileAplicaçõesMóveiscomJQueryMobileAplicaçõesMóveiscomJQueryMobile    Eventos
  • Aplicações  Móveis  com  JQuery  Mobile  -­‐  Rondinelli  Mesquita  É uma mensagem de software informando quealguma coisa aconteceu.•  Evento de mouse•  Evento de tecladoEventosIntrodução Estrutura Interface Navegação Aplicativo
  • Aplicações  Móveis  com  JQuery  Mobile  -­‐  Rondinelli  Mesquita  Eventos tap Evento de toquetap-hold Evento “toca e segura”swipe Evento de arraste sobre o elementopagecreate Ocorre quando uma página é criadapageshow Ocorre quando uma página é exibida (depois daanimação ajax)pagehide Ocorre quando uma página é ocultada (depois daanimação ajax)pageinit Ocorre quando uma página é inicializada(independente se o acesso foi direto ou via ajax)pageload Ocorre quando a página é carregada e inserida noDOMIntrodução Estrutura Interface Navegação Aplicativo
  • Aplicações  Móveis  com  JQuery  Mobile  -­‐  Rondinelli  Mesquita  Eventos pageloadfailed Ocorre quando há falha na requisição de umapáginaorientationchange Ocorre quando a orientação do dispositivo mudascrollstart Ocorre quando a rolagem é iniciadascrollstop Ocorre quando a rolagem é finalizadavmousemove Simula o movimento do mousevmouseover Simula quando o cursor do mouse está sobre umelementovmouseout Simula quando o cursor do mouse sai de umelementovmousedown Simula quando o botão do mouse é clicadovmouseup Simula quando o botão do mouse é soltovclick Simula o click do botãoIntrodução Estrutura Interface Navegação Aplicativo
  • Aplicações  Móveis  com  JQuery  Mobile  -­‐  Rondinelli  Mesquita  <script> $(".box").on("swipe",function(e){ console.log("arrastou!"); $(this).addClass("green"); }); </script> SwipeIntrodução Estrutura Interface Navegação Aplicativo
  • Aplicações  Móveis  com  JQuery  Mobile  -­‐  Rondinelli  Mesquita  <script> $(window).on("scrollstart",function(e){ console.log("Inicio do scroll"); console.log($(document).offset().top); }); $(window).on("scrollstop",function(e){ console.log("Fim do scroll"); }); </script> ScrollIntrodução Estrutura Interface Navegação Aplicativo
  • Aplicações  Móveis  com  JQuery  Mobile  -­‐  Rondinelli  Mesquita  <script> $("#page1").on("pageload",function(){ console.log("Página 1 carregada"); }); $("#page1").on("pageshow",function(){ console.log("Página 1 exibida"); }); $(document).on("pageloadfailed",function(event, data){ console.log("Erro ao carragar a página"); }); </script> PageIntrodução Estrutura Interface Navegação Aplicativo
  • AplicaçõesMóveiscomJQueryMobileAplicaçõesMóveiscomJQueryMobileAplicaçõesMóveiscomJQueryMobileAplicaçõesMóveiscomJQueryMobile    Navegação
  • Aplicações  Móveis  com  JQuery  Mobile  -­‐  Rondinelli  Mesquita  Como funcionaO JQuery Mobile utiliza Ajax para realizar asrequisições ao invés de HTTP1.  Realiza a requisição a procura do conteúdo2.  Insere o conteúdo na página mas deixa-o oculto(display:none)3.  Realiza a transição entre as páginas usandoanimações4.  Remove a página antigaNavegaçãoIntrodução Estrutura Interface Navegação Aplicativo
  • Aplicações  Móveis  com  JQuery  Mobile  -­‐  Rondinelli  Mesquita  Ajax desativadoAjax “escuta” todos os links exceto quando:•  O elemento possui atributo data-ajax=”false”•  O elemento possui atributo target•  O elemento possui atributo data-rel=“external”•  O elemento aponta para um domínio externo ao siteNavegaçãoIntrodução Estrutura Interface Navegação Aplicativo
  • Aplicações  Móveis  com  JQuery  Mobile  -­‐  Rondinelli  Mesquita   <div data-role="page" id="page1"> <div data-role="header" data-theme="b"> <h1>Página 1</h1> </div> <div data-role="content" data-theme="c"> <a data-role="button" href="#page2">página 2</a> </div> <div data-role="footer" data-theme="b"> <h1>Rodapé</h1> </div> </div> <div data-role="page" id="page2"> <div data-role="header" data-theme="b"> <h1>Página 2</h1> </div> <div data-role="content" data-theme="c"> <a data-role="button" href="#page1">página 1</a> </div> <div data-role="footer" data-theme="b"> <h1>Rodapé</h1> </div> </div> Multi-páginasIntrodução Estrutura Interface Navegação Aplicativo
  • Aplicações  Móveis  com  JQuery  Mobile  -­‐  Rondinelli  Mesquita  <!-- Página 1 --> <div data-role="page" id="page1"> <div data-role="header" data-theme="b"> <h1>Página 1</h1> </div> <div data-role="content" data-theme="c"> <a data-role="button" href=“page2.html">página 2</a> </div> <div data-role="footer" data-theme="b"> <h1>Rodapé</h1> </div> </div> Páginas separadas – Página 1Introdução Estrutura Interface Navegação Aplicativo
  • Aplicações  Móveis  com  JQuery  Mobile  -­‐  Rondinelli  Mesquita  <!-- Página 2 --> <div data-role="page" id="page2"> <div data-role="header" data-theme="b"> <h1>Página 2</h1> </div> <div data-role="content" data-theme="c"> <a data-role="button" href=“page1.html">página 1</a> </div> <div data-role="footer" data-theme="b"> <h1>Rodapé</h1> </div> </div> Páginas separadas – Página 2Introdução Estrutura Interface Navegação Aplicativo
  • Aplicações  Móveis  com  JQuery  Mobile  -­‐  Rondinelli  Mesquita  <!-- Barra de navegação --> <div data-role="navbar" data-theme="a"> <ul> <li><a data-icon="home" data-theme="a">Contatos</a></li> <li><a data-icon="grid" data-theme="a">Grupos</a></li> <li><a data-icon="gear" data-theme="a">Configurações</a></li> </ul> </div> Barra de navegaçãoIntrodução Estrutura Interface Navegação Aplicativo
  • Aplicações  Móveis  com  JQuery  Mobile  -­‐  Rondinelli  Mesquita  Barra de navegaçãoIntrodução Estrutura Interface Navegação Aplicativo
  • AplicaçõesMóveiscomJQueryMobileAplicaçõesMóveiscomJQueryMobileAplicaçõesMóveiscomJQueryMobileAplicaçõesMóveiscomJQueryMobile    Aplicativo: Agenda
  • Aplicações  Móveis  com  JQuery  Mobile  -­‐  Rondinelli  Mesquita  Aplicação•  Login•  Tela de contatos•  Tela de novo contatoAquivos necessários•  js e css do JQuery Mobile•  Biblioteca JQuery•  Script storageHTML5.js para armazenamentolocal com html5Aplicação: AgendaIntrodução Estrutura Interface Navegação Aplicativo
  • Aplicações  Móveis  com  JQuery  Mobile  -­‐  Rondinelli  Mesquita  Aplicação: AgendaIntrodução Estrutura Interface Navegação Aplicativo
  • Aplicações  Móveis  com  JQuery  Mobile  -­‐  Rondinelli  Mesquita  <form id="formLogin" data-ajax="false"> <div id="info"></div> <input type="text" id="username" placeholder="nome de usuário”/> <input type="password" id="password" placeholder="senha”/> <input type="submit" value="Login" data-theme="b"/> </form> Loginhtml tela de loginIntrodução Estrutura Interface Navegação Aplicativo
  • Aplicações  Móveis  com  JQuery  Mobile  -­‐  Rondinelli  Mesquita  <script> $("#formLogin").submit(function(){ var username = $("#username").val(); var password = $("#password").val(); if(username == "username" && password == "123"){ window.location = "contacts.html"; }else{ $("#info").text("Dados incorretos!"); } return false; }); </script> Loginjavascript tela de loginIntrodução Estrutura Interface Navegação Aplicativo
  • Aplicações  Móveis  com  JQuery  Mobile  -­‐  Rondinelli  Mesquita  ResultadoLoginIntrodução Estrutura Interface Navegação Aplicativo
  • Aplicações  Móveis  com  JQuery  Mobile  -­‐  Rondinelli  Mesquita  <!-- Cabeçalho --> <div data-role="header" data-theme="a"> <a href="index.html" data-role="button" data-icon="home" data-iconpos="notext"data-ajax="false"></a> <h1>Agenda</h1> <a href="login.html" data-role="button" data-icon="delete" data-iconpos="notext" data-ajax="false"></a> <!-- Barra de navegação --> <div data-role="navbar" data-theme="a"> <ul> <li><a href="contacts.html" data-icon="home" data-theme="a" class="ui-btn-active" data-ajax="false">Contatos</a></li> <li><a href="groups.html" data-icon="grid" data-theme="a"data-ajax="false">Grupos</a></li> <li><a href="settings.html" data-icon="gear" data-theme="a" data-ajax="false">Configurações</a></li> </ul> </div> </div> ContatosIntrodução Estrutura Interface Navegação Aplicativo
  • Aplicações  Móveis  com  JQuery  Mobile  -­‐  Rondinelli  Mesquita  <!-- Conteúdo --> <div data-role="content" data-theme="c" id="contactContent"> <ul data-role="listview" id="contactList"> <!-- <li> <a> <h1>titulo</h1> <p>Broken Bells</p> </a> </li> --> </ul> </div> ContatosIntrodução Estrutura Interface Navegação Aplicativo
  • Aplicações  Móveis  com  JQuery  Mobile  -­‐  Rondinelli  Mesquita  <!– Footer --> <div data-role="footer" data-theme="b"> <div data-role="navbar" data-theme="a"> <ul> <li><a href="new-contact.html" data-icon="plus" data-theme="a" class="ui-btn-active" data-ajax="false">Novo</a></li> <li id="deleteAll"><a data-icon="delete" data-theme="a">Apagar tudo</a></li> </ul> </div> </div> ContatosIntrodução Estrutura Interface Navegação Aplicativo
  • Aplicações  Móveis  com  JQuery  Mobile  -­‐  Rondinelli  Mesquita  ResultadoContatosIntrodução Estrutura Interface Navegação Aplicativo
  • Aplicações  Móveis  com  JQuery  Mobile  -­‐  Rondinelli  Mesquita  <form id="newContactForm" data-ajax="false"> <input type="text" name="nome" id="nome”/> <input type="text" name="nome" id="telefone”/> <select name="grupo" id="grupo" data-native-menu="false”> <option value="Amigos">Amigos</option> <option value="Família">Família</option> <option value="Trabalho">Trabalho</option> <option value="Faculdade">Faculdade</option> </select> <button type="submit" data-theme="a">Salvar</button> </form> Novo ContatoIntrodução Estrutura Interface Navegação Aplicativo
  • Aplicações  Móveis  com  JQuery  Mobile  -­‐  Rondinelli  Mesquita  ResultadoNovo ContatoIntrodução Estrutura Interface Navegação Aplicativo
  • Aplicações  Móveis  com  JQuery  Mobile  -­‐  Rondinelli  Mesquita  <div data-role="content" data-theme="c"> <ul data-role="listview" id="groupList" data-inset="false"> <li> <a class="labelGroup">Amigos</a> <span class="ui-li-count">28</span> </li> </ul> </div> GruposIntrodução Estrutura Interface Navegação Aplicativo
  • Aplicações  Móveis  com  JQuery  Mobile  -­‐  Rondinelli  Mesquita  ResultadoNovo ContatoIntrodução Estrutura Interface Navegação Aplicativo
  • Aplicações  Móveis  com  JQuery  Mobile  -­‐  Rondinelli  Mesquita  JQuery e JQuery Mobile•  http://jquery.com/•  http://jquerymobile.com/•  http://api.jquerymobile.com/•  http://jquerymobile.com/themeroller/•  http://dev.jtsage.com/jQM-DateBox/Prototipagem•  http://pencil.evolus.vn/•  http://cacoo.comFerramentas CSS3•  http://css3generator.com/•  http://www.colorzilla.com/gradient-editor/Links
  • Aplicações  Móveis  com  JQuery  Mobile  -­‐  Rondinelli  Mesquita  bit.ly/sistemasdeinforondymesquitarondinellimesquitas@gmail.comFinalizando…
  • Aplicações  Móveis  com  JQuery  Mobile  -­‐  Rondinelli  Mesquita  DOYLE, Matt. Master mobile web apps with jquery mobile. 3. ed. NewSouth Walles: Elated Communications, 2012.CAMDEN, Raymon; MATTHEWS, Andy. Jquery mobile web developmentessentials. 1. ed. Birmingham: Packt Publishing, 2012.THE JQUERY FOUNDATION. JQuery Mobile. Disponível em <http://jquerymobile.com> . Acesso em 15 de abril de 2013.THE JQUERY FOUNDATION. JQuery. Disponível em <http://jquery.com> .Acesso em 15 de abril de 2013.THE JQUERY FOUNDATION. Api JQuery Mobile. Disponível em <http://api.jquerymobile.com/> . Acesso em 15 de abril de 2013Referências
  • Aplicações  Móveis  com  JQuery  Mobile  -­‐  Rondinelli  Mesquita  IBM. Introdução ao jquery mobile. Disponível em <http://www.ibm.com/developerworks/br/library/wa-jquerymobileupdate/> . Acesso em 15 deabril de 2013.TAVARES, Alan. Estrutura de navegação de jquery mobile. Disponível em<http://alantavares.com.br/estrutura-navegacao-jquery-mobile/>. Acessoem 15 de abril de 2013DEVGROW. Mobile web development part 2: creating a simple appusing jquery mobile. Disponível em <http://devgrow.com/mobile-web-dev-using-jquery-mobile/> Acesso em 14 de maio de 2013.Referências