Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

2014 HTML5 총정리

26,136 views

Published on

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

Published in: Internet

2014 HTML5 총정리

  1. 1. 2014년 HTML5 총정리 이 원 석 / 삼성전자 W3C System Applications WG 의장 W3C HTML5 Korean Interest Group 의장 @wonsuk73
  2. 2. HTML5 주요 업계 동향 정리 …
  3. 3. <source: http://www.2ality.com/2014/01/web-platform-2014.html > Jan. 2014
  4. 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. 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. 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. 7. <source: http://html5hub.com/will-the-performance-of-html5-ever-become-indistinguishable-from-that-of-native-code/> Feb. 2014
  8. 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. 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. 10. <source: http://html5hub.com/will-the-performance-of-html5-ever-become-indistinguishable-from-that-of-native-code/> Mar. 2014
  11. 11. <source: https://hacks.mozilla.org/2014/03/audio-tags-web-components-web-audio-%E2%99%A5/ > Mar. 2014
  12. 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. 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. 14. <source: http://jakearchibald.com/2014/service-worker-first-draft/ > April 2014
  15. 15. <source: http://austinhallock.com/2014/04/07/the-rise-of-the-mobile-web/ > April 2014
  16. 16. <source: https://status.modern.ie/ > April 2014
  17. 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. 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. 19. <source: http://thenextweb.com/insider/2014/05/01/ie11-market-share-passes-ie10-ie9-combined-chrome-cements-lead-firefox/ > May 2014
  20. 20. <source: http://jakearchibald.com/2014/service-worker-first-draft/ > May 2014
  21. 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. 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. 23. <source: http://techblog.netflix.com/2014/06/html5-video-in-safari-on-os-x-yosemite.html> June 2014
  24. 24. <source: http://blog.ludei.com/webgl-ios-8-safari-webview/ > June 2014
  25. 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. 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. 27. <source: http://w3c.github.io/elements-of-html/> July 2014
  28. 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. 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. 30. <source: https://medium.com/@luisvieira_gmr/html5-prefetch-1e54f6dda15d > Aug. 2014
  31. 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. 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. 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. 34. <source: http://labs.ft.com/2014/09/polyfills-as-a-service/ > Sept. 2014
  35. 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. 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. 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. 38. <source: http://readwrite.com/2014/10/02/html5-apple-ios-8-wkwebview> Oct. 2014
  39. 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. 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. 41. <source: http://readwrite.com/2014/11/17/html5-javascript-everywhere-mobile-tom-dale-emberjs > Nov. 2014  이미 많은 네이티브 App이 HTML5를 이 용하여 구현
  42. 42. <source: http://andreasgal.com/2014/11/16/vp8-and-h-264-to-both-become-mandatory-for-webrtc/> Nov. 2014
  43. 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. 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. 45. <source: http://www.smashingmagazine.com/2014/12/05/enhancing-ux-with-the-web-speech-api/> Dec. 2014  …
  46. 46. <source: http://jakearchibald.com/2014/offline-cookbook/> Dec. 2014
  47. 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. 48. 2014년 W3C HTML5 핵심 표준 개발 현황 …
  49. 49. HTML5 Spec < source: http://www.w3.org/TR/2014/REC-html5-20141028/ >  W3C HTML5 Spec 최종 표준 공개 (10월 28일)
  50. 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. 51. HTML5 – Manifest format  Web App의 인스톨 정보 제공  Name, Icon, Start URL, Orientation 등  홈스크린 설치, 태스크 관리자 통합 가능  ServiceWorker 오프라인 기능과 함께 Native와 같은 사용자 경험 제공  Chrome 39부터 지원 < source: http://www.w3.org/TR/pointerevents/ >
  52. 52. HTML5 – Push API  CP가 단말에 메시지를 Web Push를 이용하여 전송  사용자는 Web 페이지에서 Push 서비스 구독 신청  Browser가 실행되지 않은 상황에서도 message 수신  소규모 CP도 네이티브 App 개발 없이 Web에서 Push 사용 가능 < source: http://www.w3.org/TR/push-api/ >
  53. 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. 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. 55. HTML5 – Web Components • 개발자가 자체적으로 HTML 엘리먼트를 만드는 기술 – Templates, Decorators, Custom Element, Shadow DOM, HTML imports 로 구성 • HTML 컴포넌트를 캡슐화 하여 쉽게 적용 • 제작한 컴포넌트 재활용하여 개발 효율화 가능 • Material Design with Polymer
  56. 56. ES6 - Promise • ECMAScript 6 버전에 표준화 진행 중 • 비동기 코드 실행을 추상화한 오브젝트로 기존 Callback의 다중 중첩 복잡도 문제를 해결 • 비동기 API 프로그래밍을 동기 API 프로그래밍 스타일로 작 성할 수 있도록 하여 코드 Readability를 극대화 • W3C 웹 표준 API Spec에 활용
  57. 57. 정리 및 향후 전망 …
  58. 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. 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는 다양한 플랫폼 지원을 위한 최고의 기술이 될 전망 – 그러나 향후 몇 년간 성능, 파편화, 기술적 미성숙 이슈 존재

×