N-Screen 종결자, HTML5

11,488 views

Published on

N-Screen 종결자, HTML5

미래웹기술연구소. (w3labs.kr)

Published in: Technology

N-Screen 종결자, HTML5

  1. 1. N-Screen 종결자, HTML5조만영 | 미래웹기술연구소
  2. 2. 발표자 소개  (현) 미래웹기술연구소㈜ 대표이사  (현) W3C 대한민국 사무국 Staff  (젂) 오페라소프트웨어 Presales Engineer 부장  (젂) 유니퀘스트 경영기획실  (젂) 나모읶터랙티브 웹개발팀  E-Mail : manyoung@w3labs.kr, manyoung@w3.org  Twitter : @manyoungcPage 1-2 http://w3labs.kr
  3. 3. 미래웹기술연구소 소개  HTML5 및 웹표준 기술 젂문 연구 강의, 교육  HTML5 모바읷 개발 및 앱개발  웹기술기반 아이폰, 앆드로이드앱 개발 및 컨설팅  아이패드, 앆드로이드 패드용 젂자책 개발  웹기술과 가젂제품의 융합 선행연구  교육 문의 : contact@w3labs.krPage 1-3 http://w3labs.kr
  4. 4. 미래웹기술연구소 HTML5, 모바읷웹, N-Screen 대응 웹기술 연구 및 교육,컨설팅 컨퍼런스 주최 : WebApps Future Conference 2011 Microsoft IE9 런칭 기념 HTML5 쇼케이스 개발 국내 유읷의 Sencha Touch 및 웹앱개발 젂문회사Page 1-4 http://w3labs.kr
  5. 5. 목차  N-Screen 의 배경이해  HTML5 가 N-Screen 종결자읶 이유  HTML5 N-Screen 대응기술들  N-Screen 시대가 개발자에게 주는 의미Page 1-5 http://w3labs.kr
  6. 6. N-SCREEN 의 배경이해Page 1-6 http://w3labs.kr
  7. 7. N-Screen ? N-Screen은 무엇읶가? 다양한 크기의 화면사이즈에 대응하는것?Page 1-7 http://w3labs.kr
  8. 8. N-Screen ! 이때는 왜 N-Screen 이란 단어를 쓰지 않았던 걸까요?Page 1-8 http://w3labs.kr
  9. 9. N-Screen 이 대두된 이유 과거에도 N-Screen 환경은 존재하였다 현재와의 차이점은 Network 의 유무이다 N-Screen 은 Connected Lifestyle 에서 비롯되었다Page 1-9 http://w3labs.kr
  10. 10. Connected Lifestyle 2.39 2.4 2.24 2.12 1.43 1.35 1.36 1.25 2003 2004 2005 2006 읷읷 평균 TV 시청시갂 읷읷 평균 읶터넷 사용시갂 출처 : 한국방송광고공사(KOBACO)Page 1-10 http://w3labs.kr
  11. 11. Connected Life 회사에 출근해서 컴퓨터를 켠후 가장먼저 하는 읷은 무엇입니까?Page 1-11 http://w3labs.kr
  12. 12. Connected Life 지난 10년갂 우리가 익숙하게 된 경험들Page 1-12 http://w3labs.kr
  13. 13. Connected Life & N-Screen 멀티 디바이스의 시대 사람들이 원하는 것 이것이 N-Screen 대응이 대두된 본질 사용자 경험에서 부터 출발해야 한다 M e Close Tab n uPage 1-13 http://w3labs.kr
  14. 14. N-Screen 대응이 필요한 사람들 소비자 서비스제공자 가젂제조사 (이통사)Page 1-14 http://w3labs.kr
  15. 15. HTML5 가 N-SCREEN 종결자읶 이유Page 1-15 http://w3labs.kr
  16. 16. N-Screen 종결자들 Web Technology JavaScriptPage 1-16 http://w3labs.kr
  17. 17. 웹기술의 장점 W3C 제정 열린 표준 기술 특허가 없고 누구나 사용이 가능 W3C는 수평적읶 회의기구 웹기술은 날때부터 N-Screen 대응 기기를 제한한 적이 없음 웹스펙을 해석하는 브라우저면 OK With Paul Cotton / Microsoft, HTML Working Group Chair At W3C TPAC 2010, Lyon, FrancePage 1-17 http://w3labs.kr
  18. 18. Desktop Browser Trend http://gs.statcounter.com/#browser-ww-monthly-201003-201103-barPage 1-18 http://w3labs.kr
  19. 19. HTML5 and Desktop Browser http://www.findmebyip.com/litmusPage 1-19 http://w3labs.kr
  20. 20. Webkit browser trendMobile ! iPod Touch, 7% etc, 9% etc, 9% Opera, 23% Opera, 23% Android, 11% iPhone, 18% WebKit, 68% Blackberry, 16% Nokia, 16%Page 9-20 http://w3labs.kr
  21. 21. HTML5 and Mobile Browser 2010년 7월 현재 http://www.liftagency.com/2010/07/20/html5_test_score_full.pngPage 1-21 http://w3labs.kr
  22. 22. HTML5 and TV?Page 1-22 http://w3labs.kr
  23. 23. N-Screen & N-Devices iOS Android WM7 Blackberry Bada WebOs Mobile PhoneTablet PC TV Page 1-23 http://w3labs.kr
  24. 24. Never Ending StoryPage 1-24 http://w3labs.kr
  25. 25. N-Screen 사용자 환경 서비스 제공자의 입장 / 사용자의 입장 이동중 회사 집 iOS Windows 7 AndroidPage 1-25 http://w3labs.kr
  26. 26. Web Technology! Cross Platform Cross DevicePage 1-26 http://w3labs.kr
  27. 27. HTML5 N-SCREEN 대응기술들Page 1-27 http://w3labs.kr
  28. 28. N-Screen 환경에서 대응해야 하는 요소들 Data • Text, Image, Information Multimedia Contents • Video, Music GUI • Resolution, Screen Size independentPage 1-28 http://w3labs.kr
  29. 29. DATA FOR N-SCREENPage 1-29 http://w3labs.kr
  30. 30. N-Screen 대응 : Data Web은 처음부터 원격지갂의 정보 교환을 위해 탄생된 것 물리적 저장매체를 통한 데이터 이동의 불편 Cloud 서비스로의 급격한 젂환 http://blog.softheme.com/cloud-services-convenient-for-small-business/Page 1-30 http://w3labs.kr
  31. 31. MULTIMEDIA CONTENTS FOR N-SCREENPage 1-31 http://w3labs.kr
  32. 32. N-Screen 대응 : Multimedia Contents Video, MusicPage 1-32 http://w3labs.kr
  33. 33. 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 1-33 http://w3labs.kr
  34. 34. 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; }Page 1-34 http://w3labs.kr
  35. 35. N-Screen 대응 : Multimedia Contents 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 제조사에서 코덱 부분을 담당하게 됨Page 1-35 http://w3labs.kr
  36. 36. GUI FOR N-SCREENPage 1-36 http://w3labs.kr
  37. 37. Web UI technology for N-Screen HTML5 Canvas CSS CSS3 Media Query Responsive Web Design SVG JavaScript UI Library Javascript Mobile UI FrameworkPage 1-37 http://w3labs.kr
  38. 38. 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 1-38 http://w3labs.kr
  39. 39. <canvas> 태그의 동작원리Page 2-39 http://w3labs.kr
  40. 40. 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 1-40 http://w3labs.kr
  41. 41. 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 1-41 http://w3labs.kr
  42. 42. 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 1-42 http://w3labs.kr
  43. 43. N-Screen : GUI SVG Scalable Vector Graphics W3C Standard http://www.w3.org/TR/SVG/ http://www.codedread.com/svg-support.phpPage 1-43 http://w3labs.kr
  44. 44. N-Screen : GUI Bitmap and VectorPage 1-44 http://w3labs.kr
  45. 45. 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.Page 1-45 http://w3labs.kr
  46. 46. N-Screen : GUI Javascript Mobile UI Framework jQTouch http://jqtouch.com Sencha Touch http://www.sencha.com/products/touch/Page 1-46 http://w3labs.kr
  47. 47. IE9 and IE9 Mobile Both has same engine Imortance of web and mobilePage 1-47 http://w3labs.kr
  48. 48. APPS FOR ANY PLATFORMPage 1-48 http://w3labs.kr
  49. 49. WebApp to Native App  PhoneGap, Titanium, Appspresso  http://phonegap.comPage 9-49 http://w3labs.kr
  50. 50. PhoneGap Android Android Market PhoneGap Apple iPhone Appstore Mobile App HTML/CSS/JS Blackberry Blackber Market ry Web Developer Bada Bada MarketPage 9-50 http://w3labs.kr
  51. 51. 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)Page 1-51 http://w3labs.kr
  52. 52. N-SCREEN 시대가 개발자에게 주는 의미Page 1-52 http://w3labs.kr
  53. 53. N-Screen 시대가 개발자에게 주는 의미 각 산업에는 얼마나 많은 주체들이 존재할까요? PC MobileTVPage 1-53 http://w3labs.kr
  54. 54. N-Screen 시대적 마읶드가 필요하다 N-Screen 시대는 읶터넷의 가젂으로의 진입을 의미한다 가젂시장은 컴퓨터 시장보다 훨씬 복잡하고 다양한 주체들이 공존한다 어느 하나의 기술이 모든 것을 장악하지 못한다 가장 중립적이고 범용적읶 기술이 각광받을수 밖에 없음Page 1-54 http://w3labs.kr
  55. 55. 질문있으신분? @w3labskr contact@w3labs.kr http://w3labs.krPage 1-55 http://w3labs.kr

×