Firejune Blog

자바스크립트 협업 도구 JS Bin 설치하기

2010-08-31T03:00:57-07:00

JS Bin은 오픈소스 기반의 자바스크립트 협업 도구입니다. PHP로 만들어진 녀석이라 설치를 시도했습니다만, 구글의 Closure Compiler(JAVA)를 이용한 빌드 과정이 포함되어 있어서 걍 안쓰고 말았더랬습니다. 일반적인 웹 호스팅 서비스에서는 자바 서블릿을 실행할 수 없기 때문입니다. A.J님과 boxersb님이 설치하는 모습을 보고 "이거 서버 시스템 스킬을 익혀야 하나..."하는 생각을 하며 마냥 부러워만 하다가 꼼수가 떠올라 우회할 수 있는 몇가지 방법을 시도하여 성공했고 그 과정을 기록합니다.

1. github로 부터 소스를 내려받습니다.
2. 동봉된 sql 파일들을 DB에 등록합니다.
3. 동봉된 phpMake 파일을 phpMake.php로 이름을 변경하고 마지막 부분을 다음과 같이 편집합니다.

변경 전:

...
// google compile in to jsbin.VERSION.js
echo "Google compiler compressing...\n";
system ('java -jar "./lib/compiler.jar" --js="' . SPROCKETIZED . '" --js_output_file="' . PRODUCTION . '" --warning_level=QUIET');

unlink(SPROCKETIZED);
echo "Compressed: " . PRODUCTION . "\nFile size: " . filesize(PRODUCTION) . " bytes.\n";
?>

변경 후:

...
// google compile in to jsbin.VERSION.js
echo "Google compiler compressing...\n";

$ch = curl_init("http://closure-compiler.appspot.com/compile");
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_POST, 1);
curl_setopt($ch, CURLOPT_POSTFIELDS, "output_info=warnings&output_info=errors&output_info=statistics&output_info=compiled_code&output_format=json&compilation_level=SIMPLE_OPTIMIZATIONS&js_code=".urlencode(file_get_contents(SPROCKETIZED)));

$output = json_decode(curl_exec($ch));
curl_close($ch);

if ($output->compiledCode) {
  file_put_contents(PRODUCTION, $output->compiledCode, LOCK_EX);
  echo "Compressed: " . PRODUCTION . "\nFile size: " . filesize(PRODUCTION) . " bytes.\n";
} else {
  echo "Compile error!";
}
unlink(SPROCKETIZED);
?>

4. jsbin 폴더를 웹 서버에 업로드합니다.
5. 브라우저의 주소창에서 phpMake.php를 호출합니다.
6. 설치된 경로에서 작동여부를 확인합니다.

서버에서 자바 서블릿을 실행하는 부분을 구글에서 제공하는 Closure Compiler의 오픈 API를 사용하는 방식으로 변경한 것입니다. 결국 스크립트를 빌드하는 과정 때문에 설치를 못하고 있었던 것입니다. 더 쉬운 방법으로는 jsbin.com에서 이미 빌드되어 서비스 되고있는 /js/2.x.x/jsbin.js 파일을 저장하여 정적으로 호출해도 해결되는 문제인 것입니다. 더욱 자세한 설치 방법은 위 두 분의 포스팅을 참고하면 되겠습니다. 추가적으로 나름 한글화를 시도했으며, 루트에 설치하지 않아도 되도록 소스를 전반적으로 수정했습니다. 계정 인증으로 보안하고, 실제 서버에 있는 자바스크립트 리소스를 호출하여 편집할 수 있도록 손보면 온라인 에디터로도 손색이 없겠더군요. 이미 누군가 하고 있겠죠? 참 오랜만에 포스팅합니다. 개인사정으로 한동안 방치하게 될지도 모르겠습니다.

Comments(2) | Hits(505)

WebDevMobile 열린세미나 - CSS3 발표자료 공유

2010-08-14T04:24:44-07:00

슬라이드를 클릭한 후 방향키를 이용하여 다음으로 넘길수 있습니다.

WebDevMobile에서 주관하는 열린세미나에서 금일 발표한 슬라이드입니다. "CSS3의 속성들"을 소개하는 부분의 소스와 예제는 zenelements.com를 참고했으며, "구린 브라우저 사용자에게는 구린 사용 경험을 제공하자"라는 다소 괴변 스러운 메시지를 전달하고자 했습니다. 이번 역시 급조해서 만든 슬라이드라 진행이 순조롭지 못했고 주제와 내용이 일치하지 않는 구석이 있었습니다. 어째 저는 발표를 하면 할수록 더 못하는 것 같습니다. 그럼에도 즐겁게 경청해 주신 여러분께 진심으로 감사드립니다.

Comments(14) | Hits(1435)

ThinVNC 버전 0.9.0.10 업데이트

2010-07-29T09:50:12-07:00

ThinVNC는 브라우저만으로 데스크탑을 원격으로 제어할 수 있게 하는 소프트웨어입니다. 일전에 소개한 적이 있죠. 서버에 해당하는 PC에 ThinVNC를 설치하고 뷰어에 해당하는 클라이언트는 브라우저로 접속한 페이지인 것입니다. 최근 업데이트된 0.9.0.10 버전은 도저히 웹으로 구현한 것이라 믿기지 않을 정도로 속도가 향상되었고 쓸만한 기능들이 많이 생겼습니다. 프레젠테이션 도구가 추가되어 다른 사용자를 초대하고 관리할 수 있으며(암호 설정 가능), 현재 보여지는 화면을 모니터링 하고 화면에 떠 있는 특정 애플리케이션을 숨길 수도 있습니다. 이 밖에도 SSL 데이터 전송 방식이 추가되었으며, 윈도 서비스 모드로 실행할 수 있게 되었습니다. 그리고 기업 환경에서는 하나의 IP에 프록시 게이트웨이를 설정하여 ThinVNC가 설치되어있는 PC의 IP 또는 이름을 입력하여 접근할 수도 있습니다.

