W3C HTML5 Conference 2015 (오후) -개인 메모 정리

개인 메모 저장

모든 기술 문서는 여기에
http://www.html5forum.or.kr/front/knowhow/tech.jsp

--------------------------------------------

[브라우저엔진 오픈소스 현황]

발표자료 : http://www.html5forum.or.kr/api/filedown.jsp?filename=%ED%8A%B8%EB%9E%991_11_%EC%82%BC%EC%84%B1%EC%A0%84%EC%9E%90_%EC%9E%84%EB%8F%99%EC%9A%B0_%EC%B1%85%EC%9E%84_Trend_of_The_Open_Source_Web_Engines.pdf&folder=upload/board


크로미엄 (블링크) . 크롬 vs 웹킷 . 사파리 vs 모질라 . 파이어폭스

Web as a platform
. Convertor > Cordova. PhoneGap
. Os > Chrome os. Firefox os
 => 위 방법으로는 뭔가 부족하다.

[Progressive Web Apps의 특징들]


. Installable
 : 하이브리드와 다르게 검색사이트에서 클릭 시 바로 앱이 실행 되고 실행 중 설치를 유도 함.
. Connectivity independent
 : 인터넷 연결에 상관없이 동작
. Re-engageable
 : Push notification이 가능함 > 이를 사용 하여 수익. 재방문율을 높일 수 있음.
. Interoperability


[앱을 위한 표준 들]
. Web app manifest 표준
 : http://www.w3.org/TR/appmanifest/
 : 웹앱의 아이콘 설치하게 해 줌.


. Splash screen
. Service workers 표준
 : http://www.w3.org/TR/service-workers/
 : 오프라인. 백그라운드에서 task 수행 가능하게 함.

. Web Bluetooth 표준
 : 브라우저에서 접근
. Web USB 표준 . Chrome experimental
. Push api. Web notifications 표준들
 : http://www.w3.org/TR/push-api/
. Media capture and streams. WebRTC 표준
. Pointer Events 표준
 : 터치 압력. 각도 정보

-------------------------------------------

[모바일 웹 성능 최적화 동향 및 사례]

발표자료 : http://www.html5forum.or.kr/api/filedown.jsp?filename=%ED%8A%B8%EB%9E%991_12_SK%ED%94%8C%EB%9E%98%EB%8B%9B%EC%9E%84%EC%83%81%EC%84%9D_%EB%AA%A8%EB%B0%94%EC%9D%BC%EC%9B%B9%EC%84%B1%EB%8A%A5%EC%B5%9C%EC%A0%81%ED%99%94%EC%82%AC%EB%A1%80-W3C-2015.pdf&folder=upload/board

HTML5로 시럽 스토어 만드는 삽질기

고려사항
.타협불가 최소품질
. Native 수준 look motion

안드로이드 4.2 이상에서 가능한 수준
uI framework > Ionic - angularJS 기반 HTML5 Framework. Android/ios native style

Ionic 기능. 장점
. SPA dom cycle 관리
. Native style ui component
. Grade에 따른 성능 제어
. UI routing

GPU cPU acclation

Declarative animation vs JS animation
: Declarative animation
  . css 기반
  . Web kit엔진 에서 기본 최적화
  . Keyframe
  . Transition

: JS animation
  . Settimeout인 경우 frame drop
   : 화면은 60Hz. JS는 ms 단위
  . Vsync는 단말 성능에 좌우

Native 사용
. Push
. BLE
. Splash screen
. Cipherstorage
. Camera
. Image cropper
웹으로 80%정도 코딩

Scroll View
. 버전별 문제 있음
. Ionic Scroll View는 다양한 옵션(native scroll도 선택 가능)

Page navigation animation
. 페이지 깜박 안되도록 처리 필요

DOM element load timing
. 이벤트 (beforend. Afterenter. Load. Unload)에 따라서 분배해야 지 시간 잘약

Gradient. Box-shadow. Border radious 는 속도가 안나와서 제거

URL 기반 3rd party
Iframe vs 별도 Webview
. Iframe는 안드 4.2 이후에서 가능. 이전 버전은 안정성 이슈

* 최소 Android 4.2 이상. iOS 7.0 이상 앱 상용개발 가능
* UI layer 복잡도 고려 필요
* Ionic 성능 고려 필요

-------------------------------------------

[JerryScript와 IOT.js]

