This slides give most of information about HTML5 in 2014 year.

1. 2014년 HTML5 총정리
이 원 석 / 삼성전자
W3C System Applications WG 의장
W3C HTML5 Korean Interest Group 의장
@wonsuk73

2. HTML5 주요 업계 동향 정리 …

3. <source: http://www.2ality.com/2014/01/web-platform-2014.html >
Jan. 2014

4. <source: http://modernweb.com/2014/01/06/2014-what-web-developers-will-need-to-know/ >
Jan. 2014
 Reactive UI (ReactJS framework)
 HTML5 Hybrid apps will (finally) be as
fast as native apps
 Internet of things
 Responsive JavaScript
 …

5. Jan. 2014
● Is Your Fullscreen API Code Up to Date? Make It
Work The Same in Modern Browsers
● Despite Automatic Updates, Old Browsers Are Still A
Problem
● Ten Reasons We Switched From An Icon Font to SVG
● Kami: A Fast and Lightweight WebGL Sprite
Rendering Framework
● Requirements for DRM in HTML5 Are A Secret
● Andrew Betts on Developing for Mobile with HTML5
● Reversing Course, Google Rejects Adobe's CSS
Regions Spec

6. <source: http://www.leggetter.co.uk/2014/02/24/10-realtime-web-technology-predictions-for-2014.html >
Feb. 2014
 multi-user chat, collaborative
applications (like Google Docs, Office
Live and numerous online IDEs),
multiplayer games, interactive 2nd screen
experiences, realtime mapping and GIS
(Geographic Information Systems) and
– hopefully – much, much more …

7. <source: http://html5hub.com/will-the-performance-of-html5-ever-become-indistinguishable-from-that-of-native-code/>
Feb. 2014

8. Feb. 2014
● Firefox 27 Released
● Optimizing Web Font Rendering Performance
● WebRTC Data Channels: WebRTC Data Channels for
High Performance Data Exchange
● W3C HTML Spec Drops Input Type 'datetime-local'
● A Look at the Developer Tools in Firefox (Aurora) 29
● Applying Transformations To Responsive Web Design
● imacss: Transforms Image Files to Data URIs for
Embedding in CSS
● Phaser: Desktop and Mobile HTML5 Game Framework

9. Feb. 2014
● Chrome Close to Unprefixing Web Audio API's
AudioContext
● Vizicities: Web-Based 3D City Visualization Platform
● VexFlow: HTML5 Music Notation Rendering API
● Panda.js: An Open Source HTML5 Game Engine
● Microsoft to Ship a WebDriver Implementation from
IE11+
● Wanted: Awesome HTML5 App Ports for Firefox OS &
the Open Web
● Roll Your Own HTML5 Web Components with Vanilla
JS

10. <source: http://html5hub.com/will-the-performance-of-html5-ever-become-indistinguishable-from-that-of-native-code/>
Mar. 2014

11. <source: https://hacks.mozilla.org/2014/03/audio-tags-web-components-web-audio-%E2%99%A5/ >
Mar. 2014

12. Mar. 2014
● Grid: A Simple Guide to Responsive Design
● Nine Things to Expect from HTTP/2
● Why You Should Care About Web Components
● A Draft Spec of WebSocket over HTTP/2.0
● World Wide Web Born At CERN 25 Years Ago
● Improving Speech Recognition in the Browser
● Google Needs To Double Down On HTML5, And Soon
● Mozilla and Unity Bringing the Unity Game Engine to
WebGL

13. Mar. 2014
● Firefox 28 Arrives with VP9 Video Decoding, HTML5
Video and Audio Volume Controls, and More
● CSS Regions Polyfill – Better, Smarter, Fuller
● Mozilla Drops 'Metro' Version of Firefox on Windows 8
Due to Low Usage
● Crosswalk: An HTML5 Runtime from Intel
● Brendan Eich, 'Father of JavaScript,' Appointed as New
CEO of Mozilla

