Ajaxian에 모처럼 마음에 드는 프로그램이 나타났습니다. TinyMCE로 유명한 Moxiecode에서 Plupload라는 범용 업로드 컴포넌트를 릴리스 했습니다. 이 컴포넌트는 각종 플러그인을 활용해서 가능한 풍부한 사용자 경험을 만들어냅니다. HTML5, Google Gears, Silverlight, Flash, Yahoo! Browser Plus 등을 사용해서 드래그 & 드롭(탐색기에서 웹 브라우저로 바로 드래그하여 파일 업로드 가능), 업로드 프로그레스 바, 클라이언트 측 이미지 리사이즈가 가능합니다.
사용하는 백엔드에 따라서 기능이 조금 다를 수 있습니다. 모든 기능을 지원하는 백엔드는 Google Gears입니다.

CoreAPI는 다음과 같이 사용할 수 있습니다.
[code:js]
var uploader = new plupload.Uploader({         runtimes : 'gears,html5,flash,silverlight,browserplus',         browse_button : 'pickfiles',         max_file_size : '10mb',         resize : {width : 320, height : 240, quality : 90},         url : 'upload.php',         flash_swf_url : '/plupload/js/plupload.flash.swf',         silverlight_xap_url : '/plupload/js/plupload.silverlight.xap',         filters : [                 {title : "Image files", extensions : "jpg,gif,png"},                 {title : "Zip files", extensions : "zip"}         ] });
jQuery의 Queue Widget을 사용했다고 합니다.

from Plupload: A rich upload exprerience on pluggable backends
Posted by 행복한고니 트랙백 0 : 댓글 0

지난주에는 멋진 Chroma Hash를 소개해드렸는데, 이번에 또 다른 jQuery 패스워드 플러그인을 발견했습니다.
iPhone 스타일의 패스워드 플러그인을 입력창에 사용하면 iPhone처럼 입력한 값을 점 모양의 문자로 감추어버립니다.
아직 글자를 중간에 삽입할 수 없는 등의 몇 가지 한계가 있습니다.

from iPhone-like password field; quickshow character
Posted by 행복한고니 트랙백 0 : 댓글 0
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
XHR은 1997년부터 있었습니다. 이제는 CSSHttpRequest라는 것이 나타났습니다. CSS 핵을 이용해서 크로스 도메인 Ajax 요청을 실행하는 것입니다.
JavaScript와 비슷하게, CSS도 XMLHttpRequest에 영향을 주는 동일출처정책(same-origin policy)의 대상이 아니기 때문에 이 동작이 가능합니다. JSONP와 마찬가지로 CSSHttpRequest도 GET 요청을 만들어야 하는 한계가 있습니다. JSONP와는 다르게, 신뢰할 수 없는 써드파티 자바스크립트는 호출된 페이지 컨텍스트에서 실행할 수 없습니다.

요청은 CSSHttpRequest.get(url, callback) 함수를 이용해서 이루어집니다:
[code:js]
CSSHttpRequest.get(
    "http://www.nb.io/hacks/csshttprequest/hello-world/",
    function(response) { alert(response); }
);
데이터는 서버에서 URI 인코딩된 2KB 조각들로 나누어지고, 수정된 about: URI 스키마를 덧붙여 CSS의 @import 규칙에 직렬화되어 입력됩니다. 응답은 디코딩되어 콜백함수에 문자열로서 전달됩니다:
[code:css]
@import url(about:chr:Hello%20World!);
이것이 몇 달 사이에 나타난 두번째 @import 핵이군요.

from CSSHttpRequest: cross-domain Ajax using CSS for transport.
TAG ajax, CSS
Posted by 행복한고니 트랙백 0 : 댓글 0

IE 8 Beta 2 Ajax 기능

2008.10.08 08:54 from [IT] Web Tech
Sunava Dutta씨가 XDR, XDM/postMessage, DOM 스토리지, 오프라인 검출 등의 Ajax 개발자를 위한 IE 8 beta 2의 확장 기능에 대해서 상세히 기술하셨습니다.

XDomainRequest(XDR)
이것은 클라이언트 사이드에서 크로스 도메인 호출을 보안성있고 쉽게 호출할 수 있도록 작성된 객체입니다. 의도하지 않은 크로스 도메인 접근을 줄이기 위해 이 객체는 클라이언트 스크립트와 서버로부터 크로스 도메인 호출에 대한 명시적인 허용를 요구합니다. 아울러, 사이트가 매시업을 위해  서드 파티의 스크립트를 직접 병합하는 위험한 방법에 대한 필요성을 감소시킵니다. 이런 방법은 서드파티에서 전체 DOM에 접근할 수 있기에 위험합니다. 이 모든 것들은 개선된 클라이언트 사이드 성능과 낮아진 서버 유지 비용으로 인해 프록시를 위한 서버군이 필요하지 않은 덕분에 가능했습니다.

Beta1 기간 동안에는 크로스 사이트 XMLHttpRequest와 Acesss Control 프레임웍을 사용하는 서드 파티 데이터의 크로스 도메인 접근과 관련한 많은 보안 정책들이 있었습니다. Beta1 때부터, 우리는 서버 사이드의 경험과 W3C의 Access Control 프레임웍의 보안을 개선하기 위해 다른 브라우저와 W3C 대면 회의의 참가자들과 함께 일할 기회를 가지게 되었습니다. 그 결과, 우리는 XDR을 클라이언트 상의 단순한 공용 서드파티 데이터 익명 요청에 대해 Access Control 영역의 문법과 지시문을 가진 명시적인 규약을 가지도록 업데이트 할 수 있었습니다(Access Control Process Model의 섹션 5.1.3).

