사용자 삽입 이미지
뉴질랜드, 넬슨(Nelson)에 있는 거리 표지판이라고 합니다. 이 표지판이 의미하는 바는 뭘까요? 제가 보기엔 Ajax를 피해갈 방법이 없다는 것처럼 보이네요. ^^;

from Ajax Avenue; No Exit
TAG Fun
Posted by 행복한고니 트랙백 0 : 댓글 0

댓글을 달아 주세요

UberHour YouTube 게임

2008.06.12 13:22 from [IT] Web Tech
사용자 삽입 이미지
Howard Rauscher씨가 UberHour라는 YouTube API 기반의 재밌는 응용프로그램을 만들었습니다.

Power Hour[각주:1]라는 술마시기 게임을 구현한 것인데, 한시간 동안 매분마다 뮤직비디오를 바꾸는 것입니다.

from UberHour YouTube Game on Ajaxian
  1. 1분마다 모든 플레이어가 한잔의 맥주를 비우는 술마시기 게임.
    출처 : 위키피디아 Power Hour [본문으로]
TAG Fun
Posted by 행복한고니 트랙백 0 : 댓글 0

댓글을 달아 주세요

사용자 삽입 이미지
Andrew Wooldridge씨가 CanvasQuest라는 단순한 Rogue 와 비슷한 게임을 만들었습니다. 맵 로딩 같은 재밌는 기능도 포함되어있고, 스프라이트를 통해 텍스트를 렌더링하는데 그래픽을 사용했습니다.

from Canvas Quest: Roque like RPG game on Ajaxian
Posted by 행복한고니 트랙백 0 : 댓글 0

댓글을 달아 주세요



Matthew Buchanan씨가 만약 브라우저가 예술가였다면 어떤 방식으로 화면을 그렸을지 보여주는 Timelapse CSS 를 작성했습니다:

웹 사이트의 템플릿을 작성할 때, 저는 항상 CSS 코드와 실제 브라우저에서 동작하는 화면 사이를 왔다갔다했습니다. 완전 열받은 상태에서 매번 수정할 때마다 제가 추가한 규칙이 잘 적용되었는지 확인하기 위해 이리저리 옮겨다녔습니다. 시간의 경과에 따라 새로 추가하는 것들을 기록한다면, 디자인 시안을 CSS 레이아웃으로 전환하기 위한 제 접근방식을 보여주는 꽤 괜찮은 그림이 될 것입니다.

이런 생각으로, 저는 진행과정을 자동으로 캡쳐하고 재생할 수 있으면 꽤 유용하겠다는 생각을 했습니다. 예전에 사람이 직접 캡쳐한 스크린 샷들을 이용해서 만든 비슷한 것을 본 적이 있습니다. 하지만, 그것은 특별히 멋지다거나 쉽게 재생산할 수 있는 방법은 아니었습니다.

아이디어를 구현하기 위해 저는 (역순으로) 현재 페이지의 스타일 시트를 탐색하고 0.1초마다 각각의 스타일 규칙에서 속성을 제거할 (그리 믿을만하진 않은) 함수를 작성했습니다.

[code:js]
function timelapseRemoveCss() {
    var interval=0;
    for(var i=document.styleSheets.length-1;i>=0;i--){
        rules=document.styleSheets[i].cssRules;
        for(var j=rules.length-1;j>=0;j--){
            var attributes=rules[j].style.length;
            for(var k=0;k<attributes ;k++){
                interval+=100;
                var timeout = "document.styleSheets["
                    +i+"].cssRules["+j+"].style"
                    +".removeProperty(document"
                    +".styleSheets["+i+"].cssRules["
                    +j+"].style["+0+"])";
                setTimeout(timeout,interval);
            }
        }
    }
}
from Timelapse CSS from Ajaxian
TAG CSS, Fun
Posted by 행복한고니 트랙백 0 : 댓글 0

댓글을 달아 주세요

이건 뭐 따로 말이 필요없겠네요. 단지 CSS와 문자로만 만들어진 호머 심슨입니다.

Román Cortés씨가 호머를 CSS로 만들고, Ned Batchelder 씨가 그 과정을 애니메이션으로 보여주었습니다.

Homer in CSS
당신이 진정한 삽질의 달인입니다.

from Homer in CSS on Ajaxian
TAG CSS, Fun
Posted by 행복한고니 트랙백 0 : 댓글 0

