⊹⊱⋛⋋ISong榮耀ζ組織™⋋⋛⊱⊹ » Mixed http://www.isonge.cn Freelance. Graphic design, illustration, print and web. Sat, 09 Jul 2011 22:42:40 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 答案在风中飘 http://www.isonge.cn/2011/07/%e7%ad%94%e6%a1%88%e5%9c%a8%e9%a3%8e%e4%b8%ad%e9%a3%98/ http://www.isonge.cn/2011/07/%e7%ad%94%e6%a1%88%e5%9c%a8%e9%a3%8e%e4%b8%ad%e9%a3%98/#comments Sat, 09 Jul 2011 22:41:02 +0000 911 http://www.isonge.cn/?p=714 二零一一 七月十日

努力把经过四个小时昏睡的那个我从混沌中拖到现实中来。虽然我的脑袋仍然伴随着室外高层建筑的巨大排风装置嗡嗡作响，思绪跟着建筑工地施工机器的节奏漫天飞舞，但是我仍然希望投入十二分热情来码这些字符，记录下此时此刻的思绪。

在落笔前，我仍然不知道写些什么，试图插点小文艺的措辞让这些文字，看起来像模像样，既可读，又充满洋溢的情感。

我不想套用某某人话，文章，或者经验，规则，来表达自己的对这个世界的看法，仅仅是「自己］

有关梦想。

或许我并不想做第一，或许我并不想发明独一无二的东西，或许我并不想证明只有我的点子最棒。但是我这一生肯定是为追求分享设计感悟，实用的工具，人性化的体验而努力坚持前行的。

在这条路上，或许能遇到志同道合的朋友，或许只能孤身一人独自前行，但那些无关紧要，重要的「执着］与「勇气］。这些看似只有在烂熟的歌曲中才会存在的平淡字眼，终会在你相信他们的时候发挥神奇的力量。

How many roads must a man walk down　　
　　Before they call him a man 　　
　　How many seas must a white dove sail 　
　　Before she sleeps in the sand 　　
　　How many times must the cannon balls fly 　　
　　Before they‘re forever banned 　　
　　The answer, my friend, is blowing in the wind　　
　　The answer is blowing in the wind 　　
　　How many years must a mountain exist 　　
　　Before it is washed to the sea 　　
　　How many years can some people exist　　
　　Before they‘re allowed to be free 　　
　　How many times can a man turn his head 　　
　　And pretend that he just doesn‘t see 　　
　　The answer, my friend, is blowing in the wind　　
　　The answer is blowing in the wind　
　　How many times must a man look up
　　Before he can see the sky 　　
　　How many ears must one man have
　　Before he can hear people cry　
　　How many deaths will it take 　
　　Till he knows that too many people have died　
　　The answer, my friend, is blowing in the wind　　
　　The answer is blowing in the wind　　
　　

]]> http://www.isonge.cn/2011/07/%e7%ad%94%e6%a1%88%e5%9c%a8%e9%a3%8e%e4%b8%ad%e9%a3%98/feed/ 0 闲话豆瓣新版的头 http://www.isonge.cn/2010/02/douban-redesign-talk/ http://www.isonge.cn/2010/02/douban-redesign-talk/#comments Fri, 26 Feb 2010 05:28:14 +0000 911 http://www.isonge.cn/?p=663

豆瓣改版，裂分为1+3模式，主站社交，子站 书籍 音乐 电影，构建成星状模型。

布局的重大调整就落在了导航上。

假如把承重信息的整个版面比作天空，那么点点星星，条条块块的信息就好比飞在空中各种生物，各自有各自的飞行轨道和飞行空间，平行而不冲撞，航道顺畅。

第一版的改动，头部子站点导航与个人用户设置以及主打产品豆瓣电台app,置顶页首，灰色一条，醒目而压抑，也难怪有网友会调侃那是乌云压顶。假如比作人，此人头上戴了个黑色帽子。此类深色导航适用于信息管理系统控制页面，最起码也得有背景渐变，视觉上才不会那么突兀。好端端晴空万里的天空，有块乌云飘在头上，是谁也高兴不起来。

