SlideShare a Scribd company logo

HTML5 on mobile

JungHyuk Kwon, profile picture
JungHyuk Kwon

The document discusses the evolution and significance of HTML5 in mobile web application development, highlighting various mobile operating systems and their respective market shares. It details key HTML5 features beneficial for mobile, such as offline support, geolocation, and application databases, while comparing traditional web apps with native applications and discussing different frameworks like PhoneGap. Additionally, it lists several mobile UI libraries and resources for developers to create optimized web applications across multiple platforms.

Entertainment & HumorTechnology
1 of 45
Downloaded 1,431 times
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
HTML5 on Mobile http://xguru.net Monday, July 5, 2010
• ➡ - http://xguru.net ➡ - @xguru ➡ - guru @ xguru.net Monday, July 5, 2010
Mobile vs. Desktop Internet User http://www.slideshare.net/fred.zimny/morgan-staneley-internet-trends-ri041210 Monday, July 5, 2010
OS iPhone (iOS) 40% Android 26% Blackberry 6% Symbian 24% Other 1% webOS WM 1% 2% Source : AdMob 2010 May Mobile Metrics Highlights * Monday, July 5, 2010
HTML5 ? Monday, July 5, 2010
HTML5 ? . Monday, July 5, 2010
HTML5 ? . Even Google was not rich enough to support all of the different mobile platforms from Apple’s AppStore to those of the BlackBerry, Windows Mobile, Android and the many variations of the Nokia platform - Vic Gundotra, Google Engineering VP Monday, July 5, 2010
http://j.mp/mopasweb Monday, July 5, 2010
http://j.mp/mopasweb Monday, July 5, 2010
Mobile HTML5 Browser (OS) Version Score ( ? / 160 ) IE ( Win ) 6.0 11 IE ( Win ) 8.0.7600 19 Opera Mini 1.0 33 iPhone ( Mobile Safari ) 2.0 37 Android 1.6 39 iPhone ( Mobile Safari ) 2.1 - 2.2 45 Maemo microB 5 PR-1.1.1 55 Firefox Mobile 1.0 101 Firefox ( Win ) 3.6.3 101 Palm WebOS 1.4 107 iPhone ( Mobile Safari ) 3.0 110 Safari ( Mac ) 4.0.5 113 iPad ( Mobile Safari ) 3.2 115 Android 2.0 - 2.1 118 Android 2.2 122 iPhone ( Mobile Safari ) 4.0 Beta 4 133 Safari ( Mac ) 5.0 138 Chrome ( Win , Mac ) 6.0.422.0 142 Mobile test result from http://www.callingallgeeks.org Tested with http://html5test.com Monday, July 5, 2010
HTML5 Key Elements for Mobile • Offline Support : Web database, LocalStorage, App Cache • Canvas • Video • GeoLocation • Advanced Forms • Camera & Device (html-device) W3C DAP , JIL , OMTP BONDI , PhoneGap Monday, July 5, 2010
Web Apps Monday, July 5, 2010
Mobile Web App Monday, July 5, 2010
Mobile Web App • ★ iPhone/iPad/Android/BlackBerry.. ★ Monday, July 5, 2010
Mobile Web App • ★ iPhone/iPad/Android/BlackBerry.. ★ • : Monday, July 5, 2010
Mobile Web App • ★ iPhone/iPad/Android/BlackBerry.. ★ • : • Web ★ HTML5 , CSS , Javascript , Monday, July 5, 2010
Mobile Web App • ★ iPhone/iPad/Android/BlackBerry.. ★ • : • Web ★ HTML5 , CSS , Javascript , • Web Mashup Monday, July 5, 2010
Mobile Web App Types Monday, July 5, 2010
Monday, July 5, 2010
Monday, July 5, 2010
Mobile Device Server Online Web Application ✓ Web App UI ✓ HTML5,CSS3 UI Web Database ✓ GeoLocation Server Resources ✓ Monday, July 5, 2010
Mobile Device Server Online Web Application ✓ Web App UI ✓ HTML5,CSS3 UI Web Database ✓ GeoLocation Server Resources ✓ Mobile Device Server Offline Enabled Web App ✓ Web ✓ App UI Local ✓ Web Database Data Server Resources ✓ & Monday, July 5, 2010
Mobile Device Server Online Web Application ✓ Web App UI ✓ HTML5,CSS3 UI Web Database ✓ GeoLocation Server Resources ✓ Mobile Device Server Offline Enabled Web App ✓ Web ✓ App UI Local ✓ Web Database Data Server Resources ✓ & Mobile Device Server Offline Web App ✓ Web ✓ App UI Local ✓ , , , EBook Web Data Server Monday, July 5, 2010
Mobile Device Server Online Web Application ✓ Web App UI ✓ HTML5,CSS3 UI Web Database ✓ GeoLocation Server Resources ✓ Mobile Device Server Offline Enabled Web App ✓ Web ✓ App UI Local ✓ Web Database Data Server Resources ✓ & Mobile Device Server Offline Web App ✓ Web ✓ App UI Local ✓ , , , EBook Web Data Server Mobile Device Server Hybrid Web App App ✓ Native + Web Store Web ✓ Web App UI Local Server Database Resources ✓ Native Data Monday, July 5, 2010
Mobile Device Server Online Web Application ✓ Web App UI ✓ HTML5,CSS3 UI Web Database ✓ Server Resources Monday, July 5, 2010
Mobile Device Server Online Web Application ✓ Web App UI ✓ HTML5 , CSS3 , Javascript Flash Web Database Server Resources http://j.mp/hogapp http://j.mp/spinapp Monday, July 5, 2010
Mobile Device Server Online Web Application ✓ GeoLocation Web App UI ✓ / Open API Web Database Server Resources http://j.mp/myasik http://j.mp/opimap Monday, July 5, 2010
Mobile Device Server Offline Enabled Web App ✓ Web ✓ App UI Local ✓ Web Database Data Server Resources ✓ & Mobile Gmail - http://gmail.com <html manifest="https://mail.google.com/mail/mu/manifest"> • Web SQL Database , App Cache : Offline • Offline Online • HTML ( CSS , Javascript , ) Monday, July 5, 2010
Mobile Device Server Offline Enabled Web App ✓ Web App UI Local ✓ Local Cache Web Database Data Server Resources ✓ GeoLocation nextstop - http://nextstop.com • Local Storage Prefetch • App Cache • GeoLocation API Monday, July 5, 2010
Mobile Device Server Offline Web App ✓ Web ✓ App UI Local ✓ , , , EBook Web Data Server Checklist - http://j.mp/checkapp • App Cache • Web SQL Database DB • Offline Monday, July 5, 2010
Mobile Device Server Offline Web App ✓ HTML5 Web ✓ EPUB HTML App UI Local Web Data Server ✓ http://j.mp/monocle_ebook Monocle - eBook for Web Browser Monday, July 5, 2010
Mobile Device Server Hybrid Web App App ✓ Native + Web Store Web ✓ Web App UI Local Server Database Resources ✓ Cross Platform Mobile App Framework Data PhoneGap , Titanium Mobile .. Harmonious - HTML5 Canvas + jQTouch + PhoneGap Monday, July 5, 2010
Web App vs. Native App Web App Native App • • • HTML , CSS , Javascript • Objective-C ( iPhone ) , Java ( Android ) • • XCode ( iPhone ) , Eclipse ( Android ) • , iUI , JQTouch .. • Cocoa Touch ( iPhone ) , UI Framework (Android) • Mac • Mac ( iPhone ) , Android • App 1) • App $99 or $35 • - / .. 2) • • • App Store/Market / & • • ( iPhone ) • Android / Blackberry • 1) Phonegap 2) Phonegap , QuickConnect / <= Hybrid App Monday, July 5, 2010
Mobile Web App Helpers Monday, July 5, 2010
Monday, July 5, 2010
UI Library for Touch Devices #1 • iPhone style UI library ★ JQTouch - http://jqtouch.com/ ★ iUI - http://code.google.com/p/iui/ ★ WebApp.Net - http://webapp-net.com/ Monday, July 5, 2010
UI Library for Touch Devices #2 • Sencha Touch : jQTouch + Ext JS + Raphaël http://sencha.com ★ HTML5 + CSS + Javascript Mobile App Framework ★ Support for iOS , Android ★ Touch UI ★ iPad / iPhone / Android • : http://j.mp/senchak Monday, July 5, 2010
UI Library for Touch Devices #3 • iAd JS : Appleʼs Javascript Web UI Library ★ HTML5 + CSS + Javascript UI Framework ★ CocoaTouch Web ★ Controls : Button, Checkbox, Radio Button, Slider, Switch, Page Control ,, ★ UI Control ★ Menu : Hide/Reveal , Horizontal Slider , Orbit , Pinwheel ★ Galleries : 360-Degree Object Rotation & Panorama, Horizontal/Vertical Slide, Coverflow ★ Audio / Video : Using HTML5 audio/video element Monday, July 5, 2010
Web App to Native App Framework • PhoneGap ★ http://www.phonegap.com/ ★ iPhone, Android, Blackberry, Symbian, Palm, Windows Mobile • Titanium Mobile ★ http://www.appcelerator.com/ ★ iPhone, Android • QuickConnect ★ http://quickconnectfamily.org/ ★ iPhone, Android, Blackberry • NimbleKit ★ http://www.nimblekit.com/ ★ iPhone Monday, July 5, 2010
PhoneGap #1 • Cross Platform Mobile Application Framework • HTML+Javascript Web App Container • Web App Native App • Web App Device Javascript iPhone Android Blackberry Symbian Palm Geolocation ✓ ✓ ✓ ✓ ✓ Accelerometer ✓ ✓ ✓ ✓ ✓ Camera ✓ ✓ ✓ ✓ ★ Vibration ✓ ✓ ✓ ✓ ✓ Contacts ✓ ✓ ✓ ✓ Sound ✓ ✓ ✓ ✓ ✓ SMS ★ ✓ ✓ ✓ ✓ Telephone ★ ★ ✓ ✓ ★ Monday, July 5, 2010
PhoneGap #2 Android iOS ( iPhone OS ) PhoneGap framework PhoneGap framework ( Container App ) ( Container App ) Android App Files iOS App Files Manifest.xml and resources plist,icon,png file resources Phonegap Application FW integration CocoaTouch FW integration Webkit ( WebView ) Webkit (UIWebView) phonegap.js phonegap.js application application css/js/html css/js/html Web Application Monday, July 5, 2010
PhoneGap #3 Monday, July 5, 2010
Mobile Web App • HTML5 & APIs ★ Web SQL, Local Storage, App Cache, Canvas,Video, Forms, GeoLocation ★ CSS UI Effects , ( html-device ) • UI & Application Framework ★ iUI , jQTouch , WebApp.Net , Sencha ★ Javascript UI , CSS3 • App Packaging & Device Integration ★ Framework : PhoneGap , NimbleKit , Titanium Mobile .. ★ Specification : W3C DAP , JIL , OMTP BONDI Monday, July 5, 2010
! email : guru @ xguru.net twitter : @xguru Monday, July 5, 2010
References • http://code.google.com/p/html5-slides/ • http://rakaz.nl/2009/09/iphone-webapps-101-detecting-essential-information-about-your-iphone.html • http://developer.apple.com/safari/library/documentation/appleapplications/Reference/SafariWebContent/ • http://building-iphone-apps.labs.oreilly.com/ • http://www.phonegap.com/ • http://sencha.com • http://jqtouch.com • http://quickconnectfamily.org/ • http://www.appcelerator.com/products/titanium-mobile-application-development/ • http://www.slideshare.net/akosma/webtuesday-mobile-web-applications-framework-overview Monday, July 5, 2010

