반응형
블로그 이미지
개발자로서 현장에서 일하면서 새로 접하는 기술들이나 알게된 정보 등을 정리하기 위한 블로그입니다. 운 좋게 미국에서 큰 회사들의 프로젝트에서 컬설턴트로 일하고 있어서 새로운 기술들을 접할 기회가 많이 있습니다. 미국의 IT 프로젝트에서 사용되는 툴들에 대해 많은 분들과 정보를 공유하고 싶습니다.
솔웅

최근에 올라온 글

최근에 달린 댓글

최근에 받은 트랙백

글 보관함

카테고리


반응형
One of the fabulous service from Google is Google map.
You can put the google map on your Web page with HTML5 geolocation.

HTML5를 이용하면 PC나 모바일용 웹페이지에 구글 맵을 서비스 할 수 있습니다.
아래 예제는 샘플인데요.
Show Position 버튼을 누르면 현재 위치가 지도에 표시됩니다.
(위치정보는 사용자가 공유를 허락해야 합니다.)

Click the Show Position button then your location will be displayed on the map.
(You need to allow share your location on your browser)
HTML5 Presentation
JS

Geolocation

Google Chrome 16.0.912.75 m  - Working well (O)
Internet Explorer 9.0.8.112        - Working well (O)
Opera 11.60                            - Working well (O)
Safari 5.1.2                             - Working well (O)
FireFox 9.0.1                          - Working well (O)

It is working well on all browsers in my Laptop.
You can download sample file below.
인터넷 익스플로러에서도 잘 작동을 하네요.
아래 샘플 파일 올립니다.


블로그 폭이 좁아서 MAP/Satelate 를 선택하는 버튼이 가려졌습니다.
위 파일을 다운 받으시면 전체 화면을 보실 수 있습니다.
지도 화면과 위성화면 둘 다 선택해서 보실 수 있어요.
반응형

'WEB_APP > HTML5' 카테고리의 다른 글

HTML5 CSS3 Flexible Box Model  (0) 2012.02.02
HTML5 CSS3 Animation and Adobe Dreamweaver  (0) 2012.01.30
HTML5 CSS Columns Google  (0) 2012.01.27
HTML5 CSS Transform (Google)  (0) 2012.01.26
HTML5 Transitions (-webkit-transition)  (0) 2012.01.20
HTML5 Better semantic tags  (0) 2012.01.18
HTML5 Speech Input (음성인식) API  (0) 2012.01.16
HTML5 Storage 4 - Application Cache -  (0) 2012.01.11
HTML5 Storage 3 - IndexedDB -  (0) 2012.01.10
HTML5 Storage 2 - Web SQL DB -  (7) 2012.01.10

HTML5 Better semantic tags

2012. 1. 18. 22:01 | Posted by 솔웅


반응형
Hey guys welcome to HTML5 tutorial of Google Presentation.
Today I am going to show you Sample codes of HTML5 Tags.
You can see 10 tags (the red tags below) and how to use those tags. 

아래 코드는 HTML5 에서 사용하는 Tag들에 대한 사용예를 보여주는 코드입니다.<header>,<hgroup>,<nav>,<section>,<article>,<aside>,<figure>,<figcaption>,<footer>,<time datetime="">이렇게 10개의 코드를 가지고 만들었습니다.

header는 제목을 나타낼 때 사용하고 한 페이지에서 여러번 사용할 수 있습니다.
nav는 메뉴이고 section은 범위를 구분지을 때 사용합니다.
article은 내용 aside는 옆쪽에 표시되는 내용에 사용합니다.
figure는 image를 표시할 때사용하고 figcaption은 그 이미지에 대한 설명(제목)을 나타냅니다.
그리고 footer는 꼬리글이구요. time datetime은 날짜를 나타낼때 사용합니다


HTML5 Presentation
HTML

Better semantic tags

<body>
  <header>
    <hgroup>
      <h1>Page title</h1>
      <h2>Page subtitle</h2>
    </hgroup>
  </header>

  <nav>
   <ul>
     Navigation...
   </ul>
  </nav>
  <section>
   <article>
     <header>
       <h1>Title</h1>
     </header>
     <section>
       Content...
     </section>
   </article>
   <article>
     <header>
       <h1>Title</h1>
     </header>
     <section>
       Content...
     </section>
   </article>
  </section>

  <aside>
   Top links...
  </aside>

  <figure>
    <img src="..."/>
    <figcaption>Chart 1.1</figcaption>
  </figure>

  <footer>
   Copyright ©
<time datetime="2010-11-08">2010</time>. </footer> </body>

You can download sample html file below.
아래 소스 파일 올립니다.



반응형


반응형
어제 Martin Luther King jr 목사를 기념하는 날이었습니다.
공휴일이죠.

1963년도 워싱턴 D.C. 링컨기념관 앞에서 한 그 유명한 연설도 사실은 Rosa Parks 라고 하는 한 여인의 작은 저항에서부터 시작 됐습니다.
버스에 백인석 흑인석 따로 있었고 백인이 서있자 흑인석 앞자리에 앉아있던 Parks 에게 버스 운전수가 흑인석 뒷자리로 가라고 했습니다.
1955년 알라마바주의 몽고메리라는 도시에서 있었던 이야기입니다.
Parks는 운전수의 지시를 거부했고 이 운전수는 Parks를 체포해서 경찰에 넘겼습니다.
(당시에는 운전수에게도 흑인 체포권이 있었나 봅니다.)
이 Parks의 멘토였던 Nixon(시민운동가)은 이것을 이슈화해서 부정의를 몰아 내기로 결심했고 당시 26세였던 젊은 Martin Luther King jr 목사에게 도움을 요청했습니다.
킹목사는 이후 계속 흑인 인권운동을 위해서 싸웠고 63년 미국의 수도 워싱턴D.C 링컨기념관 앞에서 역사적으로 가장 많은 인원인 25만명이 모인 가운데 그 유명한 'I have a dream' 연설을 했습니다.
같은해 킹목사가 연설한 곳에서 얼마 안 떨어진 미국 국회의사당에서 segregation (분리) 정책을 폐기했고 이듬히 킹 목사는 노벨 평화상을 받았습니다.

