jQuery Mobile - Aplicações móveis com Javascript

2,261 views
2,183 views

Published on

How to start mobile applications with jQuery Mobile.

Exemplos: https://github.com/luiztiago/keynote-jquerymobile

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

No Downloads
Views
Total views
2,261
On SlideShare
0
From Embeds
0
Number of Embeds
20
Actions
Shares
0
Downloads
31
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

jQuery Mobile - Aplicações móveis com Javascript

  1. 1. jQuery MobileAplicações móveis com Javascript
  2. 2. Luiz TiagoSócio e Front-end Manager @ MGR TecnologiaOrganização do Pernambuco.JSiPhone DeveloperjQueryBrasil.org TeamAnd more things...
  3. 3. Fonte: Ibope NetRatings 2001 2011 2021 9,8 milhões 80 milhões ?????
  4. 4. 7 bilhões de pessoasFonte: ONU / ITU > 5 bilhões
  5. 5. 25 dos 30 maiores do Alexapossuem versão mobile
  6. 6. Por quê?MultidispositivoMultiplataformaAtualização “real-time”
  7. 7. SuporteApple iOSAndroidBlackberryWindows Phoneand more...
  8. 8. Testes?jQuery Mobile Testing Lab
  9. 9. Progressive Enhancement C - G r a d e : Basic HTML + B - G r a d e : Enhanced Style, No Ajax++ A -G r a d e : Full Enhanced Style, Ajax and CSS Transitions
  10. 10. Quanto custa?
  11. 11. #1 Ajaxified Navigation(PJAX?) Friendly Ajax URLS History
  12. 12. #2 Touch Friendly Inputs
  13. 13. #3 Theme Roller
  14. 14. #4 Easy,very easyTrabalha com o que“todo mundo”c onhe c e
  15. 15. #5 E o melhor de tudo...• Aplicações mobile n ã o precisam ser testadas no IE
  16. 16. Hands on
  17. 17. <!DOCTYPE html><html> <head> <title>My Page</title> <meta name="viewport" content="width=device-width, initial- scale=1"> <link rel="stylesheet" href=" http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css " /> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src=" http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js "></script></head>
  18. 18. <body><div data-role="page"> <div data-role="header"> <h1>My Title</h1> </div><!-- /header --> <div data-role="content"> <p>Hello world</p> </div><!-- /content --></div><!-- /page --></body></html>
  19. 19. Exemplo 001.html
  20. 20. Pages - Content<d i v d a t a - r o l e =" p a g e " > <div data-role="header">...</div> <d i v d a t a - r o l e =" c o n t e n t " >. . . </d i v > <div data-role="footer">...</div></d i v >
  21. 21. Exemplo 002.html
  22. 22. List-view Basic linked list Icons Nested list • Content formatting Numbered list • Search filter bar Split button list • Read-only lists List dividers • Lists with forms Count bubble • Inset styled lists Thumbnails • List performance test
  23. 23. Exemplo 003.html
  24. 24. Exemplo 004.html
  25. 25. Exemplo 005.htmlReady! :)
  26. 26. Quando utilizar? Pequenas aplicações• Aplicação não exige grandes funcionalidades nativas (acelerômetro, camera, contatos, notificações, etc.)• Quando precisar de algo r á p i d o , b o m e consequentemente b a r a t o :)
  27. 27. Uso...
  28. 28. Can I help you?@luiztiagoluiztiago@gmail.comwww.luiztiago.comhttps://github.com/luiztiago/keynote-jquerymobilehttp://www.slideshare.net/luiztiago

×