1 miname께서 작성한 글타래

  • miname
  • 관리자
  • 접속 안 함
  • 가입 날짜: 2004-08-23
  • 작성글: 510

글타래: Web 개발자들을 위한 웹 브라우져의 책갈피 도구들

아래의 javescript들은 Safari 책갈피 막대의 책갈피 링크 주소에 저장해 놓고, 웹 페이지를 개발하는 데 유용하게 사용될 수 있는 작은 JavaScript로 된 책갈피 도구들(bookmarklets)입니다.

JavaScript 관련
Scripts 보기 - 현재의 페이지에 있거나, 혹은 연결되어 있는 모든 JavaScript들을 포함하고 있는 창을 새로 표시함(Framesets은 지원 안함).  document.all, document.layers 등과 같은 지원되지 않는 DOM 요청들을 확인할 경우 사용하십시오.

javascript:var%20jsArray%20=%20document.getElementsByTagName(%22script%22);%20var%20theWinref;%20var%20theHTML;%20var%20scriptObj;%20var%20frameURL;%20var%20frameObj;if(jsArray.length%20%3E%200)%20%7B%20theWinref%20=%20window.open('','_blank','width=320,height=255,toolbar=no,location=no,directories=no,status=yes,menubar=no,resizeable=yes');%20theWinref.document.write('%3Chtml%3E%3Chead%3E%3Ctitle%3E'%20+%20window.location.href%20+%20'%3C/title%3E%3C/head%3E%3Cbody%3E'+%20jsArray.length+'%20Script(s)%20Found:');%20theWinref.resizeTo(600,200);theWinref.moveTo(0,0);%20%7D%20for%20(var%20i%20=%200;%20i%20%3C%20jsArray.length;%20i++)%20%7B%20scriptObj%20=%20jsArray%5Bi%5D;%20if(scriptObj.hasAttribute(%22src%22))%7B%20frameURL%20=%20scriptObj.getAttribute(%22src%22);%20theWinref.document.write(%22%3Cp%20style='background-color:%23999933;'%3EScript%20%22+eval(i+1)+%22%20via%20%22%20+%20frameURL%20+%20%22%3Cbr%3E%3Ciframe%20height='100%25'%20width='100%25'%20id='url%22+%20i%20+%20%22'%20src='%22%20+%20frameURL%20+%20%22'%3E%3C/iframe%3E%3C/p%3E%22);%20frameObj%20=%20theWinref.document.getElementById(%22url%22%20+%20i);%20%7D%20else%20%7B%20theHTML%20=%20scriptObj.innerHTML;%20theWinref.document.write(%22%3Cp%20style='background-color:%23999933;'%3EScript%20%22+eval(i+1)+%22:%3Cbr%3E%3Cpre%3E%22%20+%20theHTML%20+%20%22%3C/pre%3E%3C/p%3E%22);%20%7D%20%7D%20if(jsArray.length%20%3E%200)%20%7B%20theWinref.document.write('%3C/body%3E%3C/html%3E');%20%7D

특정 Scripts 실행 - 현재의 페이지 안에서 특정 JavaScript를 실행시킬 수 있게 하는 입력 대화상자를 표시함.

javascript:var%20c='document.location.href',r='';while(c=prompt(r+'Enter%20the%20code%20to%20be%20executed:',c)){try{r='Returned:%20'+eval(c)+'n';}catch(err){r='Error:%20'+err.message+'n';}}

배치 관련
테이블 보기 - 모든 테이블들의 열과 행의 테두리를 표시해 줌. 이것은 테이블들이 적당한 형태로 잘 자리잡고 있는지를 확인할 때 유용합니다.

javascript:var%20f=function(tt,col){var%20a=document.getElementsByTagName(tt);for(var%20b=0;b%3Ca.length;b++){a[b].style.border='1px%20solid%20%23'+col;}};f('table','00F');f('td','0F0');f('th','0FF');

DIV 테두리 보기 - 현재의 페이지에 있는 DIV 요소들 주위에 테두리를 표시해 줌.

javascript:var%20a=document.getElementsByTagName('div');for(var%20b=0;b%3Ca.length;b++){a[b].style.border='1px%20solid%20%23F00';}