그리고 50여년 후 미국에서는 흑인 대통령이 탄생했습니다. 킹목사가 연설한 링컨기념관에서 걸어서 5분 거리밖에 안되는 백악관에서 미국을 운영하고 있습니다.

Rosa Parks 라고 하는 한 여인이 부당한 대우를 거부하고 체포당한 것으로 시작했습니다.
미국의 흑인차별정책이 폐기되고 한 목사에게 노벨 평화상이 주어지고 그리고 당시에는 도저히 상상도 할 수 없었던 미국 흑인 대통령이 탄생 된 것이요.

한국 사회에도 이런 부조리와 부정의가 많습니다.
그리고 Rosa Parks 같은 작은 저항들이 많이 일어나고 있습니다.

그리고 우리사회는 조만간 훌륭한 사회가 될 겁니다.

아래 우리사회의 부조리와 부정의 중 한가지가 신문에 실렸길래 같이 공유합니다.

그리고 아래 코드를 복사해서 넣으시면(HTML 안에) 여러분의 블로그에도 이 인포그래픽을 넣을 수 있습니다. (출처는 한겨례신문입니다.)

아래 코드를 복사하면 여러분 블로그에도 이 인포그래픽을 넣으실 수 있습니다.

반응형

HTML5 Speech Input (음성인식) API

2012. 1. 16. 09:05 | Posted by 솔웅


반응형
Google provide excellent stuffs for HTML5 developer and one of the thing is that Speech Input API.
Just Click the microphone image and speak out any word then Google get and display the word in the text field.
One and big limitation is that it is working only on Google Chrome browser.

iPhone 의 Siri 가 나오는 바람에 그 신선함이 팍 꺾였지만 처음 이 기능을 보고 전 아주 신선한 충격을 받았어요.
이제 조만간 터치가 아니라 음성으로 기기를 제어할 수 있는 프로그램을 나도 만들 수가 있겠구나......
아래 텍스트 필드 옆에 있는 마이크 이미지를 클릭하고 말을 하면(아직 영어만 지원) 구글에서 그 말을 알아듣고 텍스트 필드에 추가 합니다.
지금은 오직 구글 크롬 브라우저에서만 작동합니다.


HTML5 Presentation
HTML

Speech Input

<input type="text" x-webkit-speech />

Speech input is not enabled in your browser.
Try running Google Chrome with the --enable-speech-input flag.

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

Fore more Details Click it. 
좀더 자세한 사항은 여기를 클릭 하세요. 

You can get sample source code here.
샘플 코드 입니다. 다운 받아서 사용하시면 됩니다.

 

반응형

New, More Flexible ScrollView Widget

2012. 1. 15. 06:55 | Posted by 솔웅


반응형
오늘은 2012.721 버전 이후부터 적용된 ScrollView Widget 에 대해 알아 보겠습니다.

그러니 이 기능을 직접 테스트 해 보시려면 2012.721 버전 이상되는 Corona SDK를 설치 하셔야 합니다.

확인해 보니까 지금 일반에 공개된 버전은 2011.704 버전이네요.
유료 사용자가 아닌 경우는 일반에 공개된 이후에 사용하실 수 있을 겁니다.

아래 내용의 원본은 여기 입니다.
그리고 자세한 API를 보시려면 여기를 클릭하시면 됩니다.

그럼 이번에 새로 추가된 기능에 대해 알아보겠습니다.

About Widgets

코로나의 위젯 API는 간단히 여러 플랫폼에 적용되는 코딩을 위해 만들어 졌습니다. 간단한 몇줄의 코드로 버튼, 탭 바, 슬라이더, Picker Wheel, Lists, 스크롤 되는 콘텐트 등을 스크롤 뷰 위젯에 덧 붙일 수 있는 기능을 제공합니다.
모바일 기기는 그 크기가 제한되어 있기 때문에 어느 기종이나 앱에 스크롤 되는 기능이 많이 필요합니다. 코로나에서는 이러한 기능을  scrollView Widget 에서 제공 합니다.

Basic Usage

스크롤 뷰 위젯의 가장 기본적인 이용법은 단지 몇개의 파라미터들을 정하고 디스플레이할 객체를 만들고 그 객체를 스크롤 뷰에 넣으면 됩니다.
아래에 그 예제가 있습니다.

local widget = require "widget"
local scroller = widget.newScrollView{
    width = 320,
    height = 480,
    scrollWidth = 700,
    scrollHeight = 1000
}

local obj = display.newImage( "myobject.png" )
obj.x = 400
obj.y = 500

scroller:insert( obj )

코드를 한번 보겠습니다.
- 첫번째로 widget을 require 합니다.
- 파라미터를 정합니다. 320,480은 아이폰의 해상도 입니다.
- scrollWidth,scrollHeight 파라미터는 스크롤뷰가 어디까지 스크롤 되는지를 정해 줍니다. 이 값은 어떤 객체가 주어지느냐에 따라 자

동적으로 늘어날 겁니다.
- 객체를 생성하고 위치를 설정합니다.
- 이 객체를 스크롤 뷰에 넣습니다.
이것이 스크롤 뷰를 사용하는 가장 기본적인 방법입니다.

위 코드만 가지고도 (이미지 파일만 있다면) 기본적인 스크롤 기능을 구현할 수 있습니다.

