SlideShare a Scribd company logo
1 of 33
Download to read offline
Mobile Web – An Insight
Naveen Krishnamurthy
CTO & 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
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/
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

More Related Content

Similar to Mobile Web (HTML5 & CSS3)

Mobile Web Application Development (An Insight)
Mobile Web Application Development (An Insight)Mobile Web Application Development (An Insight)
Mobile Web Application Development (An Insight)Naveen Krishnamurthy
 
Megha_Singh_Resume
Megha_Singh_ResumeMegha_Singh_Resume
Megha_Singh_ResumeMegha Singh
 
Daniel Egan Msdn Tech Days Oc
Daniel Egan Msdn Tech Days OcDaniel Egan Msdn Tech Days Oc
Daniel Egan Msdn Tech Days OcDaniel Egan
 
Build your mobile architecture in Oracle Cloud
Build your mobile architecture in Oracle CloudBuild your mobile architecture in Oracle Cloud
Build your mobile architecture in Oracle CloudRuben Rodriguez
 
SDL Vision for Digital Experience - Arjen van den Akker at SDL Connect 16
SDL Vision for Digital Experience - Arjen van den Akker at SDL Connect 16SDL Vision for Digital Experience - Arjen van den Akker at SDL Connect 16
SDL Vision for Digital Experience - Arjen van den Akker at SDL Connect 16SDL
 
Ahmed Mohamed Awad Senior Web Developer
Ahmed Mohamed Awad Senior Web DeveloperAhmed Mohamed Awad Senior Web Developer
Ahmed Mohamed Awad Senior Web DeveloperAhmed Awad
 
Irshad Resume
Irshad ResumeIrshad Resume
Irshad Resumewahirshad
 
Oxagile company presentation
Oxagile company presentationOxagile company presentation
Oxagile company presentationOxagile
 
Oxagile Company Presentation (UPDATED)
Oxagile Company Presentation (UPDATED)Oxagile Company Presentation (UPDATED)
Oxagile Company Presentation (UPDATED)Dzmitry Aleinik
 
Mobiloitte ! Enterprise Mobility Corporate Overview
Mobiloitte ! Enterprise Mobility Corporate OverviewMobiloitte ! Enterprise Mobility Corporate Overview
Mobiloitte ! Enterprise Mobility Corporate OverviewMobiloitte
 
Smart Client Smart Applications_Ciaran Kirk - Intergraph Geospatial World Tou...
Smart Client Smart Applications_Ciaran Kirk - Intergraph Geospatial World Tou...Smart Client Smart Applications_Ciaran Kirk - Intergraph Geospatial World Tou...
Smart Client Smart Applications_Ciaran Kirk - Intergraph Geospatial World Tou...IMGS
 
Solving Enteprise Mobility Considerations with Telerik Mobile Platform
Solving Enteprise Mobility Considerations with Telerik Mobile PlatformSolving Enteprise Mobility Considerations with Telerik Mobile Platform
Solving Enteprise Mobility Considerations with Telerik Mobile PlatformLohith Goudagere Nagaraj
 
Micro-Frontends JSVidCon
Micro-Frontends JSVidConMicro-Frontends JSVidCon
Micro-Frontends JSVidConAmir Zuker
 
Microservices in der Cloud - Software Architecture Summit Berlin 2016
Microservices in der Cloud - Software Architecture Summit Berlin 2016Microservices in der Cloud - Software Architecture Summit Berlin 2016
Microservices in der Cloud - Software Architecture Summit Berlin 2016Christian Deger
 

Similar to Mobile Web (HTML5 & CSS3) (20)

Mobile Web Application Development (An Insight)
Mobile Web Application Development (An Insight)Mobile Web Application Development (An Insight)
Mobile Web Application Development (An Insight)
 
Megha_Singh_Resume
Megha_Singh_ResumeMegha_Singh_Resume
Megha_Singh_Resume
 
Geethu Rajasekharan
Geethu RajasekharanGeethu Rajasekharan
Geethu Rajasekharan
 
Arun Kumar(7.8Yrs).DOC
Arun Kumar(7.8Yrs).DOCArun Kumar(7.8Yrs).DOC
Arun Kumar(7.8Yrs).DOC
 
Daniel Egan Msdn Tech Days Oc
Daniel Egan Msdn Tech Days OcDaniel Egan Msdn Tech Days Oc
Daniel Egan Msdn Tech Days Oc
 
Resume_20160508
Resume_20160508Resume_20160508
Resume_20160508
 
