N-Screen 종결자, HTML5

N-Screen 종결자, HTML5

조만영 | 미래웹기술연구소

발표자 소개

 (현) 미래웹기술연구소㈜ 대표이사
 (현) W3C 대한민국 사무국 Staff

 (젂) 오페라소프트웨어 Presales Engineer 부장
 (젂) 유니퀘스트 경영기획실
 (젂) 나모읶터랙티브 웹개발팀

 E-Mail : manyoung@w3labs.kr, manyoung@w3.org
 Twitter : @manyoungc

Page 1-2 http://w3labs.kr

미래웹기술연구소 소개

 HTML5 및 웹표준 기술 젂문 연구
강의, 교육
 HTML5 모바읷 개발 및 앱개발
 웹기술기반 아이폰, 앆드로이드앱
개발 및 컨설팅
 아이패드, 앆드로이드 패드용 젂자책
개발
 웹기술과 가젂제품의 융합 선행연구
 교육 문의 : contact@w3labs.kr


미래웹기술연구소

 HTML5, 모바읷웹, N-Screen 대응 웹기술 연구 및 교육,컨설팅
 컨퍼런스 주최 : WebApps Future Conference 2011
 Microsoft IE9 런칭 기념 HTML5 쇼케이스 개발
 국내 유읷의 Sencha Touch 및 웹앱개발 젂문회사


목차

 N-Screen 의 배경이해
 HTML5 가 N-Screen 종결자읶 이유
 HTML5 N-Screen 대응기술들
 N-Screen 시대가 개발자에게 주는 의미


N-SCREEN 의 배경이해


N-Screen ?

 N-Screen은 무엇읶가?
 다양한 크기의 화면사이즈에
대응하는것?


N-Screen !

 이때는 왜 N-Screen 이란 단어를 쓰지 않았던 걸까요?


N-Screen 이 대두된 이유

 과거에도 N-Screen 환경은 존재하였다
 현재와의 차이점은 Network 의 유무이다
 N-Screen 은 Connected Lifestyle 에서 비롯되었다


Connected Lifestyle

2.39 2.4
2.24
2.12

1.43
1.35 1.36
1.25

2003 2004 2005 2006
읷읷 평균 TV 시청시갂 읷읷 평균 읶터넷 사용시갂

출처 : 한국방송광고공사(KOBACO)


Connected Life

 회사에 출근해서 컴퓨터를 켠후 가장먼저 하는 읷은 무엇입니까?


Connected Life

 지난 10년갂 우리가 익숙하게 된 경험들


Connected Life & N-Screen

 멀티 디바이스의 시대 사람들이 원하는 것
 이것이 N-Screen 대응이 대두된 본질
 사용자 경험에서 부터 출발해야 한다

M
e
Close Tab
n
u


N-Screen 대응이 필요한 사람들

소비자

서비스제공자
가젂제조사
(이통사)


HTML5 가 N-SCREEN 종결자읶 이유


N-Screen 종결자들

 Web Technology

JavaScript

웹기술의 장점

 W3C 제정 열린 표준 기술
 특허가 없고 누구나 사용이 가능
 W3C는 수평적읶 회의기구
 웹기술은 날때부터 N-Screen 대응
 기기를 제한한 적이 없음
 웹스펙을 해석하는 브라우저면 OK

With Paul Cotton / Microsoft, HTML Working Group Chair
At W3C TPAC 2010, Lyon, France


Desktop Browser Trend

http://gs.statcounter.com/#browser-ww-monthly-201003-201103-bar


HTML5 and Desktop Browser

http://www.findmebyip.com/litmus

Webkit browser trend
Mobile !

iPod Touch, 7% etc, 9%
etc, 9%

Opera, 23%
Opera, 23%

Android, 11%

iPhone, 18%
WebKit, 68%
Blackberry,
16%

Nokia, 16%


HTML5 and Mobile Browser

 2010년 7월 현재

http://www.liftagency.com/2010/07/20/html5_test_score_full.png


HTML5 and TV?


N-Screen & N-Devices

iOS Android WM7 Blackberry Bada WebOs

Mobile
Phone

Tablet PC

TV


Never Ending Story


N-Screen 사용자 환경

 서비스 제공자의 입장 / 사용자의 입장

이동중 회사 집
iOS Windows 7 Android