위 아래로 움직이지 않고 옆으로 움직이도록 하려면 아래 코드를 덧붙이기만 하면 됩니다.
scroller.content.verticalScrollDisabled = true
디폴트는 아래 코드 입니다.
scroller.content.horizontalScrollDisabled = true

Clipping the Width and Height

스크롤 뷰가 화면 전체를 차지하지 않고 일부분만 차지하도록 하려면 어떻게 할까요?
현재로서는 bitmap mask를 사용하는 방법 밖에는 없습니다.
이 방법도 코로나 개발팀에서 아주 간단히 코딩할 수 있도록 신경을 썼다고 합니다.
특정 크기로 스크롤 뷰를 만들기 위해 비트맵 마스크를 사용하려면 간단히 그 크기(width,height)를 정하는 파라미터를 세팅하고  해당하는 비트맵 마스크를 만듭니다. 그리고 그 비트맵 마스크의 파일 이름으로 maskFile 파라미터를 사용합니다.

    local widget = require "widget"
 
    local list = widget.newTableView{
        width = 320,
        height = 410,
        maskFile = "mask320x410.png"
    }
위 예제는 테이블 뷰에 사용했구요, 스크롤 뷰에서도 똑같이 사용하시면 됩니다.

Buttons and Touchable Objects

주로 ScrollView 에 버튼 같이 터치 리스너를 받아 들이는 object(객체)들을 넣는 방법을 알아볼 겁니다.
스크롤 하기 위해 터치할 때하고 버튼을 누를 때 터치하고 구별해야 쓸모있는 스크롤뷰가 될 수 있겠죠?

이 기능을 사용하려면 takeFocus()를 사용하시면 됩니다.

local widget = require "widget"
local scroller = widget.newScrollView{
    width = 320,
    height = 480,
    scrollWidth = 700,
    scrollHeight = 1000
}

-- event listener for button widget
local function onButtonEvent( event )
    if event.phase == "moved" then
        local dx = math.abs( event.x - event.xStart )
        local dy = math.abs( event.y - event.yStart )
       
        -- if finger drags button more than 5 pixels, pass focus to scrollView
        if dx > 5 or dy > 5 then
            scroller:takeFocus( event )
        end
   
    elseif event.phase == "release" then

        print( "Button pushed." )
    end

    return true
end

local button = widget.newButton{
    label = "My Button"
    top = 300,
    left = 300,
    onEvent = onButtonEvent
}

scroller:insert( button )

위와 같이 버튼을 만들고 이 버튼을 scroller 에 insert를 합니다.

그리고 리스너 이벤트 함수인 onButtonEvent 에서 takeFocus를 구현해 주면 됩니다.
이벤트가 moved 일 때 5픽셀 이상 움직이면 scroller 에 포커스를 맞추고 그렇지 않고 손가락을 떼면 버튼에 포커스를 맞추게 됩니다.

Scroll Events
스크롤 뷰 이벤트의 기본 파라미터에는 아래와 같은 것들이 있습니다.
event.name - 항상 scrollEvent 입니다.
event.target - 실제 이벤트가 할당된 스크롤뷰 위젯에 대한 레퍼런스 입니다.
event.type - beganScroll, endedScroll,movingToTopLimit,movingToBottomLimit,movingToLeftLimit, movingToRightLimit 가 있습니다.
Limit 를 설정하게 되면 그 숫자에 따라 스크롤 뷰가 끝에 다다랐을 때 탄력있게 움직이게 됩니다.

Further Reading and Resources

이 기능들을 자세히 보려면 CoronaSDK의 샘플 코드 중 Interface 폴더에 ㅇㅆ는 WedgetDemo를 보시면 됩니다.
이 기능들은 최근에 발표된 화면(Scene) 전환 API인 Storyboard API와 어울려서 사용할 수도 있습니다.

그럼 샘플코드인 WidgetDemo 앱을 살펴 보겠습니다.


첫번째는 테이블 뷰입니다. (안드로이드에서는 리스트 뷰라고 합니다.)
손가락으로 터치후 움직이면 아래위로 리스트들이 보입니다.
그리고 특정 Row를 터치하면 그 로우에 해당하는 화면으로 넘어갑니다.



여기서 back 버튼을 누르면 이전 테이블 뷰(리스트 뷰) 화면으로 넘어갑니다.
이 소스를 보면 최근에 발표된 storyboard 기능을 사용해서 화면을 넘기고 있습니다.

나중에 이 소스를 분석하면 아주 좋은 공부가 되겠네요.

아래 탭을 보시면 테이블 뷰 이외에 scrollView 와 Other 가 있습니다.


스크롤 뷰를 누르면 이 화면이 나옵니다.
상하 좌우로 움직이면 이미지가 스크롤 됩니다.



그리고 others를 누르면 위 화면과 같이 Slide Bar 와 Date Picker 가 나옵니다.
아주 좋은 샘플이네요.

오늘은 최근에 새로 발표된 Corona SDK 의 Scroll View Widget 에 대해 알아봤습니다.
반응형

I Put out My Heart

2012. 1. 14. 22:33 | Posted by 솔웅


반응형

I Put out My Heart


I put out my heart on paper
For you to crumple up
I put out my soul in voice
Only for you to turn down the volume
I put out my smile on the canvas of my face
For you to watch it fade
I put out my pain in the form of tears
Only to be hidden and dried like cement
I put out my love like a rushing, warm colorful energy
You put it in a box and try to lock it
But as you are fumbling for the key
You let it escape and it engulfs you and surrounds you
I put out my love and now you return it in full



내 마음을 드립니다.