뷰어는 HTML5로 구현 되었습니다. 별도의 브라우저 플러그인이나 소프트웨어의 설치를 강요하지 않기 때문에 여러 사용자들을 손쉽게 초대하여 온라인 프레젠테이션을 하거나 교육하는 목적으로 사용하기에 적합하다고 합니다. ThinVNC는 윈도 2000/XP/2003/Vista/7/Server8에서 작동하고 HTML5를 지원하는 Firefox, Chrome, Opera, Safari 등의 브라우저를 이용하여 접속할 수 있습니다. 비영리 목적으로는 무료로 사용할 수 있으며, GPL 라이센스의 오픈소스 프로젝트입니다.

우리 회사에서도 관련 프로젝트를 진행 중이고 참여하고 있는데 살짝 위협적으로 느껴지는군요.

Comments | Hits(1487)

내 트위터 데이터 덤프하기 - twtdump.js

2010-07-25T02:41:17-07:00

트위터가 가진 데이터는 왜이리 가지고 싶은걸까요? 요 며칠동안 트위터에 저장된 데이터를 가져오기 위해 그들이 제공하는 오픈 API로 많은 삽질을 해 보았지만 이렇다 할 성과를 거두지 못했습니다. 얻은 결론은 오픈 API를 통해서는 트위터 사이트로 부터 얻어낼 수 있는 만큼의 데이터를 확보하기는 어렵다는 것입니다. 그래서 다음과 같은 북마클릿을 만들었습니다. 이 북마클릿은 트위터에서 현재 머무르고 있는 곳의 모든 자료를 JSON 스트링으로 만들어 줍니다. 예를들어 @사용자ID 를 클릭하여 멘션을 조회하는 상태라면 트위터 서비스에서 허용한 데이터 출력 범위 내의 모든 멘션 데이터를 JSON으로 만들어 주는 것입니다.

HTML로 부터 얻어내는 데이터는 다음과 같습니다.

{
  "user": {
    "screen_name": "zziuni",
    "profile_image_url": "http://a0.twimg.com/profile_images/1082290724/gravatar_normal.jpg"
  },
  "id": "19455882373",
  "text": "@firejune 큰일날뻔했군요.. waterjune.com 될뻔.. ㅡ ㅡ;",
  "source": "<a href=\"http://www.tweetdeck.com\" rel=\"nofollow\">TweetDeck</a>",
  "created_at": "Sun Jul 25 00:12:55 +0000 2010",
  "in_reply_to_status_id": "19431051539"
}

일단 이곳에서 필요로하는 최소한의 데이터 속성들만 수집하였으며 필요하면 더 많은 속성을 추출할 수도 있을 것입니다. ~~그리고 유기적으로 연결된 글들을 표현하기 위한 데이터이므로 "in_reply_to_status_id" 값이 없는 것들은 제외하였습니다.~~ 아래의 북마클릿을 브라우저의 북마크 바에 끌어다 놓고 트위터 페이지에서 추가된 북마클릿을 클릭하여 사용할 수 있습니다. 수집이 완료되는 즉시 결과을 페이지에 출력하며 AJAX 요청이 많이 일어나기 때문에 환경에 따라서는 수분이 소요될 수도 있습니다. 트위터가 사용하는 스크립트를 이용하기 때문에 나중에는 작동하지 않을 수도 있으니 필요한 분들은 지금 덤프하세요.

twtdump 북마클릿 - 이 링크를 브라우저의 북마크 바로 끌어다 놓으세요.
twtdump.js 스크립트 소스 - 직접 수정해서 사용하세요.

Comments | Hits(1093)

트위터의 @Anywhere API 사용하기

2010-07-16T07:31:35-07:00

위 다이어그램은 트위터에서 제공하는 OAuth API의 다이어그램입니다. OAuth는 외부(서드파티 애플리케이션)에서 계정을 인증할 수 있는 방법의 하나로써 사용자의 패스워드를 필요로 하지 않고 사용자의 데이터에 접근할 수 있게하는 토큰패싱 매커니즘입니다. 여러 서비스들이 이를 사용한 오픈 API를 제공하고 있습니다. 대표적으로 트위터에서 지원하고 있으며, Gmail도 OAuth API를 제공하겠다고 발표하여 이제는 오픈 ID의 개념으로 확산되고 있는 추세입니다. 외부에서 로그인을 필요로하는 정보를 취득하는 방법으로 계정 정보를 입력하는 절차를 거치는 것이 일반적이었습니다만, 제 3자에게 아이디와 비밀번호가 고스란히 노출되어 버리는 치명적인 단점이 있어 심각한 보안 문제를 야기할 수 있기 때문에 OAuth를 대안으로 삼고 있는듯 합니다. ~~최근 트위터는 OAuth API를 이용하는 서드파티 애플리케이션에 더 많은 혜택을 제공하는 방식으로 사용을 권장하고 있습니다.~~

