刘钢的博客 – 我是UED

今天很荣幸的第三次的参加了WEB标准化交流会
地点是在在北京航空航天大学的第八会议室，这次交流会改变了以往的圆桌讨论方式,改为分享的方式,今天的两场分享都很精彩 第一场是微软的IE9分享,第二场是周爱民老师的前端架构实战

WEB标准化交流会让我认识了不少新朋友、今天更巧的是遇到了一年前项目合作过的同事：）

IE9的分享 重点在于IE系列终于迈向标准化 并且将GPU引入浏览器引擎，对于渲染速度和性能大大提升，同时透露出XP下无论哪个浏览器都是无法使用GPU加速的，虽然不知道这个说法的可信性，但是这次IE的预览，还是有一些收获的，至少让我们看到了浏览器越来越标准，当然更重要的是kill IE6！

第二场爱民老师的分享让我比较有收获，几个方面吧

1.解决问题的思路-共性、本质，找到问题的根源
现场的例子：以为运营说需要在这里加一个按钮，他的需求真的是要多加一个按钮么？实际上可能是觉得原来按钮的位置并不合适
2.系统框架、框架、库、应用的概念
说实话，听的确实有些模糊，不过两个例子很精彩，由浅入深的，讲解了是如何一步一步的抽象出最终的系统框架。
从我的理解，库是相互没有依赖关系的，框架是来将库进行一个抽象关联，而系统框架，是更本质的抽象出了某一类业务的底层逻辑包括一些必须的数据和逻辑关联

给我印象比较深的一张图片如下：

当我们更多的关注于插件机制、组建机制、消息机制的时候、我们更应该从需求变更、版本升级、产品整合的视角来看待他们的本质

而我的观点是-人人都是”架构”师

为什么这么说呢?哈,首先我所说的架构是加了引号的

我理解的”架构”呢,更贴近我们的生活,工作,架构可大可小,”系统架构师”可能我们确实需要很多积累、天赋，而我们要把架构的意识引入到我们的日常生活中来

几个例子：
1.职业规划 是不是架构？
2.当我们保存站点文件，站点文件的目录是不是架构？
3.CSS的reset、grid、form等算不算架构呢？
4.我们经常用js写的weiget又算不算架构呢？
……
我相信在我们的生活、工作中、架构无所不在-人人都是”架构”师

Windows 画图程序一直伴随着 Windows 各个版本，这个很简单，几乎没有什么用处的程序拥有最基本的绘图功能，很适合用来涂鸦。HTML5 的 Canvas 对象使在线绘图成为可能，虽然 HTML5 还远未成熟，但很多人已经迫不及待地用它设计一些让人惊叹的应用。

CanvasPaint 是一个基于 HTML5 的标准 Windows 画图程序，它拥有和 Windows 画图程序一模一样的界面和操作，功能也几乎完全一样，在特定浏览器的支持下，你甚至可以将最后的作品保存到本机。这并不是最近的项目，2006年就有了， 因此，目前绝大多数支持标准的浏览器（Firefox，Safari，Chrome，Opera）都可以正常使用这个程序。以下是作者对这个项目的一些解 释。

为什么要开发这个程序？

目的不是为了开发一个 Windows 画图程序，而是体验 HTML5 的 Canvas 功能。

如何使用

和标准 Windows 绘图程序一样。

能保存吗？

是的，但只支持 Firefox 2 和 Opera 9 （译者注：这是作者2006年就实现的一个程序）。在本机保存，选择 File 菜单中的 Download，在线保存，选择 Save online，会自动生成一个 URL 在线显示你的作品。

浏览器本身的右键菜单影响使用

可以在浏览器的设置中禁用右键菜单。

为什么有些功能不能用？

一些功能支持特定版本的浏览器（译者注：这是就2006年而言）:

Color picker

Firefox 2.0

Opera 9

Flood fill

Opera 9

Save image

Firefox 2.0

Opera 9

Open URL

Firefox 1.5

Opera 9

Latest WebKit

Canvas 对象好用吗?

