2011. 9. 1. 16:44

Smart Cloud Show 2011

News 2011. 9. 1. 16:44



오랫만에 탐나는 행사가 있어서 소개해 드립니다.
요즘 가장 빛나는 단어중에 하나인 스마트를 클라우드와 함께 생각해 볼 수 있는 행사 입니다.

자세한 내용은 http://www.facebook.com/smartcloudshow?sk=app_216854508325017#!/smartcloudshow?sk=app_208205529212473 에서 참조해 주세요.. ^^
2011. 9. 1. 12:30

4. HTML5 Video

HTML5 2011. 9. 1. 12:30


비디오와 관련된 태그도 오디오만큼이 사용하기 쉽습니다. 하지만 오디오와 마찬가지로 코덱이라는 문제는 여전히 가지고 있습니다.

<video src="rain.mp4" controls width="480" height="360"></video>

비디오와 관련해서는 추가적으로 넓이, 높이와 같은 추가적인 속성을 가지고 있습니다. 그런데 이렇게 쓰고나면 정말 이것으로 충분한가를 물어볼 분들이 많을 것 같습니다만 사실 이것이 다 입니다. HTML5는 요란하고 많은 사람들이 그 안에서 새로운 가능성을 찾아가고 있습니다만 사실 그 자체만 보면 그리 없지 않을 뿐만 아니라 상당히 쉬운 기술입니다.

 하지만 앞서 이야기 한 바와 같이 코덱과 라이선스라는 문제는 아직 여전히 남아 있습니다.

Browser H.264+
AAC+
MP4
WebM Theora
+Vorbis
+Ogg
Mozzila Firefox 3.6
Opera 10.63
Google Chrome 8.0
Apple Safari 5.0.3 (with QuickTime)
Microsoft IE 9 Beta


지금 현재 인터넷에서 비디오 파일을 만들 때 가장 많이 사용되고 있는 코덱이라면 H.264를 영상 코덱으로 하고 AAC를 음향 코덱으로 하는 확장자가 MP4인 파일입니다. 하지만 역시나 H.264 코덱의 경우도 상용 라이선스를 가지고 있는 코덱이기 때문에 FireFox, Opera에서는 현재 지원 하지 않고 있습니다.  
 WebM의 경우는 로열티 비용이 없는 개방형 고화질 영상 압축 포멧을 목표 구글의 후원을 받아 개발되고 잇습니다. 2010년 5월 19일 발표되었는데 주로 HTML5의 영상 포멧으로 많이 활용되고 있습니다. 현재로는 가장 많은 콘텐츠가 H.264로 되어 있지만 WebM을 지원하는 브라우저가 제일 많기 때문에 앞으로 시장 상황은 어떻게 진행될지 모르겠습니다.

비디오와 관련된 속성은 아래와 같습니다.
Attribute Value Description
controls *Boolean attribute If you want the browser native player control to be around, specifiy "controls"
autoplay *Boolean attribute If this guy exists, the browser will just play your video without asking permission from visitor
loop *Boolean attribute Keep repeating your video
src url The URL of your video file
preload none | metadata | auto This attribute was formerly known as "autobuffer" and it was an boolean attribute as "controls".

none - do not buffer video file automatically.
metadata - only buffer the metadata of video
auto - buffer video file before it gets played.
width width in pixels Width of video player
height height in pixels Height of video player
poster url of a image file If present, shows the poster image until the first frame of video has downloaded.

대부분의 속성은 오디오 태그와 동일한데 다른 점은 width, height, poster 입니다.
이 중에서 poster 속성은 비디오 파일이 로딩되기 전에 출력해주는 이미지 파일의 경로를 지정하는 속성으로 가급적이면 웹에서는 설정해 주는게 사용자들에게 좋은 접근이 될 것 같습니다.

김영욱 iwinkey@hotmail.com

현재 한국마이크로소프트에서 Evangelist로 근무하고 있으며 국내 유수의 대기업 프로젝트에 참여했던 경험과 Microsoft MVP로 다년간 활동했습니다.
올해는 컨슈머와 관련된 앱을 만드는 다양한 업체들을 발굴하고 지원하는 일을 맡고 있습니다.


