http://design215.com/

크리에이티브 커먼즈 라이센스
Creative Commons License
이올린에 북마크하기

Posted by 홍반장

2008/10/01 18:02 2008/10/01 18:02
Response
No Trackback , No Comment
RSS :
http://tcbs17.cafe24.com/tc/rss/response/3646

플래시 간단하게 삽입하는 스크립트
크리에이티브 커먼즈 라이센스
Creative Commons License
이올린에 북마크하기

Posted by 홍반장

2008/08/28 17:28 2008/08/28 17:28
Response
No Trackback , No Comment
RSS :
http://tcbs17.cafe24.com/tc/rss/response/3572

flickr.com

http://www.flickr.com/

크리에이티브 커먼즈 라이센스
Creative Commons License
이올린에 북마크하기

Posted by 홍반장

2008/04/01 14:16 2008/04/01 14:16
Response
No Trackback , No Comment
RSS :
http://tcbs17.cafe24.com/tc/rss/response/3119

FckEditor 사용법

최신버젼: http://www.fckeditor.net/download

데모: http://www.fckeditor.net/demo




크리에이티브 커먼즈 라이센스
Creative Commons License
이올린에 북마크하기

Posted by 홍반장

2008/03/18 17:54 2008/03/18 17:54
Response
No Trackback , No Comment
RSS :
http://tcbs17.cafe24.com/tc/rss/response/3082

Web 2.0이란 무엇인가 : 다음 세대 소프트웨어를 위한 디자인 패턴 및 비즈니스 모델

Web 2.0이란 무엇인가 : 다음 세대 소프트웨어를 위한 디자인 패턴 및 비즈니스 모델(1)

Web 2.0이란 무엇인가 : 다음 세대 소프트웨어를 위한 디자인 패턴 및 비즈니스 모델(2)

Web 2.0이란 무엇인가 : 다음 세대 소프트웨어를 위한 디자인 패턴 및 비즈니스 모델(3-완결)
크리에이티브 커먼즈 라이센스
Creative Commons License
이올린에 북마크하기

Posted by 홍반장

2007/09/05 19:06 2007/09/05 19:06
Response
No Trackback , No Comment
RSS :
http://tcbs17.cafe24.com/tc/rss/response/2647

테이블 정의 줄내림

style="word-break:break-all"
크리에이티브 커먼즈 라이센스
Creative Commons License
이올린에 북마크하기

Posted by 홍반장

2007/07/23 10:48 2007/07/23 10:48
Response
No Trackback , No Comment
RSS :
http://tcbs17.cafe24.com/tc/rss/response/2554

파비콘 만들기

파비콘(Favicon)은 질문자님께서 보여주신 네이버 주소 캡쳐와 같이 브라우저 주소창이나 탭, 북마크리스트 등에 붙는 그 사이트의 아이덴티티를 표현하는 아이콘입니다.


흔히 말하는 아이콘(Icon)과 비슷한 개념인데, 사이트에 적용된다는 것이 다릅니다.

사이트에 적용할 수 있는 방법을 간단히 설명해 드리도록 하겠습니다.



< link rel="shortcut icon" href="favicon.ico" >




위 HTML 코드는 파비콘을 등록하는 예입니다.

href 속성에 지정된 favicon.ico 파일이 파비콘으로 쓰일 아이콘입니다. 확장자가 ico 이죠?

네, 이것은 아이콘 파일이라는 뜻입니다. gif 나 jpg 와는 좀 다른 것입니다.

아래에 적어놓은 사이트에서 일반 이미지 파일을 ico 파일로 변환시킬 수 있습니다.



http://www.chami.com/html-kit/services/favicon/



물론 직접 만드셔도 됩니다. 아이콘 제작 프로그램도 많으니까요.

아이콘을 다 만드셨고, 그 아이콘을 자신의 홈페이지의 주소 표시줄과 즐겨찾기에 이미지로 표현을 하고 싶다면, 아까 알려드린 HTML 코드를 index 파일 적당한 곳에 삽입하시면 됩니다.
크리에이티브 커먼즈 라이센스
Creative Commons License
이올린에 북마크하기

Posted by 홍반장

2007/06/05 15:19 2007/06/05 15:19
Response
No Trackback , No Comment
RSS :
http://tcbs17.cafe24.com/tc/rss/response/2457

PNG(Portable Network Graphics)

PNG - Portable Network Graphics

