레이블이 ajax.widgets인 게시물을 표시합니다. 모든 게시물 표시
레이블이 ajax.widgets인 게시물을 표시합니다. 모든 게시물 표시

위젯(Widgets)?

알아봅시다. 위젯(Widgets)
 
PC안 나만의 개성 '아이콘'
다양한 선택ㆍ조합 통해 개인맞춤 서비스 가능
시계ㆍ날씨부터 택배ㆍ로또번호까지 종류 다양
새 콘텐츠 유통채널 기대… 모바일위젯도 나와



지난해 5월 미국 최대의 소셜네트워크서비스 마이스페이스가 위젯 업체 포토버킷을 3억달러에 인수하며 위젯 서비스가 큰 관심을 불러일으켰습니다. 이보다 앞서 미국 시장조사기관인 컴스코어는 전 세계 온라인 이용자의 21%가 웹위젯 서비스를 경험했다는 조사결과를 발표했으며, 사진 공유 사이트 플리커는 전체 트래픽의 40%가 위젯을 통해 유입되는 것으로 알려졌습니다. 해외에서 시작해, 서서히 국내 시장을 넓혀가고 있는 위젯 서비스의 인기 요인과 향후 시장 전망에 대해 알아보겠습니다.

위젯의 인기비결
IT 기술의 발전으로 수많은 서비스들이 이용자들의 일상으로 더욱 가깝게 들어왔습니다. 사람들은 검색, 뉴스, 일정표, 쇼핑 등 다양한 서비스를 하루에도 수없이 반복 이용하고 있습니다
위젯은 이같이 자주 이용하는 서비스를 아이콘 형태로 제작해 독립적으로 구동시키는 미니 프로그램(애플리케이션)으로, 콘텐츠를 제공하는 포털 등을 방문하지 않고도 다양한 기능을 이용할 수 있어 이용이 매우 간편합니다. 위젯은 특히 개인의 선택에 따라 다양한 조합으로 이용할 수 있기 때문에 개인화 맞춤 서비스의 기반이 되고 있습니다.

가장 기본적인 위젯 서비스는 계산기나 시계, 메모와 같이 자주 쓰는 간단한 기능을 바탕화면에 띄워놓고 바로바로 이용할 수 있도록 한 데스크탑 위젯으로 네이버 위젯, 야후 위젯 등 포털에서 다운로드 서비스를 제공하며 대중화됐습니다. 이후 싸이월드 홈2 등에서 등장한 웹위젯은 블로그나 개인화포털 등에 삽입되는 작은 기능창으로, 기본 위젯이 이용자 개인만 볼 수 있는 형태였다면, 사이트를 방문한 사람들이 함께 이용할 수 있어 차별화 됐습니다. 위자드닷컴과 싸이월드 홈2가 대표적인 웹위젯 서비스이며, 최근에는 애플 아이폰 바탕화면에 개인용 홈페이지 아이구글 위젯을 심는 모바일 위젯도 서비스되고 있습니다.

위젯 서비스가 이처럼 다양하게 발전하며 인기를 끌고 있는 이유는 간단합니다. 우선 자주 찾는 정보에 대한 접근 경로를 최소화한다는 것, 기능에 제약이 없어 다양한 기능을 소화할 수 있다는 것, 동일한 UI(사용자환경)로 어디에나 붙일 수 있다는 점입니다. 또한 쉬운 퍼가기가 가능해 빠른 확산이 가능한 점도 중요한 인기 요인입니다

해외의 경우에는 2002년 9월 콘텐츠의 위젯화를 처음으로 시도한 마이야후(my.yahoo.com)가 현재 세계 5000만명이 이용하는 서비스로 인기를 얻고 있습니다. 2005년 5월 런칭한 아이구글(www.google.com/ig)의 경우, API 공개로 웹 위젯 대중화를 본격화했으며, 웹위젯 저작 플랫폼을 제공하는 위젯박스(www.widgetbox.com)는 올 초 기준 14억4000만개 이상 사용량을 기록하기도 했습니다

이외에도 쇼핑, 스포츠 등 특화된 정보 관리에 강점을 보이는 위젯도 인기가 많습니다. 이베이(togo.ebay.com/create)는 검색, 판매자, 상품 등을 카테고리별로 개인화한 위젯을 제공하고 있으며, NBA(www.nba.com/teams)는 선수명단, NBA 뉴스, 티켓 구매 등의 기능을 제공하는 위젯을 서비스합니다

국내 시장 상황 및 향후 전망
해외 시장과 비교해 국내 위젯 서비스는 아직 초기 단계에 머물러 있습니다. 2006년 초 네이버 데스크탑을 필두로 위젯 서비스가 대중에 알려진 이후, 2006년 8월 위자드닷컴이 개인화 포털 제작을 위한 웹위젯 제공과 오픈 API를 통해 위젯 유통을 본격화시켰습니다. 위자드닷컴은 시계와 날씨, 지하철노선도 등 일반적인 위젯부터 국내외 모든 포털의 검색이 가능한 통합검색 위젯, 배송중인 물품의 위치를 추적할 수 있는 택배 위젯, 박스오피스 영화 위젯, 로또 당첨번호 위젯 등을 선보이며 위젯 마케팅을 본격 시도, 새로운 비즈니스모델로의 가능성을 열고 있습니다.

2200만명이 이용하는 싸이월드 서비스에 위젯을 접목한 홈2는 이용자가 200만을 넘어서며 가장 대중적인 웹위젯 서비스로 성장하고 있습니다. 홈2는 개인 홈페이지의 메인 화면을 개인이 선택한 웹위젯으로 채울 수 있어 콘텐츠 뿐 아니라 프레임 자체를 이용자가 꾸미는 열린 서비스로, 향후 위자드닷컴 등 외부 위젯 서비스를 홈2에서 이용할 수 있게 하는 다양한 제휴를 시도하고 있습니다

앞으로 국내 위젯 시장은 API 공개, 위젯 저작 플랫폼 등장으로 사용자 참여가 확대되면서 빠른 속도로 발전할 것으로 예상됩니다. 사용자 측면에서는 필요한 콘텐츠를 내 블로그, 내 홈페이지에 붙임으로써 웹사이트의 손쉬운 개인화가 가능해지고, 나의 공간에 대해 개성있는 자기 표현이 가능해지며, 정보 접근의 효율성을 극대화시킬 수 있다는 점에서 기대되는 바가 큽니다.

콘텐츠 사업자 측면에서도 위젯을 이용한 이종 서비스나 플랫폼, 디바이스간의 콘텐츠 유통을 통해 콘텐츠 유통 판매의 새로운 채널로 활용이 가능하고, 자사 사이트로의 트래픽, 회원, 매출 증대 효과를 노릴 수 있습니다