SeniorNET Bhanu Resume
SeniorNET Bhanu ResumeSeniorNET Bhanu Resume
SeniorNET Bhanu Resume
 
Build your mobile architecture in Oracle Cloud
Build your mobile architecture in Oracle CloudBuild your mobile architecture in Oracle Cloud
Build your mobile architecture in Oracle Cloud
 
SDL Vision for Digital Experience - Arjen van den Akker at SDL Connect 16
SDL Vision for Digital Experience - Arjen van den Akker at SDL Connect 16SDL Vision for Digital Experience - Arjen van den Akker at SDL Connect 16
SDL Vision for Digital Experience - Arjen van den Akker at SDL Connect 16
 
Ahmed Mohamed Awad Senior Web Developer
Ahmed Mohamed Awad Senior Web DeveloperAhmed Mohamed Awad Senior Web Developer
Ahmed Mohamed Awad Senior Web Developer
 
Irshad Resume
Irshad ResumeIrshad Resume
Irshad Resume
 
Oxagile company presentation
Oxagile company presentationOxagile company presentation
Oxagile company presentation
 
Oxagile Company Presentation (UPDATED)
Oxagile Company Presentation (UPDATED)Oxagile Company Presentation (UPDATED)
Oxagile Company Presentation (UPDATED)
 
Mobiloitte ! Enterprise Mobility Corporate Overview
Mobiloitte ! Enterprise Mobility Corporate OverviewMobiloitte ! Enterprise Mobility Corporate Overview
Mobiloitte ! Enterprise Mobility Corporate Overview
 
Resume
ResumeResume
Resume
 
Smart Client Smart Applications_Ciaran Kirk - Intergraph Geospatial World Tou...
Smart Client Smart Applications_Ciaran Kirk - Intergraph Geospatial World Tou...Smart Client Smart Applications_Ciaran Kirk - Intergraph Geospatial World Tou...
Smart Client Smart Applications_Ciaran Kirk - Intergraph Geospatial World Tou...
 
Solving Enteprise Mobility Considerations with Telerik Mobile Platform
Solving Enteprise Mobility Considerations with Telerik Mobile PlatformSolving Enteprise Mobility Considerations with Telerik Mobile Platform
Solving Enteprise Mobility Considerations with Telerik Mobile Platform
 
CV RCD- Eng
CV RCD- EngCV RCD- Eng
CV RCD- Eng
 
Micro-Frontends JSVidCon
Micro-Frontends JSVidConMicro-Frontends JSVidCon
Micro-Frontends JSVidCon
 
Microservices in der Cloud - Software Architecture Summit Berlin 2016
Microservices in der Cloud - Software Architecture Summit Berlin 2016Microservices in der Cloud - Software Architecture Summit Berlin 2016
Microservices in der Cloud - Software Architecture Summit Berlin 2016
 

Recently uploaded

