Rev. 2.73

John-David Dalton씨는 오래 전부터 PrototypeScriptaculous를 압축하여 페이지 로딩속도를 향상시키는 방법을 소개하고 다양한 형태로 압축된 파일들을 구글 그룹스를 통해 배포하고 있습니다. 그리고 지난 20일에는 Prototype 1.6과 Scriptaculous 1.8버전이 추가된 업데이트(protopacked_v2.17)를 공개했습니다. prototype.js(1.6) 파일용량은 121kb입니다. 이 것을 압축하여 46.1kb로 줄이고 다시금 Gzip으로 압축 전송하면 고작 20.6kb입니다. 자바스크립트의 용량을 실시간으로 줄이는 Minify를 사용했을 때 90.5kb로 줄어드는 것에 비하면 상당량 줄어든 것임을 알 수 있습니다.(Minify된 파일을 Gzip으로 압축 전송하면 22.6kb입니다.) 12월 20일짜 Packed버전에는 "Protoculous"라는 이름을 가진 새로운 형태의 압축파일이 있으며, 이 것은 Prototype과 Scriptaculous가 합쳐진 것이라고 합니다.
.

<!-- Good: -->
<script type="text/javascript" src="prototype.js"></script>

<!-- Good: -->
<script type="text/javascript" src="gz.php?src=prototype"></script>

<!-- Good: -->
<script type="text/javascript" src="protoculous.js?load=addon"></script>

<!-- Bad: -->
<script type="text/javascript" src="prototype.gz"></script>

참고로, 자바스크립트 파일을 압축하는 도구로는 Dojo ShrinkSafeDean Edwards씨의 Packer가 사용되었습니다.

Comments

buddy.gif

AjaxIM은 누구나 웹상에 설치해서 사용할 수 있는 Ajax기반 인스턴트 메신저(IM)입니다. PrototypeScriptaculous, Prototype Window, SoundManager2 등의 자바스크립트 라이브러리가 사용되고 있으며, 백-엔드 플랫폼은 PHP로 작성되었습니다. 친구 목록을 그룹으로 관리할 수 있는 목록창과 이모티콘 삽입, 텍스트 스타일을 커스토마이즈하여 대화할 수 있는 대화창으로 구성되어 있습니다. 다국어 설정, 테마 변경, 사용자 차단, 관리자 패널 등의 기능을 제공합니다. 실험을 위해 저도 설치해 보았는데요. im.firejune.com에서 테스트해 볼 수 있으며, 저와 대화 하시려면 'firejune'을 초대하시면 됩니다. 어딘가에 응용할 곳이 있을 듯 한데요.

Comments

starbox.gif

Starbox는 컨텐츠 평가방법으로 자주 사용되고 있는 별점추천의 UI 라이브러리입니다. PrototypeScriptaculous를 라이브러리를 필요로하며, PNG 이미지가 사용되었고, Ajax로 데이터를 송/수신합니다. CSS기반으로 표현되는 깔끔한 디자인과 다양한 포멧을 지원하는 것이 특징입니다.

How to use

  new Starbox(element, average, { stars: 10, buttons: 20, max: 10 });
  new Starbox(element, average, { overlay: 'big.png', ghosting: true });
  new Starbox(element, average, { onRate: yourAjaxSaveFunction, rerate: true });

Options

new Starbox(
  element,                  // the id of your element
  average,                  // average rating to start with
  {
    buttons: 5,             // the number of buttons (choices)
    className : 'default',  // or your own classname
    color: false,          // color of the colorbar
    duration: 0.6,          // duration of the effect across the bar, if used
    effect: { mouseover: false, mouseout: true } // or your own
    hoverClass: 'hover',    // or your own classname
    hoverColor: false,     // color of the colorbar when hovered
    ghostColor: false,     // color of the ghostbar
    ghosting: false,       // shows a ghost bar with the average when true
    identity: false,       // can be used with onRate
    indicator: false,      // or a string to add an indicator div after the starbox
                            // #{average}, #{max} and #{total} can be used
                            // example: '#{average}/#{max} out of #{total} votes'
    inverse: false,        // true, false
    locked: false,         // or true to load an disabled starbox
    max: 5,                 // maximum rating, that of the last star
    onRate: false,         // or function(element, info){}
                            // info = { identity: identity,
                            //          rated: rated,
                            //          average: average,
                            //          max: max,
                            //          total: total
                            //        }
    overlay: 'default.png', // or other png in same folder as starbox.css
    rated: false,          // or the previous rating cast by this user,
                            // this is used by rerate to see if the starbox
                            // needs to be locked
    ratedClass: 'rated',    // or your own
    rerate: false,         // or true to allows adjusting of previous rating
    stars: 5,               // the amount of stars
    total : 0               // the amount of votes cast
  }
);

Styling

  .starbox .stars { background: #cccccc; }
  .starbox .rated .stars { background: #dcdcdc; }
  .starbox .rated .hover .stars { background: #cccccc; }
  .starbox .colorbar { background: #1e90ff; }
  .starbox .hover .colorbar { background: #ffcc1c; }
  .starbox .rated .colorbar { background: #64b2ff; }
  .starbox .rated .hover .colorbar { background: #1e90ff; }
  .starbox .ghost { background: #a1a1a1; }
  .starbox .indicator { clear: both; }

Comments