Rhio.Kim's Blog - drawing Laputa Web -

John-David Dalton 씨는 최근(?) 업데이트된 120k가 넘는 Prototype.js 를 압축한 라이브러리를
구글 그룹스에 올렸네요.

1.4 버젼부터 대부분의 릴리즈 버젼을 압축하였네요.
용량은 상당히 많이 줄었네요..

Prototype’s lowest weighs in at 20.4kb.
Scriptaculous’ lowest weighs in at: 19.7kb.
Protoculous’ lowest weighs in at: 38.4kb.

또한 Script.aculos.us 와 Protoculous

http://groups.google.com/group/prototype-core
사실 오픈된 Compressor 를 적용시키면 에러가 많이 나는데 좋은 작업 해주었네요..

Ajaxian 의 2007 Ajax tool 투표 결과입니다.

올 한해 다양한 Javascript Library 들이 출시 되고 출시되었던 라이브러리들도 기능 강화와 OOP 개발이 가능하도록 라이브러리화 되었습니다.

Prototype 의 강세는 여전하네요..
다만 jQuery가 그 뒤를 바로 뒤쫓아오네요..

Ext JS 가 3위에 등극했다는 것은 상당히 !!

외국에서는 그리드 형식의 Ajax 어플리케이션을 선호하나봅니다.

웹 상에서 구현하기 힘든 그리드 형식의 어플리케이션 개발이 한결 수월해졌기 때문인데요.

아마 웹 기반 CRM 같은 개발 혹은 관공서나 국가 기간같은 디자인적인 부분을 많이 신경 쓰지 않고 기능 위주의 인터페이스에서 아주 효율적인 어플리케이션 개발이 가능하다는 것이죠.

상당히 발전할 수 있어 보입니다.

Script.aculo.us 는 Prototype을 모태로 상당히 많은 유저층을 이루고 있습니다.  둘이 함께 이용한다면...
60% 정도를 장악하고 있네요.  하지만 이제 jQuery와 interfaceElement 까지 나와서 내년 2008년은 어떻게 바뀔지 모르겠네요...

내년은 아무래도 더 많은 javascript library가 발표 되리라 예상됩니다.

또한 UI 라이브러리인 Mootools와 Yahoo 인터페이스에 최적화 되어있는 YUI 아주 많이 사용하고 있네요..
Mootools 는 깔끔한 UI 처리가 가능하고 Effect 별 모듈러를 지원해 필요한 UI 모듈만 따로 모아 js 라이브러리 파일을 생성해서 사용할 수 있습니다.

YUI는 야후의 javascript 아키텍쳐인 douglas crockford 씨의 개발 설계가 숨어있고 Yahoo라는 대형 서비스에서 검증된 실로 Prototype 못지않게 공부해 볼만한 UI 라이브러리라 생각되어집니다.

하지만 단점이라면 Yahoo에 최적화된 라이브러리이고 국내 정서에 자신의 사이트에 Yahoo라는 라이브러리를
써야한다는 자존심 괘난 자존심도 생기게 되구요.!!   다른 이유도 많이 있겠죠...

마지막으로 여전히 자체 개발한 Ajax Tool을 사용한다는 것..
어쩌면 내년에는 더 많아질지 모르겠다는 생각이 입니다.

사실 그랬으면 좋겠습니다.
좀더 많은 소스타입의 다양한 형태의 라이브러리가 많이 출시 되었으면 좋겠습니다.

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

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

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

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

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

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

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

사용법 <script type='text/javascript' src='js/prototype.js'></script> <script type='text/javascript' src='js/scriptaculous.js?load=effects'></script> 간단하게 위와 같이 파일을 import 합니다.
Css 파일도 import하구요. <link rel="stylesheet" type="text/css" href="css/starbox.css" /> 이렇게 사용하면 됩니다. 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> 다양한 옵션들은 이 처럼 설정하시면 됩니다. 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 도 가능하겠죠.. ^^ .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; }

사이트 : http://nasa.gov/