Beta1의 XDR 업데이트로 인해 IE 8은 요청자의 직렬화된 출처값을 Origin 헤더로 전송하는 것으로 것으로 도메인의 서버로부터 데이터를 요청할 수 있게 되었습니다. IE8 Beta2 는 Beta1의 XDomainRequestAllowed:1 대신 Access-Control-Allow-Origin: *을 서버 응답으로 돌려받게 될 것입니다. 그 외 사항으로는 open 메소드에서의 상대 경로 지원과 HTTP와 HTTPS 로의 접근 제한이 있습니다.

Cross-document Messaging(XDM)
크로스 문서 메시징제가 이전에 블로깅했던 또 다른 강력한 크로스 도메인 기능입니다. 이 기능은 원격 웹 서비스에 백엔드 요청을 만드는 것보다는 사이트가 IFrame 기반으로 된 써드파티 "가젯"이나 컴포넌트가 동일출처정책(same site origin policy)을 불안전하게 위배하지 않고도 부모 문서와 직접 통신할 수 있도록 하는 것에 목적이 있습니다. 이것은 개발자들이 브라우저간에 서로 다른 방법에 의존하고 원하지 않는 부작용에 괴로워하지 않아도 되도록 함으로써 성능을 개선하고 신뢰성을 높이는 등의 장점이 있습니다. 이 기술은 또한 여러분의 페이지에서 서드 파티 스크립트를 포함할 필요가 없도록 만들어 민감한 데이터(소셜 네트웍 프로필 정보)가 여러분의 동의없이 서드 파티로 새나가는 것과 같은 잠재적인 정보 유출 취약성을 감소시킵니다.

Beta2 업데이트에서 onmessage 핸들러는 업데이트된 HTML 5.0 초안에 잘 맞도록 document 객체에서 window 객체로 옮겨졌습니다.
window.attachEvent("onmessage", HandleMessage);
또한 "scheme" + "호스트" + "기본이 아닌 포트" 의 직렬화된 형태인 e.URIe.origin으로 바꾸었습니다. 이는 수신측에서 허용 여부를 결정하는데 필요하지도 않는 민감할 수도 있는 정보를 출처 사이트로부터 URI를 통해  나르는 것보다 더 안전합니다.
if (e.origin == 'http://www.contoso.com')
{
    // 메시지 텍스트 처리
}
끝으로, HTML 5.0 초안에서 postMessage 메소드에서 targetOrigin 파라미터가 이전과 달리 필수 파라미터로 변경되었습니다. 이는 출처 <URL>이나 와일드카드 <*>를 지정함으로써 메시지의 목적지를 명시적으로 표시하도록 하는 것으로 개발자들이 에러를 덜 내도록 했습니다.
frameOther.postMessage("This is a message", "http://example.com");

DOM Storage
현재, 웹 페이지는 로컬 머신에 데이터를 저장하기 위해 document.cookie 속성을 사용하고 있습니다. 쿠키는 사이트가 도메인당 50개의 키/값의 쌍을 저장하지 못한다는 용량의 한계가 있습니다. 게다가, 쿠키 프로그래밍 모델은 귀찮고 데이터를 얻기 위해 쿠키 문자열을 파싱해야 합니다. 쿠키가 요청 헤더에 최대 4KB의 데이터를 함께 보내 서버로 클라이언트 상의 변화나 변동사항을 알려주는 것에 유용하긴 하지만, IE8은 클라이언트 상의 데이터를 영구적으로 유지할 때와 다른 탭에서 세션을 유지할 때를 대비한 보다 나은 대안을 제시합니다. W3C의 HTML 5 DOM 스토리지 객체가 그것으로, 키/값 쌍의 문자열 데이터를 위한 훨씬 간단한 전역과 세션 저장 모델을제공합니다. 사이트는 탭 또는 사이트가 살아있는 동안 혹은 사용자가 데이터를 제거할 때까지 데이터를 저장할 수 있습니다.

Beta2 업데이트에서는 영구 globalStorage 속성의 이름이 localStorage로 바뀌고, localStorage를 사용할 때 도메인 이름을 지정하지 않아도 되도록 했습니다.
// 키-값 쌍 저장.
localStorage.setItem("이름", "Sunava");
또한 저장소가 변경되었을 때 반환되는 업데이트된 onstorage HTML 5.0 이벤트를 개선했습니다. 지금은 로컬 저장소가 변경되면 URI를 반환하며 따라서 페이지의 핸들러는 저장 공간에 누가 마지막 트랜잭션을 보냈는지를 알 수 있고, 출처 창에 원본을 제공할 수도 있습니다. 더 좋은 소식은, HTML 5.0 Working Group이 우리가 Beta 1에 포함시켰던 clear 메소드를 초안에 포함시켰다는 것입니다. 이는 스크립트가 모든 키에 대해 반복하지 않고도 저장소의 접근할 수 있는 모든 데이터를 삭제할 수 있도록 합니다.

Connectivity Event
navigator.onLine 속성과 online/offline 이벤트는 현재 Windows XP/Vista에서 동작하고 있습니다. Windows XP의 접속 알림이 Windows Vista만큼 진보되어있지 않아서 이를 가능하게 하는 것이 쉬운 일은 아니었습니다. 즉, 이것은 우리가 OS 차이에 대해 걱정할 필요가 없다고 믿는 개발자들에게 많은 이점이 될 것입니다. 접속 이벤트의 값은 네트웍이 불가능한 경우에 데이터를 캐시하도록 localstorage와 연동해 사용될 때 매력적입니다.

