HTML5와 Internet Explore 9<br />황리건<br />UX Evangelist<br />Microsoft Corporation<br />
Welcome<br />Internet Explorer 9 웹 플랫폼의 최우선 목표<br />한벌로 두루 쓰는 HTML5 마크업 <br />똑같은 HTML과 CSS 마크업을 똑같은 방식으로 해석하기<br />똑같은 자바...
The HTML5 Web:그래픽 & 리치미디어<br />웹의 진화<br />The AJAX Web: 자바스크립트+<br />DOM+비동기 요청<br />Web “2.0”<br />The Content Web: HTML ...
브라우저 동작 원리<br />5<br />
새로운 자바스트립트 엔진, Chakra<br />6<br />
ACID3 Test<br />7<br />
CSS3 Selectors Test<br />8<br />
9<br />
한벌로 두루 쓰는 HTML5 마크업<br />똑같은 HTML, CSS, 자바스크립트를 똑같은 방식으로 해석하기<br />
한벌로 두루 쓰는 HTML5 마크업<br />HTML, CSS, 자바스크립트를 똑같은 방식으로 해석<br />항상 경쟁 우위의 차이는 존재할 수 밖에 없습니다. <br />표준의 진화<br />서로 다른 체계를 따라 브...
13<br />
데모 시연<br />DOM Events, DOMContentLoaded, getElementsByClassName<br />
IE9가 지원하는마크업 언어<br />HTML5 <br />다른 스펙들과의 접점에서의 대응 방식을 정의합니다.<br />알려지지 않은 요소들(unknown elements)의 파싱<br />Inline SVG<br />...
알려지지 않은 요소들의 파싱<br />스타일 적용<br />Children 구조<br />16<br />
17<br />기존의 SVG 방식<br />
Inline SVG<br />18<br />
CSS 기반 구조<br />CSS3 Selectors<br />더 적은 스크립트와 간단한 마크업으로 더 많은 것을 할 수 있게 해줍니다.<br />CSS3 Namespaces<br />XHTML 문서에서 네임스페이스를 ...
데모 시연<br />CSS3 Selectors, T-shirt Designer<br />
IE9 프로그래밍 모델<br />웹 플랫폼의 핵심 부분은 DOM을 다루는데 사용됩니다.<br />DOM Core<br />DOM Events<br />DOM Style<br />DOM HTML<br />DOM Range...
데모 시연<br />DOM Style, DOM Range& HTML Selection<br />
마크업과 프로그래밍 모델 : IE Platform Preview<br />
GPU를 사용한HTML5 그래픽<br />
GPU를 사용하는 HTML5 그래픽과 미디어<br />HTML5의 그래픽적 풍부함은 높은 성능을 갖춘 그래픽 하부 시스템을 요구합니다.<br />GPU를 쓰게 됨으로써,<br />알파채널 블렌딩과 같은 기능들이 높은 성...
GPU를 이용한 HTML5<br />
Rich Graphics: HTML5의 기초<br />그래픽적으로 풍부한 스타일링<br />향상된 이미지 지원<br />확대축소 가능한 벡터 그래픽<br />미디어 요소<br />일관된 고화질과 고성능을 제공하기 위해,...
CSS3로 그래픽적으로 풍부한 스타일링<br />CSS3 Colors<br />알파 컬러, rgba()와hsla() 함수<br />투명도 조절, opacity 속성<br />CSS3 Backgrounds and Bord...
데모 시연<br />Border Radius, CSS3 Media Queries<br />
향상된 이미지 지원<br />ICC 버전4와 버전2 컬러 프로필<br />내장 컬러 프로필이 있는 이미지를 올바르게 표현해줍니다.<br />새로운 JPEG XR 포맷<br />JPG 보다 높은 압축률<br />같은 사이...
31<br />
데모 시연<br />Color Profiles, Image Support<br />
확대/축소 가능한 벡터 그래픽<br />마크업과 DOM 기반의 그래픽 : SVG 1.1<br />“View source”에서 간결함 —쉽게 배울 수 있다<br />쉬운 서버 사이드 생성—XML 형식<br />쉬운 클라이...
SVG : Internet Explorer Platform Preview<br />
Demos<br />Tweet Cloud, Real World Diagram, Org Charts, Biz Charts, Atlas zureEuropawahl<br />
리치 미디어 통합—플러그인 없이<br />HTML5 <video> 요소<br />업계 표준의 MPEG-4/H.264 비디오<br />페이지의 어떤 요소와도 조합해서 쓸 수 있습니다.<br />HTML 컨텐츠, 이미지, ...
비디오 데모<br />Video<br />
38<br />
비디오 데모<br />Network Monitoring<br />
8주 마다 한번씩 선보이는<br />IE9 플랫폼 프리뷰 다운로드<br />www.IETestDrive.com<br />가장 빠른 IE9 정보(영문)<br />http://blogs.msdn.com/ie <br />무엇...
© 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be...
Upcoming SlideShare
Loading in...5
×