아울러 플랫폼 사업자 측면에서는 콘텐츠 사업자들이 좋은 위젯을 만들고 이를 이용자들이 활발히 유통시키면 개별 계약 없이도 질 높은 콘텐츠를 확보할 수 있고, 위젯 사용자에 대한 광범위한 데이터 확보가 가능합니다. 또, 외부로 유통된 위젯을 통해 자연스런 플랫폼 홍보와 이용자, 트래픽 유입이 가능한 장점이 있어 향후 위젯 시장 활성화에 거는 기대가 크다고 할 수 있습니다


이 글은 2008-03-24, 디지털타임스에서 작성된 글 입니다.

0 개의 댓글

라벨:

엔터프라이즈2.0 구현을 위해 주목받는 기술들

엔터프라이즈2.0 구현을 위해 주목받는 기술들
가트너는 9일(현지 시간) '가트너 심포지엄/IT엑스포'에서 이 같은 내용을 골자로 하는 '2008년 10대 전략적 기술(Top 10 strategic technologies for 2008)'을 발표했다.

0 개의 댓글

라벨:

JsonML을 사용하여 UI 엘리먼트 구현 및 확장하기

Martin Brown, Developer and writer, Freelance

JsonML을 사용하여 UI 엘리먼트 구현 및 확장하기
JavaScript Object Notation (JSON)과 Asynchronous JavaScript + XML (Ajax)은 나란히 성장하고 있습니다. JSON은 JavaScript 객체로 바뀔 수 있는 데이터를 쉽게 전송할 수 있지만, 이 객체를 다루기 위해 커스텀 스크립팅이 필요합니다. JsonML은 JSON의 확장으로, JSON 유형 마크업을 사용하여 XML 데이터를 매핑하고, 이는 JSON 마크업에 기반하여 XML이나 XHTML 데이터를 쉽게 생성할 수 있고 사용자 인터페이스(UI) 엘리먼트를 쉽게 구현 및 교환할 수 있도록 합니다. 이 글에서, 이 편리한 툴을 사용법을 설명합니다.

Ajax로 데이터 교환하기
Ajax 인터페이스가 가진 가장 일반적인 문제들 중 하나는 클라이언트 브라우저와 호스트 서버 간 정보 교환에 인코딩 및 사후 처리(post-processing) 또는 데이터 스트림을 JavaScript 애플리케이션 내에서 직접 사용할 수 있는 것으로 변환하는 파싱이 필요하다는 점이다. Ajax에서, 캡슐화 방식은 XML이다. 전 세계적인 공통 이해를 기반으로 사용되고 있지만 문제와 한계도 안고 있다. XML의 기본적인 문제는 인코딩 프로세스가 비싸고, 대부분의 브라우저에서, XML 응답의 디코딩(decoding)에 시간이 많이 든다는 점이다. Ajax 애플리케이션을 사용하면, 요청은 폼의 콘텐트에 기반하게 된다. 응답은 서버에 의해 리턴되는 정보가 자바 객체 시리즈로 표현된다. 결과 시퀀스는 그림 1과 비슷하다

그림 1의 프로세스는 두 가지 문제를 갖고 있다.
  • 첫 번째는 XML로 작동하는 것이 매우 복잡하다. XML을 처음부터 생성하든, 서버에서 XML을 소비하든, 프로세스는 시간이 많이 걸리고 지루하고, 대게는 비효율적이다.
  • 다른 문제는 데이터를 디스플레이 포맷으로 변환하는 것이 복잡하다는 점이다. DOM 모델을 사용하여 직접 UI 엘리먼트를 구현하든지, 사전 포맷된 XHTML로 데이터를 제공해야 한다. 후자 방식은 서버가 UI 엘리먼트를 제공해야 한다. (이 자체로 위험한 발상이다.) 전자는 오버헤드를 프로세스에 추가하게 된다.
DOM 모델은 다른 웹 브라우저들과 환경이 다른 DOM 구조와 인터페이스를 갖고 있다는 사실에도 영향을 받는다. 이는 여러분이 로딩하는 정보의 디스플레이에도 복잡성을 추가하게 되고, 이는 전혀 원하던 바가 아니다. 이러한 문제에 대한 솔루션이 많이 있다. 첫 번째 솔루션은 XML 포맷에서 JSON으로 데이터가 교환되는 방식을 변경하는 것이다. 이 부분은 이 글의 초점은 아니지만, JSON을 이해하면 JsonML을 더욱 쉽게 이해할 수 있을 것이다. JsonML은 정보의 실제 디스플레이를 더욱 쉽게 만드는 또 다른 솔루션도 제공한다. 먼저 JSON부터 보도록 하자.

JSON 이해하기
JavaScript Object Notation (JSON)은 XML 사용, 콘텐트의 파싱, JavaScript 표준 기능을 사용하여 정보를 교환함으로써 가용성 있는 내부 구조로의 변환을 통해 대부분의 문제를 해결하려고 한다.
JSON의 중심은 여전히 텍스트 포맷이지만, 가독성이 더욱 강화되었고, 많은 언어들(Perl, PHP, Python, Java, Ruby)로 중첩된 데이터 객체들을 생성하는 방식과 호환되고, 이는 JavaScript 객체 포맷(중첩된 데이터 구조)와 잘 맞는다.
Sample 1-1. XML 주소 데이터
<business>
<name>One on Wharf</name>
<address>
    <street>1 Wharf Road</street>
    <town>Grantham</town>
    <county>Lincolnshire</county>
</address>
<phonenumbers>
    <phone>01476 123456</phone>
    <phone>01476 654321</phone>
</phonenumbers>
</business>
Sample 1-2. XML 데이터를 처리하는 웹 애플리케이션
<html>
<head>
<script type="text/javascript">
var xmlDoc;
function loadXML()
{
// code for IE
if (window.ActiveXObject)
  {
  xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
  xmlDoc.async=false;
  xmlDoc.load("/json/address.xml");
  getaddress();
  }
// code for Mozilla, Firefox, Opera, etc.
else if (document.implementation &&
document.implementation.createDocument)
  {
  xmlDoc=document.implementation.createDocument("","",null);
  xmlDoc.load("/json/address.xml");
  xmlDoc.onload=getaddress;
  }
else
  {
  alert('Your browser cannot handle this script');
  }
}
function getaddress()
{
document.getElementById("business").innerHTML=
xmlDoc.getElementsByTagName("name")[0].childNodes[0].nodeValue;
document.getElementById("phone").innerHTML=
xmlDoc.getElementsByTagName("phone")[0].childNodes[0].nodeValue;
document.getElementById("fax").innerHTML=
xmlDoc.getElementsByTagName("phone")[1].childNodes[0].nodeValue;
}
</script>
</head>
<body onload="loadXML()">
<h1>Address</h1>
<p><b>Business</b> <span id="business"></span><br />
<b>Phone:</b> <span id="phone"></span><br />
<b>Fax:</b> <span id="fax"></span>
</p>
</body>
</html>