More Related Content

PDF
American english-file-1-student-book
Nadia Agusto
 
PDF
11715
uploadpdfbooks
 
PDF
0152 ba-fmipa-2007
SUGENG1966
 
PPSX
Magnolia (v.m.)
Valeriu Margescu
 
PDF
Sadae Haq
Wajid Malik
 
PDF
Naruto 5
hanu78a
 
PDF
Building a Strong, Profitable Drupal Business
Volacci
 
PDF
Fce gold course book
arbesu
 
American english-file-1-student-book
Nadia Agusto
 
11715
uploadpdfbooks
 
0152 ba-fmipa-2007
SUGENG1966
 
Magnolia (v.m.)
Valeriu Margescu
 
Sadae Haq
Wajid Malik
 
Naruto 5
hanu78a
 
Building a Strong, Profitable Drupal Business
Volacci
 
Fce gold course book
arbesu
 

What's hot (19)

PDF
A benefits management framework for prioritising programmes webinar, 17 Febru...
Association for Project Management
 
PDF
Tafseer Ibn-e-Katheer Part 7 (urdu)
World
 
PDF
K S - ZG - SDEX 71
Stripovi Klub
 
PDF
Bs 8118-1
hsaam hsaam
 
PDF
Ontario ombudsman annualreport0910-en-web
ROSEMARY DECAIRES
 