第二版改动，头部子站点导航信息全部右侧浮动，去掉灰色背景，改作白色底色加阴影，层次上拉开了。好比天空有了白云，你前我后，只是认为把航道标明，而不是让信息生物自由飞翔，强制性显而易见。

什么时候让这些信息看似一个一个奇怪而生动的生物在各自位置上自由飞翔，呆在该在位置，这个头就好了。

不要让他们都像一张脸上都是眼睛盯着你看，而你还得总得和他们对看，不用他们的时候他们应该自动弹开。

ps：看看这位老兄自己的项目Facebook Facelift，头部导航清晰，icon得当，晴空万里，甚是舒畅。

该放在页脚的信息就得去页脚呆着，这样才能脚踏实地。

了解更多这个项目的信息

View all images on Flickr.

Watch the video on Vimeo.

]]> http://www.isonge.cn/2010/02/douban-redesign-talk/feed/ 1 网页设计师轮盘 http://www.isonge.cn/2009/11/%e7%bd%91%e9%a1%b5%e8%ae%be%e8%ae%a1%e5%b8%88%e8%bd%ae%e7%9b%98/ http://www.isonge.cn/2009/11/%e7%bd%91%e9%a1%b5%e8%ae%be%e8%ae%a1%e5%b8%88%e8%bd%ae%e7%9b%98/#comments Wed, 04 Nov 2009 15:12:30 +0000 911 http://www.isonge.cn/?p=631 原文地址

这个网页设计师的轮盘是描述通过五个步骤进行管理小型网络项目与客户间关系的简要过程模型。这个方法能帮助你更好的工作，建立和考虑阶段性的关键点，并与客户建立起长期的商业关系。

webdesigner-wheel

模型

需求定义:在这第一个步骤中，您有“翻译”的要求和客户要求的所有功能执行。可以制定一个你必须要做的带有详细描述的项目清单。

规划: 为上一步中制定的项目清单规划开始与结束日期。罗列出每天需要做的清单,分阶段估算出开发与测试周期.

开发测试: 编写和测试执行的功能,履行上一步骤中制定的每日计划。根据每日进度判断是否有必要进行重新规划。每周和客户进行沟通，或者有重大改动的时候及时和客户交流。

检查: 做最后的“大规模”检测，与客户一同测试主要功能。

发布与追踪: 发布产品并追踪监视， 获得客户回执.

]]> http://www.isonge.cn/2009/11/%e7%bd%91%e9%a1%b5%e8%ae%be%e8%ae%a1%e5%b8%88%e8%bd%ae%e7%9b%98/feed/ 1 有关CSS的Class命名 http://www.isonge.cn/2009/08/%e6%9c%89%e5%85%b3css%e7%9a%84class%e5%91%bd%e5%90%8d/ http://www.isonge.cn/2009/08/%e6%9c%89%e5%85%b3css%e7%9a%84class%e5%91%bd%e5%90%8d/#comments Fri, 14 Aug 2009 12:02:41 +0000 911 http://www.isonge.cn/?p=547 My Top 10 Most Used CSS Class Names

看到这篇文章以后，做下自己的整理。

在写css的过程中，Class的命名是非常重要的一项内同，简洁有语义的Class命名有利于代码的可读性。虽然伴随着HTML5的到来，会逐渐弱化，直接在HTML标签上进行简化和加强语义，但是这里还是有必要写一下。

class=”fixed”

这里是清除浮动的新写法，自动产生一个不显示的字符”.”，清除浮动，非常的实用。我自己使用class=”clearfix”

.fixed:after{
	content:".";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
	}
.fixed{
	display:block;
	}
/*  \*/
.fixed{
	min-height:1%;
	}
* html .fixed{
	height:1%;
	}

class=”alt”

alt是”alternative”的缩写

#content img{
	float:left;
	display:inline;
	margin-right:10px;
	border:1px solid #ccc;
	padding:1em 0;
	background:#fff;
	}
#content img.alt{
	float:right;
	margin-right:0;
	margin-left:10px;
	}