XMLHttpRequest
IE8에서의 XDomainRequest 객체 도입을 했다고 해서 같은 도메인 상의 통신에 계속 사용될 객체인 XMLHttpRequest의 개선과 조정에 대한 우리의 관심이 사라진 것은 아닙니다. Beta1 이전의 에너지는 신뢰성을 위해 몇몇 버그를 수정하고, 초안 명세와 우리의 규약을 개선하고 명확하게 하기 위해 Web Apps Working Group과 작업하는 것에 집중되어 있었습니다. Beta1에서 개발자들의 편의를 위해 도입된 timeout 메소드는 현재 XMLHttpRequest 스펙에 적용되어 있습니다.
// Sets timeout after open to two seconds.
xhr.timeout = 2000;

ToStaticHTML, to JSON, and fromJSON
XDomainRequet나 Cross-document Messaging을 이용해 서드 파티로부터 받은 문자열로 무엇을 하시겠습니까? 오늘날 스크립트 인젝션과 크로스 사이트 스크립팅(Cross-site Scripting : XSS) 공격이 증가함에 따라 이들을 안전한 파서를 통해서 받는 방법이 환영받고 있습니다. Erix Lawrence씨가 IE 8 보안을 위한 Comprehensive Protection이라는 글에서 기술했듯이, toStaticHTML은 실행가능할 수 있는 컨텐트를 제거함으로써 문자열을 무해하게 만드는 강력한 방법을 제공합니다.
// Calling:
window.toStaticHTML("This is some <b>HTML</b> with embedded script following... <script>alert('bang!');</script>!");

// will return:
This is some <b>HTML</b> with embedded script following...!
추가로, IE8 Beta2의 toJSON과 fromJSON 메소드는 네이티브가 아닌 JavaScript 시리얼라이저와 디시리얼라이저에 비해 개선된 성능을 제공합니다. 구현체는 Douglas Crockford씨의 json2.js API를 사용한 네이티브 JSON 핸들링에 대한 ECMAScript 3.1 제안에 기반하고 있습니다. 네이티브라는 성능상의 이점외에도 JSON 파서는 eval() 메소드의 안전한 대안을 제공합니다. 이 메소드는 JSON 객체를 되살리는 일반적이고도 위험한 방법이어서, 임의의 스크립트 함수가 실행되도록 할 수 있었습니다.
From IE 8 beta 2 Ajax features

'[IT] Web Tech' 카테고리의 다른 글

alert()에게 작별을  (3) 2008.10.17
웹 에디터 비교  (4) 2008.10.14
iPhone in Action 일부 챕터 다운로드  (0) 2008.10.10
Pyjamas: Python을 위한 GWT  (0) 2008.10.08
IE 8 Beta 2 Ajax 기능  (0) 2008.10.08
JavaScript로 만든 팩맨  (0) 2008.09.20
iPhone에서도 SVG를 사용할 수 있습니다  (0) 2008.09.19
리눅스에서도 AIR를!!  (0) 2008.09.18
iPhone Web App: Spin the Bottle  (0) 2008.09.18
Posted by 행복한고니 트랙백 0 : 댓글 0
Kyle Simpson씨가 flensed라 불리는 오픈소스 프로젝트들을 발표하며, 그 중 첫번째로 flXHR을 발표했습니다. "flXHR은 javascript+flash를 이용해 웹 브라우저의 네이티브 XHR(Ajax)을 완전히 대체할 수 있도록 하는 프로젝트입니다. 하지만 flXHR은 작접적인 크로스 도메인 통신을 위해 Flash Player의 보안 모델을 사용합니다. 또한 다수의 매우 유용한 확장기능들을 가지고 있습니다"

http://flxhr.flensed.com/code/tests/flxhr-4.html

데모는 flXHR의 API 호환성과 JavaScript 프레임웍들(Dojo, Prototype, YUI, ExtJS 등)에서 네이티브 XHR과 flXHR을 바꾸는 방법을 기술하고 있습니다. 이전에 이런 비슷한 것들이 없었느냐 하면 그건 아닙니다. 이전에도 SWFHttpRequest, FlashXMLHttpRequest, Fjax, F4A 등의 유사한 프레임웍들이 있습니다. Kyle씨의 사이트에 이들에 대한 차이점을 상세히 기술해놓았다고 하니 한번 보시는 것도 좋을 것 같습니다.

from flXHR: Flash based XHR from flensed
Posted by 행복한고니 트랙백 0 : 댓글 0
Ajax Experience의 등록을 개시했습니다! 올해는 보스톤에서 9월 29일에서 10월 1일까지 열립니다.

관심있는 분들은 아래 원문 링크를 참고하시기 바랍니다.

from Ajax Experience 2008 Registration Open
Posted by 행복한고니 트랙백 0 : 댓글 0
Ivan Bozhanov씨가 최근에 jQuery기반 트리 컴포넌트를 작성하셨습니다. 아시다시피 트리 컴포넌트는 꽤 많습니다. YUI!에도 멋지고 안정적인 트리 컨트롤이 있고, Dojo에도 있고, 공식적인 jQuery UI에는 없지만 트리 플러그인이 몇 개 있습니다. 예상하신대로, Ext JS에도 멋진 트리 컴포넌트가 있습니다.