얼마전에 트위터에서 발표한 @Anywhere는 자신의 사이트 또는 블로그에 트위터와 손쉽게 연동할 수 있게하는 자바스크립트 위젯 라이브러리입니다. 놀랍게도 서버를 거치지 않고 자바스크립트만으로 OAuth를 통해 인증하는 모습에 감탄하여 분석해 보았습니다. @Anywhere는 OAuth 2.0 API를 사용하더군요. 크로스-도메인 POST 요청이 일어나는 것을 확인해 보았더니 <iframe> 요소를 이용한 트릭입디다. 살짝 실망하고 더 파다보니 잡다한 자바스크립트 리소스들을 다수 호출하는 것도 마음에 들지 않더군요. 그래서 가벼운 OAuth 인증 라이브러리를 만들어 보려고 했습니다. 하지만 애초 목적과는 달리 @Anywhere의 API를 사용하는 재미에 흠뻑 빠져들고 말았습니다. 트위터의 @Anywhere 개발 문서에는 초심자를 위한 위젯 사용법만 나와있고 입맛대로 가지고 놀기에는 정보가 턱없이 부족해서 소스분석으로 알아낸 다소 불친절(?)한 명세들을 공개합니다. 위젯 생성관련 메서드는 이미 공개되어 있기 때문에 설명은 생략했고 자바스크립트만으로 서드파티 웹 애플리케이션을 개발할 수 있을 만한 REST API와 사용자 메서드들을 집중 공략했습니다. 대부분의 사용자 메서드는 통신이 발생하기 때문에 비동기식으로 작동하며 'is'로 시작하는 메서드가 아니면 jQuery처럼 체인 형식으로 작성할 수 있습니다.

Anywhere methods

twttr.anywhere : 초기화 arg1 = version or callback(client), arg2 = callback(client)
twttr.anywhere.config : 환경설정 arg1 = options
twttr.anywhere.signOut : 로그아웃

Client methods

client.signIn : 로그인
client.isConnected : 연결상태 확인
client.requireConnect : 연결 여부 확인
client.hovercards : 호버카드 생성
client.linkifyUsers : 트위터 사용자 링크 생성
client.tweetBox : 트위터 컨텐츠 입력창 생성
client.connectButton : 트위터 연결 버튼 생성
client.followButton : 팔로우 버튼 생성
client.one : EventProvider
client.trigger : EventProvider
client.bind : EventProvider
client.unbind : EventProvider

REST API methods

client.Base : 트위터 Base API
client.CurrentUser : 트위터 CurrentUser API
- block
- follow
- notifications
- report
- statics
- unblock
- unfollow
client.DirectMessage : 트위터 DirectMessage API
- send: DirectMessage
client.List : 트위터 List API
client.Place : 트위터 Place API
- find: Place
- nearby: Collection
client.SavedSearch : 트위터 SavedSearch API
client.SearchResult : 트위터 SearchResult API
client.Status : 트위터 Status API
- favorite : Status
- find : Status
- publicTimeline : Collection
- reply : Status
- retweet : Status
- search : Collection
- unfavorite : Status
- update : Status
client.User : 트위터 User API
- current : CurrentUser
- find : User
- findAll : Collection
- search : Collection

User methods

user.data : 사용자 정보 arg1 = attribute, arg2 = value
user.block : 블락 arg1 = options
user.follow : 팔로 arg1 = options
user.unblock : 언블락 arg1 = options
user.unfollow : 언팔 arg1 = options
user.update : 트윗 arg1 = string, arg2 = params
user.directMessage, user.dm : DM 발송 arg1 = string, arg2 = callback(object)
user.notifications : 휴대폰 기기 알림 arg1 = mode, arg2 = options
user.report : 스팸 신고 arg1 = callback(options)
user.lists : 리스트 목록 호출 arg1 = callback(array)
user.subscriptions : 리스트 구독자 목록 호출 arg1 = options
user.memberships : 리스트 멤버 목록 호출 arg1 = callback(array)
user.timeline : 타임라인 목록 호출 arg1 = callback(array)
user.favorites : 즐겨찾기 목록 호출 arg1 = callback(array)
user.followers : 팔로어 목록 호출 arg1 = callback(array)
user.friends : 친구 목록 호출 arg1 = callback(array)
user.isBlocking : 블락 여부 확인 arg1 = screenName, arg2 = callback(boolean)
user.isFollowedBy : 맞팔 여부 확인 arg1 = screenName, arg2 = callback(boolean)
user.isFollowing : 팔로우 여부 확인 arg1 = screenName, arg2 = callback(boolean)
user.isFriend : 친구 여부 확인 arg1 = screenName, arg2 = callback(boolean)
user.isMutual : 관계 여부 확인 arg1 = screenName, arg2 = callback(boolean)

Examples

<script src="http://platform.twitter.com/anywhere.js?id=YOUR_API_KEY&v=1"></script>
<script type="text/javascript">
  twttr.anywhere(function(client) {
    var currentUser, screenName, profileImage, profileImageTag;

    if (client.isConnected()) {
      currentUser = client.currentUser;
      screenName = currentUser.data('screen_name');
      profileImage = currentUser.data('profile_image_url');
      profileImageTag = "<img src='" + profileImage + "'/>";

      $('#connect-placeholder').append("Logged in as " + profileImageTag + " " + screenName);
    } else {
      client("#connect-placeholder").connectButton();
    };
  });
</script>