HTML5 강좌 전체 목록
  1. HTML5 DocType의 정의
  2. HTML5 Header stuff
  3. Audio
  4. Video
  5. Canvas
    Canvas: Rectangle
    Canvas: Shadow
    Canvas: Path
    Canvas: Image
    Canvas: Text
  6. Web form 2.0
    Input Attr: Placeholder
    Input Attr: Autofocus
    Input Attr: Required field
    Input Attr: DataList
    Input Type: Search
    Input Type: Email, URL, Phone
    Input Type: Range
    Input Type: Number
    Input Type: Date
    Input Type: Color
  7. Towards Semantic Web
    Semantic <mark>
    Semantic <time>
    Semantic <meter>
    Semantic <progress>
    Semantic <section>
    Semantic <header>
    Semantic <footer>
    Semantic <nav>
    Semantic <article>
    Semantic <aside>
2011. 9. 1. 08:30

3. HTML5 Audio

HTML5 2011. 9. 1. 08:30
초창기 웹에서는 HTML에 기반한 하이퍼링크 문서를 전달하는 용도로 설계되었기 때문에 오디오나 비디오 콘텐츠에 대한 배려나 표준안이 존재하지 않았습니다. 결국 표준안의 부재는 플러그인 기술의 발전으로 이어졌고 오디오와 비디오 재생을 위해서 윈도우 미디어 플래이어나 혹은 ActiveX 기반의 기술을 사용하는 방법 혹은 Silverlight나 Flash와 같은 RIA 기술이 사용하기도 했습니다.

 하지만 HTML5에서는 기본적으로 이와 관련해서 이미 준비되어 있는 태그가 정의되어 있고 별도의 플러그인이 없이 재생할 수 있게 되어 있습니다.


물론 각 브라우저 마다 보여주는 룩앤필은 조금씩 다르긴 하지만 미디어 재생에 있어서 일반적으로는 그게 인터페이스가 다르지 않기 때문에 문제 될 것은 없습니다.
 그럼 오디오를 사용하기 위해서는 어떻게 해야 할까요?

사용하는 방법 자체는 아주 간단합니다.

<audio src="vincent.mp3" controls></audio>

위와 같이 한 줄이면 해결 됩니다.
 여기서 한 가지 주의 할 점이 있는데 아직 해결되지 않은 문제가 코덱에 있다는 점입니다. HTML5의 표준안에는 태그는 정의되어 있지만 코덱까지는 표준으로 정해져 있지 않다는 점입니다. 여기에는 코덱을 사용하기 위해서 라이선스를 어떻게 할 것인가 하는 근본적인 문제가 있습니다. MP3의 경우도 독일 호퍼 연구소가 라이선스를 가지고 있어서 결코 '무료'는 아니기 때문 입니다.

Browser .mp3 .wav .ogg
Mozzila Firefox 3.6
Opera 10.63
Google Chrome 8.0
Apple Safari 5.0.3 (with QuickTime)
Microsoft IE 9

위의 표에서 볼 수 있다시피 FireFox나 Opera의 경우는 MP3를 지원하지 않습니다. 그 대신 오픈 라이선스 코덱인 OGG를 지원하고 있습니다. 이에 반해서 Chrome, Safari, IE9 등에서는 모두 MP3를 기본으로 설정하고 있습니다.

 물론 공통 분모로 WAV 방식을 사용할 수 있지만 압축되지 않은 데이터를 웹에서 다루는 것은 결코 좋은 방법이 아닙니다. 결국 제 생각에는 시간이 지나서 한 쪽으로 코덱이 정리되기를 기대하는 것이 지금 웹 개발자들이 할 수 있는 최선입니다. 하지만 지금 당장 어느 한쪽을 선택하라고 한 다면 저는 MP3쪽의 손을 들어주고 싶습니다.

아래표는 오디오와 관련된 태크와 함께 사용할 수 있는 속성을 정리한 표입니다.

Attribute Value Description
controls *Boolean attribute You need this to make the native audio player appear. Otherwise, you would have to use DOM to control the audio element to play your music.
autoplay *Boolean attribute If this guy exists, the browser will just play your song or your speech without asking permission from your visitor.
loop *Boolean attribute Keep repeating your music
src url The URL of your audio file
preload none | metadata | auto This attribute was formerly known as "autobuffer" and it was an boolean attribute as "controls".

none - do not buffer audio file automatically.
metadata - only buffer the metadata of audio file.
auto - buffer audio file before it gets played.