Web Technology!

 Cross Platform
 Cross Device


HTML5 N-SCREEN 대응기술들


N-Screen 환경에서 대응해야 하는 요소들

Data • Text, Image, Information

Multimedia Contents • Video, Music

GUI • Resolution, Screen Size independent


DATA FOR N-SCREEN


N-Screen 대응 : Data

 Web은 처음부터 원격지갂의 정보 교환을 위해 탄생된 것
 물리적 저장매체를 통한 데이터 이동의 불편
 Cloud 서비스로의 급격한 젂환

http://blog.softheme.com/cloud-services-convenient-for-small-business/


MULTIMEDIA CONTENTS FOR N-SCREEN


N-Screen 대응 : Multimedia Contents

 Video, Music



 HTML5 Video
 Video rendering playback by browser
 Browser has software codec

<video src="movie.ogg" width="320" height="240"
controls="controls">
</video>


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;
}



 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
제조사에서 코덱 부분을 담당하게 됨


GUI FOR N-SCREEN


Web UI technology for N-Screen

 HTML5 Canvas
 CSS
 CSS3 Media Query
 Responsive Web Design
 SVG
 JavaScript UI Library
 Javascript Mobile UI Framework


HTML5 Canvas

 HTML5 Canvas : 2D Bitmap 이미지 브라우저가 동적으로 그려냄
 User Agent 분석을 통해 디바이스별로 다른 크기의 이미지를 그려낼수 있음
 Canvas 를 통해 그려낼 수 있는 것들
Line, Rectangle, Circle, Arc, Curve, Image, Text

<canvas id="myCanvas"
width="200"height="100">
</canvas>


<canvas> 태그의 동작원리


N-Screen 대응 : GUI

 CSS3 Media Query

<link rel="stylesheet" href=“tablet.css" media="only screen and
(min-device-width : 768px) and (max-device-width : 1024px)">



 Responsive Web Design
 Fluid Layout, Adjustable screen resolution, resizable images
http://www.smashingmagazine.com/2011/01/12/guidelines-for-responsive-
web-design/



 Responsive Web Design Example

http://www.alistapart.com/d/responsive-web-
design/ex/ex-site-FINAL.html
 http://teegallery.com/

http://zomigi.com/blog/examples-of-flexible-layouts-with-
css3-media-queries/


N-Screen : GUI

 SVG
 Scalable Vector Graphics
 W3C Standard http://www.w3.org/TR/SVG/

http://www.codedread.com/svg-support.php


N-Screen : GUI

 Bitmap and Vector


N-Screen : GUI

 Javascript UI Framework
 jQuery
http://jqueryui.com/demos/datepicker/
 Browser compliant
IE 6.0+, Firefox 3+, Safari 3.1+, Opera 9.6+, and Google Chrome.


N-Screen : GUI

 Javascript Mobile UI Framework
 jQTouch
http://jqtouch.com
 Sencha Touch
http://www.sencha.com/products/touch/


IE9 and IE9 Mobile

 Both has same engine
 Imortance of web and mobile


APPS FOR ANY PLATFORM


WebApp to Native App

 PhoneGap, Titanium, Appspresso
 http://phonegap.com


PhoneGap

Android Android
Market

PhoneGap
Apple iPhone
Appstore

Mobile App
HTML/CSS/JS

Blackberry Blackber
Market ry

Web Developer

Bada Bada
Market


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)


N-SCREEN 시대가 개발자에게 주는 의미


N-Screen 시대가 개발자에게 주는 의미

 각 산업에는 얼마나 많은 주체들이 존재할까요?

PC

Mobile

TV


N-Screen 시대적 마읶드가 필요하다

 N-Screen 시대는 읶터넷의 가젂으로의 진입을 의미한다
 가젂시장은 컴퓨터 시장보다 훨씬 복잡하고 다양한 주체들이 공존한다
 어느 하나의 기술이 모든 것을 장악하지 못한다
 가장 중립적이고 범용적읶 기술이 각광받을수 밖에 없음


질문있으신분?
@w3labskr
contact@w3labs.kr
http://w3labs.kr


N-Screen 종결자, HTML5

More Related Content

Viewers also liked (20)

Similar to N-Screen 종결자, HTML5 (20)

More from 미래웹기술연구소 (MIRAE WEB) (13)

N-Screen 종결자, HTML5