AllAcc?ess2007. 2. 3. 19:04
오늘 여자배구 (KT&G VS GS칼텍스)를 보면서 백어택이 2점이며 셋트당 2번의 백어택2점이 가능하는 것을 알았다..

내가 스포츠에 관심이 없지만 우리나라의 스포츠 적용룰이 달라지고 있을을 여자농구 덩크슛 룰과 야구의 세계룰적용등으로 알수 있었다..

지금 우리나라에서 흥행하는 스포츠가 있다면 e스포츠의 집중된 팬층외엔 그다지 눈에 들어오지 않는다..

관중석에 빈좌석이 눈에 들어오고 그나마 있는 관중도 팀관계의 회사인물들고 몇몇의 팬들외엔 잘 보이지 않는다..

이런 분석적 생각은 집어치우고  오늘  내가 본 여자배구 V리그에서의 KT&G 와 GS 경기에서 KT&G가 이겼지만 머리에 남는 선수는 이선수 밖에 없다..

사용자 삽입 이미지
와 ~~ 무지 하게 잘하더라..
경기 최고 득점 30점에 백어택 2개 결정적이고 위기의 순간에 하나씩 해주는 센스..

김민지.. 해설자가 거포라고 설명했는데 역시 파워가 있더라...

살며시 눈치보고 훼이크넣어 주고 직선타와 크로스 까지 특히 하켈리의 스파이크를 리베로의 수비처럼 넘겨서 점수로 따내는게 계속 이 경기를 보게 만들고 마지막 하켈리 백어택 2점으로 13대 10에서 백어택 2점으로 따라 붙는 결정적 순간의 공격수가 해야 할일에서 해주는 센스..

근대 졌네...

아깝다.. 이놈의 징크스 GS는 저번에도 KT&G전에서 홈경기를 지더니 이번에도 징크스를 벚어나지 못하나..

드레프트에서 곤혹을 치루더니.. GS에 들어와서 역시 실력발휘를 하네..

다른선수 교체투입할때 김민지 Fullset 한번도 교체되어 쉬지도 못했다..

경기 끝날때 까지 잘하던데..

내일도 흥국하고 하는데.. 나올수 있으려나.. 오늘 무리했는데..

계속 지켜봐주지 .. 잘하네..

Posted by aspirinirony
AllAcc?ess2007. 2. 2. 17:50
Mozilla Firefox Forum community 에서 많이 들어오는 Q는 firefox내에서 object 의 control이다..

결과적으로 fiefox내에서 window media 를 control하는 것이 아직까지의 나의 지식으론 할수 없다.

국내에선 embeding을 사용하는 경우가 대부분이지요[현재에선 object로 바뀌고 있지만]
하지만 embeding을 사용시 비표준 [IE기반] 을 사용시 동영상이 작동하지 않거나 재대로 작동되지[play() stop()] 못합니다.

그리하여 많은이들이 이를 병열적으로 동작할수 있는 방식을 찾고 있습니다..

embed는 비표준 형식이지만 IE나 Fox에서 사용하여도 작동이 되나 컨트롤할수는 없지요[fox]

하지만 embed는 비표준 마크업언어여서 [w3c 권고] object를 사용하기를 권하고 있다..

embed는 사실 embed로 제어되는 것이 아닙니다..

ActiveX로 제어되는 것으로 IE내에서 사용되는 미디어플레이어의 경우 버전별로 Acitvex객체를 지원하고 있으며 이것은 원도우내에 내장되어 있습니다.

net상에서 다운로드 받는 ActiveX객체와는 달리 윈도우 미디어 플레이어의 객체들은 로컬이기 때문에 아무런 보안설정없이 작동합니다. 이것은 어쩌면 윈도우내의 백도어고도 할수 있겠네요.. 이로 인해 해킹의 표적이 되기도합니다.  어찌되었든  이객체들은 play, stop을 비롯해 다양한 메소드를 가지고 있습니다. ActiveX는 Firefox에서 공식적으로 지원하고 있지 않습니다. html과 javascript로 비슷한 기능을 fox에서 구현하는것은 현재의 제 지식으론 어려운 일입니다.  그리고 비표준마크업은 언제 지원기능이 쫑날찌 알수 없습니다.

그리하여 fox에서 동영상을 보기 위해 fox plug-in을 설치하여 사용합니다. 하지만 컨트롤은 할수 없죠..

우선은 IE와 mozilla 계열의 object 태킹을 하자면..

IE Example

<div id="ie">
<object classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"
codebase="..."
width="320" height="310" id="media">
<param name="URL" value="http://news.naver.com/vod/mms.nhn?office_id=132&article_id=0000018004">
</object>
</div>

NS Mozilla Example

<div id="ns">
<object type="video/x-ms-asf-plugin" data="http://news.naver.com/vod/mms.nhn?office_id=132&article_id=0000018004" width="320" height="310" id="media">
</object>
</div>

IE param 을 사용하여 컨트롤한다는 건 잘 알려진 사실이고 그럼 Mozilla는 어떻게..

우선 url 은

IE는 <param name="URL" value="http://news.naver.com/vod/mms.nhn?office_id=132&article_id=0000018004">

NS <object type="video/x-ms-asf-plugin" data="http://news.naver.com/vod/mms.nhn?office_id=132&article_id=0000018004"

이것을 동시에 태깅하여 IE에서 뿌리면 두개의 media 가 나타나고 하나는 먹통이지요..

하지만 Firefox에서 뿌리면 IE쪽 media는 사라져 버립니다..

이것을 제어하기 위해선 당연히 navigater를 사용하지요.

function Browser()
{
var nav=navigator;
this.ns=(document.layers)? 1:0 ;
if(document.all)this.ie=1;else this.ie=0;
}
var B=new Browser();

