<?xml version="1.0" encoding="UTF-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
    <title>技术博客</title>
    <link rel="alternate" type="text/html" href="http://www.45eggs.com/" />
    <link rel="self" type="application/atom+xml" href="http://www.45eggs.com/atom/tech.xml" />
    <id>tag:www.45eggs.com,2010-03-17://3</id>
    <updated>2010-08-13T11:54:11Z</updated>
    
    <generator uri="http://www.sixapart.com/movabletype/">Movable Type 5.02</generator>

<entry>
    <title>DeviantArt推出HTML5绘图程序</title>
    <link rel="alternate" type="text/html" href="http://www.45eggs.com/cg/2010/deviantart-muro-html5-canvas.html" />
    <id>tag:www.45eggs.com,2010://3.578</id>

    <published>2010-08-13T11:36:23Z</published>
    <updated>2010-08-13T11:54:11Z</updated>

    <summary> deviantART推出了一个完全基于 HTML5 的绘图程序 Muro。这个几乎支 持所有现代浏览器，无需 Flash 和任何插件，在下曾经测试过的有Firefox、Chrome、IE、Oprea。令人佩服的是该程序甚至支持 Wacom 手写绘图板。 window.onload = function(){window.parent.CKEDITOR._[&quot;contentDomReadyeditor-content-textarea&quot;]( window );}...</summary>
    <author>
        <name>Ethan Jiang</name>
        <uri>http://www.45eggs.com</uri>
    </author>
    
        <category term="图形艺术" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="canvas" label="Canvas" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="deviantart" label="deviantART" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="html5" label="HTML5" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="en-us" xml:base="http://www.45eggs.com/">
        <![CDATA[<p>
	<a href="http://www.45eggs.com/upload/2010/08/20100812164621548.png"><img alt="20100812164621548.png" class="mt-image-none" height="385" src="http://www.45eggs.com/assets_c/2010/08/20100812164621548-thumb-600x385-292.png" style="" width="600" /></a></p>
<p>
	deviantART推出了一个完全基于 HTML5 的绘图程序 Muro。这个几乎支 持所有现代浏览器，无需 Flash 和任何插件，在下曾经测试过的有Firefox、Chrome、IE、Oprea。令人佩服的是该程序甚至支持 Wacom 手写绘图板。</p>
<script id="cke_actscrpt" type="text/javascript">window.onload = function(){window.parent.CKEDITOR._["contentDomReadyeditor-content-textarea"]( window );}</script>]]>
        <![CDATA[<p>
	<a href="http://www.45eggs.com/upload/2010/08/20100813193601396.png"><img alt="20100813193601396.png" class="mt-image-none" height="247" src="http://www.45eggs.com/assets_c/2010/08/20100813193601396-thumb-600x247-285.png" style="" width="600" /></a></p>
<p>
	上图是 DeviantArt 用户 loish使用 Muro 创作的一幅画，下面还有更多作品范例。</p>
<p style="text-align: center;">
	<img alt="20100813193110344.png" class="mt-image-none" height="552" src="http://www.45eggs.com/upload/2010/08/20100813193110344.png" style="" width="539" /></p>
<p>
	Muro 让人想起了过去那些基于浏览器的绘图工具，像使用 Flash 的 Odosketch，以及同样使用 HTML5 的Sketchpad。但 Muro 更干净，更有趣。随着浏览器以及 HTML5，CSS，JavaScript 等技术的进步，我们会看到越来越多这样的应用，诸如移动 Gmail, Web 字体，媒体播放一类的应用不仅仅是为了让我们感到惊奇，更逐渐走向成熟。<br />
	<br />
	Muro 在 iPad 上似乎更好用，使用手指比使用鼠标和轨迹球更好控制，Muro 的默认设置似乎也专为 iPad 做了优化，在 Chrome 和 Firefox 中，选择画笔得到理想的效果似乎要费点周折。</p>
<p>
	<a href="http://www.45eggs.com/upload/2010/08/20100813193540220.png"><img alt="20100813193540220.png" class="mt-image-none" height="234" src="http://www.45eggs.com/assets_c/2010/08/20100813193540220-thumb-600x234-288.png" style="" width="600" /></a></p>
<p>
	Muro还提供了很多进阶功能，比如&ldquo;锐化&rdquo;等滤镜，以下是两个对比：</p>
<p style="text-align: center;">
	<img alt="20100813193358795.png" class="mt-image-none" height="300" src="http://www.45eggs.com/upload/2010/08/20100813193358795.png" style="" width="600" /><br />
	（锐化前）</p>
<p style="text-align: center;">
	<img alt="20100813193422631.png" class="mt-image-none" height="300" src="http://www.45eggs.com/upload/2010/08/20100813193422631.png" style="" width="600" /><br />
	（锐化后）</p>
<p>
	Wired.com 的用户体验主管 Dennis Crothers 使用 Wacom 手写绘图板（需要安装驱动插件）对该程序做了一番测试，结果让他难忘，他表示，相比 Adobe Illustrator 而言，Muro 不是最好的绘图程序，但作为一个 HTML5 应用，它非常出色。</p>
<p>
	有兴趣的朋友，可以访问<a href="http://news.deviantart.com/article/125373/">DeviantArt&nbsp; Muro</a>查看更详细的资料，并且可以<a href="http://www.deviantart.com/muro/">亲自体验一下</a>：）<br />
	<br />
	本文国际来源：Webmonkey.com(原文作者：Michael Calore)<br />
	<br />
	中文翻译来源：锐商企业CMS网站内容管理系统官方网站<br />
	<br />
	整理：Ethan Jiang</p>
]]>
    </content>
</entry>

<entry>
    <title>Facebook测试照片人脸识别功能</title>
    <link rel="alternate" type="text/html" href="http://www.45eggs.com/internet/2010/facebook-face-recognition.html" />
    <id>tag:www.45eggs.com,2010://3.577</id>

    <published>2010-08-12T04:31:33Z</published>
    <updated>2010-08-12T03:57:00Z</updated>

    <summary><![CDATA[ 腾讯科技讯（向北）北京时间7月5日消息，据国外媒体报道，Facebook正小规模测试&ldquo;照片人脸识别&rdquo;功能，以期能简化用户在照片上标识好友的操作。 据欧迪奥表示，目前每天有1亿张照片上传至Facebook，如果全部手动打标签显然是一项浩大的工程。 此前，用户只能手动在照片上为Facebook好友加上名字标签：用户需先点击照片上想标记的区域（比如好友的面部），从列表中选择好友姓名再保存该标签，然后再重复这一过程。对于拥有大量照片的用户来说这一操作非常繁琐。 借助新的&ldquo;人脸识别功能&rdquo;，Facebook将自动识别出照片上的人物，就像数码相机拍照时会自动识别出所有的人脸一样，从而大大简化在Facebook上标识出好友的操作。...]]></summary>
    <author>
        <name>Ethan Jiang</name>
        <uri>http://www.45eggs.com</uri>
    </author>
    
        <category term="因特网面面观" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="facebook" label="Facebook" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="人脸识别" label="人脸识别" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="en-us" xml:base="http://www.45eggs.com/">
        <![CDATA[<p>
	<img alt="Facebook将自动识别出照片中的人脸，然后提示用户加上标签" class="mt-image-left" height="190" src="http://www.45eggs.com/upload/2010/08/36799748.jpg" style="float: left; margin: 0pt 20px 20px 0pt;" width="258" /><strong>腾讯科技讯</strong>（向北）北京时间7月5日消息，据国外媒体报道，Facebook正小规模测试&ldquo;照片人脸识别&rdquo;功能，以期能简化用户在照片上标识好友的操作。</p>
<p>
	据欧迪奥表示，目前每天有1亿张照片上传至Facebook，如果全部手动打标签显然是一项浩大的工程。</p>
<p>
	此前，用户只能手动在照片上为Facebook好友加上名字标签：用户需先点击照片上想标记的区域（比如好友的面部），从列表中选择好友姓名再保存该标签，然后再重复这一过程。对于拥有大量照片的用户来说这一操作非常繁琐。</p>
<p>
	借助新的&ldquo;人脸识别功能&rdquo;，Facebook将自动识别出照片上的人物，就像数码相机拍照时会自动识别出所有的人脸一样，从而大大简化在Facebook上标识出好友的操作。</p>
]]>
        <![CDATA[<p>
	Facebook不会完全代替用户自动给照片打上标签。参与测试的用户发现，Facebook只是自动将照片里所有人的脸部都选中，同时在旁边显示一个提示询问用户&ldquo;这是谁？&rdquo;<br />
	<br />
	Facebook 照片产品经理萨姆&middot;欧迪奥（Sam Odio）表示：&ldquo;借助这项新功能用户可以快速在照片上标识出好友，因为你不需要手动去框选面部，Facebook已经自动为你选上了。就像你用数码相机给好友拍照时，出现在好友面部的小方框一样。你要做的只是输入一个名字然后回车。很酷吧？&rdquo;<br />
	<br />
	目前还没有迹象表明Facebook将于何时结束测试，并正式向所有用户提供这一功能。不过，欧迪奥表示，这只是Facebook诸多改进中的第一项，Facebook还将不断改进照片浏览、上传和标签功能。</p>
<p>
	转自：<a href="http://tech.qq.com/a/20100705/000264.htm">腾讯网科技频道</a></p>
]]>
    </content>
</entry>

<entry>
    <title>HTML5 将为我们带来什么商业价值</title>
    <link rel="alternate" type="text/html" href="http://www.45eggs.com/w3c/2010/html5-business-value.html" />
    <id>tag:www.45eggs.com,2010://3.576</id>

    <published>2010-08-11T04:38:59Z</published>
    <updated>2010-08-11T04:51:32Z</updated>

    <summary><![CDATA[ 2010年上半年的苹果与Adobe的冲突，使HTML5的存在一夜之间被很多 人所知晓。在乔布斯的煽动下，这一已经在科技界潜行数年的下一代Web标准，被迅速拎到了台面上，苹果、谷歌、微软这科技界三巨头，连同众多业界明星，似 乎突然对HTML5变得情有独钟，利益集团的之间的争夺，成了这个技术最好的催化剂。 HTML5的火热似乎暗合了&ldquo;合久必分，分久必合&rdquo;的旧理。愈发多样化的互联网应用与现有平台割据之间的矛盾，产生了对标准统一Web标准的迫切需求，而HTML5正是担负这一使命的最佳候选&mdash;&mdash;现在看来，也是唯一候选。 显然，它的重要性不言而喻。而围绕着这一标准的争夺，势必会激起科技界的惊涛骇浪。...]]></summary>
    <author>
        <name>Ethan Jiang</name>
        <uri>http://www.45eggs.com</uri>
    </author>
    
        <category term="网页标准" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="adobe" label="Adobe" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="apple" label="Apple" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="html5" label="HTML5" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="microsoft" label="Microsoft" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="web" label="Web" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="web标准" label="Web标准" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="en-us" xml:base="http://www.45eggs.com/">
        <![CDATA[<p>
	<img alt="html5.png" class="mt-image-right" height="99" src="http://www.45eggs.com/upload/2010/08/html5.png" style="float: right; margin: 0pt 0pt 20px 20px;" width="150" />2010年上半年的<a href="http://www.apple.com">苹果</a>与<a href="http://www.adobe.com">Adobe</a>的冲突，使<a href="/tag/HTML5">HTML5</a>的存在一夜之间被很多 人所知晓。在乔布斯的煽动下，这一已经在科技界潜行数年的下一代Web标准，被迅速拎到了台面上，苹果、谷歌、微软这科技界三巨头，连同众多业界明星，似 乎突然对HTML5变得情有独钟，利益集团的之间的争夺，成了这个技术最好的催化剂。</p>
<p>
	HTML5的火热似乎暗合了&ldquo;合久必分，分久必合&rdquo;的旧理。愈发多样化的互联网应用与现有平台割据之间的矛盾，产生了对标准统一Web标准的迫切需求，而HTML5正是担负这一使命的最佳候选&mdash;&mdash;现在看来，也是唯一候选。</p>
<p>
	显然，它的重要性不言而喻。而围绕着这一标准的争夺，势必会激起科技界的惊涛骇浪。</p>
]]>
        <![CDATA[<p>
	<strong>HTML5的革命</strong><br />
	<br />
	HTML即超文本标记语言或超文本链接标示语言，是目前网络上应用最为广泛的语言，也是制作网页的主要语言。诞生于1993年的HTML，其文档制作并不是很复杂，且功能强大，支持不同数据格式的文件嵌入。<br />
	<br />
	然而，HTML的最近一次升级还是1999年12月发布的HTML4。<br />
	<br />
	乔布斯在檄文《关于Flash的思考》一文中说：&ldquo;Flash是PC时代的产物，它是为个人电脑与鼠标发明的。&rdquo;──其言外之意就是说已经不适应现在移 动终端的需求。的确，诞生于上世纪末的HTML4仅是PC时代的产物(后继的XHTML语言除了语法外与HTML4几乎没有区别)，在它诞生至今的10年 里面，互联网世界已经发生了天翻地覆的变化：Netscape灰飞烟灭，微软的IE如今已经演化到了IE9；Firefox 从 Netscape 的死灰中诞生，重新占据了第二位；Safari和Chrome组成的Webkit(浏览器架构的一种)阵营为移动互联网世界勾画出了蓝图。<br />
	<br />
	更重要的是，在如今的后Web2.0时代，人机交互、人网交互已经成为常态，对富媒体应用和本地存储的支持乏力成为现有浏览器的心腹之患。而将Web由内容平台改造为标准化的应用平台，并统一各大平台阵营的标准，正是HTML5的终极使命。<br />
	<br />
	HTML5主要有以下几个特色：降低插件的重要性，简化Web开发；大幅提高对动态图像、位置服务、本地存储的支持；提高浏览器安全性。<br />
	<br />
	很多业内人士认为HTML5以上特点是具有革命性的，特别是其丰富的标签体系，类似于内置了很多快捷键，将取代那些完成比较简单任务的插件，可以降低应用开发的技术门槛。<br />
	<br />
	其实，由于鼓励创新，互联网在之前是非常欢迎浏览器插件的。而声音、动画及其他一些非常生动的网页，通过Adobe、 RealAudio、微软以及其他的一些公司开发的插件在网络呈现时也的确让人耳目一新。然而，问题很快就出现了，插件的接口是向所有人开放的，每个人都 在尝试用自己定义的技术给网页增加新的功能，混乱不可避免。其中最有名的插件就是Flash，其他类似的插件更是数不胜数。<br />
	<br />
	HTML5 有望解决这一问题。举例来说，HTML5中的&ldquo;video&rdquo;标签使Web开发人员很容易地把视频内容与网页中的其他内容整合起来，使得Web的多媒体开发 不再仅仅是使用Adobe的Flash、 微软的Silverlight和升阳的JavaFX&mdash;&mdash;这些被垄断的富媒体开发工具的人员的专利。显然，这对互联网的富媒体化大有裨益。<br />
	<br />
	总之，从获取到互动，从图片到视频，从云端到终端，当下互联网的复杂性，迫切需要HTML5这样的救世主出现。<br />
	<br />
	其实，HTML5的诞生本身就是创新派&ldquo;革命&rdquo;的结果：万维网之父Tim Berners-Lee在创造出HTML的同时，建立了互联网标准化组织W3C(万维网联盟)。然而，在HTML之路上行走数年之后，W3C已经跟不上互 联网时代的步伐。W3C当时认为，HTML4已经功德圆满，他们的下一步工作是语法升级的可扩展超文本置标语言XHTML。他们认为其可以将Web带入光 明的未来。<br />
	<br />
	然而，作为第三方的W3C组织忽略了一个重要的变量&mdash;&mdash;在互联网时代崛起的科技巨头。实际上，在Netscape消失之后，IE并没有一统江湖。恰恰相反，浏览器进入了战国时代。Firefox、Opera、Safari相继诞生，而它们的背后都有着强大的支持力量。<br />
	<br />
	于是，由于不满&ldquo;互联网造物主&rdquo;&mdash;&mdash;W3C的思维僵化行为拖沓，苹果公司等新贵们自发组织成立了新的超文本语言标准工作组，这就是WHATWG(超文本应用科技工作组)，其使命便是致力于HTML5的规范和普及。<br />
	<br />
	现在看来，这些充满了野心和动力的科技巨擘，显然比无私的&ldquo;互联网造物主&rdquo;有力量的多。<br />
	<br />
	<strong>巨人的战场</strong><br />
	<br />
	毫无疑问，HTML5将是未来互联网技术的制高点。围绕这个制高点，科技巨头们必将展开激烈的争夺。目前来看，争夺的主角，再一次锁定在了苹果和谷歌为首的两大阵营。<br />
	<br />
	在苹果方面，其不断扩张的业务结构中，软件的权重始终是处于较弱的位置，比起Mac机与iPhone，其核心软件在业界的影响还要小的多。而HTML5为苹果改变这种局面，提供了千载难逢的良机。可以预见，依托其出色硬件平台，苹果将向HTML5高地展开持续攻势。<br />
	<br />
	在谷歌方面，虽然它入局较晚，但其必然不会将互联网技术的优势地位拱手相让。实际上，除了在线软件领域的优势之外，谷歌TV、谷歌手机等硬件尝试，其根 本目的便是为其软件拓展探路。比如谷歌的Nexus One手机就曾被用来展示最新的Flash Player 10.1。<br />
	<br />
	在这场抢占互联网未来的制高点战役中，苹果与谷歌可谓针锋相对：<br />
	<br />
	乔布斯批判Flash，谷歌马上在I/O大会上抨击苹果违背互联网精神；由于HTML5标准中没有指定任何的视频编解码器，在苹果明确提出自己掌握知识 产权的H.264标准建议之后，谷歌在I/O大会上便提出了WebM标准；当苹果在主页中为HTML5特别开辟一个栏目之后，谷歌针锋相对地推出自己的 HTML5&ldquo;练兵场&rdquo;&mdash;&mdash;HTML5 ROCKS；双方都在抢先发布HTML5新特性&hellip;&hellip;<br />
	<br />
	在巨头们的强硬姿态下，各种科技力量已经开始 站队。例如，包括Opera,Mozilla,Adobe等软件巨头和AMD,ARM,NVIDIA，Qualcomm在内硬件巨头明确表示支持谷歌的 WebM标准；而之前蓝光阵营的索尼、富士、三星等公司，则本身就是H.264的专利拥有方之一。<br />
	<br />
	在这场争夺中，特别值得关注的是软件 领域的老大微软的态度。其也已经在HTML5领域密集布局。目前来看，一方面，微软欲利用既得优势树立自己的标准，如其宣布Chrome, Firefox和Safari并不适合处理HTML5内容，而自己的IE9渲染HTML5动画的速度是Chrome 5、Safari的12倍以上等。另一方面，与谷歌放弃正在开发的位置服务技术Gear而转投HTML5不同，微软肯定不会轻易放弃 Silverlight，其在口头支持HTML5的同时，是否会沿用捆绑销售的老伎俩尚未可知。<br />
	<br />
	除了主张自己的主导标准外，在其他HTML5细节上，微软似乎与苹果站得更近些。例如，其已经公开宣布支持H.264标准。当然，这可能与其和苹果一样同为封闭性研发体系，并同为H.264专利拥有方之一有关。<br />
	<br />
	按照计划，WHATWG将在2012年向W3C提交HTML5规划。但历史证明：HTML5完成它的使命将并非易事。<br />
	<br />
	从2003年WHATWG公布HTML5草案算起，已过7年光景，HTML5并没有诞生，WHATWG的最大进展仅是促使潜在对手XHTML 2.0的夭折&mdash;&mdash;2008年，W3C宣布，其工作重点已经转移到HTML5方向上。<br />
	<br />
	之所以WHATWG进展也如此缓慢，原因同样是由于平台的割据，并且形态更为复杂。从采用不同操作系统的手机，到各家的应用程序商店；从尚处于少年期的 云端技术到各家保留的专利。特别是已经势同水火的苹果与谷歌，对于连互联网电视都要各立山头的它们来说，什么变量才会使他们妥协于同一种大互联网标准呢？<br />
	<br />
	而对于那些&ldquo;卫星国&rdquo;来说，滋味可能更为难受。虽然与苹果都有某种嫌隙的它们被谷歌拉到I/O大会上，势成&ldquo;倒乔联盟&rdquo;，但在实际商业生存中它们会与哪方合作还尚未可知。<br />
	<br />
	比如，H.264在团结了硬件播放器阵营发展多年之后，已经成为实际上的下一代互联网视频技术，连谷歌自己的Youtube都已经向它敞开了大门，&ldquo;卫 星们&rdquo;还会拒绝么？对于它们来说，不停的换队(如同Palm的生存状态)显然是件痛苦的事情，但商业利益的考量显然要压倒一切。<br />
	<br />
	可见，虽然各方对统一标准、提高互联网易用性的目标还是一致的，但是在各方完成博弈之前，人们还要一直等待下去。<br />
	<br />
	显然，虽然HTML5时代令人兴奋，但是它的真正到来，很可能将是一个漫长的过程。</p>
<p>
	转载自：<a href="http://www.oschina.net/news/11117/html5-business-value">OSCHINA</a></p>
<p>
	原文来自：《商业价值》杂志</p>
]]>
    </content>
