Hi! This is the second tutorial of HTML5.
I am going to show you Web SQL DB of HTML5.

오늘 볼 기능은 Web SQL DB 입니다.
예전엔 PHP, ASP, JSP 같은 서버 사이드 스크립트 언어로 디비서버에 연결해서 테이블에 자료를 저장하고 불러오고 수정하고 했었습니다.
물론 HTML5에서도 그 기능이 가능한데요.
거기에다가 브라우저 내에도 테이블을 만들어서 SQL 쿼리로 테이블을 만들고 저장하고 지우고 할 수 있습니다.
물론 이 Data 는  Client side 의 Browser 에 저장이 됩니다.
Client side 에서 이 Browser 를 껐다 켜도, 그리고 컴퓨터를 껐다 켜도 그 데이터는 브라우저내에 그대로 있습니다. (서버에 있는 것이 아닙니다.)

이 기능을 살펴 보겠습니다.

- This function is not working on this blog so download below source code file and open the file with your browser (Google Chrome,Opera or Safari)
이 기능은 이 블로그에서는 실행이 안 되네요.
아래 업로드한 파일 다운 받으셔서 여러분 브라우저에서 실행해 보세요. -

1. Click Create Table Button -> The table will be created
2. Type Anything in Text field and click new to do item button. (You can make data as many as you want)
3. You can delete the data. (click the line Delete)
4. You can drop the table (Click the drop table button)

1. 먼저 create Table Button을 click 하셔서 table을 생성합니다. (Table1Test 테이블이 생성될 겁니다.)
2. text field 에 원하는 글자를 넣고 new to do item 버튼을 누르세요. 그러면 생성된 테이블에 그 데이터가 들어갑니다. 여러분이 원하는 만큼 만드세요.
3. 만들어진 데이터는 밑에 보여지게 됩니다. 여기서 Delete 링크를 누르면 해당 데이터는 지워지게 됩니다.
4. Drop table 버튼을 누르면 이 테이블 전체가 지워지게 됩니다.

사용법은 위에 있고 전체 소스는 아래에 업로드 하겠습니다.
You can download the source code below.

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                          - Not Working (X)

이 기능은 제가 가지고 있는 인터넷 익스플로어 하고 파이어폭스에서 작동하지 않네요.

Please let us know (Leave a comment) whether it is working on your browser (PC,Mobile) or not please.
여러분 브라우저에서 제대로 작동하는지 댓글에 달아 주시면 아주 고맙겠습니다.
모바일 브라우저에서의 동작 여부도요.

그럼...
thanks..

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 관련한 구체적인 방법들과 여러 팁들을 공부하겠습니다.