Controls 태그는 오디오를 제어할 수 있는 컨트롤의 표시 여부를 AutoPlay는 자동 재생 그리고 Loop는 무한 반복 여부를 나타냅니다. 실제 미디어의 경로는 Src로 표시할 수 있으며 재생전에 미리 버퍼링을 시작할 것이지를 결정하는 속성이 preload 입니다.

<audio src="vincent.mp3" controls="true" loop="true" autoplay="true"></audio>

실제로 태그를 보면 정말 간단해 졌습니다. 이전의 경우에는 Object 태그를 사용해서 복잡하게 다루어야 했지만 지금의 경우는 훨씬 더 간단해 졌다는 것을 알 수 있습니다.
 한 가지 추천해 드리고 싶은 것은 아직 HTML5를 지원하는 웹 브라우저가 많지 않기 때문에 그런 브라우저에 대한 배려를 잊지 말아야 하는 다는 점입니다. 

 마지막으로 Java Script에서 오디오를 제어하고 싶을 때는

<audio id="player" src="vincent.mp3"></audio>
<div>
   <button onclick="document.getElementById('player').play()">Play</button>
   <button onclick="document.getElementById('player').pause()">Pause</button>
   <button onclick="document.getElementById('player').volume += 0.1">Vol+ </button>
    <button onclick="document.getElementById('player').volume -= 0.1">Vol- </button>
</div>


와 같이 하시면 됩니다.


김영욱 iwinkey@hotmail.com

현재 한국마이크로소프트에서 Evangelist로 근무하고 있으며 국내 유수의 대기업 프로젝트에 참여했던 경험과 Microsoft MVP로 다년간 활동했습니다.
올해는 컨슈머와 관련된 앱을 만드는 다양한 업체들을 발굴하고 지원하는 일을 맡고 있습니다.


HTML5 강좌 전체 목록
  1. HTML5 DocType의 정의
  2. HTML5 Header stuff
  3. Audio
  4. Video
  5. Canvas
    Canvas: Rectangle
    Canvas: Shadow
    Canvas: Path
    Canvas: Image
    Canvas: Text
  6. Web form 2.0
    Input Attr: Placeholder
    Input Attr: Autofocus
    Input Attr: Required field
    Input Attr: DataList
    Input Type: Search
    Input Type: Email, URL, Phone
    Input Type: Range
    Input Type: Number
    Input Type: Date
    Input Type: Color
  7. Towards Semantic Web
    Semantic <mark>
    Semantic <time>
    Semantic <meter>
    Semantic <progress>
    Semantic <section>
    Semantic <header>
    Semantic <footer>
    Semantic <nav>
    Semantic <article>
    Semantic <aside>
  • 파귀극마 2011.09.13 15:15

    저기요.. 제가 지금 영욱님이 올리신 걸 보고 따라 했는데요..
    일시정지 버튼은 있는데 stop버튼은 없어서 그런데
    stop버튼 구현에 대한 방법도 가르쳐주실 수 있으신지요?

  • 글 잘 읽었습니다. 2012.02.22 14:34

    소스그대로 해보았는데요

    스트리밍이라서그런가요 컨트롤러가 안뜨네요 ㅠㅠ

    왜 그런것일까요 ㅎ

2011. 8. 31. 16:13

2.HTML5 Header stuff

HTML5 2011. 8. 31. 16:13

HTML5에서는 이전 버전에 비해서 강화되고 추가된 측면도 있지만 불필요하게 복잡한 요소들은 과감하게 정리하는 측면도 함께 가지고 있습니다. 그 중의 한 요소가 바로 헤더 요소라고 할 수 있는 메타태그와 스크립트 태그 입니다. 
 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

기존의 메타태그에서는 콘텐트 타입을 명시하고는 했지만 HTML5에서는 간단하게 Charset만 명시하면 됩니다. 
 
<meta charset="UTF-8">

간단하지요 Java Script를 명시 할 경우에도 script type을 명시하는 부분이 제거 되었습니다. 이미 많은 분들이 script type을 명시하지 않고 사용하고 있었기 때문에 크게 영향을 받거나 하지는 않습니다만 공식적으로 좀 더 간단해 졌다고 의미를 둘 수 있습니다.

이전버전의 Script 표기 법은 아래와 같습니다.
<script type="text/javascript" src="jquery.js"></script>

HTML5에서 간소화 된 표기는 아래와 같습니다.
<script src="jquery.js"></script>

CSS 파일에 대한 명시도 역시 단순해 졌습니다.
<link rel="stylesheet" href="html-my.css">

