HTML5 와 미래웹기술 part 3
18 likes2,180 views
HTML5 와 미래웹기술 part 3 HTML5 and future web technology part 3 How HTML5 and web platform is used by big players.
HTML5 와 미래웹기술 part 3
- 1. HTML5 트렌드와 미래 웹기술 Part 3 조만영 대표이사 미래웹기술연구소(주)
- 2. 발표자 소개 § (현) 미래웹기술연구소㈜ 대표이사 § (현) W3C 대한민국 사무국 Business and Technology Specialist § (전) 오페라소프트웨어 Presales Engineer 부장 § (전) 유니퀘스트 경영기획실 § (전) 나모인터랙티브 웹개발팀 § 고려대학교 컴퓨터공학 석사 § 2014년 미래창조과학부장관 표창수여 인터넷진흥공로 Page 2
- 3. 미래웹기술연구소 소개 § HTML5 및 웹표준 기술 전문 연구 강 의, 교육 § HTML5 모바일 개발 및 앱개발 § Sencha 한국 총판 § 웹기술과 가전제품의 융합 선행연구 Page 3
- 5. N-Screen & N-Devices iOS Android WM7 Blackberry Bada WebOs Mobile Phone Tablet PC TV Page 5
- 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
- 29. TV widgets § http://www.youtube.com/watch?v=_u28b13BiOY Page 29
- 30. TV Apps Page 30
- 32. Car Page 32
- 33. 네버엔딩 스토리 Page 33
- 34. 정리 § 스마트폰 시대와 더불에 멀티스크린 멀티 디바이스 시대로의 전환 § 다야한 스크린 사이즈에 대응한 서비스 구현 문제 대두 § 대안기술로서 웹기술이 각광을 받음 § UI 기술로서 웹기술은 모바일을 넘어 TV와 자동차와 같은 가전 영역으로 확대 Page 34