JSON에서 같은 정보를 처리하면 어떻게 될까?
Sample 2-1. JSON 버전의 주소 데이터
    "business" : {
        "name" : "One on Wharf",
        "address" : {
            "street" : "1 Wharf Road",
            "town" : "Grantham",
            "county" : "Lincolnshire",
        },
        "phonenumbers" : [
                          "01476 123456",
                          "01476 654321",
                          ]
                      }
}
구조가 훨씬 읽기 쉽고 간단하다. JSON에 사용된 마크업 포맷은 eval()을 사용하여 파서 없이도 JavaScript에서 직접 계산될 수 있다. 그리고 결과는 또 다른 JavaScript 객체이다: var addressbookObj = eval('(' + jsontext + ')');.
주: 이상적으로는 eval()을 사용해서는 안된다. 임의의 텍스트를 실행하는데 사용될 수 있기 때문이다. JSON 텍스트만 파싱하는 많은 JSON 파서들이 있다.
정보가 JavaScript 내 객체라면, 표준 JavaScript 표기법을 사용하여 정보에 액세스 할 수 있다. 예를 들어, 객체로 파싱 되었던 JSON 데이터 소스에서 같은 이름과 전화 번호를 얻을 수 있다.
Sample 2-2. JSON 데이터를 처리s하는 웹 애플리케이션
<html>
<head>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript">

function showaddress(req)
{
    var addressbookObj = eval('(' + req.responseText + ')');

    document.getElementById("business").innerHTML = 
       addressbookObj.business.name;
    document.getElementById("phone").innerHTML = 
       addressbookObj.business.phonenumbers[0];
    document.getElementById("fax").innerHTML = 
       addressbookObj.business.phonenumbers[1];
}

function getaddress()
{
   new Ajax.Request('address.json',
                    { method : 'get',
                      onSuccess : showaddress,
                      onFailure: function(){ 
              alert('Something went wrong...') }});
}
</script>
</head>
<body onload="getaddress()">
<h1>Address</h1>
<p><b>Business:</b> <span id="business"></span><br />
<b>Phone:</b> <span id="phone"></span><br />
<b>Fax:</b> <span id="fax"></span>
</p>
</body>
</html>

필자는 여기에서 Prototype 라이브러리를 사용하여 원래 JSON 파일을 로딩했지만, JSON 파일에 있는 정보를 실제로 파싱하고 디스플레이 하는 프로세스가 훨씬 더 간단하다는 것을 알 수 있다. 하지만, 여전히 DOM을 사용하여 JSON 파일에서 로딩되었던 정보로 아웃풋을 채워야 한다.
원래 JSON으로 돌아가서, JSON은 전송되는 데이터의 관점에서 볼 때 비교적 작고, 더 큰 Ajax 프로젝트에서 XML의 페이로드 오버헤드는 상당하다. 실제로 콘텐트를 처리하는 감소된 JavaScript 오버헤드와 이것을 합병할 때 오버헤드가 크다.
위 예제는 JSON 표준의 단순함을 보여준다. 대부분의 Ajax 애플리케이션의 핵심은 정보 디스플레이의 커스터마이징이다. 이 예제에서, 여러분은 DOM 모델을 사용하여 XML 또는 JSON 데이터 콘텐트를 HTML 페이지로 삽입했다. 많은 Ajax 애플리케이션에서, 구현해야 할 더 복잡한 사용자 인터페이스 엘리먼트가 있다.

JsonML?
JSON Markup Language는 JSON 데이터 교환 포맷의 기본 방식을 사용하고 이를 XML 표현에 적용하여 비슷한 텍스트 기반 마크업을 사용하여 XML 포맷 데이터를 교환할 수 있다.
XML을 직접 사용하는 대안으로서 XML 데이터를 모델링 하는 표기법 포맷으로 보인다. 하지만, 원래의 XML과 비교해서 JSON의 구조와 가독성을 생각해 보라. JsonML에서, 많은 장점들을 활용할 수 있다. 가독성과 데이터 크기는 분명한 이점이 된다.
JsonML의 주 초점은 UI 엘리먼트를 구현하는 툴로서이다. 전통적으로, 여러분은 이러한 종류의 브라우저 기반 사용자 인터페이스를 개발하는 두 가지 방식을 갖고 있다.
  • 서버에서 XHTML을 생성하여 DOM 객체의 innerHTML 애트리뷰트를 사용하여 현재 페이지로 삽입한다.
  • 클라이언트 DOM 인터페이스를 사용하여 DOM 구조를 직접 구현한다.
여러분도 보다시피, 이것은 다소 성가신 방법이다. 대형 데이터 세트의 경우, 포맷팅이라는 반복적인 특성이 프로세스를 혼돈시킬 수 있다. 게다가, 브라우저에 민감한 DOM 구현들을 다루는 문제도 있다. 바로 이것이 JsonML이 해결하고자 하는 것이다. JSON 마크업의 단순함과 대상 포맷으로서 DOM을 혼합한다. 여러분은 같은 효과를 볼 수 있다. 소스는 JavaScript 클라이언트에 의해 쉽게 로딩 및 파싱될 수 있다. (DOM 구현에 대해서는 걱정할 필요가 없다.) 또한, 여러분은 JsonML 문서에 모든 것을 기술할 수 있기 때문에, 데이터와 마크업을 하나의 파일로 효과적으로 삽입할 수 있다.

http://jsonml.org/

0 개의 댓글

라벨:

jQuery로 Ajax 개발을 단순화 하기

Jesse Skinner, Web Developer, Freelance

Ajax와 DOM 스크립팅을 쉽게 하는 방법
jQuery는 JavaScript 라이브러리로서 JavaScript™와 Asynchronous JavaScript + XML (Ajax) 프로그래밍을 단순화 하는데 도움이 됩니다. JavaScript 라이브러리와는 달리, jQuery는 복잡한 코드를 간결하게 표현할 수 있는 독특한 철학이 있습니다. jQuery 원리, 기능과 특징을 배우고, 일반적인 Ajax 태스크도 수행하며, 플러그인으로 jQuery를 확장하는 방법도 알아봅니다.

jQuery란 무엇인가?
2006년 초, John Resig가 만든 jQuery는 JavaScript 코드로 작업하는 사람들에게는 훌륭한 라이브러리이다. 여러분이 JavaScript 언어 초보자라서 라이브러리가 Document Object Model (DOM) 스크립팅과 Ajax의 복잡성을 다루어주기를 원하든지, 숙련된 JavaScript 구루로서 DOM 스크립팅과 Ajax의 반복성에 지루해졌다면, jQuery가 제격이다. jQuery는 코드를 단순하고 간결하게 유지한다. 많은 반복 루프와 DOM 스크립팅 라이브러리 호출을 작성할 필요가 없다. jQuery를 사용하면 매우 적은 문자로 표현할 수 있다. jQuery 철학은 매우 독특하다. 무엇이든 단순하고 재사용 가능한 것으로 유지하기 위해 디자인 되었다. 여러분이 이러한 철학을 이해하고 여기에 편안함을 느낀다면, jQuery가 여러분의 프로그래밍 방식을 충분히 향상시킬 수 있다.