</entry>

<entry>
    <title>W3C CEO Jeff Jaffe 博士专访：Web标准化新发展</title>
    <link rel="alternate" type="text/html" href="http://www.45eggs.com/w3c/2010/w3c-ceo-jeff-jaffe-web.html" />
    <id>tag:www.45eggs.com,2010://3.574</id>

    <published>2010-07-30T04:47:20Z</published>
    <updated>2010-07-30T06:51:08Z</updated>

    <summary> 记者/董世晓 2010年5月9日，W3C中国办事处在北京航空航天大学举行了Web标准化交流会。W3C CEO Jeff Jaffe博士做了关于下一代网络平台的演讲，这其中W3C主要做两方面的工作：一方面，W3C正在进行下一代平台的标准化，包括视频、样式、图形、字体、API等Web应用以及移动网络、卫星定位、智能设备等Web设施方面的工作；另一方面，W3C将持续关注Web数据、社会化网络、云计算、Web服务、传感器及小装置、关键基础架构。 Jeff Jaffe曾先后担任IBM、贝尔实验室、Novell等公司的重要高层管理职位，在进入W3C之前担任Novell的CTO和执行副总裁。在经历公司重组之后， 他在2009年1月底离开了Novell。业界认为，Jeff具备的出色交际能力正是W3C CEO职位所需要的，Jeff曾帮助Novell与竞争对手微软达成了合作协议。 演讲过程中，Jeff Jaffe博士还与广大工程师一起互动探讨Web前端的发展。会后，《程序员》记者应邀采访了Jeff Jaffe博士。...</summary>
    <author>
        <name>Ethan Jiang</name>
        <uri>http://www.45eggs.com</uri>
    </author>
    
        <category term="网页标准" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="w3c" label="W3C" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="web" label="Web" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="en-us" xml:base="http://www.45eggs.com/">
        <![CDATA[<p>
	<img alt="jaffe-300x252.gif" class="mt-image-left" height="252" src="http://www.45eggs.com/upload/2010/07/jaffe-300x252.gif" style="float: left; margin: 0pt 20px 20px 0pt;" width="300" />记者/董世晓</p>
<p>
	2010年5月9日，W3C中国办事处在北京航空航天大学举行了Web标准化交流会。W3C CEO Jeff Jaffe博士做了关于下一代网络平台的演讲，这其中W3C主要做两方面的工作：一方面，W3C正在进行下一代平台的标准化，包括视频、样式、图形、字体、API等Web应用以及移动网络、卫星定位、智能设备等Web设施方面的工作；另一方面，W3C将持续关注Web数据、社会化网络、云计算、Web服务、传感器及小装置、关键基础架构。</p>
<p>
	Jeff Jaffe曾先后担任IBM、贝尔实验室、Novell等公司的重要高层管理职位，在进入W3C之前担任Novell的CTO和执行副总裁。在经历公司重组之后， 他在2009年1月底离开了Novell。业界认为，Jeff具备的出色交际能力正是W3C CEO职位所需要的，Jeff曾帮助Novell与竞争对手微软达成了合作协议。</p>
<p>
	演讲过程中，Jeff Jaffe博士还与广大工程师一起互动探讨Web前端的发展。会后，《程序员》记者应邀采访了Jeff Jaffe博士。</p>
]]>
        <![CDATA[<p>
	记者：我们知道您曾供职于IBM、Bell Labs和Novell等多家公司，并且担任重要的技术管理职位，请问是什么原因使得您最终选择了W3C呢？<br />
	Jeff：大家都知道，W3C是IT领域新Web标准的制定者。而我认为现在是W3C的重要阶段。你们也看到了，W3C不同以往地扩大了工作范围，所以可以这样说，我是在一个合适的时间加入W3C。<br />
	<br />
	记者：W3C设立CEO职位的主要原因是什么？其主要职责是什么？<br />
	Jeff：Tim Berners Lee是W3C的执行董事，他负责在技术层面规划W3C的技术架构，以及推动W3C的标准化工作；同时，作为一个组织，W3C需要有人来为组织做整体决策，为整体工作分清轻重缓急，比如设立什么样的工作组、如何加强与中国的联系等。可以这么说，Tim为Web标准化发展规划方向，我，作为首席执行官，为W3C的发展规划方向。<br />
	<br />
	记者：目前业界对HTML5和CSS3等标准制定的进度迟缓抱怨很多，您能介绍一下这两个关键标准的进展情况吗？<br />
	Jeff：虽然有一些视频版权的问题还没有解决，但我们希望能在2010年解决HTML5和CSS3的这些问题。<br />
	<br />
	记者：您会采取什么措施加速标准的定案进程？<br />
	Jeff：我们认为，标准的制定工作应该越早开始越好。如果启动工作进行得晚了，市面上已经有很多不同的声音和不同的利益取向时，就很难在做标准的时候求同存异，达成共识了。所以，我认为，W3C应该对未来Web发展有更为清晰的认识，以便及早动手制定相关标准。<br />
	<br />
	记者：您能详细讲一下XG的情况吗？<br />
	Jeff：W3C在多年以前就启动了XG（Incubator Group），这是一个十分灵活有效的Web标准化促进方法。这个小组并不直接制定标准，而是把一些尚未成熟的新技术作为&ldquo;准标准&rdquo;，在这个组中进行孵化。如果经过一段时间的孵化，外界时机已经成熟，那么这些先前已经进入孵化阶段的&ldquo;准标准&rdquo;就可以更为快捷的迈向W3C的标准化流程。<br />
	<br />
	记者：您估计HTML5何时能成为标准？<br />
	Jeff：关于&ldquo;HTML5何时能成为标准&rdquo;这个问题有几种可能的回答：一、HTML5的标准文档应该在2010年完成；二、标准文档完成后不久，众多的厂商会把HTML5设计进他们的产品中；三、即使所有的浏览器都符合HTML5标准，不符合这个标准的网页内容也很会存在很久，因为针对不同情况的完全解决方案还需要一段时间才能出炉。<br />
	<br />
	记者：XML曾经非常热，但因为比较臃肿，在实际开发中重要性最近有所降低。您对XML的现状和发展趋势怎么看？<br />
	Jeff：XML将继续是一种流行的标准通用标记语言。<br />
	<br />
	记者：在中国也有一些公司正在从事语义网技术的研究与开发，他们会比较关心语义网距离广泛应用还需多久。您能否例举一些运用语义网的成功案例？<br />
	Jeff：这方面的工作我们已经在做了。有一个关于描述数据、元数据的框架&mdash;&mdash;RDF，还有OWL框架和Query语言&mdash;&mdash;SPARQL。因此在语义网这方面，我们已经有很多标准来做定义。目前语义网技术在世界范围内的一些应用，如海地地震中搜救工作所使用的 Open Streets Map技术等。<br />
	<br />
	记者：除了HTML、CSS、XML和语义网等大家熟悉的Web标准外，您认为W3C还有哪些关注不够的标准？<br />
	Jeff：我认为HTML、CSS、XML等已经是大家广泛接受并使用的技术，这些技术已经成为Web的核心架构的重要部分。但是，对于Web核心内容的哪些部分应该被标准化还存在着一定的争议。比如，目前，社会化网络是一个很好的例子。我认为W3C应该对于Web的核心技术和内容有更为战略性的眼光。<br />
	<br />
	记者：历史上中国在IT系统方面一穷二白。没有遗留资产的包袱令中国可以不必为接受标准而付出高昂代价。请问W3C是否应更重视中国市场，增加在中国的投入？<br />
	Jeff：我在1995年就来过中国，之后也来过多次。我认为中国是世界最重要的IT市场之一，W3C非常希望听到来自中国工程师的声音。本次活动的互动过程中，中国工程师对W3C标准制定的进展情况、标准存在的问题，提出了自己的建议和见解。我们将在更加致力于中国的网络发展，可以很肯定地说，我们会在中国增加投入。<br />
	<br />
	记者：W3C以中立性著称，W3C在这方面有何经验？<br />
	Jeff：W3C的原则是要&ldquo;开放&rdquo;，如果我们偏向于任何一方，就无法做到对大众完全开放，我们认为&ldquo;中立&rdquo;和&ldquo;开放&rdquo;是我们最好的理念之一。</p>
<p style="text-align: center;">
	<img alt="连接的开放数据云" class="mt-image-none" height="222" src="http://www.45eggs.com/upload/2010/07/5-300x222.gif" style="" width="300" /></p>
<p>
	<br />
	记者：您认为自己的成功秘诀是什么？<br />
	Jeff：没有什么成功的秘诀。我只是努力工作，善于倾听罢了。<br />
	<br />
	记者：请问您怎样看云计算？<br />
	Jeff：云计算是一个大有可为的话题。也许对一些非技术人员来说，完全了解云计算的本质不是一件容易的事情。但对我来说，我认为云计算应该提供的东西应该是这样的：当你连接墙上的插头时，你得到的不应该仅仅是电源，而是把你的电脑和整个世界相连，整个IT世界相连！<br />
	<br />
	记者：那移动互联网呢？<br />
	Jeff：我认为人们喜欢移动网络。你看，我拿出我的智能手机，隔几分钟就能接收邮件，很方便。 人们喜欢互相之间能够有便捷的联系方式，现在越来越多的设备能够和网络相连，人们可以更多的从万维网受益。<br />
	<br />
	记者：您对中国的Web从业人员和《程序员》读者还有哪些要说的？<br />
	Jeff：Web正在经历一个日新月异的大变革，我们希望中国工程师参与其中。中国参与会对Web的发展起到巨大的影响。<br />
	<br />
	关于W3C<br />
	<br />
	W3C是World Wide Web Consortium的缩写，意为万维网联盟。W3C于1994年10月在麻省理工学院计算机科学实验室成立。创建者是万维网的发明者Tim Berners-Lee（蒂姆&bull;伯纳斯&bull;李）。<br />
	W3C组织是对网络标准制定的一个非盈利组织，像HTML、XHTML、CSS、XML的标准就是由W3C来定制。W3C联合关心万维网技术发展的群体，以多数认同为原则，主要依靠会员、全职工作人员、全球办事处，以及公众的共同努力和奉献，来开发高质量的万维网标准，以实现其&ldquo;共享同一个万维网&rdquo;的使命。<br />
	<br />
	W3C中国办事处成立于2006年4月，挂靠在北京航空航天大学，由北京航空航天大学计算机学院计算机新技术研究所负责日常运营工作。W3C中国办事处致力于促进国内外万维网标准领域信息沟通互动，为国内企业、高校及科研机构参与国际信息技术标准化的研究集成和推广提供更好的服务。<br />
	<br />
	（本文来自《程序员》杂志10年06期）</p>
<p>
	原文地址：<a href="http://www.programmer.com.cn/3381/">http://www.programmer.com.cn/3381/</a></p>
]]>
    </content>
</entry>

<entry>
    <title>纯粹用CSS做出来的Icon，你相信吗？</title>
    <link rel="alternate" type="text/html" href="http://www.45eggs.com/cg/2010/icons-in-pure-css.html" />
    <id>tag:www.45eggs.com,2010://3.571</id>

    <published>2010-07-07T04:42:03Z</published>
    <updated>2010-07-07T04:54:27Z</updated>

    <summary> 如果告诉你下图中的Icon纯粹是用CSS做出来的，你相信吗？...</summary>
    <author>
        <name>Ethan Jiang</name>
        <uri>http://www.45eggs.com</uri>
    </author>
    
        <category term="XHTML-CSS" scheme="http://www.sixapart.com/ns/types#category" />
    
        <category term="图形艺术" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="css" label="CSS" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="css3" label="CSS3" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="icon" label="Icon" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="safari" label="Safari" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="en-us" xml:base="http://www.45eggs.com/">
        <![CDATA[<p>
	如果告诉你下图中的Icon纯粹是用CSS做出来的，你相信吗？</p>
<p>
	<img alt="20100707124133492.png" class="mt-image-none" height="439" src="http://www.45eggs.com/upload/2010/07/20100707124133492.png" style="" width="600" /></p>
]]>
        <![CDATA[<p>
	如果不相信，那是正常的，因为这有点不可思议，因此我建议您访问一下他们的页面，亲自体验一下<a href="http://graphicpeel.com/cssiosicons">Icons in Pure CSS</a>。</p>
<p>
	为了看到效果，最好使用最新版的<a href="http://www.apple.com/safari/">Safari 5</a>，或者是<a href="http://www.google.com/chrome">Chrome</a>，使用最新版的<a href="http://www.apple.com/safari/">Safari 5</a>可以看到完整的效果，我对比了<a href="http://www.google.com/chrome">Chrome</a>的效果，好像<a href="http://www.google.com/chrome">Chrome</a>还是有些细节有问题，但是在<a href="http://www.apple.com/safari/">Safari 5</a>中几乎是很完美的。</p>
]]>
    </content>
</entry>