내년 나사 50주년을 기념하여 지난 밤에 NASA 5.0 으로 런칭을 했네요.
UI 부분은 모두 Script.aculo.us 와 Prototype 으로 모두 만들어 졌다고 합니다. 점점 Web2.0 방식의
사이트들이 많이 나오고 정부 웹 사이트에까지 Javascript 프레임웍이 사용되고 있네요.

날로 발전하고 Javascript에 대한 관심도도 그 만큼 성장하니 기쁩니다.

새롭게 추가된 기능을 보면

• Transitions: Lots of animations in drop downs and trees
• Accordion: Rollover news items
• New topic based navigation
• Calendar component
• Tag cloud (now that IS Web 2.0
• Bookmarking: My NASA and support for Digg, Del.icio.us, and more
• Comments and polls throughout
• Polls
• Image gallery

Script.aculo.us 개발자인 Thomas Fuchs 씨는

다시 컨설팅 업무로 돌아가면서 새로운 자신의 사이트를 만들었습니다.

만들어진 사이트에는 Script.aculo.us 2.0의 일부 기능(PhotoZoom)을 사용하여 Script.aculo.us의 달라질 능력을 내비췄습니다.







Effect.PhotoZoom = Class.create(Effect.Element, { setup: function() { var currentHeight = $('text').getHeight(); var newHTML = this.element.next('div.text').innerHTML; var left = Thomas.photos.indexOf(this.element)*120 + 90; var color = $w('ffa ffa ffa ffa ffa')[Thomas.photos.indexOf(this.element)]; $('text_contents').show().update(newHTML).setStyle({height:'auto'}); var newHeight = $('text_contents').getHeight()+22; Thomas.clearTextBox(); $('text').setStyle({height:currentHeight+'px'}); $('text').morph('left:'+left+'px;height:'+newHeight+'px;background-color:#'+color,{ duration: 1.2, transition: 'linear', propertyTransitions: { left: 'bouncePast', height: 'bouncePast', backgroundColor: 'sinusoidal' }, after: function(){ $('text_contents').show(); Element.update.defer('text_contents', newHTML); } }); this.animate('zoom', this.element, { propertyTransitions: this.options.propertyTransitions || { } }); } });

이번주 중에 진행중인 개인 프로젝트 입니다.

간단한 고전 퍼즐이구요.

0.1.00 버전에서는 순수히 뼈대와 ajax 게임자체가 동적으로 움직이다보니 메모리 혹은 CPU 점유일이 실행간 급격히 오르락 내리락 하는 경우가 많은데요.
그런 부분을 해소시키고 부드럽게 진행할 수 있고 기본적인 퍼즐의 기본 기능에 구현하는데 목적을 둡니다.

일단 기본 개발 룰은 퍼즐 게임을 위한 기본 판넬은 DIV 구조로 미리 작성된 상태에서 OOP, MVC 개념을 추가해서 Ajax 개발하도록 하겠습니다.

내부적으로 Prototype과 script.aculo.us 를 사용하고 있지만 왠만하면 사용하지 않는 방향으로 점점 나아갈 것입니다.

2.0 버젼에서는 script.aculo.us를 통해 비쥬얼한 부분을 추가와 DB 연동을 통해 rank 부분을 지원할 예정입니다.

--------------------------------------------------------------------------------------------------

전제
1. 원하는 레벨을 선택할 수 있습니다.
    [초급, 중급, 고급, 초난감]
2. 원하는 Row, Cell 개수를 입력받아 할 수 있습니다.
3. 플레이 타임을 표시합니다.
4. 숫자모드, 알파벳 모드(버젼2), 가나다모드(버젼2) 를 지원합니다.
5. 클릭을 하면 자동으로 비어있는 Cell로 이동합니다.
6. 게임시작을 누르면 랜덤으로 퍼즐이 섞입니다.
7. 모두 맞추게 되면 성공 메세지를 뿌립니다.

8. 게임번호를 선택할 수 있습니다.(차후 이스트에그 지원)
9. 화면 리프래쉬, 리로드, game reset을 누를 경우 랜던함 게임이 DOM으로 생성

기본 구현 구성

퍼즐은 테이블로 생성해 TD안에 숫자를 입력하며 해당 TD를 클릭할 경우 비어있는 TD와 교체를 합니다.

import  script.aculo.us
          prototype 1.5.1