Noupe에서 '가장 원했던 Ajax 기술들: 50개 이상의 예제와 자습서'라는 글을 올렸습니다. Ajaxian에서도 다루었던 프로젝트들도 많지만, 새로운 것들도 있습니다. 한 자리에 모여있는 Ajax 기술들을 한번 주욱 살펴보시죠(위 링크로 들어가면 이미지도 포함되어 있습니다).

Ajax Forms

ShoutBox

Validate a Username AJAX

Ajax 메신저

Ajax 탭 컨텐트

Ajax 장바구니

Ajax 별점 매기기

Ajax 인라인 에디트

Ajax 프로그레스 바

Ajax 페이징

Ajax 파일 브라우저 & 관리자

Ajax 캘린더

Ajax 사진 관리

Ajax 이미지 갤러리와 슬라이드쇼

Ajax 파일 업로드

Ajax 자동완성

웹에디터

투표

테이블 데이터 관리

기타



from Groups of 50+ Ajax Examples
Posted by 행복한고니 트랙백 2 : 댓글 0

댓글을 달아 주세요

Dojo팀은 그들의 문서를 개선시키고 Dojo 개발자들에게 보다 많은 정보를 주려고 정말 열심히 노력하고 있습니다. DojoCampus.orgSitePen 블로그간에, Dojo 커뮤니티를 위한 알찬 교육자료를 제공하고 있습니다.

보통, Ajaxian 자습서는 정말 좋은 교육 자료를 하나만 다루지만 최근에는 두 개의 멋진 자습서도 다룬 적이 있어 Ajaxian 독자들에게 두 개를 제공하기로 했다고 합니다.

Tutorial 1: Dojo Drag and Drop, Part 1: dojo.dnd
이 시리즈의 첫번째 부분에서, Revin Guillen 씨가 dojo.dnd라고 불리는 Dojo의 드래그앤드롭 API로 여러분을 안내할 것입니다.

Revin씨의 자습서에서 진짜 마음에 드는 부분은 개념을 공고히 해주는 그의 값진 코드 예제들입니다. 예를 들어, 드롭 핸들러를 작성하는 그의 데모 코드는 매우 값지고 간결해서 읽는 이로 하여금 드롭 핸들러 작성방법을 쉽게 이해할 수 있게 합니다.
[code:js]
// calculate simple totals in the wishlist and cart titles
var setupCartTitle = function(){
    var title = "Shopping Cart";
    var cartLength = cart.getAllNodes().length;
    if(cartLength){
        var items = cartLength> 1 ? " items" : " item";
        title += " (" + cartLength + items + ")";
    }
    cartPane.setTitle(title);
};
var setupWishlistTitle = function(){
    var title = "Wishlist";
    var wishlistLength = wishlist.getAllNodes().length;
    if(wishlistLength){
        var items = wishlistLength> 1 ? " items" : " item";
        title += " (" + wishlistLength + items + ")";
    }
    wishlistPane.setTitle(title);
};
dojo.connect(cart, "onDndDrop", setupCartTitle);
dojo.connect(wishlist, "onDndDrop", setupWishlistTitle);

Tutorial 3: A Beginner’s Guide to Dojo Charting, Part 1 of 2

다음은 Doug McMaster씨가 Dojo 차트 기능 사용법을 알려드릴 것입니다.
이 두 개의 가이드에서,우리는 Dojo Charting을 얻고 실행하기가 얼마나 쉬운지 살펴보고, 여러분의 차트를 다른 모양으로 만드는 옵션들에 대해 매우 상세히 설명할 것입니다. 오늘은 Part 1에서, 간단한 예제로 시작하고 차트 모양을 정의하는 모든 옵션에 대해 알아보겠습니다. Part 2에서는 차트의 축과 데이터 셋을 정의하는 옵션에 대해 다루도록 하겠습니다.
Doug씨는 Dojo 차트 API에서 2D 차트를 커스터마이징해서 쉽게 차트를 생성하는 법을 설명하고 있습니다. 예제는 보시는 바와 같이 단순합니다:
[code:xml]
<html>
<head>
<title>Basic Charting</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
<script type="text/javascript" src="dojo/dojo.js" djConfig="isDebug: true"></script>
 
<script type="text/javascript">
 
dojo.require("dojox.charting.Chart2D");
 
makeCharts = function(){
 
        var chart1 = new dojox.charting.Chart2D("simplechart");
        chart1.addPlot("default", {type: "Lines"});
        chart1.addAxis("x");
        chart1.addAxis("y", {vertical: true});
        chart1.addSeries("Series 1", [1, 2, 2, 3, 4, 5, 5, 7]);
        chart1.render();
 
};
 
dojo.addOnLoad(makeCharts);
 
</script>
</head>
<body>
<div id="simplechart" style="width: 250px; height: 150px;"></div>
</body>
</html>
결과는 이렇습니다:
사용자 삽입 이미지
from Ajaxian Featured Tutorial: A Double Dose of Dojo
Posted by 행복한고니 트랙백 0 : 댓글 0

댓글을 달아 주세요

"슬라이딩 패널" 효과는 한 페이지에 카테고리 분류와 대용량 데이터 표시를 하는데 매우 유명해졌습니다. 이 효과를 구현한 결과물 중 가장 주목할만한 것 중 하나는 Panic에 의해 만들어져 그들의 Coda 웹 개발 IDE의 모든 기능과 장점을 다 보여준 것입니다. 이후로 많은 이 효과의 구현물들이 만들어졌고, 대부분은 지금 그들이 매우 유사한 스크롤 기능을 제공하기 때문에 "Coda 슬라이더"로 불려지고 있습니다.

