<?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>Web开发归档 - 布鲁文的蓝色奇想</title>
	<atom:link href="https://www.mrven.com/node/category/webdevelopment/feed" rel="self" type="application/rss+xml" />
	<link>https://www.mrven.com/node/category/webdevelopment</link>
	<description>A MRVEN SITE</description>
	<lastBuildDate>Wed, 10 Jul 2024 17:09:33 +0000</lastBuildDate>
	<language>zh-CN</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.6.1</generator>
	<item>
		<title>你所不知道的15个Axure使用技巧</title>
		<link>https://www.mrven.com/node/678</link>
					<comments>https://www.mrven.com/node/678#comments</comments>
		
		<dc:creator><![CDATA[Ven]]></dc:creator>
		<pubDate>Wed, 02 May 2012 13:45:27 +0000</pubDate>
				<category><![CDATA[Web开发]]></category>
		<category><![CDATA[Axure]]></category>
		<category><![CDATA[交互设计]]></category>
		<category><![CDATA[产品]]></category>
		<category><![CDATA[原型]]></category>
		<guid isPermaLink="false">http://www.mrven.com/?p=678</guid>

					<description><![CDATA[<p>Axure 6.5已于4月18日发布，可直到上周我才发现，于是赶紧下载升级。等待下载的过程中，闲来无聊跑去看了 [&#8230;]</p>
<p><a href="https://www.mrven.com/node/678">你所不知道的15个Axure使用技巧</a>最先出现在<a href="https://www.mrven.com">布鲁文的蓝色奇想</a>。</p>
]]></description>
										<content:encoded><![CDATA[<p>Axure 6.5已于4月18日发布，可直到上周我才发现，于是赶紧下载升级。等待下载的过程中，闲来无聊跑去看了Axure的版本历史，又浏览了一下官方的使用教程，忽然发现Axure竟如此博大精深，自己平时所用的功能只是皮毛而已。诚惶诚恐的仔细读完官方教程，再结合平时工作中的情况，我总结了15个你不知道但却很有帮助的使用技巧，希望你看了之后能有所收获。</p>
<p><a href="https://www.mrven.com/wp-content/uploads/2012/05/20120502_214047.png"><img fetchpriority="high" decoding="async" style="display: inline; border-width: 0px;" title="2012-05-02_214047" src="https://www.mrven.com/wp-content/uploads/2012/05/20120502_214047_thumb.png" alt="2012-05-02_214047" width="454" height="206" border="0" /></a></p>
<p>注意：本文基于Axure英文版写作，对于那些我不知道该如何翻译的供功能和名称，只好直接给出英文叫法。此外，建议在阅读本文时打开你的Axure 6.5（版本不够的赶紧去升级），否则有些操作流程你可能会看不懂。</p>
<h3>1 栅格设置</h3>
<p>Axure 6.5默认隐藏了栅格，许多人对此很不适应，顿时不知该如何对齐控件了。要打开辅助线，只需点击菜单栏的“Wirefram-Grid and Guides”，把“Hide Grids”前面的勾去掉就行。另外在“Grid Settings”里，还可以调整栅格的间距，样式（点或线）以及DPI。</p>
<p><span id="more-678"></span></p>
<p>另外插一句，Axure是可以拉辅助线的，这点我是最近才知道。。。</p>
<h3>2 创建多个Page Notes</h3>
<p>Axure里的每个页面都有一块“Page Notes”区域用来写页面注释。你可以创建多个Page Notes，方法就是点击“Wireframe &#8211; Manage Page Notes”，在弹出的面板中增加Notes，这样所有页面都会多出来这个新的Notes。这个技巧可以用来写页面的调整历史（每个Notes代表一个版本），或者在多人协作编辑时区分不同人编写的notes。</p>
<h3>3 手绘风格，以及Page Formatting中的其他功能</h3>
<p>听一个朋友说，他们的产品团队因为追求手绘风格而放弃了Axure，改用<a href="http://www.balsamiq.com/products/mockups" target="_blank">Mockups</a>。真是可笑至极，其实Axure从6.0开始就加入了手绘风格。在Page Formatting里有个Sketchiness的选项，可以设置手绘风格的“扭曲度”。默认是0，横平竖直，数字越大越“扭曲”越“手绘”。</p>
<p>Page Formatting里还有其他一些有用的功能，例如设置页面背景色、背景图（支持图片repeat哟~）、整个页面的对齐方式（默认是横竖都居中）、甚至一键把页面变成黑白模式（Color里的第二项）。</p>
<p><a href="https://www.mrven.com/wp-content/uploads/2012/05/Image.png"><img decoding="async" style="display: inline; border-width: 0px;" title="Image" src="https://www.mrven.com/wp-content/uploads/2012/05/Image_thumb.png" alt="Image" width="454" height="191" border="0" /></a></p>
<h3>4 自动生成站点地图</h3>
<p>有时我们需要把整个站点的结构用树形图呈现出来，Axure为此提供了一个快捷的方法：在Sitemap区域对准你希望生成树形图的主干点右键，选择“Generate Flow Diagram”，就能自动生成图表形式的站点地图。点击图表上的每个控件，就会去到对应的页面。</p>
<p>另外，你还可以自定义流程图（Flow）控件的链接页面，方法是双击控件，再选择需要链接到的页面。</p>
<p><a href="https://www.mrven.com/wp-content/uploads/2012/05/Image1.png"><img decoding="async" style="display: inline; border-width: 0px;" title="Image(1)" src="https://www.mrven.com/wp-content/uploads/2012/05/Image1_thumb.png" alt="Image(1)" width="348" height="365" border="0" /></a></p>
<h4>5 左右滑动与拖拽</h4>
<p>Axure 6.5里，动态面板（Dymatic Panel）新增了针对手机应用的OnSwipeLeft和OnSwipeRight两个Case，同时强化了拖拽（Drag Drop）相关操作的交互。现在，你可以实现让动态面板只能横向/纵向拖动、拖动结束后返回/不返回原位等丰富的动作了。</p>
<p><a href="https://www.mrven.com/wp-content/uploads/2012/05/image.png"><img loading="lazy" decoding="async" style="display: inline; border-width: 0px;" title="image" src="https://www.mrven.com/wp-content/uploads/2012/05/image_thumb.png" alt="image" width="205" height="194" border="0" /></a></p>
<h3>6 给动态面板添加滚动条</h3>
<p>有些时候你想做一个长宽都有限制的容器，让用户拖动滚动条来查看容器中的元素。Inline Frame在这方面很局限，你需要利用动态面板的Scrollbar属性。</p>
<p>右键点击动态面板-Edit Dymanic Panel，你会看到4个带“Scrollbar”字样的属性，根据需要进行选择，然后你的这个动态面板就能承载并通过滚动条来显示超过自身大小的内容了。</p>
<p><a href="https://www.mrven.com/wp-content/uploads/2012/05/Image2.png"><img loading="lazy" decoding="async" style="display: inline; border-width: 0px;" title="Image(2)" src="https://www.mrven.com/wp-content/uploads/2012/05/Image2_thumb.png" alt="Image(2)" width="454" height="315" border="0" /></a></p>
<h3>7 在浏览器中悬浮</h3>
<p>有时候你需要做一个相对浏览器位置固定的元素，这时候你还是要用动态面板。右键点击-Pin to Browser，然后设定悬浮位置，搞掂！</p>
<p><a href="https://www.mrven.com/wp-content/uploads/2012/05/Image3.png"><img loading="lazy" decoding="async" style="display: inline; border-width: 0px;" title="Image(3)" src="https://www.mrven.com/wp-content/uploads/2012/05/Image3_thumb.png" alt="Image(3)" width="340" height="437" border="0" /></a></p>
<h3>8 “Move”动作</h3>
<p>在Case Editor中有一个action叫“Move Panels”，可以让动态面板移动到指定的位置，并可配合Animate效果（直线移动、摆动、旋转移动等）。这非常适合用来做菜单的展开/折叠，滑动，图片传送带等效果。（别鄙视我，这个真的也是我最近才知道的功能，以前做展开/折叠效果可纠结了。。。）</p>
<h3>9 地图拖拽效果</h3>
<p>想制作一个可以用鼠标拖来拖去的地图效果，这在Axure里也并非是不可能，只是实现起来略微麻烦。</p>
<p>你需要创建一对嵌套的动态面版，每个动态面板都只有1个state。外部的动态面板是地图容器，内部的面板用来放置地图图片。当设置好2个面板后，给“地图容器”添加一个OnDrag的Case，并指定动作为“Move Panels”，而需要移动的面板正是“地图内容”，再把Move设为“With Drag”，大功告成。</p>
<p><a href="https://www.mrven.com/wp-content/uploads/2012/05/Image4.png"><img loading="lazy" decoding="async" style="display: inline; border-width: 0px;" title="Image(4)" src="https://www.mrven.com/wp-content/uploads/2012/05/Image4_thumb.png" alt="Image(4)" width="252" height="78" border="0" /></a><br />
（面板嵌套结构）</p>
<p><a href="https://www.mrven.com/wp-content/uploads/2012/05/Image5.png"><img loading="lazy" decoding="async" style="display: inline; border-width: 0px;" title="Image(5)" src="https://www.mrven.com/wp-content/uploads/2012/05/Image5_thumb.png" alt="Image(5)" width="454" height="331" border="0" /></a><br />
（动作设置）</p>
<h3>10 三种类型的Master</h3>
<p>Master是一种类似“印章”的操作。对于需要重复使用的控件组，你可以把它们做成一个Master，然后只需拖拽便可重复创建，很方便。不过这只是Master的三种类型之一，叫Normal。</p>
<p>第二种类型叫“Place in Ground”，这种Master拖入页面后的位置是固定的（与），并且放在最底层。这种Master适合做页面模板，例如在制作手机应用的原型时，可以拿来做手机外形的效果。</p>
<p>第三种叫“Custom Widget”，这种Master一旦拖进页面，便与母板失去了关联，但是其中的控件变得可以编辑了。</p>
<p>要改变Master的类型，只需对着一个Master点右键-Behavior，再选择需要的类型。</p>
<p><a href="https://www.mrven.com/wp-content/uploads/2012/05/Image8.png"><img loading="lazy" decoding="async" style="display: inline; border-width: 0px;" title="Image(8)" src="https://www.mrven.com/wp-content/uploads/2012/05/Image8_thumb.png" alt="Image(8)" width="251" height="102" border="0" /></a></p>
<h3>11 给Master创建Event（事件）</h3>
<p>Event是Master的强化剂，通过定义Event，一个Master可以在不同页面实现不一样的交互效果。</p>
<p>在Master的Case Editor中，action列表的Misscellaneous中会多出来一个Raise Event，你可以创建多个Event。当再把这个Master拖进页面时，在它的Widget Properties面板中，先前创建的Event就会作为Case显示出来。</p>
<p><a href="https://www.mrven.com/wp-content/uploads/2012/05/image1.png"><img loading="lazy" decoding="async" style="display: inline; border-width: 0px;" title="image" src="https://www.mrven.com/wp-content/uploads/2012/05/image_thumb1.png" alt="image" width="454" height="331" border="0" /></a><br />
（为某个Master创建2个Event，一个叫ShowNextPicture，一个叫ShowLastPicture）</p>
<p><a href="https://www.mrven.com/wp-content/uploads/2012/05/image2.png"><img loading="lazy" decoding="async" style="display: inline; border-width: 0px;" title="image" src="https://www.mrven.com/wp-content/uploads/2012/05/image_thumb2.png" alt="image" width="211" height="74" border="0" /></a><br />
（然后这个Master就多出来了2个Case）</p>
<p>这个功能的一个典型应用场景就是翻页。创建一个可以复用的“上一页-下一页”Master，并给“上一页”和“下一页”Raise不同的Event，当你再把这个Master拖进页面时，就可以为“上一页”和“下一页”指定不同的链接了。Axure官网有个例子值得学习：<a href="http://www.axure.com/previous-next-link-master-tutorial" target="_blank">http://www.axure.com/previous-next-link-master-tutorial</a></p>
<h3>12 使用变量</h3>
<p>变量可以帮助你在多个页面间传递数值，它需要与Case Editor中的“Set Variable/Widget values”结合使用。</p>
<p>例如我们做一个根据登录者用户名显示不同的欢迎语句的交互，就可以先创建一个叫“UserName”的变量，当用户点击登录按钮后，将“用户名”一栏的值存储到UserName中（使用Set Variable/Widget values）；再给显示欢迎语的页面添加一个OnPageLoad的action（依然是Set Variable/Widget values），将UserName的值设置给欢迎语中显示用户名的地方。建议也去学习一下Axure官方的例子：<a href="http://www.axure.com/pass-text-to-next-page-tutorial" target="_blank">http://www.axure.com/pass-text-to-next-page-tutorial</a></p>
<p><a href="https://www.mrven.com/wp-content/uploads/2012/05/Image9.png"><img loading="lazy" decoding="async" style="display: inline; border-width: 0px;" title="Image(9)" src="https://www.mrven.com/wp-content/uploads/2012/05/Image9_thumb.png" alt="Image(9)" width="454" height="384" border="0" /></a><br />
（变量管理面板）</p>
<h3>13 创建chm格式的原型</h3>
<p>默认状态下，Axure每次生成原型时都会产出一大堆html和图片文件，对管理、发布来说都是个麻烦事。其实Axure是支持把原型做成一个chm文件的，方法是在生成原型时，勾选“Distribution”中的“Create HTML Help File（.chm）”选项。不过你的电脑里需要安装chm的生成工具，如果没装的话，可以点界面上的“Download Microsoft HTML Help Workshop”下载。</p>
<p><a href="https://www.mrven.com/wp-content/uploads/2012/05/Image6.png"><img loading="lazy" decoding="async" style="display: inline; border-width: 0px;" title="Image(6)" src="https://www.mrven.com/wp-content/uploads/2012/05/Image6_thumb.png" alt="Image(6)" width="454" height="186" border="0" /></a></p>
<h3>14 在原型里加入Logo</h3>
<p>创建原型时，在“Logo”里可以为你的原型添加Logo和标题语，这样在导出的原型中，左上角就会显示刚才添加的Logo和标题语。</p>
<p><a href="https://www.mrven.com/wp-content/uploads/2012/05/Image7.png"><img loading="lazy" decoding="async" style="display: inline; border-width: 0px;" title="Image(7)" src="https://www.mrven.com/wp-content/uploads/2012/05/Image7_thumb.png" alt="Image(7)" width="454" height="272" border="0" /></a></p>
<h3>15 多人协作</h3>
<p>有时候，我们需要多人合作完成一个Axure原型。传统的方法是每个人编辑自己的部分，再粘贴到一起。其实Axure内置了一套基于版本管理思路的协作编辑功能。要使用这个功能，首先你需要一个SVN服务器，然后在菜单栏的”Share-Create Share Project from Current File“对项目进行配置。这用起来很像SVN，你最好有一些SVN的基础，或者去读读这篇教程：http://www.axure.com/shared-projects</p>
<h3>16 Widget样式控制</h3>
<p>本来不想放这一条，可写的时候觉得还是加上吧，没准真的有人不知道的。</p>
<p>Axure提供了类似Office Word中的“样式”和“格式刷”的功能，它们是“Widget Style Editor”和“Format Painter”。利用前者，你可以改变原始控件的样式（字体大小、边框大小、背景色等等），一旦改动，所有已经应用到页面上的此控件的样式都会发生变化；你还可以创建一些自定义一些样式，并在页面里应用到你需要的控件上，一旦修改自定义样式，则所有使用此样式的控件也会跟着改变。而利用后者，你可以把一个控件的样式复制给另一个控件。</p>
<p><a href="https://www.mrven.com/wp-content/uploads/2012/05/Image10.png"><img loading="lazy" decoding="async" style="display: inline; border-width: 0px;" title="Image(10)" src="https://www.mrven.com/wp-content/uploads/2012/05/Image10_thumb.png" alt="Image(10)" width="281" height="110" border="0" /></a></p>
<p>以上15个技巧大部分出自Axure的官方教程，如果Axure对你的工作很重要，那我建议你尽快找时间仔细通读一遍官方教程：<a href="http://www.axure.com/training" target="_blank">http://www.axure.com/training</a>。再吼一嗓子：Axure博大精深啊，只有你想不到，没有它做不到。结合高保真设计能力，Axure完全可以做出足够以假乱真的产品原型。</p>
<p>最后，可能有人会说，只是原型而已，至于要做到这么精细吗？做到这么精细，岂不是影响UI设计师的发挥？对于这些观点，我的建议是：只使用Axure的默认控件（Wireframe），不要用那些样式花哨的自定义控件，并且所有页面中使用的颜色不能超过5种（不同灰度的灰色也算一种颜色）。然后，在交互动作方面，务必要做到尽可能的全真。交互动作是开发过程中最容易出现理解误差的产品设计要素，因此务必有一份详实、形象的文档来进行阐述。用Axure来解决，真是再适合不过了。</p>
<p><a href="https://www.mrven.com/node/678">你所不知道的15个Axure使用技巧</a>最先出现在<a href="https://www.mrven.com">布鲁文的蓝色奇想</a>。</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.mrven.com/node/678/feed</wfw:commentRss>
			<slash:comments>1</slash:comments>
		
		
			</item>
		<item>
		<title>[译文]用情感化交互为你的产品注入灵魂</title>
		<link>https://www.mrven.com/node/643</link>
					<comments>https://www.mrven.com/node/643#comments</comments>
		
		<dc:creator><![CDATA[Ven]]></dc:creator>
		<pubDate>Sat, 21 Apr 2012 10:07:59 +0000</pubDate>
				<category><![CDATA[Web开发]]></category>
		<category><![CDATA[用户体验]]></category>
		<category><![CDATA[设计]]></category>
		<guid isPermaLink="false">http://www.mrven.com/?p=643</guid>

					<description><![CDATA[<p>什么使我们成为网站和app的忠实用户？思考这个问题时，我们发现那些令人喜爱的网站和app都拥有一样东西：灵魂。 [&#8230;]</p>
<p><a href="https://www.mrven.com/node/643">[译文]用情感化交互为你的产品注入灵魂</a>最先出现在<a href="https://www.mrven.com">布鲁文的蓝色奇想</a>。</p>
]]></description>
										<content:encoded><![CDATA[<p>什么使我们成为网站和app的忠实用户？思考这个问题时，我们发现那些令人喜爱的网站和app都拥有一样东西：灵魂。他们是有灵性的，他们的用户体验中被置入了情感化智能，并且这种情感化智能通过交互设计和反馈机制得以体现。</p>
<p>这些要素将“个性”赋予了网站或app产品，并让产品最终在用户心中留下深刻的印象。不得不说，在赢得忠实用户这件事上，产品的灵魂确实扮演了一个挺重要的角色。本文中，我们将通过一些优秀的例子来了解情感化交互，以及“个性”和“灵魂”是如何灌注进产品的。</p>
<p><span id="more-643"></span></p>
<h3>什么是情感化交互？</h3>
<p>情感化交互设计是一种状态，指在网站或app在显示信息或实现功能时，包含了能产生人性化用户体验的种种细节。这些交互可能是大的体验（例如网站整个宕掉时），或者是小的体验（例如在表单元素旁显示的错误信息）。它可以体现在不同的要素中，例如提示信息、颜色、设计、对用户输入的响应，以及系统信息输出。将这每一种体验混合起来，就为网站创造了灵魂和个性，这种和用户间的情感联系能带来忠诚持久的狂热“粉丝”。</p>
<h4>情感化交互范例</h4>
<p>说明：以下部分范例来自<a href="http://www.littlebigdetails.com/" target="_blank">Little Big Details</a>（需翻墙）这个天才的网站，我强烈推荐你上去看看，一定有收获。</p>
<p><a href="http://bottlenose.com/" target="_blank">Bottlenose</a></p>
<p>这是一个基于Web的Twitter客户端，它给用户提供了一种新的探索和使用Twitter的方式。这家网站在用户初次使用时的引导方面做得很出色，用清晰而幽默的方式向用户介绍它的功能。网站在确认按钮上使用了诸如“Make senese”，“Got it”一类的词句，让用户感到有个性，和产品自身的“自信”感，这比简单的“Next”强多了。</p>
<p><a href="https://www.mrven.com/wp-content/uploads/2012/04/image.png"><img loading="lazy" decoding="async" style="display: inline; border: 0px;" title="image" src="https://www.mrven.com/wp-content/uploads/2012/04/image_thumb.png" alt="image" width="454" height="313" border="0" /></a></p>
<p><a href="http://wufoo.com/" target="_blank">Wufoo</a></p>
<p>Wufoo混合了俏皮的提示信息和触动人心的UI元素，为用户营造了一种友好和私人化的体验。例如：</p>
<ul>
<li>每个页面的标题里会包含一句诗。虽然是随机显示的，但诗句强化了Wufoo典雅的产品形象，让枯燥的任务（创建表单）变得个性生动。<br />
<a href="https://www.mrven.com/wp-content/uploads/2012/04/image1.png"><img loading="lazy" decoding="async" style="display: inline; border: 0px;" title="image" src="https://www.mrven.com/wp-content/uploads/2012/04/image_thumb1.png" alt="image" width="454" height="345" border="0" /></a></li>
<li>注意“New Form”后面的感叹号。提到“form”，人们总是联想到无尽的填写，但Wufoo放了一个感叹号在这里，让这个元素充满了能量和乐趣。<br />
<a href="https://www.mrven.com/wp-content/uploads/2012/04/image2.png"><img loading="lazy" decoding="async" style="display: inline; border: 0px;" title="image" src="https://www.mrven.com/wp-content/uploads/2012/04/image_thumb2.png" alt="image" width="302" height="228" border="0" /></a></li>
<li>表单报告界面没有数据时，Wufoo并没有简单给出一个空白界面，而是通过提示信息传递出真正有个性的东西，并且鼓励和督促你创建第一份报告。<br />
<a href="https://www.mrven.com/wp-content/uploads/2012/04/image3.png"><img loading="lazy" decoding="async" style="display: inline; border: 0px;" title="image" src="https://www.mrven.com/wp-content/uploads/2012/04/image_thumb3.png" alt="image" width="454" height="208" border="0" /></a></li>
</ul>
<p><a href="http://mailchimp.com/" target="_blank">MailChimp</a></p>
<p>作为最好的情感化交互的范例之一，MailChimp从不放过每一个可以向产品注入灵魂的机会。</p>
<ul>
<li><strong>404页<br />
</strong>MailChimp的404页面很有才：准确的告诉用户目前发生了什么，并积极号召用户采取下一步行动，继续先前的流程体验。这招很聪明、有效，并且化解了404的尴尬。<br />
<a href="https://www.mrven.com/wp-content/uploads/2012/04/image4.png"><img loading="lazy" decoding="async" style="display: inline; border: 0px;" title="image" src="https://www.mrven.com/wp-content/uploads/2012/04/image_thumb4.png" alt="image" width="454" height="243" border="0" /></a></li>
<li><strong>发送邮件活动（Email Campaign）<br />
</strong>用户发送了一个邮件活动后，MailChimp总是会给予用户庆祝和鼓励。“This is your moment of glory”这句文案很好的缓解了用户在创建邮件活动时的恐惧和期待。<br />
<a href="https://www.mrven.com/wp-content/uploads/2012/04/image5.png"><img loading="lazy" decoding="async" style="display: inline; border: 0px;" title="image" src="https://www.mrven.com/wp-content/uploads/2012/04/image_thumb5.png" alt="image" width="454" height="169" border="0" /></a></li>
<li><strong>Twitter页面<br />
</strong>最近，如果MailChimp宕机了，他们的Twitter页就会换上一个特别的背景图：一只悲伤的黑猩猩正在努力修复问题。现在人们习惯去Twitter了解到底出了什么事，而这张背景图正好强化了这个Twitter账号的个性，给用户带来情感化交互体验。</li>
</ul>
<p><a href="http://pinterest.com/" target="_blank">Pinterest</a></p>
<p>这个当下火热的社交媒体网站在注册账号时，使用了一种有深度的交互设计。不同于传统的即时表单验证信息，当用户输入合法的邮箱和密码时，网站会给出“Looks good！”的提示信息。虽然这只是一个很小的触动，但足以使注册流程显得人性化，并让产品与正在注册的用户产生共情反应。</p>
<p><a href="https://www.mrven.com/wp-content/uploads/2012/04/image6.png"><img loading="lazy" decoding="async" style="display: inline; border: 0px;" title="image" src="https://www.mrven.com/wp-content/uploads/2012/04/image_thumb6.png" alt="image" width="454" height="248" border="0" /></a></p>
<p><a href="http://path.com/" target="_blank">Path</a></p>
<p>Path的注册按钮上有一个向右的箭头，而当鼠标点上去后，箭头会变成笑脸。这样，当用户与网站第一次产生交互时，就获得了一个亲切而个性的欢迎。这是一个有深度的细节，一般设计者和用户都会忽略这个地方，而当它真的出现了，就为接下来的体验定下了良好的基调。</p>
<p><a href="https://www.mrven.com/wp-content/uploads/2012/04/image7.png"><img loading="lazy" decoding="async" style="display: inline; border: 0px;" title="image" src="https://www.mrven.com/wp-content/uploads/2012/04/image_thumb7.png" alt="image" width="454" height="183" border="0" /></a></p>
<p><a href="http://hootsuite.com/" target="_blank">Hootsuite</a></p>
<p>这只友好的猫头鹰是Hootsuite的吉祥物，吉祥物不仅仅是一张可爱的脸，它甚至代表了服务本身，如同MailChimp的那只黑猩猩。Hootsuite调用Twitter的API把数据拉到自己的应用上，由于Twitter有API调用次数限制，Hootsuite会在用户长时间不活动时停止向Twitter请求数据。此时，猫头鹰会出现，告诉你它正在休息，如果你需要它的话，可以让它立刻醒来。这招巧妙的把负面体验变成了正面体验，塑造了品牌形象，并为产品带来了个性和灵魂。</p>
<p><a href="https://www.mrven.com/wp-content/uploads/2012/04/image8.png"><img loading="lazy" decoding="async" style="display: inline; border: 0px;" title="image" src="https://www.mrven.com/wp-content/uploads/2012/04/image_thumb8.png" alt="image" width="417" height="224" border="0" /></a></p>
<p><a href="http://feedburner.com/" target="_blank">Feedburner</a></p>
<p>在Feedburner中，新创建的RSS Feeds由于数据积累不够，状态页中没有东西显示。大部分网站不会在意这个情形，因为出现这种状况这并不是网站的错，而Feedburner则抓住了这个机会，因为他们知道虽然状态页还没有数据，但大多数新用户非常想立刻看到当前的Feed状态。于是他们创造了这段文案，告诉用户状态页还没准备好，在这一过程中和用户建立了情感联系，让用户觉得安心。相对于一个毫无生气的、没有任何数据的空白页面，Feedburner的这个做法是一种巨大的进步。</p>
<p><a href="https://www.mrven.com/wp-content/uploads/2012/04/image9.png"><img loading="lazy" decoding="async" style="display: inline; border: 0px;" title="image" src="https://www.mrven.com/wp-content/uploads/2012/04/image_thumb9.png" alt="image" width="454" height="279" border="0" /></a></p>
<p>OS X</p>
<p>在“关注细节”这个问题上，Apple一直有着良好的声誉，并且会精细到你想不到、甚至似乎没必要的地方。例如Text Edit的小图标，放大后看，上面密密麻麻的文字其实真的是有意义的（彩蛋）——笔记本上写的是“Think Different”宣言。这是向他们传奇创始人的致敬，同时也提醒人们他们为什么爱Apple。</p>
<p><a href="https://www.mrven.com/wp-content/uploads/2012/04/image10.png"><img loading="lazy" decoding="async" style="display: inline; border: 0px;" title="image" src="https://www.mrven.com/wp-content/uploads/2012/04/image_thumb10.png" alt="image" width="363" height="335" border="0" /></a></p>
<p>Highrise iOS</p>
<p>在安装37Signal的Highris应用时，你可以和电脑玩一把九宫棋。用户体验设计师常常考虑如何用一些心理学原理去解决等待时间过长这个问题，而事实上，在等待的过程中给他们一个好玩的东西，谁还在乎等待呢？37Signals的这个方法非常简单和有效，在用户体验的“死局”上展示出了高超的情感化智能。</p>
<p><a href="https://www.mrven.com/wp-content/uploads/2012/04/image11.png"><img loading="lazy" decoding="async" style="display: inline; border: 0px;" title="image" src="https://www.mrven.com/wp-content/uploads/2012/04/image_thumb11.png" alt="image" width="314" height="454" border="0" /></a></p>
<p><a href="https://www.mint.com/" target="_blank">Mint.com</a></p>
<p>Mint的网站维护界面在本应该倍感压力的时候为用户创造了迷人的体验。不能访问财务信息会让你焦虑，而Mint借用这个机会，以一种搞笑的方式告诉你，虽然网站不能访问了，但你的钱和信息都是安全的。</p>
<p><a href="https://www.mrven.com/wp-content/uploads/2012/04/image12.png"><img loading="lazy" decoding="async" style="display: inline; border: 0px;" title="image" src="https://www.mrven.com/wp-content/uploads/2012/04/image_thumb12.png" alt="image" width="330" height="454" border="0" /></a></p>
<p><a href="http://www.deviantart.com/" target="_blank">Deviant Art</a></p>
<p>Deviant Art用肖像画框作为用户个人信息设置的交互背景。这么做不仅贴合了网站的主题（美术家社区），同时对新用户用户完成个人信息有鼓励作用。</p>
<p><a href="https://www.mrven.com/wp-content/uploads/2012/04/image13.png"><img loading="lazy" decoding="async" style="display: inline; border: 0px;" title="image" src="https://www.mrven.com/wp-content/uploads/2012/04/image_thumb13.png" alt="image" width="454" height="367" border="0" /></a></p>
<p><a href="https://www.tumblr.com/" target="_blank">Tumblr</a></p>
<p>当你在Tumblr里听音频文件时，URL里会包含“请不要下载这个音频文件，不然Tumblr就没法继续在网站放音频文件了”的字样。不得不说，这是一种更聪明的与用户交流的方式，而不像js弹窗那么冷冰冰。</p>
<p><a href="https://www.mrven.com/wp-content/uploads/2012/04/image14.png"><img loading="lazy" decoding="async" style="display: inline; border: 0px;" title="image" src="https://www.mrven.com/wp-content/uploads/2012/04/image_thumb14.png" alt="image" width="504" height="47" border="0" /></a></p>
<h3>为你的网站注入灵魂</h3>
<p>产品设计人员需要关注那些通常被忽视的用户体验小细节，通过对这些细节的优化，app将产生个性，同时建立稳定的忠实用户群。重温一下上面提到的案例，或许能帮你在未来的项目中举一反三。细节确实能决定网站或app的成败。努力创造良好的体验是我们所知的赢得用户的最佳方式，并且能为你的网站带来生命和灵魂。</p>
<p><em>本文系译作，原文 <a href="http://uxdesign.smashingmagazine.com/2012/03/28/give-your-website-soul-with-emotionally-intelligent-interactions/" target="_blank">Give Your Website Soul With Emotionally Intelligent Interactions</a> ，译者 <a href="http://kado.im/ven" target="_blank">Ven</a></em></p>
<p><a href="https://www.mrven.com/node/643">[译文]用情感化交互为你的产品注入灵魂</a>最先出现在<a href="https://www.mrven.com">布鲁文的蓝色奇想</a>。</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.mrven.com/node/643/feed</wfw:commentRss>
			<slash:comments>1</slash:comments>
		
		
			</item>
		<item>
		<title>VPS完全指南</title>
		<link>https://www.mrven.com/node/370</link>
					<comments>https://www.mrven.com/node/370#comments</comments>
		
		<dc:creator><![CDATA[Ven]]></dc:creator>
		<pubDate>Tue, 06 Apr 2010 15:23:19 +0000</pubDate>
				<category><![CDATA[Web开发]]></category>
		<category><![CDATA[hosting]]></category>
		<category><![CDATA[vps]]></category>
		<guid isPermaLink="false">http://cheweb.org/370.html</guid>

					<description><![CDATA[<p>主机行业很花俏，他们提供了大量的选择，以适应用户千奇百怪的需求。但和其他事情一样，用户在选择时必须做权衡。 虚 [&#8230;]</p>
<p><a href="https://www.mrven.com/node/370">VPS完全指南</a>最先出现在<a href="https://www.mrven.com">布鲁文的蓝色奇想</a>。</p>
]]></description>
										<content:encoded><![CDATA[<p>主机行业很花俏，他们提供了大量的选择，以适应用户千奇百怪的需求。但和其他事情一样，用户在选择时必须做权衡。</p>
<p>虚拟主机，也叫共享主机（shared hosting）通常廉价、易用，但系统资源受限。专属服务器（dedicated servers）更加强大、可定制，但需要一定水平的技术知识。</p>
<p>如果一个网站很大，流量很高，虚拟主机已无法承载；而使用专属服务器的话对网站来说又没有必要。如果你遇到这样的问题，那么你需要一个VPS主机。</p>
<p><a href="https://www.mrven.com/wp-content/uploads/2010/04/vps_diagram.gif"><img loading="lazy" decoding="async" class="alignnone size-medium wp-image-375" title="vps_diagram" src="https://www.mrven.com/wp-content/uploads/2010/04/vps_diagram-326x300.gif" alt="" width="326" height="300" /></a></p>
<p><strong>虚拟私有服务器（virtual private server, VPS）</strong>是一种灵活的、可扩展的、经济的主机解决方案，可以适应绝大部分网站。它适合不满足于虚拟主机，而又不需要一整台服务器的用户。</p>
<p>在我们深入研究VPS的特性和优势之前，请注意，不同主机商提供的VPS有很大差异。要确定主机商的VPS是否包含某一特性，请直接咨询主机商。</p>
<h3>那么，VPS到底是什么？</h3>
<p>在虚拟主机上，你的网站和其他N多用户的网站都呆在同一台服务器上，这些网站共享这台服务器的资源，如内存、磁盘空间和CPU，而且你只能使用主机商提供的功能。</p>
<p><span id="more-370"></span></p>
<p>专属服务器，不言自明，你的网站是这台服务器上唯一的网站（或者说你是这台服务器的唯一用户），你独占这台服务器的所有资源。专属服务器适合大型网站——巨大的数据库、惊人的流量。而虚拟主机往往拒绝或限制这么大的网站。专属服务器通常很贵，而虚拟主机通常每个月的花费则不到10美刀。</p>
<h3>VPS的资源</h3>
<p>VPS是一种灵活的解决方案，介于虚拟主机和专属服务器之间——不仅仅是价格还包括功能。</p>
<p>和专属服务器一样，VPS上的网站独占内存和磁盘空间；而同虚拟主机一样，你的网站必须和其他网站共享CPU。简单来说，VPS的内存和磁盘空间是专属的，而CPU是共享的。而CPU的共享情况，又根据主机商的设置不同而不同。</p>
<p>下表展示了大部分主机商对虚拟主机、VPS和专属服务器的区分。</p>
<table border="1" cellspacing="0" cellpadding="2" width="400">
<tbody>
<tr>
<td width="133" valign="top"><strong>虚拟主机</strong></td>
<td width="133" valign="top"><strong>VPS</strong></td>
<td width="133" valign="top"><strong>专属服务器</strong></td>
</tr>
<tr>
<td width="133" valign="top">共享内存、磁盘空间和CPU</td>
<td width="133" valign="top">共享CPU，内存和磁盘空间专属</td>
<td width="133" valign="top">内存、磁盘空间和CPU都是专属</td>
</tr>
<tr>
<td width="133" valign="top">无服务器级的可定制性</td>
<td width="133" valign="top">服务器级的可定制性</td>
<td width="133" valign="top">服务器级的可定制性</td>
</tr>
<tr>
<td width="133" valign="top">所有服务器级的软件都是预先安装好的</td>
<td width="133" valign="top">服务器级软件（OS, cPanel, LAMP）的预安装情况取决于主机商</td>
<td width="133" valign="top">服务器级软件（OS, cPanel, LAMP）的预安装情况取决于主机商</td>
</tr>
<tr>
<td width="133" valign="top">通常提供完全的用户支持</td>
<td width="133" valign="top">用户支持情况取决于服务商</td>
<td width="133" valign="top">用户支持情况取决于服务商</td>
</tr>
<tr>
<td width="133" valign="top">$</td>
<td width="133" valign="top">$$</td>
<td width="133" valign="top">$$$</td>
</tr>
</tbody>
</table>
<h3>突发内存（burstable RAM）</h3>
<p>VPS不仅提供了更多的内存、磁盘空间，以及比虚拟主机更高的CPU资源。根据主机商的不同，某些还提供了突发内存功能，以应对突发性的内存枯竭情况。当遇到突发性的高流量事件时，突发内存将调用预留池中的内存，以应对暂时性的高流量。虚拟主机上没有这个功能，而专属服务器会使用全部的可用内存，不设内存预留池</p>
<h3>用户支持的差异</h3>
<p>和性能上的差异一样，不同VPS主机商的客户支持等级和类型也不尽相同。例如，某些公司提供半托管的VPS服务，而另一些公司则是全托管。</p>
<p>用户支持的差异如下表所示：</p>
<table border="1" cellspacing="0" cellpadding="2" width="400">
<tbody>
<tr>
<td width="133" valign="top"><strong>无托管</strong></td>
<td width="133" valign="top"><strong>半托管</strong></td>
<td width="133" valign="top"><strong>全托管</strong></td>
</tr>
<tr>
<td width="133" valign="top">主机商解决硬件和网络问题</td>
<td width="133" valign="top">主机商解决硬件、网络和常规软件问题</td>
<td width="133" valign="top">主机商解决硬件、网络及一切软件问题</td>
</tr>
<tr>
<td width="133" valign="top">用户对所有的软件、性能问题负责</td>
<td width="133" valign="top">用户自己解决自定义软件的问题</td>
<td width="133" valign="top">主机商负责自定义软件的安装</td>
</tr>
</tbody>
</table>
<p>如你所见，VPS是完美的中间选择——足够灵活的可定制性，充足的资源。适合想要获得比虚拟主机更多的主机权限，而又买不起专属服务器的哟过户。如果你需要root权限访问，虚拟主机不会给你提供，而VPS可以。如果你的网站的内存占用大起大落，而你的主机商又正好提供，那么突发内存将对你非常有吸引力。如果你喜欢自定义，那么服务器级的软件自定义，如PHP、MySQL和Apache，会令你产生兴趣。</p>
<p>简单来说，VPS具有专属服务器绝大部分的功能，并且在价格和用户支持上更有优势。</p>
<h3>我需要VPS吗？</h3>
<p>答案是“或许”。也许你是一个web设计师，手里有几个站，另外有一些长期合作客户的网站需要你管理。VPS适合你吗？好吧，看来你很可能需要一个高于虚拟主机的平台，这样你就不用再和其他用户共用资源，不必担心其他用户占有更多资源而影响你的网站的情况。专属主机有点过了，你并不是一直需要那么多的系统资源，而且你无法调整预算。</p>
<p>最后我要说，如果你的网站由静态网页构成，那么虚拟主机对你就足够了。如果你有大量文件存储，有多个站，动态网页构成，并且时不时会有大量流量涌入，那么你就应该考虑升级到VPS了。你能做的比在虚拟主机上更多，而投资又远远小于专属服务器。</p>
<p><a href="https://www.mrven.com/node/370">VPS完全指南</a>最先出现在<a href="https://www.mrven.com">布鲁文的蓝色奇想</a>。</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.mrven.com/node/370/feed</wfw:commentRss>
			<slash:comments>6</slash:comments>
		
		
			</item>
		<item>
		<title>如何在CSS里区分IE6、7和8</title>
		<link>https://www.mrven.com/node/361</link>
					<comments>https://www.mrven.com/node/361#comments</comments>
		
		<dc:creator><![CDATA[Ven]]></dc:creator>
		<pubDate>Tue, 30 Mar 2010 00:38:00 +0000</pubDate>
				<category><![CDATA[Web开发]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[ie]]></category>
		<guid isPermaLink="false">http://cheweb.org/361.html</guid>

					<description><![CDATA[<p>针对IE8和之前版本： 关键是在样式的最后缀上“9”。对，只能是9，大于9或者小于9都不行。 body { c [&#8230;]</p>
<p><a href="https://www.mrven.com/node/361">如何在CSS里区分IE6、7和8</a>最先出现在<a href="https://www.mrven.com">布鲁文的蓝色奇想</a>。</p>
]]></description>
										<content:encoded><![CDATA[<h3>针对IE8和之前版本：</h3>
<p>关键是在样式的最后缀上“9”。对，只能是9，大于9或者小于9都不行。</p>
<p>body {    <br />color: red; /* 对全部浏览器有效 */     <br />color : green9; /* 针对IE8和之前版本 */     <br />}</p>
<h3>针对IE7和之前版本：</h3>
<p>有经验的Web Developer一定知道，关键在与样式前的*号。</p>
<p>body {   <br /> color: red; /* 对全部浏览器有效 */    <br /> color : green9; /* 针对IE8和之前版本*/    <br /> *color : yellow; /* 针对IE7和之前版本 */    <br />}</p>
<h3>针对IE6：</h3>
<p>万恶的IE6，你可以用一个下划线把它区分出来。</p>
<p>body {   <br /> color: red; /* 对全部浏览器有效 */    <br /> color : green9; /* 针对IE8和之前版本 */    <br /> *color : yellow; /* 针对IE7和之前版本 */    <br /> _color : orange; /* 针对IE6 */    <br />}</p>
<p><a href="https://www.mrven.com/node/361">如何在CSS里区分IE6、7和8</a>最先出现在<a href="https://www.mrven.com">布鲁文的蓝色奇想</a>。</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.mrven.com/node/361/feed</wfw:commentRss>
			<slash:comments>7</slash:comments>
		
		
			</item>
		<item>
		<title>10个不常见却很有用的PHP函数</title>
		<link>https://www.mrven.com/node/298</link>
					<comments>https://www.mrven.com/node/298#comments</comments>
		
		<dc:creator><![CDATA[Ven]]></dc:creator>
		<pubDate>Sat, 16 Jan 2010 07:42:49 +0000</pubDate>
				<category><![CDATA[Web开发]]></category>
		<category><![CDATA[php]]></category>
		<category><![CDATA[函数]]></category>
		<guid isPermaLink="false">http://cheweb.org/?p=298</guid>

					<description><![CDATA[<p>1. sys_getloadavg() sys_getloadavt()可以获得系统负载情况。该函数返回一个包 [&#8230;]</p>
<p><a href="https://www.mrven.com/node/298">10个不常见却很有用的PHP函数</a>最先出现在<a href="https://www.mrven.com">布鲁文的蓝色奇想</a>。</p>
]]></description>
										<content:encoded><![CDATA[<p><strong>1. sys_getloadavg()</strong></p>
<p>sys_getloadavt()可以获得系统负载情况。该函数返回一个包含三个元素的数组，每个元素分别代表系统再过去的1、5和15分钟内的平均负载。</p>
<p>与其让服务器因负载过高而宕掉，不如在系统负载很高时主动die掉一个脚本，sys_getloadavg()就是用来帮你实现这个功能的。 不过很遗憾，该函数在windows下无效。</p>
<p><strong>2. pack()</strong></p>
<p>Pack()能将md5()返回的32位16进制字符串转换为16位的二进制字符串，可以节省存储空间。</p>
<p><strong>3. cal_days_in_month()</strong></p>
<p><span id="more-298"></span>cal_days_in_month()能够返回指定月份共有多少天。</p>
<p><strong>4. _()</strong></p>
<p>WordPress开发者经常能见到这个函数，还有_e()。这两个函数功能相同，与gettext()函数结合使用，能实现网站的多语言化。具体可参见PHP手册的相关部分介绍。</p>
<p><strong>5. get_browser()</strong></p>
<p>在发送页面前先看看用户的浏览器都能做些什么是不是挺好？get_browser()能获得用户的浏览器类型，以及浏览器支持的功能，不过首先你需要一个php_browscap.ini文件，用来给函数做参考文件。</p>
<p>要注意，该函数对浏览器功能的判断是基于该类浏览器的一般特性的。例如，如果用户关闭了浏览器对JavaScript的支持，函数无法得知这一点。但是在判断浏览器类型和OS平台方面，该函数还是很准确的。</p>
<p><strong>6. debug_print_backtrace()</strong></p>
<p>这是一个调试用的函数，能帮助你发现代码中的逻辑错误。要理解这个函数，还是直接看个例子吧：</p>
<blockquote><p>$a = 0;</p>
<p>function iterate() {<br />
global $a;<br />
if( $a &lt; 10 )<br />
recur();<br />
echo $a . &#8220;, &#8220;;<br />
}</p>
<p>function recur() {<br />
global $a;<br />
$a++;</p>
<p>// how did I get here?<br />
echo &#8220;nnn&#8221;;<br />
debug_print_backtrace();</p>
<p>if( $a &lt; 10 )<br />
iterate();</p>
<p>}</p>
<p>iterate();</p>
<p># OUTPUT:</p>
<p>#0  recur() called at [C:htdocsphp_stuffindex.php:8]<br />
#1  iterate() called at [C:htdocsphp_stuffindex.php:25]</p>
<p>#0  recur() called at [C:htdocsphp_stuffindex.php:8]<br />
#1  iterate() called at [C:htdocsphp_stuffindex.php:21]<br />
#2  recur() called at [C:htdocsphp_stuffindex.php:8]<br />
#3  iterate() called at [C:htdocsphp_stuffindex.php:25]</p>
<p>#0  recur() called at [C:htdocsphp_stuffindex.php:8]<br />
#1  iterate() called at [C:htdocsphp_stuffindex.php:21]<br />
#2  recur() called at [C:htdocsphp_stuffindex.php:8]<br />
#3  iterate() called at [C:htdocsphp_stuffindex.php:21]<br />
#4  recur() called at [C:htdocsphp_stuffindex.php:8]<br />
#5  iterate() called at [C:htdocsphp_stuffindex.php:25]</p></blockquote>
<p><strong>7. metaphone()</strong></p>
<p>这个函数返回单词的metaphone值，相同读音的单词具有相同的metaphone值，也就是说这个函数可以帮你判断两个单词的读音是否相同。不过对中文就无效了。。。</p>
<p><strong>8. natsort()</strong></p>
<p>natsort()能将一个数组以自然排序法进行排列，直接看个例子吧：</p>
<blockquote><p>$items = array(<br />
&#8220;100 apples&#8221;, &#8220;5 apples&#8221;, &#8220;110 apples&#8221;, &#8220;55 apples&#8221;<br />
);</p>
<p>// normal sorting:<br />
sort($items);<br />
print_r($items);<br />
# Outputs:<br />
# Array<br />
# (<br />
#     [0] =&gt; 100 apples<br />
#     [1] =&gt; 110 apples<br />
#     [2] =&gt; 5 apples<br />
#     [3] =&gt; 55 apples<br />
# )</p>
<p>natsort($items);<br />
print_r($items);<br />
# Outputs:<br />
# Array<br />
# (<br />
#     [2] =&gt; 5 apples<br />
#     [3] =&gt; 55 apples<br />
#     [0] =&gt; 100 apples<br />
#     [1] =&gt; 110 apples<br />
# )</p></blockquote>
<p><strong>9. levenshtein()</strong></p>
<p>Levenshtein()告诉你两个单词之间的“距离”。它告诉你如果想把一个单词变成另一个单词，需要插入、替换和删除多少字母。</p>
<p>看个例子吧：</p>
<blockquote><p>$dictionary = array(<br />
&#8220;php&#8221;, &#8220;javascript&#8221;, &#8220;css&#8221;<br />
);</p>
<p>$word = &#8220;japhp&#8221;;</p>
<p>$best_match = $dictionary[0];<br />
$match_value = levenshtein($dictionary[0], $word);</p>
<p>foreach($dictionary as $w) {<br />
$value = levenshtein($word, $w);<br />
if( $value &lt; $match_value ) {<br />
$best_match = $w;<br />
$match_value = $value;<br />
}<br />
}</p>
<p>echo &#8220;Did you mean the &#8216;$best_match&#8217; category?&#8221;;</p></blockquote>
<p><strong>10. glob()</strong></p>
<p>glob()会让你觉得用opendir(), readdir()和closedir()来寻找文件非常蠢。</p>
<blockquote><p>foreach (glob(&#8220;*.php&#8221;) as $file)<br />
echo &#8220;$filen&#8221;;</p></blockquote>
<p>本文首发于<a href="https://www.mrven.com/?p=533">布鲁文的蓝色奇想</a></p>
<p><a href="https://www.mrven.com/node/298">10个不常见却很有用的PHP函数</a>最先出现在<a href="https://www.mrven.com">布鲁文的蓝色奇想</a>。</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.mrven.com/node/298/feed</wfw:commentRss>
			<slash:comments>2</slash:comments>
		
		
			</item>
		<item>
		<title>10个你可能从未用过的PHP函数</title>
		<link>https://www.mrven.com/node/533</link>
					<comments>https://www.mrven.com/node/533#comments</comments>
		
		<dc:creator><![CDATA[Ven]]></dc:creator>
		<pubDate>Sat, 16 Jan 2010 07:36:27 +0000</pubDate>
				<category><![CDATA[Web开发]]></category>
		<category><![CDATA[php]]></category>
		<category><![CDATA[函数]]></category>
		<guid isPermaLink="false">http://www.mrven.com/?p=533</guid>

					<description><![CDATA[<p>1. sys_getloadavg() sys_getloadavt()可以获得系统负载情况。该函数返回一个包 [&#8230;]</p>
<p><a href="https://www.mrven.com/node/533">10个你可能从未用过的PHP函数</a>最先出现在<a href="https://www.mrven.com">布鲁文的蓝色奇想</a>。</p>
]]></description>
										<content:encoded><![CDATA[<p><strong>1. sys_getloadavg()</strong></p>
<p>sys_getloadavt()可以获得系统负载情况。该函数返回一个包含三个元素的数组，每个元素分别代表系统再过去的1、5和15分钟内的平均负载。</p>
<p>与其让服务器因高负载宕掉，不如在系统负载很高时主动die掉一个脚本，sys_getloadavg()就是用来帮你实现这个功能的。 不过很遗憾，该函数在windows下无效。</p>
<p><strong>2. pack()</strong></p>
<p>Pack()能将md5()返回的32位16进制字符串转换为16位的二进制字符串，可以节省存储空间。</p>
<p><strong>3. cal_days_in_month()</strong></p>
<p>cal_days_in_month()能够返回指定月份共有多少天。</p>
<p><span id="more-533"></span></p>
<p><strong>4. _()</strong></p>
<p>WordPress开发者经常能见到这个函数，还有_e()。这两个函数功能相同，与gettext()函数结合使用，能实现网站的多语言化。具体可参见PHP手册的相关部分介绍。</p>
<p><strong>5. get_browser()</strong></p>
<p>在发送页面前先看看用户的浏览器都能做些什么是不是挺好？get_browser()能获得用户的浏览器类型，以及浏览器支持的功能，不过首先你需要一个php_browscap.ini文件，用来给函数做参考文件。</p>
<p>要注意，该函数对浏览器功能的判断是基于该类浏览器的一般特性的。例如，如果用户关闭了浏览器对JavaScript的支持，函数无法得知这一点。但是在判断浏览器类型和OS平台方面，该函数还是很准确的。</p>
<p><strong>6. debug_print_backtrace()</strong></p>
<p>这是一个调试用的函数，能帮助你发现代码中的逻辑错误。要理解这个函数，还是直接看个例子吧：</p>
<blockquote><p>$a = 0;</p>
<p>function iterate() {<br />
global $a;<br />
if( $a &lt; 10 )<br />
recur();<br />
echo $a . &#8220;, &#8220;;<br />
}</p>
<p>function recur() {<br />
global $a;<br />
$a++;</p>
<p>// how did I get here?<br />
echo &#8220;\n\n\n&#8221;;<br />
debug_print_backtrace();</p>
<p>if( $a &lt; 10 )<br />
iterate();</p>
<p>}</p>
<p>iterate();</p>
<p># OUTPUT:</p>
<p>#0  recur() called at [C:\htdocs\php_stuff\index.php:8]<br />
#1  iterate() called at [C:\htdocs\php_stuff\index.php:25]</p>
<p>#0  recur() called at [C:\htdocs\php_stuff\index.php:8]<br />
#1  iterate() called at [C:\htdocs\php_stuff\index.php:21]<br />
#2  recur() called at [C:\htdocs\php_stuff\index.php:8]<br />
#3  iterate() called at [C:\htdocs\php_stuff\index.php:25]</p>
<p>#0  recur() called at [C:\htdocs\php_stuff\index.php:8]<br />
#1  iterate() called at [C:\htdocs\php_stuff\index.php:21]<br />
#2  recur() called at [C:\htdocs\php_stuff\index.php:8]<br />
#3  iterate() called at [C:\htdocs\php_stuff\index.php:21]<br />
#4  recur() called at [C:\htdocs\php_stuff\index.php:8]<br />
#5  iterate() called at [C:\htdocs\php_stuff\index.php:25]</p></blockquote>
<p><strong>7. metaphone()</strong></p>
<p>这个函数返回单词的metaphone值，相同读音的单词具有相同的metaphone值，也就是说这个函数可以帮你判断两个单词的读音是否相同。不过对中文就无效了。。。</p>
<p><strong>8. natsort()</strong></p>
<p>Natsort()能将一个数组以自然排序法进行排列，直接看个例子吧：</p>
<blockquote><p>$items = array(<br />
&#8220;100 apples&#8221;, &#8220;5 apples&#8221;, &#8220;110 apples&#8221;, &#8220;55 apples&#8221;<br />
);</p>
<p>// normal sorting:<br />
sort($items);<br />
print_r($items);<br />
# Outputs:<br />
# Array<br />
# (<br />
#     [0] =&gt; 100 apples<br />
#     [1] =&gt; 110 apples<br />
#     [2] =&gt; 5 apples<br />
#     [3] =&gt; 55 apples<br />
# )</p>
<p>natsort($items);<br />
print_r($items);<br />
# Outputs:<br />
# Array<br />
# (<br />
#     [2] =&gt; 5 apples<br />
#     [3] =&gt; 55 apples<br />
#     [0] =&gt; 100 apples<br />
#     [1] =&gt; 110 apples<br />
# )</p></blockquote>
<p><strong>9. levenshtein()</strong></p>
<p>Levenshtein()告诉你两个单词之间的“距离”。它告诉你如果想把一个单词变成另一个单词，需要插入、替换和删除多少字母。</p>
<p>看个例子吧：</p>
<blockquote><p>$dictionary = array(<br />
&#8220;php&#8221;, &#8220;javascript&#8221;, &#8220;css&#8221;<br />
);</p>
<p>$word = &#8220;japhp&#8221;;</p>
<p>$best_match = $dictionary[0];<br />
$match_value = levenshtein($dictionary[0], $word);</p>
<p>foreach($dictionary as $w) {<br />
$value = levenshtein($word, $w);<br />
if( $value &lt; $match_value ) {<br />
$best_match = $w;<br />
$match_value = $value;<br />
}<br />
}</p>
<p>echo &#8220;Did you mean the &#8216;$best_match&#8217; category?&#8221;;</p></blockquote>
<p><strong>10. glob()</strong></p>
<p>glob()会让你觉得用opendir(), readdir()和closedir()来寻找文件非常蠢。</p>
<blockquote><p>foreach (glob(&#8220;*.php&#8221;) as $file)<br />
echo &#8220;$file\n&#8221;;</p></blockquote>
<p><a href="https://www.mrven.com/node/533">10个你可能从未用过的PHP函数</a>最先出现在<a href="https://www.mrven.com">布鲁文的蓝色奇想</a>。</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.mrven.com/node/533/feed</wfw:commentRss>
			<slash:comments>20</slash:comments>
		
		
			</item>
		<item>
		<title>再次强调：网页上的外链不会降低PR</title>
		<link>https://www.mrven.com/node/201</link>
					<comments>https://www.mrven.com/node/201#comments</comments>
		
		<dc:creator><![CDATA[Ven]]></dc:creator>
		<pubDate>Tue, 17 Nov 2009 06:55:10 +0000</pubDate>
				<category><![CDATA[Web开发]]></category>
		<category><![CDATA[google]]></category>
		<category><![CDATA[pr]]></category>
		<category><![CDATA[seo]]></category>
		<guid isPermaLink="false">http://cheweb.org/?p=201</guid>

					<description><![CDATA[<p>互联网是Google的世界，作为站长我们的命运似乎就掌控在搜索结果的排名之中。而对搜索结果排名有影响又让人们关 [&#8230;]</p>
<p><a href="https://www.mrven.com/node/201">再次强调：网页上的外链不会降低PR</a>最先出现在<a href="https://www.mrven.com">布鲁文的蓝色奇想</a>。</p>
]]></description>
										<content:encoded><![CDATA[<p>互联网是Google的世界，作为站长我们的命运似乎就掌控在搜索结果的排名之中。而对搜索结果排名有影响又让人们关心的一个重要因素就是Google的PR值。确切地说就是PR值越大越好。</p>
<p>当然想要提高PR值是对的，但是问题在于有些站长对PR值算法的误解会给他们的行为带来致命的误导作用。其中一个误解就是认为添加外部链接会使你的PR值降低。<strong>我称之为 PR算法的“水桶理论”。</strong></p>
<p><a href="https://www.mrven.com/wp-content/uploads/2009/11/google-pagerank-leak.jpg"><img loading="lazy" decoding="async" class="alignnone size-medium wp-image-202" title="google-pagerank-leak" src="https://www.mrven.com/wp-content/uploads/2009/11/google-pagerank-leak-400x235.jpg" alt="google-pagerank-leak" width="400" height="235" /></a></p>
<p>也就是说，人们心里面把网页当成水桶一样，而外链就看成是水流。水流越多，水桶的水也越多，这样你的PR值就越高。不过，按照这种说法的话，页面上的外部链接就如水桶中的孔，那么每增加一个外部链接都会让你的水桶漏水，最后使得你的PR值降低。如果在你的页面上放上一百个外部链接，那么你整个所有的水都将流走了。</p>
<p>这个比喻看似有道理，<strong>但其实Google PageR算法<a href="http://cheweb.org/201.html">不是这样</a>的。 </strong></p>
<p><span id="more-201"></span>一个页面的PR值只受导入链接的数量和质量所影响，而不受外部链接的影响。(这一点你可以通过它所使用的方程式来理解，这里不做解释，因为本篇的目的不在于此)。显然，如果你向外链接一千个站点或者坏邻居， 你的页面可能被标记为“垃圾信息”被撤销引用，但是这跟PR值无关，它还是保持不变。</p>
<p>如果的页面PR值是5 (请记住真正的PR值不是整数而是上下浮动)， 在那个页面上放十个外部链接将不会影响它的PR值。唯一会出现的是每一个被链接的页面将会收到0.5分值 (每一个链接的分值等于发出外向链接页面的PR值除以该页面发出的外链的总数)。</p>
<p>而实际又更为复杂一点，我们还需要考虑其他细节以做出全面合理的分析。例如，如果你所链接的网站没有等量的回流到你的站点，你可能仍然会丢掉一点PR值。这叫做PR渗漏，但它并没有大多数人所认为的那么关键。</p>
<p>尽管会有那么一丁点儿的渗漏，总体而言可以说：<strong>外部链接并不会直接降低你的PR值。</strong> 事实上有很多网站包含了几十个外部链接，但在Google关键字搜索结果中却可排在最前面。</p>
<p>如果你曾因为害怕丢失PR值而忍痛不添加外部链接(我也这么做过)，那么我告诉你，可以不用担心这一点。链接到相关有价值的网站对每个站长都是有好处的。</p>
<p>英文原文：<a href="http://www.dailyblogtips.com/linking-out-google-pagerank/" target="_blank" rel="noopener">Linking Out Will NOT Reduce The Google PageRank of Your Pages</a></p>
<p><a href="https://www.mrven.com/node/201">再次强调：网页上的外链不会降低PR</a>最先出现在<a href="https://www.mrven.com">布鲁文的蓝色奇想</a>。</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.mrven.com/node/201/feed</wfw:commentRss>
			<slash:comments>4</slash:comments>
		
		
			</item>
		<item>
		<title>Google所谓的网站访问速度指什么？</title>
		<link>https://www.mrven.com/node/156</link>
					<comments>https://www.mrven.com/node/156#comments</comments>
		
		<dc:creator><![CDATA[Ven]]></dc:creator>
		<pubDate>Sat, 14 Nov 2009 16:41:37 +0000</pubDate>
				<category><![CDATA[Web开发]]></category>
		<category><![CDATA[google]]></category>
		<category><![CDATA[pagerank]]></category>
		<category><![CDATA[网页优化]]></category>
		<guid isPermaLink="false">http://cheweb.org/?p=156</guid>

					<description><![CDATA[<p>今天看到一篇名为《Google或将网站访问速度纳入PageRank指标》的新闻： Google品质管理部门的软 [&#8230;]</p>
<p><a href="https://www.mrven.com/node/156">Google所谓的网站访问速度指什么？</a>最先出现在<a href="https://www.mrven.com">布鲁文的蓝色奇想</a>。</p>
]]></description>
										<content:encoded><![CDATA[<p><a href="https://www.mrven.com/wp-content/uploads/2009/11/google-pagerank.png"><img loading="lazy" decoding="async" class="alignnone size-full wp-image-157" title="google-pagerank" src="https://www.mrven.com/wp-content/uploads/2009/11/google-pagerank.png" alt="google-pagerank" width="450" height="200" /></a></p>
<p>今天看到一篇名为《Google或将网站访问速度纳入PageRank指标》的新闻：</p>
<blockquote><p>Google品质管理部门的软件工程师马特-卡茨(Matt Cutts)在接受采访时表示:“过去,我们并未把网页载入速度计入搜索引擎排名,但是Google很多员工都认为如果这样做的话,网络会变得更快.而访问速度快的网站显然用户体验更好,因此这些网站应该得到额外的奖励.用户一点都不喜欢非常慢的网站.我认为在2010年,许多网站管理员都将考虑其网站的载入速度.”</p>
<p>业内人士称,Google可能会考虑把网页载入速度纳入搜索引擎排名体系.这将意味提升网站访问速度将成为搜索引擎优化的工作之一.</p></blockquote>
<p>不少人误解了这篇新闻，认为Matt Cutts所谓的“网站访问速度”就是“网页载入时间”。事实上，网页载入时间是个很抽象的概念，受众多不可测因素：如ISP线路、网页执行时间、服务器的当前负载、服务器带宽等的影响，这一指标很难成为标准性的指标。</p>
<p><span id="more-156"></span>以ISP线路为例，任何一个机房在全球各地的连接速度差异很大，Google以哪里的载入速度做标准呢？基本上是个无解的难题。如果用“多次测量取平均数”方式，综合统计Google在全球37个机房的的载入速度，那以后Google对每一个网页的单词抓取都要重复37遍，工程浩大，成本高昂。</p>
<p>事实上，所谓的“网站访问速度纳入PageRank指标”其实是Google的“<a href="http://code.google.com/speed/" target="_blank" rel="noopener">Let&#8217;s make the web faster</a>”项目的一个推广。该项目旨在帮助网站开发人员对网页进行优化，主要指标有：用Gzip压缩网页和js、css文件，正确的使用http缓存，精简html代码等。</p>
<p>Google为此出了几款优化工具，如<a href="http://code.google.com/speed/page-speed/" target="_blank" rel="noopener">Page Speed</a>（一个firebug插件），帮助开发人员检测网页优化中的不足。而这个检测工具中衡量的几项数据，其实才是PageRank真正统计的指标。可以想象，未来Google爬虫在抓取网页时，会同时使用类似Page Speed的工具对网页优化成都进行评定和打分，最终的结果将被PageRank作为参考。</p>
<p>Google为什么不断强调网页载入速度？先是“Let&#8217;s make the web faster”，后又传闻载入速度将影响Adwords的投放，现在又有网站访问速度将纳入PageRank指标。其实一切的一切，仍然是为了商业利益在考量的，通过提升全球网站的访问速度，Google将：</p>
<ul>
<li> 抓取更快:<br />
更快的web站点服务和更快的通信意味着谷歌抓取信息的速度就更快了。这也是目前衡量实时网站的一个标准。抓取更快甚至还会使得抓取成本更低，因为下载页面的时间少了。</li>
<li> 更多广告:<br />
web页面速度更快意味着更少下载到损坏页面的可能，因此，可以浏览更多的页面，这样谷歌就可以投放更多的广告了。</li>
<li> 更多的互联网用户:<br />
web速度更快的一个附带的影响就是互联网用户更多了。获益最大的还是谷歌，很少有其他公司能比谷歌收获更大，因为谷歌的顾客基数就比他们大。</li>
<li> 提高了web作为开发其它应用程序平台的可行性:<br />
比如Chrome OS说，如果web想成为我们的应用程序开发平台，它的速度就得更快，反应得更灵敏。</li>
<li> 对谷歌的数据中心也有好处:<br />
这点是与上面一点相关的。谷歌的云实际上是由多个互相关联的数据中心组成的。互联网速度越快越高效，数据中心就能更好地一起运作。</li>
</ul>
<p>真是很大的一盘棋啊！</p>
<p><a href="https://www.mrven.com/node/156">Google所谓的网站访问速度指什么？</a>最先出现在<a href="https://www.mrven.com">布鲁文的蓝色奇想</a>。</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.mrven.com/node/156/feed</wfw:commentRss>
			<slash:comments>5</slash:comments>
		
		
			</item>
		<item>
		<title>为WordPress插件兼容性测试出一份力</title>
		<link>https://www.mrven.com/node/727</link>
					<comments>https://www.mrven.com/node/727#respond</comments>
		
		<dc:creator><![CDATA[Ven]]></dc:creator>
		<pubDate>Tue, 10 Nov 2009 04:28:17 +0000</pubDate>
				<category><![CDATA[Web开发]]></category>
		<category><![CDATA[wordpress]]></category>
		<guid isPermaLink="false">http://cheweb.org/?p=121</guid>

					<description><![CDATA[<p>WordPress官方网站前段时间推出了Plugin Compatibility，一个插件兼容性测试的小应用。 [&#8230;]</p>
<p><a href="https://www.mrven.com/node/727">为WordPress插件兼容性测试出一份力</a>最先出现在<a href="https://www.mrven.com">布鲁文的蓝色奇想</a>。</p>
]]></description>
										<content:encoded><![CDATA[<p>WordPress官方网站前段时间推出了Plugin Compatibility，一个插件兼容性测试的小应用。在每个插件主页的边栏，都会显示Compatibility表单，里面可以查看该插件的不同版本在WordPress各个版本下的兼容性情况。</p>
<div id="attachment_149" style="width: 264px" class="wp-caption alignnone"><a href="https://www.mrven.com/wp-content/uploads/2009/11/2009-11-10_115659.jpg"><img loading="lazy" decoding="async" aria-describedby="caption-attachment-149" class="size-full wp-image-149" title="2009-11-10_115659" src="https://www.mrven.com/wp-content/uploads/2009/11/2009-11-10_115659.jpg" alt="Plugin Compatibility 界面" width="254" height="277" /></a><p id="caption-attachment-149" class="wp-caption-text">Plugin Compatibility 界面</p></div>
<p>兼容性数据都是由用户人工提交的，希望大家在使用插件之余，也能花点时间去提交下自己的兼容情况（需要有WordPress官网账号，注册很简单的），以帮助插件开发者完善插件，同时也让其他用户在选择插件时心里更有底。</p>
<p><a href="https://www.mrven.com/node/727">为WordPress插件兼容性测试出一份力</a>最先出现在<a href="https://www.mrven.com">布鲁文的蓝色奇想</a>。</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.mrven.com/node/727/feed</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>PHP4何时会死？</title>
		<link>https://www.mrven.com/node/695</link>
					<comments>https://www.mrven.com/node/695#comments</comments>
		
		<dc:creator><![CDATA[Ven]]></dc:creator>
		<pubDate>Wed, 28 Oct 2009 01:54:06 +0000</pubDate>
				<category><![CDATA[Web开发]]></category>
		<category><![CDATA[php]]></category>
		<guid isPermaLink="false">http://cheweb.org/?p=49</guid>

					<description><![CDATA[<p>PHP4 何时会死？要回答这个问题，先得明确 PHP4 应不应该死。从 PHP5 开始，大量强化面向对象编程的 [&#8230;]</p>
<p><a href="https://www.mrven.com/node/695">PHP4何时会死？</a>最先出现在<a href="https://www.mrven.com">布鲁文的蓝色奇想</a>。</p>
]]></description>
										<content:encoded><![CDATA[<p><img loading="lazy" decoding="async" class="alignnone size-full wp-image-51" title="goPHP5-283x100" src="https://www.mrven.com/wp-content/uploads/2009/10/goPHP5-283x100.png" alt="goPHP5-283x100" width="283" height="100" /></p>
<p>PHP4 何时会死？要回答这个问题，先得明确 PHP4 应不应该死。从 PHP5 开始，大量强化面向对象编程的功能和特性被加入到PHP中，OOP编程变得更加容易和高效；一些函数的性能得到了优化；增加了如 XML 处理等符合时代潮流的函数系列；修改了部分设置以强化安全性。从发展的眼光看，新的版本淘汰旧版本是<a href="http://cheweb.org/49.html">必然趋势</a>。</p>
<p>PHP 官方在2007年的最后一天正式停止对PHP4的更新，但PHP4并没有立刻死亡：许多升级缓慢的服务器、尤其是虚拟主机提供商仍然保留着 PHP4。</p>
<p>我们无法统计有多少服务器仍然在运行PHP4，但是在对<a href="http://chkversion.com">ChkVersion</a>上46个基于PHP的建站程序的最新稳定版本做了一番调查后，发现其中竟然有30个程序仍然支持PHP4，占到总数的65%。其中不乏耳熟能详的著名建站软件，如WordPress（最低支持到4.3）、Drupal（最低支持到4.3.5）、Joomla（最低支持到4.3.10）、Dizcuz（最低支持到4.1）。</p>
<p><span id="more-695"></span>而在对6个主流PHP开发框架（Zend Framework, CakePHP, Symfony, QeePHP, Yii, CodeIgniter）的调查中，其中也有三分之一的框架继续支持PHP4（CakePHP和CodeIgniter），这对于追求OOP思想和MVC结构的框架来说基本上是难以容忍的。</p>
<p>大量的建站程序及脚本为了顾及PHP4而无法放手去享受PHP5带来的性能提升。他们之所以不愿抛弃PHP4，正是因为大量用户仍然在使用运行着PHP4的主机；而服务器管理员为了顾及老用户的脚本稳定性（PHP5和PHP4部分不兼容），则采取保守态度不升级。服务器和脚本之间的博弈，更是加重阻碍了PHP4的死亡。</p>
<p>当初PHP3到PHP4的换代为何进展的很顺利？我想这和当时PHP并不非常流行有关。而随着PHP逐渐成为第一大Web脚本语言，升级问题越来越牵一发而动全身。那么PHP4究竟何时会死？我相信在不短的一段时间内，至少3年以内它仍然会时常出现在我们的视野中。也许正如麦克阿瑟所说，“老兵永远不死，只会慢慢凋零”。</p>
<p><a href="https://www.mrven.com/node/695">PHP4何时会死？</a>最先出现在<a href="https://www.mrven.com">布鲁文的蓝色奇想</a>。</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.mrven.com/node/695/feed</wfw:commentRss>
			<slash:comments>2</slash:comments>
		
		
			</item>
	</channel>
</rss>