var footer = $('#hovercard-footer');
client.User.find(screenName).dm('당신을 언팔하고 블록했습니다. 안녕히 계세욧!').unfollow({
    success: function() {
      footer.addClass("following");
    },
    error: function(result) {
      if (result.status == 403 && result.response.error.match(/already requested to follow/))
        footer.addClass("follow-pending");
      else if (result.status != 401)
        footer.addClass("follow-alert");
    }
  }).block({
    success: function() {
      footer.addClass("blocking")
        .removeClass("sms-setting-not-off")
        .addClass("sms-setting-off")
    },
    error: function() {
      footer.removeClass("not-following").addClass("following");
    }
  });

이곳에 트위터와 연동한 댓글들의 툴팁은 완전히 커스토마이즈 된 것입니다. ~~아직 몇몇 알아내지 못한 기능과 버그들이 있긴 하지만요.~~ 변화가 느껴지지 않는 분들은 여기를 클릭하여 로컬-스토리지에 보관된 리소스 캐시를 수동으로 제거하세요.

* 댓글 및 툴팁 연동을 위한 Anywhere 클래스 생성
* 툴팁에 트위터 호버카드 타입 추가
* @Anywhere 자바스크립트 리소스를 로컬에서 호출하도록 수정
* @Anywhere OAuth 인증 후 호버카드 정보 및 액션 변경
* @Anywhere OAuth 인증 후 특정 대상 멘션 작성 기능 추가
* @Anywhere OAuth 인증 후 기본 댓글 작성을 트위터에 작성하는 기능 추가
* @Anywhere OAuth 인증 후 리트윗 작성 기능 추가
* Anywhere 클래스에 onSignIn, onSignOut, onInitialize 멀티플 콜백 추가

Comments(8) | Hits(3197)

인터넷 익스플로러 6-7-8에서 CSS3사용하기 - PIE

2010-07-13T19:14:11-07:00

PIE(Progressive Internet Explorer)는 인터넷 익스플로러 6-7-8에서 CSS3의 몇몇 속성들을 인식하고 출력하는 첨부파일(.htc)형식의 라이브러리입니다. 얼마 전에 소개했던 IE-CSS3와 마찬가지로 VML을 이용하며, behavior: url(PIE.htc);를 해당 속성에 작성하는 사용방법 역시 비슷합니다. 두드러진 차이점은 보다 많은 CSS3속성들을 지원하고 자바스크립트로 핸들할 수 있다는 것입니다.

border-radius
box-shadow
border-image
multiple background images
linear-gradient as background image

그리고 추가적인 CSS3 속성들을 표현하기 위해 개발중이라고 합니다. IE-CSS3 프로젝트를 포크한 냄새가 강하게 풍깁니다만 언급은 없군요. 아무튼 멋진 프로젝트입니다. 그럴싸한 도메인으로 서비스 되는 것으로 보아 뭔가 공식화 되는 느낌이 드네요.

Mmmmm, pie.

CSS3 features

border-radius

Enable

Radius size:

box-shadow

Enable

Blur size: X offset: Y offset:

linear-gradient

Enable

Top color: Bottom color:

Options

Enable PIE (only affects IE)
Show CSS

Comments(2) | Hits(2127)

순수 CSS3로 만든 페이지 넘기기 효과

2010-07-12T19:46:02-07:00

CSS를 예술의 경지까지 끌어올린 Román Cortés씨는 순수 CSS만으로 3D 패럴랙스 효과를 만들어 내고 콜라 캔과 찌그러진 콜라 캔을 입체적으로 매핑한 경험이 있습니다. 그는 이제 조금더 실용적인 곳에 CSS 테크닉을 적용하기 시작했습니다. 위 예제 역시 약간의 HTML과 CSS만을 이용하여 작성된 것이며 마우스 행동에 따른 책장을 넘기는 효과가 적용되어 있습니다. 마치 플래시로 구현한 듯한 애니메이션을 보여주며, 그라디언트와 쉐도를 적절히 이용하여 사실적으로 표현했습니다. 웹킷 기반의 크롬과 사파리 브라우저에서만 작동하며 iOS나 맥OS 위의 사파리에서는 transition 속성이 하드웨어 가속을 지원하기 때문에 매우 부드러운 애니메이션을 경험할 수 있습니다. iOS에서는 약간 뒤틀리긴 하지만요.

아... 요것이랑 비슷한 것을 자바스크립트로 구현하던 짱박아둔 예제가 있었는데 완전히 새 됐군요.

Comments(4) | Hits(3132)

이미지를 예쁘게 하는 CSS 보더

2010-07-08T23:47:08-07:00

Evan Byrne씨는 간단한 CSS 아이디어로 이미지를 더욱 예쁘게 표현하는 보더를 만드는 방법에 대하여 소개했습니다. 이것은 CSS 가짜 요소를 사용하는 방법입니다. <img>요소에는 가짜 요소를 사용할 수 없기 때문에 <span>요소를 추가하고 :after 가짜요소에 스타일을 지정합니다. 이때 font-size와 ine-height속성으로 보더와 이미지 사이에 생기는 공백을 제거해 주어었네요. 결과는 다음과 같습니다.

적용전:

적용후:

코드:

<span class="fancy">< img src="dingo.jpg" /></span>

.fancy{
	position:relative;
	display:inline-block;
	font-size:0;
	line-height:0;
}

