멋진 디자인의 404 페이지들 모음…
이 404에러가 나면 브라우져는 404에러가 났다고 보여줍니다. 웹서버에서 특별히 만들어놓지 않는다면 그냥 브라우져에서 기본으로 제공되는 페이지가 보여지는데 이것을 직접 디자인해서 올려놓으면 그 페이지가 사용자에게 보여지도록 할 수 있습니다.
404에러 페이지를 자신의 페이지로 바꾸는 방법은 웹서버에서 .htaccess 파일을 생성한 후 거기에 아래와 같이 써주세요 (.htaccess가 지원되는 웹서버에서 가능)
ErrorDocument 404 페이지경로/자기가만든페이지.html
아래는 요 없는 페이지를 서버에 요청했을때 보여주는 404페이지를 디자인해놓은 것들입니다. 잘 보이지 않는 요런 부분까지 멋지게 디자인해주는 센스!! 정말 완성도 있고 신경을 많이 썼다고 볼 수 있는 부분인 것 같습니다.
지금 웹사이트를 하나 만들고 있었는데…404페이지를 만들 생각은 안하고 있었는데 이참에 404페이지도 디자인을 해봐야겠네요 ㅋㅋㅋ
이것들 보고 모두들 멋진 404 페이지를 만들어보아요~~~^^
이미지 출처: http://www.smashingmagazine.com/2007/08/17/404-error-pages-reloaded/?
What is a Printer-Friendly Web Page?
What is a Printer-Friendly Web Page?
How to Design a Printer-Friendly Version of Your Page
As Web pages get more and more complex with images, ads, and links all over the place, they become harder and harder for people to read. Combine that with the eye-strain caused by most monitors and you create an environment where people want to print out Web pages.
Many Web designers feel that if a Web page is written for the Web, that’s where it should be read. But some Web pages can be difficult to read online, either because of the ads and flashing blinking images, or because they are so long that it’s easier to read them in print. For how to articles, it’s easier to have the article printed out to follow along with, perhaps writing notes or checking off the steps as they are completed.
Besides, it’s not yet possible to take a Web browser into the bathtub with you, and falling asleep in bed with a computer can be very uncomfortable.
What Makes a Printer-Friendly Page Printer-Friendly?
There are some disagreements about how to write a printer-friendly page.
Sponsored Links
What I Recommend for Print-Friendly Pages
- Change colors to black on white.
If your Web page has a background color, or you use colored fonts, your printer-friendly page should be black text on a white background. Most people use black & white printers, and colored backgrounds can use up a lot of ink.
- Change the font to a serif face.
Most Web pages are written in a sans-serif font, because that is easier to read online. But when moving to print, serif fonts are easier to read.
- Watch the font size.
If you’re writing a Web page with a small font size (11px or smaller), you should definitely increase the font size for printing. I recommend 12pt text or larger, depending upon your audience.
- Underline all links.
The links will not be clickable on your printer-friendly page, so making it obvious that they are links will clarify the page information. I like to also change the color of links to blue, for color printers.
- Remove non-essential images.
What makes an essential image depends on the developer and the marketing department. I limit images to those that are required for the article and a brand logo at the top left of the page.
- Remove navigation.
A lot of what makes a page difficult to print is caused by advertising and side-navigation. Removing it allows the text more room to flow across the screen - making it easier to read when printed out. Also, since the page is meant to be printed, navigation is just a waste of ink.
- Remove some or most of the advertising.
This is a sticky subject, as some printer-friendly mavens would have all images removed from the printer-friendly pages, including and especially advertisements. But the reality is many sites (including this one) are supported by advertising, and removing all ads affects the ability of those sites to stay in business. If I had to choose between ads on a printout or the site being gone, I’d choose ads. After all, if I like it enough to print out, I would like the site to continue.
- Remove all JavaScript, Flash, and animated images.
These don’t print out well or at all, and in some cases can cause problems printing Web pages.
- Include a by-line.
Even if you don’t typically have a by-line on your articles, you should include one on the printer-friendly version. This way, if a customer files the article she can quickly find who wrote it later without having to return to your Web site.
- Include the original URL.
It is very important to include the URL to the original article at the bottom of the print out. This way, your customers can get back to the exact page online if they need to follow a link or get more information from your site. Also, if they photocopy the print out, your site will get more exposure.
- Include a copyright notification.
What you write on the Web is your writing. Just because a customer can print it out or copy and paste the text does not mean that it is public domain. It won’t stop the determined thief, but it will remind casual users of your rights.
With these simple guidelines, you can create printer-friendly pages for your site that will have your customers happy to use and return to.
How to Implement a Print-Friendly Solution
Use CSS media types to create print friendly pages. Yes, it’s possible to write scripts to convert your Web pages to print friendly, but why use them when you can just write a second style sheet for when your pages are printed.
More Help with Printer Friendly Pages
Use CSS to Generate Print-Friendly PagesHow do I have the page breaks in the right places?Automating Print-Friendly Pages
CSS Media Types Create Print-Friendly Pages
CSS Media Types Create Print-Friendly Pages
Don’t Create Multiple Pages or Fiddle with Scripts
You’ve decided to make your site “printer-friendly”. You read the article on what it means to be printer friendly, but now you have to decide how you want to do it. There are several options:
- Make a copy of every page or article - and manually remove all the non-printer-friendly stuff.
- Use a (CGI, PHP, JavaScript, other) script to remove the non-printer friendly stuff on the fly.
- Write a style sheet for print.
The drawback to option one should be fairly obvious to most people. It is very labor intensive and requires that for every page on your site, you create a second, duplicate page.
Option two is the most common choice right now, because it mitigates the problems of option one, and with a small change in how you write your Web pages, you can set it up for every page on your site.
Cascading Style Sheets to the Rescue
Luckily, CSS was not written with just Web pages in mind, and with just a few extra codes you can create a printer style sheet that removes all the non-friendly options on your page and even takes into account issues such as typography and readability. And you don’t have to write two different copies of your page or do any programming to build it.
Defining a Style Sheet for Print
As with screen style sheets, you use the <link> element to define the print style sheet your Web page should use:
<link rel=”stylesheet” type=”text/css” href=”print.css” media=”print” />
The only difference between this link element and the link to your screen style sheet is the attribute:
media=”print”
Most style sheets are written for the screen, so the media can be left off, or written as:
media=”screen”
Building the Style Sheet
When you build a print-friendly style sheet, you need to keep in mind all the rules that were defined in the previous article:
- Change colors to black on white.
- Change the font to serif.
- Watch the font size.
- Underline all links.
- Remove non-essential images.
- Remove navigation.
- Remove some or most of the advertising.
- Remove all JavaScript, Flash, and animated images.
Change these rules into CSS:
Black on white with 12-point, serif fonts:
body { color : #000000; background : #ffffff; font-family : “Times New Roman”, Times, serif; font-size : 12pt; }
Underline links:
a { text-decoration : underline; color : #0000ff; }
I also like to make the links blue, to stand out on color printers.
Remove Non-Essential Images, Ads, Navigation, and Scripting
The best way to do this is to put <div> elements around each section of your page. For example, you might have the following sections:
- top, bottom, left, and right navigation
- internal advertising
- content
- other elements
Define each of them with a <div> element:
- <div id=”navigation” name=”navigation”>
- <div id=”advertising” name=”advertising”>
- <div id=”content” name=”content”>
- <div id=”other” name=”other”>
Then, in your style sheet, get rid of the ads, navigation, and other information:
#navigation, #advertising, #other { display : none; }
The print.css Style Sheet
The print.css style sheet would look like this:
body {
color : #000000;
background : #ffffff;
font-family : “Times New Roman”, Times, serif;
font-size : 12pt;
}
a {
text-decoration : underline;
color : #0000ff;
}
#navigation, #advertising, #other {
display : none;
}
Save print.css in the same directory as the file, include the <link rel=”stylesheet” type=”text/css” href=”print.css” media=”print” /> in the head of your document, and your page will print perfectly while displaying however you would like.
web2printer Generate printable web pages on the fly!!
web2printer
Generate printable web pages on the fly !
Let your visitors send your html pages as email to theire friends and load tons of specific traffic to your site !
Generate a printer friendly version of your html pages online or let your visitors send your pages via e-mail to there friends.
Create printable web pages on the fly with a lighting fast php script
Your web sites present content in an ultra-snazzy layout. But printing your pages results in grisly scrawl ? Sometimes the result completely useless, because colors and picture make the page unreadable. You can not see where the hyperlinks points to. And, last but not least, the URL of your article and the copyright information is lost ! 
EXAMPLE PAGE
SEE THE PRINTER FRIENDLY VERSION OF THIS PAGE:
Printable Page see this page for example
SEND THIS PAGE TO YOUR FRIENDS
Printable Page send this page for example
Take a look at a big and professional web site. (
www.btmsweb.com or www.cnn.com or even www.active-ranking.com for example). They know there bussines. They use a little piece of software to generate a printable version on demand. Online, real time !
See web2printer in action EXAMPLE PAGE
Generate ton´s of traffic with the unique “send as email” feature
You think printable web pages is one thing, but what I need is returning traffic.
Let your visitor´s send your articels via e-mail to there friends. Get well known to a growing community of web users. Let your visitor work for you. They select visitor interested in your web-site. No more keyword gymnastic´s and engine analysis to get target audience
How does it work?
A lighting fast script parses the HTML page that is going to be printed and generates a highly optimized page following the layout as defined in a custom stylesheet. Source code included !
How to use ?
- Download the script and put it on your web site.
- enclose the parts of your html pages you want to print with :
<!– web2printer:start –>
here is your content …
<!– web2printer:end –>
You can enclose as many parts as you want.
- create an hyperlink to the script.
With just four parameters you can configure the script to your need. Take a look at the manual for more details.
You can download web2printer is licensed under the pda-system.COM free Software license (PSL) and is provided “as is” and is without any warranty.
You need to purchase commercial non-PSL web2printer licenses:
- If you distribute web2printer Software with your non open source software
- If you want warranty from pda-systems.COM for the software,
- If you want to support web2printer development.
feature | free |
| preserve page title | yes |
| fetch copyright from meta tag | yes |
| automatic filename detection* | yes |
| generate hyperlink crossreference | yes |
| custom stylsheet | yes |
| send as email | yes |
| remove images | yes |
| replace images with string “IMAGE” | yes |
| replace images with string from alt | yes |
| generate image crossreference | yes |
| websites | |
| use on parked/stacked domains | |
| Licence | |
| Price | FREE |
Requirements
- APACHE web server
- IIS web server
- PHP reference platform is: 4.0.6 and 4.2.
ASV 4.0 (Action Script Viewer 4.0 )를 이용하여, SWF파일를 FLA파일로 변환하는 방법
▲ ASV4.0으로 SWF파일를 연다.
▲ “Export Rebuild Data(JSFL)” 실행한다. - JSFL를 포함한 모든 라이브러리 소스들이 추출된다.
▲ FlashMX 2004 또는 FlashMX 2004 PRO를 실행 하여 도큐먼트 하나를 만든다.
( SWF -> FLA 변환시 필요 파일인 JSFL파일은 Flash MX 2004 이상 버젼만 인식됨.)
▲ 추출된 라이브러리 파일들 모두 새로 만든 도큐먼트에 라이브러리로 불러들인다.
▲ JSFL파일인 “rebuild.jsfl” 같은 파일명으로 FLA파일을 저장(rebuild.fla) 후 플래쉬를 종료한다. (반드시 같은 폴더, 같은 파일명으로 저장 )
▲ rebuild.jsfl 파일을 더블클릭하면, rebuild.fla 파일이 열리면서 라이브러리와 jsfl파일의 구조를
해석하여 원본 FLA파일로 만든다.
( 모든 라이브러리가 살아 있다.)
▲ 모든 액션스크립트가 살아 있다. ….(-_-) …감동이다~
▲ 참고로 Flash MX 2004 버젼에서는 함수 위에 마우스를 올려놓고 F1키를 누르면, 해당 함수의 레퍼런스를 볼 수 있다.
플래시 위로 레이어 올리기
테크노트PHP 에서 많이 사용되는 iwindow 또한 마찬가지이다.
플래쉬가 레이어보다 항상 상위에 출력되는데 이를 레이어 보다 뒤쪽에서 출력되도록 하려면
<object classid=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000″ width=”890″ height=”101″>
<param name=”movie” value=”플래시파일주소”>
<param name=”play” value=”true”>
<param name=”wmode” value=”transparent”>
<param name=”loop” value=”true”>
<param name=”quality” value=”high”>
<embed src=”플래쉬주소 loop=”true” quality=”high” width=”890″ height=”101″></embed>
</object>
와같이 플래쉬 삽입 태그에
<param name=”wmode” value=”transparent”>
를 포함시켜 주면 된다.
우수 디자인 홈페이지
 |
.jpg) | 지난해 커뮤니케이션디자인 부문을 신설, 우수디자인 웹사이트에 부여한 결과, 디지털다임의 모토로라코리아 사이트, 바이널의 CGV IMAX, Santa Fe 사이트, 픽스다인의 한국코카콜라 2007 코크플레이 등이 선정되었다. |
| 2007년 상반기 Good Design 웹사이트 |
 |
