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.

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.

http://naveenieus.in 4

http://naveenieus.in 5

http://naveenieus.in 6

http://naveenieus.in 7

http://naveenieus.in 8

http://naveenieus.in 9

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

http://naveenieus.in 11

MULTIPLE SCREENS UNIFIED WEB

http://naveenieus.in 12

http://www.smartinsights.com/mobile-marketing/mobile-marketing-analytics/mobile-marketing-statistics/

Mobile vs. Desktop

http://naveenieus.in 13

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

http://naveenieus.in 14

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

http://naveenieus.in 15

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

http://naveenieus.in 16

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

http://naveenieus.in 17

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

http://naveenieus.in 18

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

http://naveenieus.in 19

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

http://naveenieus.in 20

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

http://naveenieus.in 21

Mobile Operating System

• Android• iOS• Blackberry• Firefox OS• Tizen• Sailfish• Ubuntu Touch• Symbian

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

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?

http://naveenieus.in 24

Core Technology

• HTML5 & CSS3• JavaScript– jQuery Mobile

• Package and deploy– Phonegap

http://naveenieus.in 25

Tools

http://naveenieus.in 26

Applications Web Site• World Wide Web

– Shared Hosting– Cloud

Deploy / Distribute

http://naveenieus.in 27

HTML5 – What’s Gone?

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

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/

http://naveenieus.in 29

How to understand CSS???

CSS SQL for DOM

select div from html;

div{ //Selectorfont-size: 11px; //declarationfont-weight: 600; //declaration

}

http://naveenieus.in 30

CSS Order of Declaration

ID#header{ …. }

Class.logo{ …. }

Elementdiv{ …. }

http://naveenieus.in 31

CSS3

• Media Queries• Fluid Layouts• Responsive Web• Effects / Transitions

http://naveenieus.in 32

http://getbootstrap.com/

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/

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

http://naveenieus.in 35

Q&A

http://naveenieus.in 36

CODE

http://naveenieus.in 37

Event Spotlight

Barcamp Bangalore (Saturday, 29 March, 2014)

http://barcampbangalore.org/bcb/

NSRCEL (4startups.in) – IIMB

http://www.4startups.in/

http://naveenieus.in 38

THANK YOUhttp://naveenieus.in