function Show()
{
if(B.ie==true)
{
document.getElementById("ie").style.display ="";
document.getElementById("ns").style.display ="none";
}

라면 두 Browser에서 사용할수 있습니다. 이는 동영상 재생에 필요한 방법일뿐 control은 아직 연구 중입니다..

IE쪽으론 왠만한 일명 곰과도 같은 기능을 지니게 만들었지만 Fox를 알고 난뒤로  OTL 모드로 전화히고 말았습니다. 우물안의 개구리죠..

참고로 제가 만든 player입니다.
사용자 삽입 이미지

드래그엔 드롭으로 Browser내에서 이동과 컨트롤이 가능하지만 IE에서만 된다는거..

Fox내에서 Control을 가능하게 할수 있는 script가 있다면 트랙백이든 코멘트든 달아주세요.
Posted by aspirinirony
AllAcc?ess2007. 2. 2. 00:12

적용 및 테스트 IE & FireFox2

 

리스트(목록)태그를 네비게이션 메뉴바로 활용한 예 입니다.

실제로 메뉴에 사용된 HTML 태그는, 다음과 같이 매우 간결합니다.

 

 

[ 메뉴에 사용된 HTML 태그 ]

<ul id="mainMenu">
  <li><a href="/products/">Products</a></li>
  <li><a href="/downloads/">Downloads</a></li>
  <li><a href="/purchase/">Purchase</a></li>
  <li><a href="/support/">Support</a></li>
  <li><a href="/partners/">Partners</a></li>
  <li><a href="/contact/">Contact</a></li>
</ul>

 

먼저 간단히, 메뉴 디자인의 설계를 살펴 보겠습니다.

ul태그에서 아래쪽 테두리값을 이용해 베이스 라인을 깔아두었기 때문에, 실제 박스가 차지하는 크기는 26px(25px+1px)가 됩니다. 리스트 항목(li)태그에 적절한 좌우패딩값을 주어 메뉴간 간격을 설정할 수 있습니다.
박스의 영역 높이(25px) 안쪽에 자리잡는 메뉴항목(<a></a>)은, 마우스 오버에 대한 아래쪽 테두리값을 3px로 설정했습니다. 따라서, 테두리를 제외한 22px범위 영역의 높이와 패딩값을 설정하도록 합니다.

 

[ 사용한 스타일 시트 ]

 

<style type="text/css">

#mainMenu{
  list-style: none;
  margin: 0; padding: 0 0 25px 5px;

  background-color: #000000; border-bottom: 1px solid #ffcc00;
}

영역의 아래쪽에 패딩값을 25px로 주어, border-bottom이 베이스 라인으로 표현되게 합니다.

ul박스가 웹페이지에서 표현되는 세로의 실제 사이즈는 26px(25px+1px)입니다.

메뉴텍스트의 좌측간격이 15px이고, 아래의 li의 좌측 패딩값(10px)이므로 ul의 왼쪽 패딩은 5px로 설정합니다.


#mainMenu li{
 
float: left;
  margin: 0; padding: 0 10px;
}

가로로 나열된 메뉴이기 때문에, float: left를 사용하여, 리스트 항목들을 좌에서 우로 배치하도록 합니다.

설계된 내용에 따라, 좌/우 공통으로 10px의 패딩값을 설정합니다. 메뉴간 간격(20px)

#mainMenu a{
 
display: block;
  margin: 0; padding: 5px 0 1px 0;  
  height: 16px;

  font-family: verdana; font-size: 9px; color: #ffffff; font-weight: bold;
  text-decoration:none;
}

li태그의 배치 속성이 float: left인 관계로, 안쪽에 위치하는 a태그를 블록레벨로 설정하여, 정확한 레이아웃을 만들 수 있도록 합니다. 상(5px),(1px), 영역높이(16px)의 합은 실제 영역높이(25px)에서 롤오보 보더값(3px)를 제외한 값입니다. (5px+1px+16px = 25px-3px)


#mainMenu a:visited{ color: #ffffff; }
#mainMenu a:hover{ color: #ff6600; }
#mainMenu a:active{ color: #0066ff; }
#mainMenu a:hover, #mainMenu a:active{ border-bottom: 3px solid #ffcc00; }

</style>

a태그에 롤 오버 스타일입니다. 아래쪽에 3px두께의 테두리(border)를 만들도록 하였습니다.

 

롤 오버 이미지를 활용한 네비게이션 바

약간만 손을 본다면, 아래와 같은 이미지를 활용한 네비게이션 바를 만들 수 있습니다.

[ 사용한 스타일 시트 ]
 
<style type="text/css">

#mainMenu{
  list-style: none;
  margin: 0; padding: 0 0 25px 5px;

  background-color: #000000; border-bottom: 1px solid #ffcc00;
}

#mainMenu li{
 
float: left;
  margin: 0; padding: 0 10px;
}

#mainMenu a{
  display: block;
  margin: 0; padding: 5px 0 4px 0;  
  height: 16px;

  font-family: verdana; font-size: 9px; color: #ffffff; font-weight: bold;
  text-decoration:none;
}

#mainMenu a:visited{ color: #ffffff; }
#mainMenu a:hover{ color: #ff6600; }
#mainMenu a:active{ color: #0066ff; }
#mainMenu a:hover, #mainMenu a:active{

  background: url(images/line_dot.gif) no-repeat 50% 100%;

}

</style>

위와 같이, a태그의 아래쪽 테두리(border)를 없앴기 때문에, 아래여백을 (1px→4px)로 테두리 크기만큼 키워줍니다. 끝으로, 롤 오버 스타일에서, 가로는 가운데, 세로는 아래쪽에 이미지가 표현되도록 했습니다. (50% 100%)
 
이렇게 작성된 코드는, 유지/관리가 매우 쉽고 또한, 이식 작업도 매우 유용하게 합니다.

출처 : http://blog.naver.com/einmong/10011718294


출처에서 가져온 코드를 적용해 보았으나 li태그가 가로로 나오지 못했습니다..

그래서 만들어 봤습니다.

<style type="text/css">
#mainMenu { margin:0px;padding: 0px 0px 25px 5px;background-color: #000000; border-bottom: 1px solid #ffcc00;list-style:none;}
#mainMenu li{ float: left;margin: 0; padding: 0 10px;}
#mainMenu a{ float:left;display:block;padding: 5px 0px 1px 0px;  font-family: verdana; font-size: 12px; color: #ffffff; font-weight: bold;
  text-decoration:none;}
#mainMenu a:visited{ color: #ffffff; }
#mainMenu a:hover{ color: #ff6600; }
#mainMenu a:active{ color: #ffffff; }
#mainMenu a:hover, #mainMenu a:active{ border-bottom: 3px solid #ffcc00; }
</style>
</HEAD>
<BODY>
<div style="float:left;background:#DAE0D2 ;line-height:normal;">
<ul id="mainMenu">
  <li><a href="/products/">Products</a></li>
  <li><a href="/downloads/">Downloads</a></li>
  <li><a href="/purchase/">Purchase</a></li>
  <li><a href="/support/">Support</a></li>
  <li><a href="/partners/">Partners</a></li>
  <li><a href="/contact/">Contact</a></li>
