(2015년 상반기) HTML5 및 Hybrid app 최신 동향

1. (2015년 상반기)
HTML5 및 Hybrid App 최신 동향
이원석
ETRI 표준연구센터
W3C HTML5 KIG/KCG 의장

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

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

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

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

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

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

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

9. <Source: http://www.pressreleaserocket.net/fliphtml5-introduces-html5-flipbook-solution-for-users-to-improve-content-management/107675/ >
FLIPBOOK
- 모바일용 HTML5 기반 전자출판 플랫폼
- 카탈로그, 온라인 잡지, 전자책 등
Mar. 2015

10. <Source: http://fliphtml5.com/ >
Mar. 2015

11. <Source: http://www.ghacks.net/2015/03/03/media-source-extensions-progress-in-firefox/ >
파이어폭스 37부터 MSE 지원
- 유튜브의 MSE 활용 개선 기능 사용 가능
Mar. 2015

12. <Source: http://www.the42.ie/opera-coast-iphone-1972024-Mar2015/?r_dir_d=1 >
Opera Coast
 iPhone과 iPad에 특화된 Opera 브라우저
 단순한 UX를 갖은 앱 스타일의 브라우저
 속도개선과 지속적인 신규 기능 추가 중
 이미지, 동영상 압축기술 추가
Mar. 2015

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

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

15. <Source: http://businesswireindia.com/news/news-details/uc-browsers-crosses-20-million-downloads-mobango/43088 >
중국의 UC Browser가 인도에서 42% 점유율로 1위
(via StatCounter)
Mar. 2015

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

17. <Source: http://arstechnica.com/information-technology/2015/03/hands-on-with-vivaldi-the-new-web-browser-for-power-users/ >
 파워 유저를 위한 새로운 웹 브라우저
 오페라 전 CEO의 주도로 개발
Mar. 2015

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

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

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

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

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

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

24. <Source: https://blog.mozilla.org/security/2015/04/30/deprecating-non-secure-http/ >
안전하지 않은 HTTP를 단계적으로 제거
- 웹이 나아가야 할 방향은 HTTPS
두 개의 큰 정책 진행
- 모든 새로운 기능은 안전한 웹사이트에서만 사용하도록 허용
- 안전하지 않은 웹사이트가 브라우저의 기능을 사용하는 것을 점진적으
로 제한. 특히 사용자 보안과 프라이버시 관련 기능
April 2015

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

26. <Source: https://www.chromium.org/Home/chromium-security/marking-http-as-non-secure >
사용자에게 HTTP는 데이터 보안성이 없음을 명확히 보
여주는 것이 목표
April 2015

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

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

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

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

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

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

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

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

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

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

37. <Source: https://twitter.com/satefan/status/608093548827664384 >
애플 HTTP  HTTPS
- iOS9과 OS X 10.11은 HTTP 미지원
- HTTP 사용은 app manifest에서 예외처리 필요
June. 2015

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

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

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

41. <Source: http://www.vexflow.com/ >
July 2015

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

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

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

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

46. Physical Web
• 배경
– 한번 사용하기 위해서 App을 설치하는 것은 과잉
– URL을 사용해서 IoT object와 연결
• 사용자 시나리오
– 버스 정류장에 가면 다음 버스 도착 정보 제공
– 주차권 자동판매기 / 자동판매기에 가면 지불 페이지 제공
– ZipCar는 등록페이지를 제공하여 사용자가 바로 차를 가지고 떠날 수
있도록함
July 2015

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

48. Physical Web
• BLE Beacon 뿐아니라 mDNS, SSDP/UPnP도 활용
• URIBeacon 판매사
– Blesh
– KST
– Accent Systems
– iBlio
– BKON
– LilyPad-nano51822
– GoPlus
– BlueUp
– TwoCanoes
July 2015

49. Physical Web
July 2015

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

67. <Source: http://www.w3.org/TR/2015/WD-dpub-css-priorities-20150820/ >
전자출판 업계에서 바라는 CSS 기능 우선순위
- 주요 기능은 모든 브라우저가 지원할 수 있도록 독려
Aug. 2015

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

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

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

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

72. <Source: https://www.talater.com/upup/ >
Sept. 2015
Offline first library using Service Workers

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

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

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

76. Sept. 2015

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

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