Html5 for N-Screen

Confidential and proprietary material for authorized persons only. 1

권우일 E [email protected]

T @bitroid

Copyright © 2011 Infraware Inc. All rights reserved.


목차

I. N-Screen이란?

II. N-Screen을 위한 HTML5 기술

III.결론


I. N-SCREEN이란?


N-Screen?

• 다양한 디스플레이 디바이스 등장


N-Screen?

• N-Screen을 어떻게 정의할 것인가?


N-Screen?

• 과거에도 N-Screen은 존재, 그러나…


N-Screen이 관심을 받는 이유

• 과거에도 N-Screen 환경은 존재

• 현재와의 차이점은 Connectivity

• N-Screen 은 Connected Lifestyle 에서 비롯됨


Connected Life & N-Screen

• 멀티 디바이스의 시대 사람들이 원하는 것

• 끊김없는 인터넷 경험을 지속시키고 싶은 것

(Seamless internet experience)

• 이것이 N-Screen 대응이 대두된 본질

• 사용자 경험에서 부터 출발해야 한다

M

e

n

u

Close Tab


Connected Life Style

2.39 2.4 2.24

2.12

1.25 1.35 1.36

1.43

2003 2004 2005 2006

일일 평균 TV 시청시간 일일 평균 인터넷 사용시간

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


다양한 형태의 N-Screen 패턴


II. N-SCREEN을 위한 HTML5 기술


N-Screen 대응에 필요한 요소

• Text, Image, Information Data

• Video, Music Multimedia Contents

• Resolution, Screen Size independent GUI


N-Screen 대응 | Data

Page 1-13

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

• Web은 처음부터 원격지간의 정보 교환을 위해 탄생된 것

• 물리적 저장매체를 통한 데이터 이동의 불편

• Cloud 서비스로의 급격한 전환













N-Screen 대응 | Multimedia Contents

• Video, Music

Page 1-14


N-Screen 대응 | GUI

• 다양한 화면 사이즈에 유연하게 대응 가능해야 함

?


HTML5?


What is HTML5?

• 구조화된 문서 형태(Semantic)

• 다양한 기능 구현 가능(Application)


HTML5 Features

• HTML5를 구성하는 주요 기술 요소

3D Effect

Connectivity Device Access

Multimedia

Offline & Storage

Performance

Semantics

CSS3


N-Screen을 위한 웹 기술

• HTML5 Canvas

• CSS

• CSS3 Media Query

• Responsive Web Design

• SVG

• JavaScript UI Library

• Javascript Mobile UI Framework


• What is Canvas? – Dynamic and interactive graphics

– Draw images using 2D drawing API

• Lines, curves, shapes, fills, ...

– Useful for graphs, applications, games, ...

HTML5 Features | Canvas


• <canvas> 동작 원리

HTML5 Features | Canvas


HTML5 Features | CSS3

• Animation 효과를 이용한 다이나믹한 화면 구성

• CSS3를 이용한 이미지 대체 가능


• 마크업 언어가 실제로 출력되는 방법 명세

• W3C 표준


• What is SVG? – Scalable Vector Graphic

– HTML-like markup tags(XML) for drawing

HTML5 Features | SVG


Responsive Web Design

• Fluid layout

Adjustable screen resolution

• Flexible images

• Media Query



• Fluid Layout



• http://www.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/

• Flexible Image

http://www.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/











<link rel="stylesheet" href=“tablet.css" media="only screen and

(min-device-width : 768px) and (max-device-width : 1024px)">

• Media Query



• Media Query



• Media Query

• http://alldic.daum.net/

http://alldic.daum.net/


III. 결론


N-Screen 대응의 현실


현재까지 디자인 페러다임 수준에 머물러 있음

HP Enyo: 현재까지의 가능성

• Native VS. Web

어떤 N-Screen을 원하는가?


N-Screen이 개발자에게 주는 의미

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

PC

Mobile

TV


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

• N-Screen 시대는 인터넷이 가전으로의 진입을 의미

• 가전시장은 컴퓨터 시장보다 훨씬 복잡하고 다양한

주체들이 공존

• 어느 하나의 기술이 모든 것을 장악하지 못함

• 중립적이고 범용적인 기술이 각광받을 수 밖에 없음


Thank you

Headquarter and Research Institute: Bando B/D 2,3,4,8F, 48-1 Banpo-dong, Seocho-gu, Seoul, KOREA. 137-040 Tel. +82 2 537 0538 Fax. +82 2 535 0534

Beijing Office: Room908, Building 16, China Central Place, No.89, Jian Guo lu Chaoyang District, Beijing, CHINA. Tel. +86 10 65331556/7 Fax. +86 10 65331559

U.S. Office: 3003 North First Street San Jose, CA 95134, U.S.A

Html5 for N-Screen

Technology

proprietary material

html5 features

authorized persons

html5

screen

canvas

confidential

web