Web Application大行其道。Silverlight和Flash始终无法赶上Web应用的脚步，不少框架和库，如jQuery，EXT都有着非常漂亮的设计思路来帮助大家快速开发Web应用，有的甚至不需要写一行HTML代码就能够搭建Web应用。在Web应用普及的今天，HTML该如何才能更好的应对越来越快速的开发呢？其实一些在RIA中的设计思想可以为现在的Web开发建立一些良好的指导与规范。

从这个例子开始。一个Button结构我们一般会怎做？大部分会是这个样子：

<div class=”simpleBtn”>Click Me</div>

然后我们会有可能数行的CSS代码来描述这个按钮的样式，这样做可以吗？当然。但是在结构化的HTML及Web应用的今天，太过具体的设计造成未来无法复用。如果这个按钮要求有纯文字，另一个按钮要求有图标。是不是得分别处理二个呢？

我简化了一个Silverlight中的按钮控件来看看他是怎么做：

<Button>
	<Grid>
		<Border>
			<Border x:Name="BackgroundAnimation"/>
			<Rectangle x:Name="BackGroundGradient">
				<LinearGradientBrush />
			</Rectangle>
		</Border>
		<Content Presenter/>
		<Rectangle x:Name="DisabledVisualElement"/>
		<Rectangle x:Name="FocusVisualElement"/>
	</Grid>
</Button>

在大部分RIA框架中，控件的设计思想就是为了复用与继承。比如这个Button控件，最终展示的内容，由Content Presenter这个对象来决定。他是文字或是图片，与按钮本身无关，按钮本身的目标就是把这个内容展示出来而已。而有关按钮的样式，由另一个对象组叫Border来决定。这样内容与样式也有对象上的分离。而其它二个Rectangle分别命名为DisabledVisualElement和FocusVisualElement大家一看也能明白，就是Disable和Focus的样式。也与内容本身有了分离，方便未来在不同的状态下调用。那么最终应用时可能会是这个样子：

<button Content="Click Me" Border="2" Background="Silver"/>

可以注意到。其实在这里的Border及Background有点像我们的CSS行间样式。在以前的CSS实践中，我们不太推荐使用行间样式，但是换回一些RIA的开发思路来看，无论是行间还是可复用的样式，都是比较通用的做法。没有人能写出绝对完美的，无垃圾代码的应用，按需使用就好。

那么，现在看看如何应用这种设计模式，来设计一个HTML/CSS的按钮呢？

<div class="C-SimpleButton" style="width:200px;height:50px;">
	<div class="C-Grid">
    	<div class="background"/>
        </div>
         <div class="C-ContentPresenter">Click Me</div>
    </div>
</div>

一个模仿Silverlight Button的HTML结构，其中Style中指定了一个行间样式让这个按钮在画面中有个默认大小。CSS样式我就不贴了，通过这个结构也能看出未来将如何来定义这个样式。

当然，我们没有办法像Silverlight一样用一个<Button/>就顺利的应用这个控件（方法也有，就是封装成JS）。但这样的规范当我们有效的建立之后，我们只需要关心将什么内容放入到<div class=”C-ContentPresentor”>节点。里面可以是一个文字，甚至可以是另一个控件。当我们的控件积累到一定量的时候，我们在搭建一个Web应用的方式，如同搭积木一样互相嵌套。控件的可读性更强，由于语义化了这个元素的结构，也使得这个控件更容易被JS来控制。

有人会问，这样做是不是在牺牲性能换语义结构？的确有这样的可能性，但是现在的在浏览器已经发展到了更高级的版本。每一年的新版本在性能上比上一代都有近50%甚至200%的提升，这种HTML结构上的解析运算量还不足以影响浏览器的性能。

其实语义化HTML结构并不新鲜，如果有兴趣，可以多翻看一下Gmail或是其它Web应用的源代码，几乎已经嵌套到了上百级的DIV结构。其目的只有一个，更有效，更快速的构建Web应用。

我见过的大多情况都会是，先与项目经理争执客户的意见如何如何不合理，最终还是无奈的继续按客户的意见修改。而项目往往都是杯具式的心情完成。有更好的办法吗？