对那些不需要跨浏览器支持的应用很好用。但在绘画中，最大的问题是，受限于 mousemove 事件的刷新率，你不太容易发现光标的位置，使用喷笔的时候尤其明显。另外，当尺寸变得很大时，速度变得很慢，没有 getPixel() 功能。

技术细节

程序中使用了 5 个 Canvas 对象。

一个主画板，一个是透明画板层浮动在上方显示预览绘画内容，一个隐藏的 Canvas 用来缓存选择的内容，另一个用来缓存反悔状态，一个用在程序标题栏，用来显示渐变色。

其他人的 HTML5 Canvas 实验

Canvascape 3D （用 HTML5 实现简单的第一人称射击游戏）
CanvasGraph （一个 HTML5 Canvas 绘图 JavaScript 类库 ）
Image reflections （用 HTML5 Canvas 实现图像倒影）
Canvas Painter （一个更为简单的 Canvas 画图程序）

真正令人赞叹的 HTML 画图程序

如果上面的程序已经让你对 HTML5 的 Canvas 功能感到鼓舞，下面这个画图程序会让你赞叹 。拥有不输桌面的界面体验和流畅 感，在多屏幕电脑上，我甚至有将那些浮动工具面板拖到第二个屏幕的冲动。

演示地址：http://mugtug.com/sketchpad/

本文素材来源：http://canvaspaint.org/#
http://mugtug.com/sketchpad/

中文编译来源：锐商企业CMS 网站内容管理系统 官方网站

今天去参加了第六期WEB标准化交流会，重复下话题：前端开发在研发流程中与其他岗位协作效率的提升 做个小总结 

先感谢一下北京腾讯给我们提供了场地，水，和公仔，今天听了很多“大虾”们的分享，感受颇深
就说一下小公司前端开发在研发中如何更好的协作吧 

今天会议上几个突出的词：“流程”，“沟通”，“专业“，“吃饭喝酒”：） 

那我就分别说一下自己的见解
1.“流程”，存在即是合理的，社会所必须承受的，就像高房价一样，很多时候“流程”被我们吹捧的就像一个神一样，貌似能解决一切问题，而实际上我认为，流程只是一个比较虚的东西，什么是流程？就是一种大家认可的协作方式，在中小企业里我认为无流程就是最好的流程 

2.“沟通”，为什么沟通？怎样沟通？今天腾讯的页面组leader说得好：“沟通就是情商，情商会从你的绩效考评里反映出来”，什么意思呢？也就是“强制沟通”，我认同这个观点，有效的沟通能够大大提升我们的效率，以及信息不对称等问题，我也希望所有的前端朋友们，一定要学会使用“沟通”这个武器，很多时候他能解决你技能所解决不了的问题 

3.“专业”，专业是什么？kejun兄补充的好-“专业就是饭碗”，我们要提升自身专业度，在研发流程中承担更多的职能，现在有多少公司里，后端不做一些“前端”的活呢？这也可能目前前端开发是“解耦”的最好途径 

4.“吃饭喝酒”，同事间朋友间，需要有一些私下的沟通与了解，适当的有些活动，能够在工作配合上更加的顺畅，当然了吃饭喝酒只是其中之一，更多的在轻松地环境下交流交流，增进一下友谊,本次讨论会后聚餐共16人哦：） 

kejun在最后公布了之前出的html面试题的答案 有兴趣的 移步这里
http://www.iamued.com/qianduan/1373.html

最后借用一张崔凯发的合影结尾吧：） 

第六期WEB标准化交流会合影{点击放大}

有这么一段HTML，请挑毛病：

<P>&nbsp;&nbsp;哥写的不是HTML，是寂寞。<br><br>&nbsp;&nbsp;我说：<br>不要迷恋哥，哥只是一个传说

这是原来雅虎一道笔试题（文字变了变），用了很多年了，还没有一个人完全答对过。
下周（3.27）交流会上我会公布答案  点击查看第六期WEB标准化交流会 总结

＝＝＝＝＝＝＝＝＝＝＝＝＝＝ 解答部分 ================

