Review the history of mobile and current evolution of mobile web technology. And also forecast where the web and mobile goes.

1. MOBILEWEBMEGATRENDS

2. ABOUTME
„ WebEvangelist
„ http://webdevmobile.comCommunityleader
„ 2006-Now:OperaSoftwarePresalesengineer
„ 2010-Now:W3CKoreaofficestaff
„ manyoung@gmail.com
„ Blog:http://manyoung.net
„ Twitter:@manyoungc
„ Me2Day:http://me2day.net/manyoung

3. AGENDA
„ Historyofinternetonmobile
„ Evolutionofwebtechnology
„ Webasapplication
„ WebAppsgoestoMobile
„ WebUILibrary
„ WAChistoryandfuture
„ WeborApps?

4. HISTORY OF
INTERNET ON MOBILE

5. MOBILEBROWSING
„ WAP
„ Fullbrowser
„ MobileWeb
„ MobileWeApps

6. RISINGOFMOBILEWEB
„ iPhone in 2007
„ SmartphoneWars
„ Smartphone=Mobileinternetmachine
„ iPhoneSafari
„ MobileBrowserwars

7. APPSTORESHOCK!
„ Newchallengestophonemanufacturers

8. SUCCESSOFAPPSTORE
„ MarketVolumematters
„ Motivationfordevelopers

9. APPSTOREWARS

10. MOBILEWEB?
„ AgeofAppnotWeb!
„ WhatcanIdo?
„ Asawebdeveloper?

11. EVOLUTION OF WEB
TECHNOLOGY

12. GROWTHOFWEBTECHNOLOGY
„ HTML5makeswebstandaloneapplication
http://www.hongkiat.com/blog/48-excellent-html5-demos/
„ CSS3givesrichuserexperiences
http://www.webdesignerwall.com/trends/47-amazing-css3-
animation-demos/
„ SVG

13. WEB TECHNOLOGY EVOLVES
JAVASCRIPT

14. GROWTHOFMOBILEBROWSER
„ OperaMobile
„ iPhoneSafari
„ AndroidChrome

15. PERFORMANCEOFMOBILE
BROWSER
„ Html5test.com
134/160 213/315

16. MOBILEBROWSERLEADSNEW
WEBTECHNOLOGY

17. MOBILEBROWSERTRENDS

18. DOMINANTMOBILEBROWSER
„ OperaMobile/Mini
„ Webkitbasedbrowser
„ VerykeenonHTML5andnewwebtechnology

19. WHOISMAKINGWEBKIT?
„ Google
„ Apple
„ Nokia
„ RIM
http://trac.webkit.org/wiki/WebKit%20Team

20. YOUTUBEHTML5SUPPORT
http://techcrunch.com/2010/01/20/youtube-html5/

21. YOUTUBEIE6SUPPORTENDED
http://techcrunch.com/2009/07/14/youtube-will-be-next-to-kiss-ie6-support-goodbye/

23. APPLEHTML5

24. APPLEHTML5

25. WHYHTML5?
„ Desktop
„ Mobile
„ Device

26. CROSSPLATFORM
„ Apple
TV
„ Google

27. ITGOESTOCEMARKET
¡ Consumer Electronics

28. IT’SWEB!
„ CrossDevice
„ CrossPlatform

29. 2010:CHROMEWEBSTORE
„ ChromeWebStore=DesktopWebApps
„ https://chrome.google.com/webstore

30. CHROMETOPHONE
„ Mobileappsbrowserbased.

31. WEB AS APPLICATION

32. APPLICATIONLIKEWEBPAGE
„ GoogleMaps
„ GoogleDocs

33. OPERA WIDGET = FIRST BROWSER BASED
WEBAPP
„ Operaintroducedbrowserbasedapplicationcalledwidgetin
2006
„ WidgetisW3Cstandard
http://www.w3.org/TR/widgets/
„ OperaWidget
http://widgets.opera.com
„ Widget=browserbasedstandalonewebapplication

