WEB前端

今天在浏览JosephJ的博客的时候，看到一篇标题为：英國 Yahoo! 行的意外收穫的文章。（http://josephjiang.com/entry.php?id=140）

当我看到他在介绍Accessibility的时候，并且介绍到Artur Ortega : 盲人軟體工程師的时候，我觉得我总算明白了，结构语言化的真谛。

在第三期交流会的时候，我们也提到了这个问题，而且他所说的这一点也证实了我们当时的说法：适应于各种终端，并且适用于所有的群体（看的，听的）。

下面是摘自他文章的一段话：

他很熱情地跟我介紹了他是如何操作電腦的，原來他大多時間是透過 Screen Reader
先了解整份文件的結構、有那些大標題（所以 h1 ~ h6 這樣的 Semantic Markup 對他是很重要的）
接著再瞭解列表中有幾個項目，最後才會開始閱讀。

这次交流会主要讨论的话题是：页面重构合理化。

本次讨论分为了三个环节，并且采取了分组讨论，汇总的方式进行。三个环节的小标题分别为：结构合理化、样式合理化及素材合理化。详细的提岗如下：

一、 结构合理化

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从这个大的互联网圈子中淘汰出局，这可能是一句不太负责任的话。

内容大概就这些，如果我有想到其他的，到时候在补充。谢谢各位支持交流会的同学们，也谢谢参加了交流会的同学们，希望你们也能总结一下你们参加这次交流会的心得，同时如果你们对交流会有什么意见或者建议，请告诉我。

一个公司的老板，或者说老大级人物，他其实都是非常关心自己的产品。

从腾讯的马化腾，新浪的陈彤，巨人网络史玉柱，包括我们公司（浪淘金）在内，他们都非常关心自己的产品，并且也会亲自去体验，尝试自己的产品。

可想，如果一个产品做出来以后，连老板的这一关都过不来，你觉得….嘿嘿，说得有点大了。还是单从前端开发说说吧。

如果你的老板在浏览自己公司产品的时候，发现到处都是错位，或者其他的问题，你觉得他能坐得住吗？恐怕不能吧!

所以我在想，如果互联网的老大都用的是基于标准的浏览器，这样是不是对于WEB标准的推动会更好一些呢？

思绪有些乱，哈哈，有什么不妥之处，还请见谅，欢迎拍砖，拍死我！

2009年12月12日, WebRebuild北京第一届交流会在谷歌中国成功举办。虽然天寒地冻，但与会者热情高涨，实际到会人数比预计人数超出两倍多，临时加开了视频同步会场才满足了超员的要求。

Webrebuild.org成立于2007年，致力于推广“Web标准”，促进全国前端开发工作者的交流，提升前端开发的影响力。自成立以来一直受到W3C中国、蓝色理想等组织的大力支持。深圳站于今年已经成功举办三届交流会，为了促进更大范围的交流，于今年正式成立北京站。

本届会议的主题是《悟道web标准》。Web标准在中国走过了不寻常的岁月，在2009年岁末，前端从业者们聚在一起，总结Web标准在中国发展的成果，并展望未来发展方向和奋斗目标。

W3C中国办事处李安琪女士出席本次交流会并致开幕词，谷歌技术用户组主席王开源先生也到会致辞。本次交流会的主要分享主题如下：

· 《网站重构who am i》——Tommy[范俊豪] 

· 《浏览器兼容性问题简介》——黄昊 

· 《一专多长》——Twinsen[梁璟彪] 

· 《分层语义化模板实践》——张克军 

· 《javascript的分层概念》——阿当 

· 《揭秘HTML5及CSS3.0》——鲁超伍 

与会者们也非常有幸借这个机会参观到谷歌中国公司的风采。谷歌不但为会议提供了免费的场地，还提供了免费的饮料。同时也感谢W3C中国办事处、Google技术用户组、谋智网络、华章出版社、图灵出版社、浪淘金、蓝色理想等组织的协助，让这次交流会能够顺利和成功举办。

与会者均是来自各个公司的前端开发人员和Web标准的支持者，现场气氛热烈，内容详实，得到了与会者的高度评价，不管是会议的组织还是会议的内容都让他们非常满意，急切的期待下一次交流会的到来。更值得一提的是W3C中国对本次交流会的高度肯定，本次会议已经更新到W3C官方主页，作为对交流会的认可和支持。

我们感慨中国的W3Cer们共同的努力造就了今天这场当之无愧的业界盛会，也欣慰地看到我们的声音终于传到了W3C美国总部，传到了全球。让我们为之共勉吧。