DIV 테두리와 해당 ID 보기 - 현재의 페이지에 있는 DIV 요소들 주위에, 테두리와 함께 해당 ID를 표시해 줌.

javascript:var%20a=document.getElementsByTagName('div');var%20aspan;var%20txtNode;for(var%20b=0;%20b%20%3C%20a.length;b++){%09a[b].style.border='1px%20solid%20red';%09%09if(a[b].id%20!=%20''){%09%09aspan%20=%20document.createElement('span');%09%09aspan.setAttribute('id',%20't_ttp'%20+%20a[b].id);%09%09aspan.setAttribute('style',%20'position:relative;top:1px;left:1px;%20margin:10px%200px%200px%2010px;background-color:%20beige;max-width:220;padding:%202px%2010px%202px%2010px;border:%201px%20solid%20%23C0C0C0;font:%20normal%2010px/12px%20verdana;color:%20%23000;text-align:left;display:%20block;');%09%09txtNode%20=%20document.createTextNode('div:%20'%20+%20a[b].id);%09%09aspan.appendChild(txtNode);%09%09a[b].appendChild(aspan);}}

Outline 테두리 보기 - 현재의 페이지에 있는 HTML 요소들의 Outline을 표시해 줌. 여기서 보여지는 테두리(CSS Outline)는 일반 테두리(Border)와 달리 공간을 차지하지 않고 객체들의 테두리 위에 그려지게 됩니다.

javascript:(function()%7B%20function%20mark(elem)%20%7B%20if(elem.style)%20%7B%20elem.style.outline=%221px%20solid%20green%22;%20%7D%20%7D%20;%20function%20recurse(elem,p)%20%7B%20var%20i,%20k,%20cn;%20if(!elem)%20%7B%20alert(%22null%22);%20return;%20%7D%20mark(elem);%20cn%20=%20elem.childNodes;%20if(cn)%7B%20k%20=%20cn.length;%20for%20(i%20=%200;%20i%20%3C%20k;%20i++)%20%7B%20recurse(cn%5Bi%5D,%20p%20+%20%22.%22%20+%20i);%20%7D%20%7D%7D%20recurse(document,%22d%22);%20%7D)();

현재의 페이지안에 포함된 그림들을 새 창에서 보기 - 현재의 페이지안에 있는 모든 그림들을 새 창을 열어서 따로 보여 줌.

javascript:if%20(false)void('View%20images%20script%20by%20Tantek%20Celik%20-%20modified%202003.02.11');var%20n%20=%20(window.location.toString().replace(/[^a-z0-9]/gi,'_'))+'_im';var%20sn%20=%200,ud,i=0,r='/r';var%20ss%20=%20r;l=document.images.length;if%20(l==0)%20alert('No%20images%20to%20see%20here.%20Move%20along.');else%20for%20(i=0;i%3Cl;i++){var%20s%20=%20document.images[i];var%20u%20=%20s.src;if%20(u!=''%20&&%20u!=ud%20&&%20ss.indexOf(r+u+r)==-1){%20ss+=u+r;sn++;var%20w=window.open(s.src,n+sn,'height='+Math.max(s.height,32)+',width='+Math.max(s.width,32)+',status=no,location,menubar,resizable,scrollbars');w.focus();}}void(20030211);

Web 표준 확인
현재의 페이지 HTML 표준 확인 - HTML 표준 확인을 위해 현재의 URL을 W3로 보내 줌. 여기서 URL은 방화벽 밖에서도 잘 보여야 합니다.

javascript:void(document.location='http://validator.w3.org/check?uri='+document.location);

현재의 전체 웹 사이트 HTML 표준 확인 - 전체 웹 사이트의 HTML 표준을 확인함.

javascript:void(document.location='http://htmlhelp.com/cgi-bin/validate.cgi?url='+document.location+'&warnings=yes&spider=yes');

현재의 페이지 CSS 표준 확인 - CSS 표준 확인을 위해 현재의 URL을 W3로 보내 줌. 여기서 URL은 방화벽 밖에서도 잘 보여야 합니다.

