2017년 4월 19일 Vuetiful Korea 첫번째 밋업의 세번째 발표자료입니다.
Vue.js 한국어 사용자 모임에서 발표를 하게 된 디자이너, 그녀는 과연 Vue.js를 쓸 수 있을 것인가?
발표자료에서 소개되는 게임은 smilee.github.io/vuetiful-korea-170419 을 참고해 주시기 바랍니다.
2017년 4월 19일 Vuetiful Korea 첫번째 밋업의 세번째 발표자료입니다.
Vue.js 한국어 사용자 모임에서 발표를 하게 된 디자이너, 그녀는 과연 Vue.js를 쓸 수 있을 것인가?
발표자료에서 소개되는 게임은 smilee.github.io/vuetiful-korea-170419 을 참고해 주시기 바랍니다.
Thinkreals에서 앱개발을 담당하는 소프트웨어 엔지니어 @muik 입니다. 개발한 앱으로는 쿠폰모아, 포켓스타일 안드로이드앱이 있는데요. 지금까지 앱개발을 하며 하이브리드앱 필요성을 많이 느껴왔습니다. 아마 비슷한 분들이 많을꺼라 생각되어 이번에 하이브리드앱 도입 준비를 하며 경험한 것을 공유해보려 합니다.
Polymer의 기술기반인 Web Componets를 구성하는 표준 스펙들인 Custom Elements, HTML Imports, HTML Templates 그리고 Shadow DOM을 간략히 살펴본다.
Polymer의 아키텍처 및 기본적인 사용방법 그리고 material design이 적용된 paper elements 등을 살펴본다.
Thinkreals에서 앱개발을 담당하는 소프트웨어 엔지니어 @muik 입니다. 개발한 앱으로는 쿠폰모아, 포켓스타일 안드로이드앱이 있는데요. 지금까지 앱개발을 하며 하이브리드앱 필요성을 많이 느껴왔습니다. 아마 비슷한 분들이 많을꺼라 생각되어 이번에 하이브리드앱 도입 준비를 하며 경험한 것을 공유해보려 합니다.
Polymer의 기술기반인 Web Componets를 구성하는 표준 스펙들인 Custom Elements, HTML Imports, HTML Templates 그리고 Shadow DOM을 간략히 살펴본다.
Polymer의 아키텍처 및 기본적인 사용방법 그리고 material design이 적용된 paper elements 등을 살펴본다.
17. 컨테이너?
Metadata 파일
오디오와 비디오 파일을 담는 봉투
자신이 포함하고 있는 파일의 인코드 정보는 없음
OGG 컨테이너 : 테오라 Video + OGG Audio
O ( FireFox & Chrome & Opera )
MP4 컨테이너 : H.264 Video + AAC Audio
O ( Safari & Chrome & Flash & iPhone & iPad )
WebM 컨테이너 : VP8 Video + OGG Audio
O ( FireFox & Chrome & Opera & Flash)
구글+모질라
VP8 + WebM을 밀고 있음.
20. <audio>
<article class="sample">
<header><h2>Drums</h2></header>
<audio id="drums" controls>
<source src="sounds/ogg/drums.ogg" type="audio/ogg">
<source src="sounds/mp3/drums.mp3" type="audio/mpeg">
<a href="sounds/mp3/drums.mp3">Download drums.mp3</a>
</audio>
</article>
src를 여러 개 정의
지원하지 않으면 내려받기 링크 제공
29. 그분이 가시는 곳에
길이 만들어 지리라.
성인업계!!
전자상거래의 시작부터 플래시의 비약까지
인터넷에 강력한 영향을 끼치고 있음.
그런 분께서 플래시를 버리고
H.264로 인코딩한 HTML5 비디오를 서비스하고 있음!
30. 장애인을 위한 자막 서비스
<section class="transcript">
<h2>Transcript</h2>
<p>We'll drag the existing layer to the new button on the bottom of
the Layers palette to create a new copy.</p>
<p>Next we'll go to the Filter menu and choose "Gaussian Blur".
We'll change the blur amount just enough so that we lose a little
bit of the detail of the image.</p>
<p>Now we'll double-click on the layer to edit the layer and
change the blending mode to "Overlay". We can then adjust the
amount of the effect by changing the opacity slider.</p>
<p>Now we have a slightly enhanced image.</p>
</section>
31.
32. HTML5 video + canvas
http://craftymind.com/factory/html5video/CanvasVideo.html
http://craftymind.com/factory/html5video/CanvasVideo3D.html