인터넷에서 사람들이 "보호"를 하려고 안간힘을 쓰는 것을 보면 조금 웃깁니다. 여기 이 dwProtector는 여러분의 이미지를 "보호"하려고 노력합니다. 아래처럼만 하시면 됩니다:
[code:js]
window.addEvent('domready', function() {
        var protector = new dwProtector({
                image: '/blank.gif',
                elements: $$('.protect')
        });
});

어떻게 보호 할까요?
  • "다른 이름으로 사진 저장"을 못하도록 오른쪽 클릭 방지
  • 이미지를 데스크톱으로 드래그하는 것 방지
  • "다른 이름으로 배경 저장"을 못하도록 오른쪽 클릭 방지
  • "배경 그림 보기"를 못하도록 오른쪽 클릭 방지
예제를 한번 보시고 복사를 시도해보세요. 물론, print screen / 맥에선 Apple-Shift-4 를 누르거나 소스 보기 하면 될 일이긴 합니다.

from MooTools 1.2 Image Protector
Posted by 행복한고니 트랙백 0 : 댓글 2

댓글을 달아 주세요

  1. addr | edit/del | reply 챨스 2008.08.07 16:03

    그렇게 큰 실용성은 못느끼겠네요.
    소스보기로 볼수도 있고 temp 폴더에 자동으로 저장도 되는데 이미지를 보여주면서 이미지를 막는다는게 조금 아이러니 하긴 한데..

    • addr | edit/del BlogIcon 행복한고니 2008.08.07 22:16 신고

      그렇죠. -_-a
      그래서, 본문에서도 써있듯 Dion씨도 그런 시도를 보고 "웃기다"라고 한거죠 ^^

MooWheel은 0.2 버전까지 업데이트된 자바스크립트 연결 시각화 라이브러리입니다.

업데이트 사항입니다:

  • 새로운 데이터 형식
  • 텍스트는 물론 점에도 마우스를 올릴 수 있습니다.
  • 이미지가 각각의 항목에 추가될 수 있습니다.

유명한 Twitter 예제를 보실 수 있습니다(TweetWheel 개발자이신 Augsto Becciu씨께 감사드립니다).

MooCirclePack도 릴리스 되었습니다:

MooCirclePack은 또 다른 끝내주는 시각화 라이브러리로, 자바스크립트로 원 묶음을 만들 수 있습니다. 이것은 크기로 표현할 수 있는 데이터나(eg: 막대 그래프의 대안) 무정형으로 표현할 수 있는 데이터에는 정말 좋습니다.

Ajax를 사용하지 않은 데모도 있고, Ajax를 사용한 데모가 있습니다.

from MooWheel and MooCirclePack for visualizations
Posted by 행복한고니 트랙백 0 : 댓글 0

댓글을 달아 주세요

MooTools팀이 최근 v1.2를 발표하면서 CNET의 MooTools 플러그인 저장소도 업데이트 했습니다.

CNET은 MooTools 라이브러리를 보완해주는 매우 광범위한 컨트롤과 위젯들을 가지고 있습니다. 이 위젯들은 carousels, slideshows, date pickers, tabs등의 기능을 제공하고 있습니다.

업데이트는 다운로드 빌더SVN 저장소을 통해 사용할 수 있습니다.

from CNET Updates the Clientside MooTools Plugin Repository
Posted by 행복한고니 트랙백 0 : 댓글 0

댓글을 달아 주세요

Scott Boyce씨가 deckmyplace.com에 대한 흥미로운 이야기를 쓰셨습니다.
사용자 삽입 이미지
그 사이트는 원래는 Flash 사이트로서 설계되었지만, 실제 작업이 진행될 때에는 Flash 대신 HTML을 사용하라고 했다고 합니다. 그는 그가 구현할 수 있는 컴포넌트가 얼마나 되는지 살펴봤어야 했습니다. 해보니까 상당히 많은 양 전부였다고 합니다.