javascript:void(document.location='http://jigsaw.w3.org/css-validator/validator?uri='+document.location);

현재 페이지의 Links (HREFs) 표준 확인 - Link 표준 확인을 위해 현재의 URL을 W3로 보냄. 여기서 URL은 방화벽 밖에서도 잘 보여야 합니다.

javascript:void(document.location='http://validator.w3.org/checklink?url='+document.location);

Feed(ATOM, RSS) 표준 확인 - Feed를 Feed Validator에서 표준 확인. 여기서 Feed URL은 방화벽 밖에서도 잘 보여야 합니다.

javascript:window.open('http://feedvalidator.org/');

창 크기 조절
PocketPC iPaq 240x320 - 창 크기를 230x320 pixels 크기로 조절.

javascript:void(window.resizeTo(240,320));

TV safe 544x372 - 창 크기를 544x372 pixels 크기로 조절.

javascript:void(window.resizeTo(544,372));

VGA 640x480 - 창 크기를 640x480 pixels 크기로 조절.

javascript:void(window.resizeTo(640,480));

SVGA 800x600 - 창 크기를 800x600 pixels 크기로 조절.

javascript:void(window.resizeTo(800,600));

XGA 1024x768 - 창 크기를 1024x768 pixels 크기로 조절.

javascript:void(window.resizeTo(1024,768));

SXGA 1280x1024 - 창 크기를 1280x1024 pixels 크기로 조절.

javascript:void(window.resizeTo(1280,1024));

UXGA 1600x1200 - 창 크기를 1600x1200 pixels 크기로 조절.

javascript:void(window.resizeTo(1600,1200));

이것들 외에도 Web 개발에 도움이 될 만한 Safari 관련 유용한 정보들을 아래의 곳에서 얻으실 수 있습니다.
Apple 개발 문서 - Safari에 대해 자주 묻게 되는 질문들과 답변

위와 비슷한 기능들을 Safari의 메뉴에 따로 추가해서 사용할 수 있게 하는 도구로 Safari WebDevAdditions 그리고, Safari에 표시되어 있는 현 웹 페이지를 해부해서 CSS 분석 및 편집을 용이하게 해 주는 Xyle scope를 추가하면 Safari에서 훌륭한 웹 개발 환경을 갖출 수 있을 것 같습니다.
또한, Mozilla Firefox를 사용하시는 분들은 비숫한 기능의 도구 막대를 추가해 주는 Web Developer Extension도 있네요. 이것도 CSS의 실시간 편집이 가능합니다.

+ ♥ = ∞²

miname씨의 웹사이트

인용 글 1

2 miname께서 작성한 댓글

  • miname
  • 관리자
  • 접속 안 함
  • 가입 날짜: 2004-08-23
  • 작성글: 510

댓글: Web 개발자들을 위한 웹 브라우져의 책갈피 도구들

RSS 신호에 걸린 글들을 읽다가 아주 기발한 아이디어에서 출발한 FormTextResizer bookmarklet 소개의 글이 눈에 띄어서 여기에도 달아둡니다.

가끔가다 댓글을 달거나 폼(forms) 항목들을 채울 때, 글자 항목들의 빈 칸이 입력 내용에 비해 너무 작게 느껴질 때가 있을 겁니다. 이럴 때 책갈피에 등록해 둔 FormTextResizer bookmarklet을 선택하면 실시간으로 원하는 textarea나 text field의 크기를 조절할 수 있게 됩니다. textarea의 경우, 상하좌우로 크기로 조절할 수 있고, text field의 경우에는 좌우 크기만 조절 가능합니다. 그리고 Safari에서는 커서가 폼 요소의 테두리 위에 위치할 때에만 크기 조절 커서로 바뀌게 된답니다.

bookmarklet으로의 사용은 아래의 코드를 복사해서 FormTextResizer의 이름으로 추가한 새로운 책갈피 항목의 주소 부분에 붙여두면 됩니다.