PDF
Fkr Shoppersstopbandra
fkr12358
 
PDF
Finger knitting jp
pjmanley41
 
PDF
02 Cryptography History-v1.0
Vahab Mahboubi
 
PPTX
LANDSCAPE CONSTRUCTION STUDY PROJECT OF INTERNATIONAL OUTDOOR GARDEN ...
aekapon
 
PDF
New Deck
brendanbmcintyre
 
PPS
Presentation 2
kunmo
 
PPT
Artifacts and Symbols of everyday life from Kerala
Anand Nair
 
PDF
12 chapter
madhuvel
 
PDF
Metro Lagos: No Man's Land
Mojisola Adigun
 
PPT
God"s Plan Of Salvation
gracego2
 
PPTX
Sol Hotels by Meliá Cuba
Melia Hotels International Cuba
 
PDF
Do you know?
consumeractiongroup
 
PDF
MONSTER IN SUMMER
sansourcing
 
PDF
Mon of presentation ctl project mongolia
Nomio ND
 
A benefits management framework for prioritising programmes webinar, 17 Febru...
Association for Project Management
 
Tafseer Ibn-e-Katheer Part 7 (urdu)
World
 
K S - ZG - SDEX 71
Stripovi Klub
 
Bs 8118-1
hsaam hsaam
 
