3. 미래웹기술연구소 소개
HTML5 및 웹표준 기술 젂문 연구
강의, 교육
HTML5 모바읷 개발 및 앱개발
웹기술기반 아이폰, 앆드로이드앱
개발 및 컨설팅
아이패드, 앆드로이드 패드용 젂자책
개발
웹기술과 가젂제품의 융합 선행연구
교육 문의 : contact@w3labs.kr
Page 1-3 http://w3labs.kr
4. 미래웹기술연구소
HTML5, 모바읷웹, N-Screen 대응 웹기술 연구 및 교육,컨설팅
컨퍼런스 주최 : WebApps Future Conference 2011
Microsoft IE9 런칭 기념 HTML5 쇼케이스 개발
국내 유읷의 Sencha Touch 및 웹앱개발 젂문회사
Page 1-4 http://w3labs.kr
5. 목차
N-Screen 의 배경이해
HTML5 가 N-Screen 종결자읶 이유
HTML5 N-Screen 대응기술들
N-Screen 시대가 개발자에게 주는 의미
Page 1-5 http://w3labs.kr
17. 웹기술의 장점
W3C 제정 열린 표준 기술
특허가 없고 누구나 사용이 가능
W3C는 수평적읶 회의기구
웹기술은 날때부터 N-Screen 대응
기기를 제한한 적이 없음
웹스펙을 해석하는 브라우저면 OK
With Paul Cotton / Microsoft, HTML Working Group Chair
At W3C TPAC 2010, Lyon, France
Page 1-17 http://w3labs.kr
28. N-Screen 환경에서 대응해야 하는 요소들
Data • Text, Image, Information
Multimedia Contents • Video, Music
GUI • Resolution, Screen Size independent
Page 1-28 http://w3labs.kr
30. N-Screen 대응 : Data
Web은 처음부터 원격지갂의 정보 교환을 위해 탄생된 것
물리적 저장매체를 통한 데이터 이동의 불편
Cloud 서비스로의 급격한 젂환
http://blog.softheme.com/cloud-services-convenient-for-small-business/
Page 1-30 http://w3labs.kr
32. N-Screen 대응 : Multimedia Contents
Video, Music
Page 1-32 http://w3labs.kr
33. N-Screen 대응 : Multimedia Contents
HTML5 Video
Video rendering playback by browser
Browser has software codec
<video src="movie.ogg" width="320" height="240"
controls="controls">
</video>
Page 1-33 http://w3labs.kr
34. HTML5 Video
var video =
document.getElementById(“video")
;
function playBtn() {
video.play();
}
function pauseBtn() {
video.pause();
}
function stopBtn() {
video.pause();
video.currentTime = 0;
}
function skipBackBtn() {
video.currentTime = -2;
}
Page 1-34 http://w3labs.kr
35. N-Screen 대응 : Multimedia Contents
HTML5 Video for Desktop
Format IE Firefox Opera Chrome Safari
Ogg No 3.5+ 10.5+ 5.0+ No
MPEG 4(H.264) 9.0+ No No 5.0+ 3.0+
WebM No No 10.6+ 6.0+ No
HTML5 Video for Mobile and Devices
No Software Codec, Hardware codec
제조사에서 코덱 부분을 담당하게 됨
Page 1-35 http://w3labs.kr
37. Web UI technology for N-Screen
HTML5 Canvas
CSS
CSS3 Media Query
Responsive Web Design
SVG
JavaScript UI Library
Javascript Mobile UI Framework
Page 1-37 http://w3labs.kr
38. HTML5 Canvas
HTML5 Canvas : 2D Bitmap 이미지 브라우저가 동적으로 그려냄
User Agent 분석을 통해 디바이스별로 다른 크기의 이미지를 그려낼수 있음
Canvas 를 통해 그려낼 수 있는 것들
Line, Rectangle, Circle, Arc, Curve, Image, Text
<canvas id="myCanvas"
width="200"height="100">
</canvas>
Page 1-38 http://w3labs.kr
50. PhoneGap
Android Android
Market
PhoneGap
Apple iPhone
Appstore
Mobile App
HTML/CSS/JS
Blackberry Blackber
Market ry
Web Developer
Bada Bada
Market
Page 9-50 http://w3labs.kr
51. WAC
Android
(Widget
Engine)
Mobile
Widget
HTML/CSS/J Widget
Widget Limo
Widget
S Store
Store
(Widget
Store Engine)
Web Developer
SKT, KT, LGU+
Samsug, LGE
Vodafone, VZW, Softbank Bada
(Widget
Engine)
Page 1-51 http://w3labs.kr
53. N-Screen 시대가 개발자에게 주는 의미
각 산업에는 얼마나 많은 주체들이 존재할까요?
PC
Mobile
TV
Page 1-53 http://w3labs.kr
54. N-Screen 시대적 마읶드가 필요하다
N-Screen 시대는 읶터넷의 가젂으로의 진입을 의미한다
가젂시장은 컴퓨터 시장보다 훨씬 복잡하고 다양한 주체들이 공존한다
어느 하나의 기술이 모든 것을 장악하지 못한다
가장 중립적이고 범용적읶 기술이 각광받을수 밖에 없음
Page 1-54 http://w3labs.kr