HTML5 and Smart TV

HTML5 & Smart TV

Jonghong Jeon
ETRI, SRC

Email: hollobit@etri.re.kr
Blog: http://mobile2.tistory.com
http://twitter.com/hollobit

http://www.etri.re.kr

TV, Internet and Web

Internet
Internet Internet
Platform
Web engine
Email, Web
Widget Web App.

Marketplace

2

Why Web ?
 Easy User Interface
 Web contents, services and Apps
 Easy Development

3

Evolution of World Wide Web

4

1989 2000 2005 2010

Web Document Web Services Open Web Web App & APIs

웹사이트의 시대, 웹서비스의 시대 웹 2.0, 웹 앱의 시대,
HTML과 WAP 웹 플랫폼 시대 모바일과
N-Screen 시대

5

 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를 통해 한 단계 진화된 웹 응용 환경을 제공하며, 위치정보 및 소셜 정
보 등을 결합하는 통합 응용 플랫폼으로서 웹이 자리잡아 가는 단계

6


http://evolutionofweb.appspot.com/

7

Fragmentation is a big problem

Device

Content Screen

Fragmentations

Application Platform

Service

9

Solution ?

Device

Content Screen

Fragmentations

Application Platform

Service

10

HTML5를 바라보는 5가지 관점
차세대 웹 기술의 총합의 관점으로 HTML5

단말, 플랫폼, 스크린의 경계가 없도록 하는 HTML5

새로운 앱과 SW 환경으로서의 HTML5

모든 정보, 서비스와 사물을 묶는 관점으로 HTML5

인프라와 플랫폼으로서의 HTML5

12

HTML5에 대한 수요 증가

13

HTML5 관련 비즈니스 영역

14

HTML5 ?
 HTML5로 통칭되는 요소는 HTML5 뿐 아니라 CSS3, 웹 어플리케
이션을 위한 JavaScript API 확장을 포함한 것

통칭되는 “HTML5”

HTML5 CSS3 JavaScript
콘텐츠 내용과 형식을 표현 콘텐츠 표현 방법을 정의 각종 API를 통해
기능을 표현
 Web Storage
 문서구조의 상세화
 표현 기능 모듈화  Web Worker
 멀티미디어
 웹 폰트  Web Socket
 폼과 이벤트 등
 Geolocation API

서로 다른 다양한 브라우저 상에서
문서 구조의 의미를 명확히 하여 풍부한 기능과 자원을 제어할 수
일관된 표현 기능 제공, 효과적이고 편
디자인과 프로그램의 독립성을 확보 있는 로컬 어플리케이션
리한 표현 방식의 변경

15

HTML5 ?
 Web Application은 HTML, CSS, JavaScript의 협주곡

통칭되는 “HTML5”

HTML5 CSS3 JavaScript
콘텐츠 내용과 형식을 표현 콘텐츠 표현 방법을 정의 각종 API를 통해
기능을 표현
 Web Storage
 문서구조의 상세화
 표현 기능 모듈화  Web Worker
 멀티미디어
 웹 폰트  Web Socket
 폼과 이벤트 등
 Geolocation API

서로 다른 다양한 브라우저 상에서
문서 구조의 의미를 명확히 하여 풍부한 기능과 자원을 제어할 수
일관된 표현 기능 제공, 효과적이고 편
디자인과 프로그램의 독립성을 확보 있는 로컬 어플리케이션
리한 표현 방식의 변경

16

HTML5의 주요 특징
 Offline / Storage  Semantics & Markup
 Web SQL Database  Better semantic tags
 Local Storage  Markup for applications
 Descriptive link relations
 IndexedDB
 Microdata
 Application Cache
 ARIA attributes
 Realtime / Communication
 Web Form
 Web Workers
 Graphics / Multimedia
 Web Socket
 <Video> / <Audio>
 Web Notifications
 Canvas 2D
 File / Hardware Access  Canvas 3D (WebGL)
 Native Drag & Drop  Inline SVG
 Desktop Drag-In (File API)
 CSS3
 Desktop Drag-Out
 CSS Selectors
 FileSystem APIs
 Web Fonts
 Geolocation
 Device Orientation  Nuts & Bolts
 Speech Input  History API