단순화
다음은 jQuery가 여러분의 코드에 어떤 영향을 미치는지를 보여주는 예제이다. 페이지의 모든 링크에 클릭 이벤트를 붙이는 것 같이 단순하고 일반적인 것을 수행하려면, 플레인 JavaScript 코드와 DOM 스크립팅을 사용하는 것이 낫다
Sample 1-1. jQuery 없는 DOM 스크립팅
var external_links = document.getElementById('external_links');
var links = external_links.getElementsByTagName('a');
for (var i=0;i < links.length;i++) {
    var link = links.item(i);
    link.onclick = function() {
        return confirm('You are going to visit: ' + this.href);
    };
}
Sample 1-2. jQuery를 사용한 DOM 스크립팅 
$('#external_links a').click(function() {
    return confirm('You are going to visit: ' + this.href);
});

놀랍지 않은가? jQuery를 사용하면 복잡하지 않게 코드로 표현하고자 하는 것만 나타낼 수 있다. 엘리먼트를 반복할 필요가 없다. click() 함수가 이 모든 것을 관리한다. 또한, 다중 DOM 스크립팅 호출도 필요 없다. 여기에서 필요한 것은 엘리먼트가 어떻게 작동하는지를 설명하는 짧은 스트링이다.
이 코드로 어떻게 작업이 수행되는지를 이해하기는 조금 어렵다. 우선, $() 함수가 있어야 한다. 이것은 jQuery에서 가장 강력한 함수이다. 대게, 이 함수를 사용하여 문서에서 엘리먼트를 선택한다. 이 예제에서, 이 함수는 Cascading Style Sheets (CSS) 신택스를 포함하고 있는 스트링으로 전달되고, jQuery는 효율적으로 이 엘리먼트를 찾는다.
CSS 셀렉터의 기본을 이해하고 있다면, 이 신택스가 익숙할 것이다. Listing 2에서, #external_links는 external_links의 id를 가진 엘리먼트를 찾는다. a 앞에 있는 공간은 jQuery에게 external_links 엘리먼트 내의 모든 <a> 엘리먼트를 찾도록 명령한다. 영어와 DOM은 장황하지만, CSS에서는 매우 간단하다.
$() 함수는 CSS 셀렉터와 매치하는 모든 엘리먼트를 포함하고 있는 jQuery 객체를 리턴한다. jQuery 객체는 어레이와 비슷하지만, 수 많은 특별한 jQuery 함수들이 포함된다. 예를 들어, click 함수를 호출함으로써 클릭 핸들러 함수를 jQuery 객체의 각 엘리먼트에 할당할 수 있다.
또한, 엘리먼트나 엘리먼트의 어레이를 $() 함수로 전달하면, 이것은 엘리먼트 주위에 jQuery 객체를 래핑할 것이다. 이 기능을 사용하여 window 객체 같은 것에 jQuery 함수를 적용하고 싶을 것이다. 일반적으로 이 함수를 다음과 같이 로드 이벤트에 할당한다. 
window.onload = function() {
    // do this stuff when the page is done loading
};


jQuery를 사용하면, 같은 코드도 다음과 같이 된다


$(window).load(function() {
    // run this when the whole page has been downloaded
});

이미 알고 있었겠지만, 윈도우가 로딩하기를 기다리는 일은 매우 지루한 일이다. 전체 페이지가 로딩을 끝마쳐야 하기 때문이다. 여기에는 페이지의 모든 이미지들도 포함된다. 가끔, 이미지 로딩을 먼저 끝내고 싶지만, 대부분의 경우 Hypertext Markup Language (HTML)만 로딩해야 한다. jQuery는 문서에 특별한 ready 이벤트를 만듦으로써 이 문제를 해결한다. 
$(document).ready(function() {
    // do this stuff when the HTML is all ready
});

Ajax로 단순하게!
Ajax는 jQuery를 사용하면 더 단순해 질 수 있다. jQuery에는 쉬운 것도 쉽게 복잡한 것도 가능한 단순하게 만드는 유용한 함수들이 많이 있다.
Ajax에서 사용되는 방식은 HTML 청크를 페이지 영역에 로딩하는 것이다. 여러분이 필요로 하는 엘리먼트를 선택하고 load() 함수를 사용하는 것이다. 다음은 통계를 업데이트 하는 예제이다. 
>$('#stats').load('stats.html');

일부 매개변수들을 서버 상의 페이지로 전달해야 할 경우가 종종 있다. jQuery를 사용하면 이는 매우 간단하다. 필요한 메소드가 어떤 것인지에 따라서 $.post()와 $.get() 중 선택한다. 선택적 데이터 객체와 콜백 함수를 전달할 수도 있다. Listing 4는 데이터를 보내고 콜백을 사용하는 예제이다.
Sample 2-1. Ajax를 사용하여 데이터를 페이지로 보내기
$.post('save.cgi', {
    text: 'my string',
    number: 23
}, function() {
    alert('Your data has been saved.');
});

복잡한 Ajax 스크립팅을 해야 한다면, $.ajax() 함수가 필요하다. xml, html, script, json을 지정할 수 있고, 여러분이 바로 사용할 수 있도록 jQuery가 자동으로 콜백 함수에 대한 결과를 준비한다. 또한, beforeSend, error, success, complete 콜백을 지정하여 사용자에게 Ajax에 대한 더 많은 피드백을 제공할 수 있다. 게다가, Ajax 요청의 타임아웃이나 페이지의 "최종 변경" 상태를 설정하는 매개변수들도 있다. Listing 5는 필자가 언급했던 매개변수를 사용하여 XML 문서를 검색하는 예제이다.
Sample 2-2. $.ajax()를 사용하여 복잡한 Ajax를 단순하게
$.ajax({
    url: 'document.xml',
    type: 'GET',
    dataType: 'xml',
    timeout: 1000,
    error: function(){
        alert('Error loading XML document');
    },
    success: function(xml){
        // do something with xml
    }
});


http://docs.jquery.com/Tutorials

0 개의 댓글

라벨:

진대제펀드 투자 1호 ‘올라웍스’, 신형 블로그로 승부