| 올해 상반기 우수디자인으로 선정된 웹사이트는 무엇일까? KDAIA(디지털에이전시협회사) 소속의 5개 에이전시에서 GD마크를 획득한 데서 찾을 수 있을 것이다. ‘GD(Good Design) 마크’란 엄격한 기준을 통해 선정된 우수 디자인 상품과 서비스에 부여되는 국제적인 국가인증마크로 1985년부터 한국디자인진흥원에서 매년 시행하고 있다. 지난해 커뮤니케이션디자인 부문을 신설, 우수디자인 웹사이트에 부여한 결과, 디지털다임의 모토로라코리아 사이트, 바이널의 CGV IMAX, Santa Fe 사이트, 픽스다인의 한국코카콜라 2007 코크플레이 등이 선정되었다. 취재ㅣ 박현영 기자 (hypark@jungle.co.kr) 자료협조ㅣ 디지털다임, 바이널, 이노이즈인터랙티브, 플립커뮤니케이션즈, 픽스다인 |
 |
 |
| 사이트명ㅣ 모토로라코리아 웹사이트 URLㅣwww.mymotorola.co.kr 클라이언트 ㅣ 모토로라코리아 담당 에이전시 ㅣ 디지털다임 www.d2.co.kr 제작인원 ㅣ 7명 제작기간 ㅣ 2006. 12 ~ 2007. 2 (약 2.5개월) 오픈일 ㅣ 2007. 3. 9 모토로라코리아 웹사이트의 전체 컨셉은 ‘Motorola Show Case’로, 모토로라의 제품군과 각 제품군의 광고를 전면에 노출하되, 모토로라 특유의 미니멀한 아이덴티티를 반영하여 제품 라인업에 따라 원형의 쇼케이스가 유기적으로 변화하도록 표현했다. 메인 전면에 강하게 부각되는 블랙 컬러의 원형은 모토로라의 로고를 상징하는 것으로, 모토로라의 아이덴티티를 강조하기 위해 그 자체를 메인 모티브로 활용했으며, 제품 정보 페이지에서는 각 제품의 아이덴티티 컬러를 사용했다. |
 |
 |
