Rev. 2.73

2006년 한 해 동안 작성한 포스트를 대상으로 상위 컨텐츠를 뽑아보았습니다. 더불어 방문수와 페이지뷰의 그래프, 추천 소스, 지리, 해상도, 브라우저 별 파이그래프를 공개합니다. 이 통계자료는 구글 Analytics를 근거로 작성한 것입니다.

2006 제목별 상위 컨텐츠 Top10
1. 고유방문:1,434, 페이지뷰:1,539, 평균시간:00:01:19 :: 중고 DSLR 카메라, Canon 300D
2. 고유방문:1,147, 페이지뷰:1,280, 평균시간:00:01:26 :: Fate / Stay Night (フェイト/ステイナイト)
3. 고유방문:1,034, 페이지뷰:1,318, 평균시간:00:01:37 :: 요즘 만들고 있는 웹갤러리 - FloatPhoto
4. 고유방문:981, 페이지뷰:1,349, 평균시간:00:02:49 :: 블로그 메타 사이트의 태그링크 달기
5. 고유방문:957, 페이지뷰:1,210, 평균시간:00:02:32 :: Prototype 중급 - Form의 심플한 Ajax 전송
6. 고유방문:945, 페이지뷰:1,355, 평균시간:00:01:50 :: Drag and Drop AJAX Shopping Cart 실습
7. 고유방문:895, 페이지뷰:1,041, 평균시간:00:02:48 :: 구글 피카사, 웹앨범 서비스도 죽여주시는군요
8. 고유방문:894, 페이지뷰:1,113, 평균시간:00:01:57 :: AjaxOS가 곧 옵니다.
9. 고유방문:858, 페이지뷰:1,179, 평균시간:00:01:52 :: 파이어폭스2 정식, 한글판 유출(?)
10. 고유방문:784, 페이지뷰:1,001, 평균시간:00:02:11 :: 태터툴즈1.0 플러그인 『팝에디터』 배포

2006analytics방문수.gif
2006analytics추천소스별.gif
2006analytics브라우저별.gif
2006analytics지리별.gif
2006analytics해상도별.gif

그리 좋은 성과를 거두지 못해 아쉽군요. 전해에 비해 성장률이 매우 저조합니다. 원인은 웹기술 문서를 지나칠정도로 많이 작성했기 때문인 것으로 보입니다.(당골 방문객이 거의 떠났습니다. ㅠ.ㅠ) 앞으로는 다양한 종류의 포스트에 비중을 유지하는 것에도 신경써야겠습니다.

Comments

자바스크립트 이펙트의 대명사 스크립타큘러스(Scriptaculous)는 1.7 베타에 추가되는 모프(Morph)와 트랜스폼(Transform) 이펙트의 데모를 시연했습니다. 현재 테스트 파일이 정식으로 배포된 상태는 아니지만 테스트 소스를 추출하여 사용해 보았습니다. Prototype 1.5.0의 RC2가 베이스로 사용되고 있더군요. 트랜스폼 이펙트는 List Item 에서 특정 메시지를 부각시키는 역할을 합니다. 그리고 모프 이펙트는 아래에서 직접 체험해 봅시다.

Effect.Morph

// Usage : Element morph
new Effect.Morph('error_message',{
style:'background:#f00; color:#fff; border: 20px solid #f88; font-size:2em',
duration:0.8
});

// same thing with Element morph is
$('error_message').morph(
'background:#f00; color:#fff; border: 20px solid #f88; font-size:2em',
{duration:0.8}
);

Usage를 보면, 스타일시트의 코드 자체가 스트링으로 입력받는 모습이 독특합니다. { background: '#f00', fontSize: '2em' } 요딴 식으로 작성하기가 무척 불편했었는데 말이죠. 아무튼 멋집니다.

Comments

Monnerjahn씨는 마우스의 휠을 Prototype의 Event.observe로 확장코드를 개발하고 공개했습니다. 좌측의 사각형 엘리먼트에 마우스를 올리고 휠을 사용해 보세요.(마우스 오버하는 순간 스크롤바가 비활성화 됩니다.) 이 이벤트를 사용하여 구글맵의 줌인/줌아웃처럼 페이지 스크롤 자체를 자바스크립트로 컨트롤 할 수 있게 되었습니다. 멋진 그림이 그려지지 않으세요?

/*
* Orginal: adomas.org/javascript-mouse-wheel/
* prototype extension by "Frank Monnerjahn" themonnie@gmail.com
*/
Object.extend(event, {
    wheel:function (event){
        var delta = 0;
        if (!event) event = window.event;
        if (event.wheelDelta) {
            delta = event.wheelDelta/120;
            if (window.opera) delta = -delta;
        } else if (event.detail) { delta = -event.detail/3; }
        return Math.round(delta); //Safari Round
    }
});

/*
* end of extension
*/

var counterSite=0;
function handleSite(e) {
    counterSite +=  event.wheel(e);
    $('delta').innerHTML = counterSite +'#'+ event.wheel(e) +
    ": " + (event.wheel(e) <0 ? 'down' : 'up' );
}

var counterDIV=0;
function handleDIV(e) {
    counterDIV +=   event.wheel(e);
    $('divdelta').innerHTML = counterDIV +'#'+ event.wheel(e) +
     ": " + (event.wheel(e) <0 ? 'down' : 'up' );
}

event.observe(document, "mousewheel", handleSite, false);
event.observe(document, "DOMMouseScroll", handleSite, false); // FF

event.observe($('divdelta'), "mousewheel", handleDIV, false);
event.observe($('divdelta'), "DOMMouseScroll", handleDIV, false); // FF

덧. 실습예제가 업데이트 되었습니다.(IE6,7에서 스크롤 막기, 움직이는 엘리먼트)

Comments