사용자 삽입 이미지

Our Signal에서 Digg, Reddit, Delicious, Hacker News를 모아 jQuery를 이용해 클라우드 시각화 페이지를 작성했습니다.

상자의 크기는 인기도를 반영했다고 합니다(클수록 인기가 있는 겁니다). 또한 색상은 인기도의 상승도를 반영했다고 하는군요. 색상이 따뜻한 계열일 수록 상승폭이 큰 것이고 반대로 차가울 수록 하락폭이 큰 것입니다.

from Our Signal: Page Cloud Visualization of Digg, Reddit, Delicious, Hacker news
Posted by 행복한고니 트랙백 0 : 댓글 0
Umut Muhaddisoglu씨가 Wikia Search나 국내 사이트로는 Mixsh 등에서 볼 수 있던 무한 스크롤 패턴을 구현하셨습니다.

다른 구현물들도 많았지만, 이것은 jQuery를 사용한 제대로 된 것입니다. 이렇게 작동한다고 합니다:
  • 사용자가 스크롤을 내려 끝에 도달하면 함수가 호출됩니다.
  • 이 함수는 datagrid의 마지막 DIV ID를 가져옵니다.
  • 이 DIV ID를 포함해 쿼리를 보냅니다.
  • 결과가 돌아오면 datagrid의 마지막에 그들을 추가합니다.
데모는 Umut 씨의 DNS Pinger 서비스에서 스크롤을 다운하면 보실 수 있습니다. 데모의 일부분들입니다:

