2014 html5 총정리

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

Upload: wonsuk-lee

Post on 21-Apr-2017

25.723 views

Category:

Internet


0 download

TRANSCRIPT

Page 1: 2014 HTML5 총정리

2014년 HTML5 총정리

이 원 석 / 삼성전자

W3C System Applications WG 의장

W3C HTML5 Korean Interest Group 의장 @wonsuk73

Page 2: 2014 HTML5 총정리

HTML5 주요 업계 동향 정리 …

Page 5: 2014 HTML5 총정리

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

Page 6: 2014 HTML5 총정리

<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 …

Page 7: 2014 HTML5 총정리

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

Feb. 2014

Page 8: 2014 HTML5 총정리

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

Page 9: 2014 HTML5 총정리

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

Page 10: 2014 HTML5 총정리

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

Mar. 2014

Page 12: 2014 HTML5 총정리

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

Page 13: 2014 HTML5 총정리

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

Page 16: 2014 HTML5 총정리

<source: https://status.modern.ie/ >

April 2014

Page 17: 2014 HTML5 총정리

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

Page 18: 2014 HTML5 총정리

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

Page 19: 2014 HTML5 총정리

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

May 2014

Page 21: 2014 HTML5 총정리

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

Page 22: 2014 HTML5 총정리

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

Page 25: 2014 HTML5 총정리

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

Page 26: 2014 HTML5 총정리

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‘

Page 28: 2014 HTML5 총정리

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

Page 29: 2014 HTML5 총정리

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

Page 31: 2014 HTML5 총정리

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

Page 32: 2014 HTML5 총정리

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

Page 33: 2014 HTML5 총정리

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

Page 35: 2014 HTML5 총정리

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

Page 36: 2014 HTML5 총정리

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

Page 37: 2014 HTML5 총정리

<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 지원

Page 38: 2014 HTML5 총정리

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

Oct. 2014

Page 39: 2014 HTML5 총정리

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

Page 40: 2014 HTML5 총정리

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

Page 42: 2014 HTML5 총정리

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

Nov. 2014

Page 43: 2014 HTML5 총정리

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

Page 44: 2014 HTML5 총정리

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)

Page 45: 2014 HTML5 총정리

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

Dec. 2014

Page 46: 2014 HTML5 총정리

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

Dec. 2014

Page 47: 2014 HTML5 총정리

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

Page 48: 2014 HTML5 총정리

2014년

W3C HTML5 핵심 표준 개발 현황 …

Page 50: 2014 HTML5 총정리

HTML5 - Service Workers

오프라인 지원: 개발자가 Web app caching 관리

백그라운드 실행 지원

Persistent 시스템 이벤트 처리 (Push, Alarm 등) 지원

네이티브 앱 수준의 UX 제공 가능

Chromium, Mozilla에서 Top Priority Feature

< source: http://www.w3.org/TR/service-workers/ >

Page 51: 2014 HTML5 총정리

HTML5 – Manifest format

Web App의 인스톨 정보 제공

Name, Icon, Start URL, Orientation 등

홈스크린 설치, 태스크 관리자 통합 가능

ServiceWorker 오프라인 기능과 함께

Native와 같은 사용자 경험 제공

Chrome 39부터 지원

< source: http://www.w3.org/TR/pointerevents/ >

Page 52: 2014 HTML5 총정리

HTML5 – Push API

CP가 단말에 메시지를 Web Push를 이용하여 전송

사용자는 Web 페이지에서 Push 서비스 구독 신청

Browser가 실행되지 않은 상황에서도 message 수신

소규모 CP도 네이티브 App 개발 없이 Web에서 Push

사용 가능

< source: http://www.w3.org/TR/push-api/ >

Page 53: 2014 HTML5 총정리

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>

Page 54: 2014 HTML5 총정리

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 통합 예상

Page 55: 2014 HTML5 총정리

HTML5 – Web Components

• 개발자가 자체적으로 HTML 엘리먼트를 만드는 기술 – Templates, Decorators, Custom Element, Shadow DOM, HTML

imports 로 구성

• HTML 컴포넌트를 캡슐화 하여 쉽게 적용

• 제작한 컴포넌트 재활용하여 개발 효율화 가능

• Material Design with Polymer

Page 56: 2014 HTML5 총정리

ES6 - Promise

• ECMAScript 6 버전에 표준화 진행 중

• 비동기 코드 실행을 추상화한 오브젝트로 기존 Callback의

다중 중첩 복잡도 문제를 해결

• 비동기 API 프로그래밍을 동기 API 프로그래밍 스타일로 작

성할 수 있도록 하여 코드 Readability를 극대화

• W3C 웹 표준 API Spec에 활용

Page 57: 2014 HTML5 총정리

정리 및 향후 전망 …

Page 58: 2014 HTML5 총정리

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 지원

Page 59: 2014 HTML5 총정리

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는 다양한 플랫폼 지원을 위한 최고의 기술이 될 전망

– 그러나 향후 몇 년간 성능, 파편화, 기술적 미성숙 이슈 존재

Page 60: 2014 HTML5 총정리