당신이 구겨버리는 종이위에 내 마음을 적어 봅니다.
당신이 volume을 줄이는 그 소리위에 나의 영혼을 실어 봅니다.
당신의 눈에서 희미하게 사라지는 내 얼굴이라는 캔버스에 미소를 지어봅니다.
모든것을 덮어버리고 단단하게 굳어버리는 시멘트같이
내 눈물은 나의 아픔을 덮어버립니다.
아름답고 주체할 수 없는 나의 사랑을 폭발시킵니다.
당신은 상자속에 가둬 잠그려고 하네요
하지만 당신이 잠깐 멈칫거리는 사이
그 사랑은 상자를 빠져나와 당신을 온통 감싸 버립니다.
나는 사랑을 드렸고 지금 당신은 한가득 그것을 돌려주시네요.


====== O ===== O ===== O ===== O ===== O ===== O


부끄럽습니다.
매일 코드와 씨름하며 건조해진 맘을 적셔보려고 이 나의 쉼터 공간을 만들었습니다.
마침 오늘 읽은 시가 마음에 들어 옮겼는데요.
번역이 너무 부끄럽습니다.
시를 읽고 그냥 나 정도의 수준에서 감동받고 한국말로 표현할 수 있는 한계입니다.
혹시 이 영시를 다른식으로 좀 더 잘 전달할 수 있도록 번역하신분들 댓글에 달아주세요.
같이 감동을 나눴으면 좋겠습니다.
그래서 메마른 사회를 촉촉한 사회로 만들면 좋겠습니다....

그럼... :)

반응형


반응형
안녕하세요?

오늘은 두개의 동영상을 소개해 드리겠습니다.
첫번 째 동영상은 Corona SDK의 테스트 담당 팀이 앱을 테스트 하는 장면입니다.

게임 앱인 것 같은데 Score가 올라가고 최고점수 저장하고 이것을 레벨별로 별도로 진행하고 하는 것들을 테스트 하는 겁니다.
Tap기능과 관련해서 iPhone에서는 에러가 나서 Corona SDK의 Tap을 이용한다고 하는데 카메라를 의식해서 약간은 홍보성 멘트인것 같습니다. ^^
보시면 점수 올라가고 또 이것을 최고 점수임을 판별해서 기록하고 하는 것을 별도로 테스트 화면을 만들어서 진행하고 있습니다.
저 화면은 실제 게임에서는 나오지 않겠죠?
프로젝트를 진행하려면 개발팀하고 테스트팀이 별도의 부서로 만들어져서 진행하는게 이상적이라고 생각합니다. (대부분의 한국식 프로젝트 진행에서는 그렇지 못한것이 현실이겠죠?)

그리고 이 화면에서와 같이 별도로 테스트를 위한 부분도 개발을 해서 여러 테스트팀원들이 테스트를 진행할 수 있도록 개발하는 것도 테스트 팀에서 해야 합니다.
테스트 팀에서는 단순 기능테스트부터 User 입장에서 얼마나 interesting 하고 Exciting 한가에 대한 테스트 그리고 내부적으로 불필요한 로직 혹은 메모리를 낭비하는 로직이 없는가 에 대한 소스 테스트 또 데이터 베이스를 사용하는 경우 데이터 베이스 테이블 설계부터 쿼리 커스터마이징 등에 대한 테스트도 진행되야 하구요.

그런데 대부분 이런 부분이 없는 것 뿐만이 아니라 이런 개념조차 없죠?
그래서 설계대로 개발을 하면 뭐 조금만 안되도 개발자에게 따가운 눈초리를 보내고.
개발자는 뭐 잘못한것도 아닌데 고개숙여야 되고....

하여간 프로젝트를 진행하다보면 이런 테스트에 대한 개념있는 매니저가 아쉬울 때가 많습니다.

약간 신세한탄조의 멘트였죠? :)

다음 동영상은 Corona SDK로 아마존의 Kindle Fire용 앱 빌드하는 방법을 설명한 동영상입니다.

앱스토어, 안드로이드 마켓에 이어 아주 잠재력있는 시장인 아마존 앱 시장이 생긴지 좀 됐죠?
Corona SDK에서 이 Kindle Fire용 앱 빌드 기능 제공한게 1~2개월 됐습니다.
한번 개발해서 앱스토어,안드로이드 마켓, 킨들파이어까지 3대 앱 시장용으로 빌드가 가능한 Corona SDK 정말 매력있습니다.

어떤 플랫폼에서도 사용 가능한 HTML5 모바일 앱과 Corona SDK 만 있으면 아주 효율적으로 모바일 시장에 경쟁력 있게 대응할 수 있을 것 같습니다.

참고 삼아 한번 보세요.
자세한 과정은 나중에 강좌 글로 올릴 생각입니다.


반응형

SEO 홈페이지 마케팅 총정리 ***

2012. 1. 13. 00:07 | Posted by 솔웅


반응형
그동안 자신이 만든 웹싸이트를 마케팅 하는 방법인 SEO (Search Engine Optimization)에 대해 공부했습니다.

내 웹사이트에 보다 많은 사람들이 들어오도록 하려면 가장 중요한게 구글,야후, 네이버, 다음 같은 검색엔진에서 특정 키워드로 검색 했을 때 상위에 놓여야 하겠죠.

그렇게 검색엔진 상위에 놓일 수 있도록 하는 방법들을 연구하는게 SEO입니다.

그동안 6개의 글을 통해서 On Page Optimization과 Off Page Optimization에 대해서 모두 알아봤습니다.

아래는 그동안 배운 것들을 정리하는 일종의 Summery 와 Tip들입니다.

### SEO checklist

SEO를 할 때 체크해야 할 체크리스트 50가지 입니다.
간단한 영어는 그냥 넘어가고 좀 긴것만 한국말로 옮기겠습니다.