Abstract:
PNG(Portable Network Graphics)는 GIF에 대한 Unisys/Compuserve의 Royalty부여를 계기로 만들어진 비손실압축을 이용한 Graphic Format이다.
현재 Web에 사용되고 있는 주요 Graphic Format은 GIF와 JPG로 대변되고 있으며, 이는 각각 비손실압축과 손실압축을 사용한 format이다.
PNG는 이중 GIF를 대신할 수 있다고 여겨지며, 그 특징은 GIF와 같은 8bit palette 지원, 16bit-per-channel truecolor지원, GIF에 비교하여 10~30%의 압축효율향상, gamma correction 지원, patent-free - 즉 관련된 특허가 없음을 주된 특징으로 한다.
이러한 특징으로 인해 PNG는 W3C Recommendation으로 채택되었으며, HTTP 1.1, CSS1 과 함께 Web의 성능향상을 위한 한가지 방안으로 이야기되고 있다.
여기서는 PNG의 이러한 특징과 함께 GIF, JPG와의 비교를 통해 PNG의 미래를 이야기한다.
Keywords:
PNG, GIF, JPG
1. 개요
PNG은 Portable Network Graphics의 준말로 "ping"으로 발음한다. PNG은 GIF format 의 후계자로 디자인된 그래픽 포맷으로 Internet Media Type은 image/png이다. 혹자는 PNG을 PNG's Not GIF.의 약자라고 말하기도 한다. 1995년 1월 Unisys와 CompuServe가 GIF format이 사용하는 LZW 압축기법에 대한 Unisys의 특허권을 이유로 GIF format을 사용하는 프로그램들에 대해 특허료를 지불해야 한다고 공표한 이후로, GIF를 대신할 새로운 format의 개발을 더욱 촉진하게 되었다. PNG은 이러한 개발의 결과이다. [PNG] 한편 1995년 1월이후 많은 Web Browser들은 GIF뿐만 아니라, JPG를 기본적으로 지원하는 방향으로 개발되게 되었고, 이에 따라 많은 Web Site들이 GIF뿐만 아니라, JPG를 사용하여 그들의 Site를 개발하게 되었다.
2. PNG의 특징
PNG의 특징은 다음으로 요약해 볼 수 있다.
모호하지 않은 발음
다중 CRC사용으로 미리 볼 필요 없이 파일의 무결성을 확인할 수 있음
파일이 깨졌는지 손쉽게 알 수 있는 magic signature사용
GIF보다 10% ~ 30 % 향상된 압축효율
특허와 상관없는 완전한 비손실 압축
2차원 인터레이싱 기법
1-, 2-, 4-, 8-bit 팔레트 지원
1-, 2-, 4-, 8-, 16-bit Greyscale 지원
8-, 16-bit-per-channel truecolor 지원
8-, 16-bit 모드에서의 완벽한 alpha blending
플랫폼에 무관한 밝기 조절을 위한 gamma correction
Y2K (2000년 문제) 지원
소스코드와 참고자료의 완전한 공개
....
PNG는 앞에서 말한 바와 같이 GIF를 대신하여 무료로 사용할 수 있는 그래픽 포맷을 만들기 위한 개발의 산물로 나온 것이기 때문에, 그 소스코드를 특허권과는 무관하게 사용할 수 있다는 장점 외에도 다른 그래픽 포맷들과 비교하여 우수한 점들을 가지고 있다. PNG의 특징을 몇 가지로 나누어 다른 포맷들과 비교하여 보면 다음과 같다. [PNG2]

Web에서의 사용
PNG는 GIF보다 다음의 세 가지 측면에서 장점을 지니고 있다. 먼저 alpha channel을 이용하여 variable transparency를 지원하며, gamma correction을 이용하여 플랫폼에 무관하게 이미지의 밝기를 조절할 수 있고, 2차원 인터레이싱 기법을 이용하여 점진 적인 이미지를 보여줄 수 있다. 또한 GIF보다 약 10% ~ 30%의 압축효율향상을 꾀할 수 있다. 다만, 최근에 유행하고 있는 Animation GIF - GIF의 multiple-image 지원을 이용한 - 와 같은 기능은 제공하고 있지 않다.
Web에서의 사용에 있어서 Animation을 지원하지 않는 점은 PNG의 약점으로 여겨지며, PNG의 장점은 single-image의 처리에 있어서 GIF보다 기능적으로 우수함에 있다고 할 수 있다.