Ontario ombudsman annualreport0910-en-web
ROSEMARY DECAIRES
 
Fkr Shoppersstopbandra
fkr12358
 
Finger knitting jp
pjmanley41
 
02 Cryptography History-v1.0
Vahab Mahboubi
 
LANDSCAPE CONSTRUCTION STUDY PROJECT OF INTERNATIONAL OUTDOOR GARDEN ...
aekapon
 
New Deck
brendanbmcintyre
 
Presentation 2
kunmo
 
Artifacts and Symbols of everyday life from Kerala
Anand Nair
 
12 chapter
madhuvel
 
Metro Lagos: No Man's Land
Mojisola Adigun
 
God"s Plan Of Salvation
gracego2
 
Sol Hotels by Meliá Cuba
Melia Hotels International Cuba
 
Do you know?
consumeractiongroup
 
MONSTER IN SUMMER
sansourcing
 
Mon of presentation ctl project mongolia
Nomio ND
 
Ad

Viewers also liked (17)

PDF
미래웹기술연구소는 왜 Sencha 를 채택하였는가?
미래웹기술연구소 (MIRAE WEB)
 
PPTX
Getting Started with HTML5 in Tech Com (STC 2012)
Peter Lubbers
 
PDF
Echo HTML5
Nathan Smith
 
KEY
Building Rich Mobile Apps with HTML5, CSS3 and JavaScript
Sencha
 
KEY
HTML 5 & CSS3
Ben Sekulowicz-Barclay
 
PDF
Web app 개발 방법론
Sang Seok Lim
 
PDF
HTML5--The 30,000' View (A fast-paced overview of HTML5)
Peter Lubbers
 
PPTX
Mobile architecture overview
David Scruggs
 
PPTX
Mobile application architecture
Christos Matskas
 
PPTX
Build Amazing Mobile Apps using HTML5, CSS3 and JavaScript - - MeeGo Confere...
Raj Lal
 
PDF
React Native를 사용한
 초간단 커뮤니티 앱 제작
Taegon Kim
 
PDF
Mobile Application Architecture Strategy
Gary Wong
 
PPTX
Cross Platform Mobile Application Architecture
Derrick Bowen
 
PPSX
Introduction to Html5
www.netgains.org
 
PDF
HTML5 JS APIs
Remy Sharp
 
PPTX
architecture of mobile software applications
Hassan Dar
 
PPTX
HTML & CSS: Chapter 05
Steve Guinan
 
미래웹기술연구소는 왜 Sencha 를 채택하였는가?
미래웹기술연구소 (MIRAE WEB)
 
Getting Started with HTML5 in Tech Com (STC 2012)
Peter Lubbers
 
Echo HTML5
Nathan Smith
 
Building Rich Mobile Apps with HTML5, CSS3 and JavaScript
Sencha
 
HTML 5 & CSS3
Ben Sekulowicz-Barclay
 
Web app 개발 방법론
Sang Seok Lim
 
HTML5--The 30,000' View (A fast-paced overview of HTML5)
Peter Lubbers
 
Mobile architecture overview
David Scruggs
 
Mobile application architecture
Christos Matskas
 
Build Amazing Mobile Apps using HTML5, CSS3 and JavaScript - - MeeGo Confere...
Raj Lal
 
React Native를 사용한
 초간단 커뮤니티 앱 제작
Taegon Kim
 
Mobile Application Architecture Strategy
Gary Wong
 
Cross Platform Mobile Application Architecture
Derrick Bowen
 
Introduction to Html5
www.netgains.org
 
HTML5 JS APIs
Remy Sharp
 
architecture of mobile software applications
Hassan Dar
 
HTML & CSS: Chapter 05
Steve Guinan
 
Ad

Similar to HTML5 on mobile (20)

PDF
HTML5를 활용한 하이브리드 앱개발하기
정현 황
 
PPTX
RIch User Experience
Louise Thomson
 
PDF
HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)
dynamis
 
PDF
PR Coverage: September - October, 2012
marcombuzz
 
PDF
Idevice connections
Kyle Bass
 