1) Doing the keyword Research
2) Downloading the keyword
3) Editing the Keywords
4) Using the Keyword in <title> tags for all the pages
5) Am i using unique title tags for each and every pages 
   모든 페이지에 유니크한 타이틀 태그를 사용했는가?
6) Using the Keyword in <meta> description tags for all the pages
   모든 페이지의 메타 태그에 키워드를 사용했는가?
7) Am i using description tags in each and every pages of my website
   웹사이트의 모든 페이지들에 description 태그를 사용했는가?
8) Using the Keyword in anchor tags for links
   링크를 거는 Anchor 태그 (<a href) 에 키워드를 사용했는가?
9) Do not use hidden or spammy links
   사기성 링크를 사용하지 마라
10) Remove all the spam links that you don't trust
     모든 스팸성 링크를 없애라
11) Mostly use text links instead of images link (pointing within the website)
     이미지 링크 보다는 텍스트 링크를 사용하라
12) Using the Keyword in Alt tags for images
     이미지에는 alt 태그에 키워드를 넣어라
13) Using Keywords inside the Header tags (<h1>, <h2>, <h3>..)
14) Using the Keyword in <p> tags, <b> tags, <i> tags
15) Did i us the important keyword in the url's
     url(웹 주소와 폴더이름)을 만들 때 중요한 키워드를 사용했는가?
16) Using hyphens instead of _ in url's
17) Make sure that you don't use special characters inside url's
     url에 특수문자를 사용하지 마라
18) Do not use very long url's, ever if they are descriptive
      너무 긴 url이 되지 않도록 하라
19) Are the most important keywords lie at the beginning of the document
    문서 초입 부분에 가장 중요한 키워드를 사용하라
20) Doing article marketing
21) Setting up a youtube channel
22) Setting up a facebook and twitter account and linking it to my website
23) Setting up a blog
24) Writing ebboks
25) Submitting your website to web directories
26) Writing on forums
27) Doing some pay per click advertising
28) Submitting your website links to social bookmarking websites
29) Is the code of my website is well written
30) Writing unique content
31) Do Not using illegal content
32) Not using the duplicate content inside my webiste to make the webiste size bigger
     웹사이트의 사이즈가 커지지 않도록 중복되는 내용이 없도록 하라
33) Do Not use content like adult, hacking stuff inside my website
     성인 음란물이나 해킹 코드 같은 것들을 내 웹사이트에서 사용하지 마라
34) Is my mulitimedia file's are compressed so that you page loads faster
     웹 페이지 로딩속도가  빠르게 되도록 멀티미디어 파일들의 용량을 줄여라.
35) Balancing your website with Text and images
36) Do Not using flash without text in it
     텍스트 없는 Flash (ADOBE) 를 사용하지 마라.
37)  Do Not using frames at all
      HTML의 Frame 기능은 사용하지 마라.
38) Do not use only Flash as your Home page
     통 Flash 홈페이지를 만들지 마라.
39) Always use sitemaps
40) Testing your website in all the browsers
41) Make sure that your website can be run on browsers with having javascript disabled
     자바 스크립트 에러가 없도록 모든 브라우저에서 테스트 하라.
42) Do not use Unnecessary http redirection
43) Eliminate all the broken links
     없어진 홈페이지의 링크는 없애라.
44) Check whether your domain was previously banned by search engine or not
     자신의 도메인이 이전에 검색엔진에 의해 금지 됐었는지 체크하라.
45) Make sure your Web hosting company is reliable
     웹호스팅 회사가 믿을만한지 확인하라
46) Creating a google Analytic account, for knowing my website traffic source
     구글 Analytic을 이용해서 내 홈페이지의 traffic source를 알 수 있도록 하라.
47) Creating a google, yahoo, bing web master account
48) Setting up an rss feed for your website
49) Not using blackhat SEO techniques
50) Do not use robots.txt file if you want your whole website to be indexed in search engine
    홈페이지 전체가 검색엔진에 인덱스 되기를 원한다면 robots.txt를 굳이 사용할 필요는 없다.

### 효과적인 SEO 툴들

* 무료 SEO Tools

- Alexa.com for knowing the websites rank
http://www.alexa.com/
used to know the traffic metrics, demographics, search analytics for websites
웹사이트들에 대한 traffic metrics, 통계자료, 서치분석자료 등의 정보를 제공

- Google adwords keywords tool
Allows you to search for keywords relevant to your website
키워드 관련 검색을 하도록 해 줌
https://adwords.google.com/select/KeywordToolExternal

- Google analytics
http://www.google.com/analytics/
it is a tool, that can give you detailed information about traffic behaviour,
content visitation of your website and much much more
트래픽, content visitation 등에 대한 자세한 정보를 알 수 있슴

- Bing Webmaster Tools
http://www.bing.com/toolbox/webmaster/

- Keyword Density & Prominence Analyzer 3.14
http://www.ranks.nl/cgi-bin/ranksnl/spider/spider.cgi?lang=
The Keyword Density Analyzer is a powerful free SEO tool that shows you
which words are most promineent on a specific web page.
특정 웹 페이지에 어떤 키워드가 가장 적합한지 알려주는 무료 SEO 툴임.

-   XENU's Link Sleuth
http://home.snafu.de/tilman/xenulink.html
you can determine if a site has endless loops, broken links,
redirect detections and much more
-----------------------------------------------------
Seo Tools worth Time and Money

Wordtracker
http://www.wordtracker.com/

SEO Elite
http://www.seoelite.com/

BuzzStream Link Building
http://www.buzzstream.com/

SEOClarity
http://www.seoclarity.net/

Lotus Jump
http://www.lotusjump.com/

------------------------------------------------------
All Google tools that don't cost a bit