javascript:TxtRsz={formEl:null,adEv:function(t,ev,fn){if(typeof%20document.addEventListener!='undefined'){t.addEventListener(ev,fn,false)}else{t.attachEvent('on'+ev,fn)}},rmEv:function(t,ev,fn){if(typeof%20document.removeEventListener!='undefined'){t.removeEventListener(ev,fn,false)}else{t.detachEvent('on'+ev,fn)}},init:function(){var%20textareas=document.getElementsByTagName('textarea');for(var%20i=0;i%3Ctextareas.length;i++){textareas[i].style.cursor='se-resize'}var%20inputs=document.getElementsByTagName('input');for(var%20i=0;i%3Cinputs.length;i++){if(inputs[i].type=='text'){inputs[i].style.cursor='e-resize'}}TxtRsz.adEv(document,'mousedown',TxtRsz.initResize)},initResize:function(event){if(typeof%20event=='undefined'){event=window.event}var%20target=event.target||event.srcElement;if(target.nodeName.toLowerCase()=='textarea'||(target.nodeName.toLowerCase()=='input'&&target.type=='text')){TxtRsz.formEl=target;TxtRsz.formEl.startWidth=TxtRsz.formEl.clientWidth;TxtRsz.formEl.startHeight=TxtRsz.formEl.clientHeight;TxtRsz.formEl.startX=event.clientX;TxtRsz.formEl.startY=event.clientY;TxtRsz.adEv(document,'mousemove',TxtRsz.resize);TxtRsz.adEv(document,'mouseup',TxtRsz.stopResize);try{event.preventDefault()}catch(e){}}},resize:function(event){if(typeof%20event=='undefined'){event=window.event}try{TxtRsz.formEl.style.width=event.clientX-TxtRsz.formEl.startX+TxtRsz.formEl.startWidth+'px'}catch(e){}if(TxtRsz.formEl.nodeName.toLowerCase()=='textarea'){TxtRsz.formEl.style.height=event.clientY-TxtRsz.formEl.startY+TxtRsz.formEl.startHeight+'px'}},stopResize:function(event){TxtRsz.rmEv(document,'mousedown',TxtRsz.initResize);TxtRsz.rmEv(document,'mousemove',TxtRsz.resize);var%20textareas=document.getElementsByTagName('textarea');for(var%20i=0;i%3Ctextareas.length;i++){textareas[i].style.cursor='text'}var%20inputs=document.getElementsByTagName('input');for(var%20i=0;i%3Cinputs.length;i++){if(inputs[i].type=='text'){inputs[i].style.cursor='text'}}}};TxtRsz.init();

자주 사용할 일은 없겠지만, 그래도 기발한 아이디어를 시작으로 해서 여러 적용 가능성들 중 하나의 훌륭한 본보기를 보는 것 같군요. cool

+ ♥ = ∞²

miname씨의 웹사이트

인용 글 2

3 miname께서 작성한 댓글

  • miname
  • 관리자
  • 접속 안 함
  • 가입 날짜: 2004-08-23
  • 작성글: 510

댓글: Web 개발자들을 위한 웹 브라우져의 책갈피 도구들

Safari를 위한 유용한 도구들을 소개해 놓은 PimpMySafari에도 이 곳에 소개된 것들을 포함해서 추가로 여러 유용한 bookmarklet들이 소개되어 있군요. wink

+ ♥ = ∞²

miname씨의 웹사이트

인용 글 3

4 miname께서 작성한 댓글

  • miname
  • 관리자
  • 접속 안 함
  • 가입 날짜: 2004-08-23
  • 작성글: 510

댓글: Web 개발자들을 위한 웹 브라우져의 책갈피 도구들

Microformats Bookmarklet - 선택하면 현 페이지에 있는 모든 hCards와 hCalendars를 포함하는 창이 나탸나고, 여기서 특정 항목을 선택하면.vcf 혹은 .ics 파일로 저장할 수 있게 됨.

del.icio.us에 현재 보이는 페이지를 책갈피 해두기 (코드에 있는 계정이름은 자기의 것으로 대신 넣어주어야 합니다) :

javascript:location.href='http://del.icio.us/계정이름?v=3&url='+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title)
+ ♥ = ∞²

miname씨의 웹사이트

인용 글 4