PDF
E commerce search strategies
Roger Xia
 
XLSX
Product Matrix1
4docshare
 
PDF
Product Matrix1
4docshare
 
XLSX
Product Matrix
4docshare
 
XLS
Product Matrix1 97
4docshare
 
PDF
Marcom Buzz September- October, 2012
marcombuzz
 
PDF
REST: putting the web back in to web services
Kerry Buckley
 
PDF
앱 클라우드 서비스 개발
고포릿 default
 
PDF
Open Source Search Applications
Lucidworks (Archived)
 
PDF
Web Technologies
dynamis
 
PDF
Windows azure poster
Lee Stott
 
PDF
Windows azure poster
Guada Casuso
 
PDF
Windows azure poster
Tũi Wichets
 
PPT
SPRINT 13 Workshop 5 Open changes everything Oliver Morley - The National Arc...
UK Government Digital Service
 
PDF
PR Coverage: March - April 2012
marcombuzz
 
HTML5를 활용한 하이브리드 앱개발하기
정현 황
 
RIch User Experience
Louise Thomson
 
HTML5 for Designers (HTML5 時代の Web デザイナーの新常識)
dynamis
 
PR Coverage: September - October, 2012
marcombuzz
 
Idevice connections
Kyle Bass
 
E commerce search strategies
Roger Xia
 
Product Matrix1
4docshare
 
Product Matrix1
4docshare
 
Product Matrix
4docshare
 
Product Matrix1 97
4docshare
 
Marcom Buzz September- October, 2012
marcombuzz
 
REST: putting the web back in to web services
Kerry Buckley
 
앱 클라우드 서비스 개발
고포릿 default
 
Open Source Search Applications
Lucidworks (Archived)
 
Web Technologies
dynamis
 
Windows azure poster
Lee Stott
 
Windows azure poster
Guada Casuso
 
Windows azure poster
Tũi Wichets
 
SPRINT 13 Workshop 5 Open changes everything Oliver Morley - The National Arc...
UK Government Digital Service
 
PR Coverage: March - April 2012
marcombuzz
 

More from JungHyuk Kwon (8)

PDF
웹을 지탱하는 기술
JungHyuk Kwon
 
PDF
Mobile 시대의 SEO ( Search Engine Optimization )
JungHyuk Kwon
 
PDF
2011 Mobile & Web technologies
JungHyuk Kwon
 
PDF
2011 The Year of Web apps
JungHyuk Kwon
 
KEY
HTML5 로 iPhone App 만들기
JungHyuk Kwon
 
PDF
User Stories Applied
JungHyuk Kwon
 
PPTX
Twitter Api Mashup
JungHyuk Kwon
 
PDF
Crawling The Web
JungHyuk Kwon
 
웹을 지탱하는 기술
JungHyuk Kwon
 
Mobile 시대의 SEO ( Search Engine Optimization )
JungHyuk Kwon
 
2011 Mobile & Web technologies
JungHyuk Kwon
 
2011 The Year of Web apps
JungHyuk Kwon
 
HTML5 로 iPhone App 만들기
JungHyuk Kwon
 
User Stories Applied
JungHyuk Kwon
 
Twitter Api Mashup
JungHyuk Kwon
 
Crawling The Web
JungHyuk Kwon
 

Recently uploaded (20)

PPTX
The story of Nomuzi and the way she was living
cfsmasimula
 
PDF
Vocal Remover for Every Creator: How unMix Powers Your Workflow
unMIx VocalRemover
 
PDF
Scene with dragon stuff from Dragons: The Nine Realmes
Max Lawson
 
DOCX
GGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGCELL DISCOVERY METHOD.docx
JohnPaulCamitan
 
PDF
Keep It Short: India's Talent Launchpad for Filmmakers
Cinystore Technologies
 
PPTX
Shyrete Behluli alanian njeri slay yayayya
g52ps246s2
 
PDF
3Below Moon fight sequence which happens on the moon
Max Lawson
 
PDF
RECEPTION PROGRAMME - RECEPTION PROGRAMME
Kweku Zurek
 
PDF
Personal storyboard project for the ol’ portfolio
Max Lawson
 
PDF
phylobook.pdf פילוסופייה:מבט מודרני לאוניד לדאטה
Leonid Ledata
 
PPTX
3rd week continents.pptxsswdewceceededede
EmanEssa14
 
PPTX
asdmadsmammmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm.pptx
Apatheia1
 
PPT
electrostaticsfgfgfgfgfgfgfgfgfgfgfgfgfgfgfg
tpapawankumar
 
PDF
Lucky_mangA chapter 1 Story and Art by Enaji studio
gosinaohuawunwa
 