jsTree의 몇 가지 부분을 살펴보겠습니다. 우선, 많은 트리에서 부족했던 몇 가지 기본 기능이 있습니다:
jstree는 사용자가 노드를 생성, 이름 변경, 재정렬, 이동, 삭제할 수 있습니다.
또한 다른 잘된 대부분의 수정가능한 트리 컴포넌트와 같이 풍부한 이벤트 API를 가지고 있습니다. 하지만 조금 이벤트 타입이 조금 더 세분화 되어있습니다:
여러분은 대부분의 액션에 콜백을 붙일 수 있습니다:
- onbeforechange
- onchange
- onrename
- onmove
- oncreate
- ondelete
- onopen
- onclose
그리고 노드의 "type"에 기반해 사용자가 할 수 있는 것과 그렇지 않은 것을 정하는 규칙을 줄 수도 있습니다. 즉, 개발자가 정의할 수 있는 노드의 유형에 기반해 노드의 이동, 선택, 삭제, 포커싱의 규칙을 정할 수 있습니다.

지역화에 대한 기능이 이미 내장되어있기 때문에, 트리를 생성할 때 지원할 서로 다른 언어에 대해 지정해줄 수 있습니다:
[code:js]
tree1.init($("#nested"), {
  data : "nested.xml",
  xsl : "nested.xsl",
  languages :  [ "en", "bg" ],
  // other stuff omitted
});
그리고는 XML 파일에 다음과 같이 표기하면 됩니다.
[code:xml]
<name lang="bg" icon="images/f.png">Начало</name>
<name lang="en" icon="images/f.png">Home</name>
XML 뿐만 아니라, JSON이나 인라인 HTML도 지원하며 XML 데이터 소스에 대한 XSL 변환까지 내장 기능으로 지원하고 있습니다.

안타깝게도, jsTree는 시각적인 표현면에서는 다른 트리들보다 부족해 보입니다. 하지만, jQuery 상에서 구현된 만큼 이에 대한 지원을 쉽게 추가할 수 있으리라고 예상합니다. 문서도 잘되어 있지만 아직 완전한 것은 아닌 것 같습니다.

from jsTree: jQuery-based JavaScript tree component
Posted by 행복한고니 트랙백 0 : 댓글 2
구글에서 몇가지 소식이 있습니다. 첫째는 Gears 0.3이 릴리스 되었다는 것입니다. Firefox3 를 지원합니다! Firefox 3 정식버전(6월 17일 예정)에 맞춰서 출시하려고 했다는군요. Gears와 같은 플러그인은 브라우저 내부에 깊이 다가갈 수 있으므로 베타판의 API 변경덕분에 날짜를 지키는 것이 큰 도전이었다고 합니다. 결국은 훌륭하게 수행해냈습니다.

Gears 0.3은 Firefox 3 지원 이외에도, 다음을 포함하고 있습니다:
그리고, Google I/O 세션들의 모든 동영상의 공개되었습니다.

Ajax와 Gears와 관련된 컨텐트들을 정리해두었습니다:

Gears

GWT

General Ajax



from Gears 0.3 Released, and Google I/O videos on Ajax related content available
Posted by 행복한고니 트랙백 0 : 댓글 0
Validanguage은 HTML(속성보다는 주석으로)과 JSON API를 통해 설정할 수 있는 간단하고 새로운 검증 프레임웍입니다.

예를 들어, 아래 코드는 input 박스에 숫자, 달러, 점이 아닌 것을 입력하려 하면 빨갛게 반짝일 것입니다.
[code:xml]
<!-- <validanguage target="example" mode="allow" expression="numeric$." /> -->
혹은 JSON을 통해 설정할 수도 있습니다.
[code:js]
validanguage.el.example = {
  characters: {
     mode: 'allow',
     expression: 'numeric$.',
     onsubmit: true,
     errorMsg: 'You may only enter numbers, periods,
                or the dollar sign.'
  },
  required: true,
  errorMsg: 'Please enter a valid monetary amount',
  onsuccess: 'someObject.successHandler',
  onerror: [errorHandler1, errorHandler2]
}
기능
  • 100% 겸손한 JavaScript, 전역 validanguage 객체 아래에 네임스페이스화 되어있음. 인라인 이벤트 핸들러 사용하지 않음(심지어 폼 전송을 중단하지도 않음)
  • 외부 라이브러리 필요하지 않음(옵션으로 Prototype 통합은 가능)
  • 검증 설정을 관리하기 위해 상속 사용. 전역 설정, 폼별, 엘리먼트별 설정 가능.
  • 두 개의 선택적인 API 제공:
    • HTMT API로 주석 태그내부에 위치. 쉽고 간편하게 사용하기 위한 선택.
    • JSON 기반 API. 고급 설정

from Validanguage 0.9: More form validation
Posted by 행복한고니 트랙백 0 : 댓글 0

Aptana Cloud 엿보기

2008.06.21 10:35 from [IT] Web Tech
사용자 삽입 이미지
Dougal Matthews씨가 Apatana Cloud 실행에 대해 쓰셨습니다. 여러 기능과 스크린 샷이 첨부되어 있다고 합니다.

from Aptana Cloud: A sneak peak
Posted by 행복한고니 트랙백 0 : 댓글 0
Bear Bibeault씨와 Yehuda Katz씨가 작성하신 jQuery Selectors 레퍼런스 카드가 릴리스되어 PDF 형식으로 다운로드 받을 수 있게 되었습니다(DZone 계정 필요!).