.fancy:after{
	position:absolute;
	top:1px;
	left:1px;
	bottom:1px;
	right:1px;
	border:1px solid rgba(255,255,255,0.5);
	outline:1px solid rgba(0,0,0,0.2);
	content:" ";
}

보더와 겹친 이미지 영역이 살짝 묻어나오는 것이 마치 포토샵으로 처리한 것 같죠? CSS3의 명세인 RGBA로 색상을 지정했기 때문에 IE계열 브라우저에서는 작동하지 않습니다. ;)

Comments | Hits(1853)

스타크래프트 II 베타 패치 16

2010-07-08T07:32:19-07:00

일반

집결 지점을 지정하면 유닛이 이제 '공격 이동' 명령이 아닌 '이동' 명령을 받습니다.
플레이어의 캐릭터 코드를 이용해서 스타크래프트 II 캐릭터 친구를 추가하는 기능이 생겼습니다. 캐릭터 친구 코드는 서버에서 지정한 숫자 코드이고, 친구 추가 창에 있습니다.
Battle.net 업적과 보상이 더 새로워졌습니다. 이제 '빠른 대전'에서 1대1, 2대2, 3대3, 4대4, 개별 전투 등 가능한 모드를 모두 이용할 수 있습니다.
이제 모든 난이도의 인공지능과 플레이할 수 있습니다.
플레이 모드 중 인공지능 플레이어를 상대로 하는 협동전을 선택할 수 있습니다.
월드 오브 워크래프트와 스타크래프트 II에서 게임 간 통합 커뮤니티 기능을 지원합니다.

저그 밸런스 조정

감염충

광기 기술이 삭제되었습니다.

감염된 테란 기술이 추가되었습니다.
감시군주
감염된 테란 기술이 삭제되었습니다.
울트라리스크
기절과 정신 제어에 면역입니다.

드디어 최종 베타가 곧 시작된다고 합니다. 그리고 현재 16번째 패치를 적용할 수 있습니다. 업데이트하는 시간이 재법 걸리니 미리미리 적용해 놓으시기 바랍니다. 우후훗!

Comments(4) | Hits(1002)

Scripty2 하드웨어 가속 애니메이션 테스트

2010-07-07T01:43:57-07:00

Scripty2 프로젝트 오너인 Thomas Fuchs씨는 하드웨어 가속을 지원하는 애니메이션 테스트 페이지를 만들고 공개했습니다. 그가 말하는 하드웨어 가속은 맥OS와 iOS에서만 지원되는 CSS transforms을 이용하는 것으로 Effect.Morph을 이용한 자바스크립트 애니메이션에서 가속 지원여부를 판단하여 처리합니다. 그래서 맥OS용 사파리 또는 아이폰, 아이패드용 사파리에서만 하드웨어 가속을 경험할 수 있습니다.

반가운 소식으로는 올 여름 베타 테스트를 진행하게 될 것이라고 했습니다. 사용자 친화적인 API들, 하드웨어 가속을 지원하는 특수효과, 테마 지원, 확장 가능한 UI 컴포넌트들, 멀티-터치 지원, 그리고 API문서가 함께 공개된다고 합니다. 3년이라는 시간동안 겨우 알파 딱지를 떼는군요. 참 느긋한 분이에요.

Comments | Hits(1270)

Web Forms 2.0을 모든 브라우저에서 - webforms2

2010-07-06T04:31:50-07:00

HTML5 명세에 포함된 Web Forms 2.0을 이용하면 자바스크립트의 도움을 받지 않고도 입력 조건 설정이나 유효성 검사 및 오류 메시지 출력, 동적 레이블, 데이트 피커, 슬라이더 등의 막강한 기능들을 마크업만으로 사용할 수 있습니다. 그리고 IE 6, 7을 비롯한 HTML5를 지원하지 않는 일부 브라우저에서는 Weston Ruter씨가 만든 webforms2 자바스크립트 라이브러리를 이용하면 동일한 코드만으로 Web Forms 2.0을 사용할 수 있게 됩니다.

사용방법은 <head>요소 안에 webform2.js 파일를 로드하는 것입니다:

<script type='text/javascript' src='webforms2.js'></script>

Weston Ruter씨는 Web Forms 2.0 명세가 HTML5로 옮겨 가면서 기껏 만들어 놓은 반목 모델(Repetition model)이 제외(drop)되었었다고 합니다. 그래서 현재 프로젝트는 중단한 상태이며 모든 것이 명확해지면 작업을 재개하여 IE8을 포함한 더욱 많은 브라우저를 지원하게 될 것이라고 했습니다.

나중에 이 프로젝트가 완성되면 거의 필수 라이브러리가 되겠군요. 찜!

Comments(2) | Hits(1567)

HTML5 오픈 컨퍼런스 발표자료 공유

2010-07-02T06:31:05-07:00

슬라이드를 클릭한 후 방향키를 이용하여 다음으로 넘길수 있습니다.

금일 있었던 HTML5 오픈 컨퍼런스에서 발표한 자료를 공유합니다. 웹에 공개된 예제와 코드들로 구성했기 때문에 이미 알고 계신 분들도 있을 줄로 압니다. 발표를 앞두고 충분한 준비시간을 가지지 못해 실수가 잦았습니다. 전달해 드리고 싶은 내용이 많았지만 예상치 못한 상황들이 전개되는 바람에 엉뚱한 곳에 시간을 소비했습니다. 컨퍼런스 종료 후 나눠드린 "실전 HTML5 가이드"책자에 발표때 못다한 내용들이 실려있어 조금이나마 위안이 되는군요. 이번 행사를 진행하느라 고생하신 모든 분들과 여러모로 도움주신 FRENDS 회원님들 그리고 부족함에도 불구하고 재미있게 경청해 주신 여러분께 진심으로 감사드립니다.