5 miname께서 작성한 댓글

  • miname
  • 관리자
  • 접속 안 함
  • 가입 날짜: 2004-08-23
  • 작성글: 510

댓글: Web 개발자들을 위한 웹 브라우져의 책갈피 도구들

jQuery JavaScript Library를 원하는 웹 페이지에다가 심어넣는 책갈피입니다.

javascript:var%20s=document.createElement('script');s.setAttribute('src',%20'http://jquery.com/src/jquery-latest.js');document.body.appendChild(s);s.onload=function(){/*Your%20Code%20Here*/};void(s);

특정 웹 페이지에 심어놓고 Firefox 용 웹 개발 도구인 Firebug의 Console에서 원하는 jQuery 기능을 불러와서 바로 적용시켜 볼 수 있습니다.
사용 요령은 위 책갈피를 공개한 John Resig씨의 블로그에 있는 Hacking Digg With Firebug and jQuery라는 제목의 글에 있는 screencast에서 확인하실 수 있습니다.

위 책갈피는 jQuery를 불러온 후에 이를 비러 특정 웹 페이지에서 구현하고자 하는 자기만의 특정 Javascript 코드를 실행시킬 수 있게 수정할 수도 있답니다.

책갈피 속에 포함된 Javascript 라이브러리의 주소를 jQuery 말고 다른 Javascript 라이브러리들의 주소로 대치하면 더 손에 익은 개발 환경을 구현할 수도 있겠군요.

+ ♥ = ∞²

miname씨의 웹사이트

인용 글 5

6 miname께서 작성한 댓글

  • miname
  • 관리자
  • 접속 안 함
  • 가입 날짜: 2004-08-23
  • 작성글: 510

댓글: Web 개발자들을 위한 웹 브라우져의 책갈피 도구들

Web Development Bookmarklets - 웹 개발에 유용하게 쓰일 알짜배기 책갈피들이 모여있군요. 물론, 요샌 Firebug나 Web Inspector에서 대부분의 기능들을 사용할 수 있습니다만, 간단한 일에는 클릭만으로 원하는 기능을 수행할 수 있는 장점도 있겠지요.

+ ♥ = ∞²

miname씨의 웹사이트

인용 글 6

7 miname께서 작성한 댓글

  • miname
  • 관리자
  • 접속 안 함
  • 가입 날짜: 2004-08-23
  • 작성글: 510

댓글: Web 개발자들을 위한 웹 브라우져의 책갈피 도구들

YouTube에서 고해상도 HD 영상의 재생을 지원하기 시작했군요.
발빠르게도 재생되는 해당 HD 영상을 자동으로 내려받게 해주는 bookmarklet이 등장했습니다.

YouTube HD DL :

javascript:(function(){var%20myframe=document.createElement('iframe');var%20myurl='http://www.youtube.com/get_video?fmt=22&video_id='+swfArgs['video_id']+'&t='+swfArgs['t'];myframe.src=myurl;myframe.style.display='none';document.body.appendChild(myframe);})();void(0);

참고로 모든 YouTube 영상이 HD를 지원하는 것이 아니라서, 지원되는 영상만 내려받을 수 있습니다.
이럴 경우, 비교적 고해상도 영상을 아래의 bookmarklet으로 내려받을 수도 있습니다.

YouTube SD DL:

javascript:(function(){var%20myframe=document.createElement('iframe');var%20myurl='http://www.youtube.com/get_video?fmt=18&video_id='+swfArgs['video_id']+'&t='+swfArgs['t'];myframe.src=myurl;myframe.style.display='none';document.body.appendChild(myframe);})();void(0);
+ ♥ = ∞²

miname씨의 웹사이트

인용 글 7

8 miname께서 작성한 댓글

  • miname
  • 관리자
  • 접속 안 함
  • 가입 날짜: 2004-08-23
  • 작성글: 510

댓글: Web 개발자들을 위한 웹 브라우져의 책갈피 도구들

Weekly Freebies: 15+ Useful Bookmarklets for Designers | Design Shack
쓸모가 있는 게 많군요.

+ ♥ = ∞²

miname씨의 웹사이트

인용 글 8