</ul>
</div>



Posted by aspirinirony
AllAcc?ess2007. 2. 1. 02:55
List의 정리에 ul 과 li tag는 유용하게 사용되고 있습니다..


그러나 이 사용에 있어 Browser간의 여백 패딩 블릿이미지을 처리하는데 있어 표현의 차이가 들어납니다..

웹 페이지의 레이아웃을 유지하기 위해 table태그나 div span을 사용했다면 더욱 편리한 CSS로 이를 극복할수 있습니다.

우선 list-style:none margin-left: text-indent의 사용상 주의가 필요합니다.

IE7에 경우 text-indent값에 영향을 받지 안고 있으며 Firefox 2.0은 값의 영을 받고 있습니다.

기본적으로 margin과 padding을 설정해주는 것이 두브라우져의 레이아웃 차이를 없엘수 있습니다.

ul {margin : 0px; padding:0px;}  /* li 내에 상속됩니다.*/

=> ul {margin : 0px; padding:0px;} ;   <=이 부분을 주의 해야하는데 stylesheet를 사용하는데 있어 이 콘론은 올바른 표기법이 아닌것으로 간주하여 fox에선 무시처리를 해버리니 주의하세요..

<li> 및 display속성값이 [list-item]인 경우 다음과 같은 스타일을 적용할 수 있습니다.
* <ol> <ul> 에 다음의 속성을 지정하면, 해당 태그의 서브 <li>요소에는 모두 상속됩니다.
ol 번호가 있는 목록이며 ul은 번호가 없는 목록이지만 list라는 티를 내는 마커를 보여주죠.

=> TYPE 애트리뷰트는 LI에 개별적으로 TYPE이 지정되니 않는 한 전체 목록의 형태을 반환하거나 지정합니다. BODY에 지정된 font 애트리뷰트의 줄 높이가 UL 엘레멘트의 line-height에 상속되고 BODY의 font-size 애트리뷰트가 LI의 font-size보다 크면 LI의 항목들은 BODY의 font-size에 의하여 표현됩니다. LI 엘레멘트가 스타일쉬트(CSS)로 절대 위치를 가지면 목록 항목의 마커(marker)는 표시되지 않습니다. IE6에서 스타일 display 속성의 디폴트값은 list-item입니다.

[ 리스트 속성의 일괄 지정 ]

list-style: type image position;

리스트의 글머리표의 종류를 지정(type), 글머리표의 이미지를 지정(image) 글머리표의 표시위치 지정(position)을 지정합니다. 속성값인 type, image, position은 아래에서 설명할 속성값을 따릅니다.

[ 글머리표의 종류 지정 ]

list-style-type: disc(초기값);

글머리표의 이미지가 있는 경우에는, 이미지가 우선적으로 표시됩니다. 이미지가 없거나(none) 지정한 이미지를 표시할 수 없는 경우, 이 설정값이 유효하게 됩니다. 구버전의 IE에서는 인식되지 않으나, IE7에서는 인식이됩니다.

다음과 같은 속성값을 이용할 수 있습니다.

none : 글머리표를 표시하지 않습니다.

disc : 검은색 원(기본 값)

circls : 선으로 그려진 원

square : 선으로 그려진 사각형

lower-roman : 로마숫자 소문자

upper-roman : 로마숫자 대문자

lower-greek : 그리스 문자 소문자

decimal : 일반 숫자

decimal-leading-zero : 첫 자리에 0을 붙인 숫자

lower-latin, lower-alpha : 알파벳 소문자

upper-latin, upper-alpha : 알파벳 대문자

hebrew : 히브리 숫자

armenian : 아르메니아 숫자

georgian : 그로지아 숫자


<ul style="list-style-type: lower-roman;">

    * index
    * content
    * postscripe

[ 글머리표 이미지 지정 ]

list-style-image: url();

디폴트 값은 none입니다. 아래와 같이 사용할 수 있습니다.

<ul style="list-style-image: url(ico_note.gif);">

  • index
  • content
  • postscripe

글머리표 이미지 표시 위치 지정 ]

list-style-position: outside(초기값);

리스트 항목의 박스에 대한 글머리표의 위치를 설정하는 속성입니다.

사용할 수 있는 속성값으로는 inside 와 outside가 있으며 디폴트 값은 outside입니다.

 

<ul style="border: 1px solid; list-style-image: url(ico_note.gif);">

  • index
  • content
  • postscripe
 

<ul style="border: 1px solid; list-style-position: inside; list-style-image: url(ico_note.gif);">

  • index
  • content
  • postscripe

위 예의 경우, margin: 0; padding: 0; width: 200px로 지정되어 있습니다. 테두리를 1px로 설정하였으므로, 박스의 레이아웃은 가로 202px가 됩니다. 글머리표 이미지를 inside로 설정한 경우는 이 202px안에 모두 표기가 됩니다.

 

outside의 경우는 해당 박스의 여백이나 패딩값에 관계없이 박스의 외곽에 표기됩니다. 심지어 외곽 박스의 영역 을 침범해서라도 표기가 됩니다. 다만, 외곽 박스가 <body>인 경우에는, IE7의 경우에는 패딩영역에만 표기됩니다. 즉, FireFox2경우에는 패딩영역이든 여백(margin)영역이든 표기할 공간이 있으면 표기해 주나, IE7의 경우에는 여백(margin)영역만 존재하고 패딩영역이 없는 경우 글머리표 이미지는 표기가 되지 않습니다.

 

<ul style="border: 1px solid; list-style-position: inside; list-style-image: url(ico_note.gif);">

  <li style="list-style-position: outside;">index</li>

  • index
  • content
  • postscripe

 

이 상, 리스트 항목의 글머리표에 대한, 속성설정에 대하여 살펴보았습니다. 이 항목들만을 가지고 글머리표 레이아웃을 설정하는 방법에는 한계가 있습니다. 글머리표로 사용한 이미지의 크기에 따라, 상하 높이를 설정하는 부분이 없기 때문입니다.

 참고 사항으로 IE7에 경우 이미지와 li 내 약간의 여백이 존재하며. Fox의 경우 그림과 같이 border와 image사이의 여백이 없습니다  IE7로 볼경우와 Fox로 볼경우의 차이를 느낄려면 동일한 페이지를 두 브라우져로 동시에 보면 알수 있을 것입니다. 

