Hey guys this is Dougy and welcome to my HTML5 tutorial blog.
What I am going to do is that I'm going to introduce HTML5 to you with Google HTML5 presentation that was created by Marcin Wichary and modified by many people in the Google Chrome team. (http://slides.html5rocks.com/disclaimer.html)
I modified it a little bit to write on this blog.

Ya...You can get original presentation from  http://slides.html5rocks.com.
As I said that just I did small modification the presentation file to write on this blog and to learn HTML5.
I will add my experience during study the presentation.
I hope that you get a lot of things about HTML5 from my blog

갑자기 영어가 나왔죠?
HTML5를 공부하면서 한국 뿐만 아니라 외국인들도 제 블로그에 와서 새로운 것들을 얻어가서 도움이 됐으면 하는 마음에 이제부터 영어로도 설명을 좀 올리려고 합니다.
지금 올리는 소스는 Google 에서 만든 HTML5 프리젠테이션을 이 블로그에 올리려고 약간 수정한 겁니니다.
http://slides.html5rocks.com 에 가시면 원본을 보실 수 있습니다.
이 내용을 정리하면 HTML5에 어떤 기능들이 있는지 알기 쉽게 그리고 직접 눈으로 확인하면서 공부할 수 있을 것 같아서 제 블로그에 정리해 두려고 합니다.

DownLoad below file to test it.

오늘 공부할 내용은 Web Storage 입니다.
위 text area 에 글자를 쓰고 save 버튼을 누른 후 다른 웹싸이트에 갔다가 다시 돌아와도 그 텍스트가 그대로 남아 있습니다.

You can download the file what I modified the Web Storage source code of the presentation.
아래 제가 위에 보이는 페이지만 따로 수정한 파일 입니다.
다운 받으셔서 브라우저에서 실행하시면 위 화면을 보실 수 있습니다.

P.S.
Google Chrome 16.0.912.75 m  - Working well (O)
Internet Explorer 9.0.8.112        - Not Working (X)
Opera 11.60                            - Working Well (O)
Safari 5.1.2                             - Working Well (O)
FireFox 9.0.1                          - Working Well (O)

Hey guys please let us know that this is working on your browser or not.
We need your name of the Browser and version also.
It will be very helpful for us if you share the information whether this is working on your mobile browser or not. If you can test it on your mobile browser.

Thanks.

제가 가지고 있는 웹 브라우저에서 테스트 한 결과 입니다.
IE 9.0 에서는 이 기능이 동작하지 않습니다.
그러니 이 기능을 테스트 하시려면 지원되는 브라우저를 다운 받아서 테스트 하셔야 합니다.

이 글은 보다 많은 분들과 정보를 공유하고 서로 도와가면서 기술을 익히려고 만들었습니다.

여러분들이 사용하시는 브라우저와 버전에서 동작이 잘 되는지 댓글에 남겨 주시면 저도 많은 공부가 될 것 같습니다.
그리고 여러분들이 사용하시는 모바일 브라우저에서 동작이 잘 되는지도 같이 공유해 주세요.

PC는 위에서처럼 브라우저와 버전 정보하고 작동 여부를 알려주시면 되고 모바일은 어떻게 해야할까요? 아이폰,안드로이드폰 여부하고 폰 모델명과 안드로이드 버전 정보도 있으면 좋겠고.. 브라우저 종류와 버전 정보도 있으면 좋겠네요.

앞으로 하나하나 기능별로 정리해서 글을 올릴건데요. 계속 정리해 나가면 구글에서 만든 튜토리얼에서 좀 더 발전된 튜토리얼이 만들어 질 수 있을거예요.

이게 소스 공유의 정신이라고 생각합니다.

그럼 많은 협조 부탁드립니다.

Off Page Optimization

지난 글 까지는 On Page Optimization을 공부했습니다.
페이지 내 html tag 들을 이용해서 서치엔진에 상위에 랭크되도록 활용함으로서 내 홈페이지 홍보를 극대화 하는 방법을 찾아봤는데요.
오늘부터는 Off Page Optimization 에 대해 알아 보려고 합니다.

Off Page Optimization은 웹 싸이트를 웹 서치엔진의 상위에 랭크 시키기 위해 코딩 내에서가 아니라 그 이외의 방법을 사용 하는 것입니다.