이미지 에디팅
PNG는 이미지 에디팅에 있어서 몇 가지 장점을 지니고 있다. 먼저 완전한 비손실 압축 과 16-bit-per-channel truecolor(이것은 즉 48-bit truecolor를 의미한다.), 16-bit greyscale을 지원하기 때문에, 저장하고 불러오고 다시 저장하는 등의 과정을 거치며 표준 JPEG과는 달리 화질이 떨어지거나 하는 일이 생기지 않는다. 그리고 TIFF와 달리 지원하는 특징을 선택할 여지가 없기 때문에 서로 다른 어플리케이션에서도 완벽하게 데이터를 읽을 수 있다.
그러나 JPEG은 손실압축기법을 사용하기 때문에 고화질에서도 PNG와 같은 비손실압축을 사용하는 포맷들보다 파일크기가 훨씬 줄어드는 장점을 가지고 있다. 이러한 것은 압축기법의 차이에서 오는 것이기 때문에 PNG만의 문제는 아니다.

압축
PNG의 압축은 이미지정보를 전혀 잃지 않는다는 점과 특허료를 내지 않아도 된다는 점을 고려할때 가장 좋다고 할 수 있지만, PNG를 구현한 모든 것들이 이런 것은 아니다.
PNG는 truecolor, greyscale, palette("8bit")의 세 가지 이미지형태를 지원한다. truecolor pixel은 세개의 sample로 나타내진다. 먼저 red( zero = black, max = red) 가 나오고, 그 다음으로는 green ( zero = black, max = green), 다음으로는 blue ( zero = black, max = blue)가 나온다. bit depth는 각각의 sample의 size로 정해지게 된다. greyscale pixel은 zero = black, bit depth의 최대 값이 white로 정의된 grayscale level의 sample 하나로 나타내진다. palette pixel은 indexed-color pixel 이라고 하며, 제공된 palette의 index 값을 하나의 sample로 나타낸다. bit depth는 palette상의 색상들의 최대 값으로 지정된다.[PNGSPEC]
JPEG의 경우는 이중 앞의 두 가지만, GIF는 palette만 (greyscale은 gray palette를 사용한다.) 사용한다. PNG가 세 가지 이미지형태를 지원하기 때문에 PNG를 구현하는데 있어서 8bit palette를 사용한 이미지를 24bit truecolor로 저장하게 한다던가 하면 그 크기가 커질 것은 불을 보듯 뻔하다. 그리고 PNG 이미지를 저장하는데 있어서 너무 많은 palette 정보들을 포함하게 되는 경우에도 압축효율이 떨어지는 경우가 생기게 된다. 이런 경우는 조그마한 GIF 이미지들을 PNG로 변환하는 경우에 많이 볼 수 있다. 그밖에도 압축필터를 제대로 사용하지 못하는 경우나, low-level 압축엔진의 사용에 문제가 있는 경우에도 압축효율이 떨어지게 된다.

압축 필터
압축필터는 이미지데이터들을 변환하는 방법으로 압축효율을 더 높여주기 위해 사용 한다. 이미지의 각 수평라인마다 다섯 가지의 필터타입중의 하나를 지정하여 그것에 따라 압축을 하게 된다. 필터타입에는 다음의 다섯 가지가 있다. [FILTER]

Type Name
0 None
1 Sub
2 Up
3 Average
4 Paeth

압축을 하는 encoder에서는 데이터를 압축하는데 있어 scanline-by-scanline방식으로 압축을 하게 된다. 각각의 scanline은 filter type이 선행되어 읽혀져 그 scanline에 대해 어떤 filter 알고리즘을 적용할 것인지에 대해 지정한다.
Filter Type 0은 scanline을 변경하지 않게 한다.
Filter Type 1은 각각의 바이트와 먼저 픽셀에서의 연관된 바이트값의 차이를 전송한다. 수식으로는

Sub(x) = Raw(x) - Raw(x-bpp)
로 표현한다. 여기서 x는 0에서 scanline의 나타내는 바이트수 - 1 가지이다. Raw(x)는 scanline의 바이트 위치에서의 실 바이트 값을 나타낸다. bpp는 완전한 픽셀에 대한 바이트 수로 정의되며, 소수점이하는 올림 한다. 예를 들어 bit depth가 16이고 color type 2인 경우에는 sample이 3개이고, 각각의 sample이 2byte를 차지하므로 bpp는 6이 되며, bit depth가 2이고, color type 0인 경우는 올림 하여 bpp가 1이 된다. bit depth가 16이고 color type 4인 경우에는 two-byte grayscale sample과 two-byte alpha sample이 되므로 bpp는 4가 된다.
Color type은 IHDR Image header에 나타나게 되는데 이미지데이터의 번역방법을 알려준다. 값은 1, 2, 4의 합으로 나타내며 1은 palette가 사용됨을, 2는 color가 사용됨을, 4는 alpha channel이 사용됨을 의미한다. 현재 의미를 가지는 값은 0, 2, 3, 4, 6이다. Bit depth또한 IHDR Image header에 나타나며 Color Type과의 조합을 통해 사용된다. 현재 의미를 가지는 조합은 다음과 같다. [CHUNKS]

