(2015년 상반기)

HTML5 및 Hybrid App 최신 동향

이원석

ETRI 표준연구센터

W3C HTML5 KIG/KCG 의장

HTML5 주요 업계 동향 정리 …

<Source: http://www.quirksmode.org/blog/archives/2014/12/a_new_microsoft.html (PETER-PAUL KOCH) >

Jan. 2015

<Source: http://mozvr.com/posts/webvr-lands-in-nightly/ >

Jan. 2015

<Source: http://youtube-eng.blogspot.kr/2015/01/youtube-now-defaults-to-html5_27.html >

Jan. 2015

<Source: http://www.zdnet.co.kr/news/news_view.asp?artice_id=20150209161124 >

Feb. 2015

<Source: http://thenextweb.com/apps/2015/03/18/google-uses-new-techniques-to-speed-up-javascript-load-times-in-latest-chrome-release/ >

…..

Mar. 2015

<Source: http://fossbytes.com/enable-offline-browsing-in-google-chrome/ >

Mar. 2015

<Source: http://www.pressreleaserocket.net/fliphtml5-introduces-html5-flipbook-solution-for-users-to-improve-content-management/107675/ >

FLIPBOOK

- 모바일용 HTML5 기반 전자출판 플랫폼

- 카탈로그, 온라인 잡지, 전자책 등

Mar. 2015

<Source: http://fliphtml5.com/ >

Mar. 2015

<Source: http://www.ghacks.net/2015/03/03/media-source-extensions-progress-in-firefox/ >

파이어폭스 37부터 MSE 지원

- 유튜브의 MSE 활용 개선 기능 사용 가능

Mar. 2015

<Source: http://www.the42.ie/opera-coast-iphone-1972024-Mar2015/?r_dir_d=1 >

Opera Coast

iPhone과 iPad에 특화된 Opera 브라우저

단순한 UX를 갖은 앱 스타일의 브라우저

속도개선과 지속적인 신규 기능 추가 중

이미지, 동영상 압축기술 추가

Mar. 2015

<Source: http://www.zdnet.com/article/googles-desktop-chrome-data-saver-aims-to-slash-data-costs/ >

크롬 데스크탑을 위한 Data Saver extension

Mobile Chrome의 Proxy 기반 데이터 압축 처리 방식을

extension 형태로 지원

모바일 망에 테더링하여 사용시 유용

Mar. 2015

<Source: http://www.techtimes.com/articles/42353/20150326/google-chrome-will-adopt-internet-explorers-pointer-events-api.htm >

크롬 브라우저가 Pointer Event API 지원 예정

마우스, 터치, 스타일러스 펜 등 다양한 이벤트를 추상화한

API

2014년하반기에 Chromium open source 커뮤니티에서

구글은 지원 계획인 없다고함

현재 IE 10에서지원하며 Firefox 지원 예정

Mar. 2015

<Source: http://businesswireindia.com/news/news-details/uc-browsers-crosses-20-million-downloads-mobango/43088 >

중국의 UC Browser가 인도에서 42% 점유율로 1위

(via StatCounter)

Mar. 2015

<Source: http://www.independent.co.uk/life-style/gadgets-and-tech/news/microsoft-kills-off-internet-explorer-in-move-to-regain-a-stake-in-web-30-10117798.html >

IE의 유효기간만료됨!

코드명 스파르탄브라우저 출시 예정

Mar. 2015

<Source: http://arstechnica.com/information-technology/2015/03/hands-on-with-vivaldi-the-new-web-browser-for-power-users/ >

파워 유저를 위한 새로운 웹 브라우저

오페라 전 CEO의 주도로 개발

Mar. 2015

<Source: http://www.pcworld.com/article/2896637/google-chrome-beta-brings-push-notifications-to-your-browser.html >

Mar. 2015

<Source: http://www.pcworld.com/article/2903728/googles-android-runtime-for-chrome-to-bring-native-android-apps-to-chromebooks.html >

April 2015

<Source: http://m.biz.chosun.com/svc/article.html?contid=2015040103561 >

April 2015

<Source: http://m.businesspost.co.kr/news/articleView.html?idxno=11178 >

April 2015

<Source: http://www.kbench.com/?q=node/148426 >