HTML의 시작 부분에서 공식적으로 복잡했던 부분을(사실 비공식적으로는 단순하게 다들 사용하고 있었습니다.) 역시 간단하게 수정했습니다.

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> 이랬던 것을
<html lang="en"> 이렇게...

HTML5는 나중에 좀 더 언급하겠지만 외형을 나타내는 태그들을 과감하게 삭제하고 그 기능을 CSS로 넘기는 등 HTML의 본래 목적에 충실할 수 있는 방향으로 진화되고 있습니다.

32224_1468530191732_1187893437_1364978_7316647_n[1]

김영욱 iwinkey@hotmail.com

현재 한국마이크로소프트에서 Evangelist로 근무하고 있으며 국내 유수의 대기업 프로젝트에 참여했던 경험과 Microsoft MVP로 다년간 활동했습니다.
올해는 컨슈머와 관련된 앱을 만드는 다양한 업체들을 발굴하고 지원하는 일을 맡고 있습니다.


HTML5 강좌 전체 목록
  1. HTML5 DocType의 정의
  2. HTML5 Header stuff
  3. Audio
  4. Video
  5. Canvas
    Canvas: Rectangle
    Canvas: Shadow
    Canvas: Path
    Canvas: Image
    Canvas: Text
  6. Web form 2.0
    Input Attr: Placeholder
    Input Attr: Autofocus
    Input Attr: Required field
    Input Attr: DataList
    Input Type: Search
    Input Type: Email, URL, Phone
    Input Type: Range
    Input Type: Number
    Input Type: Date
    Input Type: Color
  7. Towards Semantic Web
    Semantic <mark>
    Semantic <time>
    Semantic <meter>
    Semantic <progress>
    Semantic <section>
    Semantic <header>
    Semantic <footer>
    Semantic <nav>
    Semantic <article>
    Semantic <aside>
  • 지나가는사람 2012.03.01 22:03

    덧붙여서 html 안의 lang 요소도 크게 필요한 요소는 아닙니다. 자연어를 지시해주는 역할일 뿐 솔직히 비중을 차지하는 요소는 아니죠.

2011. 8. 31. 08:25

1.HTML5 DocType 정의

HTML5 2011. 8. 31. 08:25

 

문서 타입이란 이 문서에 대해서 HTML의 버전이나 언어와 같은 요소를 사전에 정의해서 문서를 쉽게 읽어드리게 하는 요소로 제공 됩니다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1
<Sample1> HTML이전의 DocType

문서 타입을 정의하는 방식은 HTML5은 확실히 간단해 졌습니다. HTML5에서는 다음과 같이 한 줄로 통일 되었습니다.

<!DOCTYPE html>

 앞도 뒤도 볼 것 없이 그냥 한 줄이면 됩니다. 기존의 HTML 문서와의 호환성을 유지하면서 HTML5 문서를 정의하기 위한 간단한 방법이라고 할 수 있습니다.  

결과적으로 실제로 사용하는 HTML5 문서를 정의할 경우에도 아래와 같이 간단하게 구현됩니다.

 <!DOCTYPE html>
<html>
  <head>
    <title>HTML5 is rocks!</title>
  </head>
  <body>
    <h1>HTML5 Rocks!</h1>
  </body>
</html>

 

32224_1468530191732_1187893437_1364978_7316647_n[1]

김영욱 iwinkey@hotmail.com

현재 한국마이크로소프트에서 Evangelist로 근무하고 있으며 국내 유수의 대기업 프로젝트에 참여했던 경험과 Microsoft MVP로 다년간 활동했습니다.
올해는 컨슈머와 관련된 앱을 만드는 다양한 업체들을 발굴하고 지원하는 일을 맡고 있습니다.


HTML5 강좌 전체 목록
  1. HTML5 DocType의 정의
  2. HTML5 Header stuff
  3. Audio
  4. Video
  5. Canvas
    Canvas: Rectangle
    Canvas: Shadow
    Canvas: Path
    Canvas: Image
    Canvas: Text
  6. Web form 2.0
    Input Attr: Placeholder
    Input Attr: Autofocus
    Input Attr: Required field
    Input Attr: DataList
    Input Type: Search
    Input Type: Email, URL, Phone
    Input Type: Range
    Input Type: Number
    Input Type: Date
    Input Type: Color
  7. Towards Semantic Web
    Semantic <mark>
    Semantic <time>
    Semantic <meter>
    Semantic <progress>
    Semantic <section>
    Semantic <header>
    Semantic <footer>
    Semantic <nav>
    Semantic <article>
    Semantic <aside>
