Your SlideShare is downloading. ×
2011 Mobile & Web technologies
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

2011 Mobile & Web technologies

15,807
views

Published on

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

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
15,807
On Slideshare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
0
Comments
2
Likes
43
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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 APIWeb 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 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. 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. http://MediaQueri.es a collection of responsive web designs
  • 26. ChromeWebStore
  • 27. MozillaWebAppStore
  • 28. GetJar
  • 29. iPadificationoftheWeb
  • 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 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. Native Vs. Web Vs. Hybrid
  • 33. Native App
  • 34. Web App
  • 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 OnceAppspresso 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. ! 권정혁/구루

×