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

1. Mobile Web Application Development
(An Insight)
Naveen Krishnamurthy

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

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. http://naveenieus.in
4

5. http://naveenieus.in
5

6. http://naveenieus.in
6

7. http://naveenieus.in
7

8. http://naveenieus.in
8

9. http://naveenieus.in
9

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. MULTIPLE SCREENS UNIFIED WEB
http://naveenieus.in
11

12. Mobile vs. Desktop
http://www.smartinsights.com/mobile-marketing/mobile-marketing-analytics/mobile-marketing-statistics/
http://naveenieus.in
12

13. http://en.wikipedia.org/wiki/Cohesion_(computer_science)
http://naveenieus.in
13

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

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

16. http://boygeniusreport.files.wordpress.com/2013/05/tablets-montage.jpg
http://naveenieus.in
16

17. http://kiwicommons.com/wp-content/uploads/2011/12/smartphones.jpg
http://naveenieus.in
17

18. http://upload.wikimedia.org/wikipedia/commons/e/e2/Responsive_Web_Design.png
http://naveenieus.in
18

19. http://en.wikipedia.org/wiki/Mobile_Web
http://naveenieus.in
19

20. https://www.netflix.com/?locale=en-CA
http://naveenieus.in
20

21. Mobile Operating System
•
•
•
•
•
•
•
•
Android
iOS
Blackberry
Firefox OS
Tizen
Sailfish
Ubuntu Touch
Symbian
http://naveenieus.in
21

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. 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. Core Technology
• HTML5 & CSS3
• JavaScript
– jQuery Mobile
• Package and deploy
– Phonegap
http://naveenieus.in
24

25. Tools
http://naveenieus.in
25

26. Deploy / Distribute
Applications
Web Site
• World Wide Web
– Shared Hosting
– Cloud
http://naveenieus.in
26

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

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. 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. CSS Order of Declaration
ID
#header{ …. }
Class
.logo{ …. }
Element
div{ …. }
http://naveenieus.in
30

31. CSS3
•
•
•
•
Media Queries
Fluid Layouts
Responsive Web
Effects / Transitions
http://naveenieus.in
31

32. http://getbootstrap.com/
http://naveenieus.in
32

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. 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. Q&A
http://naveenieus.in
35

36. CODE
http://naveenieus.in
36

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. http://naveenieus.in
THANK YOU
http://naveenieus.in
38