35. 2007:APPLEMACOS10.5
„ MacOsDashboardWidget
„ http://developer.apple.com/macosx/dashboard.html
„ http://en.wikipedia.org/wiki/Dashboard_(software)
„ HTML5CanvaswasalsointroductedbyApple

36. 2008:WIDGETCHAOS!
„ GoogleDesktopwidget
„ YahooWidget
„ MSVistaGadget
„ Naver,DaumWidget
„ Allgone…⋯
„ Nonstandardbased

37. WEBAPPS GOES TO MOBILE

38. WEBAPPSONBROWSER
„ URLbased
„ Webpagewebservicebased

39. MOBILEWEBAPPS
„ Yahoomail
„ Gmail

40. APPLEWEBAPPS
„ Nativeapp+Webapp
http://www.apple.com/webapps/whatarewebapps.html

41. MAKINGNATIVEAPPSWITHWEB
TECHNOLOGY
„ PhoneGap
http://phonegap.com
„ Titaniumappcelerator
http://www.appcelerator.com/products/
„ JoApp
http://joapp.com/

42. PHONEGAP
„ PhoneGapisanopensourcedevelopmentframeworkfor
buildingcross-platformmobileapps.BuildappsinHTMLand
JavaScriptandstilltakeadvantageofcorefeaturesiniPhone/
iTouch,iPad,GoogleAndroid,Palm,SymbianandBlackberry
SDKs.Learn
„ http://phonegap.com

43. PHONEGAP
„ http://phonegap.com

44. PHONEGAP
Android Android
Market
PhoneGap
Mobile Widget Apple
HTML/CSS/JS iPhone
Appstore
Web Developer Blackberry Blackberr
Market y
Mobile Phones

45. PHONEGAP.JS
„ DeviceAPItocontrolphoneresources
„ Javascriptgrammar

46. PHONEGAP
„ Onesourcemultiuse
„ Webstandardtechnology
„ HTML/CSS/JS
„ ExtendingwebwithPhoneGaplibrary
„ ControlsmartphoneH/WlikeCamera,Battery,GPS

47. WEB UI LIBRARY

48. WEBUIFRAMEWORK:IUI
„ iUI:iPhoneUserInterfaceFramework
„ Javascript,HTML,CSS
„ Demo
http://chriscarey.com/projects/mythtv/iphone/

49. WEBUIFRAMEWORK:JQTOUCH
„ JQTouch
„ SimilartonativeappUI
„ Javascript,HTML,CSS
„ JSLibrary
„ http://www.jqtouch.com/preview/demos/main/#home

50. WEBUIFRAMEWORK:SENCHA
¡ HTML5, CSS3, Javascript
¡ Resolution independent
¡ JS Library
¡ http://touchstyle.mobi/app/

51. WAC HISTORY AND FUTURE

52. ANTIAPPLEALLIANCES
„ 2008:Usingwebascrossplatformmobileapplicationby
OperatorsandsomeOEMs

53. ANTIAPPLEALLIANCES
„ Operators
„ Handsetmakers
„ ToomanyplatformsL
„ WindowsMobile,Limo,Android,Brew,SHP,Symbian,
ProprietraryOS…⋯.
„ Whatcanbethecrossplatform?

54. IT’SWEB!
„ WebStandardTechnology
„ CrossPlatform
„ CrossDevice

55. W3CWIDGETBASED
„ Browserenginebased
„ Webstandardcompatible
„ Widgets1.0:PackagingandConfiguration
„ Widgets1.0:DigitalSignatures
„ Widgets1.0:APIsandEvents
„ Widgets1.0:Updates

56. WIDGETRUNTIME
„ Webapplicationplatform
„ Browserrenderingenginebased
„ HTML/CSS/Javascriptisthemaintechnology
„ Operator/OEMdriven
Widget Manager UI
Widget Runtime = Browser Engine
(Opera, Webkit, etc)
Android WM LIMO

57. WIDGETRUNTIME
Widget Runtime(Browser Engine)