jQuery 셀렉터는 jQuery 라이브러리의 가장 중요한 면 중 하나입니다. 이 셀렉터들은 친숙한 CSS 문법을 사용해 빠르고 확실하게 페이지 내의 어떠한 엘리먼트들이라도 쉽게 접근할 수 있도록 하며 이들을 jQuery 라이브러리 메소드에서 사용할 수 있도록 합니다. jQuery 셀렉터를 이해하는 것은 jQuery 라이브러리를 가장 효율적으로 사용하기위한 열쇠입니다.

레퍼런스 카드는 jQuery 셀렉터, 기본 CSS 셀렉터, 커스텀 jQuery 셀렉터 등과 같은 jQuery 주제들에 대해서 다루고 있습니다. 또한 매우 유용한 "Hot Tips"도 포함하고 있습니다. 예를 들면, 쿼리 조합을 작성하는 법이나 초보자들이 실수하는 부분에 대한 내용입니다.
________________
해당 사이트에 갔더니 jQuery 뿐만 아니라 다른 개발툴에 대한 레퍼런스 카드도 많은 것 같습니다. Ajax 시작하기, 디자인 패턴, Eclipse 시작하기 등이 있습니다. 물론, 다 Free Download 입니다. 계정 하나 만들어두는 것도 나쁘지 않을 것 같습니다. ^^

from jQuery Selectors Refcard Now Availiable
Posted by 행복한고니 트랙백 0 : 댓글 0
Google에서 또 일을 저지른 것 같습니다(물론, 좋은 의미입니다). 간단히 본문을 요약하자면, Prototype, jQuery등의 주요 Ajax 프레임웍을 자기네들이 호스팅해서 전세계 개발자들에게 제공하겠다는 것입니다.

버전관리, 버그패치, 트래픽 다 감당하겠다는 거죠. 심지어 오래된 버전까지 그냥 끌어다 쓸 수 있으니 속도만 보장된다면(본문에는 세계 전역에 분포된 CDN을 사용하므로 빠를 것이라고는 합니다만..), 정말 간편하게 사용할 수 있을 것 같습니다. 아직 관련 소식을 다른 곳에선 들은 적이 없네요. 제가 보기엔 꽤 큰 사건임에 분명해보이는데요. :)
사용자 삽입 이미지
________________
Google에서 Prototype, Script.aculo.us, jQuery, Dojo, MooTools와 같은 유명 프레임웍들을 사용하는 Ajax 응용프로그램을 만들 수 있는 Google AJAX Libraries API발표했습니다.

응용프로그램을 작성할 때마다 매번 파일을 다운로드 받아서 설치하기를 반복하실텐데요, 글을 쓴 Dion씨는 무려 자신의 응용프로그램에서 33개의 prototype.js 복사본을 사용하고 있다고 합니다. 사이트가 달라질 때마다 매번 다운로드 받게 되는거죠. 얼마나 큰 낭비입니까!

또한, Steve Souder씨는 성능면에서 우리가 이러한 라이브러리를 제공함에 있어 얼마나 잘못하고 있는지 지적한 바 있습니다. 개발자로서 우리는 캐싱을 정확하게 해서 파일이 필요할 때만 다운로드되도록 해야합니다. 또한 gzip 압축이 가능한 브라우저라면 압축 전송을 해야합니다. 아, 조금이라도 용량을 줄이기 위해 최소화 버전도 사용해야 할 것입니다. 파일의 버전 관리도 제대로 해야죠. 아니면, 수없이 많은, 때론 파일 끝에 조금씩 입맛에 맞게 수정을 가한, 버전이 없는 jquery.js 파일을 발견하고, 캐시는 전혀 제대로 설정되어있지 않아 아무런 이유도 없이 파일을 항상 전송할 겁니다.

Dion씨는 Google에 입사해서 이런 것들을 도울 수 있을 것 같다고 생각했다고 합니다. 우리가 이런 파일들을 호스팅하면 어떨까? 모든 사람이 바로 이런 혜택을 받게 되었겠죠:
  • 제대로 된 캐싱, Google이 한번만 작업하면 개발자들이 할 일은 아무것도 없음
  • Gzip 압축
  • 최소화 버전 제공
  • Google에 의해 호스팅되는 파일들은 세계 전역에 걸쳐있는 분산 CDN에서 제공되므로, 파일은 사용자들에게 "근접"해있음.
  • 서버가 빠름
  • 똑같은 URL을 사용하므로, 응용프로그램의 상당 부분이 Google의 인프라를 사용한다면, 누군가 여러분의 응용프로그램에 접근할 때 그 파일은 이미 로딩되어있을 것!
  • 여러분이 보내고 받는 헤더와 관련된 미묘한 성능(그리고 보안) 문제 해결. 특정 도메인을 사용하고 있으므로(주의: google.com은 아닙니다!), 쿠키나 다른 쓸데없는 헤더가 전송되지 않으므로 귀중한 트래픽 절약
이게 Google이 AJAX Libraries API를 출시한 이유입니다. 몇 개의 유명 오픈소스 프레임웍 진영과 대화한 결과 그들은 모두 이 아이디어를 흥미로워했습니다. 그래서 그들과 이 작업을 시작했으며, 이제 여러분은 Google의 서버에서 그들의 훌륭한 작업물에 접근할 수 있습니다.

세부사항

라이브러리에는 두 가지 방법으로 접근할 수 있고, 둘 다 라이브러리를 호스팅하는 고통 - 정확하게는 캐시 헤더를 설정하고 최근 버그 패치들을 적용하도록 꾸준히 업데이트 하는 일 등 - 을 덜어주는 방법입니다.