14. <source: http://jakearchibald.com/2014/service-worker-first-draft/ >
April 2014

15. <source: http://austinhallock.com/2014/04/07/the-rise-of-the-mobile-web/ >
April 2014

16. <source: https://status.modern.ie/ >
April 2014

17. April 2014
● A Look at 4 New Canvas Features
● March 2014: IE11 Gains Most Market Share, Chrome
Finally Passes Firefox
● The Washington Post Updates iPad App, Switching
From HTML5 to ‘Native Framework’
● Building Better Input Experience for East Asian Users
with the IME API in IE11
● Generational Garbage Collection Has Landed in Firefox
● 22 HTML5 Game Engines: Find Which is Right For You
● Brendan Eich Steps Down as Mozilla CEO

18. April 2014
● Rethinking Responsive SVG
● OpenFin Raises $4 Million To Bring HTML5 Apps To
The Financial Services Industry
● The Web’s Declarative, Composable Future
● Another Big Milestone for Servo: Acid2
● Picturefill: A Responsive Image Polyfill
● Spine Delivers High Quality 2D Animation for HTML5
Games
● First Draft of Object RTC (ORTC) API for WebRTC
published by ORTC Community Group

19. <source: http://thenextweb.com/insider/2014/05/01/ie11-market-share-passes-ie10-ie9-combined-chrome-cements-lead-firefox/ >
May 2014

20. <source: http://jakearchibald.com/2014/service-worker-first-draft/ >
May 2014

21. May 2014
● WebComponents.org: A Place to Discuss and Evolve
Web Component Best Practices
● Intent to Implement in Firefox: Media Source Extensions
● Hyro: A Real-Time HTML5 Editor
● CutJS: A Fast DOM-like 2D Rendering Engine for
HTML5 Canvas
● imagine.js: A Lightweight HTML5 Canvas Library
● The Great HTML5 Gaming Performance Test: 2014
Edition
● Five Keys to Success When Building HTML5 Games

22. May 2014
● Web Components: A Chance to Create The Future
● CSS Shapes Polyfill
● rangeslider.js: Simple HTML5 Input type='range' Slider
Element Polyfill
● Chrome 35 Launches with JavaScript, HTML5, and Web
Platform Improvements
● Creating a Multiplayer Game with TogetherJS and
CreateJ
● Chrome 35 for Android Gets Fullscreen HTML5 Video
with Subtitles and Controls

23. <source: http://techblog.netflix.com/2014/06/html5-video-in-safari-on-os-x-yosemite.html>
June 2014

24. <source: http://blog.ludei.com/webgl-ios-8-safari-webview/ >
June 2014

25. June 2014
● Introducing webcompat.com: A Place for The Web
Compatibility Community
● Microsoft Plans To Bring HTTP/2, Web Audio And
JavaScript Promises To The Next Version Of IE
● Safari 7 will have WebGL, SPDY, IndexedDB, CSS
Shapes, and HTML5 Premium Video
● Storage.js: Asynchronous Browser Storage with Multiple
Back-Ends
● CSS Shapes and CSS Compositing and Blending in
Safari 8
● Easy Audio Capture with the MediaRecorder API

26. June 2014
● Library Detector For Chrome: An Extension to Detect JS
Libraries Used On Page
● Announcing Internet Explorer Developer Channel
● Introducing the Web Audio Editor in Firefox Developer
Tools
● Beyond JavaScript, 3 Ways That Brendan Eich Changed
The Web
● Firefox OS Apps Run On Android
● Google's Unveils Web Development 'Starter Kit‘

27. <source: http://w3c.github.io/elements-of-html/>
July 2014

28. July 2014
● A Look at the Presentation API
● Clipping in CSS and SVG – The clip-path Property and
clipPath Element
● Hello ECMA-408, The New Official Dart Programming
Language Specification
● 12 Extensions and Apps that Fill the Gaps in Chrome's
DevTools
● Pixi.js: A 2D WebGL Renderer with HTML5 Canvas
Fallback
● Responsive Images: Use Cases and Documented Code
Snippets to Get You Started

