궁금한 점이 생길 것이다.
Q.geolocation이 HTML5의 일부분인가? 왜 이 기능에 대해서 설명하는 것인지?
Geolocation은 현재 브라우져에서 지원하고 있고, 그들은 HTML5 특징에 지원여부를 추가하고 있다.
엄밀히 말하면, geolocation은 Geolocation Working Group(http://www.w3.org/2008/geolocation/)에 의해 표준화
되고 있고, 이것은 HTML Working Group과 분리되어 있다. 그러나 관련글 내에서는 geolocation에 대하여 얘기를
할려고 한다.

웹의 진화에 있어서의 일부분이고 이런일이 현재 일어나고 있기 때문이다.

geolocation API(http://www.w3.org/TR/geolocation-API/)를 통해 믿을수 있는 웹사이트들과 함께 당신의
위치정보를 공유할 수 있다.
윈도, 경도는 javascript를 통해 가능하고, 이것은 지도를 통한 당신의 위치를 보여주고, 지역 회사등을 찾는 일과 같은
위치인식등을 원격의 웹서버를 통해 전달받을 수 있다.

궁금한 점이 생길 것이다.

Q.Geolocation이라는 기능이 왠지 섬뜻하다. 끌수도 있는 것인가?
개인정보에 대해서는 당신이 원격의 웹서버에 당신의 물리적 위치에 대한 공유를 얘기했을때 관계가 있다.
geolocation API explicitly states(http://www.w3.org/TR/geolocation-API/#security)에서 사용자의 허락과
관련된 표현없이 웹사이트들에서 위치 정보를 보내지 않는다. 다른말로 하면 당신의 위치정보를 공유하는것은 항상
옵션이다. 당신이 원하지 않는다면 하지 않을 것이다.

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

Offline web applications(http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html#offline)는
online 웹어플리케이션에서 벗어나기 시작했다.
첫째로, 당신은 offline에서 활성화된 웹페이지를 방문할 수 있고, offline에서 동작하기위해 필수적인 파일들을
웹서버에서 브라우져에 알려준다.

이러한 파일들은 어떤것이든 될 수 있다.(HTML, Javascript, Images, video등)

당신의 브라우져는 필요한 모든 파일들을 다운로드할 것이고, 당신이 인터넷에 연결되어 있지 않을 때도 웹사이트들을
재방문할 수 있다.
당신의 브라우져는 당신이 오프라인 되었을때 필요한 파일들을 다운로드하여 사용할 수 있다고 알려줄 것이다.
다시 온라인 되었을때, 당신은 원격에 있는 웹서버에 변경된 어떤것들도 업로드 할 수 있다.

브라우져가 offline web applications을 지원한다라면 전역 window객체의 속성인 applicationCach 속성을
사용할 수 있다.
하지만 지원하지 않는다면 applicationCache속성은 정의되어 있지 않을 것이다.

function supports_offline() {
  return (typeof window.applicationCache != 'undefined');
}

Modernizr(http://www.modernizr.com/)에서는 아직 지원하지 않고 있다.

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

Video format은 언어로 쓰는 것과 같다. 영어신문과 스페인 신문은 같은 정보를 전달하지만, 당신이 영어만 읽을 수 있다면
여러 언어의 신문중 영어신문만 읽을 수 있을 것이다. video를 play하기 위하여 브라우져들은 언어(video로 쓰여진)를 이해하는 것이 필수적이다.

위에서 언어라고 말한것은 video에서는 codec으로 불리어 진다. vidoe의 stream을 해석하기 위한 알고리즘을 사용한다.
불행하게도 HTML5 Video Tag에서는 코덱을 사용할 수 없다. 브라우져들은 두개정도의 동영상을 볼 수 있게 제공한다.
(라이센스 비용 때문이다.)

HTML5의 Video태그는 safari와 iphone에서는 잘동작한다.(Adobe Flash도 지원한다. 이것에 대한 해결 방법은 Video for Everybody! - http://camendesign.com/code/video_for_everybody 여기서 확인하면 된다.)

또 Chromium(http://code.google.com/intl/ko/chromium/)과 Mozilla Firefox(http://www.mozilla.or.kr/ko/)와 같은
오픈 소스 브라우져도 동작한다.

브라우져가 HTML5 Video를 지원한다면 DOM 객체는 <video>태그의 canPlayTYpe() method를 사용할 수 있다.
이 method는 브라우져에서 지원하는 video format에 대해서 확인해준다.

또, 이 기능은 Macs과 iPhones에서 지원하는 포맷을 확인 시켜준다.

function supports_h264_baseline_video() {
  if (!supports_video()) { return false; }
  var v = document.createElement("video");
  return v.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');
}

supports_video()함수의 사용은 이전 내용에서 다루고 있다. 브라우져가 HTML5 video를 지원하지 않는다면 어떠한 video format도 볼 수 없다.

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

그리고 이 함수는 비어있는 video태그를 생성해주고(이 기능은 페이지에서 확인할 수도, 볼 수 도 없다.),
canPlayType() method를 호출한다.

이 method는 supports_video()함수로 존재여부를 체크해주기 때문에 video태그의 존재여부를 보장해준다.

var v = document.createElement("video");

"video format"은 여러종류의 일을 수행하는 조합이다. 기술적으로 보면 video태그가 H.264 Baseline video와 MPEG-4의
AAC LC audio를 실행할 수 있는지 아닌지를 확인할 수 있다.
(다음의 글을 읽으면 이런 비디오 종류에 대한 것을 이해할 수 있다. - http://diveintomark.org/tag/give)

return v.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');

canPlayType()함수는 Boolean값을 return하지 않는다. 복잡한 video format과 관련된 string값을 return 시켜 준다.

"probably" 브라우져가 현재 format을 실행시킬 수 있다는 확신이 있다면
"maybe" 브라우져가 현재 format을 실행시킬 수 있다는 판단이 되면
""(비어있는 값)브라우져가 현재 format을 실행시킬 수 없을때

여기서 설명하는 함수는 Mozilla Firefox 또는 다른 open source 브라우져들이 video format을 지원하는지를 확인한다.
위의 내용과 다른 이 함수의 차이점은 canPlayType()함수가 string값을 던져주는 것이다. 기술적으로 얘기하면
브라우져가 Theora video와 Vorbis audio(ogg)를 실행할 수 있는지 아닌지를 요청한다.

function supports_ogg_theora_video() {
  if (!supports_video()) { return false; }
  var v = document.createElement("video");
  return v.canPlayType('video/ogg; codecs="theora, vorbis"');
}

Modernizr에서는 각각의 video format을 확인해줄 수 없다. 그렇기 때문에 video태그를 사용할때 여기에 적혀진 함수를
사용해야 할 것이다.

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

 - 기술들의 발견

브라우져가 객체들의 모임인 웹페이지를 렌더링할때는(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

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

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

- 기본적인 페이지 template

처음 시작은 블로그의 기본적인 페이지 template부터 시작하고자 한다. 여기서는 사이트의 header, footer, sidebar, contents는
제외하고 sub-templates과 관련되게 제공하고자 한다.

<!DOCTYPE html>
<html lang="en-US-x-Hixie">
  <head>
    <title>My Blog: Adventures in cat pictures</title>
  </head>
  <body>

    <header> <!-- site header -->
      <hgroup> <!-- squashes subtitle in doc outline -->
        <h1>My Blog</h1>
        <h2>Adventures in cat pictures</h2>
      </hgroup>
      <nav> <!-- main blog navigation links -->
        <ul>
          <li><a href="…">Front page</a></li>
          <li><a href="…">About My Blog</a></li>
          … other navigation links …
        </ul>
      </nav>
    </header>

    … main content goes here …

    <aside> <!-- sidebar -->
      <section>
        <h1>Search My Blog</h1>
        <form action="…">
          <input name="q" type="search"
          placeholder="To search, type and hit enter" />
        </form>
      </section>
      <section>
        <h1>Blogroll</h1>
        <ul>
          <li><a href="…">My other blog</a></li>
          <li><a href="…">Your blog</a></li>
          <li><a href="…">Your friend’s blog</a></li>
        </ul>
      </section>
    </aside>

    <footer> <!-- site footer -->
      <p>Copyright ⓒ 2009 You. All rights reserved.</p>
      <address>
        <a href="you@example.orgyou@example.orgmailto:you@example.org">you@example.org</a>
      </address>
    </footer>
  </body>
</html>

위의 마크업은 쉽게 이해가 될것이다. 그래도 잠깐 짚고 넘어가보고자 한다.

첫째, page header

<header> <!-- site header -->
  <hgroup> <!-- squashes subtitle in doc outline -->
    <h1>My Blog</h1>
    <h2>Adventures in cat pictures</h2>
  </hgroup>
  <nav> <!-- main blog navigation links -->
    <ul>
      <li><a href="…">Front page</a></li>
      <li><a href="…">About My Blog</a></li>
      … other navigation links …
    </ul>
  </nav>
</header>

이 사이트의 header에는 새로운 세개의 태그가 사용되어 졌다. - <header>,<hgroup>,<nav>

<header>태그는 모든 sectioning 태그에서 사용되어 질 수 있다.

이러한 조건에서는 <body>의 header로서 사용되어졌고, <article>태그만큼 새로운 sectioning elements이다.

페이지에서 사이트 heading과 page- 또는 section-specific headings의 차이를 구분할려고 한다면
CSS styling으로 가능하다.

<hgroup>태그에서는 h1-h6태그를 사용하고 subheading, 대체제목, line으로 구분할때 사용되어 진다.
위의 코드에서 처럼 header에서, blog의 제목과 & 서브제목을 마크업할때 사용하고, 서브제목이 문서의 바깥으로
나타나지 않게한다.

<nav>태그는 페이지내에서 다른 페이지 혹은 섹션 링크를 나타내는 섹션이다. <nav>태그는 header내용을 포함할 수 있다.

다음은 sidebar이다.

<aside> <!-- blog sidebar -->
  <section>
    <h1>Search My Blog</h1>
    <form action="…">
      <input name="q" type="search"
             placeholder="To search, type and hit enter" />
    </form>
  </section>
  <section>
    <h1>Blogroll</h1>
    <ul>
      <li><a href="…">My other blog</a></li>
      <li><a href="…">Your blog</a></li>
      <li><a href="…">your friend’s blog</a></li>
    </ul>
  </section>
</aside>

sidebar에서는 몇가지 새로운 태그와 속성이 사용되었다. - <aside>,<section>,<input type="search">,
placeholder attribute.  sidebar는 <aside>태그로 표현할 수 있다.
sidebar의 각 섹션은 <section>태그가 포함되어 있다.

HTML5는 application section 또는 문서내에서 <section>태그를 정의할 수 있다. section은 컨텐츠의 주제별 그룹이고,
heading, footer에서도 사용 가능하다.

<section>태그는 문서를 부분적으로 나누는것이다. 각 sidebar의 sections은 heading을 가지고 있고, 경계를 나타내준다.

<h1>태그를 headings으로 사용하고 <h2>~<h6>을 사용하지 않았다. sectioning태그는 heading태그를
중복시키지 않는 역활을 한다.

예제를 보면
<body>
  <h1>Heading 1</h1>
  <h2>Heading 1.1</h2>
  <h3>Heading 1.1.1</h3>
  <h2>Heading 1.2</h2>
</body>

또 다른 예제
<body>
  <h1>Heading 1</h1>
  <section>
    <h1>Heading 1.1</h1>
    <section>
      <h1>Heading 1.1.1</h1>
    </section>
  </section>
  <section>
    <h1>Heading 1.2</h1>
  </section>
</body>

CSS를 사용하여 body>h1 style이 section>h1보다 rendering되는 크기가 더 크다.
중복되는 최상위 heading과 하위 heading를 <section>태그로 구분할 수 있을 것이다.

search form은 HTML5의 내용중 부분적으로 사용을 하였다. <input type="search">는 type="text"와 같은동작을 하지만
분명한 차이점이 있다.

이러한 속성들은 Webkit엔진을 가진 브라우져(safari)에서는 몇년전부터 실행이 되어졌고, HTML5에서는 채택이 되어 졌다.
placeholder 속성은 input내용이 비어 있을때 또는 focus가 가지 않았을때 입력 예를 보여주고, 사용자가
click(또는 tab)으로 해당input field를 이동했을때는 텍스트가 사라지게 한다.

<footer>태그는 site의 metadata( copyright, contact information) 것들을 포함하고 있다.

<footer> <!-- site footer -->
  <p>Copyright ⓒ 2009 You. All rights reserved.</p>
  <address>
    <a href="you@example.orgyou@example.orgmailto:you@example.org">you@example.org</a>
  </address>
</footer>

- 개별 blog posts
블로그를 보는 두가지 방법이 있다. 하나는 페이지 내에서 한가지 블로그 포스트만 보는 것이고, 하나는 전체적으로
모아놓은 블로그 포스트들을 보는 것이다.

<article>
  <header> <!-- blog post header -->
    <h1>My Blog Post</h1>
    <p>
      posted by You at <time
      datetime="2009-09-04T16:13:40-07:00">1:40 PM
      on September 4th, 2009</time>
    </p>
  </header>
    … body of blog post …
  <footer> <!-- blog post footer -->
    <p>Comments are closed at this time.</p>
  </footer>
</article>

감싸고 있는 article 태그와 time 태그를 사용하고 있다.

<article>태그는 블로그 포스트를 사용하는 가장 좋은 sectioning 태그이다.

 * <article>태그는 개별적인 문서의 부분, 페이지, 어플리케이션 또는 사이트등의 폼들을 구성하는
페이지 섹션을 나타낸다. <article>태그는 "독립적이다" 컨텐츠로 따로 사용할 수 있고, 어느 부분에서든 섹션별로
구분지어질 수 있다.

예를들어, 블로그 컨텐츠가 길고, 여러 부분으로 쪼개져 있고, 각각 subheading을 가지고 있다라면, 이러한 조건에서
<section>태그를 사용하면 된다.

<article>
  <header>…</header>
  <section>
    <h1>Part the first</h1>
    … first part of blog post …
  </section>
  <section>
    <h1>Part the second</h1>
    … second part of blog post …
  </section>
  … more sections …
  <footer>…</footer>
</article>

<article>태그는 포스트의 내용을 포함하고 있고, 또한 <header>와 <footer>도 포함하고 있다.
<section>태그는 각각의 subsection을 포함하고 있다. 만약 세부적으로 styling또는 scripting을 적용시키고자
한다라면 <div>태그를 사용하는게 맞는 의미일 것이다.

 *  <section>태그는 일반적인 container태그는 아니다. styling 또는 scripting을 하기위함이라면 section대신 div를
사용하기를 권장한다.

<div>태그를 사용하는 것은 다음과 같이 짧은 블로그 포스트를 작성했을때이다.

<article>
  <header>…</header>
  <div>
    … body of blog post …
  </div>
  <footer>…</footer>
</article>

포스트가 길어지고 나누어야할때는

<article>
  <header>…</header>
  <div>
    <section>
      <h1>Part the first</h1>
      … first part of blog post …
    </section>
    <section>
      <h1>Part the second</h1>
      … second part of blog post …
    </section>
    … more sections …
  </div>
  <footer>…</footer>
</article>

- comment
comment에 대한 태그 사용은 <article>을 사용하길 권장한다.

<article>태그로 감싸게 된다면, 내부의 <article>태그는 바깥쪽 <article> contents와 관련되어 있다.

<article>
  … header and such …
  … body of blog post …
  <article> <!-- comment 1 -->
    … body of comment …
    <footer> <!-- comment footer -->
    … who wrote the comment, etc. …
    </footer>
  </article>
  … more comments …
  … blog post footer …
</article>

그러나 comment추가 form은 어떻게 할 것인지에 대해서 생각해봐야한다. comment추가 form은 comments가
존해하는 곳 다음에 나타난다.

comment와 form을 유지하는 container역확을 사용하는 태그를 사용하길 원한다. 내가 생각하는 가장 최적의 방법은
<section>태그이다.

<article>
  … header and such …
  … body of blog post …
  <section>
    <h1>Comments</h1>
    <article> <!-- comment 1 -->
      …
    </article>
    … more comments …
    <form> <!-- add comment form -->
      …
    </form>
  </section>
  … blog post footer …
</article>

- Archive pages
Archive pages는 multiple blog posts를 가지고 있다. 페이지의 각 부분을 표시하기 위한 명확한 방법은 <article>태그를
사용하는 것이다.

<body>
  <header>…</header>
  <article>… blog post 1 …</article>
  <article>… blog post 2 …</article>
  … more blog posts …
  <aside>…</aside>
  <footer>…</footer>
</body>

이전에 하던 방식은 <div>태그를 사용하던 것이다.

<body>
  <header>…</header>
  <div>
    <article>… blog post 1 …</article>
    <article>… blog post 2 …</article>
    … more blog posts …
  </div>
  <aside>…</aside>
  <footer>…</footer>
</body>

원서 : http://edward.oconnor.cx/2009/09/using-the-html5-sectioning-elements