'07.JavaScript, jQuery, ExtJS.../JavaScript Library' 카테고리의 글 목록

'07.JavaScript, jQuery, ExtJS.../JavaScript Library'에 해당되는 글 7건

2008.11.19 MooTools Mocha UI v0.5
2008.11.19 깜찍한 캘린더 - MooTools Calendar Component
2008.11.19 Bindows 4: 윈도우와 비슷한 Ajax 프레임웍
2008.11.19 StarBox 0.3 별점 라이브러리!
2008.11.19 PBwiki JavaScript Testing
2008.11.19 slickspeed - speed/validity selectors test for frameworks
2008.11.19 Good bye alert(); - JavaScript Library

MooTools Mocha UI v0.5

원본 : http://greghoustondesign.com
데모 : http://greghoustondesign.com/demos/mocha/
다운로드 : Download Mocha UI v0.5
소스 : View mocha.js

Mocha 는 MooTools의 유저 인터페이스 클래스이구요 캔버스 태그와 그래픽적 요소를 가지고 만들어 졌습니다.
어머나 너무 씸플해요!!

짬을 내서 UI 적으로 비주얼한 부분을 만들어 봐야 할까봐요...
백날 보이지 않는 소스 개발해봐야.. 알아주는 사람도 없구 ^^

그것 보다

비쥬얼한 부분이 웹에서도 비쥬얼한 부분이 예전에 비해 Web2.0 패러다임이 나오면서 더욱 강조되고 있는것 같습니다. 또한 크로스 브라우징이 가능한...!!

위의 데모에서 보면 알 수 있듯이 정말 심플하고 원래 Drag & Drop 방식의 UI는 CPU점유율이 높아
저 사양 PC에서는 버벅거리는 현상을 발생하는데요.

Mocha UI의 CPU 점유율 테스트 결과 입니다.

이는 기본적인 이동 시에 CPU 점유율(녹색)입니다. 최대 약 47%까지

리사이즈 시에 CPU 점유율(녹색)입니다. 최대 약 50%까지

최대화 시에 CPU 점유율(녹색)입니다. 최대 약 5.38%까지

별 의미 없는 테스트 일 수도 있겠네요. 컴퓨터 사양이 좋아서 말이죠.. ^^

Posted by 1010

깜찍한 캘린더 - MooTools Calendar Component

Mootools 에서 Calendar 컴포넌트가 나왔네요.

몇일전에도 심플리티 캘린더라이브러리를 소개했었는데요.

이번 라이브러리는 깜찍하네요.

활용도가 높을꺼 같아요.

CSS-styling hooks 과 적절한 element 사용으로 사용자 정의 UI(?) 가능하게 구현하였네요.

API

view plain copy to clipboard print ?

myCal1 = new Calendar(
{ date1: 'd/m/Y' },
{ direction: 1 }
);
myCal2 = new Calendar(
{ date2: 'd/m/Y' },
{ classes: ['dashboard', ... ], direction: 1 }
);
myCal3 = new Calendar(
{ date3: 'd/m/Y' },
{ classes: ['i-heart-ny', ... ], direction: 1 }
);

Posted by 1010

Bindows 4: 윈도우와 비슷한 Ajax 프레임웍

Bindows Ajax Framework
웹에서 윈도우와 같은 기능을 할 수 있는 다양한 Ajax 프레임웍이 발표되었네요..

베타 수준이지만 완성도는 꾀 높습니다. (demo)
그리고 기능들도 참 많이 지원합니다. 윈도우 느낌을

줄 수 있는 Javascript Application 은 많이 보았지만 지금까지중에서는 가장 좋은것 같네요.. 뭐 사용성은 얼마나 될지 모르겠지만요..

Ajax Gauges

사용사 설정을 자유롭게 할 수 있다는 점이 좋네요..

Posted by 1010

StarBox 0.3 별점 라이브러리!

별점 라이브러리입니다.
Script.aculo.us 와 Prototype 1.6.0을 이용한 라이브러리 입니다.

유사하게 만들어 놓은 것이 있기는 한데 이게 훨씬 더 깔끔하네요...
투명 이미지를 통한 백그라운드 색상을 변화시켜서 처리를 했습니다.

상당히 효율적인 생각으로 접근했네요. 대부분의 국내 사이트의 롤오버 효과를 보면 이미지를 새로 로딩하는
경우가 많은데요.

이는 효율적인 웹 사이트 개발에 아주 저해되는 요소입니다.
개발자가 알아야할 부분이기도 하지만 디자이너도 알아야 할 부분입니다.

롤오버 자체는 더이상 이미지를 두개로 만들어 _on.gif 와 _off.gif 방식으로 롤오버는 더 이상
만들지 마시길 바랍니다.

이 라이브러리도 한가지

단점이라면 투명이미지를 활용해서 백그라운드 색상에 다른 경우에는
이미지를 새롭게 만들어 주어야 한다는 것이죠!

별의 색깔은 자유자재로 변곃라 수 있지만 백그라운드의 색상에 맞게 변경할 수는 없답니다.
그것까지 가능하려면 플래시를 조금 이용하거나 base64 이미지를 이용해서 동적인 이미지를 그리면 되겠죠.
하지만 그렇게 처리한다는 것 자체는 너무 무거워지는 라이브러리가 된다는 것!!

사용법

view plain copy to clipboard print ?

