• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
HTML5 on mobile
 

HTML5 on mobile

on

  • 40,348 views

왜 모바일에서 HTML5 가 중요한지, 현재 모바일 환경에서의 HTML5 지원은 어느 수준에 와있는지를 알아본다. 그리고, HTML5 를 이용한 모바일 웹 ...

왜 모바일에서 HTML5 가 중요한지, 현재 모바일 환경에서의 HTML5 지원은 어느 수준에 와있는지를 알아본다. 그리고, HTML5 를 이용한 모바일 웹 애플리케이션 개발이 어떻게 이루어지는지에 대해 소개한다.

Statistics

Views

Total Views
40,348
Views on SlideShare
22,686
Embed Views
17,662

Actions

Likes
57
Downloads
1,365
Comments
6

60 Embeds 17,662

http://xguru.net 16317
http://penil.net 333
http://namdroid.tistory.com 241
http://stella.thoth.kr 213
http://blog.daum.net 156
http://www.hanrss.com 50
http://blog.kinorama.com 45
http://pkcentum.tistory.com 44
http://blog.naver.com 32
http://kms.tobesoft.co.kr 28
http://www.slideshare.net 22
http://bella1.tistory.com 14
http://websolus.hanbiro.net 13
http://webdevmobile.com 11
http://gw.damoneasycerti.com 10
http://gw.datahouse.co.kr 10
http://resistan.com 9
http://gw.com2us.com 7
http://www.pention.net 7
http://www.avakingdom.com 6
http://webcache.googleusercontent.com 6
http://192.168.6.52 5
http://us-w1.rockmelt.com 5
http://www.webdevmobile.com 4
http://paper.li 4
http://web2.c2.cyworld.com 4
http://gofficeplus.lgcns.com 4
http://resistan.net 4
http://static.slidesharecdn.com 4
http://192.168.107.148 3
http://211.232.57.30 3
http://dev.paran.com 3
http://www.wmh55.com 3
http://wildfire.gigya.com 3
http://pention.net 3
http://www.linkedin.com 3
http://makelmail.nl 2
http://keos.fstyleweb.co 2
http://www.iweb34.com 2
http://kr.yahoo.com 2
http://211.241.150.130 2
http://windofwind.tistory.com 2
http://gw.websolus.co.kr 2
http://192.168.1.199 2
http://keos.fstyleweb.c 2
http://revirth.hosting.paran.com 1
http://mail3.nate.com 1
http://search.lgcns.com 1
http://m.blog.daum.net 1
http://lumieyes.bugs.co.kr 1
More...

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

16 of 6 previous next Post a comment

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • 좋은 자료 감사합니다
    Are you sure you want to
    Your message goes here
    Processing…
  • 좋은 자료 감사합니다
    Are you sure you want to
    Your message goes here
    Processing…
  • 좋은 자료 감사합니다..~~~!!
    Are you sure you want to
    Your message goes here
    Processing…
  • 앱 개발 방향에 많은 참고가 되었습니다.
    Are you sure you want to
    Your message goes here
    Processing…
  • HTML mobile
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    HTML5 on mobile HTML5 on mobile Presentation Transcript

    • 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