발표자료 : http://www.html5forum.or.kr/api/filedown.jsp?filename=%ED%8A%B8%EB%9E%991_13_%EC%82%BC%EC%84%B1%EC%A0%84%EC%9E%90_%EC%9D%B4%EC%84%B1%EC%9E%AC%EC%88%98%EC%84%9D_JerryScript_and_IoT.js-v1.0-20151207.pdf&folder=upload/board

JS 선택이유. 대중성. 쉬움.

JS 대신 JerryScript를 만든 이유는
V8를 IoT 기기에 올리기에는 거대한 footprint가 문제임. (ROM 10MB. RAM 8MB)

JerryScript 2014년 기준
.96kb bi ary size
.16kb runtime memory foot print
. Compact profile

IoT.js
. Node.js를 jerryscript로 가능하도록 함
(사진참고)

-------------------------------------------

[CSS round display 표준]

발표자료 : http://www.html5forum.or.kr/api/filedown.jsp?filename=%ED%8A%B8%EB%9E%991_21_Lg%EC%A0%84%EC%9E%90_%EC%86%A1%ED%9A%A8%EC%A7%84151209_HTML5_Conference_2015_CSS_Round_Display.pptx&folder=upload/board

2014.10 원형 디스플레이 css 확장안 제안

Media query media feature : device-radius
0이면 사각. 숫자면 외곽 curve radius

Shape-inside
모양에 맞춰서 내용을 안에 표시

Border-boundary
Display를 하면 border이 화면 내에서 표시

Polar-angle. Distance. Anchor. Origin
화면에 각도와 반지름으로 배치

박스모델 조정

Crosswalk. Blink 관련 Intel과 협업 중

-------------------------------------------

[최신 Web API Lighting Talk]

발표 시간이 부족해서 제대로 못 적었는데... 발표자료가 없다..

Web App Manifest

 : Splash screen은 manifest의 name, background_color, Icon 값을 기반하여 보여줌
별도의 프로세스. 아이콘 설치가능 (롤리팝 기준)


Service Worker
 : 페이지를 닫아도 web push notification을 받을 수 있음.


Push notification
 : 72%방문 증가 26%지출 증가 효과 - chrome dev summit

 : 필요사항들
   . Background service
   . Push register event
   . Notification UI
 > Web Push 표준 = 구독 + 받기
 : Gcm을 통해 sender id를 받은 Push server와 service worker 상에서 연결되어야 함.
 : 메세지를 service worker에서 받으면 UI로 알리고 UI 클릭 시 서비스 워커에서 notification 창으로 데이터를 전달한다.

 : FB에서 지원 중, 브라우저로 FB에 접속하면 push 수신 여부 팝업 표시 됨.

 : Native에서는 payload를 받을 수 있지만 web push는 payload 없이 event만 받고 있음.


Web Components
 : <template>내에 컴포넌트를 작성.
   . 브라우저에서 표시돠지 않음
 : <decorator> 컴포넌트를 꾸밀 때 사용. CSS 사용
 : <element> template를 Custom elements로 지정
   . 단 스크립트 방식을 사용하라.


Pointer Events
 : 입력을 추상화 하여 처리.
 : 특징
  . 기존 마우스. 터치. 타블렛. 펜. 인식 등 및 추후 모든 입력을 대상
  . 입력장치의 유형. 발생 이벤트 유형 확인 가능
  . 기울기. 압력 등의 추가 메소드 지원
 : 지원 > IE 10. FF. Webkit에 MS가 추가하였으나 실제 사용 불능
 : MS가 PC, mobile, tablet 등에서 사용하려고 만든 것이라고 보면됨...

W3C HTML5 Conference 2015 (오전) - 개인 메모 정리

개인 메모 저장

모든 기술 문서는 여기에
http://www.html5forum.or.kr/front/knowhow/tech.jsp

--------------------------------------------

Keynote 1 : 네이버가 바라보는 웹기술 및 환경 전망. 박종목 이사

요약 기사 :  http://www.zdnet.co.kr/news/news_view.asp?artice_id=20151209130727
Slide : http://www.slideshare.net/NaverEngineering/w3c-html5-conference-2015-naver


웹 파편화는 진행 중.

. adaptation cost 발생
. 사용자의 71%가 문제로 인식
. Browser. Web engine. Os. 제조사 등의 다양한 부분에서의 파편화

