HTML5 와 미래웹기술 part 3 HTML5 and future web technology part 3 How HTML5 and web platform is used by big players.

1. HTML5 트렌드와 미래 웹기술
Part 3
조만영 대표이사
미래웹기술연구소(주)

2. 발표자 소개
§ (현) 미래웹기술연구소㈜ 대표이사
§ (현) W3C 대한민국 사무국 Business and Technology Specialist
§ (전) 오페라소프트웨어 Presales Engineer 부장
§ (전) 유니퀘스트 경영기획실
§ (전) 나모인터랙티브 웹개발팀
§ 고려대학교 컴퓨터공학 석사
§ 2014년 미래창조과학부장관 표창수여 인터넷진흥공로
Page 2

3. 미래웹기술연구소 소개
§ HTML5 및 웹표준 기술 전문 연구 강
의, 교육
§ HTML5 모바일 개발 및 앱개발
§ Sencha 한국 총판
§ 웹기술과 가전제품의 융합 선행연구
Page 3

4. 멀티스크린시대의
HTML5와 웹기술

5. N-Screen & N-Devices
iOS Android WM7 Blackberry Bada WebOs
Mobile
Phone
Tablet PC
TV
Page 5

6. N-Screen !
§ 이때는?
Page 6

7. Connected Life & N-Screen
§ 멀티 디바이스의 시대 사람들이 원하는 것
§ 끊김없는 인터넷 경험을 지속시키고 싶은 것
(Seamless internet experience)
§ 이것이 N-Screen 대응이 대두된 본질
§ 사용자 경험에서 부터 출발해야 한다
M
e
n
u
Close Tab
Page 7

8. N-Screen 환경에서 대응되야 하는 요소들
• Text, Image, Information
Data
• Video, Music
Multimedia Contents
• Resolution, Screen Size independent
GUI
Page 8

9. N-Screen 대응 : Data
§ Web은 처음부터 원격지간의 정보 교환을 위해 탄생된 것
§ 물리적 저장매체를 통한 데이터 이동의 불편
§ Cloud 서비스로의 급격한 전환
http://blog.softheme.com/cloud-services-convenient-for-small-business/
Page 9

10. N-Screen 대응 : Multimedia Contents
§ Video, Music
Page 10

11. 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 11

12. N-Screen 대응 : Multimedia Contents
§ HTML5 Video N-Screen Demo
Page 12

13. Web UI technology for N-Screen
§ HTML5 Canvas
§ CSS
§ CSS3 Media Query
§ Responsive Web Design
§ SVG
§ JavaScript UI Library
§ Javascript Mobile UI Framework
Page 13

14. 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 14

15. N-Screen 대응 : GUI
§ HTML5 Canvas Demo
http://js-fireworks.appspot.com/
§
Page 15

16. N-Screen 대응 : GUI
§ CSS
http://youtube.com/xl
§
Page 16

17. 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)">
§
Page 17

18. N-Screen 대응 : GUI
§ Responsive Web Design
§ Fluid Layout, Adjustable screen resolution, resizable images
http://www.smashingmagazine.com/2011/01/12/guidelines-for-responsive-
web-design/
§
Page 18

19. N-Screen 대응 : GUI
§ 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/
§
Page 19

20. 쾌적한 멀티스크린 사용자 경험
Page 20

21. TV와 가전으로 확장하는 웹기술

22. Web based VOD
§ BBC iPlayer
http://www.bbc.co.uk/iplayer/bigscreen/
§
Page 22

23. Hybrid Web Broadcasting Solution
§ Goome M-Cube
§ http://www.youtube.com/watch?v=TPOkuS4Mydg
Page 23

24. Web on TV
Page 24

25. HBBTV
DVB
Internet
VOD GAMES
VOTING
WEATHER SHOP
ETC.
TV channels
Broadcast (aka « red button »)
(aka « Web TV »)
OEM model: broadband only
Broadcaster model: broadcast & broadband
Broadband
Page 25

26. Browser as middleware for HbbTV
Page 26

27. HBBTV
Page 27

28. Widgets! Apps!
Page 28

29. TV widgets
§ http://www.youtube.com/watch?v=_u28b13BiOY
Page 29

30. TV Apps
Page 30

31. Game console
§ http://www.youtube.com/watch?v=EWOc3Sm3IMo&feature=related
Page 31

32. Car
Page 32

33. 네버엔딩 스토리
Page 33

34. 정리
§ 스마트폰 시대와 더불에 멀티스크린 멀티 디바이스 시대로의 전환
§ 다야한 스크린 사이즈에 대응한 서비스 구현 문제 대두
§ 대안기술로서 웹기술이 각광을 받음
§ UI 기술로서 웹기술은 모바일을 넘어 TV와 자동차와 같은 가전 영역으로 확대
Page 34