Pp3 devweb

개발자를 위한 인터넷 익스플로러 9
플랫폼 프리뷰 3판
황리건
한국 마이크로소프트

IE6를 떠나며
2
Photo Courtesy AtenDesign Group - http://www.flickr.com/photos/atendesigngroup/4408393890/

빠른 성능
똑같은 마크업
하드웨어 가속
5

빠른 성능

기존의 자바스크립트 엔진
Parser
Interpreter
ByteCode
Source Code
AST
7

새로운 자바스크립트엔진 – “챠크라”
Foreground
Parser
Interpreter
ByteCode
Source Code
AST
Background
Native Code
Background Compiler
멀티 CPU 코어 사용
8

시연
Flying Images / IE8, Chrome, FF, Opera, IE9

IE8
12
자바스크립트
DOM
Drawing Images

IE9
13

시연
Amazon Shelf
FishIE Tank
Mr. Potato Gun
Flickr Images

window.msPerformance소개
DOM에 통합된 성능 측정
브라우저에서 상호호환 가능한 성능 측정 방식으로 제안
W3C 멤버들과의 파트너십을 통해 만들어 지는 중입니다.
아직 변경 여지가 있습니다.
<script type="text/자바스크립트">
var w = window;
varnavStart= w.msPerformance.timing.navigationStart+ "ms";
varnavStartTime = Date(w.msPerformance.timing.navigationStart);
</script>

시연
window.msPerformance

똑같은 마크업

IE9 PP2
18

IE9 PP3
19

사용 비율을 참고로한 API 지원
20

표준 멤버로써의 활동
W3C 워킹그룹 참여
HTML5 Working Group, DOM Working Group, CSS Working Group, SVG Working Group, WebFonts Working Group
W3C 테스팅 TF 참여
SVG Testing Taskforce, HTML Testing Taskforce, Accessibility Testing Taskforce
21

인터넷 익스플로러 테스팅 센터
http://samples.msdn.microsoft.com/ietestcenter/
22

똑같은 마크업으로 똑같은 결과를 얻게 하기
23

시연
Border Radius, IE Logo / IE9 and Other Browsers

새로 추가되거나 업데이트된 DOM 강화
완전한 DOM Level 2와 DOM Level 3 지원
DOMContentLoaded
현재 페이지의 컨텐트 로딩이 끝나는 시점에 발생합니다.
복잡한 웹페이지에 UI 기능들을 추가할 때 유용합니다.
DOM Traversal
요소들의 간단한 리스트를 통해 열거하는 간단한 방법입니다.
26

시연
DOM Traversal Media Gallery

새로 추가되거나 업데이트된 자바스크립트 APIs
getElementsByClassName(class)
특정한 클래스 이름의 요소 리스트를 반환하는 HTML5 API
getComputedStyle(element, pseudoElement)
요소의 계산된 스타일값을 반환하는 DOM L2 함수
document.defaultView.getComputedStyle(element, null).getPropertyValue("height");
ECMAScript 5 메소드
새로운 배열 메소드:indexOf, lastIndexOf, forEach, every, some, map, filter, reduce, reduceRight
그 밖에 계산적인 메소드와 함수들 : String.prototype.trim, Date.prototype.toISOString, Date.parse, Date.now, Array.isArray, Function.prototype.bind
28

시연
GetComputedStyle, ECMAScript 5 Game, ECMAScript 5 Array

GPU로 강화된 HTML
30

GPU는 게임용?

GPU는 어디에나 있습니다.

GPU를 사용하는PC들의 Windows 체험지수
현존하는 PC에 사용되고 있는 CPU 성능은 상당히 좋은 편입니다.
4% 15% 32% 27% 12% 10%
1 2 3 4 5 6 7 8
Windows Experience Index
Graphics Scores of Vista and Win7 Users

GPU를 이용한 HTML5

