Firescope는 디버깅 패널에 레퍼런스 탭과 컨텍스트 메뉴를 추가하는 새로운 Firebug 확장기능입니다.

기능
  • HTML 엘리먼트, HTML 속성, CSS 속성을 검색할 수 있습니다(조합도 가능합니다). 입력과 동시에 검색하므로, 한 두 글자만 입력해도 원하는 결과를 얻을 수 있습니다. 
  • 검색 결과에는 브라우저 호환성, 표준 준수, 간략한 사용 설명 등을 포함합니다. 더 많은 정보를 원하시는 분들을 위해 SitePoint 레퍼런스 웹 사이트로 연결하는 링크도 제공합니다.
  • 검색 결과에서 마우스 오른쪽 버튼을 클릭하시면 두 가지 기능을 선택할 수 있습니다. 하나는 온라인에서 더 자세한 정보를 찾는 것이고, 다른 하나는 선택한 항목의 예제 코드를 보는 것입니다.
  • 예제 코드는 레퍼런스, HTML, CSS 패널의 옆에 열립니다. 그리고, 해당 항목을 사용하는 방법에 대한 실전 예제를 간략한 설명과 함께 보실 수 있습니다. 예제 코드는 편집할 수 있으며, 복사하기도 편합니다(더블클릭하면 전체선택합니다).
  • HTML 패널에서 엘리먼트 이름, 속성 이름 혹은 속성 값(편집도 가능)에서 오른쪽 버튼을 클릭하면 두가지 옵션 중 하나를 선택할 수 있습니다. 클릭한 항목을 "Look up"으로 살펴보거나 "Show Code Example"로 항목의 코드 예제를 볼 수 있습니다.
  • 마찬가지로 CSS 패널에서도 속성 이름과 값 위에서 오른쪽 마우스 클릭을 할 수 있으며, 옵션도 같습니다.
  • HTML 패널에서 현재 선택한 엘리먼트(보통 군청색 배경으로 강조)의 태그 이름 위에서 마우스 오른쪽 버튼을 클릭하면, 컨텍스트 메뉴에는 "Look up selection(선택영역 살펴보기)"사 나타납니다. 이 메뉴를 클릭하면 해당 엘리먼트에 정의된 모든 속성과 현재 적용된 모든 CSS 속성을 볼 수 있습니다. 이 기능은 "Reference" 탭을 클릭하면 자동으로 실행되어 현재 선택한 엘리먼트의 데이터를 보여줍니다.
  • 검사기를 사용해 다른 엘리먼트를 선택할 때, HTML 패널 옆의 코드 예제(Code Example)을 열면 선택한 엘리먼트에 대한 예제를 자동으로 보여줍니다.
  • 이와 유사하게, DOM 계층(crumbtrail)을 클릭할 때,  코드 예제(Code Exmaple) 패널이 열려있다면 열면 코드 예제를 보여줍니다. 메인 HTML 패널과 같은 컨텍스트 메뉴 항목이 있어 선택한 항목을 살펴보거나 관련한 코드 예제를 볼 수 있습니다.
from FireScope: Add a Web reference to your Firebug
Posted by 행복한고니 트랙백 1 : 댓글 0
Firefox 3.1가 HTML5의 <video>와 <audio>태그를 지원합니다. 마음에 쏙드는 이 멋진 글Mozilla 개발자 포털에 막 올라온 정보입니다. Firefox 3.1은 현재 Ogg 포맷을 지원하고 있지만, 다른 포맷들에 대한 지원도 검토중이라고 합니다.

문서에 있는 사용 예제입니다.
[code:html]
<video src="http://v2v.cc/~j/theora_testsuite/320x240.ogg" autoplay>
Your browser does not support the <code>video</code> element.
</video>
참 쉽죠? 다른 형식의 여러 원본을 정할 수도 있습니다.
[code:html]
<video autoplay>
  <source src="foo.ogg" type="video/ogg"></source>
  <source src="foo.mov"></source>
  Your browser does not support the <code>video</code> element.