PPTX
Understanding RCS Communication Features and Benefits_ (1).pptx
Times Mobile
 
PDF
Lucky_mangA Story and Art By Enaji studio
gosinaohuawunwa
 
PDF
Hfxfitfidogaidsrixtocgockxifizhuffgoyfodti
WilfredSelorio
 
DOCX
The Digital Playground_ Finding the Best Infant Toy Cars at Online Toy Shops ...
Custom Printing Boxes
 
PDF
japanese style violent manga guts -v01.pdf
vsevolodovichnikolai
 
PDF
Earn Extra 1 Lakh Now – Your Joining Bonus is Waiting on WinClash
winclash45
 
The story of Nomuzi and the way she was living
cfsmasimula
 
Vocal Remover for Every Creator: How unMix Powers Your Workflow
unMIx VocalRemover
 
Scene with dragon stuff from Dragons: The Nine Realmes
Max Lawson
 
GGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGCELL DISCOVERY METHOD.docx
JohnPaulCamitan
 
Keep It Short: India's Talent Launchpad for Filmmakers
Cinystore Technologies
 
Shyrete Behluli alanian njeri slay yayayya
g52ps246s2
 
3Below Moon fight sequence which happens on the moon
Max Lawson
 
RECEPTION PROGRAMME - RECEPTION PROGRAMME
Kweku Zurek
 
Personal storyboard project for the ol’ portfolio
Max Lawson
 
phylobook.pdf פילוסופייה:מבט מודרני לאוניד לדאטה
Leonid Ledata
 
3rd week continents.pptxsswdewceceededede
EmanEssa14
 
asdmadsmammmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm.pptx
Apatheia1
 
electrostaticsfgfgfgfgfgfgfgfgfgfgfgfgfgfgfg
tpapawankumar
 
Lucky_mangA chapter 1 Story and Art by Enaji studio
gosinaohuawunwa
 
Understanding RCS Communication Features and Benefits_ (1).pptx
Times Mobile
 
Lucky_mangA Story and Art By Enaji studio
gosinaohuawunwa
 
Hfxfitfidogaidsrixtocgockxifizhuffgoyfodti
WilfredSelorio
 
The Digital Playground_ Finding the Best Infant Toy Cars at Online Toy Shops ...
Custom Printing Boxes
 
japanese style violent manga guts -v01.pdf
vsevolodovichnikolai
 
Earn Extra 1 Lakh Now – Your Joining Bonus is Waiting on WinClash
winclash45
 