<entry>
    <title>Google的HTML5ROCKS（多图）</title>
    <link rel="alternate" type="text/html" href="http://www.45eggs.com/internet/2010/google-html5-rocks.html" />
    <id>tag:www.45eggs.com,2010://3.570</id>

    <published>2010-06-24T04:42:45Z</published>
    <updated>2010-06-24T03:23:22Z</updated>

    <summary> Apple和Google现在是两大推广HTML 5和WebKit的巨头，Apple有一个专门推广HTML 5的网站（苹果官网Demo展示HTML5网页特效），那么Google也不甘落后，于是他们也搞出了个HTML5ROCKS（可能需要翻过去）。 HTML5ROCKS主要分三个栏目：HTML5展示、代码乐园、步骤化教程。在代码乐园中，可以修改预设的代码，或者插入自己的代码来运行。 Google Chrome对这个网站的支持最好，同样使用Webkit引擎的Safari也可以支持，另外，被Chrom Frame强行插入的IE也可以支持。...</summary>
    <author>
        <name>Ethan Jiang</name>
        <uri>http://www.45eggs.com</uri>
    </author>
    
        <category term="因特网面面观" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="apple" label="Apple" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="chrome" label="Chrome" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="css3" label="CSS3" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="google" label="Google" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="html5" label="HTML5" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="javascript" label="JavaScript" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="safari" label="Safari" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="en-us" xml:base="http://www.45eggs.com/">
        <![CDATA[<p>
	<a href="http://www.apple.com">Apple</a>和<a href="http://www.google.com">Google</a>现在是两大推广HTML 5和WebKit的巨头，<a href="http://www.apple.com">Apple</a>有一个专门<a href="http://www.apple.com/html5/">推广HTML 5</a>的网站（<a href="http://www.45eggs.com/xhtml-css/2010/adobe-demo-html5.html">苹果官网Demo展示HTML5网页特效</a>），那么<a href="http://www.google.com">Google</a>也不甘落后，于是他们也搞出了个<a href="http://www.html5rocks.com/">HTML5ROCKS</a>（可能需要翻过去）。</p>
<p>
	<a href="http://www.45eggs.com/upload/2010/06/20100624091853822.png"><img alt="20100624091853822.png" class="mt-image-center" height="220" src="http://www.45eggs.com/assets_c/2010/06/20100624091853822-thumb-600x220-249.png" style="text-align: center; display: block; margin: 0pt auto 20px;" width="600" /></a></p>
<p>
	<a href="http://www.html5rocks.com/">HTML5ROCKS</a>主要分三个栏目：<a href="http://slides.html5rocks.com/">HTML5展示</a>、<a href="http://playground.html5rocks.com/">代码乐园</a>、<a href="http://www.html5rocks.com/tutorials/">步骤化教程</a>。在<strong>代码乐园</strong>中，可以修改预设的代码，或者插入自己的代码来运行。</p>
<p>
	<a href="http://www.google.com/chrome">Google Chrome</a>对这个网站的支持最好，同样使用<a href="http://webkit.org/">Webkit</a>引擎的<a href="http://www.apple.com/safari/">Safari</a>也可以支持，另外，被<a href="http://www.google.com/chromeframe">Chrom Frame强行插入的IE</a>也可以支持。</p>
]]>
        <![CDATA[<p>
	下面着重介绍一些展示出来的特性，操作的过程很是流畅。</p>
<p style="text-align: center;">
	<a href="http://www.45eggs.com/upload/2010/06/20100624091955002.png"><img alt="20100624091955002.png" class="mt-image-none" height="467" src="http://www.45eggs.com/assets_c/2010/06/20100624091955002-thumb-600x467-251.png" style="" width="600" /></a><br />
	图一：基于HTML5的演示</p>
<p>
	这个演示基于HTML5，可以按键盘上的&ldquo;&larr;&rdquo;或&ldquo;&rarr;&rdquo;向左向右翻页，也可以按Ctrl（在Mac系统是Command）和加号或减号来放大或缩小演示幻灯片。</p>
<p style="text-align: center;">
	<a href="http://www.45eggs.com/upload/2010/06/20100624092026501.png"><img alt="20100624092026501.png" class="mt-image-none" height="469" src="http://www.45eggs.com/assets_c/2010/06/20100624092026501-thumb-600x469-253.png" style="" width="600" /></a><br />
	图二：网页技术发展时间轴</p>
<p style="text-align: center;">
	<img alt="20100624092038979.png" class="mt-image-none" height="89" src="http://www.45eggs.com/upload/2010/06/20100624092038979.png" style="" width="462" /><br />
	图三：HTML5大致可以理解为HTML+CSS+JS APIs</p>
<p>
	以下是一些JS APIs演示：</p>
<p style="text-align: center;">
	<img alt="20100624092147988.png" class="mt-image-none" height="292" src="http://www.45eggs.com/upload/2010/06/20100624092147988.png" style="" width="600" /><br />
	图四：JS APIs之选择器</p>
<p style="text-align: center;">
	<img alt="20100624092214291.png" class="mt-image-none" height="413" src="http://www.45eggs.com/upload/2010/06/20100624092214291.png" style="" width="600" /><br />
	图五：JS APIs之网页存储</p>
<p style="text-align: center;">
	<img alt="20100624092256601.png" class="mt-image-none" height="248" src="http://www.45eggs.com/upload/2010/06/20100624092256601.png" style="" width="600" /><br />
	图六：JS APIs之Web SQL Database</p>
<p style="text-align: center;">
	<img alt="20100624092318264.png" class="mt-image-none" height="320" src="http://www.45eggs.com/upload/2010/06/20100624092318264.png" style="" width="600" /><br />
	图七：JS APIs之缓存</p>
<p style="text-align: center;">
	<img alt="20100624092456744.png" class="mt-image-none" height="452" src="http://www.45eggs.com/upload/2010/06/20100624092456744.png" style="" width="600" /><br />
	图八：HTML5之新的语义标签，增强可用性</p>
<p style="text-align: center;">
	<img alt="20100624092509005.png" class="mt-image-none" height="261" src="http://www.45eggs.com/upload/2010/06/20100624092509005.png" style="" width="600" /><br />
	图九：HTML5之新的链接叙述，增强可用性</p>
<p style="text-align: center;">
	<img alt="20100624092601484.png" class="mt-image-none" height="471" src="http://www.45eggs.com/upload/2010/06/20100624092601484.png" style="" width="600" /><br />
	图十：HTML5之新的表单栏位格式（Web2.0表单）</p>
<p>
	新增的range格式让我们省却了原先用js做半天才实现的效果，而placeholder更是大大地简单又实用。Input可以用type来限制格式，以此验证表单栏位是否有效，同时配合CSS的:invalid伪类来实现栏位错误的样式。</p>
<p style="text-align: center;">
	<img alt="20100624092722856.png" class="mt-image-none" height="377" src="http://www.45eggs.com/upload/2010/06/20100624092722856.png" style="" width="600" /><br />
	图十一：HTML5之内嵌多媒体播放</p>
<p>
	mp4的视频可以直接播放，并且有相应的JS接口。</p>
<p style="text-align: center;">
	<img alt="20100624092759646.png" class="mt-image-none" height="454" src="http://www.45eggs.com/upload/2010/06/20100624092759646.png" style="" width="600" /><br />
	图十二：HTML5之Canvas画图</p>
<p>
	这是个好东西，只要浏览器能够支持，这让我想到IE所支持的vml。</p>
<p style="text-align: center;">
	<img alt="20100624092840162.png" class="mt-image-none" height="396" src="http://www.45eggs.com/upload/2010/06/20100624092840162.png" style="" width="600" /><br />
	图十三：HTML5之SVG</p>
<p>
	可以按放大缩小按钮来控制放大镜中的倍数，移动放大镜观看想要看的部位&hellip;&hellip;</p>
<p style="text-align: center;">
	<img alt="20100624092907640.png" class="mt-image-none" height="246" src="http://www.45eggs.com/upload/2010/06/20100624092907640.png" style="" width="527" /><br />
	图十四：总结</p>
<p style="text-align: center;">
	<img alt="20100624092939626.png" class="mt-image-none" height="396" src="http://www.45eggs.com/upload/2010/06/20100624092939626.png" style="" width="600" /><br />
	图十五：CSS3之选择器</p>
<p style="text-align: center;">
	<img alt="20100624092952684.png" class="mt-image-none" height="324" src="http://www.45eggs.com/upload/2010/06/20100624092952684.png" style="" width="600" /><br />
	图十六：新的字体支持，可以使用url引用远程字体</p>
<p style="text-align: center;">
	<img alt="20100624093036395.png" class="mt-image-none" height="376" src="http://www.45eggs.com/upload/2010/06/20100624093036395.png" style="" width="600" /><br />
	图十七：内容分栏</p>
<p>
	这玩意儿的出现，让不少网页设计师笑成一朵花。</p>
<p style="text-align: center;">
	<img alt="20100624093109468.png" class="mt-image-none" height="211" src="http://www.45eggs.com/upload/2010/06/20100624093109468.png" style="" width="600" /><br />
	图十八：圆角</p>
<p>
	圆角大家应该见多了，随着Firefox以及Chrome的普及，很多网站的圆角效果、阴影效果都可以正常地显示。</p>
<p style="text-align: center;">
	<img alt="20100624093125643.png" class="mt-image-none" height="416" src="http://www.45eggs.com/upload/2010/06/20100624093125643.png" style="" width="600" /><br />
	图十九：渐变</p>
<p>
	标准的渐变以及多背景图的出现，将大大减少代码量以及背景图片的数量。</p>
<p style="text-align: center;">
	<img alt="20100624093146077.png" class="mt-image-none" height="254" src="http://www.45eggs.com/upload/2010/06/20100624093146077.png" style="" width="600" /><br />
	图二十：阴影</p>
<p style="text-align: center;">
	<img alt="20100624093155764.png" class="mt-image-none" height="413" src="http://www.45eggs.com/upload/2010/06/20100624093155764.png" style="" width="600" /><br />
	图二十一：倒影，有没有让你想起当年很流行的Web2.0 Logo？</p>
<p style="text-align: center;">
	<a href="http://www.45eggs.com/upload/2010/06/20100624093458048.png"><img alt="20100624093458048.png" class="mt-image-none" height="351" src="http://www.45eggs.com/assets_c/2010/06/20100624093458048-thumb-600x351-274.png" style="" width="600" /></a><br />
	图二十三：代码乐园，可以在此练习练习，体验一下。</p>
<p>
	截图就先发到这里，各位尽量使用Chrome来体验：）</p>
<p>
	<a href="http://www.google.com/chrome">下载Chrome<br />
	</a></p>
<p>
	<a href="http://www.html5rocks.com/">访问HTML5ROCKS<br />
	</a></p>
]]>
    </content>
</entry>

<entry>
    <title>值得注意的PHP代码优化建议（转）</title>
    <link rel="alternate" type="text/html" href="http://www.45eggs.com/program/2010/40-tips-for-optimizing-your-php-code.html" />
    <id>tag:www.45eggs.com,2010://3.569</id>

    <published>2010-06-22T11:02:24Z</published>
    <updated>2010-06-22T11:15:14Z</updated>

    <summary><![CDATA[ 1.If a method can be static, declare it static. Speed improvement is by a factor of 4. 如果一个方法可静态化，就对它做静态声明。速率可提升至4倍。 2.echo is faster than print. echo 比 print 快。 3.Use echo&rsquo;s multiple parameters instead of string concatenation. 使用echo的多重参数（译注：指用逗号而不是句点）代替字符串连接。 4.Set the maxvalue...]]></summary>
    <author>
        <name>Ethan Jiang</name>
        <uri>http://www.45eggs.com</uri>
    </author>
    
        <category term="程序相关" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="php" label="PHP" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="代码优化" label="代码优化" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="en-us" xml:base="http://www.45eggs.com/">
        <![CDATA[<p>
	1.If a method can be static, declare it static. Speed improvement is by a factor of 4.<br />
	如果一个方法可静态化，就对它做静态声明。速率可提升至4倍。</p>
<p>
	2.echo is faster than print. <br />
	echo 比 print 快。</p>
<p>
	3.Use echo&rsquo;s multiple parameters instead of string concatenation. <br />
	使用echo的多重参数（译注：指用逗号而不是句点）代替字符串连接。</p>
<p>
	4.Set the maxvalue for your for-loops before and not in the loop. <br />
	在执行for循环之前确定最大循环数，不要每循环一次都计算最大值。</p>
<p>
	5.Unset your variables to free memory, especially large arrays. <br />
	注销那些不用的变量尤其是大数组，以便释放内存。</p>
<p>
	6.Avoid magic like __get, __set, __autoload <br />
	尽量避免使用__get，__set，__autoload。</p>
<p>
	7.require_once() is expensive <br />
	require_once()代价昂贵。</p>
]]>
        <![CDATA[<p>
	&nbsp;</p>
<p>
	8.Use full paths in includes and requires, less time spent on resolving the OS paths. <br />
	在包含文件时使用完整路径，解析操作系统路径所需的时间会更少。</p>
<p>
	9.If you need to find out the time when the script started executing, $_SERVER[&rsquo;REQUEST_TIME&rsquo;] is preferred to time() <br />
	如果你想知道脚本开始执行（译注：即服务器端收到客户端请求）的时刻，使用$_SERVER[&lsquo;REQUEST_TIME&rsquo;]要好于time()。</p>
<p>
	10.See if you can use strncasecmp, strpbrk and stripos instead of regex. <br />
	检查是否能用strncasecmp，strpbrk，stripos函数代替正则表达式完成相同功能。</p>
<p>
	11.str_replace is faster than preg_replace, but strtr is faster than str_replace by a factor of 4. <br />
	str_replace函数比preg_replace函数快，但strtr函数的效率是str_replace函数的四倍。</p>
<p>
	12.If the function, such as string replacement function, accepts both arrays and single characters as arguments, and if your argument list is not too long, consider writing a few redundant replacement statements, passing one character at a time, instead of one line of code that accepts arrays as search and replace arguments. <br />
	如果一个字符串替换函数，可接受数组或字符作为参数，并且参数长度不太长，那么可以考虑额外写一段替换代码，使得每次传递参数是一个字符，而不是只写一行代码接受数组作为查询和替换的参数。</p>
<p>
	13.It&rsquo;s better to use select statements than multi if, else if, statements. <br />
	使用选择分支语句（译注：即switch case）好于使用多个if，else if语句。</p>
<p>
	14.Error suppression with @ is very slow. <br />
	用@屏蔽错误消息的做法非常低效。</p>
<p>
	15.Turn on apache&rsquo;s mod_deflate <br />
	打开apache的mod_deflate模块。</p>
<p>
	16.Close your database connections when you&rsquo;re done with them. <br />
	数据库连接当使用完毕时应关掉。</p>
<p>
	17.$row[&rsquo;id&rsquo;] is 7 times faster than $row[id]. <br />
	$row[&lsquo;id&rsquo;]的效率是$row[id]的7倍。</p>
<p>
	18.Error messages are expensive. <br />
	错误消息代价昂贵。</p>
<p>
	19.Do not use functions inside of for loop, such as for ($x=0; $x &lt; count($array); $x) The count() function gets called each time. <br />
	尽量不要在for循环中使用函数，比如for ($x=0; $x &lt; count($array); $x)每循环一次都会调用count()函数。</p>
<p>
	20.Incrementing a local variable in a method is the fastest. Nearly the same as calling a local variable in a function. <br />
	在方法中递增局部变量，速度是最快的。几乎与在函数中调用局部变量的速度相当。</p>
<p>
	21.Incrementing a global variable is 2 times slow than a local var. <br />
	递增一个全局变量要比递增一个局部变量慢2倍。</p>
<p>
	22.Incrementing an object property (eg. $this-&gt;prop++) is 3 times slower than a local variable. <br />
	递增一个对象属性（如：$this-&gt;prop++）要比递增一个局部变量慢3倍。</p>
<p>
	23.Incrementing an undefined local variable is 9-10 times slower than a pre-initialized one. <br />
	递增一个未预定义的局部变量要比递增一个预定义的局部变量慢9至10倍。</p>
<p>
	24.Just declaring a global variable without using it in a function also slows things down (by about the same amount as incrementing a local var). PHP probably does a check to see if the global exists. <br />
	仅定义一个局部变量而没在函数中调用它，同样会减慢速度（其程度相当于递增一个局部变量）。PHP大概会检查看是否存在全局变量。</p>
<p>
	25.Method invocation appears to be independent of the number of methods defined in the class because I added 10 more methods to the test class (before and after the test method) with no change in performance. <br />
	方法调用看来与类中定义的方法的数量无关，因为我（在测试方法之前和之后都）添加了10个方法，但性能上没有变化。</p>
<p>
	26.Methods in derived classes run faster than ones defined in the base class. <br />
	派生类中的方法运行起来要快于在基类中定义的同样的方法。</p>
<p>
	27.A function call with one parameter and an empty function body takes about the same time as doing 7-8 $localvar++ operations. A similar method call is of course about 15 $localvar++ operations. <br />
	调用带有一个参数的空函数，其花费的时间相当于执行7至8次的局部变量递增操作。类似的方法调用所花费的时间接近于15次的局部变量递增操作。</p>
<p>
	28.Surrounding your string by &lsquo; instead of &rdquo; will make things interpret a little faster since php looks for variables inside &ldquo;&hellip;&rdquo; but not inside &lsquo;&hellip;&rsquo;. Of course you can only do this when you don&rsquo;t need to have variables in the string. <br />
	用单引号代替双引号来包含字符串，这样做会更快一些。因为PHP会在双引号包围的字符串中搜寻变量，单引号则不会。当然，只有当你不需要在字符串中包含变量时才可以这么做。</p>
<p>
	29.When echoing strings it&rsquo;s faster to separate them by comma instead of dot. Note: This only works with echo, which is a function that can take several strings as arguments. <br />
	输出多个字符串时，用逗号代替句点来分隔字符串，速度更快。注意：只有echo能这么做，它是一种可以把多个字符串当作参数的&ldquo;函数&rdquo;（译注：PHP手册中说echo是语言结构，不是真正的函数，故把函数加上了双引号）。</p>
<p>
	30.A PHP script will be served at least 2-10 times slower than a static HTML page by Apache. Try to use more static HTML pages and fewer scripts. <br />
	Apache解析一个PHP脚本的时间要比解析一个静态HTML页面慢2至10倍。尽量多用静态HTML页面，少用脚本。</p>
<p>
	31.Your PHP scripts are recompiled every time unless the scripts are cached. Install a PHP caching product to typically increase performance by 25-100% by removing compile times. <br />
	除非脚本可以缓存，否则每次调用时都会重新编译一次。引入一套PHP缓存机制通常可以提升25%至100%的性能，以免除编译开销。</p>
<p>
	32.Cache as much as possible. Use memcached &ndash; memcached is a high-performance memory object caching system intended to speed up dynamic web applications by alleviating database load. OP code caches are useful so that your script does not have to be compiled on every request. <br />
	尽量做缓存，可使用memcached。memcached是一款高性能的内存对象缓存系统，可用来加速动态Web应用程序，减轻数据库负载。对运算码 (OP code)的缓存很有用，使得脚本不必为每个请求做重新编译。</p>
<p>
	33.When working with strings and you need to check that the string is either of a certain length you&rsquo;d understandably would want to use the strlen() function. This function is pretty quick since it&rsquo;s operation does not perform any calculation but merely return the already known length of a string available in the zval structure (internal C struct used to store variables in PHP). However because strlen() is a function it is still somewhat slow because the function call requires several operations such as lowercase &amp; hashtable lookup followed by the execution of said function. In some instance you can improve the speed of your code by using an isset() trick. <br />
	当操作字符串并需要检验其长度是否满足某种要求时，你想当然地会使用strlen()函数。此函数执行起来相当快，因为它不做任何计算，只返回在zval 结构（C的内置数据结构，用于存储PHP变量）中存储的已知字符串长度。但是，由于strlen()是函数，多多少少会有些慢，因为函数调用会经过诸多步骤，如字母小写化（译注：指函数名小写化，PHP不区分函数名大小写）、哈希查找，会跟随被调用的函数一起执行。在某些情况下，你可以使用isset() 技巧加速执行你的代码。<br />
	Ex.（举例如下）<br />
	if (strlen($foo) &lt; 5) { echo &ldquo;Foo is too short&rdquo;; }<br />
	vs.（与下面的技巧做比较）<br />
	if (!isset($foo{5})) { echo &ldquo;Foo is too short&rdquo;; }</p>
<p>
	Calling isset() happens to be faster then strlen() because unlike strlen(), isset() is a language construct and not a function meaning that it&rsquo;s execution does not require function lookups and lowercase. This means you have virtually no overhead on top of the actual code that determines the string&rsquo;s length. <br />
	调用isset()恰巧比strlen()快，因为与后者不同的是，isset()作为一种语言结构，意味着它的执行不需要函数查找和字母小写化。也就是说，实际上在检验字符串长度的顶层代码中你没有花太多开销。</p>
<p>
	&nbsp;</p>
<p>
	34.When incrementing or decrementing the value of the variable $i++ happens to be a tad slower then ++$i. This is something PHP specific and does not apply to other languages, so don&rsquo;t go modifying your C or Java code thinking it&rsquo;ll suddenly become faster, it won&rsquo;t. ++$i happens to be faster in PHP because instead of 4 opcodes used for $i++ you only need 3. Post incrementation actually causes in the creation of a temporary var that is then incremented. While pre-incrementation increases the original value directly. This is one of the optimization that opcode optimized like Zend&rsquo;s PHP optimizer. It is still a good idea to keep in mind since not all opcode optimizers perform this optimization and there are plenty of ISPs and servers running without an opcode optimizer. 当执行变量$i的递增或递减时，$i++会比++$i慢一些。这种差异是PHP特有的，并不适用于其他语言，所以请不要修改你的C或Java代码并指望它们能立即变快，没用的。++$i更快是因为它只需要3条指令(opcodes)，$i++则需要4条指令。后置递增实际上会产生一个临时变量，这个临时变量随后被递增。而前置递增直接在原值上递增。这是最优化处理的一种，正如Zend的PHP优化器所作的那样。牢记这个优化处理不失为一个好主意，因为并不是所有的指令优化器都会做同样的优化处理，并且存在大量没有装配指令优化器的互联网服务提供商（ISPs）和服务器。</p>
<p>
	35.Not everything has to be OOP, often it is too much overhead, each method and object call consumes a lot of memory. <br />
	并不是事必面向对象(OOP)，面向对象往往开销很大，每个方法和对象调用都会消耗很多内存。</p>
<p>
	36.Do not implement every data structure as a class, arrays are useful, too. <br />
	并非要用类实现所有的数据结构，数组也很有用。</p>
<p>
	37.Don&rsquo;t split methods too much, think, which code you will really re-use. <br />
	不要把方法细分得过多，仔细想想你真正打算重用的是哪些代码？</p>
<p>
	38.You can always split the code of a method later, when needed. <br />
	当你需要时，你总能把代码分解成方法。</p>
<p>
	39.Make use of the countless predefined functions. <br />
	尽量采用大量的PHP内置函数。</p>
<p>
	40.If you have very time consuming functions in your code, consider writing them as C extensions. <br />
	如果在代码中存在大量耗时的函数，你可以考虑用C扩展的方式实现它们。</p>
<p>
	41.Profile your code. A profiler shows you, which parts of your code consumes how many time. The Xdebug debugger already contains a profiler. Profiling shows you the bottlenecks in overview. <br />
	评估检验(profile)你的代码。检验器会告诉你，代码的哪些部分消耗了多少时间。Xdebug调试器包含了检验程序，评估检验总体上可以显示出代码的瓶颈。</p>
<p>
	42.mod_gzip which is available as an Apache module compresses your data on the fly and can reduce the data to transfer up to 80%. <br />
	mod_zip可作为Apache模块，用来即时压缩你的数据，并可让数据传输量降低80%。</p>
<p>
	43.Excellent Article （http://phplens.com/lens/php-book/optimizing-debugging-php.php）about optimizing php by John Lim <br />
	另一篇优化PHP的精彩文章，由John Lim撰写。</p>
<p>
	英文原文地址：<a href="http://reinholdweber.com/?p=3">http://reinholdweber.com/?p=3</a></p>
<p>
	英文版权归Reinhold Weber所有，中译文作者yangyang（aka davidkoree）。</p>
<p>
	双语版可用于非商业传播，但须注明英文版作者、版权信息，以及中译文作者。翻译水平有限，请广大PHPer指正。</p>
]]>
    </content>