Color Allowed Interpretation
Type Bit Depths
0 1,2,4,8,16 Each pixel is a grayscale sample.
2 8,16 Each pixel is an R,G,B triple.
3 1,2,4,8 Each pixel is a palette index;
a PLTE chunk must appear.
4 8,16 Each pixel is a grayscale sample,
followed by an alpha sample.
6 8,16 Each pixel is an R,G,B triple,
followed by an alpha sample.

Filter Type 2는 현재 픽셀의 위에 있는 픽셀을 사용한다는 점을 제외하고는 Type 1과 같다. 수식으로는

Up(x) = Raw(x) - Prior(x)

로 표현된다. Prior(x)는 먼저 번의 scanline의 filter되지 않은 바이트값을 나타낸다.
Filter Type 3는 픽셀의 값을 예측하기 위해 왼쪽과 위쪽의 이웃하는 두 픽셀의 평균값을 사용한다. 수식으로는

Average(x) = Raw(x) - floor((Raw(x-bpp)+Prior(x))/2)

로 표현된다.
Filter Type 4는 왼쪽, 위쪽, 왼쪽의 위 픽셀을 이용한 간단한 선형함수를 계산하고, 이 것을 예측 값으로 사용하는 기법으로 Alan W. Paeth가 개발하였다. 수식으로는

Paeth(x) = Raw(x) - PaethPredictor(Raw(x-bpp), Prior(x), Prior(x-bpp))
로 표현된다. pseudo code로 PaethPredictor 함수는


function PaethPredictor (a, b, c)
begin
; a = left, b = above, c = upper left
p := a + b - c ; initial estimate
pa := abs(p - a) ; distances to a, b, c
pb := abs(p - b)
pc := abs(p - c)
; return nearest of a,b,c,
; breaking ties in order a,b,c.
if pa <= pb AND pa <= pc then return a
else if pb <= pc then return b
else return c
end

로 나타낼 수 있다. 이에 대한 자세한 것은 참고자료의 [PAETH]를 참고하시길.

Alpha Channel
Alpha Channel은 mask channel이라고도 하며, 이미지에 가변투명성(variable transparency)을 부여하는 한가지 방법이다. GIF의 경우는 이진투명성(binary transparency)이라 하여, 특정 pixel이 전체적으로 투명하거나 불투명할 수밖에 없지만(fully transparent or fully opaque), PNG의 경우는 254 level의 부분적으로 투명한 정도로 나눌 수 있다.
그리고, PNG의 세 가지 image type인 truecolor, greyscale, palette 모두 alpha 정보를 가질 수 있다. 그러나 보통은 truecolor 이미지에서 주로 쓰인다. PNG에서는 각각 의 pixel을 3바이트로(RGB) 저장하는 대신에 4바이트로(RGBA) 저장한다. 이와 같은 가변투명성은 어떤 배경과도 잘 어울리는 "특수 효과"를 만들 수 있게 해준다.
이런 특징은 픽셀들의 컬러를 부드럽게 변화시킴으로써 사각형의 픽셀들의 격자에 부드러운 곡선의 환각을 주는 anti-aliasing이라는 기법을 이용하여 어떤 배경과도 잘 어울리는 둥글고 구부러진 이미지를 만들 수 있게 한다.
이에 관한 좀더 자세한 설명은 Chris Lilley의 WWW4 논문에서 찾아볼 수 있다. [LILLEY] ?
그림 1. severly aliases image

그림 1은 PostScript파일에서 one sample per pixel로 변환한 이미지이다. 이 이미지는 심한 spatial aliasing을 보여준다.

그림 2. anti-aliased image to a white background color

그림 2는 같은 postScript파일에서 16 samples per pixel로 렌더링한 이미지이다. aliasing이 많이 줄어들었음을 알 수 있다. 글자와 컬러블록부분의 외곽부분을 보면 배경과 그림의 색상이 서로 섞여 있음을 알 수 있다.

그림 3. Halo effect caused by anti-aliased edges.
그림 3은 그림2와 같지만 배경색상이 다른 경우이다. 그림2는 백색의 배경과 anti-alias된 그림이기 때문에 그림 3은 halo-effect (halo는 햇무리, 달무리를 말한다.)가 발생한 것이다.