58. WIDGETSTORE
Android
(Widget Engine)
Mobile Widget
HTML/CSS/JS Widget
Widget
Widget WM
Store
Store (Widget Engine)
Store
Web Developer
Operator Stores
OEMs Stores
LIMO
(Widget Engine)
Mobile Phones

59. WIDGETRUNTIMEDEMO
„ http://www.youtube.com/watch?
v=0RYvNl1mO3Mfeature=related
„ http://widget.developer.vodafone.com/en/
„ http://www.youtube.com/watch?v=3xpS21aR-BQ

60. WEBAPPSPROS/CONS
„ Pros
„ EasydevelopmentthanJava/Objective-C
„ EasyuseofOpenAPI/MeshUp
„ Easydeliveryofwebcontents
„ Crossplatformdeployment
„ Cons
„ NodeviceH/Wcontrols
„ Lowgraphics,multimediacontrol

61. EXTENDWEB:DEVICEAPIS
„ Contact
„ Calendar
„ Filesystem
„ Messaging
„ Systeminfo:
„ CPU,Battery,etc

62. EXTENDINGWEBSPEC
„ JIL(JointInnovationLab)
„ Vodafone,VZW,Softbank,ChinaMobile
http://www.jil.org/
„ BONDI(OMTPdriven)
„ W3CDeviceAPIsandPolicy
http://www.w3.org/2009/dap/

63. WIDGETS=MOBILEAPPS

64. WAC(WHOLESALE APPLICATION
COMMUNITY)
„ Cross-platformmobileapps
„ Cross-deviceapps
„ JIL+BONDI=WACAPI
„ GlobalAppStore

65. WAIKIKI­–WACENGINE
„ http://public.wholesaleappcommunity.com/redmine/
embedded/wac2pubrev/index.html
„ WidgetRuntime
„ 1.Spec(Core+DeviceAPIs)
„ 2.Tools(SDK+RI[ReferenceImplementation])
„ 3.Testing(Complianceprocess)

66. WACGLOBALAPPSTORE

67. K-WAC

68. 글로벌앱스토어WAC로드맵
목표시점 계획 진행상태
2010년2월 24개통신사구축발표 완료
2010년7월 WAC법인출범 완료
2010년9월 WAC표준발표 예정
2010년11월 SDK발표및첫개발자이벤트 예정
2011년2월 WAC오픈첫단말시연 예정
2011년5월 WAC단말상용화 예정

69. 국내통합앱스토어(K-WAC)
추진일정
목표시점 계획
2010.4월 통합앱스토어추진방향발표
2010.5∼〜～12월 프로그램,시스템등표준개발
2011.1월 통합앱스토어시험운영
2011.6월 상용단말출시및상용서비스개시

70. APPDISTRIBUTION
Android
(Widget Engi
ne)
Mobile Widget
HTML/CSS/JS Widget
Widget
Widget WM (Widget
Store
Store Engine)
Store
Web Developer
SKT, KT, LGU+
Samsug, LGE
Vodafone, VZW, Softbank LIMO
(Widget Engi
ne)
Mobile Phones

71. SIZEDOESMATTER
Cellphone
Smartphone
Million
iPhone
0 200 400 600 800 1000 1200 1400
Number of phones

72. ALTOGETHER!
„ HTML5/CSS3/SVG
„ DevicesAPI
„ Hugemarket
„ 20Globaloperators
„ 5Handsetmakers

73. WEB OR APPS?

74. WEBORAPPS?
„ SameUX
„ Doesn’tmatter
„ http://www.youtube.com/watch?v=-61h8UGsi_M

75. WEBASAPPLICATION
„ Neweraofmobileapps
„ ByWebstandardtechnology
„ HTML5/CSS3ismuchpowerful
„ Crossdevice/platform

76. THANKYOUFORLISTENING
http://webdevmobile.com
Blog : http://manyoung.net
Twitter : @manyoungc
Me2Day : http://me2day.net/manyoung