첫번째 방법은 간단하게 표준 <script src="..."> 태그를 이용해서 스크립트에 접근하는 방법입니다.

예를 들면, Prototype 1.6.0.2 버전을 읽어들이려면 HTML에 아래와 같은 코드를 입력하면 됩니다.
[code:js]
<script src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js"></script>
두번째 방법은 Google AJAX API 로더의 google.load() 메소드를 이용하는 것입니다.

아래는 간단한 검색 매시업을 위해 jQuery를 읽고 사용하는데에 해당 기술을 사용한 예제입니다.
[code:js]
<script src="http://www.google.com/jsapi"></script>
<script>
  // Load jQuery
  google.load("jquery", "1");
 
  // on page load complete, fire off a jQuery json-p query
  // against Google web search
  google.setOnLoadCallback(function() {
    $.getJSON("http://ajax.googleapis.com/ajax/services/search/web?q=google&;v=1.0&;callback=?",
 
      // on search completion, process the results
      function (data) {
        if (data.responseDate.results &&
            data.responseDate.results.length>0) {
          renderResults(data.responseDate.results);
        }
      });
    });
</script>
아마 사용한 버전이 그냥 "1"라는 것을 알아차리셨을 것입니다. 이는 스마트 버저닝 기능으로, 여러분의 응용프로그램에서 필요한 앞자리만 지정할 수 있도록 하고 있습니다. 버전 필드를 입력하지 않음으로써, 필드에 와일드 카드를 사용한 것입니다. 간단히, 이런 버전들을 생각해보세요: 1.9.1, 1.8.4, 1.9.2

"1.8.2"라는 버전을 지정하면 정확한 버전이 선택됩니다. 이는 사용할 버전 전체를 지정했기 때문입니다. "1.8"과 같이 버전을 지정하면 1.8 브랜치에서 가장 높은 릴리스 버전인 1.8.4 가 선택됩니다. 같은 이유로, "1"을 요청하면, 실제로 읽히는 버전은 "1.9.1" 입니다.

아셔야 할 것은 이러한 버전관리 시맨틱이 google.load를 사용할 때와 직접 script url을 사용할 때 똑같은 방식으로 작동한다는 것입니다.

기본적으로, 로더가 되돌려주는 JavaScript는, 지원되는 버전이 있다면, 최소화 되어있습니다. 그러므로, 위의 예제는 jQuery의 최소화된 버전을 반환할 것입니다. 만약 최소화 되지 않은 JavaScript 파일을 원하신다면 "uncompress" 파라미터를 추가하시면 됩니다.
[code:js]
google.load("jquery", "1.2", {uncompressed:true});
오늘은 라이브러리들의 현재 버전으로 시작하지만, 앞으로는 현재부터의 모든 버전을 제공하겠다고 합니다.

현재 지원하는 라이브러리의 전체 목록은, 문서 부분을 보시기 바랍니다.

Dion씨가 자신들이 작업한 것에 대해 두 장의 짧은 슬라이드를 보여주셨습니다.


미래

이것은 단지 시작일 뿐입니다. Google에서는 유용하게 사용할 수 있도록 보다 많은 라이브러리들을 추가하려고 합니다. 또한, 약간의 관심만 있으시면 어떻게 이들이 더 나아갈 수 있는지 아시게 될 것입니다.

이것이 잘 사용되면 다음번에는 이러한 라이브러리들을 자동으로 읽어들일 수 있도록 브라우저 벤더들과 작업할 것이라고 합니다. 그러면, 해당 URL에 접근했을 때, 자동으로 라이브러리를 읽어들일 수 있게 됩니다. 심지어는 로컬에 있는 특별한 JIT된 것까지도요. 그러므로, 네트웍은 전혀 사용하지 않게 되죠! 또한, 브라우저는 이 서비스가 가능한 IP 주소를 가지고 있을 수 있어 DNS 탐색도 하지 않게됩니다. 오래 유지되는 JavaScript 라이브러리를 위한 브라우저 캐시도 이런 URL을 사용합니다.

이러한 것들이 일어난다면 웹 개발자들에게는 어떤 의미일까요? 항상 표준 라이브러리를 다시 다운로드받아야 했던 늘상 있어왔던 부담에서 벗어날 수 있습니다. 다른 어떤 플랫폼에서 이런 것이 가능했을까요? Java 응용프로그램을 실행할 때마다 매번 JRE를 다운로드 받아야 한다고 생각해보세요! 만약 그런 부담을 덜 수 있다면, 필요한 기능을 만드는데 보다 많은 시간을 투자할 수 있고, 실제 다운로드 크기에 대해서 고민할 시간은 줄일 수 있습니다.

감사의 말씀
(이 부분은 번역 생략하겠습니다. ^^;;)

from Announcing AJAX Libraries API: Speed up your Ajax apps with Google's infrastructure on Ajaxian
Posted by 행복한고니 트랙백 5 : 댓글 4

Live Chess
Piotr Dachtera씨가 자신이 예전에 만들었던 체스를 Comet을 이용해 보다 확장성있도록 만들었습니다. 클라이언트 사이드에는 dojox.cometd 를 사용했고 서버로는 Jetty를 사용했습니다. Dylan씨가 이에 대한 글을 작성했습니다.