ul{ list-style: none; margin: 0; padding: 0;}

따라서, 레이아웃을 위한 일반적인 사용에는 위와 같이 사용할 뿐입니다.



모든 Browser를 올바르게 처리하게 위해서 navigater를 사용할수도 있겠지만 W3C 표준을 따른다면

Borwser에 구해 받지 않을 수도 있습니다. 하지만 cursor와 같은 IE전용 태그는 유용하지만 Firefox에선 사용되지 않으며 overflow의 경우도 차이가 많이 나고 있습니다..

유용한 태그를 사용할수 있다면 Browser마다 따로 설정해주는것은 고욕이며 생산성에 문제를 느끼기에표준을 따르면서 script로 이를 대체할수 있는 방법을 개발해야 겠습니다.



Posted by aspirinirony
AllAcc?ess2007. 1. 31. 03:52

web2.0이라는 말이 orelly의 blog post의 word로 쓰이고 난뒤 web은 시대의 전환기를 지나고 있다

새롭게 만들어지는 webpage의 DTD는 XHTML 1.1이로 바뀌고 있으며 비동기 통신으로 나온 AJAX이 이 광풍의 MAIN_POINT로 focus되고 있다..

A-JAX [Javascript + XML] 의 DOM 객체로 XHTML이 일상화 되면서 새로운 web개발자들은 AJAX에 중심을 두고 있으며 그로 인해 JAVASCRIPT와 XML이 필요가 아니라 필수 교과목으로 되어 버렸다.

web2.0이란 이렇게 만들어지고 있는가? online을 offline처럼 느끼게 만드는 인터페이스를 지니고는 web은 변신중이다..

그중에서 Prototype Framework Library로 불리우는 Javascript framework가 많은 개발자들로 부터 관심을 받고 있으며 이를 해석하고 사용하기 위한 해석을 하기 위해 본인도 집중하고 있기는 하다.

흥미롭다는 표현을 나타내고 싶다..

이러다 Prototype이 하나의 새로운 언어로 태어나게 되어버리는건 아닌..

html 3.1에서 부터 script가 들어가면서 다이나믹이란 이름이 나오기 시작했는데 그저 client 언어라는 이유로 어플리케이션에선 외면되었다..

허나 지금은 어플리케이션의 가장 중심이 script가 되어버렸으며 script method의 개발이 또다른 동작과 더 크게는 인터페이스마저 만들어 내게 되었다.

다이나믹한 page submit button은 사라져야하며 event로 data전송을 시켜야하는 시대..
필인도 처음 AJAX을 경험하고 기능을 구현하면서 느끼는 것이 submit button의 필요성이다..

form 의 post 나 get 이나 submit으로 server에게 postBack해주어야 안심이 되었던 시대..

이젠 form내 전송되는 data의 채팅같은 통신이 되어야 안심이 되는시대로 변화한다.

submit 버튼은 사라져야 하는가 일명 새로고침이라는 페이지 reload가 일어나는 짧은 시간을 참을수 없어 이러는건가

submit버튼을 사용해도 form에서 onsubmit event를 이용해서 send()를 호출해도 비동기 통신과 같은 느낌을 줄수 있는대

<script language=javascript>

var Post_send = create_request();

