Mobile Web Application Development
(An Insight)
Naveen Krishnamurthy
Disclaimer: All the logos and product names used in this presentation are
registered and owned by their respective brands.
About Me
→ Web Technologist by profession writing web code.
→ Is a little ColdFusion and C# geek.
→ HTML5 and CSS3 followe...
http://naveenieus.in

4
http://naveenieus.in

5
http://naveenieus.in

6
http://naveenieus.in

7
http://naveenieus.in

8
http://naveenieus.in

9
Agenda
•
•
•
•

Key Note
Mobile Operating Systems
Mobile Applications
Technology
– HTML5 & CSS3
– JavaScript Libraries (jQ...
MULTIPLE SCREENS UNIFIED WEB

http://naveenieus.in

11
Mobile vs. Desktop

http://www.smartinsights.com/mobile-marketing/mobile-marketing-analytics/mobile-marketing-statistics/
...
http://en.wikipedia.org/wiki/Cohesion_(computer_science)

http://naveenieus.in

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

http://naveenieus.in

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

http://naveenieus.in

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

http://naveenieus.in

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

http://naveenieus.in

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

http://naveenieus.in

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

http://naveenieus.in

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

http://naveenieus.in

20
Mobile Operating System
•
•
•
•
•
•
•
•

Android
iOS
Blackberry
Firefox OS
Tizen
Sailfish
Ubuntu Touch
Symbian
http://nave...
Mobile App
• Native Mobile App
–
–
–
–

Coded for specific Operating System
Coded using a specific programming language
Ca...
How and What?
•
•
•
•

What is the Web Technology?
What are the tools available (IDE)?
How / where to deploy / distribute?...
Core Technology
• HTML5 & CSS3
• JavaScript
– jQuery Mobile

• Package and deploy
– Phonegap

http://naveenieus.in

24
Tools

http://naveenieus.in

25
Deploy / Distribute
Applications

Web Site
• World Wide Web
– Shared Hosting
– Cloud

http://naveenieus.in

26
HTML5 – What’s Gone?

http://www.tutorialspoint.com/html5/html5_deprecated_tags.htm

http://naveenieus.in

27
HTML5 – What’s New?
Offline and Local Storage (App Cache, Indexed DB and File API Specifications)
Multimedia
3D, Graphics ...
How to understand CSS???
CSS  SQL for DOM
select div from html;
div{
font-size: 11px;
font-weight: 600;
}

//Selector
//d...
CSS Order of Declaration
ID

#header{ …. }
Class
.logo{ …. }
Element
div{ …. }
http://naveenieus.in

30
CSS3
•
•
•
•

Media Queries
Fluid Layouts
Responsive Web
Effects / Transitions

http://naveenieus.in

31
http://getbootstrap.com/

http://naveenieus.in

32
Plugin / Libraries
Bootstrap
Bootstrap makes front-end web development faster and
easier. It's made for folks of all skill...
Best Practices
• Design
– Decide on going Native / Web / Hybrid
– Structure the content

• Development
– Use a framework
–...
Q&A

http://naveenieus.in

35
CODE

http://naveenieus.in

36
Event Spotlight
Barcamp Bangalore (Saturday, 29 March, 2014)
http://barcampbangalore.org/bcb/

NSRCEL (4startups.in) – IIM...
http://naveenieus.in

THANK YOU

http://naveenieus.in

38
Upcoming SlideShare
Loading in...5
×

Mobile Web Application Development (An Insight)

616

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
616
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
5
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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×