Mobile web and j query mobile

1,245 views

Published on

Mobile web and j query mobile

Published in: Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,245
On SlideShare
0
From Embeds
0
Number of Embeds
39
Actions
Shares
0
Downloads
5
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Mobile web and j query mobile

  1. 1. Mobile Web & jQuery MobilePrak Sophy – sophy@web-essentials.asia http://kooms.info
  2. 2. Agenda• History• Internet state• Mobile Web Browser• Design for mobile• Media Queries• jQuery Mobile
  3. 3. Tim Berners-Leehttp://en.wikipedia.org/wiki/Tim_Berners-Lee
  4. 4. Bert Boshttp://en.wikipedia.org/wiki/Bert_Bos
  5. 5. Håkon Wium Liehttp://people.opera.com/howcome/
  6. 6. How about me?
  7. 7. Internet Users State
  8. 8. 1.9 The number of internet billion connections in the world today...26% of the world’s population at the lastest of 2010 – http://www.internetworldstats.com
  9. 9. 6.8 The number of people billion in the world today...*2009 estimates put the population around 6.79 billion inhabitants...
  10. 10. 3.4 The number of people billion with mobile devices today...or roughly ½ the population of the planet.
  11. 11. 1.3 billion The number of mobile internet users today
  12. 12. 1/3 number of global internet users who access the internet only via mobile...
  13. 13. Mobile Browser State
  14. 14. How to design for web mobile?
  15. 15. Best Practices To Develop Perfect Webs for Mobile Devices...http://woorkup.com/2010/01/10/best-practices-to-develop-perfect-websites-for-iphone-and-mobile-devices/
  16. 16. CSS3 Media Queries for Mobile Web
  17. 17. Live Demo
  18. 18. Media Queries code...Wide page layout CSS rules@media screen and (max-width:999px){Medium page layout CSS rules}@media screen and (max-width:480px){Narrow page layout CSS rules}
  19. 19. If we don’t use CSS3 media queries...
  20. 20. more sites with CSS3 media queries
  21. 21. Tee Gallery Hicksdesign
  22. 22. A List Apart Colly - http://colly.com/
  23. 23. jQuery Mobile
  24. 24. History• jQuery Mobile Alpha 1 Release on 18-Oct-2010• jQuery Mobile Alpha 2 Release on 18-Oct-2010
  25. 25. Feature• Progressive Enhancement(support many mobile OS)• Graceful Degradation(Best HTML5 and CSS3)• Accessibility(Mobile, Tablet, Desktop and bayon)• Simplicity(only make-up no javascript configuration)• File Size(12KB(js) and 6KB(css))• Theming(Provide jQuery UI)
  26. 26. more feature...• List Views• Select Menu• Scrolling and Headers/Footers• Simplicity(only make-up no javascript configuration)• Navbar Overhauled• URL Navigation Refactored• Ajax Form Handling• jQuery UI Widget Factory• Dialog• Media Query Helper• Event

×