우리는 Scott씨에게 사이트를 제작한 그의 경험에 대해 자세히 들려달라고 했습니다:
Flash를 사용하지 말라는 지시가 저에게 왔을 때는 재설계할 시간이 없었습니다. 제 목표는 Flash의 시각적 부분과 구분할 수 없게 하는 것이었지, 유효한 마크업, 점진적 개선법, 508 섹션 접근성 등은 아니었습니다.
MooTools
예전에 MooTools(와 초기의 moo.fx)를 인터페이스 엘리먼트에 애니메이션 효과를 주려고 사용해 본 적이 있었습니다. 하지만 그것(혹은 다른 JS 라이브러리)을 이용해 전체 사이트를 만들어 본 적은 없었습니다. 게다가 포지셔닝이 무척 중요한 사이트를 작성해본 적도 없어서 CSS도 도전이었습니다.

저는 수많은 Mootools의 내장 Assets를 사용했습니다: AJAX, 툴팁, 슬라이더
이쁜 페이지 전환효과
페이지 전환은 효과들을 초합해 만들었습니다. 기본적으로 세 개의 레이어가 있습니다: 프레임, 컨텐트, (보통은 감춰진) 배경. 사용자가 새 페이지로 이동하면 다음과 같은 일이 일어납니다:

1. 배경이 현재 페이지의 흐린 스크린샷으로 바뀐다(즉시 바뀜. 이미지는 미리 로딩되어있다).
2. 컨텐트 영역의 투명도가 증가하면서, 흐린 배경 이미지가 드러난다(300 ms).
3. 새 컨텐트가 AJAX를 통해 로딩된다(각 컨텐트 페이지는 1KB 정도이다; 라운지는 4KB).
4. 컨텐트 영역의 투명도가 다시 감소하여 불투명 상태로 된다(300ms).
개발 프로세스
컨텐트는 중복 컨텐트의 필요를 제거하기 위해 PHP include를 사용해서 HTML로 가장 먼저 놓아졌습니다.(부수적으로, 진입폼과 유효성검사도 PHP로 작성되었습니다.) 몇 개의 브라우저(Firefox, IE6, Safari, Opera, Lynx, IE6+, JAWS)에서 표현이나 기능면에서 문제가 없음에 만족하고 나서, 저는 이벤트 리스너를 작성하기 시작했습니다.

JavaScript가 작성되고 나면, 우리는 테스트를 다시 했습니다. 결국, 우리가 해야할 일은 배경 음악과 몇 개의 두번째 애니메이션(회전) 뿐이었습니다. 여전히, 많은 사람들은 그것이 Flash이겠거니 하고 있습니다.

Firefox용의 Firebug, YSlow 그리고 Web Developer toolbar는 개발기간동안 값을 헤아릴 수 없을만큼 귀한 도구였습니다.
상태
  • 전체 JavaScript는 59KB (51KB는 Mootools + 라이브러리 8KB)
  • CSS 30.9KB (조건절을 통한 MSIE용 CSS 4.7KB 포함)
  • 전체 사이트 2.59MB (이미지 2.11MB)

from Frank Sinatra, Flash, and Ajax: Deckmyplace.com
Posted by 행복한고니 트랙백 1 : 댓글 0

댓글을 달아 주세요

MooTools 1.2 릴리스

2008. 6. 23. 02:18 from [IT] Web Tech
사용자 삽입 이미지
MooTools 1.2가 릴리스 되었고 MooTools 웹사이트도 업데이트 되었습니다. 마지막 릴리스(1.11) 이후 거의 1년만인 것 같습니다. Moo는 Prototype에 영향을 받은 헬퍼와 부드러운 효과를 작은 크기에 넣음으로써 다른 유명 프레임웍과 스스로를 구분짓고 있습니다. 압축전에는 90KB 정도의 크기이며, 이는 Prototype(124KB)이나 Scriptaculous와 그의 모든 기능을 포함했을 때(280KB)보다는 훨씬작습니다; 또한 jQuery(97KB)보다 작습니다.

