HTML5 & Smart TV

Jonghong JeonETRI, SRC

Email: hollobit@etri.re.kr 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

hollobit@etri.re.kr

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

hollobit@etri.re.kr

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

hollobit@etri.re.kr

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="jonathan@example.com">

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 (hollobit@etri.re.kr)+82-42-860-5333

Blog : http://mobile2.tistory.com/mhttp://twitter.com/hollobit

OR