Comments(14) | Hits(2956)

Momentile의 IE6 거부 메시지

2010-06-28T17:16:29-07:00

위 화면은 IE6으로 Momentile 웹 사이트에 접근시 나타나는 화면입니다. 왠지 IE6이 측은하게 느껴지네요.

Comments(3) | Hits(1727)

순수 CSS만으로 만든 iOS 아이콘들

2010-06-27T07:16:48-07:00

Louis Harboe씨는 순수 CSS만을 이용하여 iOS의 11개 아이콘들을 만들었습니다. 둥근 모서리, 그림자, 그라디언트, RGBA, 가짜 요소를 응용한 것이라고 합니다. CSS만으로 SVG수준의 리치 스타일링이 가능하다는 것을 보여주는 듯 합니다. 이 데모는 웹킷기반 브라우저에서 제대로 보이며 사파리에 최적화되었습니다.

280

−

73°

Comments(1) | Hits(1830)

스타일 시트를 경량화하는 11가지 팁

2010-06-22T23:33:10-07:00

Jeff Starr씨는 스타일 시트를 경량화(Micro-Optimization)하는 11가지 팁을 소개했습니다. 이것은 코드 전체를 압축(Minify)하는 것이 아닌, CSS 코드 자체를 효율적으로 작성하거나 배포하는 방법입니다.

Tip #1: 색상 값을 짧게 쓰기

색상을 지정하는 속성에 값을 기입할 때 가능하면 가장 짧은 값을 사용합니다.

