The document discusses the importance of HTML5 for mobile technology, highlighting its role as a future platform across various operating systems and mobile frameworks. It emphasizes the need for responsive web design, JavaScript application frameworks, and tools for mobile web development. Additionally, it provides resources for further learning about HTML5 and related 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

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 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

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 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. !
권정혁/구루