18

HTML5: Web Development to the next level

http://slides.html5rocks.com/

19

HTML5 & Web App Technology Timeline

2010 2011 2012 2013

HTML5 Working Draft

Canavs Web Workers AppCache

Web form Geolocation FileAPI
W3C WebGL
Audio/Video WebFont
Web
App.
DOM1 DOM2 DOM3 DOM4
Specs.

CSS1 CSS2 CSS3
HTTP Javascript AJAX hollobit@etri.re.kr XHR2

22

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 Q2
2 HTML+RDFa 1.1 2009 2010 2011.05 2012 Q2 2014 Q1 2014 Q2
3 HTML Microdata 2009 2010 2011.05 2012 Q2 2014 Q1 2014 Q2
4 HTML Canvas 2D Context 2008 2010 2011.05 2012 Q2 2014 Q1 2014 Q2
Polyglot Markup: HTML-Compatible
5 2010 2010 2011.05 2012 Q2 2014 Q1 2014 Q2
XHTML Documents
HTML5: Techniques for providing
6 2010 2010 2011.05 2012 Q2 2014 Q1 2014 Q2
useful text alternatives
HTML to Platform Accessibility APIs
7 2011 2012.03 2012 Q1 2012 Q2 2014 Q1 2014 Q2
Implementation Guide
8 HTML5 differences from HTML4 2008 2011.05 2012 Q1 2012 Q2 2014 Q1 2014 Q2
9 HTML5: Edition for Web Authors 2011 2011.08 2012 Q1 2012 Q2 2014 Q1 2014 Q2
10 HTML: The Markup Language 2010 2011.03 2012 Q1 2012 Q2 2014 Q1 2014 Q2
hollobit@etri.re.kr
FPWD:First Public Working Draft LCWD: Last Call Working Draft PR: Proposed Recommendation
WD: Working Draft CR : Candidate Recommendation REC: Recommendation
23

HTML5 Testing Task Force Status

24

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-23
Cross-Origin Resource Sharing (CORS) 2010-07-27
DOM Level 3 Events 2011-05-31
DOM4 2012-01-05
Element Traversal 2008-12-22
File API 2011-10-20
File API: Directories and System 2011-04-19
File API: Writer 2011-04-19
From-Origin Header 2011-07-21
HTML5 Web Messaging 2012-03-03
Indexed Database API 2011-12-06
Java bindings for Web IDL 2012-02-07
Progress Events 2011-09-22
Selectors API 2009-12-22
Selectors API Level 2 2010-01-19
Server-Sent Events 2011-10-20
Shadow DOM
Uniform Messaging Policy (UMP) 2010-01-26
Web IDL 2012-02-07
Web Sockets API 2011-12-08
Web Storage 2011-12-08
Web Workers 2012-03-13
XBL2 Primer 2007-07-18
XBL2 Spec 2007-03-16
XmlHttpRequest (Level 2) 2012-01-17 hollobit@etri.re.kr
FPWD:First Public Working Draft LCWD: Last Call Working Draft PR: Proposed Recommendation
WD: Working Draft CR : Candidate Recommendation REC: Recommendation
25

Toward the Advanced Web App

26

Why HTML5 is important
for N-Screen ?

[1] Multi Device & platform support

28

[2] Multi Screen & resolution support

29