| 사이트명 ㅣ 2007 코-크플레이 URLㅣwww.cokeplay.com 클라이언트 ㅣ ㈜한국코카-콜라 에이전시 ㅣ ㈜픽스다인 www.pixdine.com 제작인원 ㅣ 25명 제작기간 ㅣ 2006. 9 ~ 2007. 3 (6개월) 오픈일 ㅣ 2007.4.2 올해로 4년째를 맞이한 ‘코크플레이’가 2007년에는 브랜드 메시지 전달과 소비자 이익(user benefit)을 한층 더 강화한 ‘보다 강력해진 브랜드 커뮤니케이션 플랫폼’으로 진화하였다. 특히, ‘Youth Platform’이라는 컨셉 아래 유저들의 주요 관심사인 게임, 뮤직, 숍을 중심으로 한 입체적인 사이트 전개와 새롭게 제시된 뉴그래픽을 통한 메시지 연출은 코카-콜라가 가진 즐겁고 유쾌한 철학의 새로운 패러다임을 제시했다. 사이트의 전체 테마는 코카-콜라의 글로벌 컨셉이기도 한 ‘Coke Side of Life’로 코카-콜라와 함께하면 즐겁고 행복하다는 메시지를 담고 있으며, 코크플레이의 공통 테마인 Cokeness(코크니스 : 콜라다운)를 코카-콜라의 브랜드 테마인 ‘Happiness in a Bottle’에 적용하여 코크플레이만의 즐겁고 다이내믹한 느낌으로 표현했다. |
 |
 |
