Mobile Web Application Development (An Insight)

876 views
744 views

Published on

Why to go for Mobile Web Application Development? What technology to concentrate on?

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

No Downloads
Views
Total views
876
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
6
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Mobile Web Application Development (An Insight)

  1. 1. Mobile Web Application Development (An Insight) Naveen Krishnamurthy
  2. 2. Disclaimer: All the logos and product names used in this presentation are registered and owned by their respective brands.
  3. 3. About Me → Web Technologist by profession writing web code. → Is a little ColdFusion and C# geek. → HTML5 and CSS3 follower since 2011. → Big time JavaScript fan, always jQuery ready. → Implements Transactional SQL. → NoSQL Rookie. → Cloud Explorer. http://naveenieus.in 3
  4. 4. http://naveenieus.in 4
  5. 5. http://naveenieus.in 5
  6. 6. http://naveenieus.in 6
  7. 7. http://naveenieus.in 7
  8. 8. http://naveenieus.in 8
  9. 9. http://naveenieus.in 9
  10. 10. Agenda • • • • Key Note Mobile Operating Systems Mobile Applications Technology – HTML5 & CSS3 – JavaScript Libraries (jQuery Mobile) – Packaging Application (Phone Gap) • Tools – jQuery Mobile – Monaca • Demo • Q&A http://naveenieus.in 10
  11. 11. MULTIPLE SCREENS UNIFIED WEB http://naveenieus.in 11
  12. 12. Mobile vs. Desktop http://www.smartinsights.com/mobile-marketing/mobile-marketing-analytics/mobile-marketing-statistics/ http://naveenieus.in 12
  13. 13. http://en.wikipedia.org/wiki/Cohesion_(computer_science) http://naveenieus.in 13
  14. 14. http://www.digitaltrends.com/wp-content/uploads/2013/02/Samsung-Smart-Tv.jpg http://naveenieus.in 14
  15. 15. http://core0.staticworld.net/images/article/2013/08/pavilion11-100050481-orig.png http://naveenieus.in 15
  16. 16. http://boygeniusreport.files.wordpress.com/2013/05/tablets-montage.jpg http://naveenieus.in 16
  17. 17. http://kiwicommons.com/wp-content/uploads/2011/12/smartphones.jpg http://naveenieus.in 17
  18. 18. http://upload.wikimedia.org/wikipedia/commons/e/e2/Responsive_Web_Design.png http://naveenieus.in 18
  19. 19. http://en.wikipedia.org/wiki/Mobile_Web http://naveenieus.in 19
  20. 20. https://www.netflix.com/?locale=en-CA http://naveenieus.in 20
  21. 21. Mobile Operating System • • • • • • • • Android iOS Blackberry Firefox OS Tizen Sailfish Ubuntu Touch Symbian http://naveenieus.in 21
  22. 22. Mobile App • Native Mobile App – – – – Coded for specific Operating System Coded using a specific programming language Can access the phone’s hardware with ease Works only for one platform • Hybrid App – Written using Web Technology – Run inside a Native Container leveraging the browser engine but not the browser – Web to Native abstraction layer enables device hardware access http://naveenieus.in 22
  23. 23. How and What? • • • • What is the Web Technology? What are the tools available (IDE)? How / where to deploy / distribute? What are the best practices? http://naveenieus.in 23
  24. 24. Core Technology • HTML5 & CSS3 • JavaScript – jQuery Mobile • Package and deploy – Phonegap http://naveenieus.in 24
  25. 25. Tools http://naveenieus.in 25
  26. 26. Deploy / Distribute Applications Web Site • World Wide Web – Shared Hosting – Cloud http://naveenieus.in 26
  27. 27. HTML5 – What’s Gone? http://www.tutorialspoint.com/html5/html5_deprecated_tags.htm http://naveenieus.in 27
  28. 28. HTML5 – What’s New? Offline and Local Storage (App Cache, Indexed DB and File API Specifications) Multimedia 3D, Graphics & Effects (Canvas, SVG, WebGL and CSS3 3D ) Connectivity (Web Sockets) Performance & Integration (Web Workers and xmlHTTPRequest 2) Semantics (Richer tags with RDFa, microdata, and microformats) Device Access (Geo Location API) CSS3 http://www.w3.org/html/logo/ http://naveenieus.in 28
  29. 29. How to understand CSS??? CSS  SQL for DOM select div from html; div{ font-size: 11px; font-weight: 600; } //Selector //declaration //declaration http://naveenieus.in 29
  30. 30. CSS Order of Declaration ID #header{ …. } Class .logo{ …. } Element div{ …. } http://naveenieus.in 30
  31. 31. CSS3 • • • • Media Queries Fluid Layouts Responsive Web Effects / Transitions http://naveenieus.in 31
  32. 32. http://getbootstrap.com/ http://naveenieus.in 32
  33. 33. Plugin / Libraries Bootstrap Bootstrap makes front-end web development faster and easier. It's made for folks of all skill levels, devices of all shapes, and projects of all sizes. http://getbootstrap.com/ jQuery Mobile jQuery Mobile is a HTML5-based user interface system designed to make responsive web sites and apps that are accessible on all smartphone, tablet and desktop devices. http://jquerymobile.com/ http://naveenieus.in 33
  34. 34. Best Practices • Design – Decide on going Native / Web / Hybrid – Structure the content • Development – Use a framework – Avoid bulk libraries – Cache AJAX data to reduce HTTP requests • UI – Write CSS for the smallest screen first – Create fluid designs – Do not mix images and text http://naveenieus.in 34
  35. 35. Q&A http://naveenieus.in 35
  36. 36. CODE http://naveenieus.in 36
  37. 37. Event Spotlight Barcamp Bangalore (Saturday, 29 March, 2014) http://barcampbangalore.org/bcb/ NSRCEL (4startups.in) – IIMB http://www.4startups.in/ http://naveenieus.in 37
  38. 38. http://naveenieus.in THANK YOU http://naveenieus.in 38

×