</video>
주의할 것은 아직 source 엘리먼트가 완전히 지원되는 것은 아니라는 점입니다.

미디어 재생은 자바스크립트로 컨트롤 될 수 있습니다.
[code:js]
var v = document.getElementsByTagName("video")[0];
v.play();
사용할 수 있는 이벤트가 상당히 많아서(22개나 있습니다!), 서로 다른 미디어 이벤트에 기반해서 어떤 동작을 붙이거나 UI를 업데이트 할 수 있습니다.
[code:js]
var v = document.getElementsByTagName("video")[0];

v.addEventListener("seeked", function() { document.getElementsByTagName("video")[0].play(); }, true);
v.currentTime = 10.0;
이 코드는 탐색이 일어나면 작동합니다.

from Firefox 3.1 to support HTML 5 video and audio
Posted by 행복한고니 트랙백 0 : 댓글 0

Ars에서 오페라의 새 연구자료인 MAMA에 대해서 다루었습니다(역자 주 : 발음이 엄마라는 뜻의 '마마'와 같아 재미있어 하는 것 같습니다). 연구 결과에 따르면 웹의 4.13%만이 표준에 호환된다고 합니다.

MAMA는 메타데이터 분석과 어플리케이션 마이닝(Metadata Analysis and Mining Application, MAMA)의 약자로 웹을 수집해서 거의 350만에 달하는 페이지로부터 마크업을 인덱싱하고 데이터를 스크립팅하는 도구입니다. 오페라에서 이러한 작업을 하는 것은 보기 좋군요.

Ian Hickson씨가 구글 인덱스를 이용해 개발자들이 HTML을 어떻게 쓰는지에 대해 연구했습니다.

몇 가지 보고서는 이렇습니다:

The URL set

MAMA의 분석량은 어마어마한 전체의 1퍼센트에도 훨씬 못미치는 미미한  것입니다. 무엇이든 350만 정도가 의미있다고 하기엔 뭔가 이상합니다. 잠깐만이라도 그렇지 않다고 가정을 해볼까요. 우리는 모든 웹 페이지를 살펴볼 수 없어서, 살펴볼 URL의 소그룹을 선택하고 이것이 전체 웹의 대표격이라고 정해야 했습니다. 한가지 옵션은 무작위로 URL 셋을 선택하는 것입니다. 저는 Rene Saarsoo씨(코딩 습관에 대한 멋진 연구를 하셨던 분입니다)와 대화를 나누었습니다. 그는 웹의 구조와 URL 셋의 선택에 많은 훌륭한 부분들을 제시해주었습니다. 그 중 몇 개는 여기에 적어보겠습니다.

Markup Validation Report

웹 표준은 웹에 좋습니다! 이 사이트의 방문자 대부분은 이 말이 왜 진실인지에 대해서 이해할 것입니다. 유지보수의 편리함, 크로스 플랫폼 호환성, 장애인들의 접근, 그 밖에도 여러가지가 있습니다!

하지만 어떻게 웹의 현실을 이런 이상과 맞출 수 있을까요? 확실히 공개된 웹 표준으로 코딩해야할 정말 많은 이유들이 있지만, 주요 사이트들은 웹 표준에 유효할까요? 그렇지는 않습니다. 오페라의 MAMA 프로젝트는 극소수의 사이트들만이 실제로 유효한 마크업을 사용하고 있다는 정말 충격적인 통계를 보여주었습니다.

Key Findings Report

분석자료가 보여주는 것:

  • 웹 서버 사용률: Apache: 67.72%, IIS: 25.91%
  • 문서 구조와 크기
  • Flash 검출
  • CSS 스타일 사용
  • 스크립트
  • XMLHttpRequest 객체 사용

물론, 몇가지 지적할 점이 있긴 합니다. 페이지에서 "XMLHttpRequest"를 찾는 것은 XHR이 예제처럼 사용되기도 하는 요즘 현실을 반영하지 못합니다.