<script type='text/javascript' src='js/prototype.js'></script>
<script type='text/javascript' src='js/scriptaculous.js?load=effects'></script>

간단하게 위와 같이 파일을 import 합니다.
Css 파일도 import하구요.

view plain copy to clipboard print ?

<link rel="stylesheet" type="text/css" href="css/starbox.css" />

이렇게 사용하면 됩니다.

view plain copy to clipboard print ?

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 });
<script type='text/javascript' src='js/starbox.js'></script>

다양한 옵션들은 이 처럼 설정하시면 됩니다.

view plain copy to clipboard print ?

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
}
);

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
  }
);

사용자 css 도 가능하겠죠.. ^^

view plain copy to clipboard print ?

.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; }

Posted by 1010

PBwiki JavaScript Testing

PBwiki 팀의 Brian Klug 씨는 자바스크립트(javascript) 라이브러리 제공에 대해 좀더 자세히 배우기 위해서

자바스크립트(javascript) 라이브러리 테스트를 Dojo, jQuery, Prototype, YUI, Prototculous 를 로딩해서 만들었네요.

azki 님이 이런쪽에 관심이 많을것 같은데요?? 그런가요?? ^-^

이 테스트는

압축(packed)과 최소화(minified), gzip 과 gzip 하지 않았을때, 캐시 기타 등등 테스트에

속해있습니다. 흥미로운 결과중에 하나가.. 압축(packed)를 사용하지 말라는 것입니다.. ^^;;

테스트 써머리 페이지 http://jst.pbwiki.com/summary.php

Result Calculus (cached, gzipped, minified)

Posted by 1010

slickspeed - speed/validity selectors test for frameworks

다양한 프레임웍(DOMAssistant 2.6, jQuery 1.2.3, Prototype 1.6.0.2, Mootools 1.2b2, ExtJS Core 2.0.1, YUI 2.4.1)들에 대한 셀렉터(Selector) 속도 및 유효성 테스트입니다.

정확한 테스트와 상호 테스트간의 충돌을 방지하기 위해서 각각의 프레임웍 테스트를 각각의 아이프레임내에서 수행되도록 처리했네요. 최대한 정확한 테스트가 되기위해서 여러모로 신경을 썼다는 군요.

제 PC 에서 수행한 결과입니다.
DOMAssistant 2.6 1087ms
jQuery 1.2.3    1454ms
Prototype 1.6.0.2    2324ms
Mootools 1.2b2 1578ms
ExtJS Core 2.0.1    617ms
YUI

2.4.1 1789ms

테스트 결과가 생각과 많이 다르네요..
Prototype.js가 속도면이나 유효성면에서 제일 떨어지네요. 실망스럽네요. 하지만 다른 부분은 탄탄하게 구성되어있으니 element 찾을때 Selector를 이용해 접근하는 $$ 함수의 사용을 자재해야겠군요.

반면 ExtJS는 그리드 기반의 Framework인데 Selector 부분을 신경을 많이 썼나보군요.
하기야 대부분 css 컨트롤을 통해서 그리드 구성을 할터이니 이부분도 상당히 신경을 썼겠죠..
내부 로직은 잘 모르겠지만 ExtJS가 Selector에서는 다른 Framewokr에 비해서 탁월한 성능을 보이는게 사실이네요.

테스트 사이트 : http://www.domassistant.com/slickspeed/

Posted by 1010

Good bye alert(); - JavaScript Library

심플한 라이브러리를 소개할까 합니다. 최근에 라이브러리 소개를 하지 않았는데 오랜만에 ^^..
소개하는데도 당연히 이유가 있겠죠.

Blackbird 라는 라이브러리 입니다.

일단 사이트에 접속을 하면 큰 글자로 이렇게 적혀있습니다.

Blackbird 에게는 "만나서 반가워" 이라고 말하고 alert() 에게는 "이만 안녕" 이라 말하라고 합니다.
그래서 무엇인고 봤더니 log와 profiler로 활용하기 좋은 rich application을 JavaScript로 구현을 해 놓았군요.
이런 라이브러리야

이미 YUI에도 유사한 모양으로 있고 firebug에서도 강력하게 지원을 해주고 있는데...

깜직한 아이콘은 둘째 치고 개발자 편의를 위해 단축키까지 처리해 놓은 것을 보면 참. 많은 것을 느낍니다.

이미 나온 Blackbird 라이브러리는 누구나가 만들 수 있지만... 처음 나온 Blackbird 라이브러리는 처음 만든 개발자의 스킬과 마인드에서 밖에 나올 수 없는게 아닐까 생각해봅니다.

alert() 에게 "이만 안녕" 이라 말 할만 한가요?

Library : http://www.gscottolson.com/blackbirdjs/
Google : http://blackbirdjs.googlecode.com/

Posted by 1010

개발자(開發者) a developer

'07.JavaScript, jQuery, ExtJS.../JavaScript Library'에 해당되는 글 7건

MooTools Mocha UI v0.5

깜찍한 캘린더 - MooTools Calendar Component

Bindows 4: 윈도우와 비슷한 Ajax 프레임웍

StarBox 0.3 별점 라이브러리!

PBwiki JavaScript Testing

slickspeed - speed/validity selectors test for frameworks

Good bye alert(); - JavaScript Library

카테고리

공지사항

태그목록

최근에 올라온 글

최근에 달린 댓글

최근에 받은 트랙백

글 보관함

달력

링크

티스토리툴바