댓글을 달아 주세요

Pictionary


XSketch는 "여러명이 즐기는 단어 스케치 게임입니다. Adobe Flash, Java, Ajax, GWT 등을 이용해 작성되었습니다. 게임 진행방법은 다른 게이머들에게 자신이 가진 단어를 맞추도록 그림을 그려 설명하는(혹은 그 반대로) Pictionary와 유사합니다.

Ryan Dewsbury 씨가 이 게임을 만들어 그의 컬렉션 GPokrKDice에 추가했습니다.

이건 특히 중독성있네요!

from XSketch: Pictionary with GWT on Ajaxian
Posted by 행복한고니 트랙백 0 : 댓글 0

댓글을 달아 주세요

SEO 래퍼

2008.04.22 19:29 from [IT] Web Tech

SEO(Search Engine Optimization : 검색엔진 최적화) 랩을 하는 분이라고 합니다. 제목이 Design Coding 이네요. ^^

이렇게 시작하죠:
The site design is the first thing that people see
It should be reflective of you in the industry
Easy to look at with a nice navigation
When they can't find what they want it causes frustration
A clear call to action to improve the temptation
Use appealing graphics that create motivation
If you have animation please use in moderation
Cause search engines can't index the information
그리고 글쓰신 분이 제일 좋아하는 파트는 여기라네요:
Do your layout with divs, make sure that they are aligned
Please don't use tables even though they work fine
when it comes to indexing it gives search a hard time

from SEO Rapper Friday on Ajaxian
TAG Fun
Posted by 행복한고니 트랙백 0 : 댓글 0

댓글을 달아 주세요

뒤집어진 텍스트

2008.04.15 00:47 from [IT] Web Tech
from Upside down Text from Ajaxian

John Dyer 씨가 JavaScript로 만든 뒤집어진 텍스트 를 만들었습니다:

<script type="text/javascript" src="upsidedown.js"></script>

<div class="upsidedowntext">I can be read in any orientation</div>
<div>I can be read in any orientation</div>

<div class="upsidedowntext">This is Tom Cruise taking your picture</div>
<div>This is a boring Russian Mig</div>

결과는 이렇습니다.

사용자 삽입 이미지

소스 코드를 보시면 아시겠지만 유니코드를 이용한 것 같습니다.

전 이런 합리화를 좋아해요:

웹에서 텍스트를 뒤집는 것은 상당히 필요합니다. 모두가 "모바일을 사용"한다면, 개발자는 사용자의 스크린 방향에 대해 항상 신뢰할 수 없습니다.

유머 감각도 있으시네요 :)



Posted by 행복한고니 트랙백 0 : 댓글 0

댓글을 달아 주세요

from Super Mario; 14KB of JavaScript on Ajaxian

사용자 삽입 이미지
Jacob Seidelin씨가 재밌는 것을 만들어냈습니다. 14KB의 코드로 닌텐도의 히트작인 수퍼 마리오 게임을 만들었네요.

한 개의 JavaScript 파일에 작게 유지되는 실험을 하나 했습니다. 어떠한 이미지를 비롯 어떠한 외부 파일도 사용되지 않았으며, 모든 것은 canvas 엘리먼트와 구식 방법인 div 생성/배열(IE에서)으로만 렌더링됩니다. 스프라이트는 인코딩된 문자열에 저장되며 각 스프라이트 당 4색상만 허용하는 포맷을 이용합니다. 하지만 각 스프라이트별로 40~60 바이트 정도의 용량은 차지합니다.

우리는 base64로 인코딩된 (URI 형태의) MIDI 음악도 있습니다. IE에서는 음악이 없고, 브라우저마다 조금씩의 사소한 문제가 있는 것 같지만, 작업 예정에 있습니다.

Posted by 행복한고니 트랙백 0 : 댓글 0

댓글을 달아 주세요

원본글  : When rich websites go bad…

Hema 라는 네델란드 회사의 사이트입니다. Ajaxian에서는 "우리는 Ajax를 잘 사용한 사이트를 좋아하지만, 나쁜 예를 보여주기도 한다" 라고 하는 군요. 개인적으로는 재밌어보여서 좋은 것 같습니다만, Ajaxian 들은 아닌가 봅니다.
사용자 삽입 이미지

Posted by 행복한고니 트랙백 0 : 댓글 0

댓글을 달아 주세요