Uma web mais sexy com jQuery Mobile

  • 6,384 views
Uploaded 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!

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
6,384
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
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