Your SlideShare is downloading. ×
Uma web mais sexy com jQuery Mobile
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Uma web mais sexy com jQuery Mobile

6,438
views

Published on

Uma apresentação sobre jQuery Mobile e como isso corresponde ao mercado web atual. Seus aplicativos web para mobile podem ficar sexy em poucos passos!

Uma apresentação sobre jQuery Mobile e como isso corresponde ao mercado web atual. Seus aplicativos web para mobile podem ficar sexy em poucos passos!

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
6,438
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
18
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Sexy Web Mobile Leo Balter - 16 EDTED Créditos:jQuery Mobile Overview | http://slidesha.re/ceXBYD | Todd Parker Testing Mobile JavaScript | http://slidesha.re/a4npHB | John Resig
  • 2. whois @LeoBalter• Pós Graduação em Engenharia de Software• Intervir• Desconferência
  • 3. jQuery.org
  • 4. jQuery.org jQuery
  • 5. jQuery.org jQuery jQuery UI
  • 6. jQuery.org jQuery jQuery UI QUnit
  • 7. jQuery.org jQuery jQuery UI QUnit jQuery Mobile
  • 8. jQuery.org jQuery jQuery UI QUnit jQuery Mobile +++
  • 9. John Resig
  • 10. John Resig
  • 11. Richard D. Worth
  • 12. Todd Parker
  • 13. Por queMobile?
  • 14. 10% da web é mobile
  • 15. 20131.82bi de dispositivos móveis prontos para web
  • 16. 20131.82bi de dispositivos móveis prontos para web E isso após o apocalipse em 2012!
  • 17. Quem é o mais utilizado?
  • 18. Quem é o mais utilizado?• Android?
  • 19. Quem é o mais utilizado?• Android?• iPhone?
  • 20. Quem é o mais utilizado?• Android?• iPhone?• BlackBerry?
  • 21. Quem é o mais utilizado?• Android? Symbian OS• iPhone? (Nokia)• BlackBerry?
  • 22. Sistemas Operacionais no Mundo
  • 23. No Brasil é diferente? Aqui o cenário muda, mas...
  • 24. Sistemas Operacionais no Brasil
  • 25. Web AppsWeb App: fácil de criar, mais fácil ainda de usar.
  • 26. Web Apps• Aplicativos Web Web App: fácil de criar, mais fácil ainda de usar.
  • 27. Web Apps• Aplicativos Web• Não dependem de um sistema operacional Web App: fácil de criar, mais fácil ainda de usar.
  • 28. Web Apps• Aplicativos Web• Não dependem de um sistema operacional• Arquitetados com base em HTML, CSS e JS Web App: fácil de criar, mais fácil ainda de usar.
  • 29. Web Apps• Aplicativos Web• Não dependem de um sistema operacional• Arquitetados com base em HTML, CSS e JS• O limite é o escopo de cada browser... Web App: fácil de criar, mais fácil ainda de usar.
  • 30. Qual a maior vantagem de ser Web e Mobile?
  • 31. Não temos ie6 entre osbrowsers mobile! Afude!
  • 32. Browsers Mobile mais utilizados no mundo 0 7,5 15 22,5 30 Opera 22,23% iPhone 16,8% Nokia 16,33% Android 15,34%BlackBerry 13,85%iPod Touch 5,55% NetFront 3,54% Samsung ,96% UCWEB ,76%
  • 33. Browsers Mobile mais utilizados no Brasil
  • 34. Browsers Mobile mais utilizados no Brasil 0 7,5 15 22,5 30 29,79% Nokia Opera 23,72% Android 12,38% Obigo 9,83% NetFront 6,8% Jasmine 4,69% iPhone 4,0% Samsung 1,63% Dolfin 1,45%Openwave Mobile Browser 1,39% iPod Touch 1,08% Bolt ,85% SonyEricsson ,6% BlackBerry ,5%
  • 35. Opera Mobile Opera Mini
  • 36. jQuery Mobile
  • 37. Por que usar jQuery?
  • 38. jQueryé fácil e popular
  • 39. jQuery MobileNão é apenas uma biblioteca,mas um framework completo
  • 40. jQuery MobileNão é apenas uma biblioteca,mas um framework completo• jQuery apenas trás rotinas básicas que são chamadas ordinariamente.
  • 41. jQuery MobileNão é apenas uma biblioteca,mas um framework completo• jQuery apenas trás rotinas básicas que são chamadas ordinariamente.• jQuery Mobile cria estruturas e elementos de forma mais automatizada, assim como o jQuery UI
  • 42. Uma forma simples,vários dispositivos
  • 43. Design Unificado
  • 44. Tema Customizável
  • 45. Acessível
  • 46. ProgressiveEnhancement
  • 47. ProgressiveEnhancement
  • 48. ProgressiveEnhancement
  • 49. Marcação Semântica<label for="slider-b">Slider:</label><input type="range" name="slider" id="slider-b" value="0" min="0" max="100" />
  • 50. Em qual Browser vai funcionar?
  • 51. Como funciona?
  • 52. <!DOCTYPE html>
  • 53. http://code.jquery.com/
  • 54. http://code.jquery.com/
  • 55. http://code.jquery.com/
  • 56. http://code.jquery.com/
  • 57. http://code.jquery.com/
  • 58. Atributo Data
  • 59. Atributo Data
  • 60. Atributo Data
  • 61. Atributo Data
  • 62. Várias páginas em um único HTML
  • 63. Várias páginas em um único HTML
  • 64. Várias páginas em um único HTML
  • 65. Várias páginas em um único HTML
  • 66. Várias páginas em um único HTML
  • 67. Temas!http://minim.in/RM
  • 68. Temas de páginas http://minim.in/RN
  • 69. Temas de páginas http://minim.in/RN
  • 70. Temas de páginas http://minim.in/RN
  • 71. Temas de páginas http://minim.in/RN
  • 72. Temas de páginas http://minim.in/RN
  • 73. Temas de páginas http://minim.in/RN
  • 74. Temas de páginas http://minim.in/RN
  • 75. Com jQuery Mobile você cria siteslindões apenas com HTML!
  • 76. Eventos
  • 77. Eventos ao invés dejQuery(document).ready() utilize pageInit()
  • 78. Touch Vs Click
  • 79. Touch Vs Click• tap
  • 80. Touch Vs Click• tap• taphold
  • 81. Touch Vs Click• tap• taphold• swipe
  • 82. Touch Vs Click• tap• taphold• swipe• swipeleft
  • 83. Touch Vs Click• tap• taphold• swipe• swipeleft• swiperight
  • 84. orientationchange
  • 85. Mais elementos...
  • 86. Quero saber mais!http://jquerymobile.com/demos/1.0rc1/
  • 87. Mais exemploshttp://www.jqmgallery.com/
  • 88. Quero contribuir!http://jquerymobile.com/contribute/
  • 89. Muito pela frente!
  • 90. Muito pela frente!
  • 91. Muito pela frente! Obrigado! @leobalter leo@balter.com.br Slides: http://minim.in/RT Exemplos: http://minim.in/RR obrigado pelos peixes

×