HTML5 융합 기술 표준화 동향
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

HTML5 융합 기술 표준화 동향

on

  • 2,436 views

오늘 ICT Forum 2013에서 HTML5 기반의 융합 기술 동향에 대해 소개한 자료입니다.

오늘 ICT Forum 2013에서 HTML5 기반의 융합 기술 동향에 대해 소개한 자료입니다.

Statistics

Views

Total Views
2,436
Views on SlideShare
2,430
Embed Views
6

Actions

Likes
6
Downloads
77
Comments
0

1 Embed 6

https://twitter.com 6

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

HTML5 융합 기술 표준화 동향 Presentation Transcript

  • 1. HTML5 융합 기술 표준화 동향 Jonghong Jeon ETRI, PEC Email: hollobit@etri.re.kr Blog: http://mobile2.tistory.com http://twitter.com/hollobit http://www.etri.re.kr
  • 2. 2 In The Beginning .....  World Wide Web (Tim Berners-Lee, 1989)  universe of network-accessible information  anyone, anywhere, anytime  Client to server interactions
  • 3. 3 Evolution of World Wide Web
  • 4. 4 Web Page vs. Web Application  Web Page(Site)  HTML로 표현된 웹 문서(또는 페이지들을 제공)  Web Application  특정한 기능을 수행하도록 설계된 프로그램
  • 5. 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. 6 Evolution of World Wide Web
  • 7. Why HTML5 and Web Technology ?
  • 8. 8 단말 환경과 개발 환경의 변화
  • 9. 9 Top 5 Form Factors, 2015
  • 10. 10 Cross Platform Flexibility
  • 11. 11 Fragmentation is a big problem Fragmentations Device Screen Platform Service Application Content
  • 12. 12 Cross Platform, Hybrid, HTML5
  • 13. Now : HTML5 & Web Application
  • 14. 14 HTML5 & Web App Technology Timeline CSS1 Javascript CSS2 CSS3 DOM1 DOM2 DOM3 DOM4 2010 2011 AJAX HTTP Canavs Web Workers AppCache W3C Web App. Specs. XHR2 WebGLGeolocation FileAPI WebFontAudio/Video Web form 2012 2013 HTTP2 HTML5 Working Draft hollobit@etri.re.kr
  • 15. 15 HTML5  HTML5로 통칭되는 요소는 HTML5 뿐 아니라 CSS3, 웹 어플리케 이션을 위한 JavaScript API 확장을 포함한 것 통칭되는 “HTML5” HTML5 (Hypertext Markup Language 5.0) 콘텐츠 내용과 형식을 표현 CSS3 (Cascading Style Sheet 3.0) 콘텐츠 표현 방법을 정의 JavaScript 각종 API를 통해 기능을 표현 문서 구조의 의미를 명확히 하여 디자인과 프로그램의 독립성을 확보 서로 다른 다양한 브라우저 상에서 일관된 표현 기능 제공, 효과적이고 편 리한 표현 방식의 변경 풍부한 기능과 자원을 제어할 수 있는 로컬 어플리케이션  문서구조의 상세화  멀티미디어  폼과 이벤트 등  표현 기능 모듈화  웹 폰트  Web Storage  Web Worker  Web Socket  Geolocation API
  • 16. 16 HTML5 ?  Web Application은 HTML, CSS, JavaScript의 협주곡 통칭되는 “HTML5” HTML5 콘텐츠 내용과 형식을 표현 CSS3 콘텐츠 표현 방법을 정의 JavaScript 각종 API를 통해 기능을 표현 문서 구조의 의미를 명확히 하여 디자인과 프로그램의 독립성을 확보 서로 다른 다양한 브라우저 상에서 일관된 표현 기능 제공, 효과적이고 편 리한 표현 방식의 변경 풍부한 기능과 자원을 제어할 수 있는 로컬 어플리케이션  문서구조의 상세화  멀티미디어  폼과 이벤트 등  표현 기능 모듈화  웹 폰트  Web Storage  Web Worker  Web Socket  Geolocation API
  • 17. 17 HTML5 ?
  • 18. 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. 19 HTML Standardization WHAT-WG
  • 20. 20 HTML milestone 2012 2013 2014 2015 2016 2017 2018 2019 2020 HTML5.0 CR start …CR, LC REC … … HTML5.1 FPWD --- LC + CR … CR REC HTML5.x FPWD --- LC + CR … CR REC HTML6.x FPWD --- LC + CR … CR REC FPWD:First Public Working Draft LCWD: Last Call Working Draft PR: Proposed Recommendation WD: Working Draft CR : Candidate Recommendation REC: Recommendation
  • 21. 21 The Web as an application platform  Standards for Web Applications on Mobile: Feb 2013 current state and roadmap  http://www.w3.org/Mobile/mobile-web-app-state/
  • 22. 22 User Interactions http://www.w3.org/2013/02/mobile-web-app-state/#User_interactions
  • 23. 23 Forms http://www.w3.org/2013/02/mobile-web-app-state/#Forms
  • 24. 24 Device Adaptation http://www.w3.org/2013/02/mobile-web-app-state/#Device_Adaptation
  • 25. 25 Graphics http://www.w3.org/2013/02/mobile-web-app-state/#Graphics
  • 26. 26 Multimedia http://www.w3.org/2013/02/mobile-web-app-state/#Multimedia
  • 27. 27 Sensors and hardware integration
  • 28. 28 Network
  • 29. 29 Communication and Discovery
  • 30. 컨버전스 환경을 위한 차세대 웹 기술
  • 31. 31 HTML5의 역할
  • 32. 32 HTML5 융합 응용 환경
  • 33. 33 [1] Web and TV  W3C Activity  http://www.w3.org/2011/webtv/Activity  Web and TV Interest Group  http://www.w3.org/2011/webtv/  Task Forces • Testing TF [testing] – Identify Requirements for testing from a “Web and TV” perspective act as a bridge between ongoing activities in W3C and other organizations interested in testing W3C specifications • Media APIs TF [apis] – Merges the work of the Recording and Downloading Media, Terminal Capabilities and Content Metadata Exposure and Content Synchronization TFs. with the following focus: • Stereoscopic 3D Web [3dweb] – Investigate impact of 3D Video/Graphics on HTML and other web standards • Timed Text [tt] – Develop recommendations to facilitate the use of TTML and WebVTT content on the Web, including interoperability with other timed text formats.
  • 34. 34 [1] HTML5 기반 스마트 TV 플랫폼
  • 35. 35 [2] Web and Automotive  Workshop  http://www.w3.org/2012/08/web-and-automotive/summary.html  W3C BG - Adam Abramski (Intel) and Andy Gryc (QNX)  http://www.w3.org/community/autowebplatform/  Sub Task Teams • Navigation /SubTaskTeamsNavigation • Web Application Security /SubTaskTeamsAppSecurity • Voice Recognition, Speech, Text-to-Speech /SubTaskTeamsSpeech
  • 36. 36 [3] Web and Publishing  eBooks: Great Expectations for Web Standards  11-12 February 2013, New York, USA  http://www.w3.org/2012/08/electronic-books/  eBooks & i18n: Richer Internationalization for eBooks  4 June 2013, Tokyo, Japan  https://www.w3.org/2013/06/ebooks/  Publishing and the Open Web Platform  September 16th and 17th, Centre Pompidou, Paris  http://www.w3.org/2012/12/global-publisher/
  • 37. 37 [4] HTML5 and Web OS
  • 38. 38 [4] FirefoxOS Architecture
  • 39. 39 [5] System application Phase 1 (2013) Phase 2 (2014~)  Bluetooth API  Browser API  Calendar API  Device Capabilities API  Idle API  Media Storage API  Network Interface API  Secure Elements API  System Settings API http://www.w3.org/2012/sysapps/
  • 40. 40 [6] Multi Platform Game
  • 41. 41 [6] HTML5 Game engine http://www.youtube.com/watch?feature=player_embedded&v=XsyogXtyU9o
  • 42. 42 Convergence == 3M 3M(Mutli-Screen, Multi-Platform, Multi-Device)
  • 43. 43 HTML5 Compatibility http://html5test.com/results/desktop.html http://html5test.com/results/mobile.html
  • 44. 44 HTML5 개발자 생태계의 성장
  • 45. 45 HTML5의 현실과 이슈
  • 46. 46 웹 기술이 극복해야 할 요소들  Performance  Engine enhance (Script, Rendering)  H/W Acceleration  Web OS  Offline  HTML5 offline feature (application cache, localStorage, online/offline events)  Device Capability  Device APIs  System Application APIs  Web APIs (Web Intents, Web Push…)  Web OS  Monetization  Web Application Store & Native Web App  Developer Environment  Developer Tools  Javascript Frameworks  UI  WebGL, Web Audio API  CSS4, DOM4  Touch Events, GamePad API … 46
  • 47. 47 Web Platform Architecture
  • 48. 48 Native Web App Native App Web App Web page Native Web App Hybrid Web App (Cross Platform) Multi-platform support
  • 49. 49 Conclusions  Web은 자원(Resource)과 연결(Link)에 대한 기술  기본 기술 요소  HTML(구조), CSS(표현), JS(동작)  Web 기술의 진화 유형과 방향  다양한 인터랙션 기술 : 터치, 음성, 제스처, 알림, 접근성  입력과 처리 : web form  Adaptation & Responsive Web :  그래픽스 기술 : 2D, 3D, Vector, Animation, Fonts, Orientation, Layout, GPU Acceleration  멀티미디어 : Video/Audio Play, Gallery Access, Capturing, Analysis & Modification  Sensing & Capturing: Geolocation, Battery, Proximity, Ambient Light, Humidity, NFC, Camera/Microphone  Device Access : Task Schedule, Calendar, Contacts, System Setting, Telephony, Messaging  Network/Protocol : Network API, Server-push, P2P data connection, Web Socket, Raw Socket  Convergence 환경의 핵심은 Multi Platform & Cross Platform  Javascript 의 중요성, App Design 의 중요성  Performance와 Interoperability, 그리고 Standards
  • 50. 50 Open Web Platform
  • 51. 51 JongHong Jeon (hollobit@etri.re.kr) +82-42-860-5333 http://mobile2.tistory.com/m http://twitter.com/hollobit