Gamma Correction
Gamma Correction은 컴퓨터와 모니터들이 색상 값을 해독하는데 있어서의 차이를 부정하는 기능을 말한다. Macintosh에서 만들어진 Image를 PC에서 보는 경우 너무 어둡게 보인다던가, 반대로 PC에서 만들어진 Image를 Macintosh에서 보는 경우 너무 밝게 보이거나 한다. Gamma Correction은 이런 문제점을 부분적으로나마 해결할 수 있게 한다.

Gamma Correction외에도 chromaticity 값을 이용하는 방법, color managemnet system 을 이용하는 방법 등이 있으나 일반적으로는 gamma correction으로도 만족할만한 결과를 얻을 수 있다.

Interlacing
PNG 이미지도 GIF와 마찬가지로 점진적인 표시가 가능하다. 이 기능은 이미지를 다운로드하면서 보는 경우에 "fade in"되는 듯한 효과를 준다. 보통 이 기능을 사용하게 되면 파일사이즈는 약간 증가하게 되나, 사용자에게 있어서는 훨씬 빠르게 보는 듯한 효과도 주게 된다.
interlaced method 0는 pixel들이 왼쪽에서 오른쪽으로 순차적으로 저장되고, scanline또한 위에서 아래로 순차적으로 저장된다. 즉 interlacing을 하지 않는다.
interlaced method 1은 그 개발자인 Adam M. Costello의 이름을 따 Adam7으로도 불리는데, 이미지를 지나는 7개의 다른 경로로 이루어진다. 각각의 경로는 이미지상의 pixel들의 부분집합을 전송한다. 각각의 pixel들이 전송되는 경로는 8x8 패턴이 전체 이미지 상에 맨 위의 왼쪽 끝부터 연속적으로 복사되는 방식으로 정의된다.

1 6 4 6 2 6 4 6
7 7 7 7 7 7 7 7
5 6 5 6 5 6 5 6
7 7 7 7 7 7 7 7
3 6 4 6 3 6 4 6
7 7 7 7 7 7 7 7
5 6 5 6 5 6 5 6
7 7 7 7 7 7 7 7

각각의 경로에서 선택된 pixel들이 scanline에서 왼쪽에서 오른쪽으로 전송되며, 선택된 scanline들은 위에서 아래로 순차적으로 전송되게 된다. 예를 들어 pass 2는 scanline 0, 8, 16의 4, 12, 20 pixel들을 포함하며, pass 7은 scanline 1, 3, 5 전부를 포함한다.

File Intergrity Check
PNG에서는 파일이 전송되면서 파일이 깨지는 경우에 대비하여 세 가지의 파일체크 방식을 도입하고 있다.
그 첫 번째는 magic signature로, PNG 이미지의 앞부분에 8 byte길이로 제공된다. 이것은 CR/LF와 LF를 포함하여 만들어지며, FTP사용시 binary file을 text mode (ftp에서는 ASCII mode)로 전송하는 경우 CR/LF가 LF로 변경되거나하는 등의 경우에 유용하게 사용될 수 있다.
두 번째는 32bit cyclic redundancy check(CRC-32)이다. PNG 이미지는 논리데이터조각 (logical data chunks)들로 나누어지는데, 이런 조각들은 그에 따른 CRC값들을 함께 가지고 있다. 따라서 이런 조각들에 저장된 데이터값중 한 비트라도 바뀌면 CRC값과 달라지기 때문에 데이터에 손상이 왔는지를 확인할 수 있다.
세 번째는 Adler-32 checksum으로 CRC값이 필터 되고 압축된 데이터에 적용되듯이, 이 것은 압축되지 않은 데이터에 적용된다.
3. PNG 관련 응용프로그램들
PNG관련 FTP 사이트로는 ftp://swrinde.nde.swri.edu/pub/png/와 그 미러사이트인 ftp://ftp.uu.net/graphics/png/src/를 들 수 있다. [CODE]
여기에서는 PNG reference library 와 zlib library(PNG에서 사용하는 compression library)와 각종 converter들, 그리고 PNG Tester program을 구할 수 있다. PNG 관련 library code외에 사용자 응용프로그램들로 PNG를 지원하는 것들에 관해 조금 알아보면 다음과 같다. 아래에는 필자가 주로 사용하거나 관심을 두는 것들만 예시하였다.[APPS]

Web Browser
W3C의 Amaya와 Arena는 PNG를 지원.
MS IE의 경우는 3.0버전에서는 지원하지 않고, 4.0 preview1에서도 아직은 지원되지 않고 있다.
Netscape Navigator의 경우에는 3.0버전에서는 지원하지 않고 다만 PNG를 지원하는 플러그인 들이 다수 발표되어있다. 새로이 발표된 4.0b3에서도 아직 지원되지 않고 있다.