class=”selected”

<li class=“selected”><a href="/about">About Us</a></li>

class=”first”,class=”last”

直到所有的浏览器都支持:first-child 和 :last-child属性以后，这个写法将会消失。

class=”inner”

作为内容器经常与container一起使用

<div id="container">
	<div>

	</div>
</div>

class=”even”，calss=”odd”

使用在隔行变色的li或者table tr上

<ul>

<li>Content</li>

<li>Content</li>

<li>Content</li>

<li>Content</li>

</ul>

class=”section”

替代以前常用的class=“box”

<div>
	content here...
</div>
]]> http://www.isonge.cn/2009/08/%e6%9c%89%e5%85%b3css%e7%9a%84class%e5%91%bd%e5%90%8d/feed/ 0 WordPress技巧（6）： 替换”read more” http://www.isonge.cn/2009/08/wordpress%e6%8a%80%e5%b7%a7%ef%bc%886%ef%bc%89%ef%bc%9a-%e6%9b%bf%e6%8d%a2read-more/ http://www.isonge.cn/2009/08/wordpress%e6%8a%80%e5%b7%a7%ef%bc%886%ef%bc%89%ef%bc%9a-%e6%9b%bf%e6%8d%a2read-more/#comments Sat, 08 Aug 2009 07:54:14 +0000 911 http://www.isonge.cn/?p=532 做以下的定义，修改第三行的代码，放到functions.php文件中，all will be ok!

<?php

$custom_more = "Continue reading this post";
add_filter( 'the_content_more_link', 'my_more_link', 10, 2 );

function my_more_link( $more_link, $more_link_text ) {
	return str_replace( $more_link_text, $custom_more, $more_link );
}
?>
]]> http://www.isonge.cn/2009/08/wordpress%e6%8a%80%e5%b7%a7%ef%bc%886%ef%bc%89%ef%bc%9a-%e6%9b%bf%e6%8d%a2read-more/feed/ 0 Xenocode Browsers http://www.isonge.cn/2009/08/xenocode-browsers/ http://www.isonge.cn/2009/08/xenocode-browsers/#comments Thu, 06 Aug 2009 07:48:26 +0000 911 http://www.isonge.cn/?p=527
Xenocode Browsers这个工具我认为是必须拥有的，只需要安装一个插件，就可以在线测试多种浏览器效果 (IE 6, 7 和 8, Firefox 2 and 3, Google Chrome 和 Opera) 。

不过这个工具只能在Windows (XP with SP2 和更高级的系统)下工作，但非常的不错。访问 Xenocode Browsers

]]> http://www.isonge.cn/2009/08/xenocode-browsers/feed/ 0 逛互联网动物园才是正经事 http://www.isonge.cn/2009/08/%e9%80%9b%e4%ba%92%e8%81%94%e7%bd%91%e5%8a%a8%e7%89%a9%e5%9b%ad%e6%89%8d%e6%98%af%e6%ad%a3%e7%bb%8f%e4%ba%8b/ http://www.isonge.cn/2009/08/%e9%80%9b%e4%ba%92%e8%81%94%e7%bd%91%e5%8a%a8%e7%89%a9%e5%9b%ad%e6%89%8d%e6%98%af%e6%ad%a3%e7%bb%8f%e4%ba%8b/#comments Mon, 03 Aug 2009 11:35:20 +0000 911 http://www.isonge.cn/?p=515 1. Old Loft

Old Loft

2. Zootool

Zootool

3. Ched Online

Ched Online

4. Mamieboo Gallery

Mamieboo Gallery

5. Blogbuster

Blogbuster

6. Big Omaha

Big Omaha

7. Owltastic

Owltastic

8. MixTurtle

MixTurtle

9. Ethan Gardener

Ethan Gardener

10. Adore Le Pug

Adore Le Pug

11. Cow & Monkey

Cow & Monkey

12. Dharma Frog

Dharma Frog

13. Elune Art

Elune Art

14. Litago Ku-Kunst

Litago Ku-Kunst