예를 들어 아래와 같은 것들이 있습니다.
dmoz같은 웹 디렉토리에 submitting 시키기
digg 같은 social bookmarking website에 submitting 시키기
웹 싸이트에 대해 블로그를 통해 홍보하기
웹 싸이트에 대한 article을 작성해서 article 디렉토리에 submitting 시키기
포럼 등에 답글을 달면서 홍보하기
유튜브 채널을 만들어서 비디오를 포스팅 하기
다른 블로그들에 코멘트 남기기
Link building (링크 만들기)
Rss feed 사용하기
페이스북, 트위터를 통해 홍보하기
배너 광고 하기 등등등

자신의 홈페이지를 홍보만 할 수 있다면 모두 off Page Optimization 이라고 할 수 있습니다.

몇가지 좀 더 자세히 알아볼까요?

* Backlinks
- 다른 웹사이트에 자신의 웹사이트 링크가 돼 있는 것
- inbound link 라고도 함
- 많은 backlink 가 있으면 그만큼 웹싸이트 홍보에 도움이 된다.
- 구글의 경우 유용한(quality) backlink 가 많을 경우 preference를 준다.

주의
- backlink 를 달아 주면서 돈을 요구하는 싸이트들도 있다.
- 모든 backlink 들이 quality backlink 는 아니다.
- quality backlink 는 자연스럽게 필요에 의해서 생긴 것을 말한다. (organic backlinks)
- 이러한 backlink 를 구매하는 서비스를 하는 곳 중에 일부는 도움이 되는 곳도 있다.
- 그러므로 이러한 서비스를 구매할 때는 잘 알아보고 해야 한다.

Organic backlinks 만드는 방법
- article marketing
- social bookmarking website 들 이용하기
- Forum 에 글 쓰기
- 웹 디렉토리에 submitting 하기
- 블로깅 하기

아주 다양하죠? 그리고 대부분은 여러분들도 이미 하고 있거나 최소한 알고 있는 것들일 겁니다.

이러한 것을 얼마나 활용하느냐가 문제죠.

Tip
back link's building 툴들
Back link Builder : http://www.webconfs.com/backlink-builder.php
Backlinks SEO Tool : http://backlinkseotool.com
Backlink Watch : http://www.backlinkwatch.com

Back link Builder  웹사이트 입니다.
Backlinker 서비스 이외에도 다양한 SEO 관련 서비스를 제공 합니다.

이제부터 Off Page Optimization 방법에 대해 하나하나 구체적으로 살펴 보겠습니다.


1.  Article Marketing
- 웹사이트를 promote 하기 위해 article 을 작성해서 웹싸이트나 디렉토리들에 submitting 하는 것

Steps
1) Article 을 통해 인식시킬 주요하고 적합한 키워드를 고른다.
2) 사람들의 주의를 끌만한 좋은 제목을 만든다.
3) <h1><h2><h3> 같은 정확한 헤딩을 사용해 그 안에 자신의 키워드를 넣는다.
4) 전체 article을 한 문단에 넣지 않는다. section과 sub section을 나눠서 article을 작성한다.
5) article에 적당한 곳에 연관된 링크를 넣는다. (연관 되지 않는 링크를 달지 않는다.)
   링크를 넣을 때 anchor tag 에 자신의 주요 키워드를 넣는 것을 잊지 않는다.
6) article 에 동영상이나 이미지등을 포함시킨다.
   이때도 alt 태그에 자신의 주요한 키워드를 포함시킨다.
7) 링크를 클릭해 달라고 사정하지 않는다. 그러기 보다 좋은 인식을 주어서 독자들이 링크를 클릭 하도록 유도한다.


좋은 Article 을 사용하기 위한 팁
- 문단의 첫번째 heading 과 첫번째 줄에서 이 글이 무엇에 관련한 글인지 확실히 인식시켜 주어야 한다.
- 말하고자하는 바를 간략하고 정확하게 그리고 보는 사람이 알기 쉽게 표현한다.
- 짧은 문단, 짧은 문장을 사용한다.
- 자신만의 Know How 가 있으면 그것을 공개한다. (유용한 글이 되도록 한다.)
- 예제를 곁들여서 설명을 한다.
- 가능하면 무료 자료 (소스파일 등) 도 제공한다.
- article 의 시작 부분에 가장 중요한 키워드를 배치한다.

Article 을 submitting 할 수 있는 웹싸이트(directories) 들 (Global Marketing)
Ezinearticles.com
Goarticles.com
Amazines.com
Articlesbase.com
Articlecity.com
Articlesfactory.com
Articledashboard.com
Isnare.com
Articlealley.com
Articleworld.net