Google Webmaster Tools
http://www.google.com/webmasters/

Google External Keyword Tool
https://adwords.google.com/select/KeywordToolExternal

Google Analytics
http://www.google.com/analytics/

Google Trends
http://www.google.com/trends

Google Trends for Websites
http://trends.google.com/websites?q=wikipedia.org

Google Insights for Search
http://www.google.com/insights/search/

------------------------------------------------------
- Websites that links to great SEO tools
http://www.webconfs.com/
www.smashingmagazine.com/2006/.../complete-list-of-best-seo-tools/
http://bestseotools.net/

--------------------------------------------------------

*** Keyword Research Tools

무료 키워드 검색 툴 (Free Keyword Research Tool)
- Google adwords keyword tool
https://adwords.google.com/select/KeywordToolExternal

--------------------------------------------------------
Keyword research Tool that cost a bit but worth it

- Wordtracker
www.wordtracker.com/

- Keyword discovery
www.keyworddiscovery.com/

--------------------------------------------
Other Suggestions

- Webceo
http://www.webceo.com/

- Keyword Spy
http://www.keywordspy.com/

- WordZe
www.wordze.com/

- Keyword Country
www.keywordcountry.com/


### SEO 에서 실수하는 16가지 것들에 대하여.

- Using the Wrong keyword for optimizing your webpage.
   웹사이트와 관련 없는 키워드를 사용 하는 것
- Just assuming the keywords, without doing the research on them.
  깊이 생각하거나 분석하지 않고 대충 짐작해서 정한 키워드를 사용하는 것
- The Biggest Mistake, Not focussing on title tags.
   가장 큰 실수는 타이틀 태그를 신경 쓰지 않는 것.
- Not knowing the word limitations to write title tags, or meta tags.
   타이틀 태그나 메타태그의 글자제한을 알지 못하는 것
Your title tag should be Less than 70 character.
Your meta tags should be 120 to 150 characters.
타이틀 태그는 70글자 메타 태그는 120~150글자임
이것은 영어 기준이고 한글 기준은 한 글자당 2씩 차지하므로 대략 타이틀 태그는 35글자 메타태그는 60~75 글자임
- Using the same title tags for different pages.
  다른 웹 페이지에 같은 타이틀 태그를 사용하는 것
- Using Flash in your website without having any text in it.
  텍스트 없이 플래시 (어도브) 만 사용하는 것
- Concentrating too much on the meta tags, by knowing that they do not effect the search ranking any more.
  메타태그에 너무 크게 신경쓰는것 예전에는 몰라도 이제는 이 메타태그가 검색엔진의 랭킹에 그렇게 크게 영향을 미치지는 않음
- Not using Sitemaps.
  싸이트 맵을 사용하지 않는 것
- Using non-descriptive url's.
- Not using the Keyword in the
heading (<h1> to <h6> tag),
paragraphs(<p> tag),
images(<alt> tag),
links,
bold tag (<b>),
italic tag (<i>)....
위와 같은 태그 사이의 키워드 사용을 활용하지 않는 것
- Not updating your content daily through blogs, or weekly by article writing.
  블로그를 통해서 정기적으로 홈페이지에 대한 내용을 업데이트 하지 않는 것
- Not able to build quality backlinks to the website.
   좋은 백링크를 사용하지 않는 것
- Backlink spamming, which can make your website penalised. Backlinks are always good but you should focus on having the organic and quality backlink rather than having 1000's of irrelavent backlinks, which can get you banned.
  백링크를 여기 저기 스팸성으로 올리는 것.
- Using the company or the sitename in all web pages.
- Using Black Hat SEO Techniques without being an expert, because if you get caught your website will be banned.
- Newbies trying to do SEO themselves

이상으로 SEO(Search Engine Optimization)에 대해 공부했습니다.

앞으로도 SEO에 대한 유용한 정보가 있으면 이 블로그에 정리해 둘 생각입니다.
여러분들도 좋은 정보가 있으면 댓글을 통해 공유해 주시면 아주 고맙겠습니다.

그럼 즐거운 하루 되세요.

반응형

SEO 홈페이지 마케팅 - Off Page Optimization 4

2012. 1. 12. 23:31 | Posted by 솔웅


반응형

오늘은 SEO 홈페이지 마케팅중 Off Page Optimization 마지막 시간입니다.

오늘 살펴볼 항목은 Social Bookmarking과 robots.txt 파일에 대하여 알아보겠습니다.

### Social Bookmarking
Social Bookmarking은 여러 다양한 북마킹 웹사이트들에서 태그나 키워드들을 이용해서 인터넷에서 웹 유저들에게 웹페이지들의 북마크들을 저장하고 organize하고 search하는위한 방법입니다.

북마킹 웹사이트들에는 아래와 같은 것들이 있습니다.
- Digg
- Del.icio.us
- StumbleUpon
- Technorati
- Reddit
- Squidoo
- Furl
- Yahoo MyWeb
- BlinkBits
- Simpy
- Blogmarks
- Spurl
- Raw Sugar
- Mybloglog
- Kaboodle
- Fark
- Propeller
- Mixx
- DZone
- Gnolia
- Bluedot
- Mybookmarks

이러한 사이트들은 어느 컴퓨터에서도 북마크에 접근하도록 도와줍니다.
Social bookmarking 은 인터넷에서 자신의 웹싸이트로의 링크 만드는데 아주 유용한 서비스 입니다.
여러분의 웹싸이트에서 한 웹페이지를 선택해서 다양한 social bookmarking 웹사이트에 북마크해 놓는것은 아주 중요합니다.
그렇게 해 놓으면 검색 엔진이 여러분의 웹페이지를 쉽게 index할 수 있게 됩니다.