function create_request() {
    var request = null;
    try {
        request = new XMLHttpRequest();
    } catch (trymicrosoft) {
        try {
            request = new ActiveXObject("Msxml12.XMLHTTP");
        } catch (othermicrosoft) {
            try {
                request = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (failed) {
                request = null;
            }
        }
    }
    if (request == null)
        alert("Error creating request object!");
    else
        return request;
}
function send() {
    var val = document.getElementById("name");
    var val2 = document.getElementById("option");
    send = "name=" + val;
    send = "&option=" + val2;

    Post_send.open("POST", "update.html", true);
    Post_send.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    Post_send.send(send);
}
</script>

<form name="form" method="post">
<input type=text size=10 name=name value='messagein'>
<input type=text size=10 name=option value='what_s message'>
<input type=button value=전송 onclick=send()>
</form>

ASP.NET을 하면서 되도록이면 서버컨트롤을 사용하지 않으려 노력하고있는데 이는 서버에 무리를 조금이라도 덜기 위해서 였다..

그렇다면 비동기 통신은 어떻게 되는 것일까 사용자 SCRIPT를 사용하니 성능은 오직 client의 컴퓨터 성능에 달린걸까? 아니면 수만의 client와 채팅을 해야하는 server에 있는걸까?

어찌 되었든 다이나믹과 하나의 페이지에서 모든걸 다할수 있다면 사용자 입장에서 편리하다면 개발자들이 마다할수가 없지 않는가?

어찌되었던 다시 Prototype으로 돌아오면 framework라는 말이 실감 날만큼 정교하지만 헛점도 따르며 공개되는 library에 목메게되고 소스를 뒤집어 업으면서 추가하는 method들에 눈이 빠진다.

우선 처음 Prototype 을 접하고 소스를 보았을때 이게 뭐가 했다.. 소스의 구조가 내가 알고 있는 javascript와는 틀렸다.. 조금씩들어오는 method와 연산자 object property 들이 알수 없는 연사자($)와 대입자 ( : = { } )의 나열이 였다.. 그런대 그건 필인이
JSON을 알지 못했기 때문이다.

JSON 구조로 살펴보고 이해하면서 Prototype script를 조금씩 이해할수 있었다..

name : value 의 쌍으로 이루어진 collection 타입 : {}, [] 들의 node 구조들 엄청나게 복잡한 Array.method들 apply, arguments,push,shift,concat의 기능함수와 호출함수들의 얽힘들...

그리고 이어지는 script.aculo.us effects.js ... WoW OTL이다.

Dom의 XPath 는 둘째 치고 $ <= 이 method인지 컨트롤인지 모를 개체는 무엇인가?

난 무식하게
function $(ID)
{
var obj =document.getElementById(ID);
return objj;
}
를 만들었다..

근데 $이게 이처럼 단순한게 아니라는 것을 알수 있었다..

내가 만든 함수는 단일요소 만들 가질수 있지만 $()함수는 다중요소를 함수안으로 가지고 올수있다.

그런데 아무리 찾아봐도 $()method는 찾을수 없었다.. 검색으로 보두 뒤졌는데..

어떻게 $()함수가 만들어지는 것인가?...


Posted by aspirinirony
AllAcc?ess2007. 1. 29. 18:35

원문: http://edevil.wordpress.com/2005/11/14/javascript-libraries-roundup/

아주 잘 정리되어있습니다. 무지 많은 라이브러리가 있네요.

Ajax 를 활용하는 것들이 대부분입니다. 이미 구현되어있는 것들도 많고 디버깅하기 편리하게 제공하는 라이브러리들도 많으니 한번씩 주욱 둘러보시고 Ajax 적용하려구 생각하시는 분들은 참고하시면 좋겠네요.

Javascript libraries roundup

I spent days looking for new Javascript libraries and finally made a comprehensive list of almost all libs out there.

Pure JS Application libraries / Frameworks:


Prototype
Prototype is a JavaScript framework that aims to ease development of dynamic web applications.

Homepage: http://prototype.conio.net

Documentation:
http://blogs.ebusiness-apps.com/jordan/pages/Prototype%20Library%20Info.htm
http://www.sergiopereira.com/articles/prototype.js.html
http://wiki.script.aculo.us/scriptaculous/show/Prototype


Rico
Rico provides a very simple interface for registering Ajax request handlers as well as HTML elements or JavaScript objects as Ajax response objects. Multiple elements and/or objects may be updated as the result of one Ajax request.

Homepage: http://openrico.org/rico/home.page
Documentation: http://openrico.org/rico/docs.page
Demos: http://openrico.org/rico/demos.page


MochiKit
MochiKit is a highly documented and well tested, suite of JavaScript libraries that will help you get things done, fast.

Homepage: http://www.mochikit.com/
Documentation: http://www.mochikit.com/doc/html/MochiKit/index.html
Demos: http://www.mochikit.com/demos.html


Dojo Toolkit
Dojo is an Open Source toolkit that allows you to easily build dynamic capabilities into web pages and any other environment that supports JavaScript. Dojo provides components that let you make your sites more useable, responsive, and functional.

Homepage: http://www.dojotoolkit.org/
Documentation: http://dojotoolkit.org/docs/
Demos: http://dojotoolkit.org/examples/


Behaviour
Separate Structure (xhtml) from Behavior (javascript)

Homepage: http://bennolan.com/behaviour/


Solvent
The Solvent is a cross-browser AJAX application toolkit written in JavaScript. The Solvent is provided as modules or as an entire toolkit. The projects focus is to promote robust web applications and enable rapid web development.

Homepage: http://sourceforge.net/projects/solvent/
Documentation: http://sourceforge.net/docman/?group_id=144164


Moo.FX
moo.fx is a superlightweight, ultratiny, megasmall javascript effects library, written with prototype.js.

Homepage: http://moofx.mad4milk.net/
Demo: http://moofx.mad4milk.net/tests.html


WZ_DradDrop
A Cross-browser JavaScript DHTML Library which adds Drag Drop functionality to layers and to any desired image

Homepage: http://www.walterzorn.com/dragdrop/dragdrop_e.htm


WZ_jsGraphics
High Performance JavaScript Vector Graphics Library.

Homepage: http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm


overLIB
overLIB is a JavaScript library created to enhance websites with small popup information boxes (like tooltips) to help visitors around your website.

Homepage: http://www.bosrup.com/web/overlib/
Documentation: http://www.bosrup.com/web/overlib/?Documentation
Command reference: http://www.bosrup.com/web/overlib/?Command_Reference


Scriptaculous
Javascript visual effects, togather with prototype.js

Homepage: http://script.aculo.us/


SACK
Simple AJAX Code-Kit

Homepage: http://twilightuniverse.com/projects/sack/
Documentation: http://twilightuniverse.com/projects/sack/docs.php


Sarissa
Sarissa is an ECMAScript library acting as a cross-browser wrapper for native XML APIs. It offers various XML related goodies like Document instantiation, XML loading from URLs or strings, XSLT transformations, XPath queries etc and comes especially handy for people doing what is lately known as “AJAX” development.

Homepage: http://sarissa.sourceforge.net/doc/


Nifty Corners
A small library for making rounded corners with Javascript.

Homepage: http://pro.html.it/esempio/nifty/nifty1js.html


dp.SyntaxHighlighter
dp.SyntaxHighlighter is a free JavaScript library for source code syntax highlighting.

Homepage: http://www.dreamprojections.com/SyntaxHighlighter/
Documentation: http://www.dreamprojections.com/SyntaxHighlighter/Usage.aspx
Demo: http://www.dreamprojections.com/SyntaxHighlighter/Examples.aspx


AJAX.NET
Michael Schwarz, a .NET developer in Germany has released the latest version of his Ajax .NET Wrapper. This class library simplifies the use of XMLHttp by providing .NET objects that generate the necessary Javascript code.

Homepage: http://weblogs.asp.net/mschwarz/archive/2005/04/07/397504.aspx


TOXIC
Toxic is an AJAX toolkit, or framework, for creating rich web applications. It handles the tedious and repetetive tasks involved in integrating a client created using html and javascript with a server backend. It enables client side javascript to directly call class methods in PHP5 (or any other suitable language). It also enables the server side PHP to directly call client side javascript functions. Using Toxic you can get rid of much of the tedious work in form intensive rich web applications.

Homepage: http://www.dotvoid.com/view.php?id=40


Plex Toolkit
Open source feature-complete DHTML GUI toolkit and AJAX framework based on a Javascript/DOM implementation of Macromedia’s Flex technology. Uses the almost identical markup language to Flex embedded in ordinary HTML documents for describing the UI. Binding is done with Javascript.

Homepage: http://www.plextk.org/


CPaint
CPAINT (Cross-Platform Asynchronous INterface Toolkit) is a multi-language toolkit that helps web developers design and implement AJAX web applications with ease and flexibility.

Homepage: http://cpaint.booleansystems.com/
Docs: http://cpaint.booleansystems.com/doc/


DOM-Drag
DOM-Drag is a lightweight, easy to use, dragging API for modern DHTML browsers.

Homepage: http://www.youngpup.net/2001/domdrag/
Tutorials: http://www.youngpup.net/2001/domdrag/tutorial
Demo: http://www.youngpup.net/2001/domdrag/examples


Tibet
Enterprise Class AJAX

Homepage: http://www.technicalpursuit.com/ajax.htm


Zimbra
Rubust AJAX framework

Homepage: http://www.zimbra.com
Documentation: http://www.zimbra.com/products/documentation.html
Demo: http://www.zimbra.com/products/hosted_demo.php


qooxdoo
qooxdoo is an advanced open-source javascript based toolkit. qooxdoo continues where simple HTML is not enough anymore. This way qooxdoo can help you to get your rich web application interface done - easier than ever before.

Homepage: http://qooxdoo.oss.schlund.de
Documentation: http://qooxdoo.oss.schlund.de/section/documentation
Demo: http://qooxdoo.oss.schlund.de/counter/refer.php?id=5


AJFORM
AJFORM is a JavaScript toolkit which simply submits data from any given form in an HTML page, then sends the data to any specified JavaScript function. AJFORM degrades gracefully in every aspect. In other words, if the browser doesn’t support it, the data will be sent through the form as normal.

Homepage: http://redredmusic.com/brendon/ajform/


ThyApi
ThyAPI is an api to allow the developement of better user interfaces for web applicaticions, Using javascript and Ajax, it allows a complete visual interface definition using CSS and encapsulates all objects data manipulateion.

Homepage: http://sourceforge.net/projects/thyapi/


Engine
Engine for Web Applications is an application framework for client-side development and Web applications. It provides an environment in which to develop and run JavaScript components and applications.

Homepage: http://www.imnmotion.com/projects/engine/
Documentation: http://www.imnmotion.com/projects/engine/api/engine_api.html


AJAXGear Toolkit
It is a toolkit that allows you to take advantage of the client-side technique known as AJAX. AJAX is shorthand for Asynchronous JavaScript and XML. It uses the XMLHttpRequest object to allow a Web browser to make asynchronous call to the Web server without the need to refresh the whole page.

Homepage: http://www.ajaxgear.com


Interactive Website Framework
A framework for creating highly interactive websites using javascript, css, xml, and html. Includes a custom xml parser for highly readable javascript. Essentially, all the plumbing for making AJAX-based websites, with js-based GUI toolkit.

Homepage: http://sourceforge.net/projects/iwf/


RSLite
RSlite is an extremely lightweight implementation of remote scripting which uses cookies. It is very widely browser-compatible (Opera!) but limited to single calls and small amounts of data.

Homepage: http://www.ashleyit.com/rs/main.htm
Demo: http://www.ashleyit.com/rs/techniques.htm


XHConn
XMLHTTP is a technology with which a developer can access external resources over HTTP from a static web page without ever having to reload the page itself. This library is meant to simplify and unify the code necessary to successfully send and receive simple data via XMLHTTP.

Homepage: http://xkr.us/code/javascript/XHConn/


Taconite
Taconite is a framework that simplifies the creation of Ajax enabled Web applications. It’s a very lightweight framework that automates the tedious tasks related to Ajax development, such as the creation and management of the XMLHttpRequest object and the creation of dynamic content.

Homepage: http://taconite.sourceforge.net/
Documentation: http://taconite.sourceforge.net/docs/jsdocs/index.html
Demo: http://taconite.sourceforge.net/examples.html


qForms
Great Javascript API for interfacing forms.

Homepage: http://pengoworks.com/index.cfm?action=get:qforms
Documentation: http://pengoworks.com/qforms/docs/
Demo: http://pengoworks.com/qforms/docs/examples/


JSPkg
jspkg is a package loader for Javascript, based on pluggable loaders for locating and loading scripts into a client-side Javascript application. It is designed to work best with unobtrusive Javascript libraries, but doesn’t impose any methodology or design on its users.

Homepage: http://jspkg.sourceforge.net/


Ajaxcaller
AjaxCaller is a thin XMLHttpRequest wrapper used in all the AjaxPatterns demos. The focus is on ease-of-use and full HTTP method support.

Homepage: http://ajaxify.com/run/testAjaxCaller/


libXmlRequest
The XmlRequest library contains a two public request functions, getXml and postXml, that may be used to send synchronous and asynchronous XML Http requests from Internet Explorer and Mozilla.

Homepage: http://www.whitefrost.com/reference/2005/09/09/libXmlRequest.html


SAJAX
Sajax is an open source tool to make programming websites using the Ajax framework — also known as XMLHTTPRequest or remote scripting — as easy as possible. Capable of stubbing calls to numerous server-side platforms: ASP/ ColdFusion/ Io/ Lua/ Perl/ PHP/ Python/ Ruby

Homepage: http://www.modernmethod.com/sajax/
Demo: http://www.modernmethod.com/sajax/examples.phtml


Sardalya
A small library for making dynamic HTML programming easy and fun.

Homepage: http://www.sarmal.com/sardalya/Default.aspx
Demo: http://www.sarmal.com/sardalya/Samples.aspx


X
One of the best javascript libraries out there.

Homepage: http://www.cross-browser.com/toys/


AjaxRequest
AjaxRequest is a layer over the XMLHttpRequest functionality which makes the communication between Javascript and the server easier for developers.

Homepage: http://ajaxtoolbox.com/request/
Documentation: http://ajaxtoolbox.com/request/documentation.php
Demo: http://ajaxtoolbox.com/request/examples.php


moo.ajax
moo.ajax is a very simple ajax class, to be used with prototype.lite from moo.fx.

Homepage: http://www.mad4milk.net/entry/moo.ajax
Demo: http://www.mad4milk.net/examples/mooajax/


PHP based AJAX Frameworks


AjaxAC
AjaxAC is an open-source framework written in PHP, used to develop/create/generate AJAX applications. The fundamental idea behind AJAX (Asynchronous JavaScript And XML) is to use the XMLHttpRequest object to change a web page state using background HTTP sub-requests without reloading the entire page.

Homepage: http://ajax.zervaas.com.au


XOAD
XOAD, formerly known as NAJAX, is a PHP based AJAX/XAP object oriented framework that allows you to create richer web applications.

Homepage: http://www.xoad.org
Documentation: http://www.xoad.org/documentation/source/
Demo: http://www.xoad.org/examples/


PAJAJ
What is the PAJAJ framework, it stands for (PHP Asynchronous Javascript and JSON). It is a object oriented Ajax framework written in PHP5 for development of event driven PHP web applications.

Homepage: http://sourceforge.net/projects/pajaj/
Documentation: http://www.wassons.org/pajaj/public/docs/index.php


Symfony
A PHP 5 Development Framework inspired by Rails. It has integrated database abstraction and support for AJAX. Installation is fairly easy. Symfony is aimed at building robust applications in an enterprise context. This means that you have full control over the configuration: from the directory structure to the foreign libraries, almost everything can be customized. To match your enterprise’s development guidelines, symfony is bundled with additional tools helping you to test, debug and document your project.

AjaxBlog: http://ajaxblog.com/arc…….application-in-php-in-minutes-with-symfony

Homepage: www.symfony-project.com
Documentation: http://www.symfony-project.com/content/documentation.html
http://www.symfony-project.com/trac/wiki


XAJAX
xajax is an open source PHP class library that allows you to easily create powerful, web-based, Ajax applications using HTML, CSS, JavaScript, and PHP. Applications developed with xajax can asynchronously call server-side PHP functions and update content without reloading the page.

Homepage: http://xajax.sourceforge.net/


PEAR:: HTML_AJAX
Provides PHP and JavaScript libraries for performing AJAX (Communication from JavaScript to your server without reloading the page)

Homepage: http://pear.php.net/package/HTML_AJAX
Documentation: http://pear.php.net/package/HTML_AJAX/docs


Flexible AJAX
Flexible Ajax is a handler to combine the remote scripting technology, also known as AJAX (Asynchronous Javascript and XML), with a php-based backend.

Homepage: http://tripdown.de/flxajax/
Demo: http://tripdown.de/flexible_ajax_example.php


Javascript libs for Flash:


FlashObject
FlashObject is a small Javascript file used for embedding Macromedia Flash content.

Homepage: http://blog.deconcept.com/flashobject/


OSFlash - Flashjs
The Flash JavaScript Integration Kit allows developers to get the best of the Flash and HTML worlds by enabling JavaScript to invoke ActionScript functions, and vice versa.

Homepage: http://www.osflash.org/doku.php?id=flashjs
Documentation: http://www.mustardlab.com/developer/flash/jscommunication/


AFLAX
A JavaScript Library for Macromedia’s Flash™ Platform. AFLAX is a method through which developers may use JavaScript and Flash together to create AJAX-type applications, but with a much richer set of vector drawing controls than are available in either Internet Explorer or FireFox. Developers using this library have access to the full range of Flash features, but without ever touching the Flash IDE.

Homepage: http://www.aflax.org


Java based AJAX Frameworks


ZK
ZK is an AJAX-based solution for developing Web applications in Java. ZK includes an event-driven engine to automate interactivity, and a rich set of XUL-based components.

Homepage: http://zk1.sourceforge.net
Demo: http://www.potix.com/zkdemo/userguide

I dont know much about Java. Please suggest some more Java based AJAX frameworks.

Not enough? Check out JSAN

Posted by aspirinirony
AllAcc?ess2007. 1. 29. 18:17
Posted by aspirinirony
AllAcc?ess2007. 1. 29. 15:49
사용자 삽입 이미지

WindowServer2003
MS Visual Studio 2003
MS SQL2000

ASP.NET
AJAX.DLL참조
XML
VBSCRIPT

지금 만들고 있는 나의 Blog로 우선 Blog기능과 뉴스기능 RSS Reader기능을 구현했으며..
앞으로 나아가는 VML기능으로 3D webpage를 구현할 생각입니다..

우선 구현해 나가야할 것들로 트랙백과 핑백 web수집로봇 검색의 형태분리소작업 google의 linkpage방식의 search view와 google캐쉬 등 많은 것이 있는데..

Tetter의 기능을 벤치마킹하면서 많은것을 더 추가해야 하겠다는 생각드네요..

카테고리의 노드정열방식은 괜찮은데 sub노드정열에서 드래그엔 드롭방식을 사용하는것이 더욱 편리하다는 생각에 그것부터 실행중입니다.. 참고로 clubbox node방식이 드래그엔 드롭입니다.

저의 Blog중 가장마음에 드는것은 RSS,Feed Reader로 RDF,RSS 1,2 Atom의 reader가 가능하다는것으로 Google reader의 도움을 많이 받았습니다.

그리고 RSS가 없는 페이지를 긁어오는 webpage수집로봇으로 유명 포털과 뉴스사이트의 실시간뉴스와 동영상, 실시간검색어를 보여주며 동여상재생에 있어 독립적인 layer를 만들고 Gom스타일의 기능을 설정하여 뉴스검색과 Blog를 사용하면서 동영상과 tv.라디오를 볼수 있으며 작은 기능이지만

blog에서 list와 view write페이지 따로 만들지 않고 하나에 페이지에 모두 사용할수있습니다.
구체적으로 list에서 보고 싶은 Post를 열때 view layer를 하나열고 또 다른 post를 볼때 열려있는 view layer가 다시 로드되는것이 아니라 또하나의 layer가 열려 동시에 여러개의 post를 볼수 있는 방식을 사용하였습니다.. 그러데 너무 산만한것 같기도 하지만 저혼자 사용하는 것이니.. 제가 편한데로 하는 거죠..

스킨은 따로 만들어 적용하는것도 구현할 생각이며 tetter에 plug-in기능이 마음에 들어 그것도 생각하고 있습니다..

MS Visual Studio 2005 SQL2005 가 나온지 쫌 됬지만 그래도 2003이 편하네요..

지금은 제작단계이니 beta가 되면 다시 한번더 posting 하겠습니다..

 Posted By Aspirinirony

'AllAcc?ess' 카테고리의 다른 글

Javascript libraries 총정리  (0) 2007.01.29
CSS Design gallery 사이트  (0) 2007.01.29
트랙백에 관해 데터와 티스에 바라는것  (2) 2007.01.29
다음웹인사이드..  (0) 2007.01.29
SQL Server 2000 설치  (0) 2007.01.27
Posted by aspirinirony
AllAcc?ess2007. 1. 29. 14:37
트랙백을 알고 부터 조금씩 쓰고 있지만.

티스토리의 트랙백주소에 조금의 실망스런 점이 들어나기 시작한다..

우선 내가 보내는 트랙백주소는 http://aspirinirony.tistory.com/trackback/XX의 글의 idexno이 붙어있어 상대역링크를 받는이에게 나의 주소를 정확히 알려줄수 없다..

네이버와 다음등 여러 Blog에 트랙백을 보내지만 그곳에나 나의 링크로 들어올때 없는 포스트이거나 비밀글이라는 문구가 뜨면 얼마나 황당하겠는가?

트랙백주소의 개선이 필요하다고 느낀다..

내가 만든 Blogsite라면 다시 만들어 쓰겠지만 Tistory는 포스팅쪽에서 서비스 해야 가능할것 같은데..

해결방안이 있거나 다른 Plug-in이 있다면... 알려주세요..

그리고 임시저장에 관한 방안에서 사용자가 임시저장이란 layer message를 보고 무심코 창을 닫거나 하는 경우가 있는데(내가 처음에 그랬음) 이게 임시저장이란 말의 뜻에 선이 어디까지 이며 구체적 저장방법은 무엇인지도 알고 싶네요..

'AllAcc?ess' 카테고리의 다른 글

CSS Design gallery 사이트  (0) 2007.01.29
ASP.NET으로 만들어가는 Blog  (0) 2007.01.29
다음웹인사이드..  (0) 2007.01.29
SQL Server 2000 설치  (0) 2007.01.27
Asp.net setting하기_02  (0) 2007.01.27
Posted by aspirinirony
AllAcc?ess2007. 1. 29. 02:10
로그분석에 대해 생각하는 이나 알고 싶은 이는 다음 웹인사이드를 사용해보는 것도 괜찮겠다..

무료라는 것과 자신의 Blog의 정체성을 유지하기 위해 필요할수도 있다..

그럼 다음 웹인사이드를 보자..

우선 Daum 에 계정이 있어야 겠지요..

다음웹인사이드 <=페이지로 가기 

'AllAcc?ess' 카테고리의 다른 글

ASP.NET으로 만들어가는 Blog  (0) 2007.01.29
트랙백에 관해 데터와 티스에 바라는것  (2) 2007.01.29
SQL Server 2000 설치  (0) 2007.01.27
Asp.net setting하기_02  (0) 2007.01.27
Asp.net setting하기  (0) 2007.01.27
Posted by aspirinirony
2007. 1. 27. 22:08

보호되어 있는 글입니다.
내용을 보시려면 비밀번호를 입력하세요.

2007. 1. 27. 22:00

보호되어 있는 글입니다.
내용을 보시려면 비밀번호를 입력하세요.

2007. 1. 27. 21:59

보호되어 있는 글입니다.
내용을 보시려면 비밀번호를 입력하세요.

AllAcc?ess2007. 1. 27. 21:58
 

1. ASP.NET Forums(포럼소스)

   http://www.asp.net/Default.aspx?tabindex=7&tabid=41


2. DotNetNuke(홈페이지 자동화 구축) / VB.NET

   http://www.dotnetnuke.com/DesktopDefault.aspx?tabid=125    

   

3. C# 메일서버(웹메일 포함)

   

http://www.lumisoft.ee/lsWWW/ENG/Products/Mail_Server/mail_index_eng.aspx?type=download


4. WebControl(텍스트 편집기)

   http://www.freetextbox.com/getfreetextbox.aspx

   

5. Rainbow Portal

   http://www.rainbowportal.org/Rainbow/Default.aspx          

   

6. CodeProject(각종 아티글)

   http://www.codeproject.com/


7. Lutz Roeder's (닷넷 자료)

   http://www.aisto.com/roeder/dotnet/


8. Master C# (닷넷 커뮤니티)

   http://www.mastercsharp.com/


9. CrownwoodSoftwhere(매직 라이브러리)

   http://www.crownwood.net/


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

국내사이트

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


1. taeyo's ASP & .NET

   http://www.taeyo.net


2. SKY.ph-개발자 커뮤니티 사이트

   http://sky.ph/


3. Neovis-ASP.NET,C#,ASP

   http://www.neovis.pe.kr


4. HOONS 닷넷 개발자 SIDE

   http://www.hoonsbara.com


5. 고수닷넷 (닷넷 관련 아티글)

   http://www.gosu.net


6. 소설같은 C#(C#의 기본 문법 정리)

   http://www.jabook.org/

'AllAcc?ess' 카테고리의 다른 글

다음웹인사이드..  (0) 2007.01.29
SQL Server 2000 설치  (0) 2007.01.27
Asp.net setting하기_02  (0) 2007.01.27
Asp.net setting하기  (0) 2007.01.27
profile  (0) 2007.01.25
Posted by aspirinirony
AllAcc?ess2007. 1. 25. 19:01
Blog of the Identity


 

the over as not thing..

65억분의 1로써 존재하는 세상속의 개인으로 태어나 세상이 허락한 것만을 보고 듣고 말하며 생각하는 Destiny holic.

Busan, South Korea
Male
Birthday : 81 January
constellation : Capricornus
Relationship Status : single ㅠㅠ
Education : nothing

친구가 말하는 나 : 소극적이고 내성적이며 소심하면서 호기심은 있어가지고 이거저거 다 해볼라고 유난 떨다가 헤메고 자기위주생각에 대성진리교와 맞짱토론 때리는 카이스트 1등먹을것 같이 생긴 4사원 = 찌질한 seif 생선에 똘+아이성 기질 다분한 4사원 폐인

생계유지행위: 現 白手

관심분야

정보사회학, 運命,

STORY STYLELING = AllACCESS[ VS의 역활론 ,Idetity vs Mass Conception,
Individual vs Society = 사회학(심리학, 경제학,) + 인문학(철학,인류학, 고고학, 역사학),
NET&NET(computer), Music,  
Control (Pessimistic Technological Determinism), Mystery, Language,
new DESGIN,]

another : people relationship

original root location site : www.ddolwon.com/activity_log
facebook : facebook.com/people/Cha_Beak_Ho/854369796
cyworld : cyworld.nate.com/aspirinirony
me2day : me2day.net/aspirinirony

'AllAcc?ess' 카테고리의 다른 글

다음웹인사이드..  (0) 2007.01.29
SQL Server 2000 설치  (0) 2007.01.27
Asp.net setting하기_02  (0) 2007.01.27
Asp.net setting하기  (0) 2007.01.27
ASP .NET Site 정리  (0) 2007.01.27
Posted by aspirinirony
«이전  1 2 3 4 5  다음»