3단 레이아웃의 문제점

SitePen Blog의 "Retiring the 3-Column Layout"의 핵심만 살펴보면 다음과 같습니다.

3단 레이아웃을 쓰면 다음과 같은 문제가 발생할 수 있습니다.

1. 사용자의 주의(Attention)를 중앙에 위치한 컨텐트 영역으로 이끈다고 생각되나 실제의 경우를 살펴보면 사이드바의 영역과 네비게이션 영역으로 인하여 사용자 주의가 흐트러지는 것을 볼 수 있다.
   
   
2. 많은 영역을 업데이트 해야하기 때문에 컨텐트의 추가가 늦어지거나 각각의 컬럼들을 어떠한 것으로 채워야 하는 심리적 압박감에 놓일 수 있습니다. 컨텐트 메니저가 사용자의 목적에 최적화 되지 않은 컨텐트들로 비어있는 컬럼들을 채우게 될 때 너무나 많은 링크와 텍스트 잡음들이 생길 수 있습니다.
   
   
3. 네비게이션 컬럼이 보통 페이지에서 페이지로 유지되는 반면에, 보조적인 역할을 하는 세 번째 컬럼의 경우 일반적인 웹환경에서는 어떠한 역할을 하는 지 예측하기가 어렵습니다. 이러한 영향은 사용자가 세 번째 컬럼의 페이지들이 어떠한 링크와 특징들을 가지고 있는지에 대해서 다시 분석해야 번거로움을 가지고 있습니다.

그러나, 사용자들의 주의를 흐뜨러트려서 사이트에 더 오래 머물게할 수 있으면 사장님은 좋와하십니다;;;

출처: SitePen Blog - Retiring the 3-Column Layout
이미지 출처: Tucow - Breaking Away From Table Based Layout, Part 2

The Proper naming pattern

Jon Aquino 씨의 블로그에 The Proper naming pattern라는 글이 올라왔습니다.
코딩을 하다보면 기존의 인터페이스를 유지해야하면서 동일한 동작(부분적으로 다른)을 하는 코드를 작성해야하는 경우가 있습니다. addAttachment()를 addAttachment2()로 다시쓰는 경우가 있죠. 이런 경우에 어떻게 메소드의 이름을 작성할 것인가에 대한 글인데요.

addAttachment: function() {
  // 다른 부분
  this.addAttachmentProper();
}

addAttachmentProper: function() {
  // 변경된 코드
}

이러한 경우에는 Proper를 사용하는 게 좋다라고 예기를 합니다. Proper에는 메소드가 동일한 동작을 하는 그(The) 함수라는 의미를 포함해서 나타낼 수 있습니다.

출처: Jon Aquino, The Proper naming pattern

php, ImageMagick이 설치되어 있을 때, bmp를 gif로 바꾸기[허접;;]

php와 ImageMagick이 설치되어 있는 환경에서 bmp를 gif로 바꾸는 프로그램을 짜보았습니다. 쉽게 변환해주는 툴이 있을까해서 찾아봤는데 잘 안보여서요. 프로그램의 동작은 간단합니다.

1. 이미지 파일들이 위치한 디렉토리의 파일들을 읽어옵니다.
2. .bmp 파일이 있는 경우
3. 해당하는 파일의 이름에 확장자를 바꾼 gif 파일을 만들어 준 다음에
4. ImageMagick의 convert 명령어를 사용하여 file.bmp를 file.gif로 변경해줍니다.

// bmp 파일이 위치할 디렉토리입니다. 
$dir = "C:/workspace/resource/";
$fileList = scandir($dir) or die("scandir failed");

foreach ($fileList as $file) {
  	$index = strpos($file, '.bmp');
  	if ( $index !== false ) {
  		$fileName = substr($file, 0, strpos($file, '.'));
  		$cmd = 'convert '.$dir.$file.' '.$dir.$fileName.'.gif'; 

  		exec($cmd, $rtnarr, $rtnval);	
  		if($rtnval) {
			echo $cmd." - ".$rtnval."\n";
  		}
  	}
}

그냥 심심해서(?) 짜봤습니다. ^^;;; 짜다보니 얻은 교훈 exec 실행할 때 전체 경로를 포함하지 않으니 실행이 안되네요. ~~

ReadWriteWeb - Googlebot Crawls Through HTML Forms

ReadWriteWeb에 'Googlebot Crawls Through HTML Forms'라는 기사가 올라왔습니다.

• Googlebot web crawler would begin to fill out HTML forms and crawl the results.
  
• only crawling GET forms and not POST forms

구글봇이 Form의 내용을 채워서 실행한 다음에 얻어지는 결과물을 크롤링하며 robots.txt에서 크롤링을 거부하는 경우에는 크롤링하지 않는다고 하네요. (조만간에 POST도 하겠죠? ^^;;;)

