mobile web
DESCRIPTION
Power of HTML5 and CSS3TRANSCRIPT
![Page 1: Mobile web](https://reader034.vdocuments.site/reader034/viewer/2022051611/54b78eaa4a7959db528b49c3/html5/thumbnails/1.jpg)
Mobile Web – An Insight
Naveen Krishnamurthy CTO & Co-Founder
LadderMinds
1
![Page 2: Mobile web](https://reader034.vdocuments.site/reader034/viewer/2022051611/54b78eaa4a7959db528b49c3/html5/thumbnails/2.jpg)
Disclaimer: All the logos and product names used in this presentation are registered and owned by their respective brands.
2
![Page 3: Mobile web](https://reader034.vdocuments.site/reader034/viewer/2022051611/54b78eaa4a7959db528b49c3/html5/thumbnails/3.jpg)
About Us
Startup focused on Mobile Web & Cloud Computing
Service Model: Consulting, Coaching, Community
Founded by Alumnus of BITS, Pilani and SREC, Coimbatore
3
![Page 4: Mobile web](https://reader034.vdocuments.site/reader034/viewer/2022051611/54b78eaa4a7959db528b49c3/html5/thumbnails/4.jpg)
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
![Page 5: Mobile web](https://reader034.vdocuments.site/reader034/viewer/2022051611/54b78eaa4a7959db528b49c3/html5/thumbnails/5.jpg)
MANY SCREENS ONE WEB
5
![Page 6: Mobile web](https://reader034.vdocuments.site/reader034/viewer/2022051611/54b78eaa4a7959db528b49c3/html5/thumbnails/6.jpg)
6
http://www.smartinsights.com/mobile-marketing/mobile-marketing-analytics/mobile-marketing-statistics/
Mobile vs. Desktop Internet Usage
![Page 7: Mobile web](https://reader034.vdocuments.site/reader034/viewer/2022051611/54b78eaa4a7959db528b49c3/html5/thumbnails/7.jpg)
7
http://en.wikipedia.org/wiki/Cohesion_(computer_science)
![Page 8: Mobile web](https://reader034.vdocuments.site/reader034/viewer/2022051611/54b78eaa4a7959db528b49c3/html5/thumbnails/8.jpg)
8
http://www.digitaltrends.com/wp-content/uploads/2013/02/Samsung-Smart-Tv.jpg
![Page 9: Mobile web](https://reader034.vdocuments.site/reader034/viewer/2022051611/54b78eaa4a7959db528b49c3/html5/thumbnails/9.jpg)
9
http://core0.staticworld.net/images/article/2013/08/pavilion11-100050481-orig.png
![Page 10: Mobile web](https://reader034.vdocuments.site/reader034/viewer/2022051611/54b78eaa4a7959db528b49c3/html5/thumbnails/10.jpg)
10
http://boygeniusreport.files.wordpress.com/2013/05/tablets-montage.jpg
![Page 11: Mobile web](https://reader034.vdocuments.site/reader034/viewer/2022051611/54b78eaa4a7959db528b49c3/html5/thumbnails/11.jpg)
11
http://kiwicommons.com/wp-content/uploads/2011/12/smartphones.jpg
![Page 12: Mobile web](https://reader034.vdocuments.site/reader034/viewer/2022051611/54b78eaa4a7959db528b49c3/html5/thumbnails/12.jpg)
12
http://upload.wikimedia.org/wikipedia/commons/e/e2/Responsive_Web_Design.png
![Page 14: Mobile web](https://reader034.vdocuments.site/reader034/viewer/2022051611/54b78eaa4a7959db528b49c3/html5/thumbnails/14.jpg)
14
https://www.netflix.com/?locale=en-CA
![Page 15: Mobile web](https://reader034.vdocuments.site/reader034/viewer/2022051611/54b78eaa4a7959db528b49c3/html5/thumbnails/15.jpg)
Mobile Operating System
• Android
• iOS
• Blackberry
• Firefox OS
• Tizen
• Sailfish
• Ubuntu Touch
• Symbian
15
![Page 16: Mobile web](https://reader034.vdocuments.site/reader034/viewer/2022051611/54b78eaa4a7959db528b49c3/html5/thumbnails/16.jpg)
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
![Page 17: Mobile web](https://reader034.vdocuments.site/reader034/viewer/2022051611/54b78eaa4a7959db528b49c3/html5/thumbnails/17.jpg)
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
![Page 18: Mobile web](https://reader034.vdocuments.site/reader034/viewer/2022051611/54b78eaa4a7959db528b49c3/html5/thumbnails/18.jpg)
Core Technology
• HTML5 & CSS3
• JavaScript
– jQuery Mobile
• Package and deploy
– Phonegap
18
![Page 19: Mobile web](https://reader034.vdocuments.site/reader034/viewer/2022051611/54b78eaa4a7959db528b49c3/html5/thumbnails/19.jpg)
Tools
19
![Page 20: Mobile web](https://reader034.vdocuments.site/reader034/viewer/2022051611/54b78eaa4a7959db528b49c3/html5/thumbnails/20.jpg)
Applications Web Site
• World Wide Web – Shared Hosting
– Cloud
20
Deploy / Distribute
![Page 21: Mobile web](https://reader034.vdocuments.site/reader034/viewer/2022051611/54b78eaa4a7959db528b49c3/html5/thumbnails/21.jpg)
HTML5 – What’s Gone?
21
http://www.tutorialspoint.com/html5/html5_deprecated_tags.htm
![Page 22: Mobile web](https://reader034.vdocuments.site/reader034/viewer/2022051611/54b78eaa4a7959db528b49c3/html5/thumbnails/22.jpg)
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/
![Page 23: Mobile web](https://reader034.vdocuments.site/reader034/viewer/2022051611/54b78eaa4a7959db528b49c3/html5/thumbnails/23.jpg)
How to understand CSS???
CSS SQL for DOM
select div from html;
23
div{ //Selector
font-size: 11px; //declaration
font-weight: 600; //declaration
}
![Page 24: Mobile web](https://reader034.vdocuments.site/reader034/viewer/2022051611/54b78eaa4a7959db528b49c3/html5/thumbnails/24.jpg)
CSS Order of Declaration
ID
#header{ …. }
Class
.logo{ …. }
Element
div{ …. }
24
![Page 25: Mobile web](https://reader034.vdocuments.site/reader034/viewer/2022051611/54b78eaa4a7959db528b49c3/html5/thumbnails/25.jpg)
CSS3
• Media Queries
• Fluid Layouts
• Responsive Web
• Effects / Transitions
25
![Page 27: Mobile web](https://reader034.vdocuments.site/reader034/viewer/2022051611/54b78eaa4a7959db528b49c3/html5/thumbnails/27.jpg)
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
![Page 28: Mobile web](https://reader034.vdocuments.site/reader034/viewer/2022051611/54b78eaa4a7959db528b49c3/html5/thumbnails/28.jpg)
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
![Page 29: Mobile web](https://reader034.vdocuments.site/reader034/viewer/2022051611/54b78eaa4a7959db528b49c3/html5/thumbnails/29.jpg)
Q&A
29
![Page 30: Mobile web](https://reader034.vdocuments.site/reader034/viewer/2022051611/54b78eaa4a7959db528b49c3/html5/thumbnails/30.jpg)
CODE
Media Query
Transition / Effects
Form Semantics
Validation
Local Storage
30
![Page 31: Mobile web](https://reader034.vdocuments.site/reader034/viewer/2022051611/54b78eaa4a7959db528b49c3/html5/thumbnails/31.jpg)
Event Spotlight
LadderMinds – Meetup
http://facebook.com/ladderminds
31
![Page 32: Mobile web](https://reader034.vdocuments.site/reader034/viewer/2022051611/54b78eaa4a7959db528b49c3/html5/thumbnails/32.jpg)
32