(물론, 사이즈 비교가 최소화와 gzip 압축 덕분에 별 의미는 없을 뿐만 아니라 프레임웍 "core" 배포판과 플러그인에 포함하는 것이 어떤 것이느냐에 따라 변화가 너무 심합니다)

Moo 1.2의 주목할만한 기능 몇가지입니다:
그리고 하나 더! MooTools와 MooTools 플러그인의 최적화된 버전을 작성하는 MooTools 버전 빌더는 빼놓을 수 없는 매력입니다.
사용자 삽입 이미지

from MooTools 1.2 Released
Posted by 행복한고니 트랙백 0 : 댓글 0

댓글을 달아 주세요

사용자 삽입 이미지

Markus Inger 씨가 Mootools 로 BeJewelled 같은 게임인 BeSlimed를 작성하셨습니다.

from BeSlimed: MooTools Gaming on Ajaxian
Posted by 행복한고니 트랙백 0 : 댓글 0

댓글을 달아 주세요

moo.rd 1.3 릴리스

2008. 5. 26. 23:49 from [IT] Web Tech

사용자 삽입 이미지

moo.rd 팀은 moo.rd 확장팩의 1.3.1 버전을 릴리스했습니다. 거의 새로 작성된 것 같고, MooTools 1.2를 기반으로 하고 있어 새로운 MooTool 문법과 로직을 사용하고 있습니다.

강력한 슬라이드쇼를 작성할 수 있는 Cycle Effects, 새로운 Fx 효과들, Kwick 메뉴 클래스, alert, confirm, prompt 등 브라우저의 기본 동작을 커스터마이징 할 수 있는 새로운 Customs, Virtual Boxes 등이 추가되었습니다.

가장 중요한 기능은 Download Builder 에서 발견할 수 있다고 하는데, MooTools와 moo.rd 를 하나의 파일로 만들어 줍니다.

from moo.rd 1.3 released on Ajaxian
Posted by 행복한고니 트랙백 0 : 댓글 0

댓글을 달아 주세요

Chris Schneider씨가 MooTools JavaScript 라이브러리를 이용해 CSS 효과 JavaScript를 작성했습니다. CSS를 간단하게 해석해서 Webkit의 새 기능인 CSS Animations 를 구현해보았습니다.

CSS의 도입으로 우리는 프리젠테이션 레이어와 컨텐트 레이어를 분리할 수 있게 됐지만. CSS를 이용한 애니메이션을 추가할 순 없었습니다. DHTML이 이 부족한 부분을 채워줄 수 있지만, 그러면 프리젠테이션과 동작 레이어가 뒤섞여 버립니다.

처음에 저는 CSS에 “-moofx-{property}: {from} {to};” 과 같은 것을 추가하는 컨셉을 시도해봤습니다. 이 방법의 단점은 변경 사항이 있으면 작업을 두 번 해야한다는 것입니다. 처음에는 JavaScript를 사용하지 않는 사용자를 위해 보통의 CSS에서, 또 한번은 애니메이션을 위해서이죠.

WekKit의 CSS 애니메이션을 듣고 난 뒤에 컨셉을 CSS 애니메이션으로 바꿨습니다. 추가 대상이나 시작값을 설정하는 대신 ”평범하게” 정의했습니다. 추가해야할 것은 CSS 선언뿐입니다.

스크립트는 곧 v1.2를 릴리스MooTools를 이용했으며,Safari 3, Firefox 2 그리고 완벽하진 않지만 Internet Explorer 7에서 작동합니다. Internet Explorer 6에서는 동적인 pseudo 클래스 지원이 안되서 정상 작동하지 않습니다.

실제 동작하는 스크립트를 보시죠.

from CSS Animations via MooTools on Ajaxian
Posted by 행복한고니 트랙백 0 : 댓글 2

댓글을 달아 주세요

  1. addr | edit/del | reply BlogIcon daybreaker 2008.05.21 02:37

    와, CSS로만 간단한 상태 전환 애니메이션을 제어할 수 있으면 좋겠다는 생각을 해봤는데 저렇게 구현이 되는군요. ^^;