</entry>

<entry>
    <title>探索Google App Engine背后的奥秘(1)--Google的核心技术（转）</title>
    <link rel="alternate" type="text/html" href="http://www.45eggs.com/architecture/2010/google-app-engine.html" />
    <id>tag:www.45eggs.com,2010://3.567</id>

    <published>2010-06-21T04:38:35Z</published>
    <updated>2010-06-21T03:45:31Z</updated>

    <summary> 作者：吴朱华，本系列文章转载自：人云亦云 本系列是基于公开资料对Google App Engine是如何实现的这个话题进行深度探讨。而且在切入Google App Engine之前，首先会对Google的核心技术和其整体架构进行分析，以帮助大家之后更好地理解Google App Engine的实现。 本篇将主要介绍Google的十个核心技术，而且可以分为四大类： 分布式基础设施：GFS，Chubby和Protocol Buffer。 分布式大规模数据处理：MapReduce和Sawzall。 分布式数据库技术：BigTable和数据库Sharding。 数据中心优化技术：数据中心高温化，12V电池和服务器整合。...</summary>
    <author>
        <name>Ethan Jiang</name>
        <uri>http://www.45eggs.com</uri>
    </author>
    
        <category term="系统架构" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="googleapps" label="Google Apps" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="en-us" xml:base="http://www.45eggs.com/">
        <![CDATA[<p>
	作者：吴朱华，本系列文章转载自：<a href="http://peopleyun.com/?p=463">人云亦云</a></p>
<p>
	本系列是基于公开资料对Google App Engine是如何实现的这个话题进行深度探讨。而且在切入Google App Engine之前，首先会对Google的核心技术和其整体架构进行分析，以帮助大家之后更好地理解Google App Engine的实现。</p>
<p>
	本篇将主要介绍Google的十个核心技术，而且可以分为四大类：</p>
<ol>
	<li>
		分布式基础设施：GFS，Chubby和Protocol Buffer。</li>
	<li>
		分布式大规模数据处理：MapReduce和Sawzall。</li>
	<li>
		分布式数据库技术：BigTable和数据库Sharding。</li>
	<li>
		数据中心优化技术：数据中心高温化，12V电池和服务器整合。</li>
</ol>
]]>
        <![CDATA[<p>
	<span style="font-size:14px;"><strong>分布式基础设施</strong></span></p>
<p>
	<strong>GFS</strong></p>
<p>
	由于搜索引擎需要处理海量的数据，所以Google的两位创始人Larry Page和Sergey Brin在创业初期设计一套名为&ldquo;BigFiles&rdquo;的文件系统，而GFS（全称为&ldquo;Google File System&rdquo;）这套分布式文件系统则是&ldquo;BigFiles&rdquo;的延续。</p>
<p>
	&nbsp;</p>
<p>
	首先，介绍它的架构，GFS主要分为两类节点：</p>
<ol>
	<li>
		Master节点：主要存储与数据文件相关的元数据，而不是Chunk（数据块）。元数据包括一个能将64位标签映射到数据块的位置及其组成文件 的表格，数据块副本位置和哪个进程正在读写特定的数据块等。还有Master节点会周期性地接收从每个Chunk节点来的更新（&rdquo;Heart- beat&rdquo;）来让元数据保持最新状态。</li>
	<li>
		Chunk节点：顾名思义，肯定用来存储Chunk，数据文件通过被分割为每个默认大小为64MB的Chunk的方式存储，而且每个Chunk有 唯一一个64位标签，并且每个Chunk都会在整个分布式系统被复制多次，默认为3次。&nbsp;</li>
</ol>
<p>
	下图就是GFS的架构图：</p>
<p style="text-align: center; ">
	<a href="http://www.45eggs.com/upload/2010/06/Google-file-system.png"><img alt="Google-file-system.png" class="mt-image-none" height="269" src="http://www.45eggs.com/assets_c/2010/06/Google-file-system-thumb-600x269-238.png" style="" width="600" /></a><br />
	图1. GFS的架构图（参片[15]）</p>
<p>
	接着，在设计上，GFS主要有八个特点：</p>
<ol>
	<li>
		大文件和大数据块：数据文件的大小普遍在GB级别，而且其每个数据块默认大小为64MB，这样做的好处是减少了元数据的大小，能使Master节 点能够非常方便地将元数据放置在内存中以提升访问效率。</li>
	<li>
		操作以添加为主：因为文件很少被删减或者覆盖，通常只是进行添加或者读取操作，这样能充分考虑到硬盘线性吞吐量大和随机读写慢的特点。</li>
	<li>
		支持容错：首先，虽然当时为了设计方便，采用了单Master的方案，但是整个系统会保证每个Master都会有其相对应的复制品，以便于在 Master节点出现问题时进行切换。其次，在Chunk层，GFS已经在设计上将节点失败视为常态，所以能非常好地处理Chunk节点失效的问题。</li>
	<li>
		高吞吐量：虽然其单个节点的性能无论是从吞吐量还是延迟都很普通，但因为其支持上千的节点，所以总的数据吞吐量是非常惊人的。</li>
	<li>
		保护数据：首先，文件被分割成固定尺寸的数据块以便于保存，而且每个数据块都会被系统复制三份。</li>
	<li>
		扩展能力强：因为元数据偏小，使得一个Master节点能控制上千个存数据的Chunk节点。</li>
	<li>
		支持压缩：对于那些稍旧的文件，可以通过对它进行压缩，来节省硬盘空间，并且压缩率非常惊人，有时甚至接近90%。</li>
	<li>
		用户空间：虽然在用户空间运行在运行效率方面稍差，但是更便于开发和测试，还有能更好利用Linux的自带的一些POSIX API。&nbsp;</li>
</ol>
<p>
	现在Google内部至少运行着200多个GFS集群，最大的集群有几千台服务器，并且服务于多个Google服务，比如Google搜索。但由于GFS 主要为搜索而设计，所以不是很适合新的一些Google产品，比YouTube、Gmail和更强调大规模索引和实时性的Caffeine搜索引擎等，所 以Google已经在开发下一代GFS，代号为&ldquo;Colossus&rdquo;，并且在设计方面有许多不同，比如：支持分布式Master节点来提升高可用性并能支 撑更多文件，chunk节点能支持1MB大小的chunk以支撑低延迟应用的需要。</p>
<p>
	<strong>Chubby</strong></p>
<p>
	简单的来说，Chubby属于分布式锁服务，通过Chubby，一个分布式系统中的上千个client都能够对于某项资源进行&ldquo;加锁&rdquo;或者&ldquo;解锁&rdquo;，常用 于BigTable的协作工作，在实现方面是通过对文件的创建操作来实现&ldquo;加锁&rdquo;，并基于著名科学家Leslie Lamport的Paxos算法。</p>
<p>
	<strong>Protocol Buffer</strong></p>
<p>
	Protocol Buffer，是Google内部使用一种语言中立，平台中立和可扩展的序列化结构化数据的方式，并提供java、c++ 和python这三种语言的实现，每一种实现都包含了相应语言的编译器以及库文件，而且它是一种二进制的格式，所以其速度是使用xml进行数据交换的10 倍左右。它主要用于两个方面：其一是RPC通信，它可用于分布式应用之间或者异构环境下的通信。其二是数据存储方面，因为它自描述，而且压缩很方便，所以 可用于对数据进行持久化，比如存储日志信息，并可被Map Reduce程序处理。与Protocol Buffer比较类似的产品还有Facebook的Thrift，而且Facebook号称Thrift在速度上还有一定的优势。</p>
<p>
	<span style="font-size:14px;"><strong>分布式大规模数据处理</strong></span></p>
<p>
	<strong>MapReduce</strong></p>
<p>
	首先，在Google数据中心会有大规模数据需要处理，比如被网络爬虫（Web Crawler）抓取的大量网页等。由于这些数据很多都是PB级别，导致处理工作不得不尽可能的并行化，而Google为了解决这个问题，引入了 MapReduce这个编程模型，MapReduce是源自函数式语言，主要通过&quot;Map（映射）&quot;和&quot;Reduce（化简）&quot;这两个步骤来并行处理大规 模的数据集。Map会先对由很多独立元素组成的逻辑列表中的每一个元素进行指定的操作，且原始列表不会被更改，会创建多个新的列表来保存Map的处理结 果。也就意味着，Map操作是高度并行的。当Map工作完成之后，系统会先对新生成的多个列表进行清理（Shuffle）和排序，之后会这些新创建的列表 进行Reduce操作，也就是对一个列表中的元素根据Key值进行适当的合并。</p>
<p>
	下图为MapReduce的运行机制：</p>
<p style="text-align: center; ">
	<a href="http://www.45eggs.com/upload/2010/06/Map%20Reduce.PNG"><img alt="Map Reduce.PNG" class="mt-image-none" height="430" src="http://www.45eggs.com/assets_c/2010/06/Map%20Reduce-thumb-600x430-240.png" style="" width="600" /></a><br />
	图2. MapReduce的运行机制（参[19]）</p>
<p>
	接下来，将根据上图来举一个MapReduce的例子：比如，通过搜索Spider将海量的Web页面抓取到本地的GFS集群中，然后Index系统将会 对这个GFS集群中多个数据Chunk进行平行的Map处理，生成多个Key为URL，value为html页面的键值对（Key-Value Map），接着系统会对这些刚生成的键值对进行Shuffle（清理），之后系统会通过Reduce操作来根据相同的key值（也就是URL）合并这些键 值对。</p>
<p>
	最后，通过MapReduce这么简单的编程模型，不仅能用于处理大规模数据，而且能将很多繁琐的细节隐藏起来，比如自动并行化，负载均衡和机器宕机处理 等，这样将极大地简化程序员的开发工作。MapReduce可用于包括&ldquo;分布grep，分布排序，web访问日志分析，反向索引构建，文档聚类，机器学 习，基于统计的机器翻译，生成Google的整个搜索的索引&ldquo;等大规模数据处理工作。Yahoo也推出MapReduce的开源版本Hadoop，而且 Hadoop在业界也已经被大规模使用。</p>
<p>
	<strong>Sawzall</strong></p>
<p>
	Sawzall可以被认为是构建在MapReduce之上的采用类似Java语法的DSL（Domain-Specific Language），也可以认为它是分布式的AWK。它主要用于对大规模分布式数据进行筛选和聚合等高级数据处理操作，在实现方面，是通过解释器将其转化 为相对应的MapReduce任务。除了Google的Sawzall之外，yahoo推出了相似的Pig语言，但其语法类似于SQL。</p>
<p>
	<span style="font-size:14px;"><strong>分布式数据库技术</strong></span></p>
<p>
	<strong>BigTable</strong></p>
<p>
	由于在Google的数据中心存储PB级以上的非关系型数据时候，比如网页和地理数据等，为了更好地存储和利用这些数据，Google开发了一套数据库系 统，名为&ldquo;BigTable&rdquo;。BigTable不是一个关系型的数据库，它也不支持关联（join）等高级SQL操作，取而代之的是多级映射的数据结 构，并是一种面向大规模处理、容错性强的自我管理系统，拥有TB级的内存和PB级的存储能力，使用结构化的文件来存储数据，并每秒可以处理数百万的读写操 作。</p>
<p>
	什么是多级映射的数据结构呢？就是一个稀疏的，多维的，排序的Map，每个Cell由行关键字，列关键字和时间戳三维定位．Cell的内容是一个不解释的 字符串，比如下表存储每个网站的内容与被其他网站的反向连接的文本。 反向的URL com.cnn.www是这行的关键字；contents列存储网页内容，每个内容有一个时间戳，因为有两个反向连接，所以archor的Column Family有两列：anchor: cnnsi.com和anchhor:my.look.ca。Column Family这个概念，使得表可以轻松地横向扩展。下面是它具体的数据模型图：</p>
<p style="text-align: center; ">
	<a href="http://www.45eggs.com/upload/2010/06/Big%20Table%20Model.PNG"><img alt="Big Table Model.PNG" class="mt-image-none" height="137" src="http://www.45eggs.com/assets_c/2010/06/Big%20Table%20Model-thumb-600x137-242.png" style="" width="600" /></a><br />
	图3. BigTable数据模型图（参[4]）</p>
<p>
	在结构上，首先，BigTable基于GFS分布式文件系统和Chubby分布式锁服务。其次BigTable也分为两部分：其一是Master节点，用 来处理元数据相关的操作并支持负载均衡。其二是tablet节点，主要用于存储数据库的分片tablet，并提供相应的数据访问，同时tablet是基于 名为SSTable的格式，对压缩有很好的支持。</p>
<p style="text-align: center; ">
	<a href="http://www.45eggs.com/upload/2010/06/BigTable.PNG"><img alt="BigTable.PNG" class="mt-image-none" height="347" src="http://www.45eggs.com/assets_c/2010/06/BigTable-thumb-600x347-244.png" style="" width="600" /></a><br />
	图4. BigTable架构图（参[15]）</p>
<p>
	BigTable正在为Google六十多种产品和项目提供存储和获取结构化数据的支撑平台，其中包括有Google Print， Orkut，Google Maps，Google Earth和Blogger等，而且Google至少运行着500个BigTable集群。</p>
<p>
	随着Google内部服务对需求的不断提高和技术的不断地发展，导致原先的BigTable已经无法满足用户的需求，而Google也正在开发下一代 BigTable，名为&ldquo;Spanner（扳手）&rdquo;，它主要有下面这些BigTable所无法支持的特性：</p>
<ol>
	<li>
		支持多种数据结构，比如table，familie，group和coprocessor等。</li>
	<li>
		基于分层目录和行的细粒度的复制和权限管理。</li>
	<li>
		支持跨数据中心的强一致性和弱一致性控制。</li>
	<li>
		基于Paxos算法的强一致性副本同步，并支持分布式事务。</li>
	<li>
		提供许多自动化操作。</li>
	<li>
		强大的扩展能力，能支持百万台服务器级别的集群。</li>
	<li>
		用户可以自定义诸如延迟和复制次数等重要参数以适应不同的需求。&nbsp;</li>
</ol>
<p>
	<strong>数据库Sharding</strong></p>
<p>
	Sharding就是分片的意思，虽然非关系型数据库比如BigTable在Google的世界中占有非常重要的地位，但是面对传统OLTP应用，比如广 告系统，Google还是采用传统的关系型数据库技术，也就是MySQL，同时由于Google所需要面对流量非常巨大，所以Google在数据库层采用 了分片（Sharding）的水平扩展（Scale Out）解决方案，分片是在传统垂直扩展（Scale Up）的分区模式上的一种提升，主要通过时间，范围和面向服务等方式来将一个大型的数据库分成多片，并且这些数据片可以跨越多个数据库和服务器来实现水平 扩展。</p>
<p>
	Google整套数据库分片技术主要有下面这些优点：</p>
<ol>
	<li>
		扩展性强：在Google生产环境中，已经有支持上千台服务器的MySQL分片集群。</li>
	<li>
		吞吐量惊人：通过巨大的MySQL分片集群能满足巨量的查询请求。</li>
	<li>
		全球备份：不仅在一个数据中心还是在全球的范围，Google都会对MySQL的分片数据进行备份，这样不仅能保护数据，而且方便扩展。&nbsp;</li>
</ol>
<p>
	在实现方面，主要可分为两块：其一是在MySQL InnoDB基础上添加了数据库分片的技术。其二是在ORM层的Hibernate的基础上也添加了相关的分片技术，并支持虚拟分片（Virtual Shard）来便于开发和管理。同时Google也已经将这两方面的代码提交给相关组织。</p>
<p>
	<span style="font-size:14px;"><strong>数据中心优化技术</strong></span></p>
<p>
	<strong>数据中心高温化</strong></p>
<p>
	大中型数据中心的PUE（Power Usage Effectiveness）普遍在2左右，也就是在服务器等计算设备上耗1度电，在空调等辅助设备上也要消耗一度电。对一些非常出色的数据中心，最多也 就能达到1.7，但是Google通过一些有效的设计使部分数据中心到达了业界领先的1.2，在这些设计当中，其中最有特色的莫过于数据中心高温化，也就 是让数据中心内的计算设备运行在偏高的温度下，Google的能源方面的总监Erik Teetzel在谈到这点的时候说：&ldquo;普通的数据中心在70华氏度（21摄氏度）下面工作，而我们则推荐80华氏度（27摄氏度）&ldquo;。但是在提高数据中心 的温度方面会有两个常见的限制条件：其一是服务器设备的崩溃点，其二是精确的温度控制。如果做好这两点，数据中心就能够在高温下工作，因为假设数据中心的 管理员能对数据中心的温度进行正负1/2度的调节，这将使服务器设备能在崩溃点5度之内工作，而不是常见的20度之内，这样既经济，又安全。还有，业界传 言Intel为Google提供抗高温设计的定制芯片，但云计算界的顶级专家James Hamilton认为不太可能，因为虽然处理器也非常惧怕热量，但是与内存和硬盘相比还是强很多，所以处理器在抗高温设计中并不是一个核心因素。同时他也 非常支持使数据中心高温化这个想法，而且期望将来数据中心甚至能运行在40摄氏度下，这样不仅能节省空调方面的成本，而且对环境也很有利。</p>
<p>
	<strong>12V电池</strong></p>
<p>
	由于传统的UPS在资源方面比较浪费，所以Google在这方面另辟蹊径，采用了给每台服务器配一个专用的12V电池的做法来替换了常用的UPS，如果主 电源系统出现故障，将由该电池负责对服务器供电。虽然大型UPS可以达到92%到95%的效率，但是比起内置电池的99.99%而言是非常捉襟见肘的，而 且由于能量守恒的原因，导致那么未被UPS充分利用的电力会被转化成热能，这将导致用于空调的能耗相应地攀升，从而走入一个恶性循环。同时在电源方面也有 类似的&ldquo;神来之笔&rdquo;，普通的服务器电源会同时提供5V和12V的直流电。但是Google设计的服务器电源只输出12V直流电，必要的转换在主板上进行， 虽然这种设计会使主板的成本增加1美元到2美元，但是它不仅能使电源能在接近其峰值容量的情况下运行，而且在铜线上传输电流时效率更高。</p>
<p>
	<strong>服务器整合</strong></p>
<p>
	谈到虚拟化的杀手锏时，第一个让人想到肯定是服务器整合，而且普遍能实现1:8的整合率来降低各方面的成本。有趣的是，Google在硬件方面也引入类似 服务器整合的想法，它的做法是在一个机箱大小的空间内放置两台服务器，这些做的好处有很多，首先，减小了占地面积。其次，通过让两台服务器共享诸如电源等 设备，来降低设备和能源等方面的投入。</p>
<p>
	本篇结束，下篇将猜想一下Google整体架构。</p>]]>
    </content>