Image Viewer
ACDSee32는 version 1.0b3이후부터 지원.
Ghostscript는 version 3.51 이후부터 지원.
XV는 version 3.10a이상에 PNG patch를 하면 됨.

Image Editor
CorelDRAW는 version 7.0이상에서 지원.
GIMP는 version 0.54이후부터 지원.
Paint Shop Pro는 version 3.01이후부터 지원.
Photoshop은 version 4.0이후부터 지원하며, 3.0에서는 플러그인을 추가하면 됨.
Visio는 version 4.1이후부터 지원.
XPaint는 version 2.3.1-png이후부터 지원.

다만 위에 예시한 응용프로그램들이 PNG Spec상의 모든 기능을 제공하는 것은 아니라는 점을 주의해야할 듯 하다.
그리고 한가지 생각해 봐야할 것은 Office97의 Component들인 Word, Excel, Powerpoint, OfficeArt, MS Photo Editor에서 PNG를 모두 지원하고 있다는 점이다. 실제로 삽입메뉴의 그림/그림파일에서 가능한 파일포맷을 보면 PNG를 지원하고 있다. Word의 Help에서 사용가능한 그래픽 포맷에서 PNG항목을 보면 다음과 같다.
Portable Network Graphics(PNG) 필터 Portable Network Graphics 필터(Png32.flt)는 Portable Network Graphics Tenth Specification(버전 1.0)에 따르는 파일을 지원합니다. .png 파일을 Word 문서에 Microsoft Clip Gallery 개체나 Photo Editor 개체로 삽입하려면, 이 필터가 설치되어 있어야 합니다. 그러나 .png 파일을 Word 문서에 직접 삽입하려면 Portable Network Graphics 필터가 필요하지 않습니다. GIF 파일을 Word로 가져오려면 이 필터가 설치되어 있어야 합니다.
4. 결론
위에서 살펴본 PNG의 많은 장점들에도 불구하고 현재 WWW에서 주로 사용되고 있는 그래픽 포맷은 GIF와 JPG이다. GIF의 경우에는 Interlacing과 animation때문에 아직도 주류를 이루고 있으며, JPG는 truecolor를 저장하는데 있어서 file size가 매우 작아 진다는 장점으로 인해 고화질이 요구되는 곳에서 많이 사용되고 있다.
PNG가 W3C Recommendation으로 채택되고, W3C의 Browser들이 PNG support를 기본적으로 지원하고 있고, Microsoft와 Netscape이 그들의 Browser에 PNG support를 약속하고 있기 때문에 PNG의 미래가 그렇게 어둡지만은 않다고 생각된다.
하지만, PNG가 기존의 그래픽 포맷들 사이에서 그 지지기반을 빠르게 확산할 수 있을지 에 대해서는 아직은 물음표를 찍을 수밖에 없을 것 같다.
References
[PNG]
PNG (Portable Network Graphics) Home Page
URL:http://www.wco.com/~png/
[W3C]
Portable Network Graphics
URL:http://www.w3.org/pub/WWW/Graphics/PNG/Overview.html
[PNG2]
PNG Features
URL:http://www.wco.com/~png/pngintro.html
[PNGSPEC]
PNG (Portable Network Graphics) Specification Version 1.0
URL:http://www.w3.org/pub/WWW/TR/REC-png.html
[FILTER]
PNG Specification: Filter Algorithms

URL:http://www.w3.org/pub/WWW/TR/PNG-Filters.html
[CHUNKS]
PNG Specification: Chunk Specifications
URL:http://www.w3.org/pub/WWW/TR/PNG-Chunks.html
[PAETH]
Paeth, A.W., "Image File Compression Made Easy", in Graphics Gems II, James Arvo, editor. Academic Press, San Diego, 1991. ISBN 0-12-064480-0.
[LILLEY]
WWW4: Not Just Decoration: Quality Graphics for the Web, Anti-aliasing and Transparency
URL:http://www.w3.org/pub/Conferences/WWW4/Papers/53/gq-trans.html
[CODE]
PNG Group Reference Code
URL:http://www.wco.com/~png/pngcode.html
[APPS]
PNG-supporting Applications
URL:http://www.wco.com/~png/pngapps.html
크리에이티브 커먼즈 라이센스
Creative Commons License
이올린에 북마크하기

Posted by 홍반장

2007/03/24 11:42 2007/03/24 11:42
Response
No Trackback , a comment
RSS :
http://tcbs17.cafe24.com/tc/rss/response/2341

