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
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
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
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
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
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‘
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
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>
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
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
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)
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
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에 활용
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는 다양한 플랫폼 지원을 위한 최고의 기술이 될 전망
– 그러나 향후 몇 년간 성능, 파편화, 기술적 미성숙 이슈 존재