스카이레이크인큐베스트(SIC)가 운영하는 이른바 ‘진대제 펀드 1호’의 첫 번째 투자처로 업계 관계자들의 관심을 한 몸에 받았던 ‘올라웍스(Olaworks, http://olaworks.com)’/가 새로운 형태의 블로그 서비스로 승부수를 띄운다.
올라웍스는 지난 주말 공지사항을 통해 “오는 17일부터 사진이나 동영상 등을 자유롭게 꾸밀 수 있는 ‘캔버스’ 기능을 도입한 블로그 ‘올라데이(Oladay, http://www.oladay.com)’/ 서비스를 시작한다고 밝혔다.
4개월여 준비 기간을 거쳐 출시된 올라데이는 '캔버스'라는 공간에서 사진과 글, 야후 플리커 이미지, 유튜브 동영상 등을 자유롭게 배치할 수 있는 기술이 가장 큰 특징이다. 주어진 빈 공간에는 자신이 확보한 콘텐츠를 넣을 수도 있고 댓글놀이 내용을 붙일 수도 있다. 개인의 일상을 에피소드별로 자유롭게 기록한다는 개념이다. ‘디지털 데이터로 남겨진 개인의 일상을 가치 있는 콘텐츠로 만들겠다’는 서비스 취지를 반영하기 위해 애썼다. 핵심 기능은 모두 아작스(Ajax, 에이잭스)로 구현됐다.
특히 올라웍스는 향후 실시간으로 메시지를 주고받을 수 있는 댓글놀이터 클라이언트 '올라팝(http://www.olapop.com)과 연계할 계획을 세우고 있다.
올라웍스 관계자는 공지사항에서 “(기존 서비스인) 올라로그로부터 얻은 가장 큰 교훈은 ‘사용자에게 즐거움을 주는 도구가 서비스로서의 가치를 지닌다’는 단순한 사실이었다”며 “사진의 인물 정보를 추출해 자동으로 분류, 관리해주는 올라로그는 새롭고 신선했지만 즐거움을 주는 도구는 아니었다”고 인정했다.

이와 관련 올라웍스 관계자는 조선일보와 전화 통화에서 “올라데이는 최근까지 알파 버전으로 100여명을 대상으로 테스트를 진행해 왔다”며 “장기적으로 커뮤니티 서비스 강화 차원에서, 일상을 공유한다는 차원에서, 사진과 텍스트 등을 자유롭게 반영할 수 있는 ‘블로그’ 서비스를 개발했다”고 말했다. 말로 정확히 규정하기 쉽지 않지만, ‘자유도가 높은 블로그 유사 서비스’라는 설명이다.
“회사 대표 기술인 ‘얼굴인식’과 직접적으로 연관된 것이 아니라서 생뚱맞다”는 질문에 그는 “장기적으로 커뮤니티 서비스 강화 차원에서 서비스를 기획했다”며 “얼굴인식 기술이 당장 커뮤니티에 접목된다는 것은 아니지만, (기술을 가지고 있기 때문에) 필요할 때는 언제든지 적용 가능하다”고 덧붙였다.
그 동안 올라웍스는 지난해 4월 ‘얼굴인식 기술’을 적용한 올라로그를 개발한 뒤 같은 해 12월 사전 시험판(Pre-Beta)에 돌입했었다. 특히 진대제 펀드와 인텔캐피탈 등으로부터 400만 달러를 투자 받고, 이어 국내 이동통신 서비스 업체 및 야후코리아와 서비스 상용화가 진행되는 듯 했으나 무산되고 말았다. 현재 올라웍스는 빠르면 올해 안에 얼굴인식 기술을 바탕으로 일본 이동통신 업체에 서비스를 제공할 계획을 세우고 있다. 이번에 출시하는 올라데이는 얼굴인식 기술 방향과는 다소 거리가 있다.
한편 진대제 전 정보통신부 장관이 운용해 화제가 되고 있는 일명 ‘진대제펀드’는 지난달 초 사모 형태의 ‘스카이 레이크인큐베스트 사모펀드 2호’를 금융감독원에 등록했다. 제1호 펀드에 비해 규모도 3000억 원대로 커졌고 투자 대상도 벤처 기업에서 중대형 기업과 이미 상장된 IT기업 등으로 확대된다



조선일보 2007.09.17

0 개의 댓글

라벨:

input type=checkbox Element

xhtml:input type=checkbox Element
 
이 컨트롤은 선택을 위한 input 엘리먼트의 한 종류이다. 여러 개의 선택 가능한 항목 들 중에서 한개 혹은 여러 개의 항목을 선택하여 인터랙티브(Interactive)하게 원하는 기능을 수행하게 하는데 사용된다.
분류 구분 비고
Syntax HTML
Script 		< input type="checkbox"   propName = "propVal"> innerString  < /input >
[propVal] = object .PropName;
Element Information Standards
  • IE3.0 이상에서 엘리먼트와 스크립트를 사용할 수 있다.
    • Sample 
    …(생략)…
<input type="checkbox" checked id=chk1 onclick="choosebox1()">
 uncheck this check box for some free advice.
<p><input type="checkbox" id=chk2 onclick="choosebox2()">
 or check  this check box for a message from our sponsors.
<p id=samptext>
…(생략)…

    0 개의 댓글

    라벨:

    input type=button Element

    xhtml:input type=button Element
     
    이 컨트롤은 사용자의 특정 액션을 받아들이기 위한 input 엘리먼트의 한 종류로서 웹 페이지내에 이미지 형식의 버튼이 아니라 일반적인 버튼을 표현할 때 사용된다. 사용자가 버튼을 클릭할 때 인터랙티브(Interactive)하게 원하는 스크립트 함수를 지정하고자 할 때 많이 사용된다.
    분류 구분 비고
    Syntax HTML
    Script     		< input type="button"   propName = "propVal"> innerString  < /input >
    [propVal] = object .PropName;
    Element Information Standards
  • IE3.0 이상에서 엘리먼트와 스크립트를 사용할 수 있다.
  • HTML3.2에 정의되었다.
    • Sample 
    …(생략)…
<script>
function click_event()
{
    alert("your name is " + i_type.value)
}
</script>

<input type="button" value="버튼" name="i_type" onclick="click_event();">
…(생략)…

    0 개의 댓글

    라벨:

    img Element

    xhtml:img Element
     
    이 엘리먼트는 문서 내에 이미지를 표시하기 위한 기능으로서, src 어트리뷰트를 통해 이미지 파일을 지정한다. 이미지 파일은 그 종류가 많지만 웹 상에서 일반적으로 사용하는 이미지 파일의 타입은 GIF나 JPG를 사용한다.
    분류 구분 비고
    Syntax HTML
    Script     		< img   propName = "propVal"> innerString  < /img >
    [propVal] = object .PropName;
    Element Information Standards
  • IE3.0에서 지원되고 스크립트는 IE4.0에서 부터 지원된다.
  • HTML3.2에 정의되었고, DOM Level 1(W3C Document Object Model) 에 정의되었다.
    • Sample 
    …(생략)…
<img src="../image/btn001a.gif" height="60" width="100"></img>
…(생략)…

    0 개의 댓글

    라벨:

    iframe Element

    xhtml:iframe Element
     
    인라인 프레임을 생성하고 참조한다.
    분류 구분 비고
    Syntax HTML
    Script     		< iframe   propName = "propVal"> innerString  < /iframe >
    [propVal] = object .PropName;
    Element Information Standards
  • IE4.0에서 지원되고 스크립트는 IE4.0에서 부터 지원된다.
  • HTML4.0에 정의되었고, DOM Level 1(W3C Document Object Model) 에 정의되었다.
    • Remarks
  • IE5.5은 투명 인라인 유동(float) 프레임을 지원한다.
    • Sample 
    …(생략)…
<iframe id=iframe1 frameborder=0 scrolling=no src="sample.htm"></iframe>
…(생략)…

    0 개의 댓글

    라벨:

    fieldset Element

    xhtml:fieldset Element
     
    이 컨트롤은 관련 있는 엘리먼트들을 하나로 묶을 때 주로 사용한다. 예를 들어 이름과 주민등록 번호를 입력 받는 텍스트 박스를 하나로 묶어서 보여주고자 할 경우 사용될 수 있으며, 이 영역(FieldSet)에 제목을 입력하고자 할 때에는 <Legend> 컨트롤을 같이 사용한다.
    분류 구분 비고
    Syntax HTML
    Script     		< fieldset   propName = "propVal"> innerString  < /fieldset >
    [propVal] = object .PropName;
    Element Information Standards
  • IE4.0에서 지원되고 스크립트는 IE4.0에서 부터 지원된다.
  • HTML4.0에 정의되었고, DOM Level 1(W3C Document Object Model) 에 정의되었다.
    • Remarks
  • fieldset 엘리먼트는 윈도우의 Frame과 같이 작용한다.
  • 이 엘리먼는 form 엘리먼트를 그룹짓고 문서의 다른 문자열과 확실히 구별시키는데 편리하다.
    • Sample 
    …(생략)…
<fieldset class="sAreaBtn" style="position:absolute; top:0px; left:0px; height:28px; width:584px; ">
 <table class="sAreaBtnTbl" cellpadding="0" cellspacing="0" border="1" style="position:absolute; top:0px; left:0px; width:585px; ">
  <colgroup>
   <col width="585"/>
  </colgroup>
  <tbody>
   <tr>
    <td class="sAreaBtnE">
     <img id="btn10" src="../image/btn001a.gif" onclick="MAIN('10')"/>
     <img id="btnCS" src="../image/btn002a.gif" onclick="ncDoc_windowClose()"/>
    </td>
   </tr>
  </tbody>
 </table>
</fieldset>
…(생략)…

    0 개의 댓글

    라벨:

    div Element

    xhtml:div Element
     
    DIV(Division maker) 컨트롤은 블럭레벨 방식으로 내용(content)을 정의하며, 내용에 대한 다른 표현적 문구는 없다. 제작자는 이 엘리먼트을 스타일쉬트와 어트리뷰트 등과 결합하여 자신의 필요와 구미에 맞추어 HTML에 적용 할 수 있다. 기능적으로 보았을 때 이 엘리먼트는 SPAN과 큰 차이가 없는 것 처럼 보일 수 있으나, DTD에 따라 이 두 엘리먼트의 표현결과는 달라진다.
    분류 구분 비고
    Syntax HTML
    Script     		< div   propName = "propVal"> innerString  < /div >
    [propVal] = object .PropName;
    Element Information Standards
  • IE3.0에서 지원되고 스크립트는 IE4.0에서 부터 지원된다.
  • HTML3.2에 정의되었고, DOM Level 1(W3C Document Object Model) 에 정의되었다.
    • Sample 
    …(생략)…
<div>
 this text represents a section.
</div>

<div align="center">
 this text represents another section, and its text is centered.
</div>
…(생략)…

    0 개의 댓글

    라벨:

    input Element

    xhtml:input Element
     
    이 컨트롤은 입력을 위한 input 엘리먼트의 한 종류로서 업무용 화면을 구성할 때 가장 많이 사용되는 컨트롤로서 이름, 주소 등의 일반적 데이터 뿐만 아니라 거의 모든 데이터를 취급할 수 있다. 일반적으로 한 줄의 텍스트를 입력 받기 위해 사용된다.
    분류 구분 비고
    Syntax HTML
    Script     		< input [type="text"]   propName = "propVal"> innerString  < /input >
    [propVal] = object .PropName;
    Element Information Standards
  • IE3.0 이상에서 엘리먼트와 스크립트를 사용할 수 있다.
  • HTML3.2에 정의되었다.
    • Sample 
    …(생략)…
<script>
function detectentry()
{
    alert("your name is " + textbox.value)
}
</script>

<input type=text value="에스엠아이티" name="textbox" size=15 onclick="detectentry();">
…(생략)…

    0 개의 댓글

    라벨:

    AJAX Widgets > DataMap 만들기

    자바나 C 처럼 데이터를 객체에 저장하고 읽을 수 있는 Getter / Setter를 자바스크립트를 통해서도 간단히 만들 수 있다. 실제 이러한 방법은 어렵지 않지만, 그 동안 많이 사용하지 않았을 뿐이다. 간단히 이러한 기능을 할 수 있는 Widgets 코드를 소개하고자 한다.

    Key-Value Pair 형식으로 데이터를 중복없이 저장하는 Map 개체

    프로그램 구조 

    dataMap = function() {
 //--* Read
 this.getData = function(key) {
 }
 //--* Write
 this.setData = function(key, value) {
 }
 //--* Delete
 this.removeData = function(key) {
 }
}

........HTML Usage.............................
<script>
 var text= new dataMap();
 text.setData("test","Test Data");
 text.getData("test");
 text.removeData("test");
</script>
    Source 
    dataMap = function() {
 this.data = new Object();

 this.getData = function(key) { 
  if(typeof(this.data[key]) != "undefined") {
   return this.data[key];
  }  
 }

 this.setData = function(key, value) {
  if(typeof(this.data[key])=="undefined") {
   var oTemp = new Object();
   oTemp.key = key;
   oTemp.value = value;
   this.data[key] = oTemp;
   return true;
  }
  else {
   this.data[key].value = value;   
   return true;
  }

 this.removeData = function(key) {
  if(typeof(this.data[key]) != "undefined") {
   delete(this.data[key]);   
   return true;     
  }
  else {
   return false;   
  }
 }
}

    0 개의 댓글

    라벨:

    XMLHttpRequest > XMLHttpRequest Object 생성하기

    XMLHttpRequest는 현재 W3C 표준이며, Draft 상태이다. (W3C XMLHttpRequest Object) 현존하는 대부분의 메이저 브라우저들은 이 XMLHttpRequest Object를 지원하며, 리눅스에서 채택하고 있는 대부분의 브라우저에서도 동작한다.

    XMLHttpRequest Object 생성 

    /** XML HTTP Request 객체 생성
* @type Function
* @param n/a
* @return XMLHttpRequest Object
*//**/

xmlHttpRequest = function() {
 this.request = null;
}

xmlHttpRequest.prototype.createRequest = function()
{
 if (window.XMLHttpRequest){
  this.request = new XMLHttpRequest();
 } else if (window.ActiveXObject){
  try{
   this.request = new ActiveXObject("Msxml2.XMLHTTP");
  }
  catch(err) {
   this.request = new ActiveXObject("Microsoft.XMLHTTP");
  }
 }
 return this.request;
}
    • window.XMLHttpRequest를 지원하는 브라우저, 즉 모질라 계열이면 new XMLHttpRequest()를 실행
    • window.ActiveXObject를 지원하는 브라우저, 즉 IE 계열이면 new ActiveXObject()를 실행.
    • 그러나 Internet Explorer는 설치된 자바스크립트 버전에 따라 MSXML 버전에 차이가 있음으로 try ~ catch 문을 통해 대비해야 한다.
    Members of the XMLHttpRequest Object 
    interface XMLHttpRequest{
  attribute EventListener  onreadystatechange;
  readonly attribute unsigned short  readyState;
  void  open(in DOMString method, in DOMString url);
  void  open(in DOMString method, in DOMString url, in boolean async);
  void  open(in DOMString method, in DOMString url, in boolean async, in DOMString user);
  void  open(in DOMString method, in DOMString url, in boolean async, in DOMString user, in DOMString password);
  void  setRequestHeader(in DOMString header, in DOMString value);
  void  send();
  void  send(in DOMString data);
  void  send(in Document data);
  void  abort();
  DOMString getAllResponseHeaders();
  DOMString getResponseHeader(in DOMString header);
  readonly attribute DOMString       responseText;
  readonly attribute Document        responseXML;
  readonly attribute unsigned short  status;
  readonly attribute DOMString       statusText;
};

    0 개의 댓글

    라벨:

    XMLHttpRequest > File Read

    이 코드는 로컬 파일 또는 HTTP 프로토콜을 이용한 서버의 파일을 읽고자 할 때 사용할 수 있는 예제이다. 주의할 점은 FireFox와 같이 모질라 계열의 브라우저는 서로 다른 도메인의 파일을 읽고자 할 경우 보안상 서비스를 하지 않는다는 점이다.

    • ActiveX를 이용하지 않고 XMLHttpRequest Object를 이용하여 파일을 읽는 방법은?
    • FireFox와 MS IE에서 모두 동작하는 File Reader는?
    • HTML 페이지 또는 CSS 파일을 조합하여 동적으로 적용 가능할까?


    Script Code 
    xmlHttpRequest = function() {
 this.request = null;
 this.action = null;
 this.async = null;
 this.method = null;

 this.Remove = function() {
 }
}

xmlHttpRequest.prototype.createRequest =  function() {
 if (window.XMLHttpRequest){
  this.request = new XMLHttpRequest();
 } else if (window.ActiveXObject){
  try{
   this.request = new ActiveXObject("Msxml2.XMLHTTP");
  }
  catch(err) {
   this.request = new ActiveXObject("Microsoft.XMLHTTP");
  }
 }
}

xmlHttpRequest.prototype.getFileText = function(uri) {
 this.createRequest();

 this.method = "get";
 this.action = uri;
 this.async = false;
 var oRequest = this.request;

 oRequest.onreadystatechange = function() {
  if (oRequest.readyState == 4) { 
   if (oRequest.status == 200  oRequest.status == 0){
    this.request = oRequest;
   }
   else {
    alert("onreadystatechange Error!!!");   
   }  
  }
 };

 try {
  oRequest.open(this.method, this.action, this.async);
  oRequest.send("");
 }
 catch (err) {
  alert("Error!!!");
 }    
}
    HTML Code 
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
 <title>AJAX Widgets - File Read</title>
 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 <script type="text/javascript" src="js/httpRequest.js"></script>

 <script>
  function on_read()
  {
   var url = document.getElementById("sURL").value
   var nawX = new xmlHttpRequest();
   nawX.getFileText(url);  
   document.getElementById("putArea").value = nawX.request.responseText;
   nawX.Remove();
  }
 
 </script>
<body>
 <h2> [AJAX XMLHTTP Request] File 읽기 </h2>
 <input type="text" class="iStr" id="sURL" size="56" value="http://ajax-widget.blogspot.com/" /> 
 <input type="button" value="파일 읽기" onclick="on_read();" />
 <br/> <br/>
 <textarea id="putArea" style="width:78%; height:200px"></textarea>
</body>
</html>

    0 개의 댓글

    라벨:

    AJAX 주목받는 이유는?

    AJAX 는 Asynchronous JavaScript + XML의 약자로 그 의미상 "XML과 결합된 비동기 자바스 크립트" 로서 그리 뛰어난 기술은 아니다. 뭐 간단히 생각하자면 자바스크립트를 비동기적으로 사용할 수 있고, XML 방식으로 데이터를 액세스할 수 있는 정도이다.
    그러나 왜 이리 각광받고 있을까?
    새로운 기술이라 그런가? 아니면 구글, 야후 등 유명한 IT 포털들이 이를 사용하니까? 경험상으로 웹 서비스, SOA, 컴포넌트 기반 개발방법론, 코바 등 좋은 개념들이 많이 출현했고 그 때마다 유행을 타는 듯 했다. AJAX 역시 그럴까?
    여기서 우리가 주목할만 한 것이 있다. 그동안 출현했던 새로운 기술들이 밑그림은 화려하나 그리 활성화되지 않은 이유가 무엇인가? AJAX는 이와 다른 점이 무엇인지를 알면, 왜 AJAX가 각광받고 있는지 알 수 있지 않을까?

    Why? AJAX AJAX는 이미 사용하고 있는 기술들을 조합하여 좀 더 나은 서비스를 제공하면서 사용자에게, 그리고 아키텍처에게 놀라움을 보여주고 있다는 점이 이전 유행했던 기술들과 가장 큰 차이일 것이다.
    새로운 개념도 아닌 것이 왜 이리 모든 이에게 관심을 받으면서도 놀라움을 주고 있는가? 그것은 무한한 잠재력 때문일 것이다. 이는 AJAX가 처음 출현했을 때 XMLHttpRequest Object 기반으로 서버와의 인터페이스를 비동기적으로 처리 가능하던 개념에서 출발했던 것이 현재 AJAX-Widgets으로 발전해가는 것을 보면서 확인할 수 있다. 과연 AJAX가 어디까지 발전할 수 있는지 기대해볼만 하다.
    또 다른 점은 무엇일까? 한국적 환경에서는 그리 중요하게 생각하지 않는 점. 바로 다양한 브라우저의 지원이다. 이전에 나도 그랬지만 지금껏 웹 UI를 만들 때 IE 이외에는 별로 신경쓰지도 않았으며, 사용하는 코드 역시 IE에서 돌아가면 그만 이었다. 그에 따라 그 어떤 놈보다 뛰어나게 UI를 제공할 수 있는 ActiveX를 남발했으며, 스크립트 코드 역시 IE에 맞추는 것이 최적이라 생각했다. 새로운 시스템을 도입하는 사람들, 아키텍처들 역시 이를 선호하였다.
    왜 그럴 수 밖에 없었을까? 국내 웹 UI 선택은? 기능을 다양하게 제공해야 한다. 서버 시스템에 최소의 부담을 줘야 한다. 빠른 응답 속도를 보장해야 한다. 등 아키텍처 관점 또는 시스템 발전 구조에 초점이 맞추어져 있다기 보다 효율성이 그 포인트였다. 논리적이지 못해서일까? 그렇다고 볼 수 있다. 클라이언트의 아키텍처와 시스템의 발전 방향을 제시할 만한 것이 없었으니 당연히 기능을 강조할 수 밖에 없었던 것이다. 무언가 기준이 있어야 이를 바탕으로 효율을 논할 수 있지 그 바탕이 없었으니 이런 저런 기능을 제공하니 탁월하고 뛰어난 기능을 제공 한다는데 얽매이고 있었던 것이다.
    이제 기존의 효율에만 맞추어진 비생산적인 생각을 버리고 글로벌 입장에서 생각해야 할 때가 온 것이다. 그 방법은 다름 아닌 바로 바탕에서 효율성을 어떻게 달성할 것인가를 고민하는 것이 그 출발점인 것이다.

    0 개의 댓글

    라벨:

    XHTML과 HTML의 차이점

    XHTML과 HTML의 차이는 무엇인가? W3C의 규격과 지침서에 의하면 많은 세부적 차이점들을 발견할 수 있다. 그러나 여기서는 XHTML의 일부 특징들과 HTML 4와의 차이점을 간단히 소개하고자 한다.

    1. Well-formed document

    • XML에 기반한 개념이다.
    • 브라우저가 페이지 랜더링 속도를 향상시키기 위해 종료태그를 써줘야 한다는 개념이 아니라 유효한 문서를 위해서는 반드시 종료 태그를 써야 하고 특수한 양식하에 모든 엘리먼트는 네스트(nest) 되어야 한다.
    • non-Element 에도 종료 태그를 반드시 기술해야 한다.

    2. Elment and attribute names must be in lower case

    • XML은 대소문자를 구분한다.
    • 모든 HTML element와 attribute 이름은 소문자를 사용해야 한다.

    3. Attribute 값들은 항상 따옴표안게 기술해야 한다.

    • <table rows="3>
    • <table rows=3>

    4. empty-Element 에서도 종료 양식을 기술해야 한다.

    • 빈 엘리먼트인 <br> <hr> 등 역시 그 시작 태그가 /> 로 끝나야 한다.

    5. 문서의 제일 앞에 DTD(Document Type Definition)을 정의해야 한다

    • 브라우저 자체에 DTD가 포함되어 있어 기술되지 않아도 되었지만 XHTML에서는 반드시 기술해야 한다
    • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html>

    0 개의 댓글

    라벨:

    Document Object Model과 XHTML

    Document Object Model(DOM) 은 일부 오해의 소지가 있을 수 있다. 그러나 이 주제가 HTML 공통 사용성(HTML Compatibility Guidelines) 에 있어 중요한 내용임과 동시에 에디터를 제작하는데 있어 XHTML을 지원하기 위한 기술적 접근 포인트가 될 수 있기 때문이다. DOM은 XML과 HTML4의 인터페이스를 가능하게 한다. HTML4 DOM은 HTML 엘리먼트와 어트리뷰트 이름들이 대문자로 리턴되게 지정된다. XML 문서 오비젝트 모델은 HTML 엘리먼트와 어트리뷰트 이름들이 지정된 것(대문자나 소문자)으로 리턴되게 지정된다. 이러한 차이는 DOM을 통해 지정하는 Media Type에 선언에 따라 구분된다. 예를 든다면, DOM을 통하여 text/html 로 서브(served)하는 XHTML 문서들은 HTML DOM을 사용할 수 있고, 엘리먼트와 어트리뷰트 이름들이 인터페이스가 대문자로 리턴된다는 것을 의미한다. 또한 DOM을 통하여 text/xml or application/xml로 서브하는 XHTML 문서들은 XML DOM을 사용할 수 있고, 엘리먼트와 어트리뷰트 이름들이 인터페이스가 소문자로 리턴될 것이다. W3C 문서 중에XHTML 환경하에서 HTML4 을 사용하기 위한 가이드라인(HTML Compatibility Guidelines) 중 DOM 부분을 간단히 소개한 것이다. 향후 본격적으로 연구해야 겠지만 기본적인 접근을 위해 정리한 것이다.

    0 개의 댓글

    라벨:

    X-Internet과 AJAX

    IT 트랜드 검색은 주로 구글(www.google.co.kr)에서 한다. 이전에는 "X-Internet" 키워드를 검색하면 Forrester Research 라는 X-Internet 개념을 세상에 알린 사이트만 주로 검색 되었다. 그러나 지금은 나름대로 많은 사이트가 검색된다. 그러나 대부분의 검색 사이트는 국내인 점을 확인할 수 있다. 왜 그럴까?

    AJAX의 진화와 X-Internet AJAX라 함은 단순히 XMLHttpRequest Object를 이용하여 비동기적으로 서버와 XML 형식으로 데이터를 처리하는 단순한 기술로 국한시키지 않는다. 이제 AJAX는 크로스 브라우저를 지향하며 AJAX-Widgets 라는 큰 흐름으로 진화하고 있다.

    AJAX 큰 흐름과 X-Internet은 과연 어떤 관계가 있는걸까? 아이러니하게도 이 둘 간은 서로 상반된 주장을 하고 있음을 알 수 있다. 다음을 보라. 1) 데스크 탑 응용프로그램과 같은 어플리케이션 vs AJAX Widgets 2) 스마트 런타임 클라이언트를 이용한 일괄적 UI 제공 vs Cross Browser 3) 네트워크의 효율적 사용 vs XML

    AJAX은 X-Internet 인가? 대답은 NO 이다!!!
    그럼 Web 2.0은 X-Internet인가? 그 대답 역시 NO가 아닐까?


    Why?
    그 이유는 간단하다. 결국 X-Internet이 추구하는 것인 C/S의 장점과 웹의 장점을 포함한다고 하지만, 웹에 그 포인트가 맞추어져 있다기 보다 C/S에 맞추어져 있기 때문이다. 그러다 보니 C/S와 같이 스마트 웹 클라이언트가 필요하고, 이를 통해 데스크 탑 응용프로그램과 같은 UI를 제공하면서, 각 벤더마다 정의한 포맷을 통신에서 사용하고 있는 것이다. 그 옛날 VB와 파워빌더를 생각나게 한다.

    그래도 닮은 점이 있지 않을까? 당연히 있다. 그것은 데이터를 처리하는 기법이다. 데이터 처리의 기본 포맷을 XML 을 사용한다든지, 비동기적 통신을 가능케 한다든지, 멀티 데이터 통신이 가능하단든지....

    그러나 이러한 점이 같다 하여, AJAX가 X-Internet이 될 수 는 없을 것이다.

    0 개의 댓글

    라벨:

    홈
    피드 구독하기: 글 (Atom)