<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>eddie.Yang's  creative</title>
	<atom:link href="http://www.ediyang.com/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.ediyang.com</link>
	<description>Creative change lives</description>
	<lastBuildDate>Tue, 23 Feb 2010 09:40:18 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>关于找工作</title>
		<link>http://www.ediyang.com/job-hunting-tips/</link>
		<comments>http://www.ediyang.com/job-hunting-tips/#comments</comments>
		<pubDate>Tue, 23 Feb 2010 09:33:47 +0000</pubDate>
		<dc:creator>eddie</dc:creator>
				<category><![CDATA[others]]></category>

		<guid isPermaLink="false">http://www.ediyang.com/?p=826</guid>
		<description><![CDATA[同学们好，我的博客已经很久没更新了。谢谢你能阅读这篇文章，在这我想把我大学毕业找工作的一些经历与感谢记录在此，一方面是自省，一方面也给需要的同学提供参考。]]></description>
			<content:encoded><![CDATA[<p>同学们好，我的博客已经很久没更新了。谢谢你能阅读这篇文章，在这我想把我大学毕业找工作的一些经历与感谢记录在此，一方面是自省，一方面也给需要的同学提供参考。</p>
<h3>被“流水账”</h3>
<p>记得大四开学不久，我就开始关注淘宝，腾讯等等公司的校园招聘活动，关注职位是前端开发以及页面重构。</p>
<p>最开始我面试了cvt这家我不太熟悉的公司，职位是ui设计师。当时只是想去试试胆，而感受是整个招聘现场只有我没有穿正装。不出意外的，我一面都没有通过。</p>
<p>第二次面试比较意外，是在我在理发店刚要开始剪发的时候，一个杭州的电话打了过来，心里既紧张又兴奋。同样的，这种毫无心里准备的面试让我有点措手不及。而整个面试过程虽然时间不短，但是我却表现得十分糟糕，很多技术上的题目我都答不出来或是答得很别扭。印象深刻的是面试官问我“相对定位与绝对定位的区别”的时候我脑子里一片空白，乱说了几句就结束了。虽然这次面试很失败，但是我很深刻的认识到自己的不足，就是“很多问题总结后没回顾，忘记了”，“有些技术问题我懂，但是当面试官用语言问我时，我却不知道其具体是什么”，同时我发现margin跟padding不知道该用什么中文替代，还是用英文。这次面试后我也基本放弃了淘宝实习职位的希望。</p>
<p>10月17日，我跟我的好朋友麦嘉两人去了在网易大厦举行的网易邮箱现场招聘会，网易大厦环境给人感觉很轻松很愉快。但是我们没想到招聘会人很少，以至于我们一进去就马上开始面试。当时面的是“页面架构工程师“这个职位，面试官问的都是比较基础的问题，我感觉我答的还可以，只有一题“你有没有做过换肤”，我说了“没有”。我被面试官告知“等待通知”后等了我朋友接近一个小时，看了他进了一个小黑屋，之后又进了一个玻璃屋。而后来他出来之后我才知道，被“等待通知”都是没戏的。而后我们俩在公车上一直唠叨说“真的太可惜了，那么少人去应聘居然都没进”。</p>
<p>而后我跟麦嘉都急切的等待腾讯以及淘宝、阿里巴巴在广州的校园招聘。记得那天早上我们在大学城华工参加了腾讯的笔试，而同时举行的网易笔试我连机会都没。腾讯的“页面重构”题目难度一般，只是加分题比较烧脑袋。因为我几乎没在纸上写过布局的代码。而我也发现在教室监考的老师就是彪叔（因为大三他在广州招聘时我去偷瞄过），交卷时彪叔还面带微笑问“很容易吧”。中午与麦嘉及珍一起吃过午饭后，我们又参加了淘宝的笔试，淘宝在笔试环节准备得不周全（第一次在广州招聘），教室里挤满了人，试卷也是临时加印。而淘宝的笔试题目我答得没早上那么好，这是因为平时javascript实践太少所致。</p>
<p>正是由于淘宝的题目答得不好，我并没有抱什么希望，而是把更多的期待放在了腾讯的面试。正因为此，我一心在研究腾讯笔试的加分题，没有太在意淘宝的错题及不懂的题目，这也成为了后来淘宝面试失败的重大原因。不出意外的我在笔试当晚4点收到了腾讯的一面通知，同时庆幸面试是在笔试后2天，这样至少可以睡个饱觉。</p>
<p>2天后的早上我坐了1个小时车到了大学城中大进行腾讯的一面，面试安排在面试官的酒店客房里。房门打开，面试官还是彪叔，彪叔亲和力十足，面带微笑并且摆了几瓶可乐在桌子上招待应聘者。由于我有事先准备，所以彪叔问的问题我基本都答得出来，唯独其中一题我答得不好。整个面试过程很愉快也比较轻松，而从面试官的表情我内心也自我暗示进下一轮应该没有问题。</p>
<p>早上面试完回到学校宿舍想好好睡一觉的时候，我又意外的接到了杭州的电话，而且是很多个8结尾的电话。原来是因为我没法参加上海举行的支付宝的校园招聘，他们帮我安排了电话面试。支付宝的面试官给人比较轻松的感觉，特别当我答不出的时候还主动安慰我说“没关系”，这也让我慢慢进入状态。而电话面试一共进行了3轮，当天晚上我在上选修课的时候，接到了支付宝hr的电话，才知道offer已经离我不远了。</p>
<p>面支付宝后当晚我又意外的收到了淘宝发来的在体育西面试的通知短信。由于腾讯的表现良好以及支付宝的电面，我心里大意了，以至于我到了面试现场，我才发现淘宝笔试的题目我还没去纠正答案。当我懊悔不已的时候一个头很光亮的同学叫了我进去，后来才知道他就是秦歌同学，口碑ued的大佬。如前面所说，由于我的大意，我犯下了一个我自己都无法原谅的错误，那就是错的题目没有去改正。虽然秦歌没有让我通过面试，但是他正如他所说，他希望我明白自己未来的路是怎么样的。秦歌对待毕业生这种态度让我佩服，我也毫无掩饰的承认自己的不足以及对前端的爱好。</p>
<p>而当天晚上，我的心跳又快了起来，因为今晚是公布腾讯2面的时间了。腾讯2面的面试官是一位“很像海归很有修养”的大年龄的同学，后来听说应该是QQ空间的部门经理了。这次面试简直打破了我面试的最短时间记录，因为只持续了7分钟。-_-#然后又不出意外的我败在了这一面了。</p>
<p>到这里，我的找工作经历也基本结束了，虽然我不像一些同学一样同时拿到几大公司的offer，但是对于支付宝的offer我一方面心存感激，一方面感到十分幸运。而我在这也要好好地谢谢那些我认识的或是不认识的帮助过我的朋友。谢谢 <a href="http://twitter.com/dleo/" target="_blank">@dleo</a>,<a href="http://adriancheng.name/">adrian cheng</a>,<a href="http://dancewithnet.com/">秦歌</a>,<a href="http://www.twinsenliang.net/">彪叔</a>,<a href="http://www.iamendless.com/">丁忠辉</a>,麦嘉，还有我亲爱的爸妈，姐姐，还有一直陪我到处奔波的珍珍。</p>
<h3>可以只看这几句</h3>
<p>希望这几句话能对以后的应届生有所帮助：</p>
<ul>
<li>不要大意</li>
<li>提前准备</li>
<li>诚实最重要</li>
<li>保持乐观，不要放弃</li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://www.ediyang.com/job-hunting-tips/feed/</wfw:commentRss>
		<slash:comments>23</slash:comments>
		</item>
		<item>
		<title>CU3ER:超酷的幻灯片效果</title>
		<link>http://www.ediyang.com/cu3er-introduction/</link>
		<comments>http://www.ediyang.com/cu3er-introduction/#comments</comments>
		<pubDate>Wed, 21 Oct 2009 14:44:37 +0000</pubDate>
		<dc:creator>eddie</dc:creator>
				<category><![CDATA[others]]></category>

		<guid isPermaLink="false">http://www.ediyang.com/?p=809</guid>
		<description><![CDATA[昨天有一位朋友在谈到了图片幻灯片效果的时候说ediyang.com那个幻灯片太“平庸”了，的确我从来都没考虑过这个问题。呵呵，碰巧我今天看到一个相当不错的Flash幻灯片效果CU3ER，在这里介绍给大家。]]></description>
			<content:encoded><![CDATA[<p>昨天有一位朋友在谈到了图片幻灯片效果的时候说ediyang.com那个幻灯片太“平庸”了，的确我从来都没考虑过这个问题。呵呵，碰巧我今天看到一个相当不错的Flash幻灯片效果CU3ER，在这里介绍给大家：</p>
<h3>1.真的很酷？</h3>
<p>首先我建议大家看看官网这个惊艳的DEMO:</p>
<p><a href="http://www.progressivered.com/cu3er/">http://www.progressivered.com/cu3er/</a></p>
<p>可以看到一个图片幻灯片该有的功能它CU3ER它都有了，而且更漂亮更酷。</p>
<p><a href="http://www.ediyang.com/wp-content/uploads/2009/10/cu3er-1.jpg"><img class="alignnone size-full wp-image-810" title="cu3er-1" src="http://www.ediyang.com/wp-content/uploads/2009/10/cu3er-1.jpg" alt="cu3er 1 CU3ER:超酷的幻灯片效果" width="487" height="233" /></a></p>
<h3>2.我也要试试</h3>
<p>CU3ER的使用十分简单，保证3分钟内你就可以学会了。</p>
<h4>下载</h4>
<p>到<a href="http://www.progressivered.com/cu3er/download/">http://www.progressivered.com/cu3er/download/</a>猛击那个红色的大按钮，下载源文件。</p>
<h4>配置</h4>
<p>配置上最核心的就是<strong>config.xml</strong>这个文件了，接下来介绍一下大致标签的含义：</p>
<pre><code>&lt;?xml version="1.0" encoding="utf-8" ?&gt;
&lt;cu3er&gt;

    &lt;slides&gt;
        &lt;slide&gt;
            &lt;url&gt;images/slide_1.jpg&lt;/url&gt;
        &lt;/slide&gt;

        &lt;slide&gt;
            &lt;url&gt;images/slide_2.jpg&lt;/url&gt;
        &lt;/slide&gt;

        &lt;slide&gt;
            &lt;url&gt;images/slide_3.jpg&lt;/url&gt;
        &lt;/slide&gt;
    &lt;/slides&gt;

&lt;/cu3er&gt;</code></pre>
<p>很简明的，每一张图片都是包含在&lt;slide&gt;标签之中的，你可以把图片地址修改为你要的图片。</p>
<p>修改好图片之后，就是“前进，后退“按钮以及自动播放的问题了，这些配置全部包含在&lt;settings&gt;标签以内的，我们简单的看看先：</p>
<pre><code>&lt;settings&gt;

    	&lt;prev_button&gt;
			&lt;defaults round_corners="5,5,5,5"/&gt;
			&lt;tweenOver tint="0xFFFFFF" scaleX="1.1" scaleY="1.1"/&gt;
			&lt;tweenOut tint="0x000000" /&gt;
		&lt;/prev_button&gt;

    	&lt;prev_symbol&gt;
			&lt;tweenOver tint="0x000000" /&gt;
		&lt;/prev_symbol&gt;

    	&lt;next_button&gt;
			&lt;defaults round_corners="5,5,5,5"/&gt;
			&lt;tweenOver tint="0xFFFFFF"  scaleX="1.1" scaleY="1.1"/&gt;
			&lt;tweenOut tint="0x000000" /&gt;
		&lt;/next_button&gt;

    	&lt;next_symbol&gt;
			&lt;tweenOver tint="0x000000" /&gt;
		&lt;/next_symbol&gt;	

	&lt;/settings&gt;</code></pre>
<p><code>&lt;prev_button&gt;</code>代表后退按钮， <code>&lt;prev_symbol&gt;</code>代表后退按钮的“箭头”。前进按钮与箭头同上。 <code>&lt;tweenOver tint="0xFFFFFF" scaleX="1.1" scaleY="1.1"/&gt;</code>是指当鼠标移上（mouseover）前进后退按钮时，按钮样式变大1.1倍，并变为ffffff这个颜色。  假如你想要幻灯片自动播放，需要在里加入以下代码：</p>
<pre><code>&lt;auto_play&gt;
	&lt;defaults symbol="circular" time="3" /&gt;
	&lt;tweenIn x="500" y="50" width="35" height="35" tint="0xFFFFFF" /&gt;
&lt;/auto_play&gt;</code></pre>
<p>即可。</p>
<p>详细的说明文档请参见官网<a href="http://www.progressivered.com/cu3er/docs/">document</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.ediyang.com/cu3er-introduction/feed/</wfw:commentRss>
		<slash:comments>32</slash:comments>
		</item>
		<item>
		<title>提升密码输入框易用性，2个jQuery插件</title>
		<link>http://www.ediyang.com/2-jquery-plugin-improve-password-field-usability/</link>
		<comments>http://www.ediyang.com/2-jquery-plugin-improve-password-field-usability/#comments</comments>
		<pubDate>Tue, 25 Aug 2009 10:02:36 +0000</pubDate>
		<dc:creator>eddie</dc:creator>
				<category><![CDATA[jquery]]></category>
		<category><![CDATA[javascript]]></category>

		<guid isPermaLink="false">http://www.ediyang.com/?p=778</guid>
		<description><![CDATA[密码输入框，或者说表单是我们普通网民需要经常接触的网页元素之一。但是密码输入框的用户易用性却一直没有没有列入到设计者的考虑中去。
我今天介绍这2个jQuery插件分别是Chroma-Hash以及跟iPhone一样的密码输入框，他们功能不同，但却一样提升了密码输入的易用性。]]></description>
			<content:encoded><![CDATA[<p>密码输入框，或者说表单是我们普通网民需要经常接触的网页元素之一。但是密码输入框的用户易用性却一直没有没有列入到设计者的考虑中去。<br />
我今天介绍这2个jQuery插件分别是<a href="http://mattt.me/2009/07/chroma-hash-a-belated-introduction/">Chroma-Hash</a>以及跟<a href="http://blog.decaf.de/2009/07/iphone-like-password-fields-using-jquery/">iPhone一样的密码输入框</a>，他们功能不同，但却一样提升了密码输入的易用性。</p>
<h3>1.Chroma-Hash</h3>
<p>首先介绍Chroma-Hash，它可以实时用3条色块（可以更多）来形象化你的密码。试试<strong><a href="http://mattt.github.com/Chroma-Hash/">demo演示</a></strong>，或看下图你就明白：<br />
<a href="http://mattt.github.com/Chroma-Hash/"><img class="alignnone size-full wp-image-783" title="chroma-hash" src="http://www.ediyang.com/wp-content/uploads/2009/08/图片-31.png" alt="chroma-hash" width="471" height="252" /></a></p>
<p>可以看到在密码输入框的右边有3个色块表示你的密码，这么做的好处有2个：</p>
<ul>
<li>登录时，用户可以通过颜色判断密码是否输入正确</li>
<li>注册时，用户可以通过对比2次密码输入的色块，判断2个密码是否一致</li>
</ul>
<p>而完成以上步骤是实时完成，更不用通过将数据输送到服务器端，因为用户可以提前知道自己的密码是否有误。</p>
<h4>如何使用</h4>
<p>1.首先到<a href="http://github.com/mattt/Chroma-Hash/tree/master">http://github.com/mattt/Chroma-Hash/tree/master</a>下载<a href="http://mattt.github.com/Chroma-Hash/chroma-hash.js">chroma-hash.js</a><br />
2.html代码如下：</p>
<pre>&lt;fieldset&gt;
&lt;label&gt;Username&lt;/label&gt;
 &lt;input id="username" name="username" type="text" /&gt;
 &lt;label&gt;Password&lt;/label&gt;
 &lt;input id="password" name="password" type="password" /&gt;

 &lt;label&gt;Confirm Password&lt;/label&gt;
 &lt;input id="confirm-password" name="confirm-password" type="password" /&gt;
 &lt;/fieldset&gt;</pre>
<p>2.接着在我们的html 文件中引入jQuery以及chrome-hash.js</p>
<pre><code>
&lt;script src="http://www.google.com/jsapi"&gt;&lt;/script&gt;
 &lt;script type="text/javascript" charset="utf-8"&gt;
 google.load("jquery", "1.3.2");
 &lt;/script&gt;
</code>&lt;script src="chroma-hash.js" type="text/javascript" charset="utf-8"&gt;&lt;/script&gt;</pre>
<p>3.调用函数</p>
<pre><code>
&lt;script type="text/javascript" charset="utf-8"&gt;
$(document).ready(function() {
$("input:password").chromaHash({bars: 3});
$("#username").focus();
});
&lt;/script&gt;
</code></pre>
<p>详细信息可以浏览<a href="http://mattt.me/2009/07/chroma-hash-a-belated-introduction/">作者的网站</a></p>
<h3>2.像iPhone一样的密码输入框</h3>
<p>如果你没有用过iPhone可能并不会明白这个插件的功能，简单的说，就是在密码输入框键入一个字符时它并不会马上变成星号，只有再键入下一个字符时它才会变成星号。<br />
还是看看<a href="http://blog.decaf.de/2009/07/iphone-like-password-fields-using-jquery/">demo演示</a>好了吧，或者看下图：<br />
<a href="http://blog.decaf.de/2009/07/iphone-like-password-fields-using-jquery/"><img class="alignnone size-full wp-image-797" title="iphone-password" src="http://www.ediyang.com/wp-content/uploads/2009/08/iphone-password.jpg" alt="iphone password 提升密码输入框易用性，2个jQuery插件" width="262" height="362" /></a></p>
<p>这样做的好处是：</p>
<ul>
<li>用户可以及时知道自己输错密码</li>
</ul>
<h4>如何使用</h4>
<p>1.到<a href="http://dpassword.googlecode.com/svn/trunk/lib/jQuery.dPassword.js">http://dpassword.googlecode.com/svn/trunk/lib/jQuery.dPassword.js</a>下载jQuery.dPassword.js文件</p>
<p>2.在我们的html文件中引入jQuery与jQuery.dPassword.js并调用</p>
<pre><code>
&lt;script type="text/javascript" src="/js/jquery.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="/js/jQuery.dPassword.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
	$(document).ready( function() {
		$('input:password').dPassword();
	});
&lt;/script&gt;</code></pre>
<p>详细信息可以浏览<a href="http://blog.decaf.de/2009/07/iphone-like-password-fields-using-jquery/">作者的网站</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.ediyang.com/2-jquery-plugin-improve-password-field-usability/feed/</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
		<item>
		<title>CSS3:文字阴影知多少</title>
		<link>http://www.ediyang.com/css3-text-shadow-why-and-how/</link>
		<comments>http://www.ediyang.com/css3-text-shadow-why-and-how/#comments</comments>
		<pubDate>Fri, 19 Jun 2009 13:05:27 +0000</pubDate>
		<dc:creator>eddie</dc:creator>
				<category><![CDATA[css]]></category>
		<category><![CDATA[headline]]></category>
		<category><![CDATA[web]]></category>

		<guid isPermaLink="false">http://www.ediyang.com/?p=747</guid>
		<description><![CDATA[由于最近我因为要安装Firebug 1.4导致我不得不安装了Firefox 3.5,所以很不小心地接触到了Wordpress后台那漂亮的文字阴影.也就是CSS中的text-shadow属性.所以今天我整理了一些资料,希望可以对大家有所启发.]]></description>
			<content:encoded><![CDATA[<p>最近我因为要安装<a href="https://addons.mozilla.org/zh-CN/firefox/addon/1843">Firebug 1.4</a>导致我不得不安装了<a href="http://www.mozilla.com/en-US/firefox/all-beta.html">Firefox 3.5</a>,所以很不小心地接触到了Wordpress后台那漂亮的文字阴影.也就是CSS中的text-shadow属性.所以今天我整理了一些资料,希望可以对大家<strong>有所启发</strong>.</p>
<p>首先我们看看<strong>wordpress 2.8</strong>后台使用了text-shadow的部分(绿色箭头).觉得怎么样?没错,这些都是CSS3属性,而不是图片做成的.</p>
<p><img class="size-full wp-image-752" title="wordpress 2.8 阴影" src="http://www.ediyang.com/wp-content/uploads/2009/06/21.PNG" alt="wordpress 2.8 阴影" width="398" height="154" /></p>
<h3>text-shadow是什么?</h3>
<p>text-shadow早在CSS2中已经存在,而现在CSS3也准备将他加入其中.并且由于一直以来只有Safari支持这个属性所以我们<strong>很少见到</strong>真正的应用,直到最近Firefox 3.5对它的支持然重新唤起了人们对它的<strong>兴趣</strong>.</p>
<p>text-shadow可以支持给文字加上阴影,这样我们在设计时可以利用css3属性<a href="http://www.ediyang.com/photoshop-text-effect-skills/">增加文字的质感</a>而不用使用任何图片.</p>
<p>目前支持的浏览器有Firefox 3.1+,Safari 3+,Opera 9.5+等现代浏览器(数据可能有偏差).当然IE家族是无法支持的.</p>
<p>接下来看看text-shadow的<strong>语法</strong>:</p>
<pre><code>text-shadow:color length length length;</code></pre>
<p>color:颜色; length分别按顺序指&#8221;<strong>X轴方向长度 Y轴方向长度 阴影模糊半径</strong>&#8221;</p>
<p>正值在X轴表示向右,负值表示向左.同样的道理Y轴负值是表示向上.</p>
<p>其中任意一个值可以为零也可为空(将做默认处理)</p>
<p>举个例子:</p>
<pre><code>text-shadow: -1px 2px 3px #ffb69a;</code></pre>
<p>表示X轴方向阴影向左1px,Y轴方向阴影向下2px,而阴影模糊半径3px,颜色为 #ffb69a</p>
<h3>一些试验与demo</h3>
<p>我做了点小小的试验,做成了一个<strong><a href="http://www.ediyang.com/demo/textShadow/">Demo</a></strong>页面.</p>
<p>为了向浏览器<strong>不支持</strong>text-shadow的用户看到阴影效果,请直接看以下<strong>截图</strong>(有位朋友说那个&#8221;火鸟&#8221;看起来像&#8221;鸡&#8221;):</p>
<p><a href="http://www.ediyang.com/demo/textShadow/"><img class="size-full wp-image-745" title="CSS文字阴影" src="http://www.ediyang.com/wp-content/uploads/2009/06/1.PNG" alt="textshadow文字阴影" width="325" height="276" /></a></p>
<p><strong>如果</strong>你使用的是Firefox 3.1+,Safari等浏览器,那请直接点<strong><a href="http://www.ediyang.com/demo/textShadow/">Demo演示</a></strong></p>
<h3>为什么使用text-shadow</h3>
<ul>
<li>可以增强文字<strong>质感</strong></li>
<li>可以减少图片的使用,减少<strong>带宽</strong>支出</li>
<li>随着Firefox 3.5支持text-shadow,不久很多人将可以看到你定义的阴影</li>
</ul>
<p><strong>不相信?</strong>请看看下面的截图,这是对<a href="http://tweetcc.com/">http://tweetcc.com/</a>网站分别在safari 4(win)与Firefox 3.0.11下所进行的截图.很明显在有text-shadow应用下整体文字<strong>层次感</strong>好了许多.</p>
<p><a href="http://tweetcc.com"><img class="alignnone size-full wp-image-755" title="tweetcc" src="http://www.ediyang.com/wp-content/uploads/2009/06/5.png" alt="tweetcc" width="450" height="304" /></a></p>
<h3>其他例子</h3>
<p>接下来我们继续看看一些<strong>有趣</strong>的text-shadow下的例子吧,首先看看<a href="http://vikiworks.com">vikiworks</a>用text-shadow来显示程序代码.很多人都觉得这个效果很赞,没错,该网站用的就是css3属性.</p>
<p><a href="http://vikiworks.com/2009/04/25/wordpress-image-roll/"><img class="alignnone size-full wp-image-756" title="vikiworks" src="http://www.ediyang.com/wp-content/uploads/2009/06/vikiworks.PNG" alt=" CSS3:文字阴影知多少" width="421" height="155" /></a></p>
<h4>参考资料及常见问题</h4>
<p>看完上面觉得不够,那么可以参考一下下面的文章.</p>
<ul>
<li><a href="http://www.css3.info/preview/text-shadow/">http://www.css3.info/preview/text-shadow/</a></li>
<li><a href="http://www.w3.org/TR/2003/CR-css3-text-20030514/#text-shadows">http://www.w3.org/TR/2003/CR-css3-text-20030514/#text-shadows</a></li>
<li><a href="http://www.quirksmode.org/css/textshadow.html">http://www.quirksmode.org/css/textshadow.html</a></li>
</ul>
<p><strong>问题</strong>有:</p>
<ul>
<li>如果使用了blur,也就是定义了阴影模糊半径,会导致页面在滚动时变慢.</li>
</ul>
<p>转载请注明来源:<a href="http://www.ediyang.com/css3-text-shadow-why-and-how/">http://www.ediyang.com/css3-text-shadow-why-and-how/</a></p>
<p><strong>请留意:</strong>本文章旨在<del datetime="2009-06-19T13:22:04+00:00">借刀杀人</del>抛砖引玉引起大家对CSS3的兴趣.</p>
<p>也比较侧重该属性呈现的效果,所以对该属性的技术性讲解及定义都有所偏差,请原谅.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.ediyang.com/css3-text-shadow-why-and-how/feed/</wfw:commentRss>
		<slash:comments>32</slash:comments>
		</item>
		<item>
		<title>网页中图片格式选择与压缩</title>
		<link>http://www.ediyang.com/image-optimization/</link>
		<comments>http://www.ediyang.com/image-optimization/#comments</comments>
		<pubDate>Thu, 11 Jun 2009 12:40:00 +0000</pubDate>
		<dc:creator>eddie</dc:creator>
				<category><![CDATA[others]]></category>
		<category><![CDATA[web design]]></category>

		<guid isPermaLink="false">http://www.ediyang.com/%e7%bd%91%e9%a1%b5%e4%b8%ad%e5%9b%be%e7%89%87%e6%a0%bc%e5%bc%8f%e9%80%89%e6%8b%a9%e4%b8%8e%e5%8e%8b%e7%bc%a9/</guid>
		<description><![CDATA[我们知道在制作网页过程中图片占了一个十分重要的地位.尽管网速越来越快,但是图片太大依然是造成网页载入速度过慢的最重要原因之一.那么到底在GIF,PNG,JPG这些格式我们要选择哪一种作为候选格式,而哪种图片格式可以让图片更小,却拥有更好的图片质量呢?
]]></description>
			<content:encoded><![CDATA[<p>我们知道在制作网页过程中图片占了一个十分重要的地位.尽管网速越来越快,但是图片太大依然是造成网页载入速度过慢的最重要原因之一.</p>
<p>那么到底在GIF,PNG,JPG这些格式我们要选择哪一种作为候选格式,而哪种图片格式可以让图片更小,却拥有更好的图片质量呢?</p>
<p>1.图片格式</p>
<p><strong>GIF</strong></p>
<p>GIF最突出的地方就是他支持动画,同时GIF也是一种无损的图片格式,也就是说你在修改图片之后,图片质量并没有损失.再者GIF支持半透明(全透明或是全不透明).<br />
根据Google的说法,GIF适用于很小或是较简单的图片(10&#215;10以下或是3种颜色以下的图片).</p>
<p><strong>PNG</strong></p>
<p>首先,PNG包括了<strong>PNG-8</strong>跟<strong>真彩色-PNG</strong>(PNG-24 or PNG-32).那PNG相对于GIF最大的优势是:</p>
<ul>
<li>通常体积会更小</li>
<li>支持alpha(全透明)</li>
</ul>
<p>但是我们知道PNG是不支持动画的.</p>
<p>同时需要留意IE6是可以支持PNG-8的,但是在处理PNG-24的透明时会显示会灰色.相关例子可以参考<a href="http://www.sitepoint.com/blogs/2007/09/18/png8-the-clear-winner/">sitepoint</a>.</p>
<p>通常图片保存为PNG-8会在同等质量下获得比GIF更小的体积,而全透明的图片我们现在只能使用PNG-24.但是请留意在保存图片在PNG-8与GIF中进行比较.因为定律并不一直正确.</p>
<p><strong>JPG</strong></p>
<p>JPG所能显示的颜色比GIF,PNG要多的多,同时得到很好的压缩,所以JPG很适用于保存数码照片.但是注意它是一种失真压缩,这意味着你每次修改图片都会造成像素失真.</p>
<p>看了上面的介绍你应该对使用哪种格式保存哪种图片有了大概的了解.简单的说就是:</p>
<p><em>一句话:</em><strong>小图片或网页基本元素(如按钮),考虑PNG-8或GIF.照片则考虑JPG.</strong></p>
<h3>2.图片的压缩</h3>
<p>首先,我们如果是在Photoshop中制作的图片或是网站素材,在保存图片时,切记选择&#8221;文件-存储为Web和设备所用格式&#8221;.因为这样往往在同等质量下能获得更小的图片体积(相比直接&#8221;存储为&#8221;).请看下图:</p>
<p><img title="1" src="http://www.ediyang.com/wp-content/uploads/2009/06/1.gif" alt="Photoshop保存网页专用图片" /><br />
<strong>Smush it!</strong><br />
在按照上面方法存储图片之后,其实还是可以继续压缩图片大小的,而且我谈论的是不对图片质量造成损失的方法.</p>
<p>Smush it!包含在著名的著名插件YSlow之中,并确保已经安装了Firebug.使用方法很简单,只需要在YSlow中打开&#8221;tool&#8221;下的All Smush it! 将会跳转到一个新页面,对当前网页的图片进行压缩.而这些压缩都是在不损失图片质量下进行的.所以你大可放心.<br />
<img title="2" src="http://www.ediyang.com/wp-content/uploads/2009/06/2.png" alt="smush it" /><br />
6-15更新:由于&#8221;<strong>实践是检验真理的惟一方式</strong>&#8220;,那么我现在用Smush it!对本网站及<a href="http://vikiworks.com/">vikiworks.com</a>分别进行测试,结果显示<a href="http://www.ediyang.com ">ediyang.com</a>首页的图片压缩了6.52K,而<a href="http://vikiworks.com/">vikiworks.com</a>的首页压缩结果<strong>十分惊人</strong>,竟是46K,截图如下:<br />
<img class="alignnone size-full wp-image-738" title="smuchitresult" src="http://www.ediyang.com/wp-content/uploads/2009/06/smuchitresult.PNG" alt=" 网页中图片格式选择与压缩" width="493" height="168" /><br />
由此可见Smuch it!真的是图片压缩的<strong>一大利器</strong>.<br />
如果你想要单独压缩某一张图片,你可以到<br />
<a title="http://developer.yahoo.com/yslow/smushit/index.html" href="http://developer.yahoo.com/yslow/smushit/index.html">http://developer.yahoo.com/yslow/smushit/index.html</a><br />
只要填写图片的网址就可以进行压缩了.</p>
<p><em>Tips:</em>先在PS中保存为web格式图片,然后再使用Smush it!压缩图片.</p>
<h4>3.其他资料</h4>
<p>当然,如果你想要更深刻地了解这些知识,你可以选择下面的文章进行阅读:</p>
<p><a title="http://code.google.com/speed/page-speed/docs/payload.html#CompressImages" href="http://code.google.com/speed/page-speed/docs/payload.html#CompressImages">http://code.google.com/speed/page-speed/docs/payload.html#CompressImages</a></p>
<p><a title="http://yuiblog.com/blog/2008/10/29/imageopt-1/" href="http://yuiblog.com/blog/2008/10/29/imageopt-1/">http://yuiblog.com/blog/2008/10/29/imageopt-1/</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.ediyang.com/image-optimization/feed/</wfw:commentRss>
		<slash:comments>6</slash:comments>
		</item>
		<item>
		<title>Photoshop在网页设计中制作文字效果的2种方法</title>
		<link>http://www.ediyang.com/photoshop-text-effect-skills/</link>
		<comments>http://www.ediyang.com/photoshop-text-effect-skills/#comments</comments>
		<pubDate>Wed, 20 May 2009 06:05:00 +0000</pubDate>
		<dc:creator>eddie</dc:creator>
				<category><![CDATA[photoshop]]></category>

		<guid isPermaLink="false">http://www.ediyang.com/photoshop%e5%9c%a8%e7%bd%91%e9%a1%b5%e8%ae%be%e8%ae%a1%e5%a2%9e%e5%bc%ba%e6%96%87%e5%ad%97%e6%95%88%e6%9e%9c%e7%9a%842%e7%a7%8d%e6%96%b9%e6%b3%95/</guid>
		<description><![CDATA[上次我介绍了在Photoshop如何加强网页设计中的像素细节,很多朋友都觉得讲的不够多,并且一些朋友很想了解如何在Photoshop制作一些文字的特别效果,其实在现在的网页设计中,常用的文字效果并不多,实现的方法也很简单.所以接下来的内容我希望对大家有帮助.]]></description>
			<content:encoded><![CDATA[<p>上次我介绍了在<a href="http://www.ediyang.com/3-photoshop-skills-make-pixel-popping/">Photoshop加强网页设计中的细节</a>,很多朋友都觉得讲的不够多,并且一些朋友很想了解如何在Photoshop制作一些文字的特别效果(还有一位朋友问我在photoshop如何生成艺术字,这在Word才有).</p>
<p>其实在现在的网页设计中,比较常用的文字效果并不多,实现的方法也很<strong>简单</strong>.所以接下来的内容我希望能对网页设计中的新手有所帮助.</p>
<p>我这篇教程将围绕2个关键字:<strong>&#8220;渐变&#8221;</strong>,<strong>&#8220;阴影&#8221;</strong>.</p>
<h3>1.更有质感的字</h3>
<p><a href="http://brightkite.com/"><img class="alignnone size-full wp-image-635" title="brightkite.png" src="http://www.ediyang.com/wp-content/uploads/2009/05/brightkite.png" alt="brightkite Photoshop在网页设计中制作文字效果的2种方法" width="254" height="88" /></a><br />
我们先看图片里这个LOGO,它显得更有<strong>质感</strong>,文字有一张向外伸展,不会死板地贴在网页上.如果你仔细观察,你会很容易发现文字的brightkite都使用了色彩<strong>&#8220;渐变&#8221;</strong>.是的,文字的颜色都不是单色填充,而是<strong>&#8220;渐变&#8221;</strong>.&#8221;渐变&#8221;为什么看起来更有质感呢?这是因为这里模拟了大自然光照中的效果,即高光部分在文字的上方,而低光在下.同时也不要忽略了另一个细节,就是文字的<strong>&#8220;阴影&#8221;</strong>,.</p>
<p><strong>那到底要怎么做呢?</strong><br />
<img class="alignnone size-full wp-image-637" title="1.jpg" src="http://www.ediyang.com/wp-content/uploads/2009/05/11.jpg" alt="11 Photoshop在网页设计中制作文字效果的2种方法" width="326" height="188" /></p>
<p>留意图中的2跟3,如果你还不懂如何添加渐变.请在图层面板中双击&#8221;图层名&#8221;右边的空白处,或是点击下图中的第2个按钮(在图层面板下方)打开样式面板.</p>
<p><img class="alignnone size-full wp-image-639" title="2.png" src="http://www.ediyang.com/wp-content/uploads/2009/05/2.png" alt="2 Photoshop在网页设计中制作文字效果的2种方法" width="263" height="29" /></p>
<p>&#8220;渐变叠加&#8221;,然后按下图设置.渐变的颜色选择2个同色系但是有&#8221;深浅对比&#8221;的颜色.例如例子中,一个浅绿跟深绿.这样才能模拟光照效果.</p>
<p><img class="alignnone size-full wp-image-641" title="3.png" src="http://www.ediyang.com/wp-content/uploads/2009/05/3.png" alt="3 Photoshop在网页设计中制作文字效果的2种方法" width="420" height="270" /></p>
<p>好了,剩下阴影.还是一样在样式面板左侧点&#8221;投影&#8221;,然后按下图设置:</p>
<p><img class="alignnone size-full wp-image-643" title="4.png" src="http://www.ediyang.com/wp-content/uploads/2009/05/41.png" alt="4.png" width="425" height="205" /><br />
再看其他使用了这个方法的网站设计:<br />
<a href="http://www.saturized.com/"><img class="alignnone size-full wp-image-674" title="141" src="http://www.ediyang.com/wp-content/uploads/2009/05/141.png" alt="141 Photoshop在网页设计中制作文字效果的2种方法" width="289" height="73" /></a></p>
<h3>2.凹陷的字</h3>
<p>照例我们看一个例子:</p>
<p><a href="http://www.alexbuga.com/v8/"><img class="alignnone size-full wp-image-645" title="6.png" src="http://www.ediyang.com/wp-content/uploads/2009/05/6.png" alt="6 Photoshop在网页设计中制作文字效果的2种方法" width="292" height="106" /></a></p>
<p><a href="http://www.alexbuga.com/v8/">ALEX BUGA</a>网站的LOGO,我觉得是凹陷字体的典范.而这样的字体效果很明显有一种凹陷在背景里的感觉,甚至文字像是刻在石头上一般. 如果你已经完成了第一个文字效果,那么接下来的内容对你是相当简单的.</p>
<p><a href="http://www.ediyang.com/wp-content/uploads/2009/05/71.jpg"><img class="alignnone size-full wp-image-647" title="7.jpg" src="http://www.ediyang.com/wp-content/uploads/2009/05/71.jpg" alt="7.jpg" width="326" height="188" /><br />
</a></p>
<p>1.首先输入文字,颜色填充为较背景更深的颜色,例子中为#4e3400</p>
<p>2.添加&#8221;内阴影&#8221;样式,设置如下图:</p>
<p><img class="alignnone size-full wp-image-649" title="9.png" src="http://www.ediyang.com/wp-content/uploads/2009/05/9.png" alt="9 Photoshop在网页设计中制作文字效果的2种方法" width="421" height="201" /></p>
<p>3.添加&#8221;斜面和浮雕&#8221;样式,设置如下:</p>
<p><img class="alignnone size-full wp-image-651" title="10.png" src="http://www.ediyang.com/wp-content/uploads/2009/05/10.png" alt="10 Photoshop在网页设计中制作文字效果的2种方法" width="421" height="406" /></p>
<p>作品完成. 该效果需注意:</p>
<ul>
<li>字体颜色选择与背景色要搭配</li>
<li>第2部的内阴影设置时,&#8221;大小&#8221;与&#8221;距离&#8221;可以根据你的文字大小来调整</li>
<li>添加内斜面只为增强白色的光照效果,可以选择不加</li>
</ul>
<p>接下来看一些使用&#8221;凹陷&#8221;效果的网站设计:</p>
<p><a href="http://bullspot.com/"><img class="alignnone size-full wp-image-660" title="11" src="http://www.ediyang.com/wp-content/uploads/2009/05/11.png" alt="11 Photoshop在网页设计中制作文字效果的2种方法" width="201" height="50" /></a><a href="http://www.bohemiancoding.com/"><img class="alignnone size-full wp-image-661" title="121" src="http://www.ediyang.com/wp-content/uploads/2009/05/121.png" alt="121 Photoshop在网页设计中制作文字效果的2种方法" width="239" height="87" /></a></p>
<h4>额外赠送</h4>
<p>在这里推荐一个<strong>下载英文字体</strong>很好的网站,而且是全<strong>免费</strong>的:<a href="http://www.dafont.com">www.dafont.com</a>.</p>
<p>同时也在最后说明一下,虽然字体的效果可以有很多种,<strong>但是也要注意使用的场合</strong>,不是什么地方,什么类型的网站都适合我上面介绍的方法.有时候就是不加修饰的字体,也可以做出很好的效果.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.ediyang.com/photoshop-text-effect-skills/feed/</wfw:commentRss>
		<slash:comments>22</slash:comments>
		</item>
		<item>
		<title>Photoshop网页设计中加强像素化细节的3个小技巧</title>
		<link>http://www.ediyang.com/3-photoshop-skills-make-pixel-popping/</link>
		<comments>http://www.ediyang.com/3-photoshop-skills-make-pixel-popping/#comments</comments>
		<pubDate>Thu, 07 May 2009 12:26:41 +0000</pubDate>
		<dc:creator>eddie</dc:creator>
				<category><![CDATA[photoshop]]></category>

		<guid isPermaLink="false">http://www.ediyang.com/?p=608</guid>
		<description><![CDATA[在网页设计中细节的处理十分重要，我个人也经常观摩外国佬的网站，发现优秀的网站设计在细节方面的处理都是照顾十分周全的。今天在这里分享给大家的小技巧很简单，但是却可以很好滴增强整个网站的细节。所以我自我认为这些技巧对提升你的网站设计水平也是有帮助的。
并且你会留意到这些技巧都]]></description>
			<content:encoded><![CDATA[<p>在网页设计中细节的处理十分重要，我个人也经常观摩外国佬的网站，发现优秀的网站设计在细节方面的处理都是照顾十分周全的。今天在这里分享给大家的小技巧很简单，但是却可以很好滴增强整个网站的细节。所以我自我认为这些技巧对提升你的网站设计水平也是有帮助的。<br />
并且你会留意到这些技巧都围绕一个词，就是“像素化”，简单地说就是一些1px，2px的小线。<br />
好吧，我们开始。</p>
<h3>1.像素分隔线</h3>
<p>第一个介绍的是分隔线，请看下图，为<a href="http://www.pixel2life.com/">Pixel2Life.com</a>的导航栏。<br />
<img class="alignnone size-full wp-image-610" title="1" src="http://www.ediyang.com/wp-content/uploads/2009/05/1.jpg" alt="1 Photoshop网页设计中加强像素化细节的3个小技巧" width="279" height="122" /><br />
留意图中<strong>红圈圈中</strong>的线已经按钮之间的分隔线，这些线看起来有一种<strong>凹进去</strong>的感觉，形成一种很好的分隔线的感觉。接下来我把这张图放大，我们看看其中原理。</p>
<div class="showcase"><img class="alignnone size-full wp-image-611" title="2" src="http://www.ediyang.com/wp-content/uploads/2009/05/2.jpg" alt="2 Photoshop网页设计中加强像素化细节的3个小技巧" width="259" height="292" /><br/><strong>上图放大300%效果</strong></div>
<p>我们可以看到这些分隔线，都是有2条相邻的1px直线构成的，并且一条颜色较背景色更深，一条较浅。接下来，看方法：</p>
<ul>
<li>选取铅笔工具（不要选错为画笔）,大小调为1px</li>
<li>选取一个<strong>较背景色更深</strong>的颜色，如图中的深蓝色，按住Shift画出一条直线</li>
<li>选取一个较浅的颜色，再画一条直线。OK</li>
</ul>
<p>PS.画线过程可以放大画布（Z）以便观察。<br />
怎么样，效果比单色的分隔线要好很多吧？接下来再看一些使用这个分隔线技巧的例子：</p>
<div class="showcase"><img class="alignnone size-full wp-image-612" title="4" src="http://www.ediyang.com/wp-content/uploads/2009/05/4.png" alt="4 Photoshop网页设计中加强像素化细节的3个小技巧" width="370" height="94" /><br/><em><a href="http://www.clearspring.com/">clearspring.com</a></em></div>
<div class="showcase"><img class="alignnone size-full wp-image-613" title="5" src="http://www.ediyang.com/wp-content/uploads/2009/05/5.png" alt="5 Photoshop网页设计中加强像素化细节的3个小技巧" width="328" height="67" /><br/><em><a href="http://www.tutorial9.net">tutorial9</a></em></div>
<h3>2.像素边缘</h3>
<p>首先我们看一张没有加“像素边缘”的原图：<br />
<img src="http://www.ediyang.com/wp-content/uploads/2009/05/8.gif" alt="8 Photoshop网页设计中加强像素化细节的3个小技巧" title="8" width="314" height="321" class="alignnone size-full wp-image-620" /><br />
接下来是加上后的：<br />
<img src="http://www.ediyang.com/wp-content/uploads/2009/05/6.gif" alt="6 Photoshop网页设计中加强像素化细节的3个小技巧" title="6" width="314" height="321" class="alignnone size-full wp-image-618" /><br />
看出来区别了吗？没关系，接下来请看放大下的图片：<br />
<img src="http://www.ediyang.com/wp-content/uploads/2009/05/7.jpg" alt="7 Photoshop网页设计中加强像素化细节的3个小技巧" title="7" width="240" height="240" class="alignnone size-full wp-image-619" /><br />
可以看到在黑色块的下面画了一条1px的纯白色线。而这条线让下面的白色块的边缘不再平淡无奇，而有一种灯光反射（高亮）的效果。使得白色块的边缘更加突出。<br />
而方法跟第1个技巧是一样的，就是用<strong>铅笔工具</strong>画1px的线。需要注意颜色的选择，一般选择<strong>比背景色更浅</strong>的颜色，才能制造<strong>高亮</strong>的效果。</p>
<h3>3.像素阴影</h3>
<p>这是3个技巧里面<strong>最容易实现的</strong>，但它一样特别实用，甚至经常会用到。照例我们先看图片：<br />
<img src="http://www.ediyang.com/wp-content/uploads/2009/05/10.gif" alt="10 Photoshop网页设计中加强像素化细节的3个小技巧" title="10" width="283" height="117" class="alignnone size-full wp-image-622" /><br />
可以看出在有阴影下，文字立体感得到加强，特别在文字的背景较复杂，比较多噪点时使用该技巧会使文件比较突出。<br />
而加上阴影方法很简单，只需双击图层名称，添加“投影”的图层样式。然后按下图设置参数：<br />
<img src="http://www.ediyang.com/wp-content/uploads/2009/05/12.png" alt="12 Photoshop网页设计中加强像素化细节的3个小技巧" title="12" width="432" height="223" class="alignnone size-full wp-image-623" /><br />
也就是把距离与大小调为“1”。<br />
接下来我们看看一些使用该技巧的例子：<br />
<img src="http://www.ediyang.com/wp-content/uploads/2009/05/13.png" alt="13 Photoshop网页设计中加强像素化细节的3个小技巧" title="13" width="191" height="69" class="alignnone size-full wp-image-624" /></p>
<p><img src="http://www.ediyang.com/wp-content/uploads/2009/05/14.png" alt="14 Photoshop网页设计中加强像素化细节的3个小技巧" title="14" width="266" height="120" class="alignnone size-full wp-image-625" /></p>
<h3>总结一下</h3>
<p>以上这些技巧都是我自己看来学来的，在这里希望需要的人可以学会它。这些1px的线很多人会说，<strong>用户根本就不会去注意</strong>，就是瞪大眼都看不到。是的，这的确没错。但是我认识很多<strong>好的设计</strong>，能经得时间与多人的考验，那都是很多<strong>细节</strong>来构成的。这些细节尽管你觉得看不到，但是它却为成功的设计打下坚实的基础。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.ediyang.com/3-photoshop-skills-make-pixel-popping/feed/</wfw:commentRss>
		<slash:comments>24</slash:comments>
		</item>
		<item>
		<title>如何将Asaph整合到Wordpress中</title>
		<link>http://www.ediyang.com/how-to-creat-image-roll-in-wordpress-use-asaph/</link>
		<comments>http://www.ediyang.com/how-to-creat-image-roll-in-wordpress-use-asaph/#comments</comments>
		<pubDate>Sun, 03 May 2009 14:11:19 +0000</pubDate>
		<dc:creator>eddie</dc:creator>
				<category><![CDATA[wordpress]]></category>
		<category><![CDATA[asaph]]></category>

		<guid isPermaLink="false">http://www.ediyang.com/?p=594</guid>
		<description><![CDATA[半个月前我向大家介绍过Asaph这个很不错的微型图片博客系统.但是如大多数人一样,我们使用的主要发布平台,还是Wordpress,我们希望将Asaph整合到Wordpress中,这是一种很好的取长补短的方法.]]></description>
			<content:encoded><![CDATA[<p>半个月前我向大家介绍过<a href="http://www.ediyang.com/asaph-introduction/">Asaph</a>这个很不错的微型图片博客系统.但是如大多数人一样,我们使用的主要发布平台,还是Wordpress,我们希望将Asaph整合到Wordpress中,这是一种很好的取长补短的方法.</p>
<p>如果你看过我之前介绍Asaph的文章,你应该明白Asaph是一个图片搜集博客,而我们之前看到过很多博客(多数为外国),喜欢将Flickr的图片整合到WordPress之中,并展示在边栏或是底部.那么今天,我会教大家如何将已经生成的Asaph图片数据展示在WordPress之中.也正如你现在看到的<del datetime="2009-05-06T18:03:47+00:00"><strong>本网站的右边栏</strong>下方的&#8221;picture wall&#8221;</del><a href="http://www.vikiworks.com">vikiworks</a>边栏一样的图片秀.</p>
<h4>看前须知</h4>
<ul>
<li>Asaph不是一个wordpress插件,而是一个独立的博客系统</li>
<li>确保你已经安装好Asaph,否则请看<a href="http://www.ediyang.com/asaph-introduction/">该文</a></li>
</ul>
<h3>我们开始</h3>
<p>其实接下来很简单,之需要一个步骤,就是复制下面的代码,放到你的WordPress主题下的sidebar.php(或是其他你要显示的地方).</p>
<pre><code>
&lt;?php // Get RSS Feed
include_once(ABSPATH . WPINC . '/rss.php');
$rss = fetch_rss('<strong>your-asaph-feed</strong>');
<strong>$maxitems = 24</strong>;
$items = array_slice($rss-&gt;items, 0, $maxitems);
?&gt;
&lt;ul&gt;
&lt;?php if (empty($items)) echo ‘&lt;li&gt;No items&lt;/li&gt;’;
else
foreach ( $items as $item ) : ?&gt;
&lt;li&gt;&lt;a href=’&lt;?php echo $item['link']; ?&gt;’&gt;
&lt;?php echo $item['description']; ?&gt;&lt;/a&gt;&lt;/li&gt;
&lt;?php endforeach; ?&gt;
&lt;/ul&gt;
</code></pre>
<p>请留意代码中的注释部分需要自行修改,也就是自己的<strong>feed地址</strong>以及显示的<strong>图片数量</strong>.<br />
在将代码复制到模版文件中之后,如果一切顺利,那么你将会看到9张图片了,至于说大小问题,你需要在CSS中定义width:80px之类的.详细的可以用<a href="https://addons.mozilla.org/firefox/addon/1843">Firebug</a>来查看我的CSS.</p>
<p>在这里,首先要感觉Asaph作者,再者感谢vikiworks的<a href="http://vikiworks.com/2009/04/25/wordpress-image-roll/">yichi大哥的文章</a>.才让你我有机会认识与使用到如此优秀的功能.</p>
<p>同时我也留意到一些朋友在安装Asaph过程中<a href="http://www.ediyang.com/asaph-introduction/#comment-233">无法成功</a>,而大多数应属于服务器无法支持的原因.如果你遇到问题了或是你知道这其中的原因.麻烦请到下方留言.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.ediyang.com/how-to-creat-image-roll-in-wordpress-use-asaph/feed/</wfw:commentRss>
		<slash:comments>12</slash:comments>
		</item>
		<item>
		<title>DD_belatedPNG,解决IE6不支持PNG绝佳方案</title>
		<link>http://www.ediyang.com/dd_belatedpng-best-way-support-ie6-png/</link>
		<comments>http://www.ediyang.com/dd_belatedpng-best-way-support-ie6-png/#comments</comments>
		<pubDate>Fri, 24 Apr 2009 04:53:32 +0000</pubDate>
		<dc:creator>eddie</dc:creator>
				<category><![CDATA[jquery]]></category>
		<category><![CDATA[javascript]]></category>

		<guid isPermaLink="false">http://www.ediyang.com/?p=575</guid>
		<description><![CDATA[我们知道IE6是不支持透明的PNG的,这无疑限制了网页设计的发挥空间.
然而整个互联网上解决这个IE6的透明PNG的方案也是多不胜数,从使用IE特有的滤镜或是e­xpression,再到javascript+透明GIF替代.但是这些方法都有一个缺点,就是不支持CSS中backgrond-position与background-repeat.]]></description>
			<content:encoded><![CDATA[<p>我们知道IE6是不支持透明的PNG的,这无疑限制了网页设计的发挥空间.<br />
然而整个互联网上解决这个IE6的透明PNG的方案也是多不胜数,从使用IE特有的滤镜或是e­xpression,再到javascript+透明GIF替代.但是这些方法都有一个<strong>缺点</strong>,就是不支持CSS中<strong>backgrond-position</strong>与<strong>background-repeat</strong>.</p>
<p>而我今天介绍DD_belatedPNG,只需要<strong>一个理由</strong>,就是它支持<strong>backgrond-position</strong>与<strong>background-repeat</strong>.这是其他js插件不具备的.同时DD_belatedPNG还支持a:hover属性,以及&lt;img&gt;.</p>
<p><a href="http://www.ediyang.com/demo/DD_Png/">看Demo</a></p>
<h4>原理</h4>
<p>这个js插件使用了微软的VML语言进行绘制,而其他多数解决PNG问题的js插件用的是AlphaImageLoader滤镜.</p>
<h4>使用方法</h4>
<p>1.在<a href="http://dillerdesign.com/experiment/DD_belatedPNG/#download">这里</a>下载DD_belatedPNG.js文件.<br />
2.在网页中引用,如下:</p>
<pre><code>
&lt;!--[if IE 6]&gt;
&lt;script src="DD_belatedPNG.js" mce_src="DD_belatedPNG.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;&lt;!
&lt;!
/* EXAMPLE */
DD_belatedPNG.fix('.png_bg');
/* 将 .png_bg 改成你应用了透明PNG的CSS选择器,例如我例子中的'.trans'*/
// --&gt;
</code></pre>
<p>3.有2种调用函数,一种是DD_belatedPNG.fix(),如上代码.另一种是fix(),这中方法需要在函数内指出css选择器名.</p>
<h4>使用a:hover请留意</h4>
<p><strong>5-25更新:</strong>如果你也像<a href="http://www.jutoy.net/">jutoy</a>同学一样想要用透明PNG作为a:hover时的背景图片,那么你需要留意你的代码,<strong>需要以&#8221;a:hover&#8221;来作为选择器</strong>.否则可能会导致无法成功.同时我也更新了demo,请需要的更新查看.接着我们看看<strong>正确</strong>的代码:</p>
<pre><code>&lt;!--[if IE 6]&gt;
	&lt;script type="text/javascript" src="js/DD_belatedPNG.js" &gt;&lt;/script&gt;
	&lt;script type="text/javascript"&gt;
	DD_belatedPNG.fix('.trans,.box a:hover');
	&lt;/script&gt;
&lt;![endif]--&gt;</code></pre>
<h4>其他方案</h4>
<p>在这里还是提供其他方案供大家参考.尽管我觉得DD_belatedPNG最好</p>
<ul>
<li><a href="http://unitinteractive.com/labs/unitpngfix.php">Unit PNG Fix</a></li>
<li><a href="http://unitinteractive.com/labs/unitpngfix.php">ie7-js</a></li>
<li><a href="http://www.twinhelix.com/css/iepngfix/">IE PNG Fix</a></li>
</ul>
<p>最近我还发现一些很不错很好玩的jQuery插件,接下来也会陆续介绍给大家使用.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.ediyang.com/dd_belatedpng-best-way-support-ie6-png/feed/</wfw:commentRss>
		<slash:comments>30</slash:comments>
		</item>
		<item>
		<title>Asaph,一个新鲜的微型博客系统</title>
		<link>http://www.ediyang.com/asaph-introduction/</link>
		<comments>http://www.ediyang.com/asaph-introduction/#comments</comments>
		<pubDate>Wed, 15 Apr 2009 06:43:12 +0000</pubDate>
		<dc:creator>eddie</dc:creator>
				<category><![CDATA[others]]></category>
		<category><![CDATA[asaph]]></category>

		<guid isPermaLink="false">http://www.ediyang.com/?p=553</guid>
		<description><![CDATA[Asaph的作者也说明了,这个博客系统就是这么简单,简单到后台只有几个按钮.而这就是他做这个系统的目标.Asaph也很好的完成了他的工作.在我看来,用来制作这种图片搜集博客,Asaph真的是很好用,很容易用.所以喜欢的朋友赶紧试试吧.]]></description>
			<content:encoded><![CDATA[<p>前阵子在vikiworks那里看到yichi介绍用<a href="http://vikiworks.com/2009/03/10/asaph-setting-up-your-own-ffffound/">Asaph建设一个自己的FFFFound</a>,也就是一个图片搜集博客.所以我试了一下,觉得很好玩,在这里特地推荐给大家.</p>
<p><img class="alignnone size-full wp-image-555" title="fireshot-capture-5-eddieloves-www_ediyang_com_fave" src="http://www.ediyang.com/wp-content/uploads/2009/04/fireshot-capture-5-eddieloves-www_ediyang_com_fave.jpg" alt="fireshot capture 5 eddieloves www ediyang com fave Asaph,一个新鲜的微型博客系统" width="500" height="313" /></p>
<h4>是什么啊?</h4>
<p>你可以先看看我的<a href="http://www.ediyang.com/fave/">图片博客</a>.Asaph根据官方介绍:它是一个用来搜集外部链接及图片的微型博客系统.允许你在任何其他网站来发布你要的图片或是链接.<br />
<img class="alignnone size-full wp-image-590" title="3steps" src="http://www.ediyang.com/wp-content/uploads/2009/04/3steps.gif" alt="3steps Asaph,一个新鲜的微型博客系统" width="400" height="268" /><br />
我个人认为最特别的地方,就是Asaph有发布文章的<a href="http://en.wikipedia.org/wiki/Bookmarklet">Bookmarklet</a>,无论我在任何页面,只要点一下Bookmarklet,再选择要发布的图片,再点确定,就完成了整个发布文章的过程.看下图</p>
<p><img class="alignnone size-full wp-image-554" title="capture" src="http://www.ediyang.com/wp-content/uploads/2009/04/capture.png" alt="capture Asaph,一个新鲜的微型博客系统" width="509" height="255" /></p>
<h4>怎么安装呢?</h4>
<p><strong>5-1号更新:安装之前请确保满足以下条件</strong>:</p>
<ul>
<li>服务器是PHP5以上并装有GD-lib或者开启了allow_url_fopen</li>
<li>使用现代浏览器(非IE)</li>
<li>在上传完全部文件后,确保data/ 文件夹是&#8221;可写&#8221;的</li>
</ul>
<p>如果不知道怎么看服务器的php版本,请下载<a href="http://www.google.cn/search?hl=zh-CN&#038;q=iprober+php%E6%8E%A2%E9%92%88&#038;meta=&#038;aq=0&#038;oq=iProber">php探针</a>,上传到服务器后运行探针查看即可.</p>
<p>下载压缩包,解压放上服务器(需要php支持).接着需要修改lib/asaph_config.class.php 这个文件中的$domain, $absolutePath 与 $db这三个项目.接着在浏览器打开目录下的admin/install.php进行安装.装过Wordpress想必没有问题了.</p>
<h4>怎么使用?</h4>
<p>如图所示,在后台管理左侧,用鼠标将bookmarklet下的ASAPH拉到你的书签栏,或是加入书签.接着你可以去flickr等图片网站,<br />
看到喜欢的眼睛发亮的图片,就点一下那个书签.OK,懂了吧?(最好使用现代浏览器,不要使用IE)<br />
<img class="alignnone size-full wp-image-556" title="capture2" src="http://www.ediyang.com/wp-content/uploads/2009/04/capture2.png" alt="capture2 Asaph,一个新鲜的微型博客系统" width="116" height="189" /></p>
<h4>总结</h4>
<p>Asaph的作者也说明了,这个博客系统就是这么简单,简单到后台只有几个按钮.而这就是他做这个系统的目标.Asaph也很好的完成了他的工作.在我看来,用来制作这种图片搜集博客,Asaph真的是很好用,很容易用.所以喜欢的朋友赶紧试试吧.<br />
最后大家可以看看我自己建的Asaph博客 <a href="http://www.ediyang.com/fave">www.ediyang.com/fave</a></p>
<h4>我也要试试</h4>
<p><a href="http://www.phoboslab.org/projects/asaph">发布页面</a><br />
<a href="http://www.phoboslab.org/files/asaph/asaph-v1.0.zip">下载地址(v1.0)</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.ediyang.com/asaph-introduction/feed/</wfw:commentRss>
		<slash:comments>22</slash:comments>
		</item>
	</channel>
</rss>