29. July 2014
● WebGL in Web Workers, Today – and Faster than
Expected
● Firefox 31 Released: New Search Bar, Better Developer
Tools
● Resources for HTML5 Game Developers
● Web Components Aren’t Ready for Production... Yet
● Chrome 37 Beta adds Support for DirectWrite on
Windows for Better Text Rendering
● CSS Shrink: A Clever, Online CSS Compression Tool

30. <source: https://medium.com/@luisvieira_gmr/html5-prefetch-1e54f6dda15d >
Aug. 2014

31. Aug. 2014
● Google Chrome Canary and Dev Channels Now 64-Bit
on Mac OS X
● Flash CC to HTML5: Using Flash Skills to Produce
HTML5 Content
● The Mobile Web Should Just Work for Everyone
● The W3C20 Anniversary Symposium: The Future of the
Web
● Web Audio API Support In Internet Explorer Now 'In
Development‘
● Microsoft Joins Khronos and Will Participate in the
WebGL Working Group

32. Aug. 2014
● After 5: What Happens With HTML after HTML5?
● Tim Berners-Lee: A Magna Carta for The Web
● Blink/Chromium team decides not to implement
Pointer Events
● The State of the Componentised Web
● The 2014 Browser Battery Life Face-Off
● Coming Soon: CSS Feature Queries

33. <source: http://arstechnica.com/information-technology/2014/09/how-a-new-html-element-will-make-the-web-faster/>
Sept. 2014
 M-dot Site로 모바일 대응  Responsive Web
 Responsive Web Design의 이미지 처리 문제
 큰 이미지를 CSS를 통해서 작게 처리
 모바일 단말에서 로딩 속도 이슈
 Chrome 38, Firefox 33, Opera 25 지원 예정
<picture>
<source media="(min-width: 650px)" srcset="images/kitten-stretching.png">
<source media="(min-width: 465px)" srcset="images/kitten-sitting.png">
<img src="images/kitten-curled.png" alt="a cute kitten"> <!-- As the
fallback -->
</picture>

34. <source: http://labs.ft.com/2014/09/polyfills-as-a-service/ >
Sept. 2014

35. Sept. 2014
● Chrome 38 Beta: New Primitives for The Next-
generation Web
● Firefox 32 Released: New Web Audio Editor and
Numerous HTML5 and CSS Features
● Tint: Compile Native Applications with JavaScript, CSS,
HTML5 and Node
● Testing Mobile: Emulators, Simulators And Remote
Debugging
● Responsive Web Design with (Chrome 38) DevTools'
Device Mode

36. Sept. 2014
● Making The Web 'Just Work' with Any Input: Mouse,
Touch, and Pointer Events
● Enabling Voice Input into the Open Web and Firefox OS
● Apple Shows Love for HTML5 with iOS 8
● Using Fourier Transforms with the Web Audio API
● HTTP2 Enabled by Default in Firefox
● The ServiceWorker Is Coming, Look Busy!
● HTML5 Game Performance On iOS 8
● timing.js: Helpers for working with the Navigation
Timing API

37. <source: https://www.scirra.com/blog/ashley/13/chrome-and-android-push-html5-further >
Oct. 2014
 Lollipop의 Chromium Webview
- auto-update 지원
- WebGL, Web Audio, WebRTC 지원

38. <source: http://readwrite.com/2014/10/02/html5-apple-ios-8-wkwebview>
Oct. 2014

39. Oct. 2014
● The W3C Turns 20 Years Old Today
● Matchstick Brings Firefox OS to Your HDTV
● DukeScript Brings Java to HTML5 and JavaScript
● Chrome 38 Released
● Google Spends Over $75,000 in Bounties to Fix 159
Security Issues with Chrome 38 Release
● HTML5 Has A New Best Friend—And It's Apple, Not
Google
● Benchmarking Unity performance in WebGL
● Opera 25 (Chromium 38) for Mac and Windows