Doron Rosenberg씨가 이런 몇 가지 이슈에 대해 지적했습니다:

극소수 웹사이트만이 표준에 완벽히 호환된다는 것이 놀랍지는 않지만, 그들의 방법론은 허점이 있어보입니다. 웹 사이트는 페이지가 로드된 후에 이러한 통계에 영향을 줄 수 있을 점점 더 동적인 JavaScript를 사용하고 있습니다. 또한 주요 자바스크립트 라이브러리들은 CDN을 통해 링크되어있어 XMLHttpRequest 사용 통계가 그다지 유용하지는 않을 것 같습니다.

하지만 저는 중국 웹사이트가 플래시를 사랑한다는 것에는 정말 동의합니다. 전 아직도 AOL China를 Gecko 테스트하던 때의 악몽을 가지고 있습니다. 플래시로 만들어진, 스크롤되는, 떠다니는 광고는 끔찍했습니다.

그래도 몇가지 훌륭한 데이터들이 있으며, 우리에게 얘기할 거리를 주었습니다. 저는 Google, Microsoft, Yahoo! 그 외 웹을 인덱스할 수 있는 다른 회사에서도 이런 형태의 결과가 나왔으면 좋겠습니다.

from MAMA, who is using Web standards?

Posted by 행복한고니 트랙백 0 : 댓글 0
Michael Mahemof 씨가 HTML을 iframe에 넣고 추출하는 방법에 대해 작성하셨습니다. 원래 TiddlyWiki를 많이 사용하시는 분인데, 소스를 보다가 알게된 방법이라고 합니다. 이것은 그런 일을 하는데에 브라우저 파서를 사용할 수 있게 해줍니다:
[code:js]
// put it in
var doc = iframe.document;
if (iframe.contentDocument)
  doc = iframe.contentDocument; // For NS6
else if(iframe.contentWindow)
  doc = iframe.contentWindow.document; // For IE5.5 and IE6
 
// Put the content in the iframe
doc.open();
doc.writeln(content);
doc.close();
 
// and then get it out
var storeArea = doc.getElementById("storeArea");

from Introducing HTML into an iframe and getting it back
Posted by 행복한고니 트랙백 0 : 댓글 0
Validanguage은 HTML(속성보다는 주석으로)과 JSON API를 통해 설정할 수 있는 간단하고 새로운 검증 프레임웍입니다.

예를 들어, 아래 코드는 input 박스에 숫자, 달러, 점이 아닌 것을 입력하려 하면 빨갛게 반짝일 것입니다.
[code:xml]
<!-- <validanguage target="example" mode="allow" expression="numeric$." /> -->
혹은 JSON을 통해 설정할 수도 있습니다.
[code:js]
validanguage.el.example = {
  characters: {
     mode: 'allow',
     expression: 'numeric$.',
     onsubmit: true,
     errorMsg: 'You may only enter numbers, periods,
                or the dollar sign.'
  },
  required: true,
  errorMsg: 'Please enter a valid monetary amount',
  onsuccess: 'someObject.successHandler',
  onerror: [errorHandler1, errorHandler2]
}
기능
  • 100% 겸손한 JavaScript, 전역 validanguage 객체 아래에 네임스페이스화 되어있음. 인라인 이벤트 핸들러 사용하지 않음(심지어 폼 전송을 중단하지도 않음)
  • 외부 라이브러리 필요하지 않음(옵션으로 Prototype 통합은 가능)
  • 검증 설정을 관리하기 위해 상속 사용. 전역 설정, 폼별, 엘리먼트별 설정 가능.
  • 두 개의 선택적인 API 제공:
    • HTMT API로 주석 태그내부에 위치. 쉽고 간편하게 사용하기 위한 선택.
    • JSON 기반 API. 고급 설정

