2011 Mobile & Web technologies

16,837 views

Published on

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

Published in: Technology
2 Comments
43 Likes
Statistics
Notes
  • who are there?
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • 모바일 정리 잘되어 있음
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
16,837
On SlideShare
0
From Embeds
0
Number of Embeds
5,470
Actions
Shares
0
Downloads
0
Comments
2
Likes
43
Embeds 0
No embeds

No notes for slide

2011 Mobile & Web technologies

  1. 1. 웹모바일 기술전망 2011 ( @xguru )
  2. 2. •권정혁 ➡ 기술전략팀장 - SW Architect - Developer Evangelist ➡ http://xguru.net ➡ @xguru ➡ guru@xguru.net
  3. 3. 2010 was year of HTML5 ReadWriteWeb - “Top Trends of 2010 : HTML5”
  4. 4. HTML5 ?HTML5 ~= HTML + CSS + JS APIWeb Desktop App ➠ Web App
  5. 5. Web App ? ➠ ➠모바일
  6. 6. 왜HTML5가모바일에중요한가? 각모바일플랫폼용네이티브앱 iOS, Android, WP7, BlackBerry, Symbian, Bada .. 7개의플랫폼을작업 HTML5가미래의플랫폼이다. FacebookCTOBretTaylor 모든플랫폼을네이티브로지원 예산이모자르다 GoogleVPVicGundotra
  7. 7. 기관 App 제작비용 다운로드 특허청 특허정보검색 2억6600만원 833건 전라남도 U남도여행길잡이 3억원 6600건 : http://j.mp/korgovapp
  8. 8. Devices 2011 BB PlayBook HP WebOS CR-48 MS WP7 with iOS Android Nokia
  9. 9. Web Tech 2011
  10. 10. HTML5,CSS3 Javascript!!! ResponsiveWebDesign WebAppStores DeviceAPI HybridAppCrossPlatform
  11. 11. HTML(5) Offline Device 3D , 2D Performance Semantics Multi Media Connectivity CSS3 Storage Access Graphics Effects Integration
  12. 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. 13. HTML5 Android RIM webOS iOS 3+ 2011 3Q 2.0+ OS6+ 1.4+ 6 7 8 9 3+ 6+ 4+ 10+
  14. 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. 15. HTML5 Initializer • http://initializr.com/ • HTML5 Boilerplate • jQuery • Modernizer / HTML5shiv •
  16. 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. 17. Javascript !!! • • Javascript Library for Mobile • UI Frameworks • Application Frameworks • Server-side JavaScript • Languages that Compiles to JS
  18. 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. 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. 20. Javascript Application Frameworks •데스크탑수준의WebApplication작성 ✓ ✓ ✓ •Javascript기반WebFramework ✓ ✓ ✓ JJ-JavascriptAppFramework
  21. 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. 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. 23. CoffeeScript http://coffeescript.com • Javascript : coffee -c hello.coffee ➠ hello.js • ; { , , Inspired by Python Rubynumber = 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. 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/eWEYIJPhone Tablet Netbook / Tablet Desktop
  25. 25. http://MediaQueri.es a collection of responsive web designs
  26. 26. ChromeWebStore
  27. 27. MozillaWebAppStore
  28. 28. GetJar
  29. 29. iPadificationoftheWeb
  30. 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. 31. WAC Schedule 2011 2010 2011 07 11 02 05 09WAC 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. 32. Native Vs. Web Vs. Hybrid
  33. 33. Native App
  34. 34. Web App
  35. 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. 36. Hybrid App Native Hybrid Web Native WebView Hybrid Frameworks Appspresso / Phonegap Titanium
  37. 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. 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. 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. 40. Write OnceAppspresso Sell Anywhere Win/Mac Touch UI Framework Android / iOS App Build
  41. 41. Web Tech 2011• HTML5• Device ➠ Web App• Javascript Hot !• Responsive Web Design• Web App Store• Device API• Hybrid• Hybrid Web App
  42. 42. ! 권정혁/구루

×