HTML5 and Smart TV

HTML5 & Smart TVJonghong JeonETRI, SRCEmail: hollobit@etri.re.krBlog: http://mobile2.tistory.com http://twitter.com/hollobithttp://www.etri.re.kr

TV, Internet and Web Internet Internet Internet Platform Web engine Email, Web Widget Web App. Marketplace2

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

Evolution of World Wide Web4

Evolution of World Wide Web 1989 2000 2005 2010 Web Document Web Services Open Web Web App & APIs 웹사이트의 시대, 웹서비스의 시대 웹 2.0, 웹 앱의 시대, HTML과 WAP 웹 플랫폼 시대 모바일과 N-Screen 시대5

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

Evolution of World Wide Web http://evolutionofweb.appspot.com/7

Screen Convergence8

Fragmentation is a big problem Device Content Screen Fragmentations Application Platform Service9

Solution ? Device Content Screen Fragmentations Application Platform Service10

Solution11

HTML5를 바라보는 5가지 관점차세대 웹 기술의 총합의 관점으로 HTML5단말, 플랫폼, 스크린의 경계가 없도록 하는 HTML5새로운 앱과 SW 환경으로서의 HTML5모든 정보, 서비스와 사물을 묶는 관점으로 HTML5인프라와 플랫폼으로서의 HTML512

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

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 API18

HTML5: Web Development to the next level http://slides.html5rocks.com/19

HTML5 표준화20

W3C HTML5 Roadmap21

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 DOM4Specs. CSS1 CSS2 CSS3 HTTP Javascript AJAX hollobit@etri.re.kr XHR222

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

HTML5 Testing Task Force Status24

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

Toward the Advanced Web App26

Why HTML5 is importantfor N-Screen ?

[1] Multi Device & platform support28

[2] Multi Screen & resolution support29

[3] Platform Fragmentation Native App HTML5 Web Application 특정 모바일 단말 및 플랫폼에 맞게 개발되며, 다운로드 브라우저를 통해 접속하며, 및 설치가 되어야 함 설치와 업데이트 불필요 각 플랫폼에 포팅해야 함(iPhone, BlackBerry, Android, PalPortability 표준 웹만 개발하면 어디서나 볼 수 있음 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 develoEntry Costs 없음 pers $99 and enterprises $299, RIM charges $200 ) 앱스토어를 통해 판매시 수익 공유 (Apple takes 30%, RIRevenue 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 App34

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

W3C Activity – Web and TV36 http://www.w3.org/2011/09/webtv/slides/IG_Overview.pdf

W3C Activity – Web and TV37

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 Force38

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 WG39

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

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

HTML5는 스마트TV의 동력이 될 수 있을까 ? 새로운 많은 디지털 미디어들의 등장. 사용자의 attention을 얻을 수 있을까 ?42

HTML5는 스마트TV의 동력이 될 수 있을까 ? 젊은층의 TV 시청률은 지속적 하락중43

HTML5는 스마트TV의 동력이 될 수 있을까 ? 애플은 왜 iPad를 만들었을까 ? TV는 10년간 1억대 성장 태블릿 4년간 3.5억대44

HTML5는 스마트TV의 동력이 될 수 있을까 ? 기존 거실 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 OR47

HTML5 and Smart TV

by Jonathan Jeon

Accessibility

Categories

Upload Details

Usage Rights

Statistics