seye2님의 이글루

seye2.egloos.com
포토로그 마이가든

HTML5의 소개 및 지원되는 않는 브라우져에서의 사용법 (3 - Video) html5

저자 : Mark Pilgrim

HTML5는 브라우져에서 지원하는 <video>라는 새로운 태그를 선보였다. 내장된 Video는 QuickTime, Flash등
third-party plugin없이 사용이 가능하다.

또한 <video>태그는 스크립트의 사용없이도 사용할 수 있다. 다양한 Video Files을 사용할 수 있고, 브라우져들은
HTML5에서 <video>태그를 지원함으로써 자체에서 지원되어지는 video format들을 기본으로 선택할 수 있게 될 것이다.
다음에서 관련 내용들을 볼 수 있다.

part 1: 포함하고 있는 포맷 (http://diveintomark.org/archives/2008/12/18/give-part-1-container-formats)
part 2: video codec의 불필요 (http://diveintomark.org/archives/2008/12/19/give-part-2-lossy-video-codecs)

HTML5 <video>태그를 지원하지 않는 브라우져들은 <video>를 앞으로도 지원하지 않을 것 같다. 그러나 third-party plugin
대신에 기본적으로 제공하는 이점에 대해서 알려야한다.

Kroc Camen은 Video for Everybody!(http://camendesign.com/code/video_for_everybody)로 볼려지는
해결방법을 제시했다.
HTML5 <video>태그를 사용할 수 있다면 사용하고, 아니라면 QuickTime, flash등 third-party plugin으로 이전 브라우져와의
호환성을 해결했다.
이러한 해결 방법에서 Javascript를 사용하지 않았다. 또한 어떤 브라우져에서도 잘 실행되었다.(모바일브라우져를 포함하고 있다.)

이 방법 말고도 더 많은 해결방법을 얘기해보고자 한다.
<video>태그를 사용한 페이지에서 play와 같은 기능들보다 더 많은 기능을 사용하고 싶다면, Javascript를 사용하여야 한다.
현재 브라우져가 HTML5 <video>태그를 지원한다라면, DOM 객체는 <video>태그를 만들고 canPlayType() 함수를 가지고
있을 것이다.
지원하지 않는다라면 <video>태그를 생성하여, 모든 태그에서 쓰이는 일반적인 속성으로 설정할 수 있다.

function supports_video() {
  return !!document.createElement('video').canPlayType;
}

기능을 직접 작성하는 대신에 Modernizr로 <video> 태그를 지원받을 수 있다.

if (Modernizr.video) {
  // let's play some video!
} else {
  // no native video support available :(
  // maybe check for QuickTime® or Flash® instead
}

다음으로는 현재 브라우져에서 실행되어 질 수 있는 video format을 찾는 테스트를 해볼려고 한다.

원서 : http://diveintohtml5.org/detect.html
태그 :
트랙백(0)덧글(0)

배경 이미지 100% 방법 html/css

원본 사이트(mootools사용)
http://www.pizzaza.ca/restaurant/bar_a_vin.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

<title>배경100%</title>
<style type="text/css">
#background_container {
    left:0;
    position:absolute;
    top:0;
}
#background {
    left:0;
    overflow:hidden;
    position:fixed;
    top:0;
}

* html #background {position:absolute;}

img { -ms-interpolation-mode: bicubic; }
</style>

<script type="text/javascript">
window.onload = function () {
    resize_background_image_now();
}
window.onresize = function () {
    resize_background_image_now();
}

function resize_background_image_now()
{
 var bg = document.getElementById('background').getElementsByTagName('img')[0];

 var ratio = 12/8;
 bg.style.width = windowWidth()+'px';
 bg.style.height = (windowWidth() / ratio)+'px';

 if (parseInt(bg.style.height) < windowHeight()) {
 bg.style.height = windowHeight()+'px';
 bg.style.width = (windowHeight() * ratio) +'px';
 }
}

function windowHeight () {
    var de = document.documentElement;
    return self.innerHeight ||
        ( de && de.clientHeight ) ||
        document.body.clientHeight;
}
function windowWidth () {
    var de = document.documentElement;
    return self.innerWidth ||
        ( de && de.clientWidth ) ||
        document.body.clientWidth;
}
</script>
<!--[if lt IE 7]>
<script defer type="text/javascript" src="http://www.pizzaza.ca/_java/fixed.js"></script>
<![endif]-->
</head>
<body style="margin:0; padding:0;">
<div id="background_container">
    <div id="background"><!-- InstanceBeginEditable name="background" --><img src="http://www.pizzaza.ca/_images/bg_julie.jpg" width="1200" height="800" alt=" " /><!-- InstanceEndEditable --></div>
</div>
</body>
</html>
태그 :
트랙백(0)덧글(0)

HTML5의 소개 및 지원되는 않는 브라우져에서의 사용법 (2 - canvas Text API) html5

저자 : Mark Pilgrim

 - canvas text API

사용하고 있는 브라우져가 canvas API를 지원한다면 canvas text API는 지원하지 않을것이다. canvas API는 시간이
지나면서 점점 늘어나고 있지만, text기능은 늦게 지원될 것이다. 몇몇 브라우져는 text API를 지원하기 전에 canvas를
먼저 지원하고 있다.

사용하는 브라우져가 canvas API를 지원한다면 DOM객체는 getContext() method로 <canvas>태그를 확인할 수 있도록
해준다.
사용하고 있는 브라우져가 canvas API를 지원하지 않는다면 DOM객체는 일반적인 method로 <canvas>태그를 만들 수
있도록 해준다.

function supports_canvas_text() {
  if (!supports_canvas()) { return false; }
  var dummy_canvas = document.createElement('canvas');
  var context = dummy_canvas.getContext('2d');
  return (typeof context.fillText == 'function');
}

canvas를 사용하기 위해서는 canvas가 지원되는지에 대한 확이부터 시작한다. support_canvas()함수에 대해 이전 섹션에서 확인할 수 있다.
사용하는 브라우져가 canvas API를 지원하지 않다는다면 text API지원도 안될 것이다.

if (!supports_canvas()) { return false; }

다음은 <canvas>태그와 context에 그릴 객체를 만든다. support_canvas()에서 이미 getContext method가 모든 canvas객체에 존재하는지에 대해 확인했기 때문에 사용이 가능하다.

var dummy_canvas = document.createElement('canvas');
var context = dummy_canvas.getContext('2d');

마지막으로 drawing context가 fillText()함수를 사용할 수 있는지에 대한 확인을 해야한다. 가능하다면 canvas text API의 사용이 가능하다.

return (typeof context.fillText == 'function');

이 기능을 쓰기전에 Modernizr를 사용하여 canvas text API의 지원을 받을 수 있다.

if (Modernizr.canvastext) {
  // let's draw some text!
} else {
  // no native canvas text support available :(
}

원서 : http://diveintohtml5.org/detect.html
태그 :
트랙백(0)덧글(0)

HTML5의 소개 및 지원되는 않는 브라우져에서의 사용법 (1 - canvas API) html5

저자 : Mark Pilgrim

 - 들어가기 전에

HTML5를 사용하는데 예전 브라우져들이 지원하지 않으면 어떻게 하나요? 라는 의문이 생길 것이다.
그러나 질문 자체가 잘못되었다. HTML5자체가 아닌 , 개별적인 특징의 모임이다. 브라우져들이 개별적인 특징들을
지원하는 것을 발견할 수 있을것이다. (canvas, video, geolocation)

 - 기술들의 발견

브라우져가 객체들의 모임인 웹페이지를 렌더링할때는(DOM을 생성한다.) HTML태그로 표현한다.
모든 태그(<p>,<div>,<span>)는 다양한 객체들에 의해 DOM을 표현한다. (전역객체(window, document)들은 특수하게
일반객체와는 다르다.)

모든 DOM객체들은 일반적인 속성들을 공유한다. 하지만 몇몇 객체들은 더 많은 속성을 가지고 있다.
HTML5특징을 지원하는 브라우져에서, 특정한 객체들은 특별한 속성을 가지고 있다.
DOM에서 이러한 속성들을 지원하는 특징들에 대해서 얘기를 해볼려고 한다.

발견한 4개의 기술들에 대해서 브라우져별 지원내용에 대해서 알아볼려고 한다.

 - Modernizr, HTML5 Library

Modernizr는 오픈소스이다. MIT-lincesed Javascript library이고 HTML5 & CSS3특징들을 지원한다.
Modernizr를 사용하기 위해서는 다음과 같은 <script>태그를 페이지 상단에 적용한다.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Dive Into HTML5</title>
  <script src="modernizr.min.js"></script>
</head>
<body>
  ...
</body>
</html>

Modernizr는 자동으로 실행되며, modernizr_init()같은 함수를 사용하여 구동시킬 필요가 없다.

이 라이브러리를 실행할때 Modernizr에 의해 호출된 전역객체들이 생성된다. 전역객체는 각각의 특징에 Boolean
속성들을 포함하고 있다.
예를 들어 사용하고 있는 브라우져가 canvas API(http://diveintohtml5.org/canvas.html)를 지원한다라면
Modernizr.canvas속성을 true값을 가지게 될 것이다.

canvas API를 지원하지 않는 브라우져라면 Modernizr.canvas속성은 false값을 가질 것이다.

if (Modernizr.canvas) {
  // let's draw some shapes!
} else {
  // no native canvas support available :(
}

원서 : http://diveintohtml5.org/detect.html

태그 :
트랙백(0)덧글(0)

Blog templates:HTML5의 layout관련 elements html5

저자 : Edward O'Connor

HTML5 spec은 layout과 관련된 새로운 sectioning elements를 소개하고 있다. - <article>, <section>, <header>, <footer>, <nav>, <aside>, <hgroup>

이런 태그들을 사용할때에 대한 혼란이 늘어나고 있다. 이러한 태그들을 사용할때 더 적절하게 사용하는 방법과 예제를 통하여 blog template을 만들어 보고자 한다.



이어지는 내용
태그 :
트랙백(0)덧글(0)
1 2 3 4 5 6 7 8 9 10 다음

메모장

카테고리

메뉴릿

라이프로그

포토로그

seye2의 포토로그

최근 트랙백

검색

블로그내 검색 영역

RSS

RSS
seye2.egloos.com is powered by Egloos. Subscribe to RSS. Skin design by egloos.