2011. 8. 30. 08:24

 최근의 어떤 이들을 만나도 빠지지 않는 주제 중의 하나가 바로 HTML5 입니다. 
 제가 요즘 많은 관심을 기울이고 있어서 그리 보이기도 하겠지만 HTML5가 가지고 있는 잠재력은 많은 앞으로 넘어야 할 문제 점들에 비해서는 훨씬 더 매력적으로 보이는 것이 사실입니다.

 뿐만 아니라 구글이나 애플 그리고 마이크로소프트와 같은 업체들이 가지고 있는 HTML5에 대한 비전은 더 큰 기대감을 가지기에 충분합니다. 


 1. HTML5는 결국 HTML5 일 뿐이다.

옆의 그림은 제가 발로 그린 그림입니다. (실제로 발로 그린건 아니라는 것은 아시리라.. ^^;) HTML5의 경우 기본적인 태그의 확장이나 변경이 이루어지고 Java Script를 통해 접근 할 수 있는 API의 기능이 많이 확장되었습니다. 
 또 Off-line을 지원할 수 있도록 새로운 기능들이 추가되고 멀티 테스크를 지원하는 등 하나의 새로운 개발 플랫폼으로써 손색이 없을 정도로 많이 확장되었습니다. 
 하지만 그렇다고 해도 HTML5는 HTML 일 뿐입니다. 결국은 웹을 통해서 전송될 수 있는 태그와 Java Script의 덩어리 입니다. 
 즉 마음만 먹으면 그 안의 내용을 열어보기에 아주 수월한 구조라는 것 입니다. 
 이런 경우 중요한 코드가 클라이언트 측에 구현되는 것은 데이터의 조작이나 외곡에 많은 위험을 가지고 있게 됩니다. 최대한 서비스 측에 비지니스 로직이 포함될 수 있도록 해야하고 최소한의 로직만 클라이언트에서 가져 갈 수 있게 해야 합니다. 
 

2. HTML5이 오프라인 기능도 결국 임시 기능입니다. 

HTML5에 추가된 기능을 보면 기존의 쿠키보다 더 나은 방법으로 접근 할 수 기능들을 제공하는 격리 저장소 이외에도 웹 데이터베이스등 오프라인에서도 잘 실행할 수 있도록 데이터 독립성을 유지하는데 도움이 되는 기능들이 포함되어 있습니다. 
 하지만 HTML5에서 제공하는 방법은 아직 여전히 완전하지 못합니다. (앞으로 충분히 개선될 여지도 보입니다만..) 즉 클라이언트에서 관리되는 데이터는 어떤 순간에는 완전히 잃어버리더라도 다시 서비스에서 다운받아서 복구 할 수 있을 정도로 가볍운 용도로 사용하는 것이 적합하다는 것입니다. 

 즉 HTML5을 사용해서 웹이든 모바일이든 어떤 형태의 앱을 만들더라도 그 뒷단의 서비스가 잘 구현되어 있지 않으면 상당히 불완전한 모습의 앱이 될 수 밖에 없다는 결론입니다. 


 정리

 공부해 보면 HTML5는 생각만큼 새로 공부할 것이 많지 않습니다. 요란한 소문에 비해서는 아직까지 그렇게 많은 내용이 없습니다. 이 시점에서 HTML5을 왜 사용하는지 다시 한번 생각해 볼 필요가 있습니다. 그리고 전체적인 그림을 볼 때 컨슈머 지향적인 앱의 개발에 있어서 아랫쪽은 클라우드 기반 서비스로 안정성과 탄력성 그리고 확장성을 유지하고 핵심 로직을 관리하는 방식으로 가져가야 합니다. 한 걸음 나아가서 데이타는 클라우드 안에 잘 백업 되어 있다가 필요하면 다시 사용자의 앱에 데이타가 복원 될 수 있는 구조를 유지하는 것이 이상적이라고 할 수 있습니다. 

 앞으로 HTML5와 관련된 내용을 한 동안 정리해 나갈 생각입니다. 많은 기대와 성원 부탁드립니다. 
감사합니다.  

32224_1468530191732_1187893437_1364978_7316647_n[1]

김영욱 iwinkey@hotmail.com