효율적으로 북마크 서비스를 이용하려면 모든 웹 페이지를 북마크해 두지 않아야 합니다.
웹 유저에게 가장 유용한 웹페이지가 어떤 것인지 골라서 이 페이지를 submit 하시는게 좋습니다.


위 이미지는 digg.com 메인 화면 입니다.
이곳에 가셔서 다른 사람들은 어떤식으로 자신의 웹페이지를 북 마킹했는지 보시면 도움이 되실겁니다.

### Robots.txt
Robots.txt 파일은 Search Engine Spider에게 어떤 파일이 인덱스에 사용해야 하는 것이고 어떤것이 아닌지 알려 주는 역할을 합니다.
이 파일은 웹서버의 루트 폴더에 있게 됩니다.

* Robots.txt 파일 만드는 방법
http://www.robotsgenerator.com
이 웹페이지로 가시면 rogots.txt를 편하게 만들 수 있도록 도와줍니다.


여기서 보실 중요한 부분은 Actions 하고 Files or directories 입니다.
한번 샘플로 만들어 볼까요?
먼저 Actions 의 Allow를 체크하고 Files or directories에 /coronasdk 를 넣습니다.
그리고 Add 버튼을 누릅니다.
다음으로 Disallow를 체크하고 /adobe/acrobat.pdf 를 넣습니다.
또 Add 버튼을 누릅니다.
그러면 아래와 같이 됩니다.


코로나SDK는 Allow 하고 어도비 아크로뱃 PDF 파일은 Disallow 했는데 그냥 예를 든 겁니다.
코로나SDK는 모바일 앱을 만드는 아주 유용한 툴인데 이 SDK를 개발 한 사람들은 어도비 사의 플래시( Flash) 개발 팀에 있던 사람들이거든요.
지금은 모바일 앱 개발 툴에서 경쟁관계에 있지만 그렇다고 그게 저하고 무슨 연관이 있는건 아닙니다. :)
잠시 여담이었구요.

이런식으로 내용을 다 작성했으면 그 다음도 간단합니다.
내용을 모두 Copy 하셔서 여러분의 PC에서 메모장이나 에디터나 뭐 그런거로 새 문서 만들어서 복사해 넣습니다.
그리고 그 새 문서를 robots.txt라고 이름 붙입니다.
그리고 그 robots.txt를 여러분의 웹서버 root 폴더에 복사해 넣습니다.

그럼 구글이나 여러 검색엔진들의 Search Engine Spider가 웹을 유령처럼 떠돌아 다니면서 정보를 수집해 갈 때 이 robots.txt가 있으면 이것을 근거로 정보를 가져 갈 겁니다.

위 페이지의 옵션을 보시면 특정 검색엔진(구글, 구글 모바일, msnbot ...)에 Allow 하고 Disallow하도록 하는 기능도 있습니다.

자 이상으로 SEO로 홈페이지 마케팅 하기 공부가 모두 끝났습니다.

다음 글에서는 지금까지의 내용들을 총 정리 하는 팁을 소개해 드릴께요.
반응형

SEO 홈페이지 마케팅 - Off Page Optimization 3

2012. 1. 12. 00:07 | Posted by 솔웅


반응형
자신이 만든 홈페이지 마케팅을 잘하는 방법 SEO에 대해 공부하고 있습니다.
오늘은 Off Page Optimization 세번째 시간으로 포럼,PPC,유튜브를 통한 방법에 대해 알아보겠습니다.
그리고 내일은 최종 마무리 정리하는 시간을 갖을 계획입니다.

우선 포럼에 대해서 알아보겠습니다.

### Forums (포럼 이용하기)
포럼이란 어떤것을 질문하고 대답하는 그런 곳 입니다.
이런 곳을 통해서 웹사이트를 아주 효과적으로 홍보할 수 있습니다.
이곳을 이용하면 아주 우량한 back link를 달 수 있습니다.
우량한 back link라면 곧 검색엔진에서도 상위에 랭크되는데 영향을 미치는 요소입니다.