April 2015

<Source: http://fossbytes.com/enable-offline-browsing-in-google-chrome/ >

April 2015

<Source: https://blog.mozilla.org/security/2015/04/30/deprecating-non-secure-http/ >

안전하지 않은 HTTP를 단계적으로 제거

- 웹이 나아가야 할 방향은 HTTPS

두 개의 큰 정책 진행

- 모든 새로운 기능은 안전한 웹사이트에서만 사용하도록 허용

- 안전하지 않은 웹사이트가 브라우저의 기능을 사용하는 것을 점진적으

로 제한. 특히 사용자 보안과 프라이버시 관련 기능

April 2015

<Source: http://www.thesempost.com/mozilla-deprecate-http-firefox/ >

April 2015

<Source: https://www.chromium.org/Home/chromium-security/marking-http-as-non-secure >

사용자에게 HTTP는 데이터 보안성이 없음을 명확히 보

여주는 것이 목표

April 2015

<Source: http://blogs.windows.com/msedgedev/2015/05/13/announcing-media-capture-functionality-in-microsoft-edge/ >

May. 2015

<Source: http://blogs.windows.com/msedgedev/2015/05/19/bringing-web-audio-to-microsoft-edge-for-interoperable-gaming-and-enthusiast-media/ >

May. 2015

<Source: http://techcrunch.com/2015/05/21/youtube-live-streams-get-html5-player-and-now-support-60fps-playback/ >

May. 2015

<Source: http://blogs.microsoft.com/firehose/2015/05/20/microsoft-edge-includes-web-audio-for-gaming-and-audio-media-apps/ >

May. 2015

<Source: http://www.engadget.com/2015/05/20/chrome-midi-support/ >

May. 2015

<Source: http://www.w3.org/blog/2015/05/building-the-web-of-things/ >

May. 2015

<Source: http://blog.teamtreehouse.com/ionic-reigniting-native-vs-html5-debate >

June. 2015

<Source: https://dev.opera.com/blog/installable-web-apps/ >

June. 2015

<Source: http://www.2ality.com/2015/06/web-assembly.html >

June. 2015

<Source: https://brendaneich.com/2015/06/from-asm-js-to-webassembly/ >

June. 2015

<Source: https://twitter.com/satefan/status/608093548827664384 >

애플 HTTP HTTPS

- iOS9과 OS X 10.11은 HTTP 미지원

- HTTP 사용은 app manifest에서 예외처리 필요

June. 2015

<Source: http://techcrunch.com/2015/07/08/chinas-wozlla-lands-2m-for-its-html5-game-development-platform/ >

July 2015

<Source: http://www.theverge.com/2015/7/13/8948459/adobe-flash-insecure-says-facebook-cso >

July 2015

<Source: http://www.theverge.com/2015/7/14/8957177/mozilla-blocks-flash-as-facebook-security-chief-calls-for-its-death >

July 2015

<Source: http://www.vexflow.com/ >

July 2015

<Source: https://blogs.windows.com/msedgedev/2015/07/15/microsoft-edge-and-web-components/ >

July 2015

<Source: https://developers.google.com/web/updates/2015/07/interact-with-ble-devices-on-the-web >

July 2015

<Source: https://www.youtube.com/watch?v=1LV1Fk5ZXwA >

July 2015

<Source: http://arstechnica.com/gadgets/2015/07/meet-googles-eddystone-a-flexible-open-source-ibeacon-fighter/ >

Eddystone

- 오픈소스비콘 포맷

- 애플 iBeacon과 에코시스템경쟁

- 3가지 Frame type 제공

앱을 위한 UUID, 웹을 위한 URLs

Ephemeral Identifiers (EIDs) – 권한이 있

는 사용자만 읽을 수 있음

July 2015

Physical Web

• 배경

– 한번 사용하기 위해서 App을 설치하는 것은 과잉

– URL을 사용해서 IoT object와 연결

• 사용자 시나리오

– 버스 정류장에 가면 다음 버스 도착 정보 제공

– 주차권 자동판매기 / 자동판매기에 가면 지불 페이지 제공

– ZipCar는 등록페이지를 제공하여 사용자가 바로 차를 가지고 떠날 수

있도록함

July 2015