HTML 구조는 이렇습니다:
[code:js]
<div class="wrdLatest" id=9>content</div>
<div class="wrdLatest" id=8>content</div>
아래 함수는 로딩 아이콘을 보여주고, 그 후 새로운 컨텐트로 그 영역을 채웁니다:
[code:js]
function lastPostFunc()
{
    $(’div#lastPostsLoader’).html(’<img src="bigLoader.gif"/>’);
    $.post("scroll.asp?action=getLastPosts&lastID=" + $(".wrdLatest:last").attr("id"),  
 
    function(data){
        if (data != "") {
        $(".wrdLatest:last").after(data);          
        }
        $(’div#lastPostsLoader’).empty();
    });
};
스크롤 검출 부분입니다:
[code:js]
$(window).scroll(function(){
        if  ($(window).scrollTop() == $(document).height() - $(window).height()){
           lastPostFunc();
        }
});

from Implementing infinite scrolling with jQuery on Ajaxian
Posted by 행복한고니 트랙백 0 : 댓글 1
사용자 삽입 이미지

Macromedia와 Adobe가 합병된 이래로, PDF와 Flash가 함께 동작할 그 날만을 기다려왔는데, 드디어 가능하게 되었습니다. 합병 전에 있는 회사들에게는 매우 상징적인 의미를 가질 것 같습니다.

TechCrunch에 따르면 이렇습니다:
Adobe가 Acrobat.com을 런칭함과 동시에, 메이저 업그레이드된 Acrobat 9 이 릴리스 되었습니다. 놀랄 만한 뉴스가 있습니다. Adobe의 데스크탑 PDF 작성 소프트웨어가 Flash를 지원하게 되었습니다. 따라서 사람들은 문서에 YouTube로 부터 가져온 Flash 동영상을 삽입하거나 개발자들이 웹 응용프로그램을 작성할 때 사용하던 바로 그 프로그래밍 툴인 Adobe의 Flex 프레임웍을 사용한 전자 문서의 전체 스킨을 디자인할 수도 있게 되었습니다.

Acrobat 9으로 작성된 PDF 문서는 또한 그들을 연결된 문서로 만들면서 인터넷 상의 다수의 저자와 리뷰어들과의 협업을 지원합니다. 가장 좋은 것은 읽는데 읽어들이는데 시간이 많이 들지 않는다는 것입니다. Adobe의 다음 행보는 PDF가 웹 페이지로 쉽게 변환되는 것과 그 반대입니다.
사용자 삽입 이미지
사용자 삽입 이미지

from Acrobat.com: PDF and Flash sitting in a tree on Ajaxian
Posted by 행복한고니 트랙백 0 : 댓글 1
Dion씨와 Ben씨가 Google I/O 행사 중 State of Ajax 세션에서 사용한 예제 중 하나라고 합니다. 폼의 이력(history)를 해결해주는 것이라고 합니다.

Aza Raskin씨가 제안한 대로 Web에서 Undo를 구현할 수는 없을까라고 생각하다가 폼 데이터의 사용 패턴에 대해 생각했다고 합니다.

실제 동작하는 것을 보시고, 전체 코드도 살펴보세요. 아래 동영상을 보시면 실제 작동하는 부분을 더 잘 이해하실 것 같습니다.

Addressbook: Form History Pattern from Dion Almaer on Vimeo.

from Addressbook: An example of the Form History Pattern on Ajaxian
Posted by 행복한고니 트랙백 0 : 댓글 0
사용자 삽입 이미지
Dojo의 Pete Higgins씨가 만든 dojo.workers를 이용한 멋진 예제를 작성했습니다.

IE6에 대한 지원은 다른 곳으로 날려버리는 걸로 마무리했네요(저도 이렇게 하고 싶을 때가 참 많습니다만...).
[code:js]
var newp = function(){
 // IE6 branch of this demo
 window.location.href = "http://" +
  (confirm("Is it 2008?") ?
   "webkit.org" : "mozilla.org") +
  "/";
}
 
// setup our branch launch:
dojo.addOnLoad((dojo.isIE && dojo.isIE <7 ? newp : init));

from dojo.workers: a showcase on Ajaxian
Posted by 행복한고니 트랙백 0 : 댓글 1
따로 설명은 필요없을 것 같습니다. jQuery를 이용해서 만든 Cubespace를 확인해보시면 되니까요.
통통 튀는 애니메이션이 꽤 귀엽습니다. ^^
Cubespace

from Cubespace : Isometric Pixel Fun on Ajaxian
Posted by 행복한고니 트랙백 0 : 댓글 2
inputEx는 "필드와 폼을 생성하기 위한 JavaScript 프레임웍"으로서, Eric Abouaf씨가 작성했습니다. 이 프레임웍은 폼을 기술하는데에 JSON 형식을 다음과 같이 사용하고 있습니다.:
[code:js]
{
        "fields" : [
                {
                        "type" : "group",
                        "inputParams" : {
                                "fields" : [
 
                                ],
                                "name" : "",
                                "tooltipIcon" : false,
                "value" : {

                },
                                "optionsLabel" : "Options"
                        }
                }
        ],
        "optionsLabel" : "Options"
}
위 코드는 빌더 프로그램을 이용해서 작성할 수 있습니다.

입문 안내서를 살펴보시고, 다음과 같은 응용프로그램을 작성하고 싶으시다면:

[code:js]
init: function() {
    this.buildTree();
    this.initContextMenu();
    this.buildForm();
    this.initEvents();
    this.queryData();
}
이 도구가 도움이 될 것 같습니다.
사용자 삽입 이미지
from inputEx : JSON form builder on Ajaxian
Posted by 행복한고니 트랙백 0 : 댓글 0

사용자 삽입 이미지
글을 읽기 전에...

이 글에서 영속성, 영구적인 등으로 쓰인 단어는 persistent 입니다. 영구 저장소(persistent storage)라는 것은 비휘발성 메모리로 저장된 데이터가 영구적으로 보존되는 것을 말합니다. 같은 단어를 장기보존 스토리지(혹은 저장소), 영구 스토리지 등으로 표현하기도 합니다.

본문 내용

Sitepen의 Kris Zyp씨가 Persevere를 릴리스했습니다:

Persevere 프로젝트는 HTTP REST, JSON-RPC, JSONPath, HTTP 채널의 직관적인 표준 기반의 JSON 인테페이스를 사용한 분산 컴퓨팅과 영속성을 위한 오픈소스 도구 모음입니다. Persevere 프로젝트의 핵심은 Persevere 서버입니다. Persevere 서버는 Persevere JavaScript 클라이언트를 포함하고 있지만 표준 기반 인터페이스는 어느 프레임웍이나 클라이언트와도 사용할 수 있도록 하고 있습니다.

Persevere 서버는 객체 저장 엔진이자 인터랙티브한 서버측 JavaScript 환경에서 동적인 JSON 데이터의 영구적인 데이터 저장소를 제공해주는 응용프로그램 서버(Java/Rhino 상에서 실행)입니다. 현재는 베타판이며, JavaScript, Dojo, Ajax 개발자들에게 흥미로울만한 매우 충실한 기능들을 자랑하고 있습니다

다음은 JavaScript로 만들어진 자동-동기화를 하는 실시간 Persevere 데이터 그리드의 데모입니다:

[code:js]
var persevereStores = dojox.data.PersevereStore.getStores(); // persevere stores are auto-generated
customerStore = persevereStores.Customer; // and get the Customer store
dataModel = new dojox.grid._data.DojoData(null,null,{/*rowsPerPage:12,*/store:customerStore,query:"",clientSort:true});

addItem = function() {
        // need to specify the parent because the customerStore is hierarchical and the grid model will
        // call newItem without any info who the parent
        //customerStore.parentId="0.examples.customers";
        grid.addRow({firstName: "firstName", lastName:"lastName",created:dojo.date.stamp.toISOString(new Date,{zulu:true})});
}

from Persevere: JSON Storage / Application Server on Ajaxian
Posted by 행복한고니 트랙백 0 : 댓글 0

OpenKM는 GWT, JBoss, Jackrabbit(컨텐트 레퍼지토리 API) 에 기반한 멀티 플랫폼 응용프로그램입니다.

2.0 버전이 릴리스되었는데, 응용프로그램 스타일의 인터페이스를 볼 수 있는 데모도 가능합니다. 2.0의 새로운 기능은 이렇습니다: 이미지, 동영상의 멀티미디어 엘리먼트의 사전시각화previsualization, 개선된 재작성 관리자 인터페이스, 템플릿의 집중관리, 사용자가 개인 문서를 저장할 수 있게 하는 배타적 영역, ZIP 파일로부터의 대량 입출력을 위한 도구, 다국어 지원과 날짜별 검색.

하지만, 보다 유용한 기능 중 하나는 일반적으로 많이 쓰이는 파일 형식의 인덱싱일 것입니다: text, Office, Office 2007, OpenOffice, PDF, HTML, XML, MP3, JPEG, 기타 등등.

사용자 삽입 이미지

from OpenKM : Open Source Document Management on Ajaxian
Posted by 행복한고니 트랙백 0 : 댓글 0
아래는 Ajaxian에 있는 글을 그대로 번역했습니다. 즉, "저"라고 하면 Dion씨인 것이고, "우리"라고 하면 Ben씨와 Dion씨입니다. 이 글을 보고 나니 더더욱 Wii 를 사고 싶어지네요. 그전엔 소년의 혼(?)이었다면 이번에는 개발자의 혼(?)으로요. ^-^
_________________________
Ben과 저는 JavaOne에서 Ajax의 새로운 점에 대한 프리젠테이션을 진행했습니다. 이 행사가 JavaOne이기 때문에 우리는 Java쪽 주제를 조금 더 다루었는데, 주제 중 하나가 웹 페이지 밖이나 브라우저 종료후에도 계속 애플릿를 실행할 있는 멋진 새 기능을 지원하는 Java Plugin 사용에 관한 것이었습니다. Java는 이제 "Java가 전체 브라우저를 종료"하던 문제를 일으키던 프로세스 내부 실행을 벗어났습니다.

어쨌든, 다시 데모 이야기를 하겠습니다. For some context, 지난해 JavaOne에서 우리는 스테이지에서 기타 히어로(Guitar Hero)를 시연했었는데, 이 때 어떤 식으로든 게임 콘솔을 사용해야겠다라고 생각했습니다. 올해에 컨트롤러를 사용하기로 결심했지만, 그 다짐은 콘솔대신 Wii가 되었습니다.

그 컨트롤러를 이용해서 웹 페이지를 컨트롤 할 수 있으면 끝내주지 않을까? 라고 생각했고, 작업을 시작했습니다. 블루투스를 통해 Wii 모트와 교신할 수 있는데, 우리는 그를 가능하게 해줄 스택이 필요했습니다. Java에는 블루투스 스택이 있었죠. 우리는 Java 스택과 교신할 애플릿을 구할 수 있었습니다. 흠.

다양한 스택을 테스트하는 것은 실제로 시간이 꽤 걸렸습니다. 결국 우리는 많은 Wii 해커들이 사용하는 Wiiuse라는 네이티브 시스템을 사용했습니다. Wiiusej라는 wrapper 라이브러리는 정확하게 우리가 필요로 하던 것이었습니다.

간단한 테스트 후에 리모트와 프로그램간 통신을 하는 응용프로그램이 만들어졌습니다. 메인 컨트롤러가 Wii 센서바에 있는 일련의 IR(적외선) 빛들을 감지하기 때문에, 적당한 IR 소스만 있으면 시스템을 시뮬레이션할 수 있습니다. 프리젠테이션 룸에서 무대를 비추던 커다란 빛은 센서바의 역할을 할만큼 충분히 강해서 우리는 그것을 사용할 필요가 없었습니다.

어쨌든, 다시 프로그램 얘기를 하죠. 우리는 리모트가 무엇을 하고 있는지 알려줄 상태 머신 역할을 할 Java 클래스를 작성했습니다. 그것은 움직임과 어떤 버튼이 눌렸는지, 장치가 얼마나 빨리 움직이는지 감지할 수 있었습니다. 이 데이터로 우리는 간단한 다트 게임을 작성했습니다. 상태 머신 Java 코드와 정보를 노출시키는 Applet wrapper로 프로그램의 Ajax 부분을 완료했습니다.

우리는 화면에 다트판을 그리고 JSObject를 통해 JavaScript가 Applet을 폴링하도록 했습니다(이것처럼 간단하게: document.nameofapplet.pollmethod()). 이벤트 드리븐 대신 폴링을 하긴 했지만, 다른 방식의 통신보다 더 안정적이었습니다. JavaScript 코드가 애플릿을 폴링할 때 리모트의 좌표 데이터를 포함한 데이터 구조체를 되돌려 받았습니다. 리모트의 움직임에 따라서 화면상의 다트 이미지를 이동시켰고, 발사하면 다트판을 향해 날아가는 다트의 애니메이션을 시작했습니다.

처음에는, 상당히 단순했습니다. 조준하고 쏘면 항상 그 자리에 정확히 맞습니다. 재밌는 게임은 아니었죠. 우리는 몇가지 간단한 물리법칙을 Ajax 게임에 추가하기로 하고, 던지는 속도(힘이 약하면 떨어집니다)와 경로(얼마나 일직선으로 던지는지)를 추가했습니다. 만약 던질 때 흔들렸다면 다트는 정확하게 날아가진 않습니다.

아래의 동영상이 프로그램의 데모입니다. 설명과 함께 소스코드도 포함하고 있으며 보다 자세한 사항을 볼 수 있습니다.

Wii Darts in Ajax from Dion Almaer on Vimeo.

from Wii Darts: Powering Ajax applications with Wii Controllers on Ajaxian
Posted by 행복한고니 트랙백 0 : 댓글 1
애플 스토어에 새로운 효과가 적용되었습니다. 상품 페이지에 가면, 상품을 확대해서 볼 수 있는 이미지 확대 링크가 있습니다. 클릭하면 더 확대해서 볼 수 있고 마우스를 움직여 구석구석 살펴볼 수 있습니다. 더블 클릭하면 축소해서 보거나, 혹은 축소된 상태라면 확대해서 볼 수 있습니다.

한번 보세요:

동영상 : Apple Store Ajax Effects from Dion Almaer on Vimeo

소스 보기를 해보면, 예전에 포스팅한 적이 있는 Coherent 처럼 보입니다. 애플에서 Cocoa 스타일의 데이터 바인딩을 이용하는게 당연하죠!

from Apple Store: New Effects on Ajaxian
Posted by 행복한고니 트랙백 0 : 댓글 0

이벤트 호환성 표

2008.05.07 00:30 from [IT] Web Tech

PPK 씨가 이벤트 등록 모델(traditional, W3C and Microsoft)과 이벤트 버블링 및 캡쳐를 테스트한 이벤트 호환성 표를 공개했습니다.

다양한 브라우저의 quirks 모드에 대한 많은 데이터가 있습니다.

이벤트 호환성 테이블

이벤트 호환성 테이블


from Events Compatibility Tables on Ajaxian
Posted by 행복한고니 트랙백 0 : 댓글 0
Twistori
TwistoriAmy Hoy씨와 Thomas Fuchs씨가 만든 재밌는 사이트입니다. 기대하셨듯이, 디자인이 이 응용프로그램의 중요한 부분이고,  Prototype / Script.aculo.us 의 조합이 더해졌습니다.

이 사이트는 실시간 twitter 검색 툴인 summize를 이용해 매우 다양한 주제(love, hate, think, believe, feel, wish)를 실시간으로 끌어오고 있습니다.

관련 소식이 있다면서 Dion씨가 자신이 만든 Grease Monkey 용 Twitter 번역 스크립트를 광고하시네요 ^^

from Twistori: Telling a story with Tweets and Script.aculo.us on Ajaxian
Posted by 행복한고니 트랙백 0 : 댓글 0

Cuzillion Test

Cuzillion 테스트


Steve Souders 씨가 Cuzillion이라는 이름의 멋진 작은 도구를 릴리스했습니다. 이 도구는 브라우저에서 성능 최적화를 위한 각기 다른 테스트를 해주고, 여러 사람과 결과를 공유할 수도 있다고 합니다.

위 그림과 같이, 페이지에 포함할 수 있는 다양한 리소스들을 간단하게 추가해서, 브라우저가 어떤 식으로 이러한 리소스를 처리하는지 살펴보고 이를 통해 페이지의 성능을 최적화 할 수 있는 툴입니다(최적화는 물론 알아서 하셔야합니다).

from Cuzillion: Performance best practices tool on Ajaxian
Posted by 행복한고니 트랙백 0 : 댓글 0
Vishal Shah 씨가 TPHP - "The Perfect HomePage" 라는 이름의 코드를 작성했습니다. JavaScript를 포함한 단순한 HTML 페이지인데, 커맨드 라인 형태로 명령을 내릴 수 있도록 되어있습니다.

프로젝트 소개를 보면 인터넷 항해의 첫번째 출발 지점이 되고 싶었다고 밝히고 있습니다.

기존에 있던 프로젝트인 Enso와 비교가 됩니다. Enso도 지금은 Mac과 Linux를 지원하고 있습니다.

from TPHP : Your home page can be a JavaScript command line on Ajaxian
Posted by 행복한고니 트랙백 0 : 댓글 0

The Twubble with Bob Lee

2008.04.22 19:51 from [IT] Web Tech
Twubble 스크린 샷

Twubble 스크린샷


구글에서 일하는 Bob Lee 씨가(안드로이드 Java API 코어의 리더) GWT를 이용한 Twubble 이라는 것을 만들었습니다. 친구의 친구를 찾아주는 서비스...라고 하면 옛날 싸이가 한창이던 시절의 파도타기를 연상시킵니다. ^^; GWT로 만들어졌다고 하는군요. Java하기 전에는 JavaScript를 몇년간 썼다는 분인데(서버/를라이언트), GWT가 편하긴 했는지 "GWT를 쓰지 않고 다른 방식으로 AJAX 프로그램을 만드는 것은 미친 짓"이라고 하는 군요 -_-a

이것이 Bob Lee의 첫번째 응용프로그램이기 때문에, 왜 만들었는지, GWT에 대한 경험, Twitter와 어떻게 연동했는지 등을 물어봤다고 합니다.


from Twubble with Bob Lee on Ajaxian
Posted by 행복한고니 트랙백 0 : 댓글 0
from Mad Mimi: WYSIWYG Email Marketing on Ajaxian

MadMimi 사이트

그림1. madmimi.com 스크린샷


Mad Mimi는 메일을 이쁘게 꾸며서 보낼수 있도록 해줍니다.동영상을 보면 만드는 것은 30초면 된다고 사이트 첫머리에 써놓을 정도로 쉬워보입니다. 디자인 감각이 없는 사람들도 간단히 만들어져있는 모듈을 추가하고 이미지를 Drag & Drop, 텍스트를 작성하면 메일이 됩니다.

사용방법은 설명할 것도 없이 단순해서, 그림2 처럼 자신의 레이아웃을 만들고 내용을 채우면 됩니다.

MadMimi 사용화면 : 메일 편집

그림2. MadMimi로 메일을 작성하는 화면



일단은 100명까지 볼 수 있는 Free Account 로 실행해볼 수 있습니다.

Posted by 행복한고니 트랙백 0 : 댓글 0
from Mosaic Image Builder with Ajax on Ajaxian

사용자 삽입 이미지

에... 같은 팀에서 일하는 직원인데, Ajaxian에 이런걸 알렸네요. ^^; (중얼... Andy Na 라고 그냥 놔둘까... 한국이름 따로 있는데...)

Andy Na 씨(완전 어색..)가 Binary Ajax 기술을 이용한 모자이크 생성기를 만들었습니다. 데모를 실행해 볼 수도 있습니다(조금 느립니다 참고 기다리면 되요). 사용은 아래처럼 합니다:

var demo = new MosaicBuilder("60x45" /* image name prefix */, 23 /* number of image files */);
demo.buildMosaic("60x45.bmp" /* image name */);

이 라이브러리는 Ajax로 바이너리 파일을 다룰 수 있게 해주는 BinFileReader.js 라이브러리를 사용했습니다.
Posted by 행복한고니 트랙백 0 : 댓글 0
from Appcelerator on App Engine on Ajaxian

Google App Engine 을 보고 좋아보여서 App Engine SDK에 Appcelerator 을 추가할 수 있도록 했답니다. 아울러서 Tejus’s appTunes 데모도 App Engine 으로 포팅했으며, 결과물은 http://apptunes.appspot.com에서 볼 수 있습니다.

Posted by 행복한고니 트랙백 0 : 댓글 0
from Dojo-Mini and the Feature Explorer on Ajaxian


사용자 삽입 이미지

위 그래프는 Dojo 배포본을 분석한 것입니다. Peter Higgins씨는 Dojo AIR 통합본을 이용해서 AIR 응용프로그램 작업을 하다가 좀 더 가벼운 Dojo가 있었으면 좋겠다고 생각했습니다.

그래서, 결국 멋지게 커스텀 빌드할 수 있는 스크립트들을 만들었습니다. 이런 기능들이 있습니다:
  • 원하지 않는 불필요 코드 제거
  • 스크립트 압축
  • CSS 인라인 최적화

이런 식으로 실행해볼 수 있죠.
% ./build.sh profile=standard optimize=shrinksafe.keepLines version=1.1.0mini cssOptimize=comments.keepLines cssImportIgnore=../dijit.css action=release

그리고, Dojo Campus 에서 Dojo 기능 탐색기를 만들었습니다. Dojo를 이용했기 때문에 스스로도 Dojo의 Showcase가 됩니다.
사용자 삽입 이미지

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