Native app을 HTML로 구현 시 기능 구현 가능율

 - Mobile browser, 37%
 - Web to native converter (ex 코도바), 63%
 - Native javascript api (ex 파폭), 97%

W3C Advancing web platform application testing cg 파편화 대응 그룹 생성됨.

Blink는 구글에서 주도하지만 opera에서도 함께 사용.

Chrome이 HTML5 feature를 잘 지원. 그에 반해 safari는 좀 떨어짐.

HTML5 지원은 600점 만점에 500대 이하. ECMA6 지원은 아직 요원함.


--------------------------------------------

Keynote 2 : 웹개발의 현재와 미래. 윤석찬

요약 기사 : http://www.zdnet.co.kr/news/news_view.asp?artice_id=20151210164611
Slide : http://slides.com/channy/keynote-html5-korea#/


웹의 수명은? Hakon Wium Lie 500년 이라고 함 (at 한국웹 20주년)

하지만 현실은 암울..

웹에서는 스펙을 기다리지는 말고 먼저 앞서 나가는 자세를 가지자.

웹기술에서 파편화는 당연한거다. 파편화가 사라지는 시점에서 웹기술 발전이 지지부진해 진다. (ex. 한국에서의 Internet Explorer 사용)

웹은 living standard이고 항상 진화한다.

웹 5년 주기설
 : 1995 웹의 탄생. 2000년 포털기반. 2005년 1인 미디어. 2010년 소셜웹 모바일

Front-end 변천
 : 1999 document
 : 2000 apps
 : 2010 frameworks

앱 종류 변천
 : Miltipage app >Singlepage app >Isomorphic application (Meteor, React)

새로운 스펙들의 범람으로 브라우저 업체들의 대응에 한계
> 개발자들은 라이브러리를 통해 대응(폴백 방식) => polyfill library 증가


[웹 기술의 미래 키워드들]

#ExtensibleWeb

. Wb는 기본수준 api집중
. 개발자는 높은 수준 기능 구현
. 새로운 기능들을 표준화 하는 선순환 구조 마련

#API as a Service

. 여러 js library dependency
. Api call의 증가
. Api의 business model 있음.
. Internal API 사용 증가. 예 netflix
=> #MicroServices


#MicroServices

. Bounded context
. Death star architecture desin
. 작은 서비스를 담당하는 팀이 구성되어 진행. Devops형태

Clould <- Devops -> 바른개발 <- Microservice -> SOA


--------------------------------------------

Keynote 3 : Future-proof Responsive Design (Florian Rivoal)

Slide : http://florian.rivoal.net/talks/responsive-design/


어떤 기기에 상관없이 device의 특성에 따라서 최상의 경험을 제공해 주는 것


Viewport
. 표준이 아님
. Vss에서 처리 되어야 함.

@viewport를 사용하라.

CSS Device Adaptation을 참고!!!
. 데스크탑에사도 사용 가능
. Ms edge는 다름. @-ms-viewport


Media query
. 컨텐트에 따라서 적용해야자 특정 디바이스에 따라서 미디어쿼리를 적용해서는 안된다.
. SVG에도 적용 가능하다.


Css tools
. Css multi column layout
 : 컬럼 수. 컬럼의 픽셀로 설정 가능.

. Flexbox
 : 버튼 배치할 때 도움이 될 수 있음.

. CSS frid layout
 : 아직 활성화 되지 않음.
 : 페이지 레이아웃 정할 때 손쉬움.
Longlive media features

사진 참고

Media query시 화면의 특징을 잘 잡아서 적용하라.
. 화면 hover. Update frequency
. 인쇄. Minresolution
. 예제: 사진 참고


--------------------------------------------

Session 1.1 : HTML5 이후 웹의 진화 (ETRI 전종홍 책임)

발표자료 : http://www.html5forum.or.kr/api/filedown.jsp?filename=%EC%98%A4%EC%A0%84%EC%84%B8%EC%85%981_1_ETRI_%EC%A0%84%EC%A2%85%ED%99%8D%EC%B1%85%EC%9E%84_20151209-AF-HTML5-r4.pdf&folder=upload/board

... 발표자료를 다시 봐야 할 듯

예상하는 2020년까지 발전 방향

. Web as a platform
. Native 대비 80% 성능
. Multi device multi screen
. 100억대의 bt 디바이그 연동 재어
. JS는 IoT의 기본 언어
. Web은 universial client