현재 한국마이크로소프트에서 Evangelist로 근무하고 있으며 국내 유수의 대기업 프로젝트에 참여했던 경험과 Microsoft MVP로 다년간 활동했습니다.
올해는  컨슈머와 관련된 앱을 만드는 다양한 업체들을 발굴하고 지원하는 일을 맡고 있습니다.

  • bluefin92 2011.08.30 12:53

    저도 동감입니다. 많은 분들이 HTML5가 RIA나 Desk Top App를 대체할 수 있을 거라 생각하는데
    기존에 사용하던 Desk top LOB App을 구현하려면 어림 없지요 ..
    LOB App에서는 HTML5로 가더라도 RIA나 ActiveX 같은 기술을 추가적으로 붙여야 합니다.
    더군다나 기업에서는 단순히 HTML 페이지만 가지고 기능을 구현할 수 없으니 말입니다.
    (파워풀한 그리드 기능, 보안, 인쇄, Report, Chart, Image Viewer, Client 사이드에서 Hardware 연결 등 많죠 ..)
    LOB App를 하는 사람 입장에서는 현 상황에서는 공부와 가능성만 확인하는 것이 좋을 것 같네요 ...

2011. 8. 19. 17:04

데이터 위주의 웹 기반 소프트웨어를 만들 때 LightSwitch


Visual Studio LightSwitch는 높은 품질의 비즈니스 앱을 개발 할때 사용할 수있는 도구로 일종의 케이스 툴로 데이타를 기반으로 해서 약간의 작업만으로 Silverlight로 된 업무용 화면을 만드는 컨셉으로 나온 툴입니다.

 

LightSwitch는 아래와 같은 3가지 단계로 쉽게 앱을 생성할 수 있습니다.

- data source에 대해서 기본적인 코드를 작성하고
- 사용자 인터페이스를 생성하고
- 비즈니스 로직을 작성 

 

다음 영상은 LightSwitch 2011의 전체적인 설명을 Jason Zander가 설명해 주는 영상입니다.


Creating Your First Business Application

Data, Queries and Code in LightSwitch 2011


Controlling Access to Your Business Application


Publishing Your LightSwitch
2011. 8. 16. 13:36

오늘은 HTML5를 소개하려고 합니다.
HTML5는 HTML4의 차기 버전처럼 보이지만 개발자 입장에서는 완전히 다른 접근이 가능한 수준의 변화를 가져왔습니다.

HTML4까지는 인터넷 상의 문서를 만들기 위한 표준이었다면 HTML5는 단순한 문서가 아니라 앱(App)을 개발하기 위한 방법으로 Markup과 Java Script를 사용하는 방식으로 바뀌었습니다.

HTML5를 소개하는 기본적인 자료들은 제법있는데 다소 깊이 있는 내용을 보고 싶으시면 아래 두 개의 동영상을 보시면 도움이 될 것 같습니다. 첫 번째 내용은 HTML5 자체에 대한 내용이 주로 언급되어 있고 두 번째 링크는 HTML5를 튜닝 할 때 주의해야 할 내용들이 좋습니다. 

Deep Dive Into HTML5
50 Performance Tricks to Make Your HTML5 Web sites Faster

HTML5는 가장 기본적으로는 최신 버전의 웹 브라이저를 통해서 결과물을 볼 수 있습니다. 웹을 통한 접근이 가장 보편적인 방법이라고 할 수 있습니다.

표준을 지원하기 위한 방법 설명 (한글) Enabling Standard Support  
위치 인식 웹 페이지를 만드는 방법 (한글) How to Create a Location-Aware Webpage

HTML5를 통해 멀티미디어를 지원하는 방법(한글) How to use HTML5 to Add an Audio Player to your Webpage

 HTML5와 관련된 정보들을 찾아보면 흩어져 있거나 짜투리 정보들은 많지만 잘 정리된 자료들은 많지 않은 것 같습니다.

(영어) HTML5 Drag and Drop in IE10 PPB2
(영어) Data in an HTML5 World
(영어) Filling the HTML5 Gaps with Polyfills and Shims
(영어) The View of the World Depends on the Glasses I Wear

HTML5와 관련된 정보는 좀 더 수집해서 다시 한번 포스팅을 하겠습니다.
감사합니다.

html5
2011. 8. 12. 09:35

국내 최초 Windows Azure 책인 애저 인 액션에 이어서 두 번째 책이 출간 되었습니다. 남정현 MVP가 옮긴 책입니다. Windows Azure와 관련해서 관심 있으신 분들은 꼭 질러주시길… ^^