| 사이트명 ㅣ CGVIMAX URLㅣ www.cgvimax.com 클라이언트 ㅣ ㈜CJ CGV 에이전시 ㅣ 바이널 www.vi-nyl.com 제작인원 ㅣ 4명 제작기간 ㅣ 2005. 10. 1 ~ 2005. 12. 9 (2개월) 오픈일 ㅣ 2005. 12. 12 웹사이트를 통하여 IMAX를 논리적+감성적으로 체험할 수 있도록 하는 데 중점을 두었으며, CGV IMAX라는 새로운 브랜드를 사용자에게 좀 더 친숙하게 하기 위하여 다양한 인터렉션을 활용한 가상체험을 할 수 있도록 했다. 또한 IMAX의 웅장한 스크린과 첨단기술, 실제감 등을 생생하게 느낄 수 있도록 플래시 기반으로 제작하였으며, 특히 일방적 비주얼 및 정보전달 방식보다는 사용자 조정에 의한 단계별 정보노출방식을 구현했다. |
 |
 |
| 사이트명 ㅣ Santa Fe URLㅣnewsantafe.hyundaimotor.com/index_sub.html 클라이언트 ㅣ ㈜현대자동차 에이전시 ㅣ 바이널 www.vi-nyl.com 제작인원 ㅣ 10명 제작기간 ㅣ 2006. 2. 20 ~ 2006. 5.31 (3개월) 오픈일 ㅣ 2006. 6. 1 삶을 이끄는 힘에는 열정, 자부심, 가족 등 다양한 가치들이 있고 그 삶의 모습 속에 싼타페가 있다는 것을 주요 컨셉으로 하여, 싼타페의 브랜드 인지도를 확보하고 브랜드를 프로모션하기 위해 설계되었다. 싼타페 웹사이트는 ‘싼타페를 상상하다’라는 디자인 컨셉을 극대화하기 위해 스케치 기법을 사용, 감성적 부드러움과 부드러움 속 역동성을 동시에 나타냈고 꿈과 희망을 상징하며 상대적으로 싼타페 비주얼을 돋보이게 하면서도 조화를 이루었다. |
 |
 |