디자이너를 위한 jQuery의 Remy Sharp씨는 jQuery를 이용해서 coda 슬라이더 효과를 만드는 방법에 대한 새로운 스크린캐스트와 자습서를 작성했습니다:
Panic이 정말로 이 효과를 발명한 것은 아닐지라도, Coda의 슬라이딩 패널은 이 효과를 구현한 멋진 결과물입니다. 이 글은 이 효과를 만들기 위해 필요한 부분과 보다 좋게 만드는 법에 대해 짚어보겠습니다.
사용자 삽입 이미지
이 자습서는 페이지의 마크업, 여러 jQuery 플러그인의 사용, 탐색 메뉴 설정, 슬라이더를 위한 이벤트 다루기 등을 거쳐 매우 상세히 주제를 다루고 있습니다. Remy 씨가 작성한 스크린 캐스트는 QuicktimeFlash 형식으로 이용가능합니다.

from Ajaxian Featured Tutorial: Coda Slider Effect on Ajaxian
Posted by 행복한고니 트랙백 0 : 댓글 0

댓글을 달아 주세요

Webmonkey 돌아오다!

2008.05.26 23:26 from [IT] Web Tech
Webmonkey는 웹 디자이너, 제작자, 개발자 등에게 매우 유용한 여러가지 문서 등을 제공하고 있는 사이트입니다. die out 했다고 하는 것을 보니 한번 망했었나보네요. 하지만, Wired.com의 모기업인 Conde가 이 Webmonkey를 다시 부활시켰다고 합니다.

우리는 또한 Webmonkey의 방대한 양의 자습서와 레퍼런스 가이드를 위키에 재발행했습니다. 아주 적은 일부를 제외하고는 사이트의 자습서, 레퍼런스, 코드 라이브러리 섹션의 모든 페이지들은 자유로운 편집이 가능합니다. 우리는 컨텐트를 저장하는데 MediaWiki의 오픈소스 소프트웨어를 사용하고 있습니다.

알아둘만한 새로운 것들이 있습니다:

* 기사에 태그를 달거나 점수를 매길 수 있습니다.

* 각각의 페이지는 답글과 토론을 위한 개별 채널을 가지고 있습니다.

* 등록된 사용자는 프로필 페이지를 가질 수 있으며 이를 통해 자신의 프로젝트나 제작한 사이트에 대해 말할 수 있습니다.

* 아직은 베타 기간입니다. Webmonkey는 앞으로도 계속 꾸준히 진행할 작업입니다. 만약 문제가 있으시다면, FAQ를 확인해보시거나 저희에게 알려주시기 바랍니다. 버그 추적을 위한 위키 페이지를 설정해두었으니, 뭔가 제대로 된 것 같지 않다 싶으면 알려주시면 고맙겠습니다.

from Webmonkey is back! on Ajaxian
Posted by 행복한고니 트랙백 0 : 댓글 0

댓글을 달아 주세요

Eric Miraglia씨가 첫번째 YUI 응용프로그램 만들기라는 좋은 자습서를 포스팅했습니다. 그는 Yahoo!의 검색 웹 서비스를 사용하는 사이트 검색 폼을 만들기 위한 YUI의 자동완성 컨트롤을 가져와 간단한 응용프로그램을 작성하는 과정을 단계별로 보여주었습니다.
사용자 삽입 이미지
이 자습서는 응용프로그램을 만드는 법이나 YUI의 광범위한 문서를 차용하는 법 어느 면에서도 훌륭한 자습서가 될 것입니다. 또한 다음과 같은 몇몇 멋진 부분들도 다루고 있습니다:
  • YUI 구현체를 설정하고 페이지에 YUI를 사용하는 법
  • 혁신적으로 개선된 YUI 위젯을 위한 마크업을 설정하는 법
  • YUI 위젯을 인스턴트화하고 설정하는 법
  • YUI 위젯에 의해 제공되는 "사용자정의 이벤트"를 구독하고 사용하는 법
  • 개발자의 요구를 반영한 맞춤 구현체를 얻기 위한 기본 동작을 재정의하는 법
from Ajaxian Featured Tutorial: Writing Your First YUI Application on Ajaxian

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

댓글을 달아 주세요

Kristopher William Zyp씨가 JavaScript 응용프로그램의 성능 분석에 YSlow를 사용하는 방법이라는 글을 작성하셨습니다.
웹 응용프로그램에서 개선해야할 부분이 무엇인지 알기 위해서는 응용프로그램의 컴포넌트를 제대로 분석해야만 합니다. 이 글에서 Firefox의 Firebug 확장기능과 웹 응용프로그램을 instrument하는 YSlow 애드-온을 사용하는 방법을 살펴보겠습니다. 이 도구들을 설치하고 난 후에, 개발중인 사이트에 접속하시고 Firefox 상태표시줄의 YSlow를 클릭하십시오. 그러면 Firebug의 YSlow 인터페이스가 열립니다. 이제 성능(Performance) 버튼을 클릭하시면, YSlow가 응용프로그램을 분석해 응용프로그램의 네트웍 전송 시간을 항목별로 정리해 그림1과 같이 보고합니다.
언급된 대부분의 개념은 웹 응용프로그램의 성능 개선을 위하 야후가 지정한 10가지 규칙으로부터 왔습니다. 하지만, Kristopher씨는 몇 개의 개념을 예제로 분류하고 데이터를 해석하는 방법을 설명했습니다. FireBug 프로 파일러의 설명은 특히 이제 막 Ajax 개발에 발을 들여 그들의 코드를 최적화하는 방법을 알고자 하는 이들이게 유용합니다:

YSlow 사용 화면

from Ajaxian Featured Tutorial: Using YSlow for Performance Analysis on Ajaxian
Posted by 행복한고니 트랙백 0 : 댓글 0

댓글을 달아 주세요