article { background-color: rgb(255,255,255); } /* WTF? */
article { background-color: #ffffff; } /* better */
article { background-color: #fff; } /* good */

Tip #2: 중복되는 속성을 병합하기

반복적으로 중복되는 속성들은 통합합니다. 이 작업을 자동으로 처리해 주는 온라인 CSS 최적화 서비스도 있으니 참고하세요.

/* before */
#wrap p {
	font-family: Georgia, serif;
	font-weight: normal;
	line-height: 1.33em;
	font-size: 1.22em;
	}
	.
	.
	.
p {
	font-family: Georgia, serif;
	font-weight: normal;
	line-height: 1.33em;
	font-size: 1.33em;
	}

/* after */
p {
	font-family: Georgia, serif;
	font-weight: normal;
	line-height: 1.33em;
	font-size: 1.33em;
	}

Tip #3: 가능한 한 몰아쓰기

CSS 속성들 중에는 여러 값을 인식하는 것들이 있습니다. font나 background, padding, border 등이 그렇습니다. 이런 경우 한줄로 몰아씁니다.

/* before */
p {
	font-family: Georgia, serif;
	font-weight: normal;
	line-height: 1.33em;
	font-size: 1.33em;
	}

/* after */
p {
	font: normal 1.33em/1.33 Georgia, serif;
	}

/* these 4 properties */
background-color: #fff;
background-image: url(i/dope.png);
background-repeat: repeat-x;
background-position: 0 0;
 
/* can be written as */
background: #fff url(i/dope.png) repeat-x 0 0;

/* these 4 properties */
margin-top:    10px;
margin-right:  20px;
margin-bottom: 10px;
margin-left:   20px;

/* can be written as */
margin: 10px 20px 10px 20px;

/* these 3 properties */
border-width: 1px;
border-style: solid;
border-color: red;

/* can be written as */
border: 1px solid red;

Tip #4: 같은 값은 결합하기

padding 혹은 margin 속성의 값이 동일한 경우 통합하여 지정할 수 있습니다.

 /* before */
margin: 10px 20px 10px 20px;
padding: 10px 10px 10px 10px;

/* after */
margin: 10px 20px;
padding: 10px;

Tip #5: 불필요한 "0"은 생략하기

소수점 이하의 수를 사용하거나 무의마한 "0"은 생략할 수 있습니다.

/* before */
padding: 0.1em;
margin: 10.0em;

/* after */
padding: .1em;
margin: 10em;

Tip #6: 값이 "0"이면 단위 생략하기

값의 크기가 0이라면 단위는 생략해도 무방합니다.

/* before */
padding: 0px;
margin: 0em;

/* before */
padding: 0;
margin: 0;

Tip #7: 마지막 세미콜론 생략하기

속성 기입이 끝나는 마지막의 세미콜론(;)은 생략해도 무방합니다.

/* before*/
p {
	font-family: Georgia, serif;
	font-weight: normal;
	line-height: 1.33em;
	font-size: 1.33em;
	}

/* after */
p {
	font-family: Georgia, serif;
	font-weight: normal;
	line-height: 1.33em;
	font-size: 1.33em
	}

/* optimized */
p { font: normal 1.33em/1.33 Georgia, serif }

Tip #8: 배포하기 전 코멘트 제거하기

작업과정에서 주석을 사용하는 것은 분명 도움이 되고 협업에도 유리합니다. 그러나 사용자에게는 100% 불필요한 데이터이며 무의미한 서버자원과 대역폭을 소비하므로 배포하기 전에는 반드시 코멘트를 제거하도록 합니다.

Tip #9: 공백 제거하기

값을 구분하기 위한 공백을 제외한 나머지 빈 공간은 모두 제거합니다.

/* before */
body {
	font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
	background-color: #333;
	text-align: center;
	margin: 0px auto;
	font-size: 62.5%;
	color: #FFF;
	}

/* after */
body{font-family:"Trebuchet MS",Verdana,Arial,Helvetica,sans-serif;text-align:center;background:#333;margin:0px auto;font-size:62.5%;color:#fff}

Tip #10: 줄바꿈 제거하기

효율적인 관리를 위해 탭(또는 공백) 그리고 줄바꿈을 삭제합니다. 싱글-라인 포멧으로 작성하는 것이 미친짓으로 보일지 모르겠지만 의외로 실용적인 작성법입니다. 성능 향상을 꾀하면서도 스크롤을 줄일 수 있고 프로퍼티 단위 디버깅이 가능하기 때문입니다.

/* before */
hr {
	margin: 25px 0 25px 0;
	background: #CF7400;
	text-align: left;
	padding: 15px 0;
	display: block;
	border: 0 none;
	color: #CF7400;
	height: 1px;
	clear: both;
	width: 96%;
	}
acronym, abbr {
	border-bottom: 1px dotted #514031;
	cursor: help;
	}
ins { text-decoration: underline; }
del { text-decoration: line-through; }
sup {
	font-size: 10px;
	line-height: 0;
	color: #cccc99;
	}
em       { font-style: italic; }
small    { font-size: 10px;    }
strong   { font-weight: bold;  }
strong:target, h3:target, h4:target {
	background: #CF7400;
	padding-left: 25px;
	}
code, kbd, samp, tt, var {
	font-family: "Courier New", Courier, monospace, sans-serif;
	color: #cccc99; /* #cc9933 #cccc66 #cccc99 */
	font-size: 11px;
	}
	h3 code { font-size: 13px; }
pre {
	border-left: 1px solid #CF7400;
	padding: 10px 0 12px 10px;
	background: #3B2E22;
	overflow: auto;
	margin: 25px 0;
	width: 525px; /* 95% of 555px = 525px */
	}
	pre:hover {
		border-left: 1px solid #FFFFCC;
		background: #3B2E22;
		}


/* after */
hr { background:#CF7400;margin:25px 0;text-align:left;padding:15px 0;display:block;border:0 none;color:#CF7400;height:1px;clear:both;width:96%; }
acronym,abbr { border-bottom:1px dotted #514031;cursor:help; }
ins { text-decoration:underline; }
del { text-decoration:line-through; }
sup { font-size:10px;line-height:0;color:#cc9; }
em { font-style:italic; }
small { font-size:10px; }
strong { font-weight:bold; }
strong:target,h3:target,h4:target { background:#CF7400;padding-left:25px; }
code,kbd,samp,tt,var { font-family:"Courier New",Courier,monospace,sans-serif;color:#cc9;font-size:11px; }
h3 code { font-size:13px; }
pre { border-left:1px solid #CF7400;padding:10px 0 12px 10px;background:#3B2E22;overflow:auto;margin:25px 0;width:525px; }
pre:hover { border-left:1px solid #FFC;background:#3B2E22; }

Tip #11: CSS 유효성 검사하기

끝으로, W3C에서 제공하는 CSS 유효성 검사기를 이용하여 오류가 있는지를 검토하세요. 당신이 놓쳤을 수도 있는 잡다한 오류들을 빠르게 찾아줍니다.

Bonus Tips: 보너스 팁들

이 게시물을 작성하는 동안 몇 가지 다른 아이디어가 떠올랐습니다.

a:link, a:visited {} /* before */
a:link,a:visited{} /* after */

/* before */
h1{color:#111}
h2{color:#333}
h3{color:#777}

/* after */
h1{color:#111}h2{color:#333}h3{color:#777}

위에서 언급한 팁들 중에는 자동으로 처리할 수 있는 것들이 있습니다. 온라인 도구를 사용하거나 서비스 빌드과정에 포함하여 자동화 할 수도 있다는 사실을 잊지 마세요. 그리고 규모가 큰 프로젝트는 배포/개발 버전을 구분해서 관리하는 것이 가장 효율적입니다.

Comments(2) | Hits(2654)

HTML5 오픈 컨퍼런스 발표 참여

2010-06-22T02:01:43-07:00

과분하게도 한국 웹 표준 프로젝트에서 주최하는 "HTML5 오픈 컨퍼런스"에서 HTML5 자바스크립트 API에 대하여 발표하게 되었습니다. 학동 건설회관에서 7월 2일(금) 오후 1시에 시작합니다. 그런데 아쉽게도 예약 접수가 시작된지 24시간이 되기도 전에 650석이 모두 매진 되었다고 합니다. 지난 세미나 발표때 아쉬운 부분들을 보강해서 재미있게 진행해 볼 생각입니다. 벌써부터 후달리기 시작하네요.

Comments(7) | Hits(1332)

HTML5 모바일 웹 애플리케이션 개발 - Sencha Touch

2010-06-20T21:19:40-07:00

얼마전 ExtJS는 jQTouch와 Raphaël 프로젝트를 결합하고 회사이름을 "Sencha"로 변경했습니다. 이제부터 www.extjs.com은 www.sencha.com으로 이동됩니다. jQTouch와 Raphaël을 개발한 David Kaneda씨와 Dmitry Baranovskiy씨가 기존 ExtJS팀에 합류하여 Sencha를 구성합니다. 그리고 이들의 협업으로 모바일 디바이스에서 HTML5기반 리치 인터넷 애플리케이션 개발을 지원하기 위한 자바스크립트 프레임웍인 "Sencha Touch"를 배포했습니다. 향후 몇 년 동안은 리치 그래픽스와 터치 UI는 모바일 웹 애플리케이션 개발에 필수 불가결한 요소가 될 것이라고 전망했기 때문입니다.

Sencha Touch를 이용하면 애플의 iOS와 구글의 안드로이드와 같은 터치 스크린 기반의 모바일 디바이스에서 네이티브 애플리케이션 수준의 웹 애플리케이션을 개발할 수 있다고 합니다. 물론, 웹 표준 기술(HTML5, CSS3, Javascript)만을 이용하며, UI 컨트롤러 및 애니메이션 이펙트, 강력한 터치(혹은 멀티 터치) 이벤트 API 등을 제공합니다. 함께 공개한 데모인 KivaTouch, TouchSolitaire, 그리고 GeoCongress에서 직접 체험해 보세요.

Comments(3) | Hits(3574)

자바스크립트로 구현한 픽셀 벤더

2010-06-18T02:43:10-07:00

Ricardo Cabello씨는 몇년 전에 플래시용으로 작업한 픽셀 벤더를 자바스크립트와 Canvas 요소로 옮기는 실험을 했습니다. 이것은 출력되는 비트맵의 모든 픽셀에 수식을 적용하는 것입니다. 자바스크립트는 제법 빠른 수학 연산으로 비트맵을 그려내는 것을 확인할 수 있습니다. 그는 나중에 WebGL이 나오면 더욱 선명하고 빠르게 처리할 수 있을 것으로 기대하고 있습니다.

Comments | Hits(1593)

HTML5 데이터 비주얼라이제이션 - HumbleFinance

2010-06-17T19:34:59-07:00

NASDAQ:GOOG

1w 1m 3m 6m 1y 5y

HumbleFinance는 HTML5 데이터 비주얼라이제이션 도구입니다. 마치 플래시로 만들어진 듯한 모양과 기능을 가진 차트를 제공합니다. 표현 범위의 제한이 없고 서로 다른 자료의 축을 공유하여 비교해야하는 금융 자료를 2D 차트로 표현하기에 적합합니다.(Google Finance 와 유사한) 그리고 특정한 구간을 선택하여 확대할 수도 있습니다. Prototype과 Flotr 자바스크립트 라이브러리를 이용하였으며, 자바스크립트 변수에 저장된 데이터와 파라미터를 근거로 그래프를 표현하고 CSS와 HTML을 이용하여 컨트롤러와 플래그 모양을 만들었습니다.

HTML:

div id="finance">
    <div id="labels">
        <div id="financeTitle">NASDAQ:GOOG</div>
        <div id="time">
            <a onclick="HumbleFinance.zoom(5);">1w</a>
            <a onclick="HumbleFinance.zoom(21);">1m</a>
            <a onclick="HumbleFinance.zoom(65);">3m</a>
            <a onclick="HumbleFinance.zoom(127);">6m</a>
            <a onclick="HumbleFinance.zoom(254);">1y</a>
            <a onclick="HumbleFinance.zoom(1265);">5y</a>
        </div>
        <div id="dateRange"></div>
    </div>
</div>

Javascript:

Event.observe(document, 'dom:loaded', function() {
    HumbleFinance.trackFormatter = function (obj) {
        var x = Math.floor(obj.x);
        var data = jsonData[x];
        var text = data.date + " Price: " + data.close + " Vol: " + data.volume;
        return text;
    };
    
    HumbleFinance.yTickFormatter = function (n) {
        if (n == this.axes.y.max) return false;
        return '$'+n;
    };
    
    HumbleFinance.xTickFormatter = function (n) { 
        if (n == 0) return false;
        var date = jsonData[n].date;
        date = date.split(' ');
        date = date[2];
        return date; 
    }
    
    HumbleFinance.init('finance', priceData, volumeData, summaryData);
    HumbleFinance.setFlags(flagData); 
    
    var xaxis = HumbleFinance.graphs.summary.axes.x;
    var prevSelection = HumbleFinance.graphs.summary.prevSelection;
    var xmin = xaxis.p2d(prevSelection.first.x);
    var xmax = xaxis.p2d(prevSelection.second.x);
    
    $('dateRange').update(jsonData[xmin].date + ' - ' + jsonData[xmax].date);
    
    Event.observe(HumbleFinance.containers.summary, 'flotr:select', function (e) {
        var area = e.memo[0];
        xmin = Math.floor(area.x1);
        xmax = Math.ceil(area.x2);
        var date1 = jsonData[xmin].date;
        var date2 = jsonData[xmax].date;
        $('dateRange').update(jsonData[xmin].date + ' - ' + jsonData[xmax].date);
    });
});

ExplorerCanvas를 이용하면 완벽하지는 않지만 IE계열 브라우저에서도 사용할 수 있습니다.

Comments | Hits(1923)

Hex 코드로 색상 알아 맞추기 게임

2010-06-16T02:21:54-07:00

당신은 CSS의 Hex 코드를 보고 색상을 유추해 낼 수 있나요? Hex 코드만으로 색상을 구별해 내는 퀴즈 게임이 Ajaxian에 소개되었네요. 난이도를 높일수록 보기가 늘어납니다. 완전 골때리네요. ㅋㅋㅋ