SEO 강좌를 하고 있는 wiredwiki 가 미국 사람이고 또 저도 미국에서 개발자생활을 하고 있어서 모두 영어권 싸이트입니다.
한국쪽 싸이트도 이런것이 있나요?
아마 한국에 맞는 SEO는 wiredwiki 강좌에서 나오는 것 외에 또 다른 방법들이 추가 되야 할 것 같네요.
혹시 좋은 정보 있으면 댓글로 부탁드립니다.
서로 정보를 공유하면 더 풍성한 세상이 됩니다.

2. Blogging
자신의 블로그를 통해서 웹사이트를 홍보하는 것

방법 : 블로그 서비스를 하는 사이트에 가입해서 블로그를 만든다 (네이버,다음, wordpress.com, bloggers.com, typepad.com ...)

자신의 블로그를 활성화 하기 위한 20가지 방법
- 손쉽고 여러사람들의 접근이 쉬운 블로그 서비스를 선택한다.
- 블로그 주소를 웹사이트 주소와 같게 한다.
  예) www.tectcurves.com 인 경우 블로그 주소는 blog.techcurves.com 으로 한다.
- 효과적인 title tag를 사용한다. (google adwords keyword tool, wordtracker, keywordDiscovery 같은 다양한 키워드 툴로 정선한 키워드를 사용한다.)
- 블로그에 댓글 옵션을 달아서 방문자가 블로그에 대해 댓글을 달 수 있게 하라
- 다른 블로거들을 손님으로 초청하라. 유명한 블로거를 초청하고 댓글을 남길 수 있도록 하면 아주 좋은 효과를 볼 수 있다.
- 제목과 heading 에 특히 신경 써라
- 가능하면 많은 멀티미이어와 이미지를 사용하라. 단 저작권에 위배되면 안 됨. 유튜브로부터 비디오를 embed 할 수 있고 shutterstovk.com 에서 이미지들을 저렴하게 구매할 수 있다.
(요즘은 모바일 카메라 성능이 좋아서 대부분 자기가 찍은걸 올리죠. 개인 홈페이지인 경우 그렇지만 회사홈페이지라면 좋은 이미지를 구매하는것도 필요 하겠죠.)
- 가능하면 Autio Clip 을 사용하라
- 이메일등에 문의가 오면 성실히 답하라
- 가능한한 자주 블로그를 업데이트 하라
- 자신의 성공사례가 있다면 부끄러워 말고 자랑하라. 분명히 방문자들에게도 도움이 될 것이다.
- 무료로 제공하는 서비스를 많이 하라. 예를 들어 샘플 파일이나 ebook 같은 것들
- 블로그에 rss feed 를 넣고 독자들에게 RSS로 등록하도록 하라.
- 차별화를 하고 다른 웹사이트와 무엇이 다른지 밝혀라
- 로딩 속도를 좀 더 빠르게 하기 위해 미디어 파일과 이미지 파일을 압축하던가 용량을 작게 하라
- 스팸 메일을 보내지 마라 사람들뿐만 아니라 구글도 스팸을 싫어한다.
- 자신의 웹사이트와 관련된 사항 중에 최신 관심사항이나 유행에 대한 내용을 올려라
- 새 제품에 대한 review 를 작성하라
- 할 수 있다면 중국어도 사용하라
- 어느 정도 유명해 질 때 까지는 광고를 넣지 마라. (facebook 의 성공사례를 본받자)

===== o ==== o ==== o ==== o ==== o ==== o ==== o ==== o ==== o ====

이번에 SEO 관련해서 wiredwiki 의 강좌로 공부를 하고 있는데요.
그동안 하찮게 여기거나 생각못했던 것들이 많았구나 하는 생각이 드네요.
이런 사소한 것들이라도 신경쓰고 좀 더 적극적으로 활용하면 그 성과들이 모여서 크게 될텐데...
내가 하찮게 여기고 있는 동안 누군가는 이런 방법으로 나보다 앞서 나갔겠구나 하는 생각도 들구요.

다음글에도 계속 Off Page Optimization 관련한 구체적인 방법들과 여러 팁들을 공부하겠습니다.

이제 HTML5 기본 개념과 여러 테크닉들에 대해서 어느 정도 살펴 본 것 같습니다.
자바스크립트, CSS 도 능숙하지는 않지만 오랫동안 써 왔기 때문에 친숙하구요.
본격적으로 HTML5로 게임만들기 공부에 들어가려고 하는데요.

