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

536 views
463 views

Published on

Apresentação do Framework Jquery Mobile

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
536
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
21
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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/

×