出这道题的动机是，太多人觉得HTML太简单，但它恰恰又是前端开发中最基础最重要的部分。HTML结构设计的合不合理，直接影响到代码易不易维护，灵不灵活，同时事关网页性能，协作效率。碰到不少人认为前端开发就是javascript开发，大错特错啊。javascript, html, css这三个前端开发的基础支柱，性质完全不同又紧密关联，对它们的正确理解，合理应用是专业与非专业的区别。有些后端工程师可以写出很漂亮的JS，但他们真的不懂怎么合理的把js, html, css结合起来应用。对html的准确把握，不像学一般的编程语言那样，而是建立在丰富实践经验和体会的基础上，是前端的工程师的基本功。

这不是一道较真题或是装逼题，正经一道“画鸡蛋”的题（引自http://twitter.com/RageCarrier/status/10712084993）考的是基本功。代码如其人，对一行代码的理解足以反映出他的前端开发素养。

言归正传。这道题的考点：

考点1：html和 xhtml的区别
这行代码在html 4.01 strict下是完全正确的，在xhtml 1.0 strict下是错误一堆的。所以明显是一个考点。在xhtml下所有标签是闭合的，p,br需要闭合, 标签不允许大写，P要小写。同时nbsp和br必须包含在容器里。html下这些都不是错。p在html里是可选闭合标签，是可以不用闭合的。

这个考点告诉你xhtml是多么苛刻。这是基本考点，答对，你能拿到60分。

考点2：考样式分离
用nbsp控制缩进是不合理的。应该用CSS干这事。所以应该删掉nbsp

考点3：合理使用标签
br是强制折行标签，p是段落。原题用连续的br制造两个段落的效果，效果是达到了，但显然用的不合理，段落间距后期无法再控制。正确的做法是用两个p表现两个段落。“我说”后面是正常的文字折行用br是合理的。

上面全答对，你就能拿到100分。

对原题改进的结果：
html 4.01:
<p>哥写的不是HTML，是寂寞。<p>我说：<br> 不要迷恋哥，哥只是一个传说

xhtml 1.0:
<p>哥写的不是HTML，是寂寞。</p><p>我说：<br /> 不要迷恋哥，哥只是一个传说</p>

加分：合理的用语义化标签
在前面的基础上合理的用语义化标签，对内容进行必要的标记，是加分的。但过度的使用标签，就画蛇添足了。如“我说”的话，可以用q标签标注。

<p>哥写的不是HTML，是寂寞。
<p>我说：<br> <q>不要迷恋哥，哥只是一个传说</q>

我觉得这就够了，如果再进一步，“我”用cite标注，“HTML” 用abbr或acronym标注（至于再讨论abbr和acronym的区别就太较真了），也OK。再复杂就没必要了。

<p> 哥写的不是<abbr title=”Hyper Text Markup Language”>HTML</abbr>，是寂寞。
<p><cite> 我</cite>说：<br> <q>不要迷恋哥，哥只是一个传说</q>

转自kejun的blog：http://hikejun.com/blog/?p=548

微软发布预览版IE 9 面向Web开发者

　　北京时间3月17日消息，据国外媒体报道，微软当地时间周二发布了面向Web开发者的预览版IE 9(下载地址)。

　　微软IE团队总经理迪恩·哈克莫维奇(Dean Hachamovich)今天发表声明称，IE 9与以往的IE版本有很大不同。他表示，微软将每8周对预览版IE 9进行一次升级，第一次升级将在5月中期。但哈克莫维奇没有披露正式版IE 9的发布时间。

　　微软称，预览版IE 9还不是一款完整的浏览器，目前还不包括地址栏等用户导航工具以及安全功能。微软发布了一个它称之为“Test Drive”的网站，方便网站设计人员、应用开发者了解预览版IE 9的功能。

　　预览版IE 9只支持Windows 7、Windows Vista SP2和Windows Server R2。IE 9可以利用图形处理器的处理能力加速文本和图形的渲染。

　　用户可以从Test Drive网站下载大小为31MB的预览版IE 9。（阳光）

　　附：IE 9预览版下载地址：http://ie.microsoft.com/testdrive/