| 사이트명 ㅣ 웹스미디어 URLㅣ www.websmedia.co.kr 클라이언트 ㅣ 웹스미디어컴퍼니 에이전시 ㅣ 플립커뮤니케이션즈 www.pulipinc.com 제작인원 ㅣ 5명 제작기간 ㅣ 2007. 1. 15 ~ 2007. 3. 17 (2개월) 오픈일 ㅣ 2007. 3. 21 미디어 전문 그룹 웹스미디어는 획일적인 기업 소개형 사이트에서 벗어나 지속적으로 변화하고 진화하는 미디어 그룹의 특성 그 자체를 기업 사이트에 반영해 보자는 취지로 제작되었다. 이러한 기본 안을 토대로 ‘오감’과 ‘직감’을 컨셉화한 오감 교류의 창, 웹스미디어 이야기는 “우리의 5+1을 찾아보자”는 메시지에 따라 감각 속 감성 끌어내기, 즉 여섯 번째 감각에 감성메시지를 담아내는 것으로부터 출발했다. 감각 속 감성 끌어내기는 긍정적이며, 모두가 공감할 수 있는 오감과 직감을 나타낸 픽토그램으로 보여주고, 감정 메시지와 감각 컬러를 더하는 것이었다. 이는 미디어에 따뜻하고 인간적인 스토리를 불어넣어 머리보다 가슴으로 이야기하고, 감각을 통한 서로의 감성을 교류하는 웹스미디어를 나타낸 것이다. |
 |
 |