40. Oct. 2014
● ZorroSVG - Put a Mask on it
● Firefox 33 Released: The Developer Notes
● Chrome 39 Beta: JS Generators, Animation Playback
Control, and the WebApp Manifest
● Humble Mozilla Bundle Pushes WebGL-powered
Browser Gaming
● Firefox WebIDE Now Supports Inspecting Firefox OS
Browser Tabs
● Firefox OS Shows Continued Global Growth
● OpenH264 Now in Firefox

41. <source: http://readwrite.com/2014/11/17/html5-javascript-everywhere-mobile-tom-dale-emberjs >
Nov. 2014
 이미 많은 네이티브 App이 HTML5를 이
용하여 구현

42. <source: http://andreasgal.com/2014/11/16/vp8-and-h-264-to-both-become-mandatory-for-webrtc/>
Nov. 2014

43. Nov. 2014
● HTTP/2 All The Things
● The Future of Web Publishing (Games) in Unity
● HTML5 Video Correctness Across Browsers
● The Web as a Commercial Platform for Games
Gathers Momentum
● Mozilla Introduces the First Browser Built For
Developers
● A Productive TPAC 2014 and W3C Highlights
● 7 Principles of Rich Web Applications

44. Nov. 2014
● A Reimplementation of Winamp 2.9 in HTML5 and
JavaScript
● material ui: CSS Framework and React Components
Implementing Google's Material Design
● The State Of Web Animation 2014
● Web Sensor API: Raw and Uncut
● Android and iOS Go HTML5 Friendly With Their Latest
Releases
● Google's Mobile-Friendly Design Tester
● The Future of the Web (According to Google)

45. <source: http://www.smashingmagazine.com/2014/12/05/enhancing-ux-with-the-web-speech-api/>
Dec. 2014
 …

46. <source: http://jakearchibald.com/2014/offline-cookbook/>
Dec. 2014

47. Dec. 2014
● State of Web Type: Up to Date Data on Support for Web
Typography Features
● Web Animations Playback Control in Chrome 39
● IE Roadmap Update: srcset, 'main' Element, and Date
Inputs in Development
● Chrome 40 Beta: Powerful Offline and Lightspeed
Loading with Service Workers
● 50 Designers Share Their Top 3 Web Design Trends For
2015

48. 2014년
W3C HTML5 핵심 표준 개발 현황 …

49. HTML5 Spec
< source: http://www.w3.org/TR/2014/REC-html5-20141028/ >
 W3C HTML5 Spec 최종 표준 공개 (10월 28일)

50. HTML5 - Service Workers
 오프라인 지원: 개발자가 Web app caching 관리
 백그라운드 실행 지원
 Persistent 시스템 이벤트 처리 (Push, Alarm 등) 지원
 네이티브 앱 수준의 UX 제공 가능
 Chromium, Mozilla에서 Top Priority Feature
< source: http://www.w3.org/TR/service-workers/ >

51. HTML5 – Manifest format
 Web App의 인스톨 정보 제공
 Name, Icon, Start URL, Orientation 등
 홈스크린 설치, 태스크 관리자 통합 가능
 ServiceWorker 오프라인 기능과 함께
Native와 같은 사용자 경험 제공
 Chrome 39부터 지원
< source: http://www.w3.org/TR/pointerevents/ >

52. HTML5 – Push API
 CP가 단말에 메시지를 Web Push를 이용하여 전송
 사용자는 Web 페이지에서 Push 서비스 구독 신청
 Browser가 실행되지 않은 상황에서도 message 수신
 소규모 CP도 네이티브 App 개발 없이 Web에서 Push
사용 가능
< source: http://www.w3.org/TR/push-api/ >