그러기 전에 워밍업 부터 하고 들어가려구요.
유튜브나 블로그들을 찾아 다녔는데 아주 맘에 드는 강좌는 찾비 못했습니다.
그래서 Learning HTML5 Game Programming 이라는 책을 기본으로 공부 하려구요.

본격적인 공부 들어가기 전에 잊어버릴까봐 전에 살펴봤던 HTML5와 Canvas 사용법 간단히 살펴 보고 넘어가겠습니다.

HTML 파일은 아래와 같이 하세요.
 <!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Youtube HTML5 Game Dev Tutorial</title>
</head>
<body style="background:#303030;">
   
    <button id="drawSquareBtn" type="button" > Draw Square </button>
    <button id="clearCanvasBtn" type="button" > Clear Canvas </button>
    <canvas id="canvasBg" width="800px" height="500jpx" style="display:block;background:#ffffff;margin:100px auto 0px;"></canvas>
    <script src="game.js"> </script>

</body>
</html>

첫줄은 HTML5를 사용하기 위한 doctype 입니다. 그냥 무조건 쓰시면 됩니다.
body 안에는 2개의 버튼이 있고 1개의 Canvas가 있습니다.

아직까지는 저 위의 버튼을 눌러도 아무런 동작이 일어나지 않습니다.

그 동작이 일어나게 하기 위해 아래와 같이 자바스크립트를 작성합니다.
(game.js 라는 파일이 되겠죠? html 내에서 그걸 참조하고 있으니까 거기에 작성 해야 합니다.)

var canvasBg = document.getElementById('canvasBg');
var ctxBg = canvasBg.getContext('2d');
var clearCanvasBtn = document.getElementById('clearCanvasBtn');
clearCanvasBtn.addEventListener('click',clearCanvas,false);

var drawSquareBtn = document.getElementById('drawSquareBtn');
drawSquareBtn.addEventListener('click',drawSquare,false);

function drawSquare() {
    ctxBg.fillStyle = '#505050';
    ctxBg.fillRect(20,100,200,60);
}

function clearCanvas(){
    ctxBg.clearRect(20,100,800,500);
}

html의 canvas 태그에 있는 아이디를 불러와서 canvasBg라는 변수에 담습니다.
이 이름은 개발자 마음대로 할 수 있습니다. 다만 알아보기 쉽게 하기 위해서 html 내의 id 이름이랑 같이 했습니다.
그리고 canvas를 이용할 때 항상 사용하는 getContext 를 사용했습니다.
그리고 html의  clearCanvasBtn 을 같은 이름의 변수에 담았구요.
drawSquareBtn 도 같은 이름의 변수에 담았습니다.
두개 다 버튼인데요.
각 버튼마다 리스너를 달았습니다.
그래서 clearCanvasBtn 을 click 하면 clearCanvas() 라는 함수가 실행되고 drawSquareBtn을 click 하면 drawSquare() 함수가 실행 됩니다.

drawSquare() 함수를 살펴볼까요?
일단 canvas 의 context에 505050 이라는 색을 지정했습니다.
그리고 이 context (ctxBg) 에 fillRect 로 사각형을 그려넣습니다.

그리고 clearCanvas() 함수는 canvas 크기만큼 clearRect를 합니다.
그러니까 캔버스위에 어떤 것이 그려지든 다 지우는 겁니다.

Draw Square 를 누르면 위와 같이 사각형이 그려지고 Clear Canvas 버튼을 누르면 저 위 화면 처럼 캔버스가 깨끗해 집니다.

여기서 팁으로 구글 크롬 브라우저를 사용하면 아래와 같은 화면도 볼 수 있습니다.

브라우저에서 오른쪽 마우스를 누르고 맨 아래에 있는 inspect elements 라는 메뉴를 누르면 나타납니다.
해당 페이지의 html 파일과 자바스크립트, css 파일 소스를 볼수 있고 만약에 스크립트에 에러가 있으면 그 에러 사항도 표시해 줍니다.

간단히 HTML5로 게임 만들기 위한 워밍업으로 HTML5 canvas 이용방법을 다시 한번 살펴 보았습니다.

앞으로 HTML5로 게임을 만들 수 있는 여러 방법과 모바일 게임을 만드는 방법에 대해 공부해 나가겠습니다.