Html5 ie9

8,078

Published on

REMIX10에서 있었던 HTML5와 IE9 세션 발표자료입니다.

Published in: Art & Photos, Technology
2 Comments
11 Likes
Statistics
Notes
No Downloads
Views
Total Views
8,078
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
127
Comments
2
Likes
11
Embeds 0
No embeds

No notes for slide

Html5 ie9

  1. 1.
  2. 2. HTML5와 Internet Explore 9<br />황리건<br />UX Evangelist<br />Microsoft Corporation<br />
  3. 3. Welcome<br />Internet Explorer 9 웹 플랫폼의 최우선 목표<br />한벌로 두루 쓰는 HTML5 마크업 <br />똑같은 HTML과 CSS 마크업을 똑같은 방식으로 해석하기<br />똑같은 자바스크립트를 똑같은 방식으로 실행하기<br />GPU를 사용하는 HTML5 그래픽과 미디어<br />HTML5은 높은 성능을 갖춘 그래픽 하부시스템을 요구합니다.<br />전반에 걸쳐 높은 성능의 HTML5 지원<br />JavaScript execution<br />Page layout<br />Page display<br />
  4. 4. The HTML5 Web:그래픽 & 리치미디어<br />웹의 진화<br />The AJAX Web: 자바스크립트+<br />DOM+비동기 요청<br />Web “2.0”<br />The Content Web: HTML & CSS<br />Web “1.0”<br />
  5. 5. 브라우저 동작 원리<br />5<br />
  6. 6. 새로운 자바스트립트 엔진, Chakra<br />6<br />
  7. 7. ACID3 Test<br />7<br />
  8. 8. CSS3 Selectors Test<br />8<br />
  9. 9. 9<br />
  10. 10. 한벌로 두루 쓰는 HTML5 마크업<br />똑같은 HTML, CSS, 자바스크립트를 똑같은 방식으로 해석하기<br />
  11. 11. 한벌로 두루 쓰는 HTML5 마크업<br />HTML, CSS, 자바스크립트를 똑같은 방식으로 해석<br />항상 경쟁 우위의 차이는 존재할 수 밖에 없습니다. <br />표준의 진화<br />서로 다른 체계를 따라 브라우저 구현<br />핵심 플랫폼만은 반드시 상호운용 가능해야 합니다.<br />
  12. 12.
  13. 13. 13<br />
  14. 14. 데모 시연<br />DOM Events, DOMContentLoaded, getElementsByClassName<br />
  15. 15. IE9가 지원하는마크업 언어<br />HTML5 <br />다른 스펙들과의 접점에서의 대응 방식을 정의합니다.<br />알려지지 않은 요소들(unknown elements)의 파싱<br />Inline SVG<br />XHTML/XML<br />엄격하고, Fail-Fast한파싱은 개발자들이 에러를 빨리 찾을 수 있도록 도와줍니다. <br />사용자 정의 엘리먼트를 안전하게 사용할 수 있도록 네임스페이스를 제공합니다.<br />브라우저 외부 처리하는 것이 더 쉽습니다.<br />SVG<br />독립 실행가능한 XML 기반 문서 (.svg file)<br />XHTML 문서 안에 포함시키기<br />HTML5 문서 안에 포함시키기<br />
  16. 16. 알려지지 않은 요소들의 파싱<br />스타일 적용<br />Children 구조<br />16<br />
  17. 17. 17<br />기존의 SVG 방식<br />
  18. 18. Inline SVG<br />18<br />
  19. 19. CSS 기반 구조<br />CSS3 Selectors<br />더 적은 스크립트와 간단한 마크업으로 더 많은 것을 할 수 있게 해줍니다.<br />CSS3 Namespaces<br />XHTML 문서에서 네임스페이스를 사용할 수 있는 스타일 요소<br />
  20. 20. 데모 시연<br />CSS3 Selectors, T-shirt Designer<br />
  21. 21. IE9 프로그래밍 모델<br />웹 플랫폼의 핵심 부분은 DOM을 다루는데 사용됩니다.<br />DOM Core<br />DOM Events<br />DOM Style<br />DOM HTML<br />DOM Range<br />HTML5 Selection <br />
  22. 22. 데모 시연<br />DOM Style, DOM Range& HTML Selection<br />
  23. 23. 마크업과 프로그래밍 모델 : IE Platform Preview<br />
  24. 24. GPU를 사용한HTML5 그래픽<br />
  25. 25. GPU를 사용하는 HTML5 그래픽과 미디어<br />HTML5의 그래픽적 풍부함은 높은 성능을 갖춘 그래픽 하부 시스템을 요구합니다.<br />GPU를 쓰게 됨으로써,<br />알파채널 블렌딩과 같은 기능들이 높은 성능으로 구현되는 것이 가능하고,<br />부드러운 애니메이션과 비디오 재생을 위해 필요한 프레임수를 제공하고,<br />다른 시스템들이 더 빠르게 실행될 수 있도록 CPU 부하를 줄여줍니다.<br />
  26. 26. GPU를 이용한 HTML5<br />
  27. 27. Rich Graphics: HTML5의 기초<br />그래픽적으로 풍부한 스타일링<br />향상된 이미지 지원<br />확대축소 가능한 벡터 그래픽<br />미디어 요소<br />일관된 고화질과 고성능을 제공하기 위해, IE9은 윈도우7의 GPU그래픽 기능에 기반하고 있습니다.<br />
  28. 28. CSS3로 그래픽적으로 풍부한 스타일링<br />CSS3 Colors<br />알파 컬러, rgba()와hsla() 함수<br />투명도 조절, opacity 속성<br />CSS3 Backgrounds and Borders<br />둥근 모서리, border-radius 속성<br />하나의 요소에 다수의 배경 이미지 적용<br />Block 요소에 box-shadow 속성<br />
  29. 29. 데모 시연<br />Border Radius, CSS3 Media Queries<br />
  30. 30. 향상된 이미지 지원<br />ICC 버전4와 버전2 컬러 프로필<br />내장 컬러 프로필이 있는 이미지를 올바르게 표현해줍니다.<br />새로운 JPEG XR 포맷<br />JPG 보다 높은 압축률<br />같은 사이즈로 더 높은 퀄리티<br />같은 퀄리티로 더 적은 용량<br />JPEG XR도무손실 압축을 지원합니다<br />고해상도의 원본 사진을 주고 받는데 유용합니다.<br />TIFF 이미지 포맷<br />무손실 이미지, 흑백 이미지, 문서와 팩스 스캔 이미지 등으로 유명한 포맷입니다.<br />30<br />
  31. 31. 31<br />
  32. 32. 데모 시연<br />Color Profiles, Image Support<br />
  33. 33. 확대/축소 가능한 벡터 그래픽<br />마크업과 DOM 기반의 그래픽 : SVG 1.1<br />“View source”에서 간결함 —쉽게 배울 수 있다<br />쉬운 서버 사이드 생성—XML 형식<br />쉬운 클라이언트 사이드 디버깅—DOM으로 해석<br />널리 쓰이는 그래픽 프로그램들을 지원<br />쉬운 HTML5 통합<br /><svg width="400" height="200" xmlns="http://www.w3.org/2000/svg"><br /><rect fill="red" x="20" y="20" width="100" height="75" /><br /><rectfill="blue" x="50" y="50" width="100" height="75" /><br /></svg><br />
  34. 34. SVG : Internet Explorer Platform Preview<br />
  35. 35. Demos<br />Tweet Cloud, Real World Diagram, Org Charts, Biz Charts, Atlas zureEuropawahl<br />
  36. 36. 리치 미디어 통합—플러그인 없이<br />HTML5 <video> 요소<br />업계 표준의 MPEG-4/H.264 비디오<br />페이지의 어떤 요소와도 조합해서 쓸 수 있습니다.<br />HTML 컨텐츠, 이미지, SVG 그래픽<br />풀HD 해상도의 풀스크린 모드에서 60fps를 유지하는 GPU 기반의 구현가능<br />DXVA와 풀 하드웨어 비디오 디코더를 모두 지원<br />HTML5 <audio> 요소<br />업계 표준인 MP3와 AAC 오디오<br /><video width="800" height="450" src="myvideo.mp4" autoplay><br />No video for you</video><br />
  37. 37. 비디오 데모<br />Video<br />
  38. 38. 38<br />
  39. 39. 비디오 데모<br />Network Monitoring<br />
  40. 40. 8주 마다 한번씩 선보이는<br />IE9 플랫폼 프리뷰 다운로드<br />www.IETestDrive.com<br />가장 빠른 IE9 정보(영문)<br />http://blogs.msdn.com/ie <br />무엇이든 물어보세요.<br />황리건 @HRG<br />
  41. 41. © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.<br />The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.<br />
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×