Web UI 디자인 : 웹사이트에서의 UI디자인 체크리스트

■ Business Goals

- 디자인이 어떻게 비즈니스 모델을 지원하는지에 대해 알고 있는가?
- Single 비즈니스 모델에 포커스하고 있는가?
- 모든 요소가 목적을 지원하는가?

■ User Goal

- 귀사는 네 가지 목적중 사용자가 어떤 목적을 가지고 있는지 아는가?
- 귀사의 사이트/컨텐츠는 보다 큰 그림의 부분인가?
- 귀사는 적정한 양의 세부 내용을 제공하고 있는가?
- 사용자들은 컨텐츠가 어디로부터 왔는지 아는가?

■ 정보의 향기

- 컨텐츠가 사용자들을 끄는가?
- 디자인이 사용자들을 끌면서 자신감을 증진시키는가?
- 링크들은 결과들을 정확하게 묘사하는가?
- 사용자들이 결과에서 향기를 풍기는 단어들을 찾을 수 있는가?
- 결과들은 선택을 좁혀 나가는가?
- 링크들이 너무 영악한 것은 아닌가?
- 링크들은 문맥(컨텍스트)에 적합한가?

■ 링크의 품질

- 귀사는 컨텐츠 링크를 더 많이 만들 수 있는가?
- 전체 링크가 향기를 내뿜는가?
- 링크는 충분히 길지만 너무 길진 않은가?
- 링크들은 사용자들을 끌어들이기 위하여 올바른 단어들을 사용하는가?
- 카테고리 링크들은 충분히 긴가?
- 짧은 링크들은 정말로 강한 향기들을 뿜어 내는가?
- 링크가 너무 많은 잡음을 갖고 있진 않는가?
- 링크들이 사용자가 관심을 갖는 단어들을 갖고 있는가?

■ 링크구성

- 향기를 증진시키기 위하여 링크들을 그룹 지을 수 있는가?
- 링크들을 구조화할 수 있는가?
- 링크의 차이점들이 명확한가?
- 여분 링크들이 더욱 향기를 주는가?
- 좌측 패널이 도움을 주는가?
- 좌측 패널에 더 긴 링크들을 사용할 수 있는가?
- 개별 링크들을 명확하게 구분할 수 있는가?

■ 페이지 레이아웃

- 페이지에서의 정보 레벨을 증가시킬 수 있는가?
- 백색 공간은 사용자가 향기를 찾는 것을 도와 주는가?
- 사용자가 재스캔 하도록 만들기 위해 레이아웃을 바꿔야만 하는가?
- 컨텐츠 링크를 더 위쪽으로 옮겨놓을 수 있는가?
- 디자인 요소들이 거짓 바닥처럼 보이는가?

■ 그래픽

- 각 내비게이션 그래픽이 강한 향기를 전달하는가?
- 더 많은 컨텐츠 그래픽으로 유용한 세부 사항들을 전달할 수 있는가?
- 장식용 그래픽들이 그런 노력을 들일만한 가치가 있는가?
- 귀사의 그래픽들은 정보나 향기를 전달하고 있는가?
- 이미지 링크들은 중요한 힌트들을 숨기고 있진 않은가?
- 그래픽들이 그룹들을 분리하기 위해 필요하진 않은가?
- 사용자들이 보는 것을 보고 있는가?
- 애니메이션은 컨텐츠나 향기에 기여하고 있는가?
- 그래픽들이 고객이 목적을 달성하는 것을 돕고 있는가?

■ 사이트 구성

- 홈페이지를 마지막에 디자인 할 수 있는가?
- 다른 매체의 구조를 복사하는 것이 현명한가?
- 귀사의 사이트는 새로운 청중을 겨냥하는가?
- 귀사의 사이트는 사용자들이 친숙한 개념으로 구성됐는가?

■ 사이트 상의 검색엔진

- 귀사의 검색엔진은 실제로 도움이 되는가?
- 링크들이 올바른 향기를 내지 않기 때문에 사용자들이 검색을 요구하는가?
- 복수 검색 영역이 사용자들을 혼란하게 할 것인가?
- 사용자들이 실수 했을 때나 검색 엔진이 작동하지 않을 때 말할 수 있는가?
- 검색 로그가 사용자들이 링크로써 원할 단어들에서 패턴을 보여주는가?
- 인덱싱이 컨텐츠 찾기를 수월하게 해줄 수 있는가?
- 페이지 타이틀을 링크로서 쓸 때 향기를 내는가?
크리에이티브 커먼즈 라이센스
Creative Commons License
이올린에 북마크하기

