Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Felipe Castro    Rafael ReisTamara Mendes
   Framework específico para Mobile   Simplificação   Evento de toque   Otimização
   Jquery   Código Leve   URL - Ajax   Terceira Abordagem Adaptação de Conteúdo   HTML 5
   Compatibilidade navegadores
A- Alta QualidadeB – Média QualidadeC – Baixa Qualidade
Componentes
HEAD<title>Page Title</title><meta name="viewport" content="width=device-width, initial-scale=1“ /><link rel="stylesheet" ...
Tipos: Header: Geralmente primeiro elemento da  página Footer: Geralmente último elemento da  página   Ideal para coloc...
<div data-role="footer"> <div data-role="navbar">      <ul>         <li><a href="a.html"                class="ui-btn-acti...
   Posicionados lado a lado<div data-inline="true">  <a href="index.html" data-role="button">Cancel</a>  <a href="index.h...
   Agrupando<div data-role="controlgroup">  <a href="index.html" data-role="button">Yes</a>  <a href="index.html" data-ro...
<a href="index.html" data-role="button"    data-icon="refresh">My button</a><a href="index.html" data-role="button"    dat...
   HTML   Layout grids: apesar de não ser usualmente    comum colocar elementos lado a lado, às vezes    é necessário<fi...
   Collapsible Content Markup: Ideal para esconder    conteúdos e exibi-los dinamicamente<div data-role="collapsible"> <h...
   Baseados em padrões HTML   Elementos mais comuns:    ◦   Text inputs    ◦   Search inputs    ◦   Slider    ◦   Flip s...
<ul data-role="listview" data-theme="g"> <li><a href="acura.html">Acura</a></li> <li><a href="audi.html">Audi</a></li> <li...
   Temas   Customização de Temas   Transições animadas - Ajax
Themeroller    http://jquerymobile.com/themeroller/
Jquery Mobile
Jquery Mobile
Jquery Mobile
Jquery Mobile
Jquery Mobile
Jquery Mobile
Jquery Mobile
Jquery Mobile
Jquery Mobile
Jquery Mobile
Jquery Mobile
Jquery Mobile
Upcoming SlideShare
Loading in …5
×

Jquery Mobile

638 views

Published on

Apresentação do Framework Jquery Mobile

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Jquery Mobile

  1. 1. Felipe Castro Rafael ReisTamara Mendes
  2. 2.  Framework específico para Mobile Simplificação Evento de toque Otimização
  3. 3.  Jquery Código Leve URL - Ajax Terceira Abordagem Adaptação de Conteúdo HTML 5
  4. 4.  Compatibilidade navegadores
  5. 5. A- Alta QualidadeB – Média QualidadeC – Baixa Qualidade
  6. 6. Componentes
  7. 7. HEAD<title>Page Title</title><meta name="viewport" content="width=device-width, initial-scale=1“ /><link rel="stylesheet" href=“ jquery.mobile-1.1.0.min.css" /><script src="jquery-1.7.1.min.js"></script><script src="jquery.mobile-1.1.0.min.js"></script> BODY <div data-role="header"> <h1>Cabeçalho</h1> </div> <div data-role="content"> <p>Hello World!</p> </div> <div data-role="footer"> <h1>Rodapé</h1> </div>
  8. 8. Tipos: Header: Geralmente primeiro elemento da página Footer: Geralmente último elemento da página Ideal para colocar barras de navegação
  9. 9. <div data-role="footer"> <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></div>
  10. 10.  Posicionados lado a lado<div data-inline="true"> <a href="index.html" data-role="button">Cancel</a> <a href="index.html" data-role="button" data-theme="b">Save</a></div>
  11. 11.  Agrupando<div data-role="controlgroup"> <a href="index.html" data-role="button">Yes</a> <a href="index.html" data-role="button">No</a> <a href="index.html" data-role="button">Maybe</a></div>
  12. 12. <a href="index.html" data-role="button" data-icon="refresh">My button</a><a href="index.html" data-role="button" data-icon="search">My button</a><a href="index.html" data-role="button" data-icon="check">My button</a><a href="index.html" data-role="button" data-icon="delete" data-iconpos=“notext">Delete</a>
  13. 13.  HTML Layout grids: apesar de não ser usualmente comum colocar elementos lado a lado, às vezes é necessário<fieldset class="ui-grid-a"> <div class="ui-block-a"> <button type="submit" data-theme="c">Cancel</button> </div> <div class="ui-block-b"> <button type="submit" data-theme="b">Submit</button> </div></fieldset>
  14. 14.  Collapsible Content Markup: Ideal para esconder conteúdos e exibi-los dinamicamente<div data-role="collapsible"> <h3>Im a header</h3> <p>Im the collapsible content. By default Im open and displayed on the page, but you can click the header to hide me.</p></div>
  15. 15.  Baseados em padrões HTML Elementos mais comuns: ◦ Text inputs ◦ Search inputs ◦ Slider ◦ Flip switch ◦ Radio ◦ Checkbox ◦ Select menus Mini Form Elements<input type="text" name="name" id="basic" data-mini="true" />
  16. 16. <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>
  17. 17.  Temas Customização de Temas Transições animadas - Ajax
  18. 18. Themeroller http://jquerymobile.com/themeroller/

×