The document provides an overview of developing mobile web applications. It discusses key topics like mobile operating systems, mobile applications, technologies like HTML5, CSS3 and JavaScript libraries, tools for development and best practices. The technologies covered include responsive design using CSS media queries, jQuery Mobile for building interfaces, and PhoneGap for packaging applications. It also demonstrates code examples and provides references to learn more.

1. Mobile Web – An Insight
Naveen Krishnamurthy
CTO & Co-Founder
LadderMinds
1

2. Disclaimer: All the logos and product names used in this presentation are
registered and owned by their respective brands.
2

3. About Us
Startup focused on Mobile Web & Cloud
Computing
Service Model: Consulting, Coaching,
Community
Founded by Alumnus of BITS, Pilani and SREC,
Coimbatore
3

4. 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
4

5. MANY SCREENS ONE WEB
5

6. 6
http://www.smartinsights.com/mobile-marketing/mobile-marketing-analytics/mobile-marketing-statistics/
Mobile vs. Desktop Internet Usage

7. 7
http://en.wikipedia.org/wiki/Cohesion_(computer_science)

8. 8
http://www.digitaltrends.com/wp-content/uploads/2013/02/Samsung-Smart-Tv.jpg

9. 9
http://core0.staticworld.net/images/article/2013/08/pavilion11-100050481-orig.png

10. 10
http://boygeniusreport.files.wordpress.com/2013/05/tablets-montage.jpg

11. 11
http://kiwicommons.com/wp-content/uploads/2011/12/smartphones.jpg

12. 12
http://upload.wikimedia.org/wikipedia/commons/e/e2/Responsive_Web_Design.png

13. 13
http://en.wikipedia.org/wiki/Mobile_Web

14. 14
https://www.netflix.com/?locale=en-CA

15. Mobile Operating System
• Android
• iOS
• Blackberry
• Firefox OS
• Tizen
• Sailfish
• Ubuntu Touch
• Symbian
15

16. 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
16

17. How and What?
• What is the Web Technology?
• What are the tools available (IDE)?
• How / where to deploy / distribute?
• What are the best practices?
17

18. Core Technology
• HTML5 & CSS3
• JavaScript
– jQuery Mobile
• Package and deploy
– Phonegap
18

19. Tools
19

20. Applications Web Site
• World Wide Web
– Shared Hosting
– Cloud
20
Deploy / Distribute

21. HTML5 – What’s Gone?
21
http://www.tutorialspoint.com/html5/html5_deprecated_tags.htm

22. HTML5 – What’s New?
22
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/

23. How to understand CSS???
CSS  SQL for DOM
select div from html;
23
div{ //Selector
font-size: 11px; //declaration
font-weight: 600; //declaration
}

24. CSS Order of Declaration
ID
#header{ …. }
Class
.logo{ …. }
Element
div{ …. }
24

25. CSS3
• Media Queries
• Fluid Layouts
• Responsive Web
• Effects / Transitions
25

26. 26
http://getbootstrap.com/

27. 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/
27

28. 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
28

29. Q&A
29

30. CODE
Media Query
Transition / Effects
Form Semantics
Validation
Local Storage
30

31. Event Spotlight
LadderMinds – Meetup
http://facebook.com/ladderminds
31

32. 32

33. THANK YOU
http://ladderminds.com
33