출처: 'Googlebot Crawls Through HTML Forms' - ReadWriteWeb

Silverlight을 사용하는 경우에 검색은 어떻게 하는가?

오늘 준서아빠님의 Silverlight 세미나를 들었습니다. 평소 궁금했던 내용을 질문했었는데요.

Silverlight을 사용하는 경우 검색엔진에서는 Silverlight의 내용을 검색할 수 있는가를 물어보았습니다.

Silverlight의 경우 배포 시에 xap 파일로 배포가 되는데 실제로는 zip포멧이라고 하네요. 그래서, 검색엔진에서 xap을 만나는 경우 unzip하여 파일을 푼 다음에 xaml 파일의 내용을 검색해서 어떠한 파일인지를 확인한다고 합니다. (준서아빠의 말씀으로는 구글의 경우 이미 xap에서 xaml파일을 분석해서 검색결과로 사용하고 있다고 합니다.)

준서아빠님 세미나 너무 재미있게 잘 들었습니다. 수고 많으셨습니다. (__)

P.S.> 세미나에서 본 내용대로 준서아빠님의 블로그에 들어가서 Silverlight을 설치하고 브라우져를 재시작했음에도 Firefox에서는 안보이는군요;;;;;;;

어머니께 용돈을 드렸더니...

숨겨두신(?) 마일리지를 주셨습니다. 아싸~ ^^

다시 한 번 유럽을 ???? -_-b

Undefined Coupon

볼 수록 가슴아파 보이는 쿠폰... 남일이 아니에요~ ^^;;

Element가 Select 되지 않게 하려면~

Element를 drag하는 경우 이를 처리하는 방법에 대해서 검색을 해보다가 Mootools의 ticket#663 글에서 다음과 같은 내용을 발견하였습니다.

Element.implement({
    disableSelection: function () {
        if (Browser.Engine.gecko) {
            this.style.MozUserSelect = 'none';
		} else if (Browser.Engine.webkit) {
			this.style.KhtmlUserSelect = 'none';
        } else if (Browser.Engine.trident || Browser.Engine.opera) {
			this.unselectable = 'on';
		}
		return this;
    }
});

IE에서의 Unselectable만 알고 있었는데 Firefox의 MozUserSelect와 Webkit의 KhtmlUserSelect도 'none'으로 값을 설정함으로서 Select가 안되게 설정이 가능하군요.

관련자료 :

• Mootools의 ticket#663
  
• Ajax Cookbook의 Disable Text Selection

대한항공에서 상파울루 취항한다고 하는군요~

드디어 남미 직항(?)이 생기기는 했는데 돌아올 때 걸리는 시간이 이틀이군요;;;;
(직항은 아니네요. 로스엔젤레스 경유니.. 그래도 같은 비행기겠죠? )

오~ 중요한 사실 하나 발견했습니다. 마일리지 공제표에 남미가 추가되었습니다. ^^
십만 마일 모아두면 남미를 갈 수 있군요 (십사만 마일이면 세계 일주를 갈 수 있기 때문에 그다지 매력있다고는 느껴지지 않지만... ㅋㅋ)

출처: 대한항공, 이미지 및 캡쳐한 내용은 대한항공 사이트의 내용을 캡쳐한 내용입니다. => 저작권은 대한항공에 있습니다.

크레마 디 카페

저번 주 금욜에 크레마 디 카페에 갔습니다. (불행히도 레이님을 만나지는 못했습니다.) 테이블 두 개의 작은 카페였는데 커피가 참 맛있더군요. (사실은 바닐라 아이스크림을 탄 달달한 커피라서 -_-;;) 파란색의 벽 색깔이 마음에 들어서 찍었는데 폰카라 잘 못나왔군요.

역시... 서브 카메라를 사야 될 운명이란 말인가!!! (지르기 위한 꺼리 찾는 중;;;)

현대미술관

바르셀로나, 현대미술관

플라멩고

비록 관광객들만 가는 작은 바의 무대였지만
박수소리와 함께 현란한 발스텝의 기억은 플라멩고의 즐거운 기억으로 남아 있습니다.

"요즘 무릎은 괜찮으세요?" ^^

뉴스를 볼 때의 나만의 사용성

저의 경우 아침과 저녁에 포탈에서 뉴스를 봅니다. (사용하는 브라우저는 Firefox 이구요)

첫 메인(포탈)에 들어가서는 목록들을 살핀 후에 관심있는 뉴스 링크를 선택한 후에 Ctrl과 Shift를 누른 후 해당하는 링크를 클릭(Ctrl +Shift +Click)해서 읽을 뉴스들을 멀티탭의 창에 띄워 놓습니다.
 