새롭게 지원하는 HTML5 Canvas
자바스크립트를 통해서 2D 그래픽을 그릴 수 있도록 하는 block 요소.
드로잉 메소드 지원 : paths, boxes, circles, text and rasterized images
<canvas id="myCanvas" width="200" height="200">
Your browser doesn’t support Canvas, sorry.
</canvas>
<script type="text/자바스크립트">
var example = document.getElementById("myCanvas");
var context = example.getContext("2d");
context.fillStyle = "rgb(255,0,0)";
context.fillRect(30, 30, 50, 50);
</script>
35

시연
Deep Zoom, Canvas Pad

새로 추가된 @font-face와 WOFF 폰트
웹페이지에 기본 폰트 외의 폰트를 사용합니다.
사이트 별로 필요한 폰트를 패키지하고 배포할 수 있도록 하는 오픈 웹 폰트 포맷을 지원합니다.
@font-face선언으로 웹에서 사용할 수 있도록 설계되었습니다.
오픈타입이나 트루타입 폰트 데이터를 간단히 리패키징합니다.
W3C Fonts Working Group에서 정의한 표준입니다.
<style type="text/css">
@font-face {
font-family:MyFontName;
src: url('FontFile.woff');
}
</style>
<div style="font: 24pt MyFontName, sans-serif;">
This will render using MyFontName in FontFile.woff
</div>
37

시연
Web Fonts

HTML5 <video>
HTML5 <video> 요소
산업 표준 MPEG-4/H.264 비디오
페이지에서 다른 요소들과 함께 사용 가능합니다.
HTML 컨텐트, 이미지, SVG 그래픽
하드웨어 가속, GPU 기반의디코딩
속성
src – 소스 파일을 가져올 위치
autoplay – 준비되면 바로 재생할지 여부
controls – 컨트롤을 보여줄지 여부
preload – 페이지 로드에서 소스를 불러올지 여부
loop – 처음으로 다시 되돌릴지 여부
height & width – 플레이어의 가로 세로 크기
<video src="video.mp4" id="videoTag" width="640px" height="360px">


</video>
39

시연
Youtube, Video Panorama

HTML5 <audio>
HTML5 <audio>요소
산업 표준 MP3 와 AAC audio
DOM으로 완전하게 스크립팅 가능합니다.
Attributes
src – 소스파일을 가져올 위치
autoplay – 준비됐을 때 자동으로 재생할지 여부
controls – 컨트롤들을 보여줄지 여부
preload – 페이지 로드 시에 소스를 불러올지 여부
<audio src="audio.mp3" id="audioTag"autoplay controls>


</video>
41

시연
HTML5 Audio Player + XML Playlist

인터넷 익스플로러 9 정리
성능 : 새로운 자바스크립트 엔진
여러분의 최신 하드웨어를 이용해서 더 빠르게 실행되는 자바스크립트 엔진
똑같은 마크업: 여러분의 코드 그대로...
코딩에 더 많은 시간을 보내고, 디버깅에 더 적은 시간을 보내세요. 똑같은 마크업이 그대로 동작하도록 하는 건 브라우저의 몫.
하드웨어 가속 : 그리고 더 빨리 실행될꺼에요.
더 좋은 성능의 그래픽 시스템을 필요로 하는 애플리케이션이 더 잘 동작할 거에요.
43

플랫폼 프리뷰 3판 : 현재 사용 가능
IE6를 업그레이드해주세요.
IE8에서 개발해 보세요.
IE9 플랫폼 프리뷰 3탄을 다운로드하고 설치해보세요.
IE9 PP3 다운로드&데모 http://ietestdrive.com
플랫폼 프리뷰 2탄 소개 동영상
http://www.techdays.co.kr/2010spring/remix10/session1_2.html
44

http://uxfactory.com	1020
http://www.uxfactory.com	398
http://devcafe.nhncorp.com	16
http://stt-ns.nhncorp.cn	10
http://uxfactory.tistory.com	3
http://203.236.86.131	1
http://webmail.nhncorp.com	1

Pp3 devweb

by Reagan Hwang on Jun 27, 2010

Accessibility

Categories

Upload Details

Usage Rights

7 Embeds 1,449

Statistics

Pp3 devweb — Presentation Transcript