Mobile Web Application Development (An Insight)
-
Upload
naveen-krishnamurthy -
Category
Technology
-
view
582 -
download
0
description
Transcript of Mobile Web Application Development (An Insight)
![Page 1: Mobile Web Application Development (An Insight)](https://reader036.fdocuments.in/reader036/viewer/2022070313/554bb641b4c90530298b47bc/html5/thumbnails/1.jpg)
Mobile Web Application Development (An Insight)
Naveen Krishnamurthy
![Page 2: Mobile Web Application Development (An Insight)](https://reader036.fdocuments.in/reader036/viewer/2022070313/554bb641b4c90530298b47bc/html5/thumbnails/2.jpg)
Disclaimer: All the logos and product names used in this presentation are registered and owned by their respective brands.
![Page 3: Mobile Web Application Development (An Insight)](https://reader036.fdocuments.in/reader036/viewer/2022070313/554bb641b4c90530298b47bc/html5/thumbnails/3.jpg)
http://naveenieus.in 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.
![Page 4: Mobile Web Application Development (An Insight)](https://reader036.fdocuments.in/reader036/viewer/2022070313/554bb641b4c90530298b47bc/html5/thumbnails/4.jpg)
http://naveenieus.in 4
![Page 5: Mobile Web Application Development (An Insight)](https://reader036.fdocuments.in/reader036/viewer/2022070313/554bb641b4c90530298b47bc/html5/thumbnails/5.jpg)
http://naveenieus.in 5
![Page 6: Mobile Web Application Development (An Insight)](https://reader036.fdocuments.in/reader036/viewer/2022070313/554bb641b4c90530298b47bc/html5/thumbnails/6.jpg)
http://naveenieus.in 6
![Page 7: Mobile Web Application Development (An Insight)](https://reader036.fdocuments.in/reader036/viewer/2022070313/554bb641b4c90530298b47bc/html5/thumbnails/7.jpg)
http://naveenieus.in 7
![Page 8: Mobile Web Application Development (An Insight)](https://reader036.fdocuments.in/reader036/viewer/2022070313/554bb641b4c90530298b47bc/html5/thumbnails/8.jpg)
http://naveenieus.in 8
![Page 9: Mobile Web Application Development (An Insight)](https://reader036.fdocuments.in/reader036/viewer/2022070313/554bb641b4c90530298b47bc/html5/thumbnails/9.jpg)
http://naveenieus.in 9
![Page 10: Mobile Web Application Development (An Insight)](https://reader036.fdocuments.in/reader036/viewer/2022070313/554bb641b4c90530298b47bc/html5/thumbnails/10.jpg)
http://naveenieus.in 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
![Page 11: Mobile Web Application Development (An Insight)](https://reader036.fdocuments.in/reader036/viewer/2022070313/554bb641b4c90530298b47bc/html5/thumbnails/11.jpg)
http://naveenieus.in 11
MULTIPLE SCREENS UNIFIED WEB
![Page 12: Mobile Web Application Development (An Insight)](https://reader036.fdocuments.in/reader036/viewer/2022070313/554bb641b4c90530298b47bc/html5/thumbnails/12.jpg)
http://naveenieus.in 12
http://www.smartinsights.com/mobile-marketing/mobile-marketing-analytics/mobile-marketing-statistics/
Mobile vs. Desktop
![Page 13: Mobile Web Application Development (An Insight)](https://reader036.fdocuments.in/reader036/viewer/2022070313/554bb641b4c90530298b47bc/html5/thumbnails/13.jpg)
http://naveenieus.in 13
http://en.wikipedia.org/wiki/Cohesion_(computer_science)
![Page 14: Mobile Web Application Development (An Insight)](https://reader036.fdocuments.in/reader036/viewer/2022070313/554bb641b4c90530298b47bc/html5/thumbnails/14.jpg)
http://naveenieus.in 14
http://www.digitaltrends.com/wp-content/uploads/2013/02/Samsung-Smart-Tv.jpg
![Page 15: Mobile Web Application Development (An Insight)](https://reader036.fdocuments.in/reader036/viewer/2022070313/554bb641b4c90530298b47bc/html5/thumbnails/15.jpg)
http://naveenieus.in 15
http://core0.staticworld.net/images/article/2013/08/pavilion11-100050481-orig.png
![Page 16: Mobile Web Application Development (An Insight)](https://reader036.fdocuments.in/reader036/viewer/2022070313/554bb641b4c90530298b47bc/html5/thumbnails/16.jpg)
http://naveenieus.in 16
http://boygeniusreport.files.wordpress.com/2013/05/tablets-montage.jpg
![Page 17: Mobile Web Application Development (An Insight)](https://reader036.fdocuments.in/reader036/viewer/2022070313/554bb641b4c90530298b47bc/html5/thumbnails/17.jpg)
http://naveenieus.in 17
http://kiwicommons.com/wp-content/uploads/2011/12/smartphones.jpg
![Page 18: Mobile Web Application Development (An Insight)](https://reader036.fdocuments.in/reader036/viewer/2022070313/554bb641b4c90530298b47bc/html5/thumbnails/18.jpg)
http://naveenieus.in 18
http://upload.wikimedia.org/wikipedia/commons/e/e2/Responsive_Web_Design.png
![Page 19: Mobile Web Application Development (An Insight)](https://reader036.fdocuments.in/reader036/viewer/2022070313/554bb641b4c90530298b47bc/html5/thumbnails/19.jpg)
http://naveenieus.in 19
http://en.wikipedia.org/wiki/Mobile_Web
![Page 21: Mobile Web Application Development (An Insight)](https://reader036.fdocuments.in/reader036/viewer/2022070313/554bb641b4c90530298b47bc/html5/thumbnails/21.jpg)
http://naveenieus.in 21
Mobile Operating System
• Android• iOS• Blackberry• Firefox OS• Tizen• Sailfish• Ubuntu Touch• Symbian
![Page 22: Mobile Web Application Development (An Insight)](https://reader036.fdocuments.in/reader036/viewer/2022070313/554bb641b4c90530298b47bc/html5/thumbnails/22.jpg)
http://naveenieus.in 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
![Page 23: Mobile Web Application Development (An Insight)](https://reader036.fdocuments.in/reader036/viewer/2022070313/554bb641b4c90530298b47bc/html5/thumbnails/23.jpg)
http://naveenieus.in 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?
![Page 24: Mobile Web Application Development (An Insight)](https://reader036.fdocuments.in/reader036/viewer/2022070313/554bb641b4c90530298b47bc/html5/thumbnails/24.jpg)
http://naveenieus.in 24
Core Technology
• HTML5 & CSS3• JavaScript– jQuery Mobile
• Package and deploy– Phonegap
![Page 25: Mobile Web Application Development (An Insight)](https://reader036.fdocuments.in/reader036/viewer/2022070313/554bb641b4c90530298b47bc/html5/thumbnails/25.jpg)
http://naveenieus.in 25
Tools
![Page 26: Mobile Web Application Development (An Insight)](https://reader036.fdocuments.in/reader036/viewer/2022070313/554bb641b4c90530298b47bc/html5/thumbnails/26.jpg)
http://naveenieus.in 26
Applications Web Site• World Wide Web
– Shared Hosting– Cloud
Deploy / Distribute
![Page 27: Mobile Web Application Development (An Insight)](https://reader036.fdocuments.in/reader036/viewer/2022070313/554bb641b4c90530298b47bc/html5/thumbnails/27.jpg)
http://naveenieus.in 27
HTML5 – What’s Gone?
http://www.tutorialspoint.com/html5/html5_deprecated_tags.htm
![Page 28: Mobile Web Application Development (An Insight)](https://reader036.fdocuments.in/reader036/viewer/2022070313/554bb641b4c90530298b47bc/html5/thumbnails/28.jpg)
http://naveenieus.in 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/
![Page 29: Mobile Web Application Development (An Insight)](https://reader036.fdocuments.in/reader036/viewer/2022070313/554bb641b4c90530298b47bc/html5/thumbnails/29.jpg)
http://naveenieus.in 29
How to understand CSS???
CSS SQL for DOM
select div from html;
div{ //Selectorfont-size: 11px; //declarationfont-weight: 600; //declaration
}
![Page 30: Mobile Web Application Development (An Insight)](https://reader036.fdocuments.in/reader036/viewer/2022070313/554bb641b4c90530298b47bc/html5/thumbnails/30.jpg)
http://naveenieus.in 30
CSS Order of Declaration
ID#header{ …. }
Class.logo{ …. }
Elementdiv{ …. }
![Page 31: Mobile Web Application Development (An Insight)](https://reader036.fdocuments.in/reader036/viewer/2022070313/554bb641b4c90530298b47bc/html5/thumbnails/31.jpg)
http://naveenieus.in 31
CSS3
• Media Queries• Fluid Layouts• Responsive Web• Effects / Transitions
![Page 33: Mobile Web Application Development (An Insight)](https://reader036.fdocuments.in/reader036/viewer/2022070313/554bb641b4c90530298b47bc/html5/thumbnails/33.jpg)
http://naveenieus.in 33
Plugin / Libraries
BootstrapBootstrap 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 MobilejQuery 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/
![Page 34: Mobile Web Application Development (An Insight)](https://reader036.fdocuments.in/reader036/viewer/2022070313/554bb641b4c90530298b47bc/html5/thumbnails/34.jpg)
http://naveenieus.in 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
![Page 35: Mobile Web Application Development (An Insight)](https://reader036.fdocuments.in/reader036/viewer/2022070313/554bb641b4c90530298b47bc/html5/thumbnails/35.jpg)
http://naveenieus.in 35
Q&A
![Page 36: Mobile Web Application Development (An Insight)](https://reader036.fdocuments.in/reader036/viewer/2022070313/554bb641b4c90530298b47bc/html5/thumbnails/36.jpg)
http://naveenieus.in 36
CODE
![Page 37: Mobile Web Application Development (An Insight)](https://reader036.fdocuments.in/reader036/viewer/2022070313/554bb641b4c90530298b47bc/html5/thumbnails/37.jpg)
http://naveenieus.in 37
Event Spotlight
Barcamp Bangalore (Saturday, 29 March, 2014)
http://barcampbangalore.org/bcb/
NSRCEL (4startups.in) – IIMB
http://www.4startups.in/