그리고 멀티탭의 창을 클릭하면서 관심있는 기사를 쭉 읽어보는 편입니다.

그런데, 모 사이트의 경우 뉴스의 링크를 일반 링크가 아닌 javascript 링크로 모두 처리를 하더군요.
그 결과 Ctrl+Shift+Click을 하는 경우 탭에 창이 뜨는 것이 아니라 일반적인 Click만 발생하게 됩니다.

해당 사이트에 뉴스를 보러가지 않으면 되는 문제이기는 하지만, 사용자의 일반적인 경험(? - 제가 특이할 수도 있습니다.)을 고려하지 않은 개발이 아닐까 생각되네요.


흠.. 기술의 차이일까요? ^^;;;

오기사, 여행을 스케치하다.

오기사 님의 책을 접한지 3년 반
오기사 님의 여행을 보면서 재미를 느꼈고, 공감이 갔고 부러웠습니다.
오기사 님이 여행을 마치면서 지나왔던 여행이 아닌 여행의 추억, 기억에 관해서 풀어 놓은 책을 보면서

여행의 마지막에 아쉬움을 느끼게 합니다.
덕분에 바르셀로나 여행을 갔었고, 바르셀로나에서 길을 잃어버리지 않았었고 즐거운 여행을 했었습니다. ^^

'오기사디자인'의 성공을 기원합니다.


가끔 여행 책 더 출간해주세요;;;;;

오기사 여행을 스케치하다 상세보기

오영욱 지음 | 예담 펴냄

<오기사, 행복을 찾아 바르셀로나로 떠나다>의 저자의 신작 여행 에세이『오기사 여행을 스케치하다』. 이 책은 여행하듯 삶을 살아가는 저자의 16개국 50여 개의 도시를 정리한 것으로 수첩에 적어두었던 짧은 메모와 함께 블로그에 기록해 두었던 작은 사건들, 신문과 잡지에 전한 이야기, 스케치북에 그린 그림들과 카메라로 찍은 사진들을 모았다. 저자는 이 여행을 통해 특별한 경험의 여행이 아니라 일상의 연장으로

미로, Woman and Bird

미로(Joan Miró)의 Woman and Bird

해질녘 구름

해질녘 무렵의 구름을 바라보다보면 괜히 마음이 들뜬다.
돌아갈 집도 기다리는 사람도 없는 그 곳이지만..

티스토리 -_-;;;

테터에서 티스토리까지 거의 3~4년 정도를 써온 블로그입니다.
요즘들어 스팸 트랙백이 갑자기 넘쳐서 문의 메일을 보내려고 했더니 접속 장애가 나더군요.

카테고리는 Tistory 고객제안 하나있고 메일보내기는 됬다 안됬다하고 안되서 전화해서 확인해보라하더니 우리는 3번 이상 동일한 현상이 나와야 개발자한테 연락한다고 하는군요.

TextCube로 옮겨갈 때가 되었나 봅니다. 쩝...

골목길

P.S. > 주변에 누구는 오키나와간다고 하고 누구는 뉴욕간다고 하고 누구는 큐슈간다고 하고 누구는 베이징 갔고 휴가철도 아닌데 많이들 나가네요~ 휴~

Firebug의 "$1"

"Firebug에는 현재 선택된 노드를 가리키는 $1이라는 변수가 있다"라는 글을 보았습니다. (저만 몰랐나요? ^^;;)

dijit.byNode($1)을 감싸는 pre 태그에 id로 test_code를 설정해 주었구요. Firebug Console에 위의 코드를 입력하여서 pre 태그에 onclick handler를 넣었습니다.

그리고, 클릭을 하면 $1을 alert()을 사용하여 보여줍니다. 클릭할 때 selected된 node가 변경되므로 HTMLPreElement가 출력이 됩니다. $2는 $1 이전에 선택되었던 element를 보여준다고 하네요. ($$1을 사용하면 DOM tab에서 선택한 객체의 레퍼런스를 리턴한다고 하는데 저는 잘 안되네요. 되시는 분은 가르켜 주세요 ^^)

출처: Firebug +Dijit tips via Simon Willison's Weblog , Firebug의 Command Line 소개

OAuth??

요즘 OAuth에 관한 얘기가 많이 들려서 검색을 해봤습니다.  ^^

• S_H_KIM님의 OAuth 1.0 스펙 공개
  
• humbroll님의 표준으로 제기된 서비스간 API인증방식 OAuth1.0 !
• OAuth

두 분의 글을 읽으니 뭔가 감이 잡히는 것 같기는 한데 어렵네요;;;;