Posted by 홍반장

2006/01/02 11:21 2006/01/02 11:21
Response
No Trackback , No Comment
RSS :
http://tcbs17.cafe24.com/tc/rss/response/1498

CSS2 규격 한글 번역문

스타일 시트가 웹을 지배하는 세상이 왔다.
스타일시트에 한걸음 앞으로 다가가보자.

http://trio.co.kr/webrefer/css2/cover.html

REC-CSS2-19980512
Cascading Style Sheets, level 2
w3c 추천안 1998년 5월 12일
이 버전:
원문 http://www.w3.org/TR/1998/REC-CSS2-19980512
최신의 버전:
원문 http://www.w3.org/TR/REC-CSS2
이전의 버전:
원문 http://www.w3.org/TR/1998/PR-CSS2-19980324
제작자들:
원문 Bert Bos
원문 Håkon Wium Lie
원문 Chris Lilley
원문 Ian Jacobs
요약
이 규격은 카스케이딩 스타일 쉬트 레벨 2인 CSS2를 정의한다. CSS2는 저자들과 사용자들이 문서들의 구조(예: HTML과 XML 문서들)에 스타일(글꼴, 간격, 음성)을 첨부할 수 있게하는 스타일 쉬트 언어이다. 문서의 내용과 구별하여 문서들의 스타일을 표현하는 CSS2는 웹의 제작과 유지관리를 용이하게한다.

CSS2는 번역문 CSS1 위에 만들어 졌으며, 유효한 CSS1 스타일쉬트는 몇개의 예외를 제외하고는 거의 전부 CSS2 스타일쉬트에서 유효하다. CSS2는 메디아를 적용하는 스타일쉬트를 지원하므로, 제작자는 그들의 문서들을 보는 브라우저, 음성장치, 프린터, 점자장치, 핸드장치(handheld device) 등에 맞게 표현을 할 수 있다. 이 규격은 또한 내용의 위치, 다운로드할 수 있는 글꼴, 테이블의 배열, 국제화 지원 기능, 자동 카운터, 번호붙이기와 사용자 인터페이스와 관계된 일부 속성의 기능을 지원한다.

이 문서의 상태
이 문서는 W3C의 멤버와 관련자들의 검토를 거처 임원회의 승인을 받은 상태이므로 인용하고 사용하는데 안전하다. 이는 안정적 문서로서 조회하고 다른 문서에서 인용할 수 있다. W3C는 이 추천안 발전을 널리 보급하도록 장려한다.

현재의 W3C 추천안과 기술문서들의 목록들은 원문 http://www.w3.org/TR에서 찾을 수 있다.

공개된 CSS 기능에 관한 토론은 원문 www-style@w3.org에서 이루어 지고 있다.

얻을 수 있는 양식들
CSS2 규격은 다음 양식들이 있다:

HTML:
원문 http://www.w3.org/TR/1998/REC-CSS2-19980512
텍스트 화일:
원문 http://www.w3.org/TR/1998/REC-CSS2-19980512/css2.txt,
tar로 압축된 HTML:
원문 http://www.w3.org/TR/1998/REC-CSS2-19980512/css2.tgz,
zip으로 압축된 HTML:
원문 http://www.w3.org/TR/1998/REC-CSS2-19980512/css2.zip,
압축된 PostScript 화일:
원문 http://www.w3.org/TR/1998/REC-CSS2-19980512/css2.ps.gz,
PDF 화일:
원문 http://www.w3.org/TR/1998/REC-CSS2-19980512/css2.pdf.
만일 그들사이의 차잇점이 있으면, 원문 http://www.w3.org/TR/1998/REC-CSS2-19980512가 최종적으로 맞는 것으로 고려된다.

언어들
이 영어 규격이 유일하게 지정된 유효 버전이다. 그러나, 다른 언어로의 번역문은 원문 http://www.w3.org/Style/css2-updates/translations.html에서 알 수 있다.
크리에이티브 커먼즈 라이센스
Creative Commons License
이올린에 북마크하기

Posted by 홍반장

2005/10/28 05:40 2005/10/28 05:40
Response
No Trackback , No Comment
RSS :
http://tcbs17.cafe24.com/tc/rss/response/1356

« Previous : 1 : ... 3 : 4 : 5 : 6 : 7 : Next »

블로그 이미지

- 홍반장

Archives

Recent Trackbacks

Calendar

«   2024/04   »
  1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30        
Statistics Graph

Site Stats

Total hits:
182888
Today:
277
Yesterday:
607