TOWARD WEB PLATFORM

. Open web platform
. HTML groups와 WebApps group간 차이 없음.
 => Web Platform Working Group 시작 2015 10. 9

HTML5 사용 시 문제점 순위
. 성능 > API > Tool

Application foundation
. 웹앱 관련 표준을 foundation 단위로 모아서 준비
. App life cycle foundation

WoT 관련 표준 들
. PresentationAPI
 : https://w3c.github.io/presentation-api/
. WebBluetoothAPI
 : https://webbluetoothcg.github.io/web-bluetooth/
. WebNFCAPI
 : https://w3c.github.io/web-nfc/
. SensorsAPI
 : https://w3c.github.io/sensors/


--------------------------------------------

Session 1.2 : Web Payment 동향 및 전망 (이동산 이사)

웹 결재 표준화

. 2011년 Web payments CG 시작
. US FRB에서 적극 참여 중.
. Manu Spony leading.
. 알리바바 표준 참여.
. 페이팔은 특허로 참여 안함.

Payment를 Automotive쪽으로 응용 시나리오를 고려 중
: Streamimg Payments. 운행비. 톨비


Inter Ledger protocol
. 다양한 Ledger간 상호교류를 위한 방법론
. Ledger 은행 계정. 페이팔 계정. 알리페이 계정 등의 서비스를 제공하는 업체들
. Escrow를 사용한 transaction 사용

Web APIs on mobile browsers

mobile browser내의 javaScript에서 device subsystem을 사용할 수 있는 방법을 찾아봄..