15. Be A Magpie

Be A Magpie

16. Read Whale

Read Whale

17. Small White Bear

Small White Bear

18. PSD Gator

PSD Gator

19. Boagworld

Boagworld

20. Silverback

Silverback

]]> http://www.isonge.cn/2009/08/%e9%80%9b%e4%ba%92%e8%81%94%e7%bd%91%e5%8a%a8%e7%89%a9%e5%9b%ad%e6%89%8d%e6%98%af%e6%ad%a3%e7%bb%8f%e4%ba%8b/feed/ 0 WordPress技巧（4）： 图片上传错误 http://www.isonge.cn/2009/08/wordpress%e6%8a%80%e5%b7%a7%ef%bc%884%ef%bc%89%ef%bc%9a-%e5%9b%be%e7%89%87%e4%b8%8a%e4%bc%a0%e9%94%99%e8%af%af/ http://www.isonge.cn/2009/08/wordpress%e6%8a%80%e5%b7%a7%ef%bc%884%ef%bc%89%ef%bc%9a-%e5%9b%be%e7%89%87%e4%b8%8a%e4%bc%a0%e9%94%99%e8%af%af/#comments Sun, 02 Aug 2009 09:23:18 +0000 911 http://www.isonge.cn/?p=505 WordPress 2.8 file / image upload error fix

当你上传图片或者文件的时候会船舷这样的错误，这是怎么造成的？

Unable to create directory /the/path/here/.

Is its parent directory writable by the server?

有两个原因:

  1. 上传目录的权限有问题，FTP登录到不能写入的目录查看目录的权限，试试改成755或者777
  2. 上传目录的设置问题，录后台查看设置，Settings -> miscellaneous修改存储文件夹为 wp-content/uploads
]]> http://www.isonge.cn/2009/08/wordpress%e6%8a%80%e5%b7%a7%ef%bc%884%ef%bc%89%ef%bc%9a-%e5%9b%be%e7%89%87%e4%b8%8a%e4%bc%a0%e9%94%99%e8%af%af/feed/ 0 设计师需要手绘技能么？ http://www.isonge.cn/2009/08/%e8%ae%be%e8%ae%a1%e5%b8%88%e9%9c%80%e8%a6%81%e6%89%8b%e7%bb%98%e6%8a%80%e8%83%bd%e4%b9%88%ef%bc%9f/ http://www.isonge.cn/2009/08/%e8%ae%be%e8%ae%a1%e5%b8%88%e9%9c%80%e8%a6%81%e6%89%8b%e7%bb%98%e6%8a%80%e8%83%bd%e4%b9%88%ef%bc%9f/#comments Sun, 02 Aug 2009 09:08:01 +0000 911 http://www.isonge.cn/?p=501 handDraw

这是一个我经常会注意到的问题，虽然不是每个设计师都有具备扎实与强大的手绘功底，但是作为设计师的必备技能，应该积累此方面或多或少的能力。尤其是独立设计师，把脑海中的设计思路快速的落实在纸上，手绘技能是不可或缺的。

设计是一个奇怪的过程，并不是你具有很强的手绘或者绘画功夫就能做好的，整个过程是感性和理性相互交融相互博弈的产物，这也是很多绘画能力很强的人做不好设计的原因。当然没有手绘与绘画基本能力，在一定的程度上制约了设计师的提高，这也就是大多数非美术专业的设计从业者需要面临的问题。

拿我作为例子，并没有很多的手绘能力，这就制约在某个方面的设计能力。假如你想成为出色的设计师，手绘是必要的。

