Download - HTML5 융합 기술 표준화 동향
![Page 1: HTML5 융합 기술 표준화 동향](https://reader034.vdocuments.net/reader034/viewer/2022042515/554bc106b4c9053a298b5139/html5/thumbnails/1.jpg)
HTML5 융합 기술 표준화 동향
Jonghong JeonETRI, PEC
Email: [email protected] Blog: http://mobile2.tistory.com
http://twitter.com/hollobit
http://www.etri.re.kr
![Page 2: HTML5 융합 기술 표준화 동향](https://reader034.vdocuments.net/reader034/viewer/2022042515/554bc106b4c9053a298b5139/html5/thumbnails/2.jpg)
2
In The Beginning .....
World Wide Web (Tim Berners-Lee, 1989) universe of network-accessible information anyone, anywhere, anytime Client to server interactions
![Page 3: HTML5 융합 기술 표준화 동향](https://reader034.vdocuments.net/reader034/viewer/2022042515/554bc106b4c9053a298b5139/html5/thumbnails/3.jpg)
3
Evolution of World Wide Web
![Page 4: HTML5 융합 기술 표준화 동향](https://reader034.vdocuments.net/reader034/viewer/2022042515/554bc106b4c9053a298b5139/html5/thumbnails/4.jpg)
4
Web Page vs. Web Application
Web Page(Site) HTML로 표현된 웹 문서(또는 페이지들을 제공)
Web Application 특정한 기능을 수행하도록 설계된 프로그램
![Page 5: HTML5 융합 기술 표준화 동향](https://reader034.vdocuments.net/reader034/viewer/2022042515/554bc106b4c9053a298b5139/html5/thumbnails/5.jpg)
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를 통해 한 단계 진화된 웹 응용 환경을 제공하며, 위치정보 및 소셜 정보 등을 결합하는 통합 응용 플랫폼으로서 웹이 자리잡아 가는 단계
![Page 6: HTML5 융합 기술 표준화 동향](https://reader034.vdocuments.net/reader034/viewer/2022042515/554bc106b4c9053a298b5139/html5/thumbnails/6.jpg)
6
Evolution of World Wide Web
![Page 7: HTML5 융합 기술 표준화 동향](https://reader034.vdocuments.net/reader034/viewer/2022042515/554bc106b4c9053a298b5139/html5/thumbnails/7.jpg)
Why HTML5 and Web Technology ?
![Page 8: HTML5 융합 기술 표준화 동향](https://reader034.vdocuments.net/reader034/viewer/2022042515/554bc106b4c9053a298b5139/html5/thumbnails/8.jpg)
8
단말 환경과 개발 환경의 변화
![Page 9: HTML5 융합 기술 표준화 동향](https://reader034.vdocuments.net/reader034/viewer/2022042515/554bc106b4c9053a298b5139/html5/thumbnails/9.jpg)
9
Top 5 Form Factors, 2015
![Page 10: HTML5 융합 기술 표준화 동향](https://reader034.vdocuments.net/reader034/viewer/2022042515/554bc106b4c9053a298b5139/html5/thumbnails/10.jpg)
10
Cross Platform Flexibility
![Page 11: HTML5 융합 기술 표준화 동향](https://reader034.vdocuments.net/reader034/viewer/2022042515/554bc106b4c9053a298b5139/html5/thumbnails/11.jpg)
11
Fragmentation is a big problem
Fragmentations
Device
Screen
Platform
Service
Application
Content
![Page 12: HTML5 융합 기술 표준화 동향](https://reader034.vdocuments.net/reader034/viewer/2022042515/554bc106b4c9053a298b5139/html5/thumbnails/12.jpg)
12
Cross Platform, Hybrid, HTML5
![Page 13: HTML5 융합 기술 표준화 동향](https://reader034.vdocuments.net/reader034/viewer/2022042515/554bc106b4c9053a298b5139/html5/thumbnails/13.jpg)
Now : HTML5 & Web Application
![Page 14: HTML5 융합 기술 표준화 동향](https://reader034.vdocuments.net/reader034/viewer/2022042515/554bc106b4c9053a298b5139/html5/thumbnails/14.jpg)
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
![Page 15: HTML5 융합 기술 표준화 동향](https://reader034.vdocuments.net/reader034/viewer/2022042515/554bc106b4c9053a298b5139/html5/thumbnails/15.jpg)
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
![Page 16: HTML5 융합 기술 표준화 동향](https://reader034.vdocuments.net/reader034/viewer/2022042515/554bc106b4c9053a298b5139/html5/thumbnails/16.jpg)
16
HTML5 ?
Web Application은 HTML, CSS, JavaScript의 협주곡
통칭되는 “HTML5”
HTML5콘텐츠 내용과 형식을 표현
CSS3콘텐츠 표현 방법을 정의
JavaScript각종 API를 통해
기능을 표현
문서 구조의 의미를 명확히 하여디자인과 프로그램의 독립성을 확보
서로 다른 다양한 브라우저 상에서일관된 표현 기능 제공, 효과적이고 편
리한 표현 방식의 변경
풍부한 기능과 자원을 제어할 수있는 로컬 어플리케이션
문서구조의 상세화 멀티미디어 폼과 이벤트 등
표현 기능 모듈화 웹 폰트
Web Storage Web Worker Web Socket Geolocation API
![Page 17: HTML5 융합 기술 표준화 동향](https://reader034.vdocuments.net/reader034/viewer/2022042515/554bc106b4c9053a298b5139/html5/thumbnails/17.jpg)
17
HTML5 ?
![Page 18: HTML5 융합 기술 표준화 동향](https://reader034.vdocuments.net/reader034/viewer/2022042515/554bc106b4c9053a298b5139/html5/thumbnails/18.jpg)
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
![Page 19: HTML5 융합 기술 표준화 동향](https://reader034.vdocuments.net/reader034/viewer/2022042515/554bc106b4c9053a298b5139/html5/thumbnails/19.jpg)
19
HTML Standardization
WHAT-WG
![Page 20: HTML5 융합 기술 표준화 동향](https://reader034.vdocuments.net/reader034/viewer/2022042515/554bc106b4c9053a298b5139/html5/thumbnails/20.jpg)
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 RecommendationWD: Working Draft CR : Candidate Recommendation REC: Recommendation
![Page 21: HTML5 융합 기술 표준화 동향](https://reader034.vdocuments.net/reader034/viewer/2022042515/554bc106b4c9053a298b5139/html5/thumbnails/21.jpg)
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/
![Page 22: HTML5 융합 기술 표준화 동향](https://reader034.vdocuments.net/reader034/viewer/2022042515/554bc106b4c9053a298b5139/html5/thumbnails/22.jpg)
22
User Interactions
http://www.w3.org/2013/02/mobile-web-app-state/#User_interactions
![Page 23: HTML5 융합 기술 표준화 동향](https://reader034.vdocuments.net/reader034/viewer/2022042515/554bc106b4c9053a298b5139/html5/thumbnails/23.jpg)
23
Forms
http://www.w3.org/2013/02/mobile-web-app-state/#Forms
![Page 24: HTML5 융합 기술 표준화 동향](https://reader034.vdocuments.net/reader034/viewer/2022042515/554bc106b4c9053a298b5139/html5/thumbnails/24.jpg)
24
Device Adaptation
http://www.w3.org/2013/02/mobile-web-app-state/#Device_Adaptation
![Page 25: HTML5 융합 기술 표준화 동향](https://reader034.vdocuments.net/reader034/viewer/2022042515/554bc106b4c9053a298b5139/html5/thumbnails/25.jpg)
25
Graphics
http://www.w3.org/2013/02/mobile-web-app-state/#Graphics
![Page 26: HTML5 융합 기술 표준화 동향](https://reader034.vdocuments.net/reader034/viewer/2022042515/554bc106b4c9053a298b5139/html5/thumbnails/26.jpg)
26
Multimedia
http://www.w3.org/2013/02/mobile-web-app-state/#Multimedia
![Page 27: HTML5 융합 기술 표준화 동향](https://reader034.vdocuments.net/reader034/viewer/2022042515/554bc106b4c9053a298b5139/html5/thumbnails/27.jpg)
27
Sensors and hardware integration
![Page 28: HTML5 융합 기술 표준화 동향](https://reader034.vdocuments.net/reader034/viewer/2022042515/554bc106b4c9053a298b5139/html5/thumbnails/28.jpg)
28
Network
![Page 29: HTML5 융합 기술 표준화 동향](https://reader034.vdocuments.net/reader034/viewer/2022042515/554bc106b4c9053a298b5139/html5/thumbnails/29.jpg)
29
Communication and Discovery
![Page 30: HTML5 융합 기술 표준화 동향](https://reader034.vdocuments.net/reader034/viewer/2022042515/554bc106b4c9053a298b5139/html5/thumbnails/30.jpg)
컨버전스 환경을 위한 차세대 웹 기술
![Page 31: HTML5 융합 기술 표준화 동향](https://reader034.vdocuments.net/reader034/viewer/2022042515/554bc106b4c9053a298b5139/html5/thumbnails/31.jpg)
31
HTML5의 역할
![Page 32: HTML5 융합 기술 표준화 동향](https://reader034.vdocuments.net/reader034/viewer/2022042515/554bc106b4c9053a298b5139/html5/thumbnails/32.jpg)
32
HTML5 융합 응용 환경
![Page 33: HTML5 융합 기술 표준화 동향](https://reader034.vdocuments.net/reader034/viewer/2022042515/554bc106b4c9053a298b5139/html5/thumbnails/33.jpg)
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.
![Page 34: HTML5 융합 기술 표준화 동향](https://reader034.vdocuments.net/reader034/viewer/2022042515/554bc106b4c9053a298b5139/html5/thumbnails/34.jpg)
34
[1] HTML5 기반 스마트 TV 플랫폼
![Page 35: HTML5 융합 기술 표준화 동향](https://reader034.vdocuments.net/reader034/viewer/2022042515/554bc106b4c9053a298b5139/html5/thumbnails/35.jpg)
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
![Page 36: HTML5 융합 기술 표준화 동향](https://reader034.vdocuments.net/reader034/viewer/2022042515/554bc106b4c9053a298b5139/html5/thumbnails/36.jpg)
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/
![Page 37: HTML5 융합 기술 표준화 동향](https://reader034.vdocuments.net/reader034/viewer/2022042515/554bc106b4c9053a298b5139/html5/thumbnails/37.jpg)
37
[4] HTML5 and Web OS
![Page 38: HTML5 융합 기술 표준화 동향](https://reader034.vdocuments.net/reader034/viewer/2022042515/554bc106b4c9053a298b5139/html5/thumbnails/38.jpg)
38
[4] FirefoxOS Architecture
![Page 39: HTML5 융합 기술 표준화 동향](https://reader034.vdocuments.net/reader034/viewer/2022042515/554bc106b4c9053a298b5139/html5/thumbnails/39.jpg)
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/
![Page 40: HTML5 융합 기술 표준화 동향](https://reader034.vdocuments.net/reader034/viewer/2022042515/554bc106b4c9053a298b5139/html5/thumbnails/40.jpg)
40
[6] Multi Platform Game
![Page 41: HTML5 융합 기술 표준화 동향](https://reader034.vdocuments.net/reader034/viewer/2022042515/554bc106b4c9053a298b5139/html5/thumbnails/41.jpg)
41
[6] HTML5 Game engine
http://www.youtube.com/watch?feature=player_embedded&v=XsyogXtyU9o
![Page 42: HTML5 융합 기술 표준화 동향](https://reader034.vdocuments.net/reader034/viewer/2022042515/554bc106b4c9053a298b5139/html5/thumbnails/42.jpg)
42
Convergence == 3M
3M(Mutli-Screen, Multi-Platform, Multi-Device)
![Page 43: HTML5 융합 기술 표준화 동향](https://reader034.vdocuments.net/reader034/viewer/2022042515/554bc106b4c9053a298b5139/html5/thumbnails/43.jpg)
43
HTML5 Compatibility
http://html5test.com/results/desktop.html
http://html5test.com/results/mobile.html
![Page 44: HTML5 융합 기술 표준화 동향](https://reader034.vdocuments.net/reader034/viewer/2022042515/554bc106b4c9053a298b5139/html5/thumbnails/44.jpg)
44
HTML5 개발자 생태계의 성장
![Page 45: HTML5 융합 기술 표준화 동향](https://reader034.vdocuments.net/reader034/viewer/2022042515/554bc106b4c9053a298b5139/html5/thumbnails/45.jpg)
45
HTML5의 현실과 이슈
![Page 46: HTML5 융합 기술 표준화 동향](https://reader034.vdocuments.net/reader034/viewer/2022042515/554bc106b4c9053a298b5139/html5/thumbnails/46.jpg)
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
![Page 47: HTML5 융합 기술 표준화 동향](https://reader034.vdocuments.net/reader034/viewer/2022042515/554bc106b4c9053a298b5139/html5/thumbnails/47.jpg)
47
Web Platform Architecture
![Page 48: HTML5 융합 기술 표준화 동향](https://reader034.vdocuments.net/reader034/viewer/2022042515/554bc106b4c9053a298b5139/html5/thumbnails/48.jpg)
48
Native Web App
Native App
Web App
Web page
NativeWeb App
Hybrid Web App(Cross Platform)
Multi-platform support
![Page 49: HTML5 융합 기술 표준화 동향](https://reader034.vdocuments.net/reader034/viewer/2022042515/554bc106b4c9053a298b5139/html5/thumbnails/49.jpg)
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
![Page 50: HTML5 융합 기술 표준화 동향](https://reader034.vdocuments.net/reader034/viewer/2022042515/554bc106b4c9053a298b5139/html5/thumbnails/50.jpg)
50
Open Web Platform
![Page 51: HTML5 융합 기술 표준화 동향](https://reader034.vdocuments.net/reader034/viewer/2022042515/554bc106b4c9053a298b5139/html5/thumbnails/51.jpg)
51
JongHong Jeon ([email protected]) +82-42-860-5333
http://mobile2.tistory.com/mhttp://twitter.com/hollobit