53. HTML5 - <picture> and srcset attribute
< source: http://arstechnica.com/information-technology/2014/09/how-a-new-html-element-will-make-the-web-faster/?utm_source=html5weekly&utm_medium=email >
 M-dot Site로 모바일 대응  Responsive Web
 Responsive Web Design의 이미지 처리 문제
 큰 이미지를 CSS를 통해서 작게 처리
 모바일 단말에서 로딩 속도 이슈
 Chrome 38, Firefox 33, Opera 25 지원 예정
<picture>
<source media="(min-width: 650px)" srcset="images/kitten-stretching.png">
<source media="(min-width: 465px)" srcset="images/kitten-sitting.png">
<img src="images/kitten-curled.png" alt="a cute kitten"> <!-- As the
fallback -->
</picture>

54. HTML5 - WebRTC
• Web Real-Time Communication
– Video/Audio/Data 및 P2P 통신 기능에 대한 Web 표준
– Video: 화상통화, 얼굴 또는 객체 인식, 다자간 컨퍼런싱
– Audio: 전화, 음성인식, 음성메일, 음성공유
– Data: 리치 메시징, 게임, 파일/스크린 공유
• 표준 현황 (2014년 4Q까지 Last Call Working Draft 예상)
– Media Capture and Streams (getUserMedia)
– WebRTC 1.0: Real-time Communication Between Browsers
• 모든 단말 간 화상통화 및 데이터 교환 가능
• 향후 IMS와 WebRTC 통합 예상

55. HTML5 – Web Components
• 개발자가 자체적으로 HTML 엘리먼트를 만드는 기술
– Templates, Decorators, Custom Element, Shadow DOM, HTML
imports 로 구성
• HTML 컴포넌트를 캡슐화 하여 쉽게 적용
• 제작한 컴포넌트 재활용하여 개발 효율화 가능
• Material Design with Polymer

56. ES6 - Promise
• ECMAScript 6 버전에 표준화 진행 중
• 비동기 코드 실행을 추상화한 오브젝트로 기존 Callback의
다중 중첩 복잡도 문제를 해결
• 비동기 API 프로그래밍을 동기 API 프로그래밍 스타일로 작
성할 수 있도록 하여 코드 Readability를 극대화
• W3C 웹 표준 API Spec에 활용

57. 정리 및 향후 전망 …

58. HTML5/Web에 대한 전망 (1/2)
• 네이티브와 격차 최소화 노력 지속
– 성능개선: ServiceWorker, <picture> and srcset attribute
– 신규 기능 확대 지원: WebRTC, Push, Manifest, Privileged APIs
– Web App 개발 최적화 (코드 관리 개선, 파편화 대응 등)
• 신규기능: ES6 Promise, Web Components 등
• 개발도구: 모바일 지원, 성능/로딩타임 Profiler 등
• 라이브러리: Polyfill, JS framework 등
• HTML5/Web 기술 장점 극대화하는 방향으로 발전
– 설치/업데이트 필요 없는 App 실행 환경
• URL 기반 App 실행, 항상 최신의 App 실행, Device 간 Sync 지원

59. HTML5/Web에 대한 전망 (2/2)
• IDC의 HTML5 향후 전망
– 가까운 미래(2017년)까지는 모바일 단말에서 Native App 대체 불가
– 그러나, 아래 분야에서는 HTML5 App 큰 성장 예상
• Content publishing app 분야(전자책/매거진), 기업용 App 분야,
Hybrid App 분야
• 가트너 2014년 모바일 예측
– 2017년까지 모바일 단말의 브라우저는 정교한 App 전달 플랫폼으
로 발전
• 새롭게 개발되는 web app의 50% 이상이 복잡한 자바스크립트로 구성
• 이러한 web app은 질 높은 사용자 경험 제공
– HTML5는 다양한 플랫폼 지원을 위한 최고의 기술이 될 전망
– 그러나 향후 몇 년간 성능, 파편화, 기술적 미성숙 이슈 존재