Ajax와 XML : 라이트박스(lightbox)용 Ajax
IBM dW review2007. 11. 30. 15:34
이번에는 좀 더 쉬운 초급용 Ajax Article을 골라 보자.
11월 6일 IBM dW에 업데이트된 기사로, PHP, Dynamic HTML(DHTML), Asynchronous JavaScript + XML(Ajax)와 같은 기술들을 사용하여 사용자의 관심을 끌 수 있는 컨텐츠를 만드는 방법이다.
먼저 결과 화면부터 보자.
텍스트에 적용된 결과이다. 마우스를 텍스트 위에 올려 놓으면, 우측의 그림처럼 작업 팝업과 같은 형식으로 마치 툴팁과도 같은 모습을 보여준다.
체험하기 : http://www.muttmansion.com/lightbox/tooltips/
다음은 이미지에 적용된 결과이다. 이 그림을 클릭할 경우, 우측의 그림처럼 섬네일의 원래 크기의 이미지가 창 중앙에 디스플레이 된다. 더욱이 백그라운드의 모든 Material이 흐려지기 때문에, 사용자는 중앙의 컨텐츠에 더욱 집중할 수 있다.
체험하기 : http://www.muttmansion.com/lightbox/lightbox/
또한 다음과 같이 페이지 자체적으로 윈도우용 컨텐츠를 가지고 있고, 사용자가 폼에서 Login버튼을 클릭하면 Ajax.Request 객체를 사용하여 서버에서 로그인을 요청한다. 그래서 우측의 그림처럼 매우 참신한 Web2.0 스타일의 로그인 윈도우를 볼 수 있게 된다.
이러한 방식은 애플리케이션에 팝업을 가져올 수 있고, 사용자들에게 웹 보다는 데스크탑 애플리케이션과 비슷한 것을 사용하고 있다는 인식을 줄 수 있다는 점이 매력적이다.
체험하기 : http://www.muttmansion.com/lightbox/window/
이러한 방식으로 자신의 웹 페이지에 유저들의 관심을 효과적으로 끌 수 있는 방법들을 다루고 있는데, 모든 예제는 Prototype.js JavaScript 라이브러리를 기반으로 구현한다.
첫번째 예제는 너무나도 간단하다. 먼저, 보여줄 페이지(index.html)를 구성하되, 마우스가 롤오버 되었을 경우 효과를 보여줄 텍스트를 <div>태그로 감싸주고 이름을 설정한다. 두번째로 롤오버 되었을 경우에 보여줄 텍스트를 text.php에 추가한다. 세번째로, JavaScript를 정의하는데,
<script type="text/javascript">
new Ajax.Updater( 'popup1', 'text.php' );
new Tooltip('설정한 div 이름', 'popup1')
</script>
이것으로 끝이다. 너무나 간단하지 않은가- 자신의 블로그에 굳이 다른 페이지를 통해 표시할 필요가 없는 각종 Contents들은 이러한 방식으로 간단히 표현가능하게 해 주며, 사용자의 관심도 끌 수 있다.
이런식으로 페이지를 어지럽히지 않고 사용자들에게 Contents를 On Demand 방식으로 상세한 내용을 보여줄 수 있으며, 상세한 내용은 텍스트 뿐 아니라 이미지, 테이블 포멧팅 등이 될 수도 있다.
가장 기본적인 예제를 맛보았는데, 상단에서 볼 수 있는 다른 예제들은 IBM dW에서 직접 보도록 하자.
그 외에도 '페이더(fader) 메시지'에 대한 예제도 볼 수가 있는데 html과 JavaScript에 대한 기본적인 이해만 있으면 어렵지 않게 구현할 수 있을 것이다.
또한 이는 모듈 겸, 프레임웍 같이 되어 있어 활용성도 높을 듯 하다.
링크 : http://www.ibm.com/developerworks/kr/library/x-ajaxxml6/index.html
또한, 이것을 그대로 적용한 예제들도 볼 수가 있는데, 아래 링크를 따라가 보자.
링크 : http://www.huddletogether.com/projects/lightbox2/
각자 자신의 블로그에 멋진 이미지 갤러리 하나씩 삽입 해 보는것도 괜찮지 않을까 싶다.
11월 6일 IBM dW에 업데이트된 기사로, PHP, Dynamic HTML(DHTML), Asynchronous JavaScript + XML(Ajax)와 같은 기술들을 사용하여 사용자의 관심을 끌 수 있는 컨텐츠를 만드는 방법이다.
먼저 결과 화면부터 보자.
텍스트에 적용된 결과이다. 마우스를 텍스트 위에 올려 놓으면, 우측의 그림처럼 작업 팝업과 같은 형식으로 마치 툴팁과도 같은 모습을 보여준다.
체험하기 : http://www.muttmansion.com/lightbox/tooltips/
다음은 이미지에 적용된 결과이다. 이 그림을 클릭할 경우, 우측의 그림처럼 섬네일의 원래 크기의 이미지가 창 중앙에 디스플레이 된다. 더욱이 백그라운드의 모든 Material이 흐려지기 때문에, 사용자는 중앙의 컨텐츠에 더욱 집중할 수 있다.
체험하기 : http://www.muttmansion.com/lightbox/lightbox/
또한 다음과 같이 페이지 자체적으로 윈도우용 컨텐츠를 가지고 있고, 사용자가 폼에서 Login버튼을 클릭하면 Ajax.Request 객체를 사용하여 서버에서 로그인을 요청한다. 그래서 우측의 그림처럼 매우 참신한 Web2.0 스타일의 로그인 윈도우를 볼 수 있게 된다.
이러한 방식은 애플리케이션에 팝업을 가져올 수 있고, 사용자들에게 웹 보다는 데스크탑 애플리케이션과 비슷한 것을 사용하고 있다는 인식을 줄 수 있다는 점이 매력적이다.
체험하기 : http://www.muttmansion.com/lightbox/window/
이러한 방식으로 자신의 웹 페이지에 유저들의 관심을 효과적으로 끌 수 있는 방법들을 다루고 있는데, 모든 예제는 Prototype.js JavaScript 라이브러리를 기반으로 구현한다.
첫번째 예제는 너무나도 간단하다. 먼저, 보여줄 페이지(index.html)를 구성하되, 마우스가 롤오버 되었을 경우 효과를 보여줄 텍스트를 <div>태그로 감싸주고 이름을 설정한다. 두번째로 롤오버 되었을 경우에 보여줄 텍스트를 text.php에 추가한다. 세번째로, JavaScript를 정의하는데,
<script type="text/javascript">
new Ajax.Updater( 'popup1', 'text.php' );
new Tooltip('설정한 div 이름', 'popup1')
</script>
이것으로 끝이다. 너무나 간단하지 않은가- 자신의 블로그에 굳이 다른 페이지를 통해 표시할 필요가 없는 각종 Contents들은 이러한 방식으로 간단히 표현가능하게 해 주며, 사용자의 관심도 끌 수 있다.
이런식으로 페이지를 어지럽히지 않고 사용자들에게 Contents를 On Demand 방식으로 상세한 내용을 보여줄 수 있으며, 상세한 내용은 텍스트 뿐 아니라 이미지, 테이블 포멧팅 등이 될 수도 있다.
가장 기본적인 예제를 맛보았는데, 상단에서 볼 수 있는 다른 예제들은 IBM dW에서 직접 보도록 하자.
그 외에도 '페이더(fader) 메시지'에 대한 예제도 볼 수가 있는데 html과 JavaScript에 대한 기본적인 이해만 있으면 어렵지 않게 구현할 수 있을 것이다.
또한 이는 모듈 겸, 프레임웍 같이 되어 있어 활용성도 높을 듯 하다.
링크 : http://www.ibm.com/developerworks/kr/library/x-ajaxxml6/index.html
또한, 이것을 그대로 적용한 예제들도 볼 수가 있는데, 아래 링크를 따라가 보자.
링크 : http://www.huddletogether.com/projects/lightbox2/
각자 자신의 블로그에 멋진 이미지 갤러리 하나씩 삽입 해 보는것도 괜찮지 않을까 싶다.
'IBM dW review' 카테고리의 다른 글
[IBM dW Review] Ajax와 XML : 미디어용 Ajax (0) | 2007.12.31 |
---|---|
XSLT를 사용하여 오픈오피스의 편집기능 확장하기 (0) | 2007.11.30 |
음성 실행 XML 개발하기 (Part 1, 2, 3, 4) (0) | 2007.11.28 |
pureQuery : 자바 데이터베이스 애플리케이션을 작성하는 IBM의 새로운 패러다임 (0) | 2007.10.31 |
HTML 5의 새로운 엘리먼트 (New element in HTML 5) (0) | 2007.10.24 |
IBM developerWorks 4월 정례모임
일상다반사2007. 4. 24. 07:21
'일상다반사' 카테고리의 다른 글
요즘, (2) | 2007.07.29 |
---|---|
ROBOCODE KOREA CUP 64강 진출! (2) | 2007.07.27 |
내가 이것 밖에 안되던가. (1) | 2007.04.18 |
PORTFOLIO (0) | 2007.03.10 |
꿈을 이루어주는 공부법_석세스 코드 - 한사람의 기승전결 (0) | 2007.03.04 |
보호되어 있는 글입니다.
내용을 보시려면 비밀번호를 입력하세요.
보호되어 있는 글입니다.
내용을 보시려면 비밀번호를 입력하세요.
IBM developerWorks를 아시는지요?
자유발언대2007. 2. 27. 22:18
IBM developerWorks(이하 IBM dW)는 개발 입문자부터 고급 개발자까지 개발자를 위한 정보 포탈로
매주 새로운 최신 기술이나 자료/국내 개발자 소식 등을 제공한다.
여러가지 영역이 있는데, 그 중 기술영역에 포커스를 맞추어 보면 대략 다음과 같다.
그리드컴퓨팅, 리눅스, 무선기술, 오픈소스, 웹 아키텍처, 자바, 아키텍처, 자율컴퓨팅, SOA웹서비스와 같이 9개의 카테고리를 대 분류로 하여 기술/자료/소식 등을 포털을 통해 제공하고 있다.
그 외에도 로컬 컨텐츠 영역에는 국내 유명 개발자들이 릴레이식으로 인터뷰를 하고 있고, 컬럼란에는 개발자의 고민과 철학 등 일반 유저가 참여할 수 있는 공간도 마련하고 있는데, 아직은 인지도가 많지 않은 모양이다.
상반기 IBM dW의 대학생 1기 모니터 요원으로 간단한 설문을 해 보고자 합니다.
이 게시물을 보시는 대학생 여러분들의 많은 코멘트/트랙백을 조심스럽게 부탁드려 봅니다. (__)
이 게시물을 보시는 대학생 여러분들의 많은 코멘트/트랙백을 조심스럽게 부탁드려 봅니다. (__)
성명 :
학교 :
학부/학과 :
1. 얼마나 오래 dW를 사용하셨습니까?
2. 언제 dW를 찾으십니까?
3. dW의 어느 contents를 가장 자주 이용하십니까?
4. 어떻게 dW를 알게 되셨나요?
5. dW로부터 무엇을 얻고자 하십니까?
6. 대학생들에게 dW가 한발 더 다가서기 위해 dW가 무엇을 해야 할까요?
학교 :
학부/학과 :
1. 얼마나 오래 dW를 사용하셨습니까?
2. 언제 dW를 찾으십니까?
3. dW의 어느 contents를 가장 자주 이용하십니까?
4. 어떻게 dW를 알게 되셨나요?
5. dW로부터 무엇을 얻고자 하십니까?
6. 대학생들에게 dW가 한발 더 다가서기 위해 dW가 무엇을 해야 할까요?
'자유발언대' 카테고리의 다른 글
돌아오지 않는 2루주자 임수혁 (1) | 2007.04.03 |
---|---|
openAPI ? 메쉬업? (0) | 2007.03.27 |
갈대 (0) | 2006.07.09 |
말이 필요할 때. (0) | 2006.07.08 |
종착역을 바라보며... (2) | 2006.06.17 |