Rev. 2.73

이제는 좀처럼 자바스크립트가 없는 웹페이지를 찾아보기 힘들 정도로 자바스크립트는 대중화되었습니다. 그러나 웹브라우저에는 자바스크립트를 비활성화하는 기능이 존재하기 때문에 모든 사용자가 자바스크립트를 사용할 수 있는 환경이라 판단하는 것은 옳지 않습니다.(그딴 사용자는 무시하자고 하는 분이 계시면 마음의 벽을 쌓으시길...) 이런 경우 사용자에게 자바스크립트를 활성화 할 것을 권고하는 등으로 사용하는 요소가 바로 noscript 요소인데 요녀석을 대체 컨텐츠로 리디렉션하는 트릭이 있어 공유합니다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <noscript>
      <meta http-equiv="refresh" content="0; url=noscript.html">
    </noscript>
    <title>Redirect to a Page for Print if JavaScript is disabled</title>
  </head>
  <body>
    <header>
      <h1>Redirect to a Page for Print if JavaScript is disabled</h1>
    </header>
    <section>
      <p>JavaScript is <em>enabled</em>.</p>
    </section>
  </body>
</html>

noscript 요소를 head 요소에서 사용하고 meta 요소에 http-equiv속성을 refresh로 설정했습니다. 지정된 시간이 지나면 특정 주소로 이동하는 meta 요소입니다. 위 코드는 자바스크립트를 사용할 수 없는 환경의 사용자를 구분하여 noscript.html로 리디렉션합니다. 이를 응용하면 link 요소와 style 요소등을 응용하여 스타일의 변화를 꾀할 수도 있을 것입니다.(HTML4에서도 작동하는지는 확인하지 못했어요;)

마땅히 리디렉션 시킬 곳이 없다거나 대체 컨텐츠를 만들기 귀찮다면 enable-javascript.com으로 연결하는 것을 권장합니다. 크로아티아 친구들이 서비스하는 이 웹사이트는 방문객이 자바스크립트의 필요성과 활성화하는 방법을 상세히 설명하는 내용을 다루고 있습니다.(한국어가 없길래 날로 번역해서 넘겨줬더니 발빠르게 페이지를 추가해 주더군요. 리소스 작업을 구글닥에서 실시간으로 협업한 Toni씨 반가웠고, 번역에 도움주신 여친님 고마워요. ㅎㅎ)

Comments

morningstar.png

Cristiano Belloni씨는 순수 HTML5만을 이용하여 스텝 시퀸서에 의해 제어되는 Monophonic Bassline 신디사이저인 Morning Star를 만들었습니다. 모질라가 밀고있는 Audio Data API와 구글이 밀고있는 Web Audio API를 모두 지원하는 KievII 라이브러리를 사용했습니다. 이 라이브러리 역시 Cristiano Belloni씨가 배포한 것으로, 오디오 DSP 뿐만 아니라 다양한 GUI 요소들까지도 포함하고 있습니다. 손잡이(knobs), 슬라이더 등은 캔버스 요소로 만들어 졌으며, 전체 UI가 하나의 캔버스 요소입니다.

신디사이저 자체에는 스탭 편집, 피아노 롤, 페턴 제어, 녹음 및 재생, 다양한 효과들 등, 아주 많은 기능을 포함하고 있습니다. 사용자의 마지막 변동 사항을 자동으로 localStorage에 저장하여 편집 도중 브라우저를 닫았다 열어도 계속해서 작업을 이어나갈 수 있습니다. 또한 자신이 작업한 음악을 URL로 내보낼수 있어 친구와 협업하는 것도 가능하다고 합니다. 보다 자세한 정보는 Cristiano Belloni씨의 블로그에 작성되어 있으며, 소스코드는 Github에 공개했습니다.

Comments

애플의 기본 프로그램인 포토부스의 멋진 그래픽 필터 효과들을 사용해 본 경험이 있으세요? Paul Neave씨는 브라우저만으로 이와 유사한 기능을 제공하는 HTML5 비디오 이펙츠 데모를 선보였습니다. 아쉽게도, 지금 출시된 브라우저들은 플래시를 이용하지 않는 한 웹캠을 사용할 수 있는 방법이 없지만, 최근 구글 크롬은 차기 버전(코드네임 카나리아)에 들어갈 핵심기능인 WebRTC(Web Real-Time Communications) API의 getUserMedia를 이용하여 이 데모를 정상적으로 수행해 볼 수 있습니다. 카나리아를 구하는 방법과 설정하는 방법은 조금있다가 살펴 보기로 하고요. 이 데모에 포함된 비디오에 실시간으로 반영되는 효과들은 자바스크립트와 WebGL을 이용한 것입니다. 대략 살펴 보면, HTML5의 비디오 요소에서 얻어낸 아웃풋 데이터를 캔버스 요소로 불러와서 WebGL의 쉐이더 효과를 입힌 것입니다. 포토부스와 유사한 카운트가 나타나면서 스냅샷을 찍을 수 있고 찍은 사진을 소셜 네트워크에 공유하거나 다운로드 할 수 있습니다. 정말 멋지지 않아요?

videoeffects.png

만약 getUserMedia가 활성 되지 않은 경우 별도로 준비된 동영상이 나타나며 여러 그래픽 효과들만 실험해 볼 수 있습니다. 웹캠과 연동하여 태스트하려면 조금 복잡한 과정을 거쳐야 합니다. 앞서 말씀드린 크롬의 카나리아 버전을 설치한 후에 실행 옵션을 주어야 하는데, 윈도 버전은 속성창을 열어 대상란의 쌍따옴표(")뒤에 "--enable-media-stream" 이라고 작성해 주어야 하고 맥용은 다음과 같이 실행합니다.

open -a "/Applications/Google Chrome Canary.app" --args --enable-media-stream

그리고 주소창에 "chrome://flags"를 입력하여 나타난 옵션 패널에서 "Media Stream Flag"를 활성시키고 재시작 합니다. 보다 자세한 사용법은 이 곳에 있으니 참고하세요. 최대 100fps까지 확보되며 안정적으로 작동하는 것을 확인하였습니다. 페이스타임과 같은 웹앱이 나오는 것도 이제 시간문제로군요. 떨거지들이 어영부영 만든 블라블라 API의 웃는 얼굴에 침이라도 뱉듯이 종지부를 찍어버리는 구글은 참 무섭습니다.

Comments