Your SlideShare is downloading. ×
0
Html5 for N-Screen
Html5 for N-Screen
Html5 for N-Screen
Html5 for N-Screen
Html5 for N-Screen
Html5 for N-Screen
Html5 for N-Screen
Html5 for N-Screen
Html5 for N-Screen
Html5 for N-Screen
Html5 for N-Screen
Html5 for N-Screen
Html5 for N-Screen
Html5 for N-Screen
Html5 for N-Screen
Html5 for N-Screen
Html5 for N-Screen
Html5 for N-Screen
Html5 for N-Screen
Html5 for N-Screen
Html5 for N-Screen
Html5 for N-Screen
Html5 for N-Screen
Html5 for N-Screen
Html5 for N-Screen
Html5 for N-Screen
Html5 for N-Screen
Html5 for N-Screen
Html5 for N-Screen
Html5 for N-Screen
Html5 for N-Screen
Html5 for N-Screen
Html5 for N-Screen
Html5 for N-Screen
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Html5 for N-Screen

1,080

Published on

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,080
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
41
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. 권우일 E willkwon@infraware.co.kr T @bitroidCopyright © 2011 Infraware Inc. All rights reserved. Confidential and proprietary material for authorized persons only. 1
  • 2. 목차 I. N-Screen이란? II. N-Screen을 위한 HTML5 기술 III.결론 Confidential and proprietary material for authorized persons only. 2
  • 3. I. N-SCREEN이란? Confidential and proprietary material for authorized persons only. 3
  • 4. N-Screen?• 다양한 디스플레이 디바이스 등장 Confidential and proprietary material for authorized persons only. 4
  • 5. N-Screen?• N-Screen을 어떻게 정의할 것인가? Confidential and proprietary material for authorized persons only. 5
  • 6. N-Screen?• 과거에도 N-Screen은 존재, 그러나… Confidential and proprietary material for authorized persons only. 6
  • 7. N-Screen이 관심을 받는 이유• 과거에도 N-Screen 환경은 존재• 현재와의 차이점은 Connectivity• N-Screen 은 Connected Lifestyle 에서 비롯됨 Confidential and proprietary material for authorized persons only. 7
  • 8. Connected Life & N-Screen• 멀티 디바이스의 시대 사람들이 원하는 것• 끊김없는 인터넷 경험을 지속시키고 싶은 것 (Seamless internet experience)• 이것이 N-Screen 대응이 대두된 본질• 사용자 경험에서 부터 출발해야 한다 M e Close Tab n u Confidential and proprietary material for authorized persons only. 8
  • 9. Connected Life Style 2.39 2.4 2.24 2.12 1.43 1.35 1.36 1.25 2003 2004 2005 2006 일일 평균 TV 시청시간 일일 평균 인터넷 사용시간 출처 : 한국방송광고공사(KOBACO) Confidential and proprietary material for authorized persons only. 9
  • 10. 다양한 형태의 N-Screen 패턴 Confidential and proprietary material for authorized persons only. 10
  • 11. II. N-SCREEN을 위한 HTML5 기술 Confidential and proprietary material for authorized persons only. 11
  • 12. N-Screen 대응에 필요한 요소 Data • Text, Image, Information Multimedia Contents • Video, Music GUI • Resolution, Screen Size independent Confidential and proprietary material for authorized persons only. 12
  • 13. N-Screen 대응 | Data• Web은 처음부터 원격지간의 정보 교환을 위해 탄생된 것• 물리적 저장매체를 통한 데이터 이동의 불편• Cloud 서비스로의 급격한 전환 http://blog.softheme.com/cloud-services-convenient-for-small-business/ Page 1-13 Confidential and proprietary material for authorized persons only. 13
  • 14. N-Screen 대응 | Multimedia Contents• Video, Music Page 1-14 Confidential and proprietary material for authorized persons only. 14
  • 15. N-Screen 대응 | GUI• 다양한 화면 사이즈에 유연하게 대응 가능해야 함 ? Confidential and proprietary material for authorized persons only. 15
  • 16. HTML5? Confidential and proprietary material for authorized persons only. 16
  • 17. What is HTML5?• 구조화된 문서 형태(Semantic)• 다양한 기능 구현 가능(Application) Confidential and proprietary material for authorized persons only. 17
  • 18. HTML5 Features• HTML5를 구성하는 주요 기술 요소 Semantics Offline & Storage Device Access Connectivity Multimedia 3D Effect Performance CSS3 Confidential and proprietary material for authorized persons only. 18
  • 19. N-Screen을 위한 웹 기술• HTML5 Canvas• CSS• CSS3 Media Query• Responsive Web Design• SVG• JavaScript UI Library• Javascript Mobile UI Framework Confidential and proprietary material for authorized persons only. 19
  • 20. HTML5 Features | Canvas• What is Canvas? – Dynamic and interactive graphics – Draw images using 2D drawing API • Lines, curves, shapes, fills, ... – Useful for graphs, applications, games, ... Confidential and proprietary material for authorized persons only. 20
  • 21. HTML5 Features | Canvas• <canvas> 동작 원리 Confidential and proprietary material for authorized persons only. 21
  • 22. HTML5 Features | CSS3• 마크업 언어가 실제로 출력되는 방법 명세• W3C 표준• Animation 효과를 이용한 다이나믹한 화면 구성• CSS3를 이용한 이미지 대체 가능• Responsive Web Design Confidential and proprietary material for authorized persons only. 22
  • 23. HTML5 Features | SVG• What is SVG? – Scalable Vector Graphic – HTML-like markup tags(XML) for drawing Confidential and proprietary material for authorized persons only. 23
  • 24. Responsive Web Design• Fluid layout  Adjustable screen resolution• Flexible images• Media Query Confidential and proprietary material for authorized persons only. 24
  • 25. Responsive Web Design• Fluid Layout Confidential and proprietary material for authorized persons only. 25
  • 26. Responsive Web Design• Flexible Image• http://www.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/ Confidential and proprietary material for authorized persons only. 26
  • 27. Responsive Web Design• Media Query<link rel="stylesheet" href=“tablet.css" media="only screen and(min-device-width : 768px) and (max-device-width : 1024px)"> Confidential and proprietary material for authorized persons only. 27
  • 28. Responsive Web Design• Media Query Confidential and proprietary material for authorized persons only. 28
  • 29. Responsive Web Design• Media Query • http://alldic.daum.net/ Confidential and proprietary material for authorized persons only. 29
  • 30. III. 결론 Confidential and proprietary material for authorized persons only. 30
  • 31. N-Screen 대응의 현실• Responsive Web Design  현재까지 디자인 페러다임 수준에 머물러 있음  HP Enyo: 현재까지의 가능성• Native VS. Web  어떤 N-Screen을 원하는가? Confidential and proprietary material for authorized persons only. 31
  • 32. N-Screen이 개발자에게 주는 의미• 각 산업에는 얼마나 많은 주체들이 존재할까요? PC Mobile TV Confidential and proprietary material for authorized persons only. 32
  • 33. N-Screen 시대적 마인드가 필요하다• N-Screen 시대는 인터넷이 가전으로의 진입을 의미• 가전시장은 컴퓨터 시장보다 훨씬 복잡하고 다양한 주체들이 공존• 어느 하나의 기술이 모든 것을 장악하지 못함• 중립적이고 범용적인 기술이 각광받을 수 밖에 없음 Confidential and proprietary material for authorized persons only. 33
  • 34. 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 Confidential and proprietary material for authorized persons only. 34

×