| 사이트명 ㅣ 티스타일 인터페이스 (T Style Interface Guidelines) 클라이언트 ㅣ SK텔레콤 에이전시 ㅣ 이노이즈 인터렉티브 www.innoiz.com 제작인원 ㅣ 11명 제작기간 ㅣ 6개월 오픈일 ㅣ 2006. 10. 31 티 스타일 인터페이스는 SKT의 브랜드 전략을 휴대폰에 적용한 GUI와 AUI(Auditory User Interface)로, 고객의 삶의 일부인 휴대폰에 SKT 브랜드를 적용시켜 고객들이 보다 밀접하게 브랜드를 경험할 수 있도록 하기 위한 것이다. SKT 브랜드의 6개 추상적 아이덴티티를 티 스타일 인터페이스 에 적용시키기 위해 4가지 시각적 키워드로 변환하여 GUI 톤과 매너를 표현할 수 있는 전략을 수립하였다. 이러한 과정은 티 스타일 인터페이스 개념을 SKT가 추구하는 ‘유비쿼터스 네트워크’라는 컨셉에서 보다 시각적인 개념인 ‘미래지향적 공간’으로 치환시키기 위함이다. GUI 컬러는 SKT 브랜드의 BI 컬러를 기초로 하고, AUI 역시 이미 고객에게 각인된 SKT의 TV광고 사운드를 모티브로 하였다. |
출처 : 정글디자인 http://magazine.jungle.co.kr/cat_webmulti/detail_view.asp?master_idx=11852&pagenum=1&temptype=5&page=1&code=1&menu_idx=48
디자인이 우수한 홈페이지 찾는 요령
디자인이 우수한 홈페이지 찾는 요령
: 박사 | 홈페이지만 나와있는 책은 서점에 가시면 늘려있습니다. 서점에 한번 가보시길… 가까운 곳에 없다면 인터넷 서점이라도 들러보세요. 웹디자인 코너로….
웹페이지 템플릿을 제작해서 제공하는 사이트가 많이 있습니다.
http://www.themegallery.com/korean/ 여기에 가셔서 살펴보세요. 돈 받고 파는 것이니 왠만한 사이트 구축은 가능할 겁니다. 소스 긁어오셔서 약간 디자인 변경해서 사용해도 별 지장은 없을 겁니다. 단, 이미지는 완전히 바꾸셔야겠죠.
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 아래의 사이트들도 둘러보세요.
Cool Homepages (www.coolhomepages.com/ ) 해외의 컨텐츠와 디자인이 우수한 사이트들을 각 분야별로 세분화 시켜놓은 사이트. 해외 웹 디자인의 경향을 읽는데 도움을 준다.
★ 디자인 정글 (www.jungle.co.kr/ ) 국내 대표적인 디자인 관련 정보를 얻을 수 있는 사이트.
★ IBM (www.ibm.com/ ) 매년 업그레이드할 때마다 확고한 자사 정체성을 잃지 않고 있다.
★ Creating killer web sites (www.killersites.com/ ) 디자인 팁이나 툴 등 참고할 만한 사이트를 많이 링크하고 있는 사이트.
★ Highfive (www.hifive.com/ ) 웹디자인의 트렌드에 대해 일목요연하게 정리해놓은 곳
★ 웹마스터 클럽 (webmasterclub.org/) 국내 웹사이트 관리를 맡거나 관련 일을 하는 사람들의 모임.
★ W3C consortium (www.w3.org/ ) 웹문법의 방향성에 알고싶은 사람들에게 권하는 사이트.
★ FPG (www.fpg.com/ ) 디자인 시안을 제작하는데 확실히 도움이 되는 사이트.
★ Lynda.com (www.lynda.com/ ) 디자인 색조에 대해 궁금한 사람들에게 적극 추천.
★ www.firmlist.com 전 세계의 웹제작업체들을 만나볼 수 있는 사이트.
★ www.graphic-design.com 웹과 그래픽 디자인 전반에 걸친 여러가지 정보들이 모이는 곳.
★ www.nike.com/ 언제나 잃지 않는 방향성을 보여준다. 사이트가 요구하는 컨셉에 가장 적합한 디자인.
★ webdesign.about.com/compute/webdesign/mbody.htm 웹 디자인에 있어서 꼭 알아야하고 실무에서 궁금해 할 수 있는 여러 가지 팁을 친절히 배울 수 있다.
★ www.i-biznet.co.kr/ 웹 제작 전반에 대한 여러가지 정보를 얻을 수 있고, 각종 커뮤니티들이 활성화되어 가고 있는 사이트.
★ usweb.com 미국 최대의 웹 에이전시, 그들의 작업결과물들을 확인해 볼 수 있다.
★ agency.com/ 웹에이전시에서 보다 체계적으로 작업해 나가는 방법을 배워보자.
★ www.websiteawards.com 세계 유수의 웹 에이젼시들의 작품 중 좋은 제작물을 선택해 상을 주는 평가사이트.
★ hotwired.lycos.com/ 웹 디자인에 도움을 주는 각종 실용적 정보가 가득하다.
★ www.webbyawards.com/ 인터넷의 아카데미상이라고도 불리우는 사이트 평가 사이트.
★ www.hillmancurtis.com 플래시를 응용한 사이트 중 가장 비중있는 사이트.
|
Blog TOP 30
종합 e-Business 사이트인 [eBizMBA]가 좀더 복합성을 겸비한 데이터 자료를 기본으로 최근에 가장 인기있는 30개의 블로그 사이트를 발표 했다.<30 Most Popular Blogs ranked >
야후 사이트에 연결된 인기 링크수 뿐만 아니라, 블로그의 월 방문자 수, Alexa Rank (종합 인기도 순위 사이트), Quantcast 서비스(미국에서 밖에 제공 안되는 사이트 방문자 속성 체크 분류 서비스) 등도 연계시켜 종합적인 순위를 매겼다고 한다. <물론 블로그 성격을 띄지않는 일반 상업성의 블로그는 제외>
** 참고 데이터 설명 **
Inbound Links - 연결된 링크 수(아웃 바운드 제외)
Compete Monthly Visitors - 월 방문자 수 추이
Quantcast Monthly Visitors - 사이트 방문자 속성 체크 이용 사이트 Quantcast
Alexa Ranking - 인기도 순위 사이트 Alexa
1 | Gizmodo.com
8,501,344 - Inbound Links | 1,501,526 - Compete Monthly Visitors | 4,469,847 - Quantcast Monthly Visitors | 757 - Alexa Ranking.
4,093,656 - Inbound Links | 3,806,178 - Compete Monthly Visitors | 1,200,000 - Quantcast Monthly Visitors | 827 - Alexa Ranking.
6,582,567 - Inbound Links | 855,052 - Compete Monthly Visitors | 547,327 - Quantcast Monthly Visitors | 592 - Alexa Ranking.
3,905,798 - Inbound Links | 1,046,181 - Compete Monthly Visitors | 2,344,131 - Quantcast Monthly Visitors | 1,070 - Alexa Ranking.
3,525,415 - Inbound Links | 773,290 - Compete Monthly Visitors | 1,306,486 - Quantcast Monthly Visitors | 2,824 - Alexa Ranking.
1,328,151 - Inbound Links | 1,543,378 - Compete Monthly Visitors | 537,607 - Quantcast Monthly Visitors | 897 - Alexa Ranking.
3,889,455 - Inbound Links | 558,858 - Compete Monthly Visitors | 1,320,937 - Quantcast Monthly Visitors | 5,837 - Alexa Ranking.
2,698,567 - Inbound Links | 626,423 - Compete Monthly Visitors | 1,852,105 - Quantcast Monthly Visitors | 2,226 - Alexa Ranking.
1,201,672- Inbound Links | 444,893 - Compete Monthly Visitors | 1,175,146 - Quantcast Monthly Visitors | 5,356 - Alexa Ranking.
1,726,704 - Inbound Links | 688,327 - Compete Monthly Visitors | 348,177 - Quantcast Monthly Visitors | 1,789 - Alexa Ranking.
4,047,978 - Inbound Links | 623,153 - Compete Monthly Visitors | 292,342 - Quantcast Monthly Visitors | 2,311 - Alexa Ranking.
2,328,006 - Inbound Links | 218,585 - Compete Monthly Visitors | 115,730 - Quantcast Monthly Visitors | 635 - Alexa Ranking.
1,386,452 - Inbound Links | 361,811 - Compete Monthly Visitors | 965,772 - Quantcast Monthly Visitors | 8,512 - Alexa
Ranking
14 | AutoBlog.com
4,238,315 - Inbound Links | 697,067 - Compete Monthly Visitors | 349,316 - Quantcast Monthly Visitors | 2,341 - Alexa Ranking.
3,417,148 - Inbound Links | 424,596 - Compete Monthly Visitors | 209,145 - Quantcast Monthly Visitors | 4,844 - Alexa Ranking.
3,121,444 - Inbound Links | 345,548 - Compete Monthly Visitors | 754,615 - Quantcast Monthly Visitors | 13,239 - Alexa Ranking
3,632,830 - Inbound Links | 165,023 - Compete Monthly Visitors | 538,106 - Quantcast Monthly Visitors | 21,547 - Alexa Ranking.
760,020 - Inbound Links | 481,981 - Compete Monthly Visitors | 231,930 - Quantcast Monthly Visitors | 1,378 - Alexa Ranking.
4,091,050 - Inbound Links | 452,639 - Compete Monthly Visitors | 183,035 - Quantcast Monthly Visitors | 3,963 - Alexa Ranking.
293,032 - Inbound Links | 258,892 - Compete Monthly Visitors | 200,018 - Quantcast Monthly Visitors | 2,132 - Alexa Ranking.
213,727 - Inbound Links | 256,481 - Compete Monthly Visitors | 74,476 - Quantcast Monthly Visitors | 4,160 - Alexa Ranking.
3,837,986 - Inbound Links | 261,171 - Compete Monthly Visitors | 42,275 - Quantcast Monthly Visitors | 7,507 - Alexa Ranking.
1,858,034 - Inbound Links | 266,979 - Compete Monthly Visitors | 82,800 - Quantcast Monthly Visitors | 6,091 - Alexa Ranking.
1,480,159 - Inbound Links | 54,159 - Compete Monthly Visitors | 287,344 - Quantcast Monthly Visitors | 5,428 - Alexa Ranking.
291,420 - Inbound Links | 210,845 - Compete Monthly Visitors | 17,099 - Quantcast Monthly Visitors | 2,892 - Alexa Ranking.
795,970 - Inbound Links | NA - Compete Monthly Visitors | 172,028 - Quantcast Monthly Visitors | 15,884 - Alexa Ranking.
932,275 - Inbound Links | 77,175 - Compete Monthly Visitors | 16,869 - Quantcast Monthly Visitors | 2,840 - Alexa Ranking.
3,605,440 - Inbound Links | 87,268 - Compete Monthly Visitors | 47,863 - Quantcast Monthly Visitors | 21,187 - Alexa Ranking.
759,794 - Inbound Links | 45,436 - Compete Monthly Visitors | 15,738 - Quantcast Monthly Visitors | 4,542 - Alexa Ranking.
31,846 - Inbound Links | 135,991 - Compete Monthly Visitors | 21,611 - Quantcast Monthly Visitors | 24,227 - Alexa Ranking.
평소에 정보를 얻고 있는 사이트도 몇개 있으나, 전체적으로 참신한 블로그가 많이 눈에 띄었다. 전부 체크해 볼려면 꽤나 많은 시간을 요 할지도. 물론 “수퍼 블로거” 라 불리우는 이들이 운영하는 사이트도 존재한다.
Web 2.0 스타일을 만들때 쓰는 그라디언트 모음 (포토샵용)
방금전 Web 2.0 스타일의 로고를 만드는 방법을 소개했는데, 엉망진창님이 소개해 주신 Ultimate Web 2.0 Layer Styles 을 쓰면, 그라디언트(Gradient ; 순차적 명암)나 컬러 선택을 좀더 편하게 할 수 있다. 그리고 이런 그라디언트는 글자 외에도 버튼이나 배너 등, 다양한 용도로 활용이 가능하다.
설치 방법은 출처에 가서 압축 파일을 다운로드한 다음, 안에 들어있는 GRD 파일을 C:\Program Files\Adobe\Adobe Photoshop CS3\Presets\Gradients 에 복사한다.
포토샵에서 Edit - Preset Manager 를 클릭하면 아래와 같은 창이 나타나는데, Preset Type 를 Gradients 로 바꾼다음 Load 를 클릭, 해당 GRD 파일을 불러온다.
프리셋 모음이 웹
2.0 스타일로 바뀌는 걸 확인할 수 있다. 나중에 그라디언트를 사용할 때 이때의 프리셋을 사용하게 된다. 아래 그림은 웹 2.0 그라디언트를 사용해 만든 타이틀과 버튼 이미지이다.
사용 방법은 전의 글을 참고하거나, 레이어 창에서 마우스 오른쪽 버튼을 눌러 Blending Options 를 클릭, Gradient Overlay 를 선택하면 된다. 생각보다 간단하다.
솔직히 Web 2.0 스타일이란게 그렇게 대단한 것은 아니다. 그야말로 유행하는 색조와 스타일을 말하는 것으로, 파스텔 톤의 글자나 버튼이 가볍고 세련되게 보여 사용하는 것이다.
- Anti-Forensic
- Biology
- Drug Culture
- Electronic Music
- Medical
- Medicine
- SEO+WEBPR
- VJ
- Web Design
- 개념
- 게임
- 기초의학
- 데이타베이스
- 독백 (monologue)
- 뮤지션 (musician)
- 분자생리학
- 상식
- 생리학개론
- 서버관련정보
- 성형및시술
- 세포생리학
- 아바타 (avatar)
- 영어공부
- 인터넷활용
- 자작 VJ-Video
- 조직학
- 종양학
- 즐겨찾는곳 (link)
- 증상학
- 질병분류
- 컴퓨터활용
- 컴퓨팅관련노하우
- 코스메틱
- 튜어리즘(Tourism)
- 팁+노하우 (howto)
- 파티 (party)
- 패션
- 프로그래밍
- 피부과학
- 한자공부
- 해킹및보안