2011. 8. 11. 08:33

 
오늘 소개해 드릴 내용은 XBOX용으로 출시된 Kinect 입니다.
이미 XBOX용으로는 성공을 거두고 Microsoft가 Game 산업에서 입지를 다지는데 큰 역할을 했던 Kinect는 소니의 무브나 닌텐도의 위 컨트롤러와는 달리 사람이 자체가 인식식 된다는데에서 많은 사람들의 관심을 받았습니다.

이런 Kinect에서 개발자들은 많은 가능성을 보았고 이 관심을 충족시켜 드리기 위해서 Kinect를 PC에서도 운영할 수 있는 Kinect SDK가 출시되었습니다.

 

자세한 내용은 이전 포스팅인 http://blogs.msdn.com/b/eva/archive/2011/06/28/kinect-sdk-for-windows-nui.aspx 을 참조해 주시고 여기에서는 유용한 자료들을 소개해 드리려고 합니다.

 

Kinect 공식 웹 사이트 입니다.

Kinect for Windows website  Kinect Website

Kinect Forum  입니다. 영문이지만 QnA를 할 수 있는 곳 입니다.
Kinect Forum 

Kinect for Windows FAQ  Kinect Website

개발 문서 입니다. C++과 C# 두 가지 언어를 지원하도록 되어 있습니다.

AudioCaptureRaw Walkthrough—Capturing the Raw Audio Stream (C++)  Kinect Document
MFAudioFilter Walkthrough—Capturing Audio Streams with a Media Foundation Audio Filter (C++)  Kinect Document
MicArrayEchoCancellation Walkthrough—Capturing Audio Streams with Acoustic Echo Cancellation and Beam Forming (C++)  Kinect Document
Programming Guide: Getting Started with the Kinect for Windows SDK Beta  Kinect Document
RecordAudio Walkthrough—Recording an Audio Stream and Monitoring Direction (C#)  Kinect Document
Skeletal Viewer Walkthrough—Rendering Data with the NUI API (C++ and C#)  Kinect Document
Speech Walkthrough—Recognizing Voice Commands (C#)  Kinect Document

아래 링크는 Channel9과 기타 사이트에 올라온 관련 정보 입니다.
이미 Kinect와 관련된 오픈 소스들이 다수 있어서 제작에 큰 도움이 될 것 같습니다.

Kinect for Windows SDK Beta Refresh Available  Kinect Article
Adding Speech Recognition to a Kinect Quickstart  Kinect Article
Baby NUI... Using the Kinect as a Baby Monitor  Kinect Article
Camera/Tripod Mount (3D Printer required)  Kinect Article
Can the Kinect "know" what you are doing?  Kinect Article
Coding4Fun Kinect Toolkit  Kinect Article
Display Kinect color image containing only players (aka background removal)  Kinect Article
Flame On! Mercury Particle Engine and Kinect  Kinect Article
Gestures and Tools for Kinect and matching Toolkit too  Kinect Article
Getting Started with Kinect, Setup, Depth, Player Index  Kinect Article
HandsTrackball - Kinect 3D object manipulation  Kinect Article
"I have the Minority Report UI.."  Kinect Article
Intro to the Kinect SDK–Drawing Joints in XNA  Kinect Article
Kinductor  Kinect Article
Kinect Buttons  Kinect Article
Kinect Contrib  Kinect Article
Kinect Controlled Quadrotor  Kinect Article
Kinect Depth Cam  Kinect Article
Kinect Earth Move  Kinect Article
Kinecting the Dots: Adding Buttons to your Kinect Application  Kinect Article
Kinecting with Robots - Kinect Services for the Microsoft Robotic Development Studio  Kinect Article
Kinect MIDI Controller  Kinect Article
Kinect Mouse Cursor  Kinect Article
Kinect Paint  Kinect Article
Kinect SDK and F#  Kinect Article
Kinect SDK Skeleton Custom Control for WPF  Kinect Article
Media Player I NUI you well…  Kinect Article
NUI for PowerPoint  Kinect Article
Of course our first Kinect for Windows SDK Project has to involve a Light Saber!  Kinect Article
StartMenu / Candescent NUI  Kinect Article
That's Ripplelicious  Kinect Article
The Busy Developers Guide to the Kinect SDK Beta  Kinect Article
Tweeting from Kinect concept  Kinect Article