HTML5 on mobile

  • 1. HTML5 on Mobile http://xguru.net Monday, July 5, 2010
  • 2. • ➡ - http://xguru.net ➡ - @xguru ➡ - guru @ xguru.net Monday, July 5, 2010
  • 3. Mobile vs. Desktop Internet User http://www.slideshare.net/fred.zimny/morgan-staneley-internet-trends-ri041210 Monday, July 5, 2010
  • 4. OS iPhone (iOS) 40% Android 26% Blackberry 6% Symbian 24% Other 1% webOS WM 1% 2% Source : AdMob 2010 May Mobile Metrics Highlights * Monday, July 5, 2010
  • 5. HTML5 ? Monday, July 5, 2010
  • 6. HTML5 ? . Monday, July 5, 2010
  • 7. HTML5 ? . Even Google was not rich enough to support all of the different mobile platforms from Apple’s AppStore to those of the BlackBerry, Windows Mobile, Android and the many variations of the Nokia platform - Vic Gundotra, Google Engineering VP Monday, July 5, 2010
  • 10. Mobile HTML5 Browser (OS) Version Score ( ? / 160 ) IE ( Win ) 6.0 11 IE ( Win ) 8.0.7600 19 Opera Mini 1.0 33 iPhone ( Mobile Safari ) 2.0 37 Android 1.6 39 iPhone ( Mobile Safari ) 2.1 - 2.2 45 Maemo microB 5 PR-1.1.1 55 Firefox Mobile 1.0 101 Firefox ( Win ) 3.6.3 101 Palm WebOS 1.4 107 iPhone ( Mobile Safari ) 3.0 110 Safari ( Mac ) 4.0.5 113 iPad ( Mobile Safari ) 3.2 115 Android 2.0 - 2.1 118 Android 2.2 122 iPhone ( Mobile Safari ) 4.0 Beta 4 133 Safari ( Mac ) 5.0 138 Chrome ( Win , Mac ) 6.0.422.0 142 Mobile test result from http://www.callingallgeeks.org Tested with http://html5test.com Monday, July 5, 2010
  • 11. HTML5 Key Elements for Mobile • Offline Support : Web database, LocalStorage, App Cache • Canvas • Video • GeoLocation • Advanced Forms • Camera & Device (html-device) W3C DAP , JIL , OMTP BONDI , PhoneGap Monday, July 5, 2010
  • 13. Mobile Web App Monday, July 5, 2010
  • 14. Mobile Web App • ★ iPhone/iPad/Android/BlackBerry.. ★ Monday, July 5, 2010
  • 15. Mobile Web App • ★ iPhone/iPad/Android/BlackBerry.. ★ • : Monday, July 5, 2010
  • 16. Mobile Web App • ★ iPhone/iPad/Android/BlackBerry.. ★ • : • Web ★ HTML5 , CSS , Javascript , Monday, July 5, 2010
  • 17. Mobile Web App • ★ iPhone/iPad/Android/BlackBerry.. ★ • : • Web ★ HTML5 , CSS , Javascript , • Web Mashup Monday, July 5, 2010
  • 18. Mobile Web App Types Monday, July 5, 2010
  • 21. Mobile Device Server Online Web Application ✓ Web App UI ✓ HTML5,CSS3 UI Web Database ✓ GeoLocation Server Resources ✓ Monday, July 5, 2010
  • 22. Mobile Device Server Online Web Application ✓ Web App UI ✓ HTML5,CSS3 UI Web Database ✓ GeoLocation Server Resources ✓ Mobile Device Server Offline Enabled Web App ✓ Web ✓ App UI Local ✓ Web Database Data Server Resources ✓ & Monday, July 5, 2010
  • 23. Mobile Device Server Online Web Application ✓ Web App UI ✓ HTML5,CSS3 UI Web Database ✓ GeoLocation Server Resources ✓ Mobile Device Server Offline Enabled Web App ✓ Web ✓ App UI Local ✓ Web Database Data Server Resources ✓ & Mobile Device Server Offline Web App ✓ Web ✓ App UI Local ✓ , , , EBook Web Data Server Monday, July 5, 2010
  • 24. Mobile Device Server Online Web Application ✓ Web App UI ✓ HTML5,CSS3 UI Web Database ✓ GeoLocation Server Resources ✓ Mobile Device Server Offline Enabled Web App ✓ Web ✓ App UI Local ✓ Web Database Data Server Resources ✓ & Mobile Device Server Offline Web App ✓ Web ✓ App UI Local ✓ , , , EBook Web Data Server Mobile Device Server Hybrid Web App App ✓ Native + Web Store Web ✓ Web App UI Local Server Database Resources ✓ Native Data Monday, July 5, 2010
  • 25. Mobile Device Server Online Web Application ✓ Web App UI ✓ HTML5,CSS3 UI Web Database ✓ Server Resources Monday, July 5, 2010
  • 26. Mobile Device Server Online Web Application ✓ Web App UI ✓ HTML5 , CSS3 , Javascript Flash Web Database Server Resources http://j.mp/hogapp http://j.mp/spinapp Monday, July 5, 2010
  • 27. Mobile Device Server Online Web Application ✓ GeoLocation Web App UI ✓ / Open API Web Database Server Resources http://j.mp/myasik http://j.mp/opimap Monday, July 5, 2010
  • 28. Mobile Device Server Offline Enabled Web App ✓ Web ✓ App UI Local ✓ Web Database Data Server Resources ✓ & Mobile Gmail - http://gmail.com <html manifest="https://mail.google.com/mail/mu/manifest"> • Web SQL Database , App Cache : Offline • Offline Online • HTML ( CSS , Javascript , ) Monday, July 5, 2010
  • 29. Mobile Device Server Offline Enabled Web App ✓ Web App UI Local ✓ Local Cache Web Database Data Server Resources ✓ GeoLocation nextstop - http://nextstop.com • Local Storage Prefetch • App Cache • GeoLocation API Monday, July 5, 2010
  • 30. Mobile Device Server Offline Web App ✓ Web ✓ App UI Local ✓ , , , EBook Web Data Server Checklist - http://j.mp/checkapp • App Cache • Web SQL Database DB • Offline Monday, July 5, 2010
  • 31. Mobile Device Server Offline Web App ✓ HTML5 Web ✓ EPUB HTML App UI Local Web Data Server ✓ http://j.mp/monocle_ebook Monocle - eBook for Web Browser Monday, July 5, 2010
  • 32. Mobile Device Server Hybrid Web App App ✓ Native + Web Store Web ✓ Web App UI Local Server Database Resources ✓ Cross Platform Mobile App Framework Data PhoneGap , Titanium Mobile .. Harmonious - HTML5 Canvas + jQTouch + PhoneGap Monday, July 5, 2010
  • 33. Web App vs. Native App Web App Native App • • • HTML , CSS , Javascript • Objective-C ( iPhone ) , Java ( Android ) • • XCode ( iPhone ) , Eclipse ( Android ) • , iUI , JQTouch .. • Cocoa Touch ( iPhone ) , UI Framework (Android) • Mac • Mac ( iPhone ) , Android • App 1) • App $99 or $35 • - / .. 2) • • • App Store/Market / & • • ( iPhone ) • Android / Blackberry • 1) Phonegap 2) Phonegap , QuickConnect / <= Hybrid App Monday, July 5, 2010
  • 34. Mobile Web App Helpers Monday, July 5, 2010
  • 36. UI Library for Touch Devices #1 • iPhone style UI library ★ JQTouch - http://jqtouch.com/ ★ iUI - http://code.google.com/p/iui/ ★ WebApp.Net - http://webapp-net.com/ Monday, July 5, 2010
  • 37. UI Library for Touch Devices #2 • Sencha Touch : jQTouch + Ext JS + Raphaël http://sencha.com ★ HTML5 + CSS + Javascript Mobile App Framework ★ Support for iOS , Android ★ Touch UI ★ iPad / iPhone / Android • : http://j.mp/senchak Monday, July 5, 2010
  • 38. UI Library for Touch Devices #3 • iAd JS : Appleʼs Javascript Web UI Library ★ HTML5 + CSS + Javascript UI Framework ★ CocoaTouch Web ★ Controls : Button, Checkbox, Radio Button, Slider, Switch, Page Control ,, ★ UI Control ★ Menu : Hide/Reveal , Horizontal Slider , Orbit , Pinwheel ★ Galleries : 360-Degree Object Rotation & Panorama, Horizontal/Vertical Slide, Coverflow ★ Audio / Video : Using HTML5 audio/video element Monday, July 5, 2010
  • 39. Web App to Native App Framework • PhoneGap ★ http://www.phonegap.com/ ★ iPhone, Android, Blackberry, Symbian, Palm, Windows Mobile • Titanium Mobile ★ http://www.appcelerator.com/ ★ iPhone, Android • QuickConnect ★ http://quickconnectfamily.org/ ★ iPhone, Android, Blackberry • NimbleKit ★ http://www.nimblekit.com/ ★ iPhone Monday, July 5, 2010
  • 40. PhoneGap #1 • Cross Platform Mobile Application Framework • HTML+Javascript Web App Container • Web App Native App • Web App Device Javascript iPhone Android Blackberry Symbian Palm Geolocation ✓ ✓ ✓ ✓ ✓ Accelerometer ✓ ✓ ✓ ✓ ✓ Camera ✓ ✓ ✓ ✓ ★ Vibration ✓ ✓ ✓ ✓ ✓ Contacts ✓ ✓ ✓ ✓ Sound ✓ ✓ ✓ ✓ ✓ SMS ★ ✓ ✓ ✓ ✓ Telephone ★ ★ ✓ ✓ ★ Monday, July 5, 2010
  • 41. PhoneGap #2 Android iOS ( iPhone OS ) PhoneGap framework PhoneGap framework ( Container App ) ( Container App ) Android App Files iOS App Files Manifest.xml and resources plist,icon,png file resources Phonegap Application FW integration CocoaTouch FW integration Webkit ( WebView ) Webkit (UIWebView) phonegap.js phonegap.js application application css/js/html css/js/html Web Application Monday, July 5, 2010
  • 43. Mobile Web App • HTML5 & APIs ★ Web SQL, Local Storage, App Cache, Canvas,Video, Forms, GeoLocation ★ CSS UI Effects , ( html-device ) • UI & Application Framework ★ iUI , jQTouch , WebApp.Net , Sencha ★ Javascript UI , CSS3 • App Packaging & Device Integration ★ Framework : PhoneGap , NimbleKit , Titanium Mobile .. ★ Specification : W3C DAP , JIL , OMTP BONDI Monday, July 5, 2010
  • 44. ! email : guru @ xguru.net twitter : @xguru Monday, July 5, 2010
  • 45. References • http://code.google.com/p/html5-slides/ • http://rakaz.nl/2009/09/iphone-webapps-101-detecting-essential-information-about-your-iphone.html • http://developer.apple.com/safari/library/documentation/appleapplications/Reference/SafariWebContent/ • http://building-iphone-apps.labs.oreilly.com/ • http://www.phonegap.com/ • http://sencha.com • http://jqtouch.com • http://quickconnectfamily.org/ • http://www.appcelerator.com/products/titanium-mobile-application-development/ • http://www.slideshare.net/akosma/webtuesday-mobile-web-applications-framework-overview Monday, July 5, 2010