</entry>

<entry>
    <title>正版免费Flash Builder 4 Standard序列号</title>
    <link rel="alternate" type="text/html" href="http://www.45eggs.com/software/2010/flash-builder-4-standard-key.html" />
    <id>tag:www.45eggs.com,2010://3.566</id>

    <published>2010-06-17T04:43:20Z</published>
    <updated>2010-06-17T03:55:33Z</updated>

    <summary> Adobe正在免费提供Flash Builder 4 副本给： 符合条件的教育机构的学员和教职员工 受当前经济环境影响并且目前失业的软件开发人员 在活动中收到特别促销代码的活动参与者 只要填写一个简单的表单，您就可以获取一份免费且正版的Flash Builder 4标准版。 申请Adobe部分产品（ColdFusion与Flash Builder 4）免费序列号的网址：https://freeriatools.adobe.com/ 直接申请Flash Builder 4 免费序列号的网址：http://www.adobe.com/cn/devnet/flex/free/index.html...</summary>
    <author>
        <name>Ethan Jiang</name>
        <uri>http://www.45eggs.com</uri>
    </author>
    
        <category term="软件试玩" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="adobe" label="Adobe" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="flash" label="Flash" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="en-us" xml:base="http://www.45eggs.com/">
        <![CDATA[<p>
	<a href="http://www.45eggs.com/upload/2010/06/20100617115121861.png"><img alt="Flash Builder 4" class="mt-image-none" height="155" src="http://www.45eggs.com/assets_c/2010/06/20100617115121861-thumb-600x155-236.png" style="" width="600" /></a></p>
<p>
	Adobe正在免费提供Flash Builder 4 副本给：</p>
<ul>
	<li>
		符合条件的教育机构的学员和教职员工</li>
	<li>
		受当前经济环境影响并且目前失业的软件开发人员</li>
	<li>
		在活动中收到特别促销代码的活动参与者</li>
</ul>
<p>
	只要填写一个简单的表单，您就可以获取一份免费且正版的Flash Builder 4标准版。</p>
<p>
	申请Adobe部分产品（ColdFusion与Flash Builder 4）免费序列号的网址：<a href="https://freeriatools.adobe.com/">https://freeriatools.adobe.com/</a></p>
<p>
	直接申请Flash Builder 4 免费序列号的网址：<a href="http://www.adobe.com/cn/devnet/flex/free/index.html">http://www.adobe.com/cn/devnet/flex/free/index.html</a></p>
]]>
        <![CDATA[<p>
	只要按步骤申请即可，何乐而不为呢。</p>
<p>
	随着<a href="http://www.adobe.com/cfusion/tdrc/index.cfm?product=flash_builder">Flash Builder 4中文版</a>的发布，<a href="http://help.adobe.com/zh_CN/AS3LCR/Flex_4.0/">全中文的Flex 4语言参考手册</a>也随之上线了。</p>
<p>
	这是个好消息。</p>
]]>
    </content>
</entry>

