html5 and smart tv
DESCRIPTION
5์31์ผ ๊ณผํ๊ธฐ์ ํ๊ด์์ ์ด๋ ธ๋ ์ ์๊ณตํํ ์ฃผ๊ด์ ์ค๋งํธ TV ์ปจํผ๋ฐ์ค์์ ๋ฐํํ ๋ด์ฉ์ ๋๋ค.TRANSCRIPT
HTML5 & Smart TV
Jonghong JeonETRI, SRC
Email: [email protected] Blog: http://mobile2.tistory.com
http://twitter.com/hollobit
http://www.etri.re.kr
2
TV, Internet and Web
Internet Internet
Email, Web
Internet
Platform
Web App.
Marketplace
Web engine
Widget
3
Why Web ?
Easy User InterfaceWeb contents, services and Apps Easy Development
4
Evolution of World Wide Web
5
Evolution of World Wide Web
Web Document
์น์ฌ์ดํธ์์๋, HTML๊ณผ WAP
Web Services
์น์๋น์ค์์๋
Open Web
์น 2.0, ์น ํ๋ซํผ์๋
Web App & APIs
์น ์ฑ์์๋, ๋ชจ๋ฐ์ผ๊ณผN-Screen ์๋
1989 2000 2005 2010
6
Evolution of World Wide Web
1๋จ๊ณ (1989~1999) : ์น์ฌ์ดํธ์์๋, HTML๊ณผ WAP HTML, URL, HTTP ๋ผ๋ ์ธ ๊ฐ์ง ๊ธฐ์ ์ ๊ธฐ์ดํ ์น ๊ธฐ์ ์ด ์ ์๋๊ณ , ๋ณด๋ค
๋์ ์ธ๊ฐ ์ค์ฌ์ ์ ๋ณด์ฒ๋ฆฌ ๋ฐ ์ง์๊ณต์ ๋ฑ์ ๋ชฉํ๋ก ํ๋ ๋จ๊ณ
2๋จ๊ณ (2000~2004) : XML๊ณผ ์น์๋น์ค, ์๋งจํฑ ์น XML(eXtensible Markup Language)์ ๊ธฐ๋ฐํ๋ฉฐ ์ธ๊ฐ ์ค์ฌ์ ์ ๋ณด ์ฒ๋ฆฌ๋ฟ ์
๋๋ผ ๋ค์ํ ๋๋ฐ์ด์ค์ ์๋น์ค, ๋ฉํฐ๋ฏธ๋์ด๋ฅผ ์ฐ๊ฒฐํ๋ ๊ฒ์ ๋ชฉํ๋ก ํ๋๋จ๊ณ
3๋จ๊ณ (2005~2009) : ์น 2.0, ์น ํ๋ซํผ์๋์์ฑ์ฅ ๊ตฌ๊ธ, ์๋ง์กด, ์ํคํผ๋์ ๋ฑ์ ์ฑ๊ณต๊ณผ ํจ๊ป ์น ์ฐ์ ์ ์ 2์ ์ ์ฑ๊ธฐ๋ก ์ด
๋๋ฉฐ ๋ค์ํ ์ ๊ท ์๋น์ค๊ฐ ๋ฑ์ฅํ ์ ์๋ ๊ธฐ๋ฐ์ ๋ง๋ จ
4๋จ๊ณ (2010~ํ์ฌ) : ์น ์ฑ์ ์๋, ๋ชจ๋ฐ์ผ๊ณผ N-Screen ์๋ ์ค๋งํธ ํฐ ๋ฐ ํ๋ธ๋ฆฟ ๋ฑ ๋ค์ํ ๋ชจ๋ฐ์ผ ๊ธฐ๊ธฐ๋ค์ ๋์์ผ๋ก HTML5์ Web
API๋ฅผ ํตํด ํ ๋จ๊ณ ์งํ๋ ์น ์์ฉ ํ๊ฒฝ์ ์ ๊ณตํ๋ฉฐ, ์์น์ ๋ณด ๋ฐ ์์ ์ ๋ณด ๋ฑ์ ๊ฒฐํฉํ๋ ํตํฉ ์์ฉ ํ๋ซํผ์ผ๋ก์ ์น์ด ์๋ฆฌ์ก์ ๊ฐ๋ ๋จ๊ณ
7
Evolution of World Wide Web
http://evolutionofweb.appspot.com/
8
Screen Convergence
9
Fragmentation is a big problem
Fragmentations
Device
Screen
Platform
Service
Application
Content
10
Solution ?
Fragmentations
Device
Screen
Platform
Service
Application
Content
11
Solution
12
HTML5๋ฅผ ๋ฐ๋ผ๋ณด๋ 5๊ฐ์ง ๊ด์
์ฐจ์ธ๋ ์น ๊ธฐ์ ์ ์ดํฉ์ ๊ด์ ์ผ๋ก HTML5
๋จ๋ง, ํ๋ซํผ, ์คํฌ๋ฆฐ์ ๊ฒฝ๊ณ๊ฐ ์๋๋ก ํ๋ HTML5
์๋ก์ด ์ฑ๊ณผ SW ํ๊ฒฝ์ผ๋ก์์ HTML5
๋ชจ๋ ์ ๋ณด, ์๋น์ค์ ์ฌ๋ฌผ์ ๋ฌถ๋ ๊ด์ ์ผ๋ก HTML5
์ธํ๋ผ์ ํ๋ซํผ์ผ๋ก์์ HTML5
13
HTML5์ ๋ํ ์์ ์ฆ๊ฐ
14
HTML5 ๊ด๋ จ ๋น์ฆ๋์ค ์์ญ
15
HTML5 ?
HTML5๋ก ํต์นญ๋๋ ์์๋ HTML5 ๋ฟ ์๋๋ผ CSS3, ์น ์ดํ๋ฆฌ์ผ์ด์ ์ ์ํ JavaScript API ํ์ฅ์ ํฌํจํ ๊ฒ
ํต์นญ๋๋ โHTML5โ
HTML5์ฝํ ์ธ ๋ด์ฉ๊ณผ ํ์์ ํํ
CSS3์ฝํ ์ธ ํํ ๋ฐฉ๋ฒ์ ์ ์
JavaScript๊ฐ์ข API๋ฅผ ํตํด
๊ธฐ๋ฅ์ ํํ
๋ฌธ์ ๊ตฌ์กฐ์ ์๋ฏธ๋ฅผ ๋ช ํํ ํ์ฌ๋์์ธ๊ณผ ํ๋ก๊ทธ๋จ์ ๋ ๋ฆฝ์ฑ์ ํ๋ณด
์๋ก ๋ค๋ฅธ ๋ค์ํ ๋ธ๋ผ์ฐ์ ์์์์ผ๊ด๋ ํํ ๊ธฐ๋ฅ ์ ๊ณต, ํจ๊ณผ์ ์ด๊ณ ํธ
๋ฆฌํ ํํ ๋ฐฉ์์ ๋ณ๊ฒฝ
ํ๋ถํ ๊ธฐ๋ฅ๊ณผ ์์์ ์ ์ดํ ์์๋ ๋ก์ปฌ ์ดํ๋ฆฌ์ผ์ด์
๋ฌธ์๊ตฌ์กฐ์ ์์ธํ ๋ฉํฐ๋ฏธ๋์ด ํผ๊ณผ ์ด๋ฒคํธ ๋ฑ
ํํ ๊ธฐ๋ฅ ๋ชจ๋ํ ์น ํฐํธ
Web Storage Web Worker Web Socket Geolocation API
16
HTML5 ?
Web Application์ HTML, CSS, JavaScript์ ํ์ฃผ๊ณก
ํต์นญ๋๋ โHTML5โ
HTML5์ฝํ ์ธ ๋ด์ฉ๊ณผ ํ์์ ํํ
CSS3์ฝํ ์ธ ํํ ๋ฐฉ๋ฒ์ ์ ์
JavaScript๊ฐ์ข API๋ฅผ ํตํด
๊ธฐ๋ฅ์ ํํ
๋ฌธ์ ๊ตฌ์กฐ์ ์๋ฏธ๋ฅผ ๋ช ํํ ํ์ฌ๋์์ธ๊ณผ ํ๋ก๊ทธ๋จ์ ๋ ๋ฆฝ์ฑ์ ํ๋ณด
์๋ก ๋ค๋ฅธ ๋ค์ํ ๋ธ๋ผ์ฐ์ ์์์์ผ๊ด๋ ํํ ๊ธฐ๋ฅ ์ ๊ณต, ํจ๊ณผ์ ์ด๊ณ ํธ
๋ฆฌํ ํํ ๋ฐฉ์์ ๋ณ๊ฒฝ
ํ๋ถํ ๊ธฐ๋ฅ๊ณผ ์์์ ์ ์ดํ ์์๋ ๋ก์ปฌ ์ดํ๋ฆฌ์ผ์ด์
๋ฌธ์๊ตฌ์กฐ์ ์์ธํ ๋ฉํฐ๋ฏธ๋์ด ํผ๊ณผ ์ด๋ฒคํธ ๋ฑ
ํํ ๊ธฐ๋ฅ ๋ชจ๋ํ ์น ํฐํธ
Web Storage Web Worker Web Socket Geolocation API
17
HTML5 ?
18
HTML5์ ์ฃผ์ ํน์ง
Offline / Storage Web SQL Database Local Storage IndexedDB Application Cache
Realtime / Communication Web Workers Web Socket Web Notifications
File / Hardware Access Native Drag & Drop Desktop Drag-In (File API) Desktop Drag-Out FileSystem APIs Geolocation Device Orientation Speech Input
Semantics & Markup Better semantic tags Markup for applications Descriptive link relations Microdata ARIA attributes
Web Form Graphics / Multimedia
<Video> / <Audio> Canvas 2D Canvas 3D (WebGL) Inline SVG
CSS3 CSS Selectors Web Fonts
Nuts & Bolts History API
19
HTML5: Web Development to the next level
http://slides.html5rocks.com/
20
HTML5 ํ์คํ
21
W3C HTML5 Roadmap
22
HTML5 & Web App Technology Timeline
CSS1
Javascript
CSS2 CSS3
DOM1 DOM2 DOM3 DOM4
2010 2011
AJAXHTTP
Canavs Web Workers AppCache
W3C
Web App.
Specs.
XHR2
WebGLGeolocation FileAPI
WebFontAudio/Video
Web form
2012 2013
HTML5 Working Draft
23
HTML5 Standardization - W3C HTML WG
The W3C HTML WG is scheduled to finish the Recommendation of the HTML5 specs in Q2 2014. The HTML WG is scheduled to publish a Candidate Recommendation of
the HTML5 spec in mid- to late-2012.Specification FPWD WD LCWD CR PR REC
1 HTML5 2007 2010 2011.05 2012 Q2 2014 Q1 2014 Q22 HTML+RDFa 1.1 2009 2010 2011.05 2012 Q2 2014 Q1 2014 Q23 HTML Microdata 2009 2010 2011.05 2012 Q2 2014 Q1 2014 Q24 HTML Canvas 2D Context 2008 2010 2011.05 2012 Q2 2014 Q1 2014 Q2
5Polyglot Markup: HTML-CompatibleXHTML Documents
2010 2010 2011.05 2012 Q2 2014 Q1 2014 Q2
6HTML5: Techniques for providinguseful text alternatives
2010 2010 2011.05 2012 Q2 2014 Q1 2014 Q2
7HTML to Platform Accessibility APIsImplementation Guide
2011 2012.03 2012 Q1 2012 Q2 2014 Q1 2014 Q2
8 HTML5 differences from HTML4 2008 2011.05 2012 Q1 2012 Q2 2014 Q1 2014 Q29 HTML5: Edition for Web Authors 2011 2011.08 2012 Q1 2012 Q2 2014 Q1 2014 Q210 HTML: The Markup Language 2010 2011.03 2012 Q1 2012 Q2 2014 Q1 2014 Q2
FPWD:First Public Working Draft LCWD: Last Call Working Draft PR: Proposed RecommendationWD: Working Draft CR : Candidate Recommendation REC: Recommendation
24
HTML5 Testing Task Force Status
25
W3C Web App. & Web API Standardization Web App WGโs status
Name of Specification Last Publication ED FPWD WD LCWD CR PR REC
Clipboard APIs and Events 2012-02-23Cross-Origin Resource Sharing (CORS) 2010-07-27DOM Level 3 Events 2011-05-31DOM4 2012-01-05Element Traversal 2008-12-22File API 2011-10-20File API: Directories and System 2011-04-19File API: Writer 2011-04-19From-Origin Header 2011-07-21HTML5 Web Messaging 2012-03-03Indexed Database API 2011-12-06Java bindings for Web IDL 2012-02-07Progress Events 2011-09-22Selectors API 2009-12-22Selectors API Level 2 2010-01-19Server-Sent Events 2011-10-20Shadow DOM
Uniform Messaging Policy (UMP) 2010-01-26Web IDL 2012-02-07Web Sockets API 2011-12-08Web Storage 2011-12-08Web Workers 2012-03-13XBL2 Primer 2007-07-18XBL2 Spec 2007-03-16XmlHttpRequest (Level 2) 2012-01-17
FPWD:First Public Working Draft LCWD: Last Call Working Draft PR: Proposed RecommendationWD: Working Draft CR : Candidate Recommendation REC: Recommendation
26
Toward the Advanced Web App
Why HTML5 is important for N-Screen ?
28
[1] Multi Device & platform support
29
[2] Multi Screen & resolution support
30
[3] Platform FragmentationNative App
ํน์ ๋ชจ๋ฐ์ผ ๋จ๋ง ๋ฐ ํ๋ซํผ์ ๋ง๊ฒ ๊ฐ๋ฐ๋๋ฉฐ, ๋ค์ด๋ก๋๋ฐ ์ค์น๊ฐ ๋์ด์ผ ํจ
HTML5 Web Application๋ธ๋ผ์ฐ์ ๋ฅผ ํตํด ์ ์ํ๋ฉฐ, ์ค์น์ ์ ๋ฐ์ดํธ ๋ถํ์
Portability๊ฐ ํ๋ซํผ์ ํฌํ ํด์ผ ํจ(iPhone, BlackBerry, Android, Palm and the list goes onโฆ)
ํ์ค ์น๋ง ๊ฐ๋ฐํ๋ฉด ์ด๋์๋ ๋ณผ ์ ์์
Hyper Links์ธ๋ถ ๋งํฌ๋ฅผ ํตํ ๋ธ๋ผ์ฐ์ ํธ์ถ์ ๊ฐ๋ฅํ์ง๋ง, ๋ด๋ถ ๋งํฌ๋ ๋ถ๊ฐ๋ฅํ๊ณ , ์ฑ ๊ฐ ํธ์ถ์ ๋ณด์ ์ ์ฝ์ด ์์
์ด๋ค ๋ถ๋ถ์ด๊ฑด ๋งํฌ๋ก ์ฐ๊ฒฐ ๊ฐ๋ฅ
Discoverability ์ฑ์คํ ์ด ํ๋ณด์ ๋ง์ผํ ์ ์ํ ๋น์ฉ์ด ํ์๊ฒ์ ์ฌ์ดํธ, ์ด๋ฉ์ผ ํ๋ณด, ํธ์ํฐ ๋งํฌ ๋ฑ์ผ๋กํ๋ณด ๊ฐ๋ฅ
Distribution & Market Size
ํ๋ซํผ๊ณผ ๋จ๋ง์ ์ข ๋ฅ์ ํ๊ณ๊ฐ ์์ผ๋ฉฐ, ์์ ๋ถ๋ถ์ ์๋๊ฒ๊ณผ ํ์ ๋ด์ฉ๊ณผ ์ฐจ๋ณํ ๋จ
๋๊ตฌ๋ ์ ์ ๊ฐ๋ฅ
Usage of Device Capabilities
๋จ๋ง์ ๋ชจ๋ ๊ธฐ๋ฅ ์ ์ด ๊ฐ๋ฅ(GPS, camera, voice, RFID, address book, calendar, etc.)
ํ์ฌ๋ ๋ถ๊ฐ๋ฅ (HTML์ Device API ํ์คํ๋ฅผํตํด 2011๋ ๋ถํฐ ๊ฐ๋ฅํ ๊ฒ์ผ๋ก ์ ๋ง)
Supportability & Upgradeability
์ฑ์ด ๋ค์ด๋ก๋ ๋๊ณ ๋๋ฉด, ์ง์์ ์ด๋ ค์์ด ์์. ๋ฒ๊ทธ๊ฐ์๋ ๋ถ๋ถ์ ๋ํด์๋ ๋ค์ ๋ฑ๋กํ๊ณ ๋ชจ๋์๊ฒ ์ฌ๋ค์ด๋ก๋ ๋ฐ์ผ๋ผ๊ณ ํด์ผ ํจ
์ฌ์ดํธ๋ฅผ ์์ ํ๋ฉด ์ธ์ ๋ ๋ฐ๋ก ์ ๋ฐ์ดํธ
Entry Costs์ฑ์คํ ์ด ๊ฐ๋ฐ์ ๋ฑ๋ก ๋น์ฉ์ด ํ์ (Apple charges developers $99 and enterprises $299, RIM charges $200 )
์์
Revenue Share์ฑ์คํ ์ด๋ฅผ ํตํด ํ๋งค์ ์์ต ๊ณต์ (Apple takes 30%, RIM takes 20%)
๋ชจ๋ ๋ด๊บผ
User Experience ํ๋ถํ ์ฌ์ฉ์ ์ธํฐํ์ด์ค ์ ๊ณต์ด ๊ฐ๋ฅ HTML/CSS/JavaScript ๋ฑ์ ๊ธฐ๋ฅ์ ์ํด ํ์ ๋จ
Performance ๋ฐ์ด๋๋ฆฌ ์ฝ๋๋ก ์คํ๋๋ฏ๋ก ์๋๊ฐ ๋น ๋ฆ๋คํธ์์ ๊ฑฐ์น๋ฉฐ, ์๋ฒ์์ ์ ๊ณต๋๊ณ , ๋ธ๋ผ์ฐ์ ๋ฅผ ํตํด ์ฒ๋ฆฌ๋๊ธฐ์ ์ฑ๋ฅ ๋ณ๋ํญ์ด ํผ
Offline Browsing ๋ก์ปฌ ์ ์ฅ์๋ฅผ ์ด์ฉํด ๊ฐ๋ฅHTML5์ App Cache ๊ธฐ๋ฅ์ ์ด์ฉํด ๊ตฌํํด์ผ์ง๋ง ๊ฐ๋ฅ
31
[4] โ Standards - HTML5 ์ง์ ํํฉ
Source: http://html5test.com/results.html
32
[5] โ The Web as an application platform
Standards for Web Applications on Mobile: February 2012 current state and roadmap http://www.w3.org/2012/02/mobile-web-app-state/
33
[6] โ New Chances โ UI ๊ฐ์
HTML5 ์ ์๋ก์ด input type๋ค Search, tel, url, email datetime, date, month, week, time, and datetime-local Number, range, Color
Mobile Safari (on the iPhone)์ number, email, url ์ง์์ ์ถ๊ฐ
Chrome 5 beta ์์ placeholder attribute๋ฅผ ์ง์
<label for="email">Email address</label> <input id=โemailโ type="email" placeholder="[email protected]">
34
[7] โ New Chancesโ Web App Store
DeviceClient
Server
App Store
Devices
Browser
Any Devices(PC, TV, Car, Tabletโฆ)
Browser
NativeAppp
FrontStoreServer
NativeApp
FrontWeb
Server
WebApp
WebApp Store
NativeApp
WebApp Store
WebApp Store
Cloud
35
W3C Activity โ Web and TV
Web and TV 1st Workshop : 2-3 September 2010, W3C/Keio, Tokyo, Japan
โข http://www.w3.org/2010/09/web-on-tv/โข http://www.w3.org/2010/09/web-on-tv/summary.html
2nd Workshop : 8-9 February 20, Fraunhofer-FOKUS, Berlin, Germanyโข http://www.w3.org/2010/11/web-and-tv/โข http://www.w3.org/2010/11/web-and-tv/summary.html
3rd Workshop : 19-20 September, Hollywood, California, USAโข http://www.w3.org/2011/09/webtv/
36
W3C Activity โ Web and TV
http://www.w3.org/2011/09/webtv/slides/IG_Overview.pdf
37
W3C Activity โ Web and TV
38
Web and TV IG
End Date : 30 November 2012 http://www.w3.org/2011/webtv/
TFs Home Network TF (End Date: 31 August 2011)
โข Home Network TF Requirementsโ http://www.w3.org/TR/2011/NOTE-hnreq-20111201/
Media Pipeline Task Force โข MPTF Requirements for Adaptive Bit Rate Streaming
โ http://dvcs.w3.org/hg/webtv/raw-file/tip/mpreq/MPTF-ADB-Requirements.html
โข MPTF Requirements for Content Protectionโ http://dvcs.w3.org/hg/webtv/raw-file/tip/mpreq/MPTF-CP-Requirements.html
Web Media Profile Task Force โข Web Media Profile
โ http://dvcs.w3.org/hg/webtv/raw-file/tip/media-profile/Overview.html#css
New TFs under consideration Emergency Information Task Force (aka. Disaster Prevention and Response Task Force) SocialTV Task Force
39
Related Activity
HTML WG Member proposal
โข Encrypted Media Extensions v0.1โ http://dvcs.w3.org/hg/html-media/raw-file/tip/encrypted-media/encrypted-
media.html
โข Media Source Extensions v0.5โ http://dvcs.w3.org/hg/html-media/raw-file/tip/media-source/media-source.html
Device APIs WG Device API for TV
Web Apps WG Web Notification Web Intents
Web RTC WG
40
Interoperability
http://visual.ly/idc-next-level-mobile-web
41
HTML5๋ ์ค๋งํธTV์ ๋๋ ฅ์ด ๋ ์ ์์๊น ?
์ฌ๋๋ค์ด TV๋ก ๋ธ๋ผ์ฐ์ง์ ํ ๊น ? ํ๋ธ๋ฆฟ๋ ์๊ณ , ์ค๋งํธํฐ๋ ์๋๋ฐ ? ๋ฏธ๊ตญ๋ด
TV ์์ฒญ์คํ๋ธ๋ฆฟ ์ฌ์ฉ
85%
42
HTML5๋ ์ค๋งํธTV์ ๋๋ ฅ์ด ๋ ์ ์์๊น ?
์๋ก์ด ๋ง์ ๋์งํธ ๋ฏธ๋์ด๋ค์ ๋ฑ์ฅ. ์ฌ์ฉ์์ attention์ ์ป์ ์ ์์๊น ?
43
HTML5๋ ์ค๋งํธTV์ ๋๋ ฅ์ด ๋ ์ ์์๊น ?
์ ์์ธต์ TV ์์ฒญ๋ฅ ์ ์ง์์ ํ๋ฝ์ค
44
HTML5๋ ์ค๋งํธTV์ ๋๋ ฅ์ด ๋ ์ ์์๊น ?
์ ํ์ ์ iPad๋ฅผ ๋ง๋ค์์๊น ?
TV๋ 10๋ ๊ฐ 1์ต๋ ์ฑ์ฅ ํ๋ธ๋ฆฟ 4๋ ๊ฐ 3.5์ต๋
45
HTML5๋ ์ค๋งํธTV์ ๋๋ ฅ์ด ๋ ์ ์์๊น ?
๊ธฐ์กด ๊ฑฐ์ค TV ์ค์ฌ์ ์๊ฐ์์ ๋ฒ์ด๋
์๋ก์ด ์ ๊ทผ์ด ํ์ !!
TV ๊ณต๊ธ์ ์ค์ฌ์ด ์๋
์๋น์ ์ค์ฌ์ ์ ๊ทผ์ด ํ์ !!
46
Conclusions
HTML5๋ ์ ๋ถ๊ฐ ์๋ ์ฐจ์ธ๋ ์น ๊ธฐ์ ์ ์ผ๋ถ
HTML5๋ ์ฝํ ์ธ ๊ฐ ์๋ ์์ฉ ๊ธฐ์
HTML5 ๊ท๊ฒฉ๋ง์ด ์๋ ๋ค์ํ ์น ํ์ค ๊ณ ๋ ค ํ์
TV ์ํ๊ณ๊ฐ ์๋ ์น์ ์ํ๊ณ๋ก ์ ๊ทผํด์ผ
๊ณต๊ธ์ ๊ด์ ์ด ์๋ ์์์ ๊ด์ ํ์
ํ์์ ์ํ๊ณ๊ฐ ์๋ ๊ฐ๋ฐฉํ ์ํ๊ณ๋ก ์ ํ ํ์
47
Thank youFor more discussion :
JongHong Jeon ([email protected])+82-42-860-5333
Blog : http://mobile2.tistory.com/mhttp://twitter.com/hollobit
OR