其实项目经理不是你的敌人，他更多是中间人的角色。而项目经理更期待的是，设计人员能给他提供一些更好的解决方案，逼你改只是他迫不得已。一个优秀的设计人员应该学会*应对项目*，而不是-应对设计-。

我的经验是，在初期与客户讨论的时候，把意见提出来，看看客户是否愿接受，这样也对他的期望有一个大概的了解。而在获得客户的反馈后，先换位思考为什么客户要这么修改，是否有理有据。如果不能直接与客户沟通，就与PM/AM沟通，因为他是最了解客户想法的人。

如果PM坚持让你修改客户意见，你可以不高兴的去修改应对。但如果做得更好，你可以多花一些时间，在修改了意见的同时，用另一个*设计成品*来表达你的观点，而不只是光口头说说。PM和客户总是期待有着突破，他们也不想把项目放死在一颗树上。

学会了这个规律，当你在PM与客户那取得了信任，那么未来你将掌握更多的主动权。

解决办法是，经过测试，就算父元素不使用display:table;子元素继续使用display:table-cell;也能使整个元素继续以表格状态呈现。

The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography.

非常绕口的解释，但大意是指aside元素是独立的内容，但与正文有一定的联系。举个例子，一段引用，或是一些注解，都可以用aside标签来处理。

示例一：注解(Pull-quote)

<article>
    <header>
        <h1>Lorem Ipsum Dolor Sit Amets</h1>
    </header>
    <p>Aliquam erat volutpat. Vestibulum eleifend pellentesque urna, at
    sodales est faucibus sit amet. Praesent in mi dui. <q>Aliquam sed
    bibendum nisl. Mauris pharetra enim sit amet ipsum dictum placerat. Sed
    lacinia pulvinar iaculis. Nam sit amet hendrerit purus.</q> Sed a urna
    laoreet lorem pulvinar fermentum. Aenean vel luctus libero. Ut tincidunt
    metus sagittis ante viverra feugiat.</p>
    <aside>
        <q>Mauris pharetra enim sit amet ipsum dictum placerat.</q>
    </aside>
    <p>Nulla quis lacus non quam luctus vestibulum. Pellentesque imperdiet
    risus gravida ante consectetur fermentum. Vivamus et est nec risus volutpat
    elementum. Ut faucibus, lectus consectetur volutpat dapibus, quam diam
    luctus enim, vitae mollis enim purus non ante.</p>
</article>

示例二：词汇表(Glossary)

<article>
    <header>
        <h1>Web Technologies</h1>
    </header>
    <p>Curabitur dignissim lorem a CSS diam posuere tempor. Nam hendrerit,
    eros vel condimentum tempor, ipsum justo cursus justo, quis vestibulum
    turpis turpis sit amet tellus. Quisque quis PHP magna eget ipsum faucibus
    bibendum at non diam. Sed sapien est, cursus ac ullamcorper id, egestas vel
    urna JavaScript. Nullam aliquam dolor vitae quam pharetra auctor.</p>
    <aside>
        <dl>
            <dt>CSS</dt>
            <dd>A set of standards for styling documents presented on the
            World Wide Web.</dd>
            <dt>PHP</dt>
            <dd>A server-side scripting language suited to dynamic HTML document
            generation for the web.</dd>
            <dt>JavaScript</dt>
            <dd>A client-side scripting language used for manipulating HTML documents
            within a browser.</dd>
        </dl>
    </aside>
</article>

参考文章:
Understanding aside

当我输入 “好文推荐”，并把链接加入的时候，发现如下提示，注意：

Buzz自动识别出了该链接下的文章标题，以及文章中所包含的图片。可以点击Pick Photos…将图片插入到Buzz的正文中：

图片插入完毕，删掉刚才冗长的链接地址，现在有Buzz自动提供的带标题的文章链接，以下是发布后的结果：