Summary ID-IGF 2016 National Dialogue - English (tata kelola internet / int...
Summary  ID-IGF 2016 National Dialogue  - English (tata kelola internet / int...Summary  ID-IGF 2016 National Dialogue  - English (tata kelola internet / int...
Summary ID-IGF 2016 National Dialogue - English (tata kelola internet / int...ICT Watch - Indonesia
 
How to login to Router net ORBI LOGIN...
How to login to Router net ORBI LOGIN...How to login to Router net ORBI LOGIN...
How to login to Router net ORBI LOGIN...rrouter90
 
Summary IGF 2013 Bali - English (tata kelola internet / internet governance)
Summary  IGF 2013 Bali - English (tata kelola internet / internet governance)Summary  IGF 2013 Bali - English (tata kelola internet / internet governance)
Summary IGF 2013 Bali - English (tata kelola internet / internet governance)ICT Watch - Indonesia
 
TRENDS Enabling and inhibiting dimensions.pptx
TRENDS Enabling and inhibiting dimensions.pptxTRENDS Enabling and inhibiting dimensions.pptx
TRENDS Enabling and inhibiting dimensions.pptxAndrieCagasanAkio
 
Unidad 4 – Redes de ordenadores (en inglés).pptx
Unidad 4 – Redes de ordenadores (en inglés).pptxUnidad 4 – Redes de ordenadores (en inglés).pptx
Unidad 4 – Redes de ordenadores (en inglés).pptxmibuzondetrabajo
 
Cybersecurity Threats and Cybersecurity Best Practices
Cybersecurity Threats and Cybersecurity Best PracticesCybersecurity Threats and Cybersecurity Best Practices
Cybersecurity Threats and Cybersecurity Best PracticesLumiverse Solutions Pvt Ltd
 
Company Snapshot Theme for Business by Slidesgo.pptx
Company Snapshot Theme for Business by Slidesgo.pptxCompany Snapshot Theme for Business by Slidesgo.pptx
Company Snapshot Theme for Business by Slidesgo.pptxMario
 
IP addressing and IPv6, presented by Paul Wilson at IETF 119
IP addressing and IPv6, presented by Paul Wilson at IETF 119IP addressing and IPv6, presented by Paul Wilson at IETF 119
IP addressing and IPv6, presented by Paul Wilson at IETF 119APNIC
 
办理澳洲USYD文凭证书学历认证【Q微/1954292140】办理悉尼大学毕业证书真实成绩单GPA修改/办理澳洲大学文凭证书Offer录取通知书/在读证明...
办理澳洲USYD文凭证书学历认证【Q微/1954292140】办理悉尼大学毕业证书真实成绩单GPA修改/办理澳洲大学文凭证书Offer录取通知书/在读证明...办理澳洲USYD文凭证书学历认证【Q微/1954292140】办理悉尼大学毕业证书真实成绩单GPA修改/办理澳洲大学文凭证书Offer录取通知书/在读证明...
办理澳洲USYD文凭证书学历认证【Q微/1954292140】办理悉尼大学毕业证书真实成绩单GPA修改/办理澳洲大学文凭证书Offer录取通知书/在读证明...vmzoxnx5
 

Recently uploaded (9)

Summary ID-IGF 2016 National Dialogue - English (tata kelola internet / int...
Summary  ID-IGF 2016 National Dialogue  - English (tata kelola internet / int...Summary  ID-IGF 2016 National Dialogue  - English (tata kelola internet / int...
Summary ID-IGF 2016 National Dialogue - English (tata kelola internet / int...
 
How to login to Router net ORBI LOGIN...
How to login to Router net ORBI LOGIN...How to login to Router net ORBI LOGIN...
How to login to Router net ORBI LOGIN...
 
Summary IGF 2013 Bali - English (tata kelola internet / internet governance)
Summary  IGF 2013 Bali - English (tata kelola internet / internet governance)Summary  IGF 2013 Bali - English (tata kelola internet / internet governance)
Summary IGF 2013 Bali - English (tata kelola internet / internet governance)
 
TRENDS Enabling and inhibiting dimensions.pptx
TRENDS Enabling and inhibiting dimensions.pptxTRENDS Enabling and inhibiting dimensions.pptx
TRENDS Enabling and inhibiting dimensions.pptx
 
Unidad 4 – Redes de ordenadores (en inglés).pptx
Unidad 4 – Redes de ordenadores (en inglés).pptxUnidad 4 – Redes de ordenadores (en inglés).pptx
Unidad 4 – Redes de ordenadores (en inglés).pptx
 
Cybersecurity Threats and Cybersecurity Best Practices
Cybersecurity Threats and Cybersecurity Best PracticesCybersecurity Threats and Cybersecurity Best Practices
Cybersecurity Threats and Cybersecurity Best Practices
 
Company Snapshot Theme for Business by Slidesgo.pptx
Company Snapshot Theme for Business by Slidesgo.pptxCompany Snapshot Theme for Business by Slidesgo.pptx
Company Snapshot Theme for Business by Slidesgo.pptx
 
IP addressing and IPv6, presented by Paul Wilson at IETF 119
IP addressing and IPv6, presented by Paul Wilson at IETF 119IP addressing and IPv6, presented by Paul Wilson at IETF 119
IP addressing and IPv6, presented by Paul Wilson at IETF 119
 
办理澳洲USYD文凭证书学历认证【Q微/1954292140】办理悉尼大学毕业证书真实成绩单GPA修改/办理澳洲大学文凭证书Offer录取通知书/在读证明...
办理澳洲USYD文凭证书学历认证【Q微/1954292140】办理悉尼大学毕业证书真实成绩单GPA修改/办理澳洲大学文凭证书Offer录取通知书/在读证明...办理澳洲USYD文凭证书学历认证【Q微/1954292140】办理悉尼大学毕业证书真实成绩单GPA修改/办理澳洲大学文凭证书Offer录取通知书/在读证明...
办理澳洲USYD文凭证书学历认证【Q微/1954292140】办理悉尼大学毕业证书真实成绩单GPA修改/办理澳洲大学文凭证书Offer录取通知书/在读证明...
 

Mobile Web (HTML5 & CSS3)