from Validanguage 0.9: More form validation
Posted by 행복한고니 트랙백 0 : 댓글 0
아마 한번쯤은 생각해보셨을지도 모르겠습니다. Mozilla의 Rob O'callahan 씨가 자신의 블로그에 SVG효과를 HTML에 적용하는 실험적인 Gecko 브랜치 시연에 대한 글을 작성해 우리를 놀라게 만들었습니다.
사용자 삽입 이미지
위와 같은 효과는 아래 코드를 적용함으로써 가능합니다:
[code:js]
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:svg="http://www.w3.org/2000/svg">
<body style="background:#ccc; font-size:30px;">
  <style>
    p { width:300px; border:1px solid black; display:inline-block; margin:1em; }
    iframe { width:300px; height:300px; border:none; }
    b { outline:1px dotted blue; }
  </style>
  <p class="target" style="background:lime;">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
    ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
  <iframe class="target" src="http://mozilla.org"/>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing
    <b class="target">elit, sed do eiusmod tempor incididunt
    ut labore et dolore magna aliqua.</b> Ut enim ad minim veniam.</p>
 
  <style>.target { clip-path: url(#c1); }</style>
  <svg :svg height="0">
    </svg><svg :mask id="m1" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
      </svg><svg :linearGradient id="g" gradientUnits="objectBoundingBox" x2="0" y2="1">
        <svg :stop stop-color="white" offset="0"/>
        <svg :stop stop-color="white" stop-opacity="0" offset="1"/>
      </svg>
      <svg :circle cx="0.25" cy="0.25" r="0.25" id="circle" fill="white"/>
      <svg :rect x="0.5" y="0.2" width="0.5" height="0.8" fill="url(#g)"/>
</body>
</html>
Rob씨는 다음과 같은 몇가지 좋은 지적을 해주셨습니다:
CSS는 진보된 시각 효과를 HTML에 적용하는 작업에는 정말 안어울립니다. 한가지 문제는 CSS가 shape나 filter 처리 스택과 같은 구조적인 값을 관리하는데 좋지 못하다는 것입니다; CSS 문법으로 그들을 표현하려면 성가십니다. 아니면 새로운 사용자정의 CSS 문법이 필요해지죠(예. @-rules). 그리고 스크립트가 이러한 구조적인 값들을 다룰 수 있게하는 표준 DOM 이 없습니다. 또다른 문제는 우리가 명세의 중복과 복잡한 기능의 구현을 피해야 한다는 데에 있습니다.
그리고는 다른 기술들과는 다른 SVG의 장점에 대해 말했습니다:
보다 나은 SVG-HTML 통합을 제공함으로써 얻어지는 좋은 덤은 SVG가 웹에 발을 들여놓을 수 있게 된다는 것입니다. Flash나 Silverlight를 사용해서는 이런 효과를 실행할 수 없습니다. 그들은 표준이 아니기 때문에 아마도 이대로 계속 이 파티에 초대받지는 못할 것입니다.
WebKit의 눈부신 CSS와는 다르게, Gecko에서는 그러한 것들을 아직 사용할 수 없습니다:
저는시험서버를 만들고 있습니다. 그들이 준비가 되면 이 포스트를 업데이트하겠습니다. 제 Mercurial 저장소로 가능 링크는 이렇습니다.

from Mozilla Experiments with Applying SVG Effects to HTML on Ajaxian
Posted by 행복한고니 트랙백 0 : 댓글 0
Mick Chambers씨가 JavaScript와 Flash를 이용하여 HTML5 태그를 구현하셨습니다.

기본적으로, 이 라이브러리는 VIDEO 엘리먼트/태그와 속성을 해석하고, 특정 동영상을 읽어들일 수 있는 Flash 비디오 재생기를 표시하기 위해 적합한 OBJECT 혹은 EMBED 엘리먼트로 대체합니다. h264 컨텐트와 FLV 형식 둘 다 재생가능합니다.

이 라이브러리는 Flash 컨텐트의 표현을 위해 SWFObject JavaScript 라이브러리를 사용했습니다.

현재 구현된 VIDEO 속성은 다음과 같습니다:

  • controls
  • poster
  • autoplay
  • width
  • height
  • playcount

까다로운 부분은 VIDEO DOM 스크립팅 API를 깔끔하게 구현하는 일입니다. 당연히 가능할 거라고 믿고 있긴 하지만 말입니다.

사용해보시려면, 다음과 같이 vedio 태그를 채우시면 됩니다:
[code:js]
<script type="text/javascript" src="swfobject/src/swfobject.js"></script>
<script type="text/javascript" src="html5_video.js"></script>
 
<video src="http://onair.adobe.com.edgesuite.net/onair/raulph_hauwert_papervision3d.flv"
        controls
        poster="testpattern.png"
        autoplay="true"
        width="640"
        height="360"
        playcount="500">
</video>
예제는 여기서 보실 수 있고, 스크립트는 여기서 받으실 수 있습니다.

from HTML5 Video tag implemented in Flash on Ajaxian
Posted by 행복한고니 트랙백 0 : 댓글 3

아래는 Anne van Kesteren 씨의 HTML5의 XTech 프리젠테이션입니다:

The Web's language is HTML
(웹의 언어는 HTML이다)

The Web's application language is HTML too
(웹 응용프로그램의 언어도 HTML이다)

HTML is pretty broken
(HTML은 제대로 엉망이다)

HTML5 to the rescue
(HTML은 구원이다)

Defines processing for all of HTML

Is for Web applications and documents

Is defined in as an abstract language

Can be written in both HTML (HTML5) and XML (XHTML5)

Is a multi-vendor effort

Worked on by overlapping groups: WHATWG and W3C HTML WG

HTML5 is (partially) implemented today

HTML5 can be used today

Great Community! (Wikis, tools, tests, reviewing)

<section>, <footer>, <progress>, <time>, …

<input type=date>, <input pattern=[a-Z]>, …

Immediate mode graphics: <canvas>

<video> and <audio>

SQL storage, offline application cache, drag & drop, editing, …

Get involved: w3.org/html and whatwg.org.

EOP_ERR exception raised: slide 21

또한 Anne씨는 HTML5에서 ruby가 지원된다고 알려주셨습니다.

Ruby 개발자라면 너무 좋아하진 마세요. 이것은 다른 ruby입니다.

여기서 말하는 루비란, 원래의 텍스트에 다는 작은 발음기호, 설명 정도가 될 것 같습니다. Ruby의 정의에도 "동아시아 문서에서 발음기호를 표시하기 위한 것"이라고 써두었네요. 예를 들면 이런 것입니다.

그림 1. Ruby 사용 예제1

그림 1. Ruby 사용 예제1

한문이 원래의 글이고, 다른 ruby text 들이 발음기호를 알려주고 있습니다. 일본에서 한자와 발음을 병기하는 것을 생각해보시면 될 것 같습니다. 또한 이런 식으로 사용할 수도 있습니다.

그림 2. Ruby 사용 예제2

그림 2. Ruby 사용 예제2

분명 유용하긴 한데, ruby라는 글자를 보고 낚인 것은 저 뿐인가요?

from HTML5 and a different kind of ruby support on Ajaxian
Posted by 행복한고니 트랙백 0 : 댓글 0

Omar AL Zabir씨가 UFrame이라는 새로운 라이브러리를 게시하셨습니다:

UFrame은 크로스 브라우저와 크로스 플랫폼을 지원하며 UpdatePanel과 iframe의 장점을 혼합했습니다. UFrame을 이용하면 div가 정적이든 동적이든 어떤 페이지에서이건 IFRAME으로 컨텐트를 읽는 것 같은 행동을 할 수 있습니다. iframe처럼 인라인 혹은 외부 JavaScript와 CSS를 가진 페이지를 읽을 수도 있습니다. 하지만 iframe과는 다르게 메인 문서 내부의 컨텐트를 읽으며, 브라우저를 느리게 하지 않고도 페이지에 UFrame을 몇개든 사용할 수 있습니다. ASP.NET 포스트백을 잘 지원하고, DataGrid 등의 어떤 복잡한 ASP.NET 컨트롤도 UFrame안에서 사용할 수 있습니다. UFrame은 UpdatePanel을 대체하면서 ASP.NET MVC와 완벽하게 동작합니다. 가장 좋은 점은 UFrame이 100% JavaScript로만 구현된 크로스 플랫폼 솔루션이라는 것입니다. 그 결과, 여러분은 UFrame을 ASP.NET, PHP, JSP 등 어떤 플랫폼에서도 사용할 수 있습니다.

사용하시려면 div 를 설정하시면 됩니다:

[code:xml]
<div class="UFrame" id="UFrame1" src="SomePage.aspx?ID=UFrame1">
  <p>This should get replaced with content from Somepage.aspx</p>
</div>
Dion씨는 이것을 보고 purple includes를 조금 떠올리셨다고 합니다.

iframe의 느림은 악명높습니다. 그것이 Caja 프로젝트가 존재하는 이유 중 하나이기도 합니다. 우리가 페이지에 존재하는 코드를 믿을 수 있다면 훨씬 빨리 렌더링 할 수 있을 것입니다(페이지의 위젯을 생각해보세요).

사용자 삽입 이미지

from UFrame: div meets iframe on Ajaxian
Posted by 행복한고니 트랙백 0 : 댓글 0
Kevin Yank씨가 Firefox 3 RC 1 에서 새로워진 기능을 보고, 웹 개발자들이 알아야 할만한 부분을 짚어주셨습니다.

부드러운 하이픈
Firefox 3 의 CSS 개선사항을 보면 부드러운 하이픈soft hyphen이 추가된 것을 보실 수 있습니다. HTML 표준에는 있었으나 그간 브라우저들이 구현하지는 않았던 모양입니다. 이번 Firefox 3의 지원을 시작으로 IE, Safari, Opera 등의 다른 브라우저에서도 지원하게 될 것이라고 합니다. 부드러운 하이픈은 평상시에는 보이지 않지만, 내용이 밀려 내려가야 할 경우에 나타난다고 합니다. 영문을 띄어쓰기 없이 붙여썼을 때 레이아웃이 깨지거나 글이 제대로 보이지 않는 일은 많이들 겪어보셨을텐데, 이 경우에 유용하게 사용할 수 있을 것 같습니다.

실제 동작을 보시겠습니다:
사용자 삽입 이미지

Inline Blocks
이 역시 잘 알려져있지 않지만, 꽤 유용한 기능입니다. 엘리먼트 스타일에 display 타입으로 inline-block 이라는 값을 적용하면 엘리먼트는 span과 같은 inline 엘리먼트처럼 위치를 정합니다. 하지만, 내부의 컨텐트들은 해당 엘리먼트가 block 속성을 가진 것처럼 동작하게 됩니다.

모든 브라우저에서 이것만 제대로 지원된다면 그간 float 으로 삽질했던 일이 훨씬 많이 줄어들게 될 것 같습니다.
[code:js]
<ul class="gallery">
  <li>
    <div class="caption">A short caption</div>
    <div class="thumb"><img src="thumb1.jpg"/></div>
  </li><li>
    <div class="caption">A short caption</div>
    <div class="thumb"><img src="thumb2.jpg"/></div>
  </li><li>
  …
</li></ul>

위 코드는 다음과 같이 표현됩니다.
사용자 삽입 이미지

실제 동작하는 것을 확인해보세요.

from Soft-hyphens and inline-block; Subtleties in Firefox 3 RC 1 on Ajaxian
Posted by 행복한고니 트랙백 0 : 댓글 2
John Resig씨는 일요일 오후의 휴식시간을 가져야 할 것 같습니다. 그가 이번에 JavaScript로 HTML parser를 구현했거든요. 라이브러리를 이용해서 몇가지 방식으로 HTML을 공략할 수 있도록 합니다(데모는 여기서 실행해보세요):
A SAX-style API

태그, 텍스트, 주석을 콜백으로 다룹니다. 예를 들어, 단순한 HTML to XML 직렬화를 구현하려한다면 - 이런 식으로 할 수 있습니다:
[code:js]
var results = "";

HTMLParser("<p id=test>hello <i>world", {
  start: function( tag, attrs, unary ) {
    results += "<" + tag;
    for ( var i = 0; i <attrs.length; i++ )
      results += " " + attrs[i].name + '="' + attrs[i].escaped + '"';
    results += (unary ? "/" : "") + ">";
  },
  end: function( tag ) {
    results += "";
  },
  chars: function( text ) {
    results += text;
  },
  comment: function( text ) {
    results += "<!--" + text + "-->";
  }
});

results == '<p id="test">hello <i>world</i></p>'

XML Serializer

이제 앞의 것을 구현하는 것에 대한 걱정은 하실 필요가 없습니다. 라이브러리에 직접 포함되어있기 때문입니다. HTML을 집어넣으면 XML 문자열을 뱉어낼 것입니다
[code:js]
var results = HTMLtoXML("<p>Data: <input disabled/>")
results == "</p><p>Data: <input disabled="disabled"/></p>"

DOM Builder

HTML parser를 현존하는 DOM 문서(혹은 존재하는 DOM 엘리먼트 안에)에 삽입하기위해 사용하고 계시다면, htmlparser.js 가 그것을 다룰 수 있는 간단한 메소드를 제공합니다:
[code:js]
// The following is appended into the document body
HTMLtoDOM("<p>Hello <b>World", document)

// The follow is appended into the specified element
HTMLtoDOM("<p>Hello <b>World", document.getElementById("test"))

DOM Document Creator

이것은 DOM 빌더를 조금 더 개량한 버전입니다. 웹 페이지 전체 구조를 다루는 로직을 포함하고 있으며 새로운 DOM document를 반환합니다.
이 메소드에 의해 몇가지가 강제됩니다:
  • html, head, body, title 엘리먼트는 항상 존재할 것입니다.
  • 단 하나의 html, head, body, title 엘리먼트만 존재합니다(만약 사용자가 더 만들기를 원한다면, 적절한 위치로 옮겨져서 병합될 것입니다).
  • link, base 엘리먼트는 head에 위치하도록 강제됩니다.
이 메소드를 이렇게 사용할 수 있습니다:
[code:js]
var dom = HTMLtoDOM("<p>Data: <input disabled/>");
dom.getElementsByTagName("body").length == 1
dom.getElementsByTagName("p").length == 1

이 API를 사용할 수 있는 곳 중 하나는 아마도 서버측이 될 것입니다. 예를 들면, Aptana Jaxer같은 것이죠.

from HTML Parser in JavaScript on Ajaxian
Posted by 행복한고니 트랙백 0 : 댓글 0

Simon Willison씨가 data- 속성을 통해 HTML 엘리먼트에 필요한 속성을 추가할 수 있는 방법으로 논의되는 HTML 5 스펙의 일부에 대해 글을 썼습니다.

예를 들어, 게임 상의의 우주선이라고 하면 이렇게 표현할 수 있습니다:

[code:Xml]
<div class="spaceship" data-id="92432"
     data-weapons="laser 2" data-shields="50%"
     data-x="30" data-y="10" data-z="90">
 <button class="fire"
         onclick="spaceships[this.parentNode.dataset.id].fire()">
  Fire
 </button>
</div>

Simon 씨는  "이것은 설정값을 HTML 컨텐트로 저장할 장소가 마땅찮은 겸손한(unobtrusive) JavaScript에서 매우 유용하게 사용할 수 있습니다. 이는 또한 Dojo가 Dojo 위젯임을 표시하기 위해 커스텀 속성을 추가할 수 있는 승인된 방법을 가지게 됐다는 것을 의미합니다." 라는 사실을 지적했습니다.

from Embed your data- in HTML 5 on Ajaxian

Posted by 행복한고니 트랙백 0 : 댓글 0

티스토리 툴바