Mathieu Nouzareth씨는 역시 Jetty와 Comet 기술을 사용한 Flash 기반 게임 플랫폼인 Cafe.com에 대한 글을 코멘트에 남겼습니다.

from Live Chess with Comet 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

Ajax 접근성과 ARIA

2008.05.07 00:30 from [IT] Web Tech

John Resig씨가 ARIA Live Regions 명세[각주:1]를 전체적으로 살펴보는 글을 예제와 함께 작성했습니다. 이 예제는 누군가 추가되거나 삭제되었을 때 스크린 리더가 이해하는 방식대로 인명목록의 변화를 추적하는 법에 대한 것입니다. 할 일(TODO) 목록 응용프로그램을 떠올려보세요.

[code:xml]
<ol aria-live="polite" aria-relevant="additions removals"
    aria-describedby="users-desc" id="users">
  <li>John</li>
  <li>Mary</li>
  <li>Ted</li>
  <li>Jane</li>
</ol>
  • aria-live="polite" 실시간 영역이 얼마나 겸손한지의 정도(사용자가 현재 주의하고 있는/상호작용하고 있는 것에 간섭하려는 경향에 있어서). 기본값은 'polite'입니다 -  사용자에게 업데이트를 설명하기 전에 모든 형태의 사용자 인터랙션이 완료될 때까지 대기합니다.
  • aria-relevant="additions removals" 새로운 노드가 추가되거나 삭제될 때만 사용자에게 알려줍니다.
    우리는 사용자에게 사용자 실시간 리스트를 제공하길 원하므로, 온라인 오프라인 양측으로의 변환을 기대합니다. 이렇게 되면 우리는 이것을 가능하게 하는 적정 수준의 업데이트를 받을 수 있습니다.
  • aria-describedby="users-desc" 실시간 영역의 컨텐트에 대해 상세히 설명하는 속성. 사용자가 필드의 컨텐트가 표현하는 것에 대해 더 자세히 알고 싶어하면 이 엘리먼트를 읽을 수 있습니다.
Firefox는 현재 이를 지원하고(2.0부터) Google Reader에서 사용된 이러한 기능을 구현하기 쉽게 도와주는 툴킷인 AxsJax에 대해 다룬적도 있습니다.

from Ajax Accessiibility and ARIA on Ajaxian
  1. RIA가 접근성에서 부족할 수 밖에 없었던 부분을 보완하기 위해 변경되는 부분을 명시하도록 한 규약입니다 [본문으로]
Posted by 행복한고니 트랙백 0 : 댓글 0
Dion Almaer 씨가 예전에 Google AJAX 언어 API를 이용한 번역 북마클릿에 대한 글을 쓴 적이 있습니다:
Ajax 언어 API를 개발자들이 알게 되었다는 것은 정말 운이 좋은 일이었다고 생각합니다. 덕분에 우리는 번역역 걱정을 하지 않을 수 있게 되었습니다. 이제 우리는 API를 사용하여 Goolge 백엔드를 통해 번역 작업을 할 수 있습니다.

저는 최근에 급하게 번역을 해야할 일이 몇 번 있었습니다. 프랑스어와 스페인어로 된 짧은 Twitter 메시지를 영어로 옮겨야 했습니다. 저는 외국 포럼에 나온 몇몇 기술적 이슈에 대한 답이 있었습니다.

그래서, 외국어를 선택하고 북마크를 클릭하면 작은 창이 떠서 영어로 번역해주는 번역 북마클릿을 만들어보기로 했습니다. 자동 번역이 완벽해지려면 한참 멀었지만, 대부분의 경우 요점 정도는 쉽게 알 수 있을 것입니다(책 한 권을 통째로 번역하려고 하진 않을테니까요).

아래는 이 북마클릿을 만든 방법입니다:

소스

우선, 북마클릿이 될 JavaScript 소스를 작성했습니다. 코드에는 몇가지 단계가 있습니다. 첫째로, 우리는 작업을 시작하고 Ajax 언어 API를 호출하고, 번역을 거쳐 우리가 원하는 언어를 얻을 수 있는 메소드를 작성합니다. 영어를 원하지 않는다면 언어 코드를 변경하면 됩니다.

[code:js]
if (!window['apiLoaded']) {
  window.apiLoaded = function() {
    var language = "en";
    var text = window.getSelection().toString();
    if (text) {
      google.load("language", "1", { "callback" : function() {
        google.language.detect(text, function(dresult) {
          if (!dresult.error && dresult.language) {
            google.language.translate(text, dresult.language, language, function(tresult) {
              if (tresult.translation) {
                translationWindow(tresult, dresult);
              } else {
                alert('No translation found for "' + text + '" guessing the language: ' + dresult.language);
              }
            });
          }
        });
      }});
    }
  };
}

그 뒤에는 결과를 window에 표시할 수 있는 메소드를 작성합니다. 저는 가능하면 Prototype UI Window 객체를 사용했고, 그렇지 않으면 익숙한 alert() 를 사용했습니다:

[code:js]
if (!window['translationWindow']) {
  window.translationWindow = function(tresult, dresult) {
    if (window['UI']) {
      new UI.Window({theme:  "black_hud",
                   shadow: true,
                   width:  350,
                   height: 100}).setContent("<div style='padding:6px'>" + tresult.translation + "</div>")
                   .setHeader("English Translation")
                   .setFooter("Language detected: " + dresult.language)
                   .center({top: 20}).show();
    } else {
      alert(tresult.translation + " [lang = " + dresult.language + "]");
    }
  }
}

