博客列表
前端开发协作问题
三月 28th, 2010 by 裕波
web标准化交流会（w3ctech.com）已经是第六期了。本月交流会分别在北京，上海，深圳，广州同步举行。本月交流会的主题是：前端开发在研发流程中与其他岗位协作效率的提升。
在此我要代表交流会感谢腾讯，腾讯北京，新浪广州，携程对交流会的支持。他们都非常的热情，腾讯北京的朋友们从交流会开始到交流会结束一直都忙碌着，为参加交流会的同学们买水，会后收拾垃圾，并且还为参加交流会的同学们准备了小公仔。我在此非常的感谢他们，我也非常的感动！
在交流过程中，大家也对此发表了自己看法，其实真正要解决协作的问题，提高效率的方法很多，而且根据团队的规模，可能方法也不相同，但是最重要的是还是一个自身能力的提升。
不管怎么样，比如建斌最后提到了，关于交付物的问题，按照规定，按照要求提供交互物，但是如果因为自身能力有限，无法对交互物正确的评估，同样也会出现问题。
这是我对此的一个看法，当然制定流程，制定规范的目的，是为了更好的优化，解决协作的问题。就像法律一样，当真正遇到问题的时候，我们有法可依，有章可查。
大概就是这些吧，我也不太清楚，我的表达是否清楚，如果你对所说的，有什么意见或者建议，请及时与我联系，谢谢！
在此，我在次感谢对交流会提供帮助的所有公司及个人。在感谢支持交流会的，踊跃报名参加交流会的同学们。
在此，我也对那些积极报名的，没有收到邀请的同学们表示歉意！
在此，对那些报名，并且已经发送邀请的，但是因为有事不能来参加交流会的，但是并没有告知于我的人表示。。。。。
好，最后还得感谢易联主机（http://www.elinkhost.com/）对交流会提供的奖品。
谢谢！
周爱民老师关于“前端，架构，框架与库”的演讲
三月 17th, 2010 by 裕波
周爱民老师在淘宝的懒懒交流会上给淘宝和支付宝的前端工程师们分享了“前端，架构，框架与库”。
目前前端开发这个职位相对于互联网其他职位来说，还是很新的，我们非常需要这样的分享。没有听到周爱民老师的这次分享，应该是很可惜的。我是这样认为的！如果你和我有一样的想法，那你不用担心，淘宝的同学们为此次演讲已经进行了全程的录相，并且与周爱民老师联系后，获得他的同意，在次我还将提供当天演讲的PPT下载。在次谢谢淘宝的同学们，及周爱民老师。
希望周爱民老师来北京时，能够在次与我们现场分享。
下次是这次分享的视频链接和ppt下载地址：
视频：http://v.youku.com/v_playlist/f4262628o1p0.html
ppt：ppt下载
xhtml向html5转变
二月 10th, 2010 by 裕波
众所周知，xhtml的出现，从语义化的角度将原来html4的一些标签淘汰，替换成新的标签。
eg：b换成strong,i换成em。
而现在html又回来了，html5的时代将要来临，这将是一场什么将的转变？
他能平滑过渡吗？
我。。。我不得而知。
我们将如何迎接这一次大的变革。
嘿嘿
page speed 1.6 beta支持Firefox3.6
二月 10th, 2010 by 裕波
Firefox升级到3.6以后，很多好用的插件都没有及时的更新，一直在等page speed。
哈，今天发现page speed终于发布了1.6 beta版，支持3.6版本，赶快尝试一下吧！
http://code.google.com/intl/zh-CN/speed/page-speed/download.html
小谈dataTransfer
二月 9th, 2010 by 裕波
很久没有写blog了。在前段时间以来，我—-太懒了。
工作的环境太安逸，进步也相对较慢。
快过春节了，也算是自己的一个转折点吧，换了一份工作，希望能够让自己迅速的成长起来。
哈，废话不多说，今天在推特上看到克军说：原来从IE5开始就支持原生的拖拽了。哈哈，点进去看一下。
看了一下源文件，原来是通过dataTransfer的getData与setData来实现的。还是帖一下原代码吧。
<!DOCTYPE HTML>
<html>
<head>
<title>Drag and Drop</title>
<style>
img { height: 4em; }
div { margin: 1em 2em; border: black solid; text-align: center;
height: 9em; width: 12em; float: left; }
p { clear: left; }
</style>
</head>
<body>
<h1>Drag and Drop</h1>
<div ondrop="drop(this, event)" ondragenter="return false"
ondragover="return false">
<p>Good</p>
</div>
<div ondrop="drop(this, event)" ondragenter="return false"
ondragover="return false">
<p>Bad</p>
</div>
<p>
<img src="spam.gif" id=spam alt="Spam" ondragstart="drag(this, event)">
<img src="egg.gif" id=egg alt="Egg" ondragstart="drag(this, event)">
<img src="cat.png" id=cat alt="Cat" ondragstart="drag(this, event)">
</p>
<script>
function drag(target, e) {
e.dataTransfer.setData('Text', target.id);
}
function drop(target, e) {
var id = e.dataTransfer.getData('Text');
target.appendChild(document.getElementById(id));
e.preventDefault();
}
</script>
</body>
</html>
dataTransfer 对象：提供了对于预定义的剪贴板格式的访问，以便在拖曳操作中使用。
下面是相关的解释。
| 方法 | 描述 |
|---|---|
| clearData | 通过 dataTransfer 或 clipboardData 对象从剪贴板删除一种或多种数据格式。 |
| getData | 通过 dataTransfer 或 clipboardData 对象从剪贴板获取指定格式的数据。 |
| setData | 以指定格式给 dataTransfer 或 clipboardData 对象赋予数据。 |
从这个例子能够看出，拖动是相当简单的，不过这是利用了剪帖板的功能，但是是将可移动的元素直接剪切了，如果可以复制的话，那样会不会更好呢。
我是菜鸟，欢迎大吓指导。
Web性能优化最佳实践（1）
二月 6th, 2010 by 陈良泳
本文翻译自：http://code.google.com/intl/zh-CN/speed/page-speed/docs/rules_intro.html
当你使用Page Speed剖析一个web页面时，它要通过许多不同的规则（rules）去评估页面。这些规则是来自前端的最佳实践，你可以应用在web开发的任何阶段。我们这里提供这些每个规则的文档, 所以不管你是否使用Page Speed这个工具（也许你仅仅是开发一个全新的网站，且并不准备对它进行测试），你任何时候都可以从本文档获益。我们给出特定的提示和建议让你可以最好的应用这些规则，并将它们融入到你的开发过程。
关于性能最佳实践
Page Speed是从前端的视角衡量性能，典型的是从页面加载时间（page load time）来衡量，它是从一个用户请求一个新页面到页面完全被浏览器渲染显示之间的时间差。 页面加载时间优化的最佳实践涉及到多个步骤，包括解析DNS名称、建立TCP连接、发送HTTP请求、下载资源、从缓存获取资源、解析和执行脚本，和在页面上渲染对象。
理想的Page Speed对页面性能的衡量，既要同时消除这些步骤、进行并行处理，还要减少它们完成的时间。最佳实践被分成五类，涵盖了页面加载优化的不同的方面：
- 优化缓存——保持你的应用的数据和逻辑同时离线
- 尽量减少往返时间——减少请求-响应周期序列的数量
- 尽量减少请求大小——减少上传的大小
- 尽量减少负载大小——减少响应、下载和缓存页面的大小
- 最优化浏览器渲染——改善浏览器的页面布局
在谈结构语义化
十二月 31st, 2009 by 裕波
今天在浏览JosephJ的博客的时候，看到一篇标题为：英國 Yahoo! 行的意外收穫的文章。（http://josephjiang.com/entry.php?id=140）
当我看到他在介绍Accessibility的时候，并且介绍到Artur Ortega : 盲人軟體工程師的时候，我觉得我总算明白了，结构语言化的真谛。
在第三期交流会的时候，我们也提到了这个问题，而且他所说的这一点也证实了我们当时的说法：适应于各种终端，并且适用于所有的群体（看的，听的）。
下面是摘自他文章的一段话：
他很熱情地跟我介紹了他是如何操作電腦的，原來他大多時間是透過 Screen Reader
先了解整份文件的結構、有那些大標題（所以 h1 ~ h6 這樣的 Semantic Markup 對他是很重要的）
接著再瞭解列表中有幾個項目，最後才會開始閱讀。
web标准化交流会第三期总结
十二月 26th, 2009 by 裕波
这次交流会主要讨论的话题是：页面重构合理化。
本次讨论分为了三个环节，并且采取了分组讨论，汇总的方式进行。三个环节的小标题分别为：结构合理化、样式合理化及素材合理化。详细的提岗如下：
一、 结构合理化
a) 统一的DTD声明 html4.01 xhtml1.0 html5
b) 通过W3C验证
c) 语义化的html 标记应用
d) 语义扩展 microformats或RDFa
e) Class id命名规则一致性,借鉴html5新标记名称和microformats。
f) SEO
二、 样式合理化
a) 样式的分层管理
i. 公共规则层 reset base layout-rules …
ii. 公共模块层 header footer …
iii. 项目模块层 频道、店铺、检索…
iv. 项目文件夹尽量平级，不要多层嵌套
b) 样式的书写
i. 编码 utf-8避免中文字符造成样式读取问题
ii. 注释 统一
iii. 模块区分，避免代码耦合增加维护难度
c）CSS代码压缩
三、 素材合理化
a) 图片类型合理应用 jpg png-32 png-8 gif
b) 图片字节
c) 图片管理
e) css sprites
f) 图片缓存
通过大家对上述的讨论，最后的结果大致如下：
1、关于dtd声明，html4.01 xhtml1.0 html5这三种声明还是根据公司具体情况来决定，特别是技术水平，因为涉及到有一些开发人员，或者编辑，他们还没有接受xhtml的一些严格要求，故而使用html会更好一些。不过从现场情况来看，使用xhtml过渡型的相对较多。
2、关于W3C验证来说，其实有同学谈到了一点很重要，就是验证可以检测我们在书写代码的一些疏落，比如id重复使用，还有标签未必合等问题，但是问题在于如果我们把 通过标准验证的代码，交给后端开发以后，并且最终上线，就不敢确定页面是否能够通过标准验证了。所以这是一个问题，不过有些公司关于模板这一块就由前端开发程师来实现，这样可以避免这种问题。
我个人觉得，当你书写完代码以后，还是通过一个验证得好，或者是看一看W3C的提示，来确定是否存在严重的BUG，还有一些是否可以不需修改，比如CSS中的为IE6书写的hack：下划线。养成这样良好的习惯。
3、关于语义化的html,其实这个问题大家有一些偏题了，谈到了为什么要进行语义化html，哈哈！不过听了一下，最后我觉得有一个很有道理，就是语义化html标签，有助于适合于更多平台的客户端，而且他还能够适合于更多人群的浏览，比如盲人，他可以通过听来判断出这段话的意思，比如，我们使用了H1标签，这样他可以确切的知道这就是本页面的中心，还有ul标签，他知道这是一个列表。
回到正题，我觉得语义化html其实是一个很庞大的课题，而且现在有时候从原型上，或者视觉设计上来看，无法确定应该使用什么语义的标签，会有很多歧义，像这种情况下，首先作为一名前端开发工作者，应该对html中的每一个标签的含义搞清楚，第二，网站不是前端开发一个人的事，他是一个产品，大家共同在做产品，这种事情应该和交互设计师确切清楚，他这里究竟是一个什么意思，什么概念，他想表述什么，这样一来，我觉得在做语义化的html的时候，就会容易得多。其实这里的语义化html，就是我们经常嘴里谈到的结构语义化，结构最重要，WEB标准的精髓就在于结构语义化。
4、关于微格式与RDFa这个问题，在场的大多数人都不太了解，所以没有太多的答案，其实这个东西我个人觉得他和我们的命名语义化应该是有很大的关系，所以如果你对此感兴趣，可以到网上去搜索一下，对他进行进一步的了解，对这两个名词，如果大家对此特别感兴趣，我们后期也可以进行专题的讨论。
5、Class、id命名规则一致性，其实说句实在的，这个问题其实对于前端开发工程师来，应该是一个很困扰的问题，因为不知道是使用英文命名还是拼音命名，因为作为中国人，英文水平比较菜。这一点比较悲哀，还有就是关于命名的问题，其实也是一个很大的话题，我建议可以专开一个专题进行讨论，因为我觉得今天的讨论结果，并不理想。
但有人提到了作为重构人员建议只使用class，不要使用Id，把id留给后端工程师或者JS工程师来做，我不同意此观点。
id和class作为css、js与html的一个挂钩，而且有时候我们必须使用ID来明确，语义这个模板，而且不管是xhtml,css还是js，其实他们都属于前端开发工程师的职责，但是有些公司会把css和js分成两个不同的职位，可以，分工明确，但是我不太喜欢这样的分工，如果遇到这种情况，职位与职位之前完全可以通过规范来约束，而不是说不用id，我觉得这有些霸道了，而且有实为不妥。
5、关于SEO的问题，这个就很难说了，从结构语义化的角度来看，他也算是为SEO服务器的，但是具体各搜索引擎怎么抓取页面数据的，怎么去判断的，这就不太清楚了，但是我曾经从谷歌的文档中有看到，他们对h标签是有权重的。
6、其实第二大点，关于样式的合理化，这个问题，我觉得也太大了，而且讨论的时间不是很长，我觉得关于样式的分层管理的问题，在第一次克军说的分为三层就比较合理，第一层，是整站的公共样式，第二层，频道的公共样式，第三层，本页面的个性样式。这样分层就比较合理。这样从谷歌的pages speed的检测上也说得过去，因为他不会检测到对于本页面多余的css代码。关于css的书写，这个的话，其实他又与结构中的class和id定义有关系了，这个问题，我后期专门写一个文章和大家讨论。看是否可行。
7、关于素材的合理化，那主要谈到了背景图片的问题，其实我觉得这个问题，有待研究，今天有位同学说得很对，图片的优化是无止境的，这一点我是同意的，而且听说国外有专人的有写相关的文章，如果你有兴趣，可以去搜一下，今天的交流会主要讨论到了背景图片的使用格式，其实目前来看，主要还是png-8的使用，当然还有一些同学在使用gif，因为他们对png-8有一些误解，当然色值超过256色的，还是得使用jpg，因为这样存储的效果比其他格式更好，而且得到的文件会更小。还有就是我建议就是当你的图片需要发布的时候，可以使用ywlow的工具进行进一步的无失真的压缩，以保证图片的最小化。
还有就是背景图片的缓存问题，其实在IE6下是有一个BUG的，在网上有一个关于IE6背景图片闪烁的问题，其实就是因为背景图片不被缓存的原因造成的，但是我觉得这个问题我们可以忽略，因为我们需要将IE6从这个大的互联网圈子中淘汰出局，这可能是一句不太负责任的话。
内容大概就这些，如果我有想到其他的，到时候在补充。谢谢各位支持交流会的同学们，也谢谢参加了交流会的同学们，希望你们也能总结一下你们参加这次交流会的心得，同时如果你们对交流会有什么意见或者建议，请告诉我。
如果互联网的老大们都用基于标准的浏览器
十二月 24th, 2009 by 裕波
一个公司的老板，或者说老大级人物，他其实都是非常关心自己的产品。
从腾讯的马化腾，新浪的陈彤，巨人网络史玉柱，包括我们公司（浪淘金）在内，他们都非常关心自己的产品，并且也会亲自去体验，尝试自己的产品。
可想，如果一个产品做出来以后，连老板的这一关都过不来，你觉得….嘿嘿，说得有点大了。还是单从前端开发说说吧。
如果你的老板在浏览自己公司产品的时候，发现到处都是错位，或者其他的问题，你觉得他能坐得住吗？恐怕不能吧!
所以我在想，如果互联网的老大都用的是基于标准的浏览器，这样是不是对于WEB标准的推动会更好一些呢？
思绪有些乱，哈哈，有什么不妥之处，还请见谅，欢迎拍砖，拍死我！
WebRebuild北京第一届交流会成功举办
十二月 16th, 2009 by 裕波
2009年12月12日, WebRebuild北京第一届交流会在谷歌中国成功举办。虽然天寒地冻，但与会者热情高涨，实际到会人数比预计人数超出两倍多，临时加开了视频同步会场才满足了超员的要求。
Webrebuild.org成立于2007年，致力于推广“Web标准”，促进全国前端开发工作者的交流，提升前端开发的影响力。自成立以来一直受到W3C中国、蓝色理想等组织的大力支持。深圳站于今年已经成功举办三届交流会，为了促进更大范围的交流，于今年正式成立北京站。
本届会议的主题是《悟道web标准》。Web标准在中国走过了不寻常的岁月，在2009年岁末，前端从业者们聚在一起，总结Web标准在中国发展的成果，并展望未来发展方向和奋斗目标。
W3C中国办事处李安琪女士出席本次交流会并致开幕词，谷歌技术用户组主席王开源先生也到会致辞。本次交流会的主要分享主题如下：
与会者们也非常有幸借这个机会参观到谷歌中国公司的风采。谷歌不但为会议提供了免费的场地，还提供了免费的饮料。同时也感谢W3C中国办事处、Google技术用户组、谋智网络、华章出版社、图灵出版社、浪淘金、蓝色理想等组织的协助，让这次交流会能够顺利和成功举办。
与会者均是来自各个公司的前端开发人员和Web标准的支持者，现场气氛热烈，内容详实，得到了与会者的高度评价，不管是会议的组织还是会议的内容都让他们非常满意，急切的期待下一次交流会的到来。更值得一提的是W3C中国对本次交流会的高度肯定，本次会议已经更新到W3C官方主页，作为对交流会的认可和支持。
我们感慨中国的W3Cer们共同的努力造就了今天这场当之无愧的业界盛会，也欣慰地看到我们的声音终于传到了W3C美国总部，传到了全球。让我们为之共勉吧。
功能列表
关于我
周裕波，web前端开发从业者，互联网爱好者。
gtalk:itchina110@gmail.com
@lovevfp