< source: http://www.zdnet.com/article/googles-physical-web-project-looks-to-inject-internet-of-things-with-more-search/ >

Web 검색 유사한 개념

신호세기, 사용자 선호도 반영하여

List up

http://safeurl.com/appurl?app=zipcar

July 2015

Physical Web

• BLE Beacon 뿐아니라 mDNS, SSDP/UPnP도 활용

• URIBeacon 판매사

– Blesh

– KST

– Accent Systems

– iBlio

– BKON

– LilyPad-nano51822

– GoPlus

– BlueUp

– TwoCanoes

July 2015

Physical WebJuly 2015

<Source: https://www.youtube.com/watch?v=1yaLPRgtlR0 >

July 2015

<Source: https://www.youtube.com/watch?v=FuJUrUxl7e8 >

July 2015

<Source: http://www.quirksmode.org/blog/archives/2015/07/stop_pushing_th.html >

July 2015

<Source: https://jakearchibald.com/2015/if-we-stand-still-we-go-backwards/ >

Aug. 2015

<Source: https://dev.opera.com/articles/on-a-moratorium-on-new-browser-features/ >

Aug. 2015

<Source: http://www.zdnet.co.kr/news/news_view.asp?artice_id=20150812085422 >

Aug. 2015

<Source: http://www.sitepoint.com/using-healthkit-with-a-cordova-app/ >

Aug. 2015

<Source: http://devdactic.com/healthkit-app-with-ionic/ >

Aug. 2015

<Source: https://www.airpair.com/javascript/posts/switching-from-ios-to-ionic >

Aug. 2015

<Source: https://www.webreflection.co.uk/blog/2015/08/08/bringing-ssl-to-your-private-network >

Aug. 2015

<Source: http://techcrunch.com/2014/11/18/mozilla-eff-and-others-band-together-to-provide-free-ssl-certificates/ >

<Source: http://www.sitepoint.com/browser-trends-august-2015-chrome-exceeds-50/ >

Aug. 2015

<Source: http://fortune.com/2015/08/18/facebook-google/ >

Aug. 2015

<Source: http://www.engadget.com/2015/08/04/youtube-rolls-out-new-html5-player/ >

Aug. 2015

<Source: http://www.forbes.com/sites/johnrampton/2015/08/13/how-the-physical-web-will-change-local-marketing-forever/ >

Aug. 2015

<Source: https://www.hackster.io/eely22/physical-web-controlled-candy-machine >

Aug. 2015

<Source: http://developerboards.att.lithium.com/t5/AT-T-Developer-Program-Blogs/Top-19-Companies-in-WebRTC/ba-p/40453 >

Aug. 2015

<Source: http://www.w3.org/TR/2015/WD-dpub-css-priorities-20150820/ >

전자출판 업계에서 바라는 CSS 기능 우선순위

- 주요 기능은 모든 브라우저가 지원할 수 있도록 독려

Aug. 2015

<Source: http://www.makeuseof.com/tag/running-chrome-extensions-in-firefox-what-you-need-to-know/ >

Aug. 2015

<Source: https://www.youtube.com/watch?v=SGquE_ywE8g >

Aug. 2015

<Source: http://www.zdnet.com/article/amazon-ditches-flash-ads-amid-ad-industry-push-towards-html5-ads/ >

Sept. 2015

<Source: http://thenextweb.com/insider/2015/09/02/chrome-custom-tabs-makes-transitioning-from-app-to-the-web-insanely-fast/ >

Sept. 2015

<Source: https://www.talater.com/upup/ >

Sept. 2015

Offline first library using Service Workers

<Source: http://aomedia.org/press-release/alliance-to-deliver-next-generation-open-media-formats/ >

Sept. 2015

<Source: http://dev.modern.ie/platform/status/webmcontainer/ >

Sept. 2015

<Source: https://hacks.mozilla.org/2015/08/pointer-events-now-in-firefox-nightly/ >

Sept. 2015

Sept. 2015

Sept. 2015

<Source: http://thenextweb.com/apps/2015/09/07/starcraft-now-works-in-the-browser-and-its-amazing/ >

Sept. 2015

<Source: http://www.pressreleaserocket.net/adplugg-adds-support-for-responsive-html5-ads/310022/ >