Mobile Web – An Insight

Naveen KrishnamurthyCTO & Co-Founder

LadderMinds

1

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

2

About Us

Startup focused on Mobile Web & Cloud Computing

Service Model: Consulting, Coaching, Community

Founded by Alumnus of BITS, Pilani and SREC, Coimbatore

3

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

MANY SCREENS ONE WEB

5

6

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

Mobile vs. Desktop Internet Usage

7

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

8

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

9

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

10

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

11

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

12

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

13

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

14

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

Mobile Operating System

• Android

• iOS

• Blackberry

• Firefox OS

• Tizen

• Sailfish

• Ubuntu Touch

• Symbian

15

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

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

Core Technology

• HTML5 & CSS3

• JavaScript

– jQuery Mobile

• Package and deploy

– Phonegap

18

Tools

19

Applications Web Site

• World Wide Web– Shared Hosting

– Cloud

20

Deploy / Distribute

HTML5 – What’s Gone?

21

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

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/

How to understand CSS???

CSS SQL for DOM

select div from html;

23

div{ //Selector

font-size: 11px; //declaration

font-weight: 600; //declaration

}

CSS Order of Declaration

ID

#header{ …. }

Class

.logo{ …. }

Element

div{ …. }

24

CSS3

• Media Queries

• Fluid Layouts

• Responsive Web

• Effects / Transitions

25

26

http://getbootstrap.com/

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/

27

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

Q&A

29

CODE

Media Query

Transition / Effects

Form Semantics

Validation

Local Storage

30

Event Spotlight

LadderMinds – Meetup

http://facebook.com/ladderminds

31

32

THANK YOU

http://ladderminds.com

33