第三期web标准化交流会小记

greengnn — Sat, 26 Dec 2009 14:38:47 +0000

首先要感谢与会者，UXday 百度FE和WED部门联合筹备这期WEB标准化交流会，还有盒子咖啡美味的糕点和辛苦的服务生们。
本期交流会话题是页面重构合理化讨论，详细信息点击这里查看。我是本次的主持人，感觉大家讨论的质量和热情比以前几期都有很大提升，不足的地方就是场地时间是17点的，还有两节话题还未讨论。
还是记录些技术话题吧，解构合理化这块，大家对DTD的统一都认可的，一个团队的项目必须统一一个DTD，但是不同的团队可能有不同的侧重，有团队历史原因，还有浏览器等当前的客观原因。通过W3C验证，较多人持反对太对，因为代码是写给人看的，没必要刻意的去通过验证，我的观点是验证是一个很好的工具，可以在debug的时候减少很多结构嵌套错误带来的不必要的麻烦，一些过分苛刻的验证我觉得是可以妥协的，比如&的转移，因为太多而且很麻烦。语义化是html的根本，界面为中心的前端人士可能不认可，但是写html就像写其他语言一样，必须遵循它基本的定律和原则，语义化就是写html的原则。命名规则统一也是可以的，但是方案没讨论出来什么样的比较好，我偏向微格式的命名，小写英文数字和减号线的组合。对于微格式和RDFa很多与会者不清楚，看来语义被太多人无视了，其实微格式部分规则已经被google接受了，纳入了搜索算法中，这方面有疑问的可以去google的网站管理员帮助里查看。命名语义可以借鉴微格式和html5，这样团队都熟悉和认可的方案，而且是业界公认的，让整个页面的命名一致性更大，换工作也好适应。
CSS这边没什么好讲的，基本三层分机，公共规则，reset等，公共模块，和具体应用都被接受，当然个例比如换肤等的要特别处理。对于CSS编码这块就有争议了，utf-8的css编码可以避免中文乱码和CSS IE某浏览器读取失败，但是通过转码可以解决，winter讲到utf-8会增加字节，当时我比较晕菜，因为这是对的，但是忘记了css中大部分是英文，只有中文才会增加字节。CSS压缩这块，我希望能讨论出自动化的方案，但是失望了。
素材合理性，我比较关心的图片最大字节规定没出现结果，不过还是有些案例可以参考，比如有的人的团队是60k，有的是30k，我的底线其实是100k。图片的管理，也没实质的结果讨论出来，其实本意是讨论图片的目录划分和css sprites的管理以及版本管理，可能太细节了，大部分同学的工作环境不会太多涉及。png-8的认可度很高，也提到了图片的压缩工具，要顶下。
很可惜的几块，JS合理化中的框架的选择和JS的性能没能讨论到，还有HTML5 CSS3在项目中如何运用起来的话题，可以留到下一期继续讨论。

-EOF--

模块化之HTML CSS IMG

greengnn — Wed, 23 Sep 2009 08:51:05 +0000

页面模块化的实施，这里指的是针对除去JavaScript部分的页面代码进行模块化实施。通过html css 图片进行模块化。
页面模块化的实施思路是高度耦合的页面片段封装，模块布局作为公开接口，高度耦合的页面进行封装，使用独立的css文件，高度耦合的图片进行封装，给某类相关性强的图片建立文件夹。
页面模块化的目的是，实现多人协同开发页面，提高页面研发速度和降低维护难度。研发速度的提升体现在多人协同并行开发，维护难度体现在减少版本的混乱，根据模块区分版本降低版本间代码冲突和文件错误覆盖。

拆分页面模块，从小到大的分解
1. 拆分页面模块
一个页面有很多个小单元模块组成，他来自有原始需求文档，比如
logo，导航，内容1，内容2，内容3，内容4，尾部导航，版权信息等等。
根据他们就可以拆分出基本的模块。
2. 拆分网站模块
将整个网站安排频道或者分类进行拆分，比如
首页，内容页，文字列表页，图片列表页，频道1页面，频道2页面，分类1页面，分类2页面，后台管理页面，等等
3. 每个网站作为一个模块。比如
商城站，支付站，论坛，三个站独立为三个大模块。

模块化实现
1. 高度耦合提取为一个模块，将模块代码作用域进行控制
代码1.非继承模块，通过后台选择符方式控制作用域


	title
	
		con
	
	more


.mode {}
.mode .title {}
.mode .con {}
.mode .more {}


	
	 关于
	 合作
	 招聘
	
	Copyright © 2009 某公司 版权所有


.footer {}
.footer ul {}
.footer p {}

代码2.继承模块，提取众多模块中公共部分，具体模块通过优先级进行处理。继承模块方面整站某些模块的批量修改处理，也提高复用性降低代码重复。

.mode .title {}
.mode .con {}
.mode .more {}


	title
	
		con
	
	more

2. 页面模块
页面模块代码作用域的控制通过css文件来控制。某类具有高度耦合的页面使用自身的css文件。
3. 模块间的公开接口
上面是模块的封装，公开的接口在页面中表现为什么？
首先是reset，base，可继承模块，这些代码是开放接口，必须根据这些代码进行页面代码开发，也就是你的页面代码必须在以上代码基础上开发。
其次是css文件，css文件名称和他作用于那些页面。
再次是布局、模块class，id命名，模块在页面的哪个位置。在CSS中的表现就是定位，布局，和部分盒模型。float、position、width、height等等。布局通常使用css作为接口实现，如果布局具有高度的逻辑性，完全可以通过html和css组合进行，比如960 Grid System，或者采用YUI grid.css。模块class和id的命名用于区分模块，不能在一个页面的所有css中出现不同模块同用一个class和id名。

规划整站模块
上文提到的基本的原理，真正实施起来还是存在很多问题，模块粒度问题，公共模块与普通模块的区分，继承模块是否值得继承等等，页面模块如何划分。
首先，了解你的项目，通过画网站树状图了解你网站的总体结构和页面模块
其次，理清结构逻辑和视觉逻辑，结构逻辑就是看你的页面由那些模块组成，视觉逻辑了解可继承模块，布局逻辑（网格布局或者非网格布局）

附图：

GreenGnn.ORG - images

第三期web标准化交流会小记

模块化之HTML CSS IMG

title

title