页面重构合理化讨论(上)
Dec 29
Web标准化交流会 Web标准化交流会, 页面重构合理化 No Comments
认识建斌,裕波他们其实也算是件巧事儿,就是随便在BI里逛,看到一个”Web标准化交流会”的报名帖. 首先这个有”国际”范儿,但又不张扬的名字就吸引了我.来北京工作两年多,一直苦于没有与同行交流的机会.所以渴望能找到一个让我进步,学习跟”发泄”的组织~ 通过几次接触,我确定我找到了.哈哈
先说说这个”组织”吧,很简单,就是一帮对于”在国内高度普及Web标准应用范围”这一理想十分迫切的热血青年. 呵呵开得调儿调儿有点高.不过也不为过.大的方向是这样的.那么眼前的呢,就是希望通过交流能提高参加者的技术水平,从而提高整个Web前端开发人员的技术水平,最终让我们这些处境尴尬的”美工”,”Cutter”能受到公司的重视,行业的尊重及更好的工作机会跟实现自我价值的机会!
第一次参加,虽然大家都是第一次见面,但是讨论得特别热烈,让我想继续参加第二次.虽然第二次的讨论气氛不如第一次好,却让我认识到了这帮特别靠谱的人.我希望加入他们,能为这个交流会做些什么.哈哈,还没等我开口,组织的头儿就”相”上我了~~从此光荣地加入了这个组织~成为一名工作人员~~
最近开通了自己的博客,记录自己的学习过程,梳理两年来的知识. 借着交流会,阶段性的总结一下交流的成果分享给大家.慢慢认识到”分享”的重要性.
前两次的总结基本上也可以在这次讨论中有所体现,所以都整一起算了,可能会很长.我慢慢写,大家慢慢看哈
讨论的主题是:页面重构合理化讨论
具体话题是:
一、 结构合理化
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) 图片缓存
四、Javascript AJAX DOM
a) 如何创建自己的js库或js框架,选择JS库或框架
b) JS的管理
c) JS的性能备选议题[如果会议时间还有富余可以讨论]
一、HTML5+CSS3
a) 如何使用html5
b) 如何使用CSS3
一、 结构合理化
Web标准最被大家熟知的理念就是:结构合理化,标签语义化.虽说Web标准是个标准,但目前都是以一些”推荐”为主.更别说合理语义化了,这个词听起来就很”因人而异”的感觉.其实我个人觉得,一个页面结构是否合理很大程度上依赖于你对于这份从Marketing那边过来的需求文档理解得是否深刻,如果他们的需要明确,将网站网页需要表达的东西合理的展示给你,再加上你对文档的充分理解,想要将一个页面很有”语义”地”讲”给浏览器并让它也明白,让搜索引擎也明白并不是一件很难的事情.
- 统一的DTD声明 html4.01 xhtml1.0 html5
DTD(Document Type Definition) :文档类型声明.这个东西必须要在重构页面前统一声明好.因为它是告诉用户使用的各种浏览器按照什么方式去渲染页面的一系列语法规则文档.如果没有声明,浏览器就会用其它不理想的方式解释你的代码,到时候就会出现许多问题.
讨论过程中,大家都对于统一声明DTD这一点毋庸置疑.但什么情况下用什么样的类型呢?大多数同学都使用Xhtml1.0 的Transitional类型.
由于本人之前对这块具体分类比较混乱,所以在此查些资料,把结构理理清楚:
HTML4.01 :
Strict: <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
Transitional: <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd“>
Frameset: <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN” “http://www.w3.org/TR/1999/REC-html401-19991224/frameset.dtd”>
XHTML1.0:
Strict: <!DOCTYPE HTML PUBLIC “-//W3C//DTD XHTML 1.0//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
Transitional: <!DOCTYPE HTML PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
Frameset: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”>
XHTML1.1
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>
HTML5
<!DOCTYPE html>
- 通过W3C验证
讨论过程中,大家提到W3C验证到底有什么意义,难道通过了验证,你的网站就标准了?用户体验就最好了?对搜索引擎也友好了?不一定,通过验证,只能帮助你检查出一些语法错误,不符合规则的嵌套,我们不能将通过验证做为网站重构的最终目的,它只能是做为帮助我们检查代码的工具,算是推广Web标准过程中种小小的”手段”吧.不知道这么说是否合适. - 语义化的html 标记应用
前面就提到了,语义化这个东西操作起来很难做到理想,首先HTML能提供给我们的有语义的标签就不多,再加上每个人对于数据,内容含义的理解也不同.所以想让浏览器,以及各个手持设备和其它终端准确地读出内容就更有一定难度了.也这是Web标准需要推广的主要意图.现在阶段我觉得我们能做的有下面几点:
1)良好的与产品团队及设计师沟通,充分理解网站内容
2)正确使用W3C推荐的合法标签以及嵌套规则
3)与前端开发团队制定好开发文档,统一模块代码及class/id命名,命名时要使用非表现形式的命名方式,要告诉机器这是什么数据,而不是告诉机器这是长成什么样的数据(因为后者是CSS的事情).
4)多学习借鉴HTML5的新标签定义方式,以及目前业内公认的大的模块的代码结构及命名方式. - 语义扩展 microformats或RDFa
对于microformats我了解得不多,整体上感觉就像是用HTML写XML,只注重数据的内容与结构.具体应用上还需要进一步学习,学习之后会补上相应的文章,与大家分享 - Class id命名规则一致性,借鉴html5新标记名称和microformats。
这个问题上面也提到了,问了几个大公司的同学,开发项目之前肯定是会统一UI模块代码,定义class/id命名规则.在class命名上大家都比较喜欢像Javascript函数 变量声明那样,开关单词小写后面单词首字母大写,其它小写的方式.能用英文单词尽量用英文.另外还提出了有些公司不允许前端HTML/CSS开发人员使用id,是为了避免与前端脚本开发人员的命名冲突.但是我觉得一些大的唯一的模块的id命名还是应该交给html/css开发人员的,就像一位同学说的,id不只属于脚本开发人员,它是整个前端的东西.当然为了项目的方便管理,这点是可以理解的. - SEO
其实将以上几点做好,再加上注意一些图片描述,命名,关键字等等问题,前端人员对于seo方面的优化基本就是可以了.
Recent Comments