* 포럼 리스트 (100개)
1. http://forums.digitalpoint.com
2. http://www.vuju.com/
3. http://checkthisup.com
4. http://www.sitepoint.com/forums
5. http://www.thewebmasterforum.net
6. http://www.webmasterforums.com
7. http://www.allcoolforum.com
8. http://www.warriorforum.com
9. http://forums.webicy.com
10. http://thehyipforum.com
11. http://www.webmasterforumsonline.com
12. http://www.webmasters.am/forum
13. http://www.webmasterforums.net
14. http://www.devhunters.com
15. http://www.webmaster-forum.net
16. http://www.geekvillage.com/forums
17. http://www.zymic.com/forum
18. http://www.webmastershelp.com
19. http://www.webmasterdesk.org
20. http://www.webmasterground.com
21. http://developers.evrsoft.com/forum
22. http://www.websitebabble.com
23. http://www.elancetalk.com
24. http://www.talkingcity.com
25. http://www.australianwebmaster.com
26. http://www.wtricks.com
27. http://www.forums.webzonetalk.com
28. http://www.htmlforums.com
29. http://www.searchbliss.com/forum
30. http://www.webmasterize.com
31. http://www.webmasterserve.com
32. http://www.freehostforum.com
33. http://www.seorefugee.com/forums
34. http://www.cre8asiteforums.com/forums
35. http://forums.seo.ph
36. http://forums.delphiforums.com
37. http://www.web-mastery.net
38. http://www.webworkshop.net/seoforum/index.php
39. http://www.webproworld.com
40. http://www.bzimage.org
41. http://www.v7n.com/forums
42. http://www.dnforum.com
43. http://www.webcosmoforums.com
44. http://forums.webicy.com
45. http://forum.hittail.com/phpbb2/index.php
46. http://www.affiliateseeking.com/forums
47. http://siteownersforums.com/index.php
48. http://www.webmaster-forums.net
49. http://www.geekpoint.net
50. http://www.smallbusinessforums.org
51. http://forums.ukwebmasterworld.com
52. http://www.experienceadvertising.com/forum
53. http://opensourcephoto.net/forum
54. http://forums.seochat.com
55. http://forums.searchenginewatch.com
56. http://www.ihelpyou.com/forums
57. http://dishnews.medianetwork.co.in/yabb2/YaBB.pl
58. http://www.businesss-forum.com
59. http://www.9mb.com
60. http://acapella.harmony-central.com/forums
61. http://forums.seroundtable.com
62. http://www.submitexpress.com/bbs
63. http://www.startups.co.uk/6678842908486596004/forums.html
64. http://www.webmaster-talk.com
65. http://forums.comicbookresources.com
66. http://www.clicks.ws/forum/index.php
67. http://www.acorndomains.co.uk
68. http://forums.onlinebookclub.org
69. http://www.ableton.com/forum
70. http://www.davidcastle.org/BB
71. http://www.webtalkforums.com
72. http://www.bloggapedia.com/forum
73. http://www.bloggertalk.com/forum.php
74. http://paymentprocessing.cc
75. http://www.directoryjunction.com/forums
76. http://www.internetmarketingforums.net
77. http://www.lex224.com/forums/index.php
78. http://forum.joomla.org
79. http://forum.mambo-foundation.org/index.php
80. http://www.simplemachines.org/community/index.php
81. http://www.namepros.com/index.php
82. http://loanofficerforum.com/forum
83. http://iq69.com/forums
84. http://forum.hot4s.com.au
85. http://forums.mysql.com
86. http://forums.amd.com/forum
87. http://softwarecommunity.intel.com/isn/Community/en-us/Forums
88. http://forums.cnet.com
89. http://seotalk.medianetwork.co.in
90. https://www.computerbb.org
91. http://forum.vbulletinsetup.com
92. http://www.irishwebmasterforum.com
93. http://www.app-developers.com
94. http://forums.stuffdaily.com
95. http://forums.seo.com
96. http://www.webdigity.com
97. http://www.inboundlinksforum.com
98. http://forums.gentoo.org
99. http://ubuntuforums.org
100. http://forum.textpattern.com

* 포럼 고르는 순서
- 자신의 웹사이트 홍보에 알맞는 포럼을 찾는다.
- 가입을 한다. (build your profile)
- 질문과 답변 활동을 한다.

* 포럼에서 눈에 띄는 6가지 방법
- 가입시 프로파일을 만들때 보기 좋은 이미지나 gif animatiion 이미지로 좋은 이미지를 주기 위해 노력한다.
- 질문들에 답변을 해 주면서 관련 있으면 자신의 웹싸이트 정보를 넣는다. (관련도 없는데 넣으면 나쁜 이미지를 주므로 하지 않는다.)
- 똑같은 답변을 여러번 반복해서 올리지 않는다. (댓글 도배는 아주 나쁜 이미지를 준다.)
- 항상 홈페이지에 대한 홍보만 하지 않는다. 읽는 사람에게 도움이 되는 경우에 한다.
- 자신만의 비법이 있을경우 이것을 공유하는 것을 두려워하지 마라. 나에게도 유용했다면 다른 사람들에게도 유용한 것이다.
- 답변은 간단하게 요점만 정리한다.

### PPC
PPC는 pay per click advertising의 약자입니다.
즉 유료 광고(배너 등)를 말합니다.
PPC는 클릭수에 따라 광고료를 지불하는 것입니다.
이런 광고는 검색엔진이나 유튜브 그리고 페이스북 프로파일 등을 통해서 할 수 있으며 다른 사람의 홈페이지에 올리는 방법도 있습니다.


구글에서 SEO로 검색하면 나오는 화면입니다.
노란 바탕으로 된 링크들이 PPC 광고를 한 곳입니다.

일반적으로 클릭당 50센트 내외 정도 합니다.
대출이나 부동산 또는 성인대상 영업같은 경우에는 클릭당 5~10불씩하는 경우도 있습니다.
일반적으로 PPC는 SEO의 주요한 요소는 아닙니다. 기본적으로 SEO는 이렇게 돈을 들여서 하는 방법보다 그렇지 않은 기술들을 더 중요하게 다루니까요.
돈 많으면 굳이 복잡한 SEO를 따로 생각할 필요없이 그냥 돈주고 광고하면 되니까요.

### 유튜브
유튜브를 통해 홈페이지를 광고하는 방법도 아주 널리 사용됩니다.
본인만의 채널을 만들어서 동영상강좌를 올리기도 하구요.
모바일 애플리케이션의 경우 사용법을 올리기도 합니다.
자신의 홈페이지가 특별한 테크닉을 다루고 있다면 동영상강좌를 잘 올리면 크게 도움이 됩니다.
(검색엔진에 Adobe Acrobat 으로 PDF를 만들어서 올린것을 유튜브에는 동영상으로 만들어서 올릴 수도 있겠죠?)
동영상을 만들때 화면에 홈페이지의 로고는 반드시 넣으세요.
누군가가 댓글을 달면 반드시 답글을 다시구요.
친구 신청을 받았다면 잘 허락해 주세요.
본인의 채널을 만들 때는 MyTubeDesign.com을 활용하세요.
동영상을 만들 때나 자신만의 채널을 만들 때 활용할 수 있는 많은 자료가 있습니다.



이상으로 SEO (Search Engine Optimization) 에 대해 알아 봤습니다.
내일은 마지막 시간으로 총정리를 하면서 마치겠습니다.

반응형