9月在西雅图与Forest辛苦工作了一周，决定周日去Olympic登山，原计划3小时的登山结果由于森林管理处的错误指示，把我们引向了12英里外的一条死胡同，在山上尝试爬山，找路，找水 （只带了一瓶水），最终还是原路返回，更可怕的是在晚上9点靠着iPhone屏幕的微弱灯光才走回马路，原计划3小时的旅程，结果一共花了12小时，上下1500m，行程25英里，每人带了一份水和三明治，最终靠露水和山泉才坚持下来，天黑之后才回到停车场…

是一次很特别的旅行，如果不能顺利下山，晚上很有可能在在零下的温度下在山上露宿。真是有生以来头一次感到有生命危险的感觉，但最终还是成功回去，直到晚上1点才回到西雅图的家中，一直到现在还有所后怕，不管怎样，Olympic是一片很美的地方，这次旅行也为自己增添了不少奇特的经历:

伴着晨雾坐渡轮离开市区

驶车2小时到达森林公园区域

公园内的湖区

该死的指路牌

山中美景

Key先生的背景

记得9月在旧金山的一个休息的下午，想去电影院看一场IMAX电影，但却只有这部Cloudy with a chance of meatballs，当时因为对海报和名称不太感冒，而且似乎有点厨师题材，加上似乎是一部儿童电影，就没有走进影院。在美国看了三场电影都不错，但是错过了这部而且还是IMAX直到今天看了高清版本才后悔不已。不得不说这部电影的水准无论是技术，编剧还是娱乐性都丝毫不逊色于Up，而且从某种意义上说，应该是一部绝对能超越Up的佳作。

从电影开头的几分钟就获得了惊喜，而在15分钟时更是引来了第一个高潮，90分钟里笑料不断，技术表现也越来越佳，剧情进展没有任何拖泥带水，整个将欢乐和震撼的心情带入其中。技术上可圈可点，尤其是果冻那段。人物上，从男女主角二个Nerds，还有爱子如命的肌肉警察，还有装成摄影是由的危地马拉医生飞行员Whatever@#@。加上从前往后的小细节的穿插，以及父子之间几段感人的描写，到现在还震撼于此片的想象力。虽然依旧披着万成不变的好莱坞式剧本与发展轨迹，但着实能让你彻底的沉醉在那场美食风暴之中，今年我最喜欢的动画电影一定就是这部。中文译名叫美食从天降，而英文名更像是天气播报的语气Cloudy with a change of …不得不佩服该片整体的策划，映象很深的是在开头我正期待看到a film by …的时候，最后出来的是 a film by a lot of people让人感到温馨了一把。

不知道为什么广电要引进District 9，是部好片，但中国肯定没有票房价值。而去年最棒的Wall-E和今年的这部Cloudy with a change of meatballs却错失了最佳的播映时节，不得不说非常的遗憾！

希望大家在今年有机会看这部电影，虽然似乎没有机会去电影院了，但记得一定要看高清版本!绝对对得起大家的带宽和显示器。

这世界不止有Pixar

与NX的分开是最难过的事情，2年前的8月1日，从Judy家的书房和John二人开始搬电脑开始工作。2周时间为CCTV开发了WPF的EPG原型，除了继续服务原有的客户外，随后从微软先后开始了Silverlight的设计与开发工作。公司从Judy,John,我三人，又有Jiajia,Summer,Uma的加入。公司忙不过来的时候，Daniel,Kenny也晚上来公司帮忙加夜班，真的非常感谢他们那时候对我新创业的支持。

二年时间里，在团队和帮助下，公司由3人变为13人。有以前公司的同事，有圈内请来的高手，也有我在大学里的学生。大家在各个领域也做出了不少成功的项目，团队有欢笑也有汗水。我们一起加了无数个通宵，完成了数个成功的项目。也提议在办公室内挤出空间打乒乓球，玩PS3，还有激动的巴厘岛之行，好多童鞋头一次踏出国门。在这二年的时间里收获了项目成功的喜悦，更获得了这群朋友，至今还记得最后在KTV送别的那一天，大家每人唱出一句合起来送给我的一首歌 Stand by me。

经过二个月的调整，新的工作已经开始。新的挑战，新的领域，希望未来越来越好，也希望这些老伙伴们都能过得更好。