결론은 HTML5인것 같으나
아직까지는 HTML5만으로 device subsystem을 사용하기에는 무리인듯하다.
(아래 http://mobilehtml5.org 링크참고)
역시나 하이브리드와 같은 방법으로 native를 사용 해야 하는것인가?


browser별로 사용 가능한 APIs들을 표로 정리한 사이트
: http://mobilehtml5.org/


JAVASCRIPT APIS CURRENT STATUS
: http://www.w3.org/standards/techs/js#w3c_all

MOBILE WEB APPLICATIONS CURRENT STATUS
: http://www.w3.org/standards/techs/mobileapp#w3c_all

WebAPI, MDN
: https://developer.mozilla.org/ko/docs/WebAPI
: https://wiki.mozilla.org/WebAPI

찾다보니 옛날에 아래와 같은 시도도 있었다고 함.
(정말 의미 없음.....)

Web Platform 기술과 표준화 동향

http://www.slideshare.net/catsy00/web-platform

BONDI 

: http://en.wikipedia.org/wiki/BONDI_(OMTP)

2008년에 OMTP(Open Mobile Teminal Platform)이 결성되어 2009년에 1.0을 MWC에서 릴리즈 한것 같지만 2010년에 WAC에 흡수된 것으로 보임.

API들은 phone에서 제공하는 기능들은 대부분 정의가 되어 있음. 시기가 꽤 오래전이라 feature phone들에 적용되었음. Symbina, Windows mobile, bada 등

WAC(Wholesale Applications Community)

: http://en.wikipedia.org/wiki/Wholesale_Applications_Community

사업자 및 여러 회사들이 모여서 만든 연합이었지만 아무것도 없이 GSMA의 One API로 옮겨진듯 하다. 그리고 WAC에 대해서는 아래 posting에서 설명을 잘 해주고 있고 내용에 절대적으로 동감...

가진게 없는 표준화의 의지, 통합 앱스토어, 모바일 컨텐츠 이야기

: http://www.mobizen.pe.kr/950

OneAPI

: http://en.wikipedia.org/wiki/OneAPI

: http://www.gsma.com/oneapi/

at&t, Bell, Tmobile, orange, rogers, telus, vodafon 이 참가하고 있음.

그리고 business model을 잠깐 보니 OneAPI에서는 기존 BONDI와 달리 device의 기능들을 API로 제공하는 것이 아니라 operator에서 특정 기능(sms, mms, location, payment)을 API(Network APIs로 부르는 것 같음..)로 제공하는 것으로 보인다.. 

그래서 개발자는 operator에서 제공하는 API를 사용하여 app을 만들고 사용자가 해당 app을 이용하는 형태이다. 돈은 개발자가 API를 사용할 때 내거나 아니면 사용자가 app 이용 시 API 사용 금액을 내던가 둘중 하나이다.

그래서 제공되는 API들이 모두 REST style이고 서버는 아마도 operator의 서버 일 것이고 operator에서 제공할 수 있는 정보들인 Location, SMS, MMS, Payment, Device capability, Data connection들의 API만 제공되고 있음.

GSMA OneAPI seminar 자료들(http://www.gsma.com/oneapi/mwcoperatorseminar/)을 보다보니 향후 3rd party service들을 operator에서 수용한다면 관련 REST API들도 나올 듯.. 

html5 canvas를 blob data로 변환하여 POST upload하는 방법

mobile web상에서 display하는 image를 업로드 하는 방법을 찾아봄.

일반적으로는 form data를 이용하여 선택된 image 파일을 업로드 하지만
form data 없이 load된 image나 Canvas를 업로드 하는 방법을 찾고자 하였음.

참고로 전송하려는 image(canvas내 image라도)가 다른 site에서 loading 된 것이라면
JavaScript의 동일 도메인 참조정책으로 인해 아래 방법을 사용할 수 없다.
 : http://stackoverflow.com/questions/2390232/why-does-canvas-todataurl-throw-a-security-exception

up vote51down voteaccepted

In the specs it says: Whenever the toDataURL() method of a canvas element whose origin-clean flag is set to false is called, the method must raise a SECURITY_ERR exception. If the image is coming from another server I don't think you can use toDataURL() share|improve this answer answered Mar 5 '10 at 22:24 Bob 4,86332137

Same-Origin Policy(동일 도메인 정책)
: http://charlie0301.blogspot.kr/2013/12/jquery-ajax-same-origin-policy-jsonp.html

-----------------------------------------------------------------

Canvas를 image/jpeg 형식의 blog data로 변환한 뒤 XMLHttpRequest를 사용하여 POST upload 하는 방법
: http://stackoverflow.com/questions/18253378/javascript-blob-upload-with-formdata

function uploadCanvasData()
{
    var canvas = $('#ImageDisplay').get(0);
    var dataUrl = canvas.toDataURL("image/jpeg");
    var blob = dataURItoBlob(dataUrl);
    var formData = new FormData();
    formData.append("file", blob);

    var request = new XMLHttpRequest();
    request.onload = completeRequest;

    request.open("POST", "IdentifyFood");
    request.send(formData);
}

function dataURItoBlob(dataURI)
{
    var byteString = atob(dataURI.split(',')[1]);
    var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]
    var ab = new ArrayBuffer(byteString.length);
    var ia = new Uint8Array(ab);
    for (var i = 0; i < byteString.length; i++)
    {
        ia[i] = byteString.charCodeAt(i);
    }

    var bb = new Blob([ab], { "type": mimeString });
    return bb;
}

answered Aug 15 '13 at 22:54

Max Ehrlich
639420

먼저 Canvas.toDataURL()을 통해서 DataURI를 뽑아낸다.

Syntax

canvas.toDataURL(type, encoderOptions);

: https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement.toDataURL

toDataURL() method는 사용자가 지정한 encoderOptions(default는 PNG)의 MIME을 가지는 96dpi resolution의 image dataURI를 제공한다.
(canvas의 height, width중 하나라도 0이면 "data:,"를 리턴한다고 함.)

제공되는 DataURI의 형식은 다음과 같다.

Syntax

The data URIs have the following syntax:

data:[<mediatype>][;base64],<data>

: https://developer.mozilla.org/en-US/docs/Web/HTTP/data_URIs

RFC 2397에 따라 해당 data를 document에 첨부할 수 있도록 위의 syntax로 표현하는 것이고 base64 encoding 방법이라던지 사용되는 protocol은 위키피디아를 참고하면 될듯

그래서 제공된 DataURI를 가지고 dataURItoBlob()함수를 사용하여 실제 data부분(<data>)을 뽑아내고 blob data로 변환한뒤 formdata에 삽입하여 POST uploading을 하게 된다.


Canvas.toDataURL() 사용예
http://m.mkexdev.net/106
http://www.html5canvastutorials.com/advanced/html5-canvas-get-image-data-url/

MDN에서 binary data를 보내는 방법에 대해서 설명한 포스팅
: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Sending_and_Receiving_Binary_Data


dataURI를 blob으로 바꾸는 함수의 다른 버전이다.
: http://stackoverflow.com/questions/4998908/convert-data-uri-to-file-then-append-to-formdata