다음에는, Prototype UI window 코드를 읽고 DOM에 리소스를 동적으로 추가하는 방식으로 함께 사용하는 CSS 리소스를 읽어들였습니다:

[code:js]
if (!window['UI']) {
  var pw = document.createElement('script');
  pw.src = 'http://almaer.com/downloads/protowindow/protowin.js';
  pw.type = "text/javascript";
  document.getElementsByTagName('body')[0].appendChild(pw);
  var pwdefault = document.createElement('link');
  pwdefault.setAttribute('rel', 'stylesheet');
  pwdefault.setAttribute('type', 'text/css');
  pwdefault.setAttribute('href', 'http://almaer.com/downloads/protowindow/themes/window.css');
  document.getElementsByTagName('body')[0].appendChild(pwdefault);
  var pwblack = document.createElement('link');
  pwblack.setAttribute('rel', 'stylesheet');
  pwblack.setAttribute('type', 'text/css');
  pwblack.setAttribute('href', 'http://almaer.com/downloads/protowindow/themes/black_hud.css');
  document.getElementsByTagName('body')[0].appendChild(pwblack);
}

마지막으로, Google API 로더를 읽어들여서 ?callback=apiLoaded을 통해 동적 로딩 옵션을 사용합니다. 이는 우리가 처음에 봤던 메인 드라이버를 시작하게 합니다. 이미 로드되었으면 직접 호출할 수 있습니다(같은 페이지에서 다중 번역을 하기 위함).

[code:js]
if (!window['google']) {
  var s = document.createElement('script');
  s.src = 'http://www.google.com/jsapi?callback=apiLoaded';
  s.type = "text/javascript";
  document.getElementsByTagName('body')[0].appendChild(s);
} else {
  apiLoaded();
};

"컴파일"

이것은 가공 전 형태인데, 우리가 필요한 것은 영어를 원하면 바로 사용할 수 있는 북마클릿 형태입니다. 이를 위해 저는 John Grubber 씨의 makebookmarklet Perl 스크립트를 사용해 변환을 했습니다.

서버

Prototype UI 코드는 서버에 있어야 하므로, Prototype + Window JavaScript의 조합된 파일을 포함한 가볍게 만든 버전과 한가지 테마의 CSS 세트를 서버에 넣었습니다.

작동

제가 얘기한 것에 대해 믿음이 안가세요? 실제 동작하는 것을 한번 보세요:


또 다른 번역 관련 응용프로그램입니다. 웹 기반 IRC 응용프로그램인 Mibbit 에는, 대화방에서 자동 번역을 해주는 "번역" 기능이 있습니다.
사용자 삽입 이미지

from Immediate Translation and Mibbit on Ajaxian
Posted by 행복한고니 트랙백 0 : 댓글 0
from Dojo XHR Plugins; How do you want your XHR today? on Ajaxian

Neil Roberts씨가 Dojo를 사용한 XHR 플러그인과 어떻게 시스템을 확장할 수 있는지에 대해 글을 썼습니다.

여러분이 dojo.xhrGet을 봤다면, "받아들일수 있는 값이: 텍스트(기본값), json, json-comment-optional, json-comment-filtered, javascript, xml"과 같다는 것을 알게될 것입니다, 하지만:

여러분이 모를만한 것은 handleAs 파라미터가 단지 어떤 플러그인을 사용할지 정하는 방법에 불과하다는 것입니다. 이 플러그인들이 어디있는지, 어떻게 동작하는지, 어떻게 여러분의 프로젝트에 적용될 수 있는지를 알면 반복작업을 쉽게 보다 적은 에러로 수행할 수 있습니다.

그는 json 스타일 콜백에 피기백 방식을 사용했고, 쿼리 할 때에 대한 훅을 추가했습니다. 업데이트된 객체가 있다면 JSON 방식으로 되돌아올테고, 그러면 추가로 원격 호출을 하지 않아도 그들을 다룰 수가 있습니다:

[code:js]
dojo._contentHandlers.json = (function(old){
  return function(xhr){
    var json = old(xhr);
    if(json.updated){
      processUpdatedObjects(json.updated);
      delete json.updated;
    }
    return json;
  }
})(dojo._contentHandlers.json);

다음으로, Neil은 노드를 자동 업데이트하는 시스템을 작성했습니다:
[code:js]
dojo.xhrGet({
  url: "node-updates.php",
  handleAs: "node-update-server"
});

dojo.xhrGet({
  url: "node-content.php?node=sidebar",
  node: "sidebar",
  handleAs: "node-update"
});

참, 쉽죠:
[code:js]
dojo.mixin(dojo._contentHandlers, {
  "node-update-server": function(xhr){
    var json = dojo._contentHandlers.json(xhr);
    dojo.forEach(json.updates, function(update){
      var node = dojo.byId(update.id);
      if(node){
        node.innerHTML = update.html;
      }
    });
  },
  "node-update": function(xhr){
    var node = dojo.byId(xhr.args.node);
    if(node){
      node.innerHTML = dojo._contentHandlers.text(xhr);
    }
  }
});

Dojo 도 꽤 유연한 것 같습니다. 원하는 데이터 형태를 다루기 위해 간단히 새로운 handleAs 타입을 추가하기만 하면 되네요.
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 Audible Ajax Episode 25 : State of Ajax on Ajaxian

Audible Ajax 의 새 에피소드가 나왔습니다. 팟캐스트직접 다운로드 받아서 들을 수 있습니다.
Posted by 행복한고니 트랙백 0 : 댓글 0

티스토리 툴바