<entry>
    <title>又拍网架构中的分库设计（转）</title>
    <link rel="alternate" type="text/html" href="http://www.45eggs.com/architecture/2010/yupoo-partition-database.html" />
    <id>tag:www.45eggs.com,2010://3.565</id>

    <published>2010-06-17T04:32:34Z</published>
    <updated>2010-06-17T03:33:10Z</updated>

    <summary> 作者：周兆兆 又拍网是一个照片分享社区，从2005年6月至今积累了260万用户，1.1亿张照片，目前的日访问量为200多万。5年的发展历程里经历过许多起伏，也积累了一些经验，在这篇文章里，我要介绍一些我们在技术上的积累。 又拍网和大多数Web2.0站点一样，构建于大量开源软件之上，包括MySQL、PHP、nginx、Python、memcached、redis、Solr、Hadoop和RabbitMQ等等。 又拍网的服务器端开发语言主要是PHP和Python，其中PHP用于编写Web逻辑（通过HTTP和用户直接打交道）， 而Python则主要用于开发内部服务和后台任务。在客户端则使用了大量的 Javascript， 这里要感谢一下MooTools这个JS框架，它使得我们很享受前端开发过程。 另外，我们把图片处理过程从PHP进程里独立出来变成一个服务。这个服务基于nginx，但是是作为nginx的一个模块而开放REST API。...</summary>
    <author>
        <name>Ethan Jiang</name>
        <uri>http://www.45eggs.com</uri>
    </author>
    
        <category term="系统架构" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="javascript" label="JavaScript" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="mysql" label="MySQL" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="nginx" label="Nginx" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="php" label="PHP" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="python" label="Python" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="yupoo" label="Yupoo" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="技术架构" label="技术架构" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="en-us" xml:base="http://www.45eggs.com/">
        <![CDATA[<p>
	作者：<a href="http://www.infoq.com/cn/bycategory.action?authorName=%E5%91%A8%E5%85%86%E5%85%86">周兆兆</a></p>
<p>
	又拍网是一个照片分享社区，从2005年6月至今积累了260万用户，1.1亿张照片，目前的日访问量为200多万。5年的发展历程里经历过许多起伏，也积累了一些经验，在这篇文章里，我要介绍一些我们在技术上的积累。</p>
<p>
	又拍网和大多数Web2.0站点一样，构建于大量开源软件之上，包括<a href="http://www.mysql.com/">MySQL</a>、<a href="http://www.php.net/">PHP</a>、<a href="http://nginx.org/en/">nginx</a>、<a href="http://www.python.org/">Python</a>、<a href="http://www.danga.com/memcached/">memcached</a>、<a href="http://code.google.com/p/redis">redis</a>、<a href="http://lucene.apache.org/solr/">Solr</a>、<a href="http://hadoop.apache.org/">Hadoop</a>和<a href="http://www.rabbitmq.com/">RabbitMQ</a>等等。 又拍网的服务器端开发语言主要是<a href="http://www.php.net/">PHP</a>和<a href="http://www.python.org/">Python</a>，其中<a href="http://www.php.net/">PHP</a>用于编写Web逻辑（通过HTTP和用户直接打交道）， 而<a href="http://www.python.org/">Python</a>则主要用于开发内部服务和后台任务。在客户端则使用了大量的 Javascript， 这里要感谢一下<a href="http://mootools.net/">MooTools</a>这个JS框架，它使得我们很享受前端开发过程。 另外，我们把图片处理过程从<a href="http://www.php.net/">PHP</a>进程里独立出来变成一个服务。这个服务基于<a href="http://nginx.org/en/">nginx</a>，但是是作为<a href="http://nginx.org/en/">nginx</a>的一个模块而开放REST API。</p>
<p>
	<a href="http://www.45eggs.com/upload/2010/06/sharding1.png"><img alt="sharding1.png" class="mt-image-none" height="145" src="http://www.45eggs.com/assets_c/2010/06/sharding1-thumb-600x145-224.png" style="" width="600" /></a></p>
]]>
        <![CDATA[<p>
	由于<a href="http://www.php.net/">PHP</a>的单线程模型，我们把耗时较久的运算和I/O操作从HTTP请求周期中分离出来， 交给由<a href="http://www.python.org/">Python</a>实现的任务进程来完成，以保证请求响应速度。这些任务主要包括：邮件发送、数据索引、数据聚合和好友动态推送（稍候会有介绍）等等。通常这些任务由用户触发，并且，用户的一个行为可能会触发多种任务的执行。 比如，用户上传了一张新的照片，我们需要更新索引，也需要向他的朋友推送一条新的动态。<a href="http://www.php.net/">PHP</a>通过消息队列（我们用的是<a href="http://www.rabbitmq.com/">RabbitMQ</a>）来触发任务执行。</p>
<p>
	<a href="http://www.45eggs.com/upload/2010/06/sharding2.png"><img alt="PHP和Python的协作" class="mt-image-none" height="163" src="http://www.45eggs.com/assets_c/2010/06/sharding2-thumb-600x163-226.png" style="" width="600" /></a></p>
<p>
	数据库一向是网站架构中最具挑战性的，瓶颈通常出现在这里。又拍网的照片数据量很大，数据库也几度出现严重的压力问题。 因此，这里我主要介绍一下又拍网在分库设计这方面的一些尝试。</p>
<p>
	<span style="font-size:16px;"><strong>分库设计</strong></span></p>
<p>
	和很多使用MySQL的2.0站点一样，又拍网的MySQL集群经历了从最初的一个主库一个从库、到一个主库多个从库、 然后到多个主库多个从库的一个发展过程。</p>
<p>
	<a href="http://www.45eggs.com/upload/2010/06/sharding3.png"><img alt="sharding3.png" class="mt-image-none" height="165" src="http://www.45eggs.com/assets_c/2010/06/sharding3-thumb-600x165-228.png" style="" width="600" /></a></p>
<p>
	最初是由一台主库和一台从库组成，当时从库只用作备份和容灾，当主库出现故障时，从库就手动变成主库，一般情况下，从库不作读写操作（同步除外）。随着压力的增加，我们加上了memcached，当时只用其缓存单行数据。 但是，单行数据的缓存并不能很好地解决压力问题，因为单行数据的查询通常很快。所以我们把一些实时性要求不高的Query放到从库去执行。后面又通过添加多个从库来分流查询压力，不过随着数据量的增加，主库的写压力也越来越大。</p>
<p>
	在参考了一些相关产品和其它网站的做法后，我们决定进行数据库拆分。也就是将数据存放到不同的数据库服务器中，一般可以按两个纬度来拆分数据:</p>
<p>
	<strong>垂直拆分</strong>：是指按功能模块拆分，比如可以将群组相关表和照片相关表存放在不同的数据库中，这种方式多个数据库之间的表结构不同。</p>
<p>
	<strong>水平拆分</strong>：而水平拆分是将同一个表的数据进行分块保存到不同的数据库中，这些数据库中的表结构完全相同。</p>
<p>
	<span style="font-size:16px;"><strong>拆分方式</strong></span></p>
<p>
	一般都会先进行垂直拆分，因为这种方式拆分方式实现起来比较简单，根据表名访问不同的数据库就可以了。但是垂直拆分方式并不能彻底解决所有压力问题，另外，也要看应用类型是否合适这种拆分方式。如果合适的话，也能很好的起到分散数据库压力的作用。比如对于豆瓣我觉得比较适合采用垂直拆分， 因为豆瓣的各核心业务/模块（书籍、电影、音乐）相对独立，数据的增加速度也比较平稳。不同的是，又拍网的核心业务对象是用户上传的照片，而照片数据的增加速度随着用户量的增加越来越快。压力基本上都在照片表上，显然垂直拆分并不能从根本上解决我们的问题，所以，我们采用水平拆分的方式。</p>
<p>
	<span style="font-size:16px;"><strong>拆分规则</strong></span></p>
<p>
	水平拆分实现起来相对复杂，我们要先确定一个拆分规则，也就是按什么条件将数据进行切分。 一般2.0网站都以用户为中心，数据基本都跟随用户，比如用户的照片、朋友和评论等等。因此一个比较自然的选择是根据用户来切分。每个用户都对应一个数据库，访问某个用户的数据时， 我们要先确定他/她所对应的数据库，然后连接到该数据库进行实际的数据读写。</p>
<p>
	那么，怎么样对应用户和数据库呢？我们有这些选择：</p>
<p>
	<strong>按算法对应</strong></p>
<p>
	最简单的算法是按用户ID的奇偶性来对应，将奇数ID的用户对应到数据库A，而偶数ID的用户则对应到数据库B。这个方法的最大问题是，只能分成两个库。另一个算法是按用户ID所在区间对应，比如ID在0-10000之间的用户对应到数据库A， ID在10000-20000这个范围的对应到数据库B，以此类推。按算法分实现起来比较方便，也比较高效，但是不能满足后续的伸缩性要求，如果需要增加数据库节点，必需调整算法或移动很大的数据集， 比较难做到在不停止服务的前提下进行扩充数据库节点。</p>
<p>
	<strong>按索引/映射表对应</strong></p>
<p>
	这种方法是指建立一个索引表，保存每个用户的ID和数据库ID的对应关系，每次读写用户数据时先从这个表获取对应数据库。新用户注册后，在所有可用的数据库中随机挑选一个为其建立索引。这种方法比较灵活，有很好的伸缩性。一个缺点是增加了一次数据库访问，所以性能上没有按算法对应好。</p>
<p>
	比较之后，我们采用的是索引表的方式，我们愿意为其灵活性损失一些性能，更何况我们还有memcached， 因为索引数据基本不会改变的缘故，缓存命中率非常高。所以能很大程度上减少了性能损失。</p>
<p>
	<a href="http://www.45eggs.com/upload/2010/06/sharding4.png"><img alt="数据访问过程" class="mt-image-none" height="390" src="http://www.45eggs.com/assets_c/2010/06/sharding4-thumb-600x390-230.png" style="" width="600" /></a></p>
<p>
	索引表的方式能够比较方便地添加数据库节点，在增加节点时，只要将其添加到可用数据库列表里即可。 当然如果需要平衡各个节点的压力的话，还是需要进行数据的迁移，但是这个时候的迁移是少量的，可以逐步进行。要迁移用户A的数据，首先要将其状态置为<strong>迁移数据中</strong>，这个状态的用户不能进行写操作，并在页面上进行提示。 然后将用户A的数据全部复制到新增加的节点上后，更新映射表，然后将用户A的状态置为<strong>正常</strong>，最后将原来对应的数据库上的数据删除。这个过程通常会在临晨进行，所以，所以很少会有用户碰到<strong>迁移数据中</strong>的情况。</p>
<p>
	当然，有些数据是不属于某个用户的，比如系统消息、配置等等，我们把这些数据保存在一个全局库中。</p>
<p>
	<span style="font-size:16px;"><strong>问题</strong></span></p>
<p>
	分库会给你在应用的开发和部署上都带来很多麻烦。</p>
<p>
	<strong>不能执行跨库的关联查询</strong></p>
<p>
	如果我们需要查询的数据分布于不同的数据库，我们没办法通过JOIN的方式查询获得。比如要获得好友的最新照片，你不能保证所有好友的数据都在同一个数据库里。一个解决办法是通过多次查询，再进行聚合的方式。我们需要尽量避免类似的需求。有些需求可以通过保存多份数据来解决，比如User-A和 User-B的数据库分别是DB-1和DB-2， 当User-A评论了User-B的照片时，我们会同时在DB-1和DB-2中保存这条评论信息，我们首先在DB-2中的photo_comments表中插入一条新的记录，然后在DB-1中的user_comments表中插入一条新的记录。这两个表的结构如下图所示。这样我们可以通过查询 photo_comments表得到User-B的某张照片的所有评论， 也可以通过查询user_comments表获得User-A的所有评论。另外可以考虑使用全文检索工具来解决某些需求， 我们使用Solr来提供全站标签检索和照片搜索服务。</p>
<p>
	<a href="http://www.45eggs.com/upload/2010/06/sharding5.png"><img alt="评论表结构" class="mt-image-none" height="189" src="http://www.45eggs.com/assets_c/2010/06/sharding5-thumb-600x189-232.png" style="" width="600" /></a></p>
<p>
	<strong>不能保证数据的一致/完整性</strong></p>
<p>
	跨库的数据没有外键约束，也没有事务保证。比如上面的评论照片的例子， 很可能出现成功插入photo_comments表，但是插入user_comments表时却出错了。一个办法是在两个库上都开启事务，然后先插入 photo_comments，再插入user_comments， 然后提交两个事务。这个办法也不能完全保证这个操作的原子性。</p>
<p>
	<strong>所有查询必须提供数据库线索</strong></p>
<p>
	比如要查看一张照片，仅凭一个照片ID是不够的，还必须提供上传这张照片的用户的ID（也就是数据库线索），才能找到它实际的存放位置。因此，我们必须重新设计很多URL地址，而有些老的地址我们又必须保证其仍然有效。我们把照片地址改成/photos/{username}/{photo_id} /的形式，然后对于系统升级前上传的照片ID， 我们又增加一张映射表，保存photo_id和user_id的对应关系。当访问老的照片地址时，我们通过查询这张表获得用户信息, 然后再重定向到新的地址。</p>
<p>
	<strong>自增ID</strong></p>
<p>
	如果要在节点数据库上使用自增字段，那么我们就不能保证全局唯一。这倒不是很严重的问题，但是当节点之间的数据发生关系时，就会使得问题变得比较麻烦。我们可以再来看看上面提到的评论的例子。如果photo_comments表中的comment_id的自增字段，当我们在DB- 2.photo_comments表插入新的评论时， 得到一个新的comment_id，假如值为101，而User-A的ID为1，那么我们还需要在DB-1.user_comments表中插入(1, 101 ...)。 User-A是个很活跃的用户，他又评论了User-C的照片，而User-C的数据库是DB-3。 很巧的是这条新评论的ID也是101，这种情况很用可能发生。那么我们又在DB-1.user_comments表中插入一行像这样(1, 101 ...)的数据。 那么我们要怎么设置user_comments表的主键呢（标识一行数据）？可以不设啊，不幸的是有的时候（框架、缓存等原因）必需设置。那么可以以 user_id、 comment_id和photo_id为组合主键，但是photo_id也有可能一样（的确很巧）。看来只能再加上photo_owner_id了， 但是这个结果又让我们实在有点无法接受，太复杂的组合键在写入时会带来一定的性能影响，这样的自然键看起来也很不自然。所以，我们放弃了在节点上使用自增字段，想办法让这些ID变成全局唯一。为此增加了一个专门用来生成ID的数据库，这个库中的表结构都很简单，只有一个自增字段id。 当我们要插入新的评论时，我们先在ID库的photo_comments表里插入一条空的记录，以获得一个唯一的评论ID。 当然这些逻辑都已经封装在我们的框架里了，对于开发人员是透明的。 为什么不用其它方案呢，比如一些支持incr操作的Key-Value数据库。我们还是比较放心把数据放在MySQL里。 另外，我们会定期清理ID库的数据，以保证获取新ID的效率。</p>
<p>
	<span style="font-size:16px;"><strong>实现</strong></span></p>
<p>
	我们称前面提到的一个数据库节点为Shard，一个Shard由两个台物理服务器组成， 我们称它们为Node-A和Node-B，Node-A和Node-B之间是配置成Master-Master相互复制的。 虽然是Master-Master的部署方式，但是同一时间我们还是只使用其中一个，原因是复制的延迟问题， 当然在Web应用里，我们可以在用户会话里放置一个A或B来保证同一用户一次会话里只访问一个数据库， 这样可以避免一些延迟问题。但是我们的Python任务是没有任何状态的，不能保证和PHP应用读写相同的数据库。那么为什么不配置成Master-Slave呢？我们觉得只用一台太浪费了，所以我们在每台服务器上都创建多个逻辑数据库。 如下图所示，在Node-A和Node-B上我们都建立了shard_001和shard_002两个逻辑数据库， Node-A上的shard_001和Node-B上的shard_001组成一个Shard，而同一时间只有一个逻辑数据库处于Active状态。 这个时候如果需要访问Shard-001的数据时，我们连接的是Node-A上的shard_001， 而访问Shard-002的数据则是连接Node-B上的shard_002。以这种交叉的方式将压力分散到每台物理服务器上。 以Master-Master方式部署的另一个好处是，我们可以不停止服务的情况下进行表结构升级， 升级前先停止复制，升级Inactive的库，然后升级应用，再将已经升级好的数据库切换成Active状态， 原来的Active数据库切换成Inactive状态，然后升级它的表结构，最后恢复复制。 当然这个步骤不一定适合所有升级过程，如果表结构的更改会导致数据复制失败，那么还是需要停止服务再升级的。</p>
<p>
	<a href="http://www.45eggs.com/upload/2010/06/sharding6.png"><img alt="数据库布局" class="mt-image-none" height="198" src="http://www.45eggs.com/assets_c/2010/06/sharding6-thumb-600x198-234.png" style="" width="600" /></a></p>
<p>
	前面提到过添加服务器时，为了保证负载的平衡，我们需要迁移一部分数据到新的服务器上。为了避免短期内迁移的必要，我们在实际部署的时候，每台机器上部署了8个逻辑数据库， 添加服务器后，我们只要将这些逻辑数据库迁移到新服务器就可以了。最好是每次添加一倍的服务器， 然后将每台的1/2逻辑数据迁移到一台新服务器上，这样能很好的平衡负载。当然，最后到了每台上只有一个逻辑库时，迁移就无法避免了，不过那应该是比较久远的事情了。</p>
<p>
	我们把分库逻辑都封装在我们的PHP框架里了，开发人员基本上不需要被这些繁琐的事情困扰。下面是使用我们的框架进行照片数据的读写的一些例子:</p>
<pre class="prettyprint"><code>&lt;?php
    $Photos = new ShardedDBTable(&#39;Photos&#39;, &#39;yp_photos&#39;, &#39;user_id&#39;, array(
                &#39;photo_id&#39;    =&gt; array(&#39;type&#39; =&gt; &#39;long&#39;, &#39;primary&#39; =&gt; true, &#39;global_auto_increment&#39; =&gt; true),
                &#39;user_id&#39;     =&gt; array(&#39;type&#39; =&gt; &#39;long&#39;),
                &#39;title&#39;       =&gt; array(&#39;type&#39; =&gt; &#39;string&#39;),
                &#39;posted_date&#39; =&gt; array(&#39;type&#39; =&gt; &#39;date&#39;),
            ));
    $photo = $Photos-&gt;new_object(array(&#39;user_id&#39; =&gt; 1, &#39;title&#39; =&gt; &#39;Workforme&#39;));
    $photo-&gt;insert();

    // 加载ID为10001的照片，注意第一个参数为用户ID
    $photo = $Photos-&gt;load(1, 10001);

    // 更改照片属性
    $photo-&gt;title = &#39;Database Sharding&#39;;
    $photo-&gt;update();

    // 删除照片
    $photo-&gt;delete();

    // 获取ID为1的用户在2010-06-01之后上传的照片
    $photos = $Photos-&gt;fetch(array(&#39;user_id&#39; =&gt; 1, &#39;posted_date__gt&#39; =&gt; &#39;2010-06-01&#39;));
?&gt;</code></pre>
<p>
	首先要定义一个ShardedDBTable对象，所有的API都是通过这个对象开放。第一个参数是对象类型名称， 如果这个名称已经存在，那么将返回之前定义的对象。你也可以通过get_table(&#39;Photos&#39;)这个函数来获取之前定义的Table对象。 第二个参数是对应的数据库表名，而第三个参数是数据库线索字段，你会发现在后面的所有API中全部需要指定这个字段的值。 第四个参数是字段定义，其中photo_id字段的global_auto_increment属性被置为true，这就是前面所说的全局自增ID， 只要指定了这个属性，框架会处理好ID的事情。</p>
<p>
	如果我们要访问全局库中的数据，我们需要定义一个DBTable对象。</p>
<pre class="prettyprint"><code>&lt;?php
    $Users = new DBTable(&#39;Users&#39;, &#39;yp_users&#39;, array(
                &#39;user_id&#39;  =&gt; array(&#39;type&#39; =&gt; &#39;long&#39;, &#39;primary&#39; =&gt; true, &#39;auto_increment&#39; =&gt; true),
                &#39;username&#39; =&gt; array(&#39;type&#39; =&gt; &#39;string&#39;),
            ));
?&gt;</code></pre>
<p>
	DBTable是ShardedDBTable的父类，除了定义时参数有些不同（DBTable不需要指定数据库线索字段），它们提供一样的 API。</p>
<p>
	<span style="font-size:16px;"><strong>缓存</strong></span></p>
<p>
	我们的框架提供了缓存功能，对开发人员是透明的。</p>
<pre class="prettyprint"><code>&lt;?php
    $photo = $Photos-&gt;load(1, 10001);
?&gt;</code></pre>
<p>
	比如上面的方法调用，框架先尝试以Photos-1-10001为Key在缓存中查找，未找到的话再执行数据库查询并放入缓存。当更改照片属性或删除照片时，框架负责从缓存中删除该照片。这种单个对象的缓存实现起来比较简单。稍微麻烦的是像下面这样的列表查询结果的缓存。</p>
<pre class="prettyprint"><code>&lt;?php
    $photos = $Photos-&gt;fetch(array(&#39;user_id&#39; =&gt; 1, &#39;posted_date__gt&#39; =&gt; &#39;2010-06-01&#39;));
?&gt;</code></pre>
<p>
	我们把这个查询分成两步，第一步先查出符合条件的照片ID，然后再根据照片ID分别查找具体的照片信息。 这么做可以更好的利用缓存。第一个查询的缓存Key为Photos-list-{shard_key}-{md5(查询条件SQL语句)}， Value是照片ID列表（逗号间隔）。其中shard_key为user_id的值1。目前来看，列表缓存也不麻烦。 但是如果用户修改了某张照片的上传时间呢，这个时候缓存中的数据就不一定符合条件了。所以，我们需要一个机制来保证我们不会从缓存中得到过期的列表数据。我们为每张表设置了一个revision，当该表的数据发生变化时（调用insert/update/delete方法）， 我们就更新它的revision，所以我们把列表的缓存Key改为Photos-list-{shard_key}-{md5(查询条件SQL语句)}-{revision}， 这样我们就不会再得到过期列表了。</p>
<p>
	revision信息也是存放在缓存里的，Key为Photos-revision。这样做看起来不错，但是好像列表缓存的利用率不会太高。因为我们是以整个数据类型的revision为缓存Key的后缀，显然这个revision更新的非常频繁，任何一个用户修改或上传了照片都会导致它的更新，哪怕那个用户根本不在我们要查询的Shard里。要隔离用户的动作对其他用户的影响，我们可以通过缩小revision的作用范围来达到这个目的。 所以revision的缓存Key变成Photos-{shard_key}-revision，这样的话当ID为1的用户修改了他的照片信息时， 只会更新Photos-1-revision这个Key所对应的revision。</p>
<p>
	因为全局库没有shard_key，所以修改了全局库中的表的一行数据，还是会导致整个表的缓存失效。 但是大部分情况下，数据都是有区域范围的，比如我们的帮助论坛的主题帖子， 帖子属于主题。修改了其中一个主题的一个帖子，没必要使所有主题的帖子缓存都失效。 所以我们在DBTable上增加了一个叫isolate_key的属性。</p>
<pre class="prettyprint"><code>&lt;?php
$GLOBALS[&#39;Posts&#39;] = new DBTable(&#39;Posts&#39;, &#39;yp_posts&#39;, array(
        &#39;topic_id&#39;    =&gt; array(&#39;type&#39; =&gt; &#39;long&#39;, &#39;primary&#39; =&gt; true),
        &#39;post_id&#39;     =&gt; array(&#39;type&#39; =&gt; &#39;long&#39;, &#39;primary&#39; =&gt; true, &#39;auto_increment&#39; =&gt; true),
        &#39;author_id&#39;   =&gt; array(&#39;type&#39; =&gt; &#39;long&#39;),
        &#39;content&#39;     =&gt; array(&#39;type&#39; =&gt; &#39;string&#39;),
        &#39;posted_at&#39;   =&gt; array(&#39;type&#39; =&gt; &#39;datetime&#39;),
        &#39;modified_at&#39; =&gt; array(&#39;type&#39; =&gt; &#39;datetime&#39;),
        &#39;modified_by&#39; =&gt; array(&#39;type&#39; =&gt; &#39;long&#39;),
    ), &#39;topic_id&#39;);
?&gt;</code></pre>
<p>
	注意构造函数的最后一个参数topic_id就是指以字段topic_id作为isolate_key，它的作用和shard_key一样用于隔离 revision的作用范围。</p>
<p>
	ShardedDBTable继承自DBTable，所以也可以指定isolate_key。 ShardedDBTable指定了isolate_key的话，能够更大幅度缩小revision的作用范围。 比如相册和照片的关联表yp_album_photos，当用户往他的其中一个相册里添加了新的照片时， 会导致其它相册的照片列表缓存也失效。如果我指定这张表的isolate_key为album_id的话， 我们就把这种影响限制在了本相册内。</p>
<p>
	我们的缓存分为两级，第一级只是一个PHP数组，有效范围是Request。而第二级是memcached。这么做的原因是，很多数据在一个 Request周期内需要加载多次，这样可以减少memcached的网络请求。另外我们的框架也会尽可能的发送memcached的gets命令来获取数据， 从而减少网络请求。</p>
<p>
	<span style="font-size:16px;"><strong>总结</strong></span></p>
<p>
	这个架构使得我们在很长一段时间内都不必再为数据库压力所困扰。我们的设计很多地方参考了netlog和flickr的实现，因此非常感谢他们将一些实现细节发布出来。</p>
<p>
	<strong>关于作者</strong>：</p>
<p>
	周兆兆（Zola,不是你熟知的那个），又拍网架构师。6年IT从业经验，不太专注于某项技术，对很多技术都感兴趣。</p>
<p>
	本文转载自：<a href="http://www.infoq.com/cn/articles/yupoo-partition-database">InfoQ</a></p>
]]>
    </content>
</entry>

<entry>
    <title>设计从整理开始，附佐藤可士和整理术图例（转）</title>
    <link rel="alternate" type="text/html" href="http://www.45eggs.com/interaction/2010/design-reaching-the-essentials.html" />
    <id>tag:www.45eggs.com,2010://3.562</id>

    <published>2010-06-12T07:39:28Z</published>
    <updated>2010-06-12T08:06:13Z</updated>

    <summary> 整理，一个似乎和设计关系不大的行为，与设计师的创新精神相比，她总给人较为消极的印象。而且很多设计师也认为，整理纯粹是体力劳动的事情，设计则是与之相反需依靠脑力完成的创意工作。 事实绝非如此，通过整理，我们能找到事物的本质，发现全新的观点，看到一些深藏于表面的事物。通过整理，我们视野里问题会变得越来越清晰，并且获得许多积极地发现。...</summary>
    <author>
        <name>Ethan Jiang</name>
        <uri>http://www.45eggs.com</uri>
    </author>
    
        <category term="界面与交互设计" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="整理" label="整理" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="设计" label="设计" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="需求" label="需求" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="en-us" xml:base="http://www.45eggs.com/">
        <![CDATA[<p>
	<a href="http://www.45eggs.com/upload/2010/06/arrange-feature-banner.jpg"><img alt="arrange-feature-banner.jpg" class="mt-image-none" height="205" src="http://www.45eggs.com/assets_c/2010/06/arrange-feature-banner-thumb-600x205-206.jpg" style="" width="600" /></a></p>
<p>
	整理，一个似乎和设计关系不大的行为，与设计师的创新精神相比，她总给人较为消极的印象。而且很多设计师也认为，整理纯粹是体力劳动的事情，设计则是与之相反需依靠脑力完成的创意工作。</p>
<p>
	事实绝非如此，通过整理，我们能找到事物的本质，发现全新的观点，看到一些深藏于表面的事物。通过整理，我们视野里问题会变得越来越清晰，并且获得许多积极地发现。</p>
]]>
        <![CDATA[<p>
	回到我的现实工作中来，交互设计从来都不是从零开始的，只有在认清用户最终目的，应用根本任务的基础上，才能找到问题的关键点，切中要害进行方案的设计创新。</p>
<p>
	以前我也对整理有些不屑，但在看完佐藤可士和的《超级整理术》后回过头看自己做过的项目，发现&ldquo;整理&rdquo;和&ldquo;设计&rdquo;在解决问题时的思路是一致的，理清杂乱线索&rarr;找到问题源头&rarr;提出切实方案。当设计方案切中问题根本，就能让利益相关者满意，有效地推进方案的实现。所以在这里，结合一些案例和大家分享一下整理术的观点（阿年在北京给我们讲品牌设计时也谈到过类似观点）。整理术分以下三个步骤：</p>
<ul>
	<li>
		掌握状况</li>
	<li>
		导入观点</li>
	<li>
		设定课题</li>
</ul>
<p>
	<strong>掌握状况（沟通需求）</strong></p>
<p>
	<strong>整理信息时不要急于去表现信息<br />
	提出假说以便正确理解信息</strong></p>
<p>
	这是整理的第一步。产品经理带着一大堆需求找到我们提供解决这些需求的设计方案，他们经常会把自己准备好的方案或是纸面原型告诉交互设计师，让我们按着这个思路做下去；设计师也经常在需求沟通阶段，忍不住用经验方案去描述问题。心急吃不了热豆腐，无论是产品经理还是交互设计师，这个阶段最重要的是坐下来整理对方的思绪，将概念性的想法落实到看得见的文字信息上来，即思绪信息化过程。任何方案都不适合在这个阶段去交流，因为还有大量的信息没有处理。我们想传达给用户的信息堆积如山，样样都想实现，但在移动互联网设备上，用户不可能如我们所愿，理解并接受所有内容，所以必须整理所有的问题，以便接下来排列问题优先级，找出问题本质。</p>
<p>
	以手机信息应用为例（图1），如果需求沟通阶段产品经理一上来就提出了他概念中的原型并展开讨论，这种先入为主的概念势必会影响双方把视线聚焦到导航方式上，忽略对问题本质的深究，到底用户使用信息这个应用是做什么？应用的核心任务、核心内容是什么？</p>
<p>
	<img alt="arrange-feature-001.jpg" class="mt-image-none" height="371" src="http://www.45eggs.com/upload/2010/06/arrange-feature-001.jpg" style="" width="283" /><br />
	图1. 需求沟通阶段不要试图用图说话，以免失去发现问题本质的机会</p>
<p>
	在将思绪信息化时，还要善于提出假说去确认产品经理的真实想法。这是为了提高沟通精确度，以免交互设计师在信息表达时误解了对方的真实意图。在大概理解对方的想法后，将想法转化为语言，反问对方&ldquo;你的意思是这样吗？&rdquo;如果假设错误，此时再给予反驳的内容改变整理方向，尝试其他假说。通过这样不断地反复，产品经理的真实想法就会越来越清晰，双方对产品的理解就能高度一致。</p>
<p>
	<strong>导入观点（寻找发力点）</strong></p>
<p>
	<strong>排列信息的优先级<br />
	提出围绕问题本质的观点</strong></p>
<p>
	在掌握了所有信息后，就要开始排定信息的优先级，理清信息之间的因果关系。在掌握现状的阶段，各种信息呈现混乱不清的堆积状态，设计师需要将这些信息调换位置，设定优先级，舍弃冗余信息，找出信息的内在关系，整理成具有整合性的信息。这个阶段最重要，也是最难的，因为导入观点是为了找出问题的本质，如果观点没有触及到核心，那么方案就势必会有破绽。</p>
<p>
	还以信息应用为例（图2），方案A为传统信息应用首页设计，如果我们新提出的观点仅是更直接地显示信息内容，方便用户在各信箱之间的切换，那么方案B是满足条件的。但实际上这还不是信息应用中用户最关心的事情。我们导入的这个观点没有切中问题的要害，所以基于此观点的方案也没有解决用户的核心问题，虽然在使用性上较之于方案A已经有所改善。那么如何导入最准确的观点呢？这不是靠文字能立刻学会的，需在在实际项目中不断训练对信息优先级排序，积累足够的经验，才能准确找出问题的本质。这里佐藤可士和给出了三条建议：从产品之外客观检视、舍弃自以为是、转换观点，从各角度观察。</p>
<p>
	<img alt="arrange-feature-002.jpg" class="mt-image-none" height="225" src="http://www.45eggs.com/upload/2010/06/arrange-feature-002.jpg" style="" width="389" /><br />
	图2. 两类信息应用方案</p>
<p>
	<strong>设定课题（设计方案）</strong></p>
<p>
	在导入观点的过程对信息进行准确的优先级排序，找出了问题的核心，就能确定前进的方向，开始设计实际的方案以解决问题。其实能够认清前进的方向，项目就完成了一半。</p>
<div>
	还以信息应用为例（图3），用户最关心的是信息交流，所以内容很重要，并且信息条目的分类应该是以联系人为中心去组织，因为这符合信息的自然属性（信息交流是有上下文关系的）。Android和iPhone在信息应用上都是从这个观点出发去设计，不过，我认为还可以更进一步考虑，在 Android信息对话页中，用户不仅仅关心信息内容，对信息的后续操作也同样重要，因为信息呈现是为了更好地交流。现有方案中只有回复编辑框，但针对某条信息的操作还需要长按列表项，所以可在最近的那条信息底部增加快捷键（转发、呼叫、删除等），并保证页面内始终有一条信息项有快捷操作键。</div>
<div>
	<img alt="arrange-feature-0031.jpg" class="mt-image-none" height="422" src="http://www.45eggs.com/upload/2010/06/arrange-feature-0031.jpg" style="" width="275" /></div>
<p>
	<strong>总结</strong></p>
<p>
	我们不屑于整理，创意将不屑于我们。设计从整理开始，她能开启创意灵感之门，帮助我们找到问题的本质，认清前进的方向，选择一条合适的道路走向目的地。如果你还没开始整理，就从你办公桌开始吧，整理一下，你会有新的发现！</p>
<p>
	设计从整理开始，也仅仅只是开始！</p>
<p>
	附录：佐藤可士和整理术图例(下图由cdc基于原图绘制，对某些信息表达有所修改)<br />
	<a href="http://www.45eggs.com/upload/2010/06/arrange-feature-0042.jpg"><img alt="arrange-feature-0042.jpg" class="mt-image-none" height="429" src="http://www.45eggs.com/assets_c/2010/06/arrange-feature-0042-thumb-600x429-208.jpg" style="" width="600" /></a></p>
<ol>
	<li>
		为了找出问题本质，首先要替顾客问诊。如□○△般列出取得的信息（b&rarr;c）<br />
		假使信息仅存在客户脑里，为了将原本看不见的事物可视化，就必须从前一个步骤，也就是将思绪信息化开始（a&rarr;b）</li>
	<li>
		相互对调各类信息，舍弃多余信息排除含糊暧昧的部分舍弃无谓的小□○△和重复的内容（d）。接着再倒入观点，理清信息的因果关系（d&rarr;e）。如此一来就能认清问题本质△。</li>
	<li>
		将找出的问题本质△设定为课题，到处解决方法（f&rarr;g）。如果本质是正面的，就琢磨使之发亮、重新组合，强调原本任其埋没的优势；如果本质是负面的，则进行反向思考，将负面扭转为正面，找出魅力所在。</li>
</ol>
<p>
	转自：<a href="http://cdc.tencent.com/?p=2658">Tencent CDC Blog</a></p>
<p>
	Ethan：之前的整理术图例，有另外一个版本，是CDC最早从<a href="http://www.gtdstudy.com/?p=1029">GTDStudy</a>转载的。</p>
<p>
	<a href="http://www.45eggs.com/upload/2010/06/3961812089_bc3f707df9.png"><img alt="3961812089_bc3f707df9.png" class="mt-image-none" height="460" src="http://www.45eggs.com/assets_c/2010/06/3961812089_bc3f707df9-thumb-600x460-213.png" style="" width="600" /></a></p>
]]>
    </content>
</entry>

<entry>
    <title>苹果发布 Safari 5 浏览器</title>
    <link rel="alternate" type="text/html" href="http://www.45eggs.com/software/2010/safari-5-released.html" />
    <id>tag:www.45eggs.com,2010://3.558</id>

    <published>2010-06-11T05:11:39Z</published>
    <updated>2010-06-11T05:33:13Z</updated>

    <summary> 虽然今天凌晨的发布会完全聚焦于iPhone 4， 但苹果还是在会后通过官方新闻稿的形式发布了新款网页浏览器Safari 5，面向Mac和Windows用户。和iPhone内置浏览器一样，Safari 5也增加了默认搜索引擎选项，用户可选Google、雅虎和微软Bing作为默认搜索引擎。...</summary>
    <author>
        <name>Ethan Jiang</name>
        <uri>http://www.45eggs.com</uri>
    </author>
    
        <category term="软件试玩" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="apple" label="Apple" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="safari" label="Safari" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="en-us" xml:base="http://www.45eggs.com/">
        <![CDATA[<p>
	<a href="http://www.45eggs.com/upload/2010/06/20100611132600555.png"><img alt="20100611132600555.png" class="mt-image-none" height="384" src="http://www.45eggs.com/assets_c/2010/06/20100611132600555-thumb-600x384-202.png" style="" width="600" /></a></p>
<p>
	虽然今天凌晨的发布会完全聚焦于iPhone 4， 但苹果还是在会后通过官方新闻稿的形式发布了新款网页浏览器Safari 5，面向Mac和Windows用户。和iPhone内置浏览器一样，Safari 5也增加了默认搜索引擎选项，用户可选Google、雅虎和微软Bing作为默认搜索引擎。</p>
]]>
        <![CDATA[<p>
	Safari 5的主要更新包括：</p>
<ul>
	<li>
		Safari阅读器：点按新的&ldquo;阅读器&rdquo;图标可在一个简单直观的页面中查看网络文章。</li>
	<li>
		&nbsp;增强性能：Safari 5执行JavaScript的速度比Safari 4快 25%。更出色的页面高速缓存和DNS预取加快了浏览速度。</li>
	<li>
		Bing搜索选项：Safari的搜索栏在原有的Google 搜索和Yahoo!搜索基础之上新增了Bing搜索选项。</li>
	<li>
		增强的HTML5支持：Safari支持众多新的HTML5功能，包括Geolocation、全屏幕 HTML5视频、HTML5视频隐藏式字幕、新的分节元素（article、aside、footer、header、hgroup、nav和 section）、HTML5 AJAX 历史记录、EventSource、WebSocket、HTML5可拖移属性、HTML5表格验证以及HTML5 Ruby。</li>
	<li>
		Safari开发工具：&ldquo;Web检查器&rdquo;中新的&ldquo;时间线面板&rdquo;可显示Safari如何与网站进行交互，并标 识出可供优化的区域。新的键盘快捷键使面板之间的切换更快。</li>
</ul>
<p>
	其他改进的方面包括：</p>
<ul>
	<li>
		更加智能的地址栏：智能地址栏现在可以根据&ldquo;历史记录&rdquo;和&ldquo;书签&rdquo;中的网页标题以及 URL 的任意部分来匹配输入的文本。</li>
	<li>
		标签设置：自动在标签中打开新的网页，而不是在另外的窗口中打开。</li>
	<li>
		Windows版支持GPU硬件加速：借助电脑的图形处理器在PC及Mac上顺畅显示媒体和效果。</li>
	<li>
		带日期的搜索历史记录：&ldquo;完整历史记录搜索&rdquo;中新的日期指示器可显示网页被查看的时间。</li>
	<li>
		Top Sites/历史记录按钮：通过显示在每个视图顶部的新按钮，可以方便地切换Top Sites和&ldquo;完整历史记录搜索&rdquo;。</li>
	<li>
		秘密浏览图标：当开启&ldquo;秘密浏览&rdquo;功能时，&ldquo;秘密&rdquo;图标会显示在&ldquo;智能地址栏&rdquo;中。点按图标可关闭&ldquo;秘密浏 览&rdquo;。</li>
	<li>
		DNS 预取：Safari会查找网页上链接的地址，并能更快地载入这些页面。&nbsp;</li>
	<li>
		增强的页面高速缓存：Safari可以向高速缓存添加更多类型的网页，以便更快地载入它们。</li>
	<li>
		XSS 审查器：Safari可以过滤跨站脚本 (XSS) 攻击中使用的潜在恶意脚本。&nbsp;</li>
	<li>
		增强的JavaScript支持：Safari能让使用JavaScript Object Notation (JSON) 的Web应用程序更快、更安全地运行。</li>
</ul>
<p>
	苹果表示，目前全球使用Safari浏览器的设备已经超过2亿台，包括Mac、PC、iPhone、iPod touch和iPad，而使用其开源引擎WebKit的设备已经超过5亿台。</p>
<p>
	Safari 5下载：</p>
<p>
	<a href="http://www.apple.com/safari/download/">http://www.apple.com/safari/download/</a></p>
<p>
	<a href="http://www.45eggs.com/upload/2010/06/20100611132642040.png"><img alt="20100611132642040.png" class="mt-image-none" height="384" src="http://www.45eggs.com/assets_c/2010/06/20100611132642040-thumb-600x384-204.png" style="" width="600" /></a></p>
]]>
    </content>
</entry>

<entry>
    <title>【IE6的疯狂系列】IE6 BUG大全（转）</title>
    <link rel="alternate" type="text/html" href="http://www.45eggs.com/xhtml-css/2010/ie6-bugs-collection.html" />
    <id>tag:www.45eggs.com,2010://3.560</id>

    <published>2010-06-11T04:58:15Z</published>
    <updated>2010-06-11T06:02:18Z</updated>

    <summary><![CDATA[ 原作者不断地更新中&hellip;&hellip; 【IE6的疯狂之一】IE6中奇数宽高的BUG：http://www.css88.com/archives/1725 【IE6的疯狂之二】IE6中PNG Alpha透明：http://www.css88.com/archives/577 【IE6的疯狂之三】IE6 3像素BUG的实例：http://www.css88.com/archives/117 【IE6的疯狂之四】IE6文字溢出BUG：http://www.css88.com/archives/253 【IE6的疯狂之五】div遮盖select的解决方案：http://www.css88.com/archives/545 【IE6的疯狂之六】li在IE中底部3像素的BUG（增加浮动解决问题）：http://www.css88.com/archives/421 【IE6的疯狂之七】样式中文注释后引发失效：http://www.css88.com/archives/726...]]></summary>
    <author>
        <name>Ethan Jiang</name>
        <uri>http://www.45eggs.com</uri>
    </author>
    
        <category term="XHTML-CSS" scheme="http://www.sixapart.com/ns/types#category" />
    
    
    <content type="html" xml:lang="en-us" xml:base="http://www.45eggs.com/">
        <![CDATA[<p>
	原作者不断地更新中&hellip;&hellip;</p>
<p>
	【IE6的疯狂之一】IE6中奇数宽高的BUG：<a href="http://www.css88.com/archives/1725" target="_blank">http://www.css88.com/archives/1725</a></p>
<p>
	【IE6的疯狂之二】IE6中PNG Alpha透明：<a href="http://www.css88.com/archives/577">http://www.css88.com/archives/577</a></p>
<p>
	【IE6的疯狂之三】IE6 3像素BUG的实例：<a href="http://www.css88.com/archives/117">http://www.css88.com/archives/117</a></p>
<p>
	【IE6的疯狂之四】IE6文字溢出BUG：<a href="http://www.css88.com/archives/253">http://www.css88.com/archives/253</a></p>
<p>
	【IE6的疯狂之五】div遮盖select的解决方案：<a href="http://www.css88.com/archives/545">http://www.css88.com/archives/545</a></p>
<p>
	【IE6的疯狂之六】li在IE中底部3像素的BUG（增加浮动解决问题）：<a href="http://www.css88.com/archives/421">http://www.css88.com/archives/421</a></p>
<p>
	【IE6的疯狂之七】样式中文注释后引发失效：<a href="http://www.css88.com/archives/726">http://www.css88.com/archives/726</a></p>
]]>
        <![CDATA[<p>
	【IE6的疯狂之八】链接伪类（:hover）CSS背景图片有闪动BUG：<a href="http://www.css88.com/archives/744">http://www.css88.com/archives/744</a></p>
<p>
	【IE6的疯狂之九】li在IE中底部空行的BUG：<a href="http://www.css88.com/archives/1111" target="_blank">http://www.css88.com/archives/1111</a></p>
<p>
	【IE6的疯狂之十】父级使用padding后，子元素绝对定位的BUG<a href="http://www.css88.com/archives/1584" target="_blank">http://www.css88.com/archives/1584</a></p>
<p>
	【IE6的疯狂之十一】!important在IE6下的一个BUG：<a href="http://www.css88.com/archives/1716">http://www.css88.com/archives/1716</a></p>
<p>
	【IE6的疯狂之十二】一个display:none引起的3像素的BUG：<a href="http://www.css88.com/archives/1797" target="_blank">http://www.css88.com/archives/1797</a></p>
<p>
	【IE6的疯狂之十三】一个display:none引起的3像素的BUG：<a href="http://www.css88.com/archives/2080" target="_blank">http://www.css88.com/archives/2080</a></p>
<p>
	转自：<a href="http://www.css88.com/archives/579">WEB前端开发</a></p>]]>
    </content>
</entry>

<entry>
    <title>Web界面测试（UI）小结（转）</title>
    <link rel="alternate" type="text/html" href="http://www.45eggs.com/interaction/2010/web-ui-testing.html" />
    <id>tag:www.45eggs.com,2010://3.559</id>

    <published>2010-06-11T04:49:28Z</published>
    <updated>2010-06-11T05:57:46Z</updated>

    <summary> 现在大部分客户对界面的要求非常高，所以对于测试人员来讲，也必须特别注意界面的一些东西。从前几个项目来看，个人认为界面测试的测试点以及应该注意的问题： 界面的线条是否一致，每个界面中线条是否对齐，是否一致。（静态页面没有确认的情况下） 整个系统的界面是否保持一致 界面中是否存在错别字 界面所有的按钮样式是否一致 每个界面是否同原静态页面设计一致（静态页面确认的情况下） 操作是否友好 界面所有的按钮、下拉框是否有响应 界面所有的链接是否正常 界面所有的输入框是否都进行校验（例如：搜索框、字段输入框） 界面所有的列表页标题字是否会折行，标题字是否统一居中等，当然也可以居左，这需要同客户沟通（折行的话影响美观） 界面所有的展示图片是否样式一致 浏览器的兼容性问题，检查页面在不同浏览器下是否会发生异常 每个页面的提示字体的颜色、格式是否统一准确 界面中所有字段后面是否都存在冒号，有冒号，查看是否冒号为统一的中文冒号还是英文冒号。 界面中的提示说明叙述是否太啰嗦，有时候需要能简化尽量简化，并且字体显示格式一致，颜色统一。 在web网站，一般经常是后台控制前台的显示，因此在对后台进行数据添加时，查看前台是否有变化，并且查看界面的数据是否溢出框外。...</summary>
    <author>
        <name>Ethan Jiang</name>
        <uri>http://www.45eggs.com</uri>
    </author>
    
        <category term="界面与交互设计" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="ui设计" label="UI设计" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="测试" label="测试" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="en-us" xml:base="http://www.45eggs.com/">
        <![CDATA[<p>
	现在大部分客户对界面的要求非常高，所以对于测试人员来讲，也必须特别注意界面的一些东西。从前几个项目来看，个人认为界面测试的测试点以及应该注意的问题：</p>
<ol>
	<li>
		界面的线条是否一致，每个界面中线条是否对齐，是否一致。（静态页面没有确认的情况下）</li>
	<li>
		整个系统的界面是否保持一致</li>
	<li>
		界面中是否存在错别字</li>
	<li>
		界面所有的按钮样式是否一致</li>
	<li>
		每个界面是否同原静态页面设计一致（静态页面确认的情况下）</li>
	<li>
		操作是否友好</li>
	<li>
		界面所有的按钮、下拉框是否有响应</li>
	<li>
		界面所有的链接是否正常</li>
	<li>
		界面所有的输入框是否都进行校验（例如：搜索框、字段输入框）</li>
	<li>
		界面所有的列表页标题字是否会折行，标题字是否统一居中等，当然也可以居左，这需要同客户沟通（折行的话影响美观）</li>
	<li>
		界面所有的展示图片是否样式一致</li>
	<li>
		浏览器的兼容性问题，检查页面在不同浏览器下是否会发生异常</li>
	<li>
		每个页面的提示字体的颜色、格式是否统一准确</li>
	<li>
		界面中所有字段后面是否都存在冒号，有冒号，查看是否冒号为统一的中文冒号还是英文冒号。</li>
	<li>
		界面中的提示说明叙述是否太啰嗦，有时候需要能简化尽量简化，并且字体显示格式一致，颜色统一。</li>
	<li>
		在web网站，一般经常是后台控制前台的显示，因此在对后台进行数据添加时，查看前台是否有变化，并且查看界面的数据是否溢出框外。</li>
</ol>
]]>
        <![CDATA[<p>
	当然，我们在进行界面测试时，必须明确UI测试的目的，它是确保用户界面通过测试对象的功能来为用户提供相应的访问或浏览功能。</p>
<p>
	确保用户界面符合公司和行业的标准。</p>
<p>
	通过用户界面测试来核实用户与软件的交互，UI测试的目标在于确保用户界面向用户提供了适当的访问和浏览对象功能的操作，除此之外，UI测试还却表UI功能内部的对象符号预期的要求，并遵循公司和行业的标准。</p>
<p>
	接下来，具体的分析一下界面测试的依据从哪些方面着手。</p>
<p>
	测试目标：</p>
<ol>
	<li>
		窗口与窗口之间、字段与字段之间的浏览，以及各种访问方法（tab键、鼠标移动和快捷键）的使用</li>
	<li>
		窗口的对象和特征（例如：菜单、大小、位置、状态和中心）都符号标准</li>
</ol>
<p>
	测试方法：为每个窗口创建或修改测试，以核实各个应用程序窗口和对象都可正确的进行浏览，并处于正常的对象状态。</p>
<p>
	我们在实际工作当中，针对web应用程序，也就是经常所说的B/S系统，可以从如下方面来进行用户界面测试：</p>
<ol>
	<li>
		导航测试<br />
		导航描述了用户在一个页面内操作的方式，在不同的用户接口控制之间，例如按钮、对话框、列表和窗口等；<br />
		不同的链接页面之间，通过考虑下列问题，可以决定一个web应用系统是否易于导航；导航是否直观？web系统的主要部分是否可通过主页存取?web系统是否需要站点地图、搜索引擎或其他的导航帮助；<br />
		当然，这些同美工以及客户需求有关。我们是根据已经确认的页面进行测试即可。</li>
	<li>
		图形测试<br />
		图形包括图片、动画、边框、颜色、字体、背景、按钮等<br />
		（1）要确保图形有明确的用途，图片或动画不要胡乱的堆在一起，以免浪费传输时间，web应用系统的图片尺寸要尽量地小，并且要能清楚的说明某件事情。一般都链接到某个具体的页面<br />
		（2）验证所有页面字体的风格是否一致<br />
		（3）背景颜色与字体颜色和背景色相搭配<br />
		（4）图片的大小和质量，一般采用jpg或gif压缩，最好能使用图片的大小减小到30k以下<br />
		（5）演示文字回绕是否正确，如果说明文字指向右边的图片，应该确保该图片出现在右边，不要因为使用图片而使窗口和段落排列古怪或者出现骨性。</li>
	<li>
		内容测试<br />
		内容测试用来检验Web应用系统提供信息的正确性、准确性和相关性。信息的正确性是指信息是可靠的还是误传的。信息的相关性是指是否在当前页面可以找到与当前浏览信息相关的信息列表或入口，也就是一般Web站点中的所谓&quot;相关文章列表&quot;。</li>
	<li>
		表格测试<br />
		需要验证表格是否设置正确，用户是否需要向右滚动页面才能看见产品的价格？<br />
		把价格放在左边，产品细节放在右边是否更有效？<br />
		每一栏的宽度是否足够宽，表格里的文字是否都有折行？<br />
		是否因为某一格的内容太多，而将整行的内容拉长？</li>
	<li>
		整体界面测试<br />
		整体界面是指整个Web应用系统的页面结构设计，是给用户的一个整体感。例如：当用户浏览Web应用系统时是否感到舒适，是否凭直觉就知道要找的信息在什么地方？整个Web应用系统的设计风格是否一致？<br />
		对整体界面的测试过程，其实是一个对最终用户进行调查的过程。一般Web应用系统采取在主页上做一个调查问卷的形式，来得到最终用户的反馈信息。</li>
</ol>
<p>
	对所有的用户界面测试来说，都需要有外部人员（与Web应用系统开发没有联系或联系很少的人员）的参与，最好是最终用户的参与。</p>
<p>
	转载自：<a href="http://www.51testing.com/?uid-238033-action-viewspace-itemid-201941">Angelia@51Testing</a></p>
]]>
    </content>
</entry>

<entry>
    <title>提高自己设计水准的9大秘诀（转）</title>
    <link rel="alternate" type="text/html" href="http://www.45eggs.com/interaction/2010/design-improve-9-tips.html" />
    <id>tag:www.45eggs.com,2010://3.561</id>

    <published>2010-06-11T04:35:52Z</published>
    <updated>2010-06-11T06:28:45Z</updated>

    <summary><![CDATA[ 设计是一件富有创造力的活儿，也是一件极需耐性的活儿，所谓十年磨一剑，设计如果没有经过磨砺是不会有深度的。刚好看到这篇文章，对刚接触或者想要接触的朋友应该是有帮助，甚至是对接触一段时间之后的朋友也会有帮助。或许语言上不够精辟，但是精神已经传达到了，于是转载于此，欢迎围观。 1、想 设计师首先必须善于思考，对设计主张自己的想法和理解，这是最重要的。别担心你的想法有多&ldquo;烂&rdquo;，没有人能一下子做好的，但你完全可以做好你的习惯和态度。学会大胆地摸索和尝试自己的想法，懂得借鉴，追求属于自己的创意。但是如果在设计时不动脑筋地套模板，套素材，甚至是盲目模仿和抄袭，那简直是在摧残你的创造力，滋养你的惰性，这样永远无法进步，而且以后想进步也非常困难。...]]></summary>
    <author>
        <name>Ethan Jiang</name>
        <uri>http://www.45eggs.com</uri>
    </author>
    
        <category term="界面与交互设计" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="设计" label="设计" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="en-us" xml:base="http://www.45eggs.com/">
        <![CDATA[<p>
	设计是一件富有创造力的活儿，也是一件极需耐性的活儿，所谓十年磨一剑，设计如果没有经过磨砺是不会有深度的。刚好看到这篇文章，对刚接触或者想要接触的朋友应该是有帮助，甚至是对接触一段时间之后的朋友也会有帮助。或许语言上不够精辟，但是精神已经传达到了，于是转载于此，欢迎围观。</p>
<p>
	<strong>1、想</strong></p>
<p>
	设计师首先必须善于思考，对设计主张自己的想法和理解，这是最重要的。别担心你的想法有多&ldquo;烂&rdquo;，没有人能一下子做好的，但你完全可以做好你的习惯和态度。学会大胆地摸索和尝试自己的想法，懂得借鉴，追求属于自己的创意。但是如果在设计时不动脑筋地套模板，套素材，甚至是盲目模仿和抄袭，那简直是在摧残你的创造力，滋养你的惰性，这样永远无法进步，而且以后想进步也非常困难。</p>
]]>
        <![CDATA[<p>
	<strong>2、看</strong></p>
<p>
	（1）大量欣赏别人的作品，尤其是优秀作品，培养艺术鉴赏能力，这对于提高设计水平是必须的。看的时候不要走马观花，需要结合专业知识边看边想，仔细研究作品中值得学习的地方。但有人会抱怨要看作品自己却没有多少设计类书籍，上网找大量并且是自己需要的设计作品和设计资源又很浪费时间和精力，这里你建议去找汇集网络上所有优秀设计资源的网站，这样可以省下很多时间和精力去提高学习效率。</p>
<p>
	（2）反复地欣赏优秀的作品。温故而知新，设计也是如此。收藏自己认为比较好的作品，过段时间再看看这些作品，往往会比第一次有更大的收获。3，经常看看自己的作品。经常看看自己的过去设计的作品，你就会了解自己水平是否有所提高，同时也会有更多的设计体会。</p>
<p>
	<strong>3、练</strong></p>
<p>
	反复地大量地练习。如果缺乏足够的练习，就算有足够的设计天赋也是无法提高设计水平。只有不断地练习，反复地练习，才能迅速提高设计能力，做得越多，提高得越快，这个是没有什么捷径可走的，必须踏踏实实地来。当然如果练习的时候不思考只会事倍功半，就像学画一样，不光要用笔画，更需要动脑。</p>
<p>
	<strong>4、审</strong></p>
<p>
	自己的作品能打动自己就是好作品吗？其实对自己作品满意并不是件好事。尤其是初学者对设计以及自身能力缺乏足够的认识往往会犯&ldquo;自恋&rdquo;的毛病，过于满意自己的设计，总以为自己设计得很完美，没有比这更好的，却不知自己设计得有多糟糕。相反，当你水平真正到达一定高度的时候，你对自己的设计就会有一个比较客观全面的认识，也就不会轻易满意自己的设计了。因此要学会审问自己，虚心向人求教，就会少走很多弯路。当你对自己的设计感到很满意的时候，记得审问自己，真的有那么好吗？</p>
<p>
	<strong>5、问</strong></p>
<p>
	学会交流，不懂就问。虽然大部分设计师性格都不太外向，但懂得如何与人沟通交流还是每个设计师必须掌握的课程。设计不是闭门造车，设计师不仅需要和客户交流，还需要和同事同学交流，当然也需要利用网络与其他设计师交流，只有善于交流的设计师才能更好更快地提高自己。</p>
<p>
	<strong>6、知</strong></p>
<p>
	（1）设计师要掌握相关的专业理论知识，多看专业理论知识以查漏补缺。同时更需要学习各种各样的知识。拥有丰富的知识，你大脑里的&ldquo;素材&rdquo;就越多，它们都将可能参与到你的设计里，你的设计才会生动饱满，富有思想内涵。所以知名的设计大师们往往都是全才，他们不仅精通设计，更精通其他很多领域。</p>
<p>
	（2）设计师需要懂得体会生活，了解世界。这需要实际调查和切身体会。否则你的设计就会容易脱离生活，失去感染力，因为设计源于生活并服务于生活。同时设计师需要了解世界，以增长更多的见识，保持最新的思想观念。一个思想落后、孤陋寡闻的设计师无论设计经验有多丰富，他的作品总会显得蹩脚和庸俗不堪。</p>
<p>
	当然，要想有丰富的知识和见识都需要你在平时生活中主动去注意和积累。</p>
<p>
	<strong>7、勤</strong></p>
<p>
	设计师并不是一个轻松的职业，需要勤奋自学，优秀设计师大部分都是&ldquo;自学成才&rdquo;。如果平时没有抽时间主动去自我提高的话，那你的设计水平很难提高，甚至不进则退。因此建议在学习或工作之余，多多花时间在设计上，这样才能更迅速提高你的设计水平。</p>
<p>
	<strong>8、德</strong></p>
<p>
	设计师的道德品质不仅会体现在生活中的每个细节，而且还会渗入到设计里，这也许就是对&ldquo;设计为人&rdquo;更深的一种诠释。如果一个设计师思想道德狭隘的话，那么迟早会扼杀掉自己艺术细胞，堵塞自己的艺术之路，因为艺术是从生活中提炼出来的，是人们所追求的真纯善美。设计师应该要拥有广阔的胸襟，才能拥有广阔的设计空间与灵感空间，你的设计之路才会走得更远更通畅。</p>
<p>
	<strong>9、久</strong></p>
<p>
	设计不是一朝一夕就能成功的，只有做久了才能拥有出色的设计水平和宝贵的设计经验。既然选择了设计师这个职业，就要有耐心，努力做得出色。虽然会遇到很多辛酸苦累，困难挫折，但不要退缩与放弃，没有这些，你的设计能力如何成长，你的经验如何获得？所以你需要做的是忘掉它们，朝前看，自信地坚持走下去，你的脚步总有一天会踏上平坦的道路，到那时，成功就在你面前向你招手微笑。</p>
<p>
	原作不可考，如原作者看到此转载文章，欢迎与我联系，以便署上作者姓名及来源。</p>]]>
    </content>
</entry>

</feed>
