SlideShare a Scribd company logo

2011 Mobile & Web technologies

•
•
JungHyuk Kwon
JungHyuk Kwon

WebApps FutureCon 에서 발표한 "2011년 웹 & 모바일 개발자가 주목해야할 기술들" 자료입니다. HTML5,CSS3,Javascript,Responsive Web Design,Device API,Hybrid App,Hybrid Framework 등에 대해서 설명합니다.

1 of 42
웹모바일 기술전망 2011 ( @xguru )
•권정혁 ➡ 기술전략팀장 - SW Architect - Developer Evangelist ➡ http://xguru.net ➡ @xguru ➡ guru@xguru.net
2010 was year of HTML5 ReadWriteWeb - “Top Trends of 2010 : HTML5”
HTML5 ? HTML5 ~= HTML + CSS + JS API Web Desktop App ➠ Web App
Web App ? ➠ ➠모바일
왜HTML5��모바일에중요한가? 각모바일플랫폼용 네이티브앱 iOS, Android, WP7, BlackBerry, Symbian, Bada .. 7개의플랫폼을작업 HTML5가미래의플랫폼이다. FacebookCTOBretTaylor 모든플랫폼을네이티브로지원 예산이모자르다 GoogleVPVicGundotra
기관 App 제작비용 다운로드 특허청 특허정보검색 2억6600만원 833건 전라남도 U남도여행길잡이 3억원 6600건 : http://j.mp/korgovapp
Devices 2011 BB PlayBook HP WebOS CR-48 MS WP7 with iOS Android Nokia
Web Tech 2011
HTML5,CSS3 Javascript!!! ResponsiveWebDesign WebAppStores DeviceAPI HybridAppCrossPlatform
HTML(5) Offline Device 3D , 2D Performance Semantics Multi Media Connectivity CSS3 Storage Access Graphics Effects Integration
HTML5어떻게공부하나요? ✓한글HTML5스펙➠http://j.mp/html5ko by ClearBoth.org ✓웹개발자를위한최소스펙➠http://j.mp/html5devel ✓Google의선물➠http://www.html5rocks.com/ ✓실전HTML5가이드(한글PDF) ➠http://j.mp/html5guide_ko ✓DiveIntoHTML5➠http://diveintohtml5.org/
HTML5 Android RIM webOS iOS 3+ 2011 3Q 2.0+ OS6+ 1.4+ 6 7 8 9 3+ 6+ 4+ 10+
HTML5 ! • HTML5shiv : HTML5 IE Enabling Script - by Remy Sharp !--[ifltIE9] scriptsrc=http://html5shiv.googlecode.com/svn/trunk/html5.js/script ![endif]-- ✓ John Resig : http://ejohn.org/blog/html5-shiv/ , IE 6 • Mordernizr - http://www.modernizr.com/ ✓ HTML5Shiv CSS3 ( ) ✓ Modernizr HTML5, CSS3 if(Modernizr.canvas){ varc=document.createElement('canvas'); varcontext=c.getContext('2d'); //캔버스사용 document.getElementById('canvasContainer').appendChild(c); } • HTML5 Boilerplate - http://html5boilerplate.com/ ✓ HTML5 ✓ Boilerplate Snippet 20 - http://j.mp/hDExIw
HTML5 Initializer • http://initializr.com/ • HTML5 Boilerplate • jQuery • Modernizer / HTML5shiv •
HTML5 Video Audio • 20 HTML5 Video Player - http://j.mp/dfxNMQ ✓ Video JS , JW Player , Mediaelement.js , Projekktor .. ✓ Flash Fallback IE • VideoJS ✓ http://videojs.com/ - Free OpenSource , Skin , Full Screen • Audio.js ✓ http://kolber.github.com/audiojs/ , OpenSource(MIT)
Javascript !!! • • Javascript Library for Mobile • UI Frameworks • Application Frameworks • Server-side JavaScript • Languages that Compiles to JS
Javascript for Mobile • - http://zeptojs.com ✓ Mobile ( Mobile WebKit ) ✓ jQuery but jQuery ( 26.7 K ) , Zepto.js ( 2.3K ) ✓ ( MIT License ) ✓ $('p').html('test').css('color:red'); ✓ get,each,index,first,find,closest,next,prev,remove,html,show,hide,offset,heig ht,width,attr,css,addClass.. ✓ AJAX : $.post , $.getJSON ✓ Touch Event -­‐ $('some selector').tap(function(){ ... }); -­‐ $('some selector').doubleTap(function(){ ... }); -­‐ $('some selector').swipe(function(){ ... });
UI Library for Touch Devices Web UI Touch • jQTouch - http://jqtouch.com • jQueryMobile - http://jquerymobile.com • Sencha Touch - http://sencha.com • DHTMLX Touch - http://dhtmlx.com/touch/ • jo - http://joapp.com • wink - http://winktoolkit.org • CrossPlatform지원프레임웍들증가 • GUIDesigner:DHTMLX(Alpha),Sencha(2011Q2)
Javascript Application Frameworks •데스크탑수준의WebApplication작성 ✓ ✓ ✓ •Javascript기반WebFramework ✓ ✓ ✓ JJ-JavascriptAppFramework
Server-side Javascript • Netscape Livewire http://j.mp/eNt2Ay • Node.JS : Evented Server-Side Javascript http://nodejs.org/ ✓ Google Chrome Javascript Engine V8 ✓ Network I/O NonBlocking , File I/O Asynchronous ✓ Thread , (S3,MySQL.. ) ✓ HTTPd , FTPd , IMAP, WebDAV • CommonJS : Ecosystem for Javascript Outside the Browser , http://commonjs.org/ ✓ / ✓ Server-Side , Command Line , Desktop GUI , Hybrid ( Titanium .. ) ✓ , , , , Promise ..
• List of Languages that compile to JS : http://j.mp/hp2pnR • CoffeeScript Kaffeine : Javascript • Optimizer : Google Closure , UglifyJS • Ruby , Python , Lisp Scheme • j2js : Java ByteCode to JS / Script# : C# to JS
CoffeeScript http://coffeescript.com • Javascript : coffee -c hello.coffee ➠ hello.js • ; { , , Inspired by Python Ruby number = 42 number = 42 ; opposite = true opposite = true ; number = -42 if opposite if (opposite) { number = -42 ; } ignore = yes unless name is ‘xguru’ if ( name !== ‘xguru’ ) { ignore = true ; } square = (x) - x * x square = function(x) { return x * x; }; math = math = { root: Math.sqrt root: Math.sqrt, square: square square: square, cube: (x) - x * square x cube: function(x) { return x * square(x); } }; cubes = (Math.cube num for num in list ) cubes = (function() { var _i, _len, _results; results = []; for (_i = 0,_len = list.length,_i_len,_i++) { num=list[_i]; _results.push(Math.cube(num)); } return _results; })();
Responsive Web Design • http://www.alistapart.com/articles/responsive-web-design/ • Screen Size / Platform / Orientation • CSS3 Media Query , Flexible Grid Layout • Guideline for R-W-D : http://j.mp/eWEYIJ Phone Tablet Netbook / Tablet Desktop
http://MediaQueri.es a collection of responsive web designs
ChromeWebStore
MozillaWebAppStore
GetJar
iPadificationoftheWeb
Device APIs Camera Filesystem Acclerometer Web Browser Contacts Device Messaging Orientation Device Web App API Calendar Developer Tasks Geolocation Javascript Hybrid Gallery Device Device Status Interaction • WAC (Wholesale Application Community) • 40 / : BONDI + JIL ~= Waikiki Beta • W3C DAP ( Device API )
WAC Schedule 2011 2010 2011 07 11 02 05 09 WAC WAC API Beta WAC Demo WAC 2.0 WAC 3.0 @MWC Enabled Device Network APIs 12 05 K-WAC K-WAC Enabled Device • WAC Enabled Device ✓ Galaxy S 2 , Bada 2 .. • Device Web App
Native Vs. Web Vs. Hybrid
Native App
Web App
Hybrid App • Native + Web Device OS Native App / Hybrid framework Web Browser Web Server • Multi Device • Web Application Web css/js/html Application • Device • • Web • ?
Hybrid App Native Hybrid Web Native WebView Hybrid Frameworks Appspresso / Phonegap Titanium
Hybrid • Native + WebView : Native WebView ★ iPhone ✓ Javascript Objective-C : Custom URL Scheme ( gap:// ) ✓ WebView Javascript Injectin : stringByEvaluatingJavascriptFromString() ✓ Click Hooking : shouldStartLoadWithRequest() ★ Android ✓ WebView : addJavascriptInterface •★ Appspresso / Phonegap Web App Native App ★ Device Framework Javascript •★ Titanium ( Appcelerator ) Web Native App ★ Device ( Javascript )
Hybrid Web App Device OS • Native App + Web App Hybrid framework Web Browser Web Application Web Device css/js/html • Hybrid Frameworks Phonegap Appspresso Titanium Mobile
Appspresso • Mobile App Builder by Hybrid Web App : iOS , Android .. Device API : WAC API ( Waikiki ) Powered By iOS Android Native Plugin : Plugin Development Kit • HTML5 Web App Touch UI : Sencha , jQueryMobile , JoApp JJ - Javascript MVC Framework ( Ruby On Rails )
Write Once Appspresso Sell Anywhere Win/Mac Touch UI Framework Android / iOS App Build
Web Tech 2011 • HTML5 • Device ➠ Web App • Javascript Hot ! • Responsive Web Design • Web App Store • Device API • Hybrid • Hybrid Web App
! 권정혁/구루

More Related Content

2011 Mobile & Web technologies

  • 1. 웹모바일 기술전망 2011 ( @xguru )
  • 2. •권정혁 ➡ 기술전략팀�� - SW Architect - Developer Evangelist ➡ http://xguru.net ➡ @xguru ➡ guru@xguru.net
  • 3. 2010 was year of HTML5 ReadWriteWeb - “Top Trends of 2010 : HTML5”
  • 4. HTML5 ? HTML5 ~= HTML + CSS + JS API Web Desktop App ➠ Web App
  • 5. Web App ? ➠ ➠모바일
  • 6. 왜HTML5가모바일에중요한가? 각모바일플랫폼용 네이티브앱 iOS, Android, WP7, BlackBerry, Symbian, Bada .. 7개의플랫폼을작업 HTML5가미래의플랫폼이다. FacebookCTOBretTaylor 모든플랫폼을네이티브로지원 예산이모자르다 GoogleVPVicGundotra
  • 7. 기관 App 제작비용 다운로드 특허청 특허정보검색 2억6600만원 833건 전라남도 U남도여행길잡이 3억원 6600건 : http://j.mp/korgovapp
  • 8. Devices 2011 BB PlayBook HP WebOS CR-48 MS WP7 with iOS Android Nokia
  • 9. Web Tech 2011
  • 10. HTML5,CSS3 Javascript!!! ResponsiveWebDesign WebAppStores DeviceAPI HybridAppCrossPlatform
  • 11. HTML(5) Offline Device 3D , 2D Performance Semantics Multi Media Connectivity CSS3 Storage Access Graphics Effects Integration
  • 12. HTML5어떻게공부하나요? ✓한글HTML5스펙➠http://j.mp/html5ko by ClearBoth.org ✓웹개발자를위한최소스펙➠http://j.mp/html5devel ✓Google의선물➠http://www.html5rocks.com/ ✓실전HTML5가이드(한글PDF) ➠http://j.mp/html5guide_ko ✓DiveIntoHTML5➠http://diveintohtml5.org/
  • 13. HTML5 Android RIM webOS iOS 3+ 2011 3Q 2.0+ OS6+ 1.4+ 6 7 8 9 3+ 6+ 4+ 10+
  • 14. HTML5 ! • HTML5shiv : HTML5 IE Enabling Script - by Remy Sharp !--[ifltIE9] scriptsrc=http://html5shiv.googlecode.com/svn/trunk/html5.js/script ![endif]-- ✓ John Resig : http://ejohn.org/blog/html5-shiv/ , IE 6 • Mordernizr - http://www.modernizr.com/ ✓ HTML5Shiv CSS3 ( ) ✓ Modernizr HTML5, CSS3 if(Modernizr.canvas){ varc=document.createElement('canvas'); varcontext=c.getContext('2d'); //캔버스사용 document.getElementById('canvasContainer').appendChild(c); } • HTML5 Boilerplate - http://html5boilerplate.com/ ✓ HTML5 ✓ Boilerplate Snippet 20 - http://j.mp/hDExIw
  • 15. HTML5 Initializer • http://initializr.com/ • HTML5 Boilerplate • jQuery • Modernizer / HTML5shiv •
  • 16. HTML5 Video Audio • 20 HTML5 Video Player - http://j.mp/dfxNMQ ✓ Video JS , JW Player , Mediaelement.js , Projekktor .. ✓ Flash Fallback IE • VideoJS ✓ http://videojs.com/ - Free OpenSource , Skin , Full Screen • Audio.js ✓ http://kolber.github.com/audiojs/ , OpenSource(MIT)
  • 17. Javascript !!! • • Javascript Library for Mobile • UI Frameworks • Application Frameworks • Server-side JavaScript • Languages that Compiles to JS
  • 18. Javascript for Mobile • - http://zeptojs.com ✓ Mobile ( Mobile WebKit ) ✓ jQuery but jQuery ( 26.7 K ) , Zepto.js ( 2.3K ) ✓ ( MIT License ) ✓ $('p').html('test').css('color:red'); ✓ get,each,index,first,find,closest,next,prev,remove,html,show,hide,offset,heig ht,width,attr,css,addClass.. ✓ AJAX : $.post , $.getJSON ✓ Touch Event -­‐ $('some selector').tap(function(){ ... }); -­‐ $('some selector').doubleTap(function(){ ... }); -­‐ $('some selector').swipe(function(){ ... });
  • 19. UI Library for Touch Devices Web UI Touch • jQTouch - http://jqtouch.com • jQueryMobile - http://jquerymobile.com • Sencha Touch - http://sencha.com • DHTMLX Touch - http://dhtmlx.com/touch/ • jo - http://joapp.com • wink - http://winktoolkit.org • CrossPlatform지원프레임웍들증가 • GUIDesigner:DHTMLX(Alpha),Sencha(2011Q2)
  • 20. Javascript Application Frameworks •데스크탑수준의WebApplication작성 ✓ ✓ ✓ •Javascript기반WebFramework ✓ ✓ ✓ JJ-JavascriptAppFramework
  • 21. Server-side Javascript • Netscape Livewire http://j.mp/eNt2Ay • Node.JS : Evented Server-Side Javascript http://nodejs.org/ ✓ Google Chrome Javascript Engine V8 ✓ Network I/O NonBlocking , File I/O Asynchronous ✓ Thread , (S3,MySQL.. ) ✓ HTTPd , FTPd , IMAP, WebDAV • CommonJS : Ecosystem for Javascript Outside the Browser , http://commonjs.org/ ✓ / ✓ Server-Side , Command Line , Desktop GUI , Hybrid ( Titanium .. ) ✓ , , , , Promise ..
  • 22. • List of Languages that compile to JS : http://j.mp/hp2pnR • CoffeeScript Kaffeine : Javascript • Optimizer : Google Closure , UglifyJS • Ruby , Python , Lisp Scheme • j2js : Java ByteCode to JS / Script# : C# to JS
  • 23. CoffeeScript http://coffeescript.com • Javascript : coffee -c hello.coffee ➠ hello.js • ; { , , Inspired by Python Ruby number = 42 number = 42 ; opposite = true opposite = true ; number = -42 if opposite if (opposite) { number = -42 ; } ignore = yes unless name is ‘xguru’ if ( name !== ‘xguru’ ) { ignore = true ; } square = (x) - x * x square = function(x) { return x * x; }; math = math = { root: Math.sqrt root: Math.sqrt, square: square square: square, cube: (x) - x * square x cube: function(x) { return x * square(x); } }; cubes = (Math.cube num for num in list ) cubes = (function() { var _i, _len, _results; results = []; for (_i = 0,_len = list.length,_i_len,_i++) { num=list[_i]; _results.push(Math.cube(num)); } return _results; })();
  • 24. Responsive Web Design • http://www.alistapart.com/articles/responsive-web-design/ • Screen Size / Platform / Orientation • CSS3 Media Query , Flexible Grid Layout • Guideline for R-W-D : http://j.mp/eWEYIJ Phone Tablet Netbook / Tablet Desktop
  • 25. http://MediaQueri.es a collection of responsive web designs
  • 30. Device APIs Camera Filesystem Acclerometer Web Browser Contacts Device Messaging Orientation Device Web App API Calendar Developer Tasks Geolocation Javascript Hybrid Gallery Device Device Status Interaction • WAC (Wholesale Application Community) • 40 / : BONDI + JIL ~= Waikiki Beta • W3C DAP ( Device API )
  • 31. WAC Schedule 2011 2010 2011 07 11 02 05 09 WAC WAC API Beta WAC Demo WAC 2.0 WAC 3.0 @MWC Enabled Device Network APIs 12 05 K-WAC K-WAC Enabled Device • WAC Enabled Device ✓ Galaxy S 2 , Bada 2 .. • Device Web App
  • 32. Native Vs. Web Vs. Hybrid
  • 35. Hybrid App • Native + Web Device OS Native App / Hybrid framework Web Browser Web Server • Multi Device • Web Application Web css/js/html Application • Device • • Web • ?
  • 36. Hybrid App Native Hybrid Web Native WebView Hybrid Frameworks Appspresso / Phonegap Titanium
  • 37. Hybrid • Native + WebView : Native WebView ★ iPhone ✓ Javascript Objective-C : Custom URL Scheme ( gap:// ) ✓ WebView Javascript Injectin : stringByEvaluatingJavascriptFromString() ✓ Click Hooking : shouldStartLoadWithRequest() ★ Android ✓ WebView : addJavascriptInterface •★ Appspresso / Phonegap Web App Native App ★ Device Framework Javascript •★ Titanium ( Appcelerator ) Web Native App ★ Device ( Javascript )
  • 38. Hybrid Web App Device OS • Native App + Web App Hybrid framework Web Browser Web Application Web Device css/js/html • Hybrid Frameworks Phonegap Appspresso Titanium Mobile
  • 39. Appspresso • Mobile App Builder by Hybrid Web App : iOS , Android .. Device API : WAC API ( Waikiki ) Powered By iOS Android Native Plugin : Plugin Development Kit • HTML5 Web App Touch UI : Sencha , jQueryMobile , JoApp JJ - Javascript MVC Framework ( Ruby On Rails )
  • 40. Write Once Appspresso Sell Anywhere Win/Mac Touch UI Framework Android / iOS App Build
  • 41. Web Tech 2011 • HTML5 • Device ➠ Web App • Javascript Hot ! • Responsive Web Design • Web App Store • Device API • Hybrid • Hybrid Web App
  • 42. ! 권정혁/구루