jQuery Mobile - Aplicações móveis com Javascript
•Transferir como PPT, PDF•
4 gostaram•902 visualizações
How to start mobile applications with jQuery Mobile. Exemplos: https://github.com/luiztiago/keynote-jquerymobile
Recomendados
Mais conteúdo relacionado
Semelhante a jQuery Mobile - Aplicações móveis com Javascript
Semelhante a jQuery Mobile - Aplicações móveis com Javascript (20)
Mais de Luiz Oliveira
jQuery Mobile - Aplicações móveis com Javascript
- 1. jQuery Mobile Aplicações móveis com Javascript
- 2. Luiz Tiago Sócio e Front-end Manager @ MGR Tecnologia Organização do Pernambuco.JS iPhone Developer jQueryBrasil.org Team And more things...
- 3. Fonte: Ibope NetRatings 2001 2011 2021 9,8 milhões 80 milhões ?????
- 4. 7 bilhões de pessoas Fonte: ONU / ITU > 5 bilhões
- 5. 25 dos 30 maiores do Alexa possuem versão mobile
- 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. Quanto custa?
- 11. #1 Ajaxified Navigation (PJAX?) Friendly Ajax URLS History
- 12. #2 Touch Friendly Inputs
- 13. #3 Theme Roller
- 14. #4 Easy, very easy Trabalha com o que “todo mundo” c onhe c e
- 15. #5 E o melhor de tudo... • Aplicações mobile n ã o precisam ser testadas no IE
- 16. Hands on
- 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. <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. Exemplo 001.html
- 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. Exemplo 002.html
- 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. Exemplo 003.html
- 24. Exemplo 004.html
- 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. Uso...
- 28. Can I help you? @luiztiago luiztiago@gmail.com www.luiztiago.com https://github.com/luiztiago/keynote-jquerymobile http://www.slideshare.net/luiztiago