FancyUpload

FancyUpload 예제 - Queued Image Uploader


Harald Kirschner씨가 파일폼을 대체할 수 있으며 겸손하고(unobtrusive), 멀티파일 업로드는 물론 진행상태바 애니메이션도 되는 FancyUpload의 새 버전을 만들었습니다.

제목의 Swiff 라는 이름에서 알 수 있듯, MooTools 기반입니다. 다음과 같은 코드로 실행되는 Queue가 되는 사진 업로더 예제를 보실 수 있습니다:
[code:Js]
var swiffy = new FancyUpload2($('demo-status'), $('demo-list'), {
        'url': $('form-demo').action,
        'fieldName': 'photoupload',
        'path': '../../source/Swiff.Uploader.swf',
        'onLoad': function() {
                $('demo-status').removeClass('hide');
                $('demo-fallback').destroy();
        }
});

/**
 * Various interactions
 */
$('demo-browse-all').addEvent('click', function() {
        swiffy.browse();
        return false;
});

$('demo-browse-images').addEvent('click', function() {
        swiffy.browse({'Images (*.jpg, *.jpeg, *.gif, *.png)': '*.jpg; *.jpeg; *.gif; *.png'});
        return false;
});

$('demo-clear').addEvent('click', function() {
        swiffy.removeFile();
        return false;
});

$('demo-upload').addEvent('click', function() {
        swiffy.upload();
        return false;
});

from FancyUpload: Swiff meets Ajax on Ajaxian
Posted by 행복한고니 트랙백 0 : 댓글 0

댓글을 달아 주세요

from NSFW Blocker Using MooTools on Ajaxian

(역자 주 : NSFW=Not Safe for Work : 직장에서 보면 해고당할 수 있는 동영상이나 사진 등을 일컫는 말)

David Walsh씨가 재미있는 것을 만들었습니다. 어쩐지 조금 장난스럽긴 한데요, MooTools와 CSS를 이용한 NSFW 차단 코드를 작성했습니다.

대부분의 경우 주어진 사진이 부적당하다고 생각하도록 만드는 것은 일부분이기때문에, 글의 이미지에서 중요부만 가릴 수 있다면 전체 이미지를 가리지 않아도 되겠지라고 스스로에게 물어봤습니다. 그런 이유로, CSS와 MooTools 를 이용해서 NSFW 차단 코드를 작성한 것입니다.

그래도 마우스를 오버하면 사각형이 사라져서 가려진 부분이 보이기는 합니다. MooTools에 있는 fade() 함수를 사용했다고 하네요. 데모는 이 곳에서 볼 수 있습니다.
NSFW 데모

NSFW 데모 화면


Posted by 행복한고니 트랙백 0 : 댓글 0

댓글을 달아 주세요

from MooWheel: Unique Data Visualization on Ajaxian

Ajax로 작동하는 AjaxIM 메신저를 만든 Josh Gross씨가 독특한 방식의 데이터 시각화 프로그램을 만들었습니다.

이 스크립트의 목적은 JavaScript와 canvas 객체를 이용해 독특하고 우아한 방식으로 데이터를 시각화하는 것이었습니다. 이런 류의 시각화는 다수의 서로 다른 객체, 사람들, 장소, 물건, 그 밖의 기타 간의 커넥션을 보여주는데 사용할 수 있습니다.

MooTools 를 이용해서, CanvasText (canvas 엘리먼트에 텍스트 지원) 와 ExCanvas (IE canvas 지원), 그는 데이터를 보여주는 재미있는 결과물을 만들 수 있었습니다.

사용자 삽입 이미지

다른 프로젝트에도 이용할 수 있을만한 멋진 효과 같습니다. 이걸 사용한 다른 결과물을 볼 수 있을까요?

Posted by 행복한고니 트랙백 0 : 댓글 0

댓글을 달아 주세요