SVG와 Canvas
SVG는 웹페이지에 벡터 그래픽을 표현하는 표준이고, Canvas는 웹페이지에 Drawing기능을 제공하는 표준입니다. 둘 다 지금까지 웹에서 경험하지 못한 자유로운 그래픽 표현을 위해 HTML5에 추가될 예정이며, 이미 일부 웹브라우저에서는 구현되어 있습니다.
아래 소개하는 예제는 Firefox3 최근 알파 버전에서 동작하며 실험적으로 구현된 기능을 일부 맛볼 수 있습니다.
웹과 Firefox의 앞으로 모습을 잠깐 살펴보시기 바랍니다.
SVG ForeignObject를 이용하면 SVG에 다른 마크업을 임베딩하여 각종 벡터 그래픽 효과를 줄 수 있습니다.
아래 예제에서는 HTML 태그인 <iframe>를 임베딩하여 20도 돌린 효과를 보여주고 있습니다.
<?xml version="1.0" standalone="yes"?>
<svg xmlns = "http://www.w3.org/2000/svg">
<g transform="translate(300, 0) rotate(20)">
<foreignObject x="10" y="10" width="800" height="800">
<body xmlns="http://www.w3.org/1999/xhtml">
<iframe src="http://starkravingfinkle.org/blog" style="width:700px;height:700px"></iframe>
</body>
</foreignObject>
</g>
</svg>
출처: http://starkravingfinkle.org/blog/2007/07/firefox-3-svg-foreignobject/
SVG ForeignObject를 이용하여 동영상을 자유자재로 돌리는 기능을 구현한 예제도 있습니다.
향후, 웹에서도 플래시(Flash)나 실버라이트(Silverlight) 수준의 그래픽 효과를 구현할 수 있을 것 같습니다.
Canvas3D를 구현한 예제도 있는데, firefox3에서 확장을 설치하면 데모를 볼 수 있습니다OpenGL에 thin layer를 제공하여 구현되었고 Canvas 2D처럼 사용하나 봅니다. 실제 해보니 아직은 잘 안되네요.
video와 audio 태그
HTML5에 추가될 video와 audio태그입니다. WHATWG에서 현재 HTML5 스펙을 만들고 있는데, 오페라의 제안으로 video와 audio 태그가 들어간 것 같습니다. 별도의 plug-in 설치 없이 기본적으로 OGG는 동작하도록 하고 다른 파일은 plug-in 형태로 추가됩니다. plug-in이 다르더라도 앞으로는 <video>, <audio> 태그를 통해 동일한 방식으로 멀티미디어 파일을 제어할 수 있게 되었습니다.
<video src="BillysBrowser480.ogg" id='v1' style="width: 640; height: 480;"></video>
<script type="text/javascript">
function time_update(v, t) {
t.innerHTML=v.currentTime;
if(!v.paused)
setTimeout(function() { time_update(v, t); }, 1000);
}
function play(video, time) {
var v = document.getElementById(video);
var t = document.getElementById(time);
v.play();
if(time)
time_update(v, t);
}
function pause(video) {
var v = document.getElementById(video);
v.pause();
}
http://www.double.co.nz/video_test/test2.html
Offline Web Application
현재 offline 기능은 Google Gears, 모질라, WHATWG에서 각각 작업을 하고 있습니다. Google Gears는 얼마전에 출시되어 일부 Google 웹서비스에 적용되었습니다. 모질라에서는 SQLite를 이용해서 cookie, cache, bookmark, profile 등의 데이터를 저장할 계획을 갖고 있습니다. 현재는 각각 작업중이지만 Firefox3에서 모두 통합될 전망입니다.
XMLHttpRequest++
Ajax 혁명을 불러온 XMLHttpRequest도 더욱 발전된 전망입니다. 지금까지 하나의 도메인으로만 Request를 보낼 수 있었는데, Firefox3에서 여러 도메인으로 Request를 지원합니다. 웹 어플리케이션의 서버 의존성이 점점 줄어둘고 브라우저 하나만으로 많은 서비스가 가능해졌습니다. 향후 매쉬업 서비스 개발이 더욱 활성될 전망입니다.
참고
http://ejohn.org/blog/future-of-firefox-and-javascript/
이 글은 스프링노트에서 작성되었습니다.
댓글 없음:
댓글 쓰기