这里有一篇讲解有关手绘问题的文章。我认为讲解的很到位，不妨去看一下。

]]> http://www.isonge.cn/2009/08/%e8%ae%be%e8%ae%a1%e5%b8%88%e9%9c%80%e8%a6%81%e6%89%8b%e7%bb%98%e6%8a%80%e8%83%bd%e4%b9%88%ef%bc%9f/feed/ 0 13个验证与浏览器兼容测试方法 http://www.isonge.cn/2009/08/13%e4%b8%aa%e9%aa%8c%e8%af%81%e4%b8%8e%e6%b5%8f%e8%a7%88%e5%99%a8%e5%85%bc%e5%ae%b9%e6%b5%8b%e8%af%95%e6%96%b9%e6%b3%95/ http://www.isonge.cn/2009/08/13%e4%b8%aa%e9%aa%8c%e8%af%81%e4%b8%8e%e6%b5%8f%e8%a7%88%e5%99%a8%e5%85%bc%e5%ae%b9%e6%b5%8b%e8%af%95%e6%96%b9%e6%b3%95/#comments Sun, 02 Aug 2009 08:15:44 +0000 911 http://www.isonge.cn/?p=497

每天在回顾浏览ThemeForest上的模板的时候，我都会测试验证浏览器的兼容-更不用说我自己的工作。随着时间的推移，我已经收集到了网上最好的验证和浏览器兼容性测试的工具。以下是我最爱的。

PG

作者: Jarel Remick

我是个“讨人厌”的人，花费了大量时间在计算机和所喜爱的网络上.我在ThemeForest.net上制作模板,为Theme Forest写blog。当我不“讨人厌”的时候,我把时间花在了阳光明媚的内华达州拉斯维加斯与我的女朋友一起。

HTML和CSS验证

首先让我们先看一看检查验证HTML与CSS的方法。我应该说到的是由于我在MAC上工作，会略微偏向于MAC。不要担心，仍然有许多平台独立解决方案的。

除了验证你的文件以外,你也应该很好的格式化自己的代码”HTML/CSS格式化实例与提示“是有关此类主题的文章。

1. W3C 验证 – HTML

可能大多数人都知道在线的W3C验证服务你可以通过链接地址进行验证，或者是上传文件或者直接提交代码。有很多的验证选项，尽管很多时间你不真的需要他们。

W3C HTML Validation

2. W3C 验证 – CSS

你很可能知道W3C的也有一个CSS校验服务。与HTML验证服务一样，这个CSS版本更多的选择，并允许在必要时通过的URI验证，文件上传和直接提交代码。

W3C CSS Validation

3. [Firefox] 网页开发工具条

The Web Developer toolbar extension for Firefox的网页开发工具条非常受欢迎，拥有很多非常棒个的功能，附加了很棒的HTML与CSS验证工具，你可以快速的对当前浏览的本地文件网站进行 验证。他会发送URI或者文件到W3C，并在新的选项页里面显示验证结果。

你也可以打开“验证显示页面”来快速查看HTML和CSS的验证信息，无需再打开新的标签页面。假如你在开发一个项目非常有帮助。不仅仅是HTML与CSS你也可以验证更多的选项。

Web Developer Toolbar

4. [独立的浏览器] W3C Validator Favelets

我使用Safari浏览器作为我的主要网络浏览器，但是Firefox已经宠坏了我，它拥有强大的扩展选择，如网络开发工具栏和Firebug。 Safari浏览器的Web Inspector，一个类似Firebug的工具，但不能进行文件验证。

涵盖几乎任何主要浏览器验证HTML和CSS的快速和轻松的方法是使用favelets 。 Favelets是通过JavaScript增加额外的功能的书签片段。 W3C的提供了几种验证favelets，我经常使用的是Safari 。

Safari W3C Validation Favelets

5. 你的开发编辑器

大多数的编辑器提供少许的验证工具。目前我使用的编辑器Coda和CSSEdit都提供验证工具。

Coda's Validator

6. 验证 S.A.C.

如果您需要迅速验证大量的文件，在最喜爱的编辑器或通过浏览器打开所有文件是痛苦的事情。这个应用会让这个过程快速而且简单。

S.A.C验证器是OS X的单机应用程序，可以使用favelet验证HTML文件（with W3C），拖放或者通过URL的或仅仅是应用程序的文件> 打开。我用的是拖放方法尤其频繁。 ;-)

Validator S.A.C.

验证的一些想法

