WebRebuild活动分享-LSM实践
PDF: http://hikejun.com/sharing/lsm-practice-kejun.zip
2.
分层语义化模板的简称LSM
分层其实指的就是展现层的MVC结构
语义即指语义化标签和命名，又指结构化数据。目的是更合理定义信息架构。
4.
其实设计师和前端工程师都是信息的传达者。前端工程师并不是完全follow设计。看个例子：
http://hikejun.com/work/qq/spec/example_mod_compare.html
wireframe是交互设计师的语言，视觉是设计师的语言，代码是工程师的语言。其实三者要表达的东西是一致的。
5.
先看看传统的前端开发方式。设计师follow产品经理，前端工程师follow设计师
6.
这种串行方式，当某个环节出问题都会影响后面的环节。实际上，模糊的产品定义导致善变的设计再导致混乱的代码，这种糟糕的连锁效应是经常发生的。
7.
更合理的关系是这样。设计师依据PRD进行视觉设计，同时前端工程师依据PRD设计html结构，当视觉设计完成后再开发CSS。
8.
显然，这种方式最大的特点就是串行变成并行。
9.
从产品设计角度讲，分层就是：信息架构 > 视觉表现 > 交互行为
从开发的角度讲，分层就是：M（模型）V（展现）C（控制）。这个又是和后端完全对应的。
10.
前端的开发过程就像“洋葱皮”似的。从最原始的内容（或数据）一层一层的增强。
11.
所以UI的开发过程应当是渐进的过程。我们看一个实际页面的例子。
12.
第一步根据wireframe和统一的页面布局、模块结构搭建HTML
page_base_style_0.png
第二步实现核心样式。核心样式是全站的统一风格，包括：标签reset，字体,链接，模块容器，通用模块样式（提示、列表、按钮等），页面布局，以及常用的rules(高亮、隐藏、清浮动等)。
page_base_style_1.png
第三步实现模块的统一样式。产品(或频道)级模块通常都会有自己的统一风格。
page_base_style_2.png
第四步实现页面级的专有样式。
page_base_style_3.png
第五步实现页面上的动态效果和数据交互。
17.
这种渐进式开发的优点，首先是可以很好的控制每一级UI的的一致性，全站级 > 产品（或频道）级 > 栏目和页面级。
开发和设计可以同步进行。像刚才的例子2到4步对UI样式的实现完全通过CSS实现。
每一级都有很多通用的部分被规范出来。基于统一规范和模式，会使开发效率大大提高。
18.
第一步是最关键的，就是HTML的搭建。
通过代码是可以想象出信息的结构和形式。
22.
LSM可以实现更灵活的前端。这种灵活性除了体现在应对展现形式灵活的变化，另一个方面就是“重用”。
重用是信息的重用，不要误解为风格的重用。
23.
网站重构中很重要的一点就是规范标准的结构和模式。
24.
标准的页面布局结构。这个通常都会做。
标准的模块结构。虽然模块的表现形式多种多样，但仍然可以抽象出一致的结构。
对于模块完全可以进一步归纳和分类，形成标准模块。
27.
新的模块从标准模块组合和派生出来。
28.
最后总结一下。分层使前端更灵活。模块化使前端更有秩序。语义化使信息的重用和二次开发变得轻而易举。建立面向LSM的规范和标准，可以使团队批量生产质量均等的页面，
29.
产品的UI可以得到统一的控制，
30.
同时使团队的协作程度更高，代码更可控，开发效率更高。
用例源码: http://hikejun.com/work/qq/share_8.4/example2/article.html
Tags: html
十二月 12th, 2009 at 9:21 下午
昨天下午的交流会 讲得很认真哈 辛苦了 谢谢
十二月 12th, 2009 at 9:38 下午
谢谢克军的分享。
十二月 12th, 2009 at 11:44 下午
不错的分享，我平时开发也是先写html结构，然后再套css，这样可以确保在样式丢失的情况下，信息还能够完美的呈现出来
我查看了一下你的demo的源码，其中有一段是这样的
腾迅网友 2009-07-02 14:43:20
评论内容，评论内容
不是很理解，li包含div p标签是否符合html的嵌套规则？
十二月 13th, 2009 at 6:39 上午
@lanqy w3c的dtd
< !ELEMENT LI - O (%flow;)* -- list item --> li可以包含 flow
< !ENTITY % flow "%block; | %inline;"> flow是block类型或inline类型标签
所以，li包含div p标签完全符合嵌套规则。
十二月 13th, 2009 at 6:52 上午
期待能看到视频~
十二月 13th, 2009 at 9:16 上午
webrebuild中最重量级的分享，相当不错
十二月 13th, 2009 at 8:58 下午
[...] 军在 WebRebuild 中分享了《LSM 实践》，很不错的议题。下面是我的一些想法。 [...]
十二月 14th, 2009 at 11:45 下午
我觉得有点问题，就是当设计师和html工程师并行工作室，如何保证工程师的html一定能够仅仅通过css就能精确表达出设计师的设计？
十二月 15th, 2009 at 5:43 上午
@kaka 如果设计师天马行空的设计肯定不行。前提是设计师必须基于wireframe和原型图设计。html是描述wireframe和原型的结构的。再通过css控制样式。当然，这对html结构的灵活性有一定要求，也是考验html设计能力的时候。所以，html不是越精简越好，而是越灵活越好。比如雅虎的标准模块结构
十二月 16th, 2009 at 11:29 下午
WebRebuild大会演讲《揭秘HTML5和CSS3》分享...
昨天在WebRebuild大会上分享了《揭秘HTML5和CSS3》，现来总结一下。
PPT在这里：
View more presentations from Adam Lu.
我先从网站标准的简单历史开始讲起，从2001-2006年是XHTML(content)和CSS2(presentation)流.....
十二月 20th, 2009 at 11:43 下午
俺提出的问题被需多的人误解，给克军找了麻烦哈哈。
十二月 21st, 2009 at 12:03 下午
hi，克军，刚看LSM实践的视频中听你提到一个CSS Module，可以在这个结构上实现很复杂的UI效果，非常希望能了解一下这个东西，刚在Google里没找到，不知能否分享一下这个CSS Module的名字，3Q~:)
十二月 22nd, 2009 at 4:08 上午
@十年磨一剑 是css mojo 介绍在这里 http://www.lesliesommer.com/wdw07/html/
十二月 23rd, 2009 at 11:24 上午
@kejun 哈~ 谢啦~ 原来是css mojo，我E文太烂了
一月 21st, 2010 at 3:07 下午
看了这篇文章，终于可以解决自己所在的小团队的流程规范问题了，谢谢博主
二月 6th, 2010 at 4:03 上午
终于找到这样的好文章了，我就是想了解这些东西……
二月 9th, 2010 at 3:41 上午
克军分享的视频地址如下：
http://www.youku.com/playlist_show/id_4014160.html
三月 5th, 2010 at 9:49 上午
任何事情都要有合理的流程化，前端设计看来也不例外。
三月 10th, 2010 at 11:26 下午
感谢kejun的分享,受益了！
六月 23rd, 2010 at 4:56 上午
设计与前端并行是一种不错的方法
提高效率，也对前端人员的全盘把握能力提出更高要求。