[3] Platform Fragmentation
Native App HTML5 Web Application
특정 모바일 단말 및 플랫폼에 맞게 개발되며, 다운로드 브라우저를 통해 접속하며,
및 설치가 되어야 함 설치와 업데이트 불필요
각 플랫폼에 포팅해야 함(iPhone, BlackBerry, Android, Pal
Portability 표준 웹만 개발하면 어디서나 볼 수 있음
m and the list goes on…)
외부 링크를 통한 브라우저 호출은 가능하지만, 내부 링크
Hyper Links 어떤 부분이건 링크로 연결 가능
는 불가능하고, 앱 간 호출은 보안 제약이 있음
검색 사이트, 이메일 홍보, 트위터 링크 등으로
Discoverability 앱스토어 홍보와 마케팅을 위한 비용이 필요
홍보 가능
Distribution & Market Siz 플랫폼과 단말의 종류에 한계가 있으며, 상위 부분에 있는
누구든 접속 가능
e 것과 하위 내용과 차별화 됨
Usage of Device Capabiliti 단말의 모든 기능 제어 가능(GPS, camera, voice, RFID, a 현재는 불가능 (HTML와 Device API 표준화를
es ddress book, calendar, etc.) 통해 2011년부터 가능할 것으로 전망)
앱이 다운로드 되고 나면, 지원에 어려움이 있음. 버그가
Supportability & Upgrade
있는 부분에 대해서는 다시 등록하고 모두에게 재다운로 사이트를 수정하면 언제든 바로 업데이트
ability
드 받으라고 해야 함
앱스토어 개발자 등록 비용이 필요 (Apple charges develo
Entry Costs 없음
pers $99 and enterprises $299, RIM charges $200 )
앱스토어를 통해 판매시 수익 공유 (Apple takes 30%, RI
Revenue Share 모두 내꺼
M takes 20%)
User Experience 풍부한 사용자 인터페이스 제공이 가능 HTML/CSS/JavaScript 등의 기능에 의해 한정됨
네트웍을 거치며, 서버에서 제공되고, 브라우저
Performance 바이너리 코드로 실행되므로 속도가 빠름
를 통해 처리되기에 성능 변동폭이 큼
HTML5의 App Cache 기능을 이용해 구현해야
Offline Browsing 로컬 저장소를 이용해 가능
지만 가능
30

[4] – Standards - HTML5 지원 현황

31 Source: http://html5test.com/results.html

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

32

[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">
33

[7] – New Chances– Web App Store

Any Devices
Device Devices (PC, TV, Car, Tablet…)
Client
App Store Browser Browser

Front Front Web Web Web
Server
Store Web App App App
Server Server Store Store Store

Native Native Web Cloud
Native
Appp App App App

34

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/

35


36 http://www.w3.org/2011/09/webtv/slides/IG_Overview.pdf


37

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

38

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

39

Interoperability

40 http://visual.ly/idc-next-level-mobile-web

HTML5는 스마트TV의 동력이 될 수 있을까 ?
 사람들이 TV로 브라우징을 할까 ?
 태블릿도 있고, 스마트폰도 있는데 ? 미국내
TV 시청중
태블릿 사용
85%

41

새로운 많은 디지털 미디어들의 등장. 사용자의 attention을 얻을 수 있을까 ?

42


젊은층의 TV 시청률은 지속적 하락중

43


애플은 왜 iPad를 만들었을까 ?

TV는 10년간 1억대 성장 태블릿 4년간 3.5억대

44


기존 거실 TV 중심의 시각에서 벗어나
새로운 접근이 필요 !!

TV 공급자 중심이 아닌
소비자 중심의 접근이 필요 !!

45

Conclusions
 HTML5는 전부가 아닌 차세대 웹 기술의 일부

 HTML5는 콘텐츠가 아닌 응용 기술

 HTML5 규격만이 아닌 다양한 웹 표준 고려 필요

 TV 생태계가 아닌 웹의 생태계로 접근해야

 공급자 관점이 아닌 수요자 관점 필요

 폐쇄적 생태계가 아닌 개방형 생태계로 전환 필요

46

Thank you
For more discussion :
JongHong Jeon (hollobit@etri.re.kr)
+82-42-860-5333

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

OR
47

HTML5 and Smart TV

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (13)

Ähnlich wie HTML5 and Smart TV

Ähnlich wie HTML5 and Smart TV (20)

Mehr von Jonathan Jeon

Mehr von Jonathan Jeon (20)

HTML5 and Smart TV