虽然验证是非常重要的，不过它只是一种工具，以帮助确保您的代码达到标准和接近完美。如果您使用的是一些新的网络技术，它可能无法验证，这并不意味着你不应该使用它。创新的问世往往是打破了规则。

尽管如此，如果需要提交的模板进行销售，请确保所有的文件验证后提交。如果有由于CSS3这样的验证错误，只需要在后面的说明中注明。 ;-)

浏览器兼容测试

如果每个人都只使用最新版本的Firefox或Safari浏览器，浏览器的测试将是一件轻而易举的事。还是让我们面对现实吧，这是不会发生，我们未来几年都将会与Internet Explorer的问题做斗争（不只是IE6） 。

以下是一些我常用的和一些我不用的工具，测试Internet Explorer，Safari，Firefox和其他浏览器的兼容性。

当前的IE, Firefox 与 Safari

很明显，如果你在使用的Windows，目前肯定安装了例如Firefox 3.5 ， Safari4 ， Opera和Internet Explorer等浏览器。

browsers

7. 老版本的Firefox

如果需要测试的旧版本Firefox。这里有几个我认为最简单的方法可以做到这一点。

Portableapps在Windows上作为单独的应用软件运行Firefox，因此没有必要安装，也不会干扰到当前安装的Firefox。

Mac下的MultiFirefox 2.0，可以让你运行不同版本的Firefox，并管理不同的账户。

MultiFirefox 2.0

你可以访问 http://releases.mozilla.org/pub/mozilla.org/firefox/releases/ 下载其他版本

8.老版本的Safari

不幸的是，基于Windows的Web开发人员，我没有测试多个版本的Safari浏览器的简单解决办法。对Mac用户来说，这是个不错的独立版本的Safari浏览器收集，Michel Fortin提供。

Muli-Safari

9 & 10. 老版本的Internet Explorer

在Mac下交互测试IE是不轻松的，所以我安装了虚拟机运行XP安装了IETester，这个产品可以帮助你在Windows XP, Vista 和 7下测试IE从5.5开始的各个版本。

IETester

每隔一段时间我都会在IETester中发现一个古怪的问题,我不能确定是不是在原版本的IE6或7中是存在。所以我也使用Internet Explorer Collection安装了独立版本的IE6, 7 和 8。

Internet Explorer Collection

快照服务

假如你不需要在这些浏览器中与你的网站实际互动，你还可以使用多种浏览器的快照服务，这将只显示网站在各种各样的浏览器中的图像效果。

11. Adobe BrowserLab

Adobe最近放出一个新的名叫BrowserLab的服务，它可以通过网站的网址让你看到不同浏览器下的不同效果。快速，免费，你可以进行两个不同浏览器版本的浏览效果进行对比。

Adobe BrowserLab

12. Browsershots.org

Browsershots.org 与Adobe BrowserLab有着相同想法，但是也有很多的不同之处。你可以在更多的平台上设置更多的选项例如屏幕大小，颜色深度，JS，flash等，来测试更多的浏览器效果。服务的趋势在下降，因为速度有点慢（有的时候太慢了），几乎没有很好的UI.

Browsershots.org

13. Browsercam

如果你没有读到”25个设计师必不可少的网络服务“, 那你应该去读一下。你会发现有很多很棒的服务，Browsercam 就是我在其中发现的。

Browsercam也可以做基础的浏览效果截图，但是进一步使用别的功能和快速显示需要付费，然而我没有再次使用。

Browsercam.com

最后的一些想法

现在你拥有了一些在Windows和Mac中验证和测试工作的的方法。如果你要提交模板到Theme Fores，你现在没有验证错误或者浏览器不兼容的接口了吧。大多数我审查拒绝的模板，都是由于浏览器验证错误和浏览器兼容问题而造成的，需要在提交前修正这些问题。

]]> http://www.isonge.cn/2009/08/13%e4%b8%aa%e9%aa%8c%e8%af%81%e4%b8%8e%e6%b5%8f%e8%a7%88%e5%99%a8%e5%85%bc%e5%ae%b9%e6%b5%8b%e8%af%95%e6%96%b9%e6%b3%95/feed/ 0