Upload
jonathan-jeon
View
2.310
Download
18
Embed Size (px)
DESCRIPTION
5월31일 과학기술회관에서 열렸던 전자공학회 주관의 스마트 TV 컨퍼런스에서 발표한 내용입니다.
Citation preview
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