More Related Content Similar to 2011 Mobile & Web technologies (20) More from JungHyuk Kwon (8) 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”
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
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)
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
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
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 )
41. Web Tech 2011
• HTML5
• Device ➠ Web App
• Javascript Hot !
• Responsive Web Design
• Web App Store
• Device API
• Hybrid
• Hybrid Web App