打印

[讨论] 内容结构表现行为的分离

本主题由 greengnn 于 2008-1-31 11:43 解除置顶

greengnn [楼主]

酒酣几度
荣誉管理团队

帖子: 1058
体力: 1611
威望: 114
当前: 广东深圳
离线: 9 天

1^# 大中小发表于 2008-1-13 03:42 只看该作者

老话常谈的问题了，分离，从标准到国人重视那天起，就已经讨论了，但是停留在div+css xhtml+css 纯代码的分离，思想上流程上，到底如何分离？

看读读一篇老文章吧
http://www.w3cn.org/article/tips/2004/43.html

一首古诗的分离

1.给你一首古诗，保存为毫无格式的一堆文字，你去理解它的内容，进行结构的处理。用word排版之后，他有了结构
2.这个结构其实包含了语义和表现
3.用html进行结构化，抛开一切的表现形式，只考虑语义
4.用CSS进行表现处理，包括html的默认表现，他拥有了视觉表现，这个表现体现出了结构化，也体现出了用户体验，用户体验中包含了交互的排版和视觉体验
5.如果加上行为，比如点击注释序号，缓缓跳转到注释内容。

再看看csszengarden

同样是上面的5个步骤，形成第一版本的csszengarden
而更多的模板提供者所做的工作是交互线稿+视觉设计。体现在网页上就是CSS

可以看出从编码角度来讲，
第一步，内容处理为结构，纯HTML的编写
第二步，结构处理为表现，纯CSS的编写
第三步，给表现加上行为。

从流程的角度来讲
第一步，策划文档
第二步，结构处理
第三步，交互设计(交互样式构建)
第四步，视觉设计(视觉样式构建)
第五步，样式构建

再逆向思维
如果没有csszengarden，设计师设计了几百张的设计稿，然后做成页面，HTML的结构会相同嘛？
类比，如果你的策划，给两个交互和视觉设计师处理，页面构建的结构会相同嘛？
答案是肯定的不会相同，为什么不会相同呢？
这是本次讨论的问题

greengnn's space/web design
Design your life with Web Standards Web商业模式讨论群：38032840

TOP

marchbox

新手上路

帖子: 13
体力: 16
威望: 0
当前: 北京朝阳区
离线: 123 天

2^# 大中小发表于 2008-1-13 13:18 只看该作者

说是内容，其实觉得“数据”比较贴切。理想情况下，数据需要去重用，需要被格式化成不同的结构，再加以表现和行为。

目前来看，用XML来储存数据，然后 [XML + XSLT] -> (X)HTML，之后 [(X)HTML + CSS] -> Interface，最后 [Interface + JavaScript] -> Interactive Interface。但数据和结构相分离的工作可以放在后端，也可以放在前端（前端很好的例子就是Aether的Blog，呵呵，但目前搜索引擎方面是个问题），需要在具体项目中再做考虑。

CSSZenGarden的例子可以体现出CSS在表现层强大的能力，但是每个人对一篇文档的语义都会有不同理解，更别说ID和class的命名了。所以，在实际的项目中，结构上的完全统一应该是没办法实现的，毕竟人不是机器人。所以，觉得统一的是数据，数据可以用不同方式进行结构化之后变成不同的信息，因为最终用户需要的还是是信息。

TOP

greengnn [楼主]

酒酣几度
荣誉管理团队

帖子: 1058
体力: 1611
威望: 114
当前: 广东深圳
离线: 9 天

3^# 大中小发表于 2008-1-13 15:56 只看该作者

XML为中心的WEB架构，现在没有成型的案例，也就是说做不起来。
这个讨论不是什么学术啊，未来之类的猜测，只是针对现有条件，现有工作流来讨论的。
为什么那么多张的CSSzengarden设计稿进行页面制作的时候，结构代码不能一致，很简单，每个人的理解不同。
但是每个人的理解不同是因为什么:
1.每个人的理解都是对的，但是存在差异
2.有的人理解的不正确

一个团队，不能每个人的水平都相同，每个人的理解都正确，自然每个人的理解也不能一致。
那是不是现实就不能改变呢？
其实我想提出一个规范化的东东，把可能规范下来的东西规范下来，降低沟通成本，降低错误率，提高后来者的适应性等等

greengnn's space/web design
Design your life with Web Standards Web商业模式讨论群：38032840

TOP

camper

半成品
银牌会员

帖子: 524
体力: 1029
威望: 0
当前: 江苏苏州
离线: 1 天

4^# 大中小发表于 2008-1-13 23:15 只看该作者

一语中的
现在的确还只是代码分离
思想和流程都没有分离

新博客

TOP

chenn

高级会员

帖子: 262
体力: 547
威望: 0
当前: 陕西西安
离线: 6 天

5^# 大中小发表于 2008-1-13 23:24 只看该作者

有人只是再炒作概念，其实并不是那么回事。我招聘人员一般不要求这样，但是能懂得规范确实是个不小的进步

只要心中充满爱,就会被关怀!

TOP

zergine

猫子小宁
银牌会员

帖子: 492
体力: 1036
威望: 26
当前: 上海杨浦
离线: 1 天

6^# 大中小发表于 2008-1-14 16:12 只看该作者

W3标准中对标签元素的语义已经解释的相当详细了,但是人对标准的理解是主观的,100个人看标准就有100份标准,只能用大量的示例来把大部分主观的标准缩小范围,真正要做到完全符合语义标准的时候,我又会想问,我们遵循的标准是否是正确的?我们遵循的又是谁的标准?

三人行互联网技术社区

TOP

wangyingdong

初级会员

帖子: 211
体力: 92
威望: 0
离线: 14 天

发短消息

7^# 大中小发表于 2008-1-14 16:24 只看该作者

技术是无止境的。。

哪个好用用哪个。。

www.dwww.cn 设计家园,网页设计,数据库,程序设计,酷站欣赏,网址之家

TOP

W3CSS

宇天蓝
高级会员

帖子: 551
体力: 781
威望: 0
当前: 广东广州
离线: 5 天

8^# 大中小发表于 2008-1-15 13:29 只看该作者

"每个人的理解都是对的，但是存在差异"

这就好比1题多解,简单快捷容易理解的方法是最好的.

"有的人理解的不正确"

这好比解题的过程是有问题的,答案却正确,这并不可取.

WEB标准化群:39577940

TOP

alou

小娄
高级会员

帖子: 335
体力: 699
威望: 0
当前: 上海徐汇
离线: 2 天

发短消息

9^# 大中小发表于 2008-1-15 15:48 只看该作者

举例说明那就更加好了

企鹅

TOP

wondgergis

蓝色王子
中级会员

帖子: 194
体力: 326
威望: 0
当前: 广东广州
离线: 33 天

10^# 大中小发表于 2008-1-17 00:45 只看该作者

行为层，表现层，结构层能够完完全全的分离？

omiga

TOP

phantom

林小志
版主

帖子: 1252
体力: 1406
威望: 4
当前: 广东深圳
离线: 2 天

11^# 大中小发表于 2008-1-17 00:49 只看该作者

引用:

原帖由 wondgergis 于 2008-1-17 00:45 发表
行为层，表现层，结构层能够完完全全的分离？

原理上来说能做到。
不过个人感觉要做到这步需要的经验跟能力都要到达一个程度后才能正常去体现出来。

再做一个页面或者一个站的时候，应该从多方面去考虑，团队多次讨论，把握细节，理解页面中需要表达的含义。

重构页面之前先重构自我

TOP

marsidea

火星
初级会员

帖子: 362
体力: 184
威望: 0
当前: 湖南长沙
离线: 1 天

12^# 大中小发表于 2008-1-17 18:28 只看该作者

完完全全的分离成本会很高，有时候只是一个小细节，需要花多出几倍的精力来折腾。

举一个例子：
论坛下面的链接
清除 Cookies - 联系我们 - blueidea.com - Archiver - WAP

按照完全分离的思想，“-”不属于内容，我们应该这么写：
<ul>
<li><a href="#">清除 Cookies</a></li>
<li><a href="#">联系我们</a></li>
<li><a href="#">blueidea.com</a></li>
<li><a href="#">Archiver</a></li>
<li><a href="#">WAP</a></li>
</ul>
或者干脆
<a href="#">清除 Cookies</a><a href="#">联系我们</a><a href="#">blueidea.com</a><a href="#">Archiver</a><a href="#">WAP</a>

中间的“-”可以用背景图来实现，这个大家应该都会做，这样一来，需要花的时间好精力肯定会比直接把“-”写到HTML里要多得多，如果项目时间紧张，相信很多人就直接偷工减料了。

不潜水不灌水

TOP

willko

中级会员

帖子: 203
体力: 390
威望: 0
当前: 广东深圳
离线: 1 天

发短消息

13^# 大中小发表于 2008-1-19 11:27 只看该作者

说实话，很多时候因为时间问题都理不了那么多了。。。

TOP

greengnn [楼主]

酒酣几度
荣誉管理团队

帖子: 1058
体力: 1611
威望: 114
当前: 广东深圳
离线: 9 天

14^# 大中小发表于 2008-1-20 01:25 只看该作者

回复 #13 marsidea 的帖子

- 符号是一种表现形式，但是又是一种数据格式，看交互怎么看待了，看做一个整体的尾部连接块，那就是存在意义的符号，就像你的电话号码
010-2321235 这样，这个 - 你就不能用背景吧

greengnn's space/web design
Design your life with Web Standards Web商业模式讨论群：38032840

TOP

cssxp

体验css
中级会员

帖子: 205
体力: 372
威望: 14
离线: 5 天

15^# 大中小发表于 2008-1-20 12:52 只看该作者

引用:

原帖由 marsidea 于 2008-1-17 18:28 发表
完完全全的分离成本会很高，有时候只是一个小细节，需要花多出几倍的精力来折腾。

举一个例子：
论坛下面的链接
清除 Cookies - 联系我们 - blueidea.com - Archiver - WAP

按照完全分离的思想，“-” ...

呵呵，舍本逐末的做法了。
这个不是关键的功能 - -b

如果说这是美工设计的，或者是程序员添加的。完全可以跟他们商量一下把 - 给去掉了。
这个是和人有关，和工作无关紧要的鸡毛蒜皮小事罢了。

吹毛求疵的做法，呵呵。
20/80法则，关键功能上不能有半点马虎了。

有时候做加法做累了，也可以做减法的了。不要死脑筋。

www.cssxp.net

TOP

greengnn [楼主]

酒酣几度
荣誉管理团队

帖子: 1058
体力: 1611
威望: 114
当前: 广东深圳
离线: 9 天

16^# 大中小发表于 2008-1-22 13:33 只看该作者

说说我发起这个讨论的目的吧

1.流程优化
策划文档——结构——交互设计——视觉设计——CSS
这期间结构能否经得住考验？
1.结构的扩展性
2.交互线稿是否遵循WEB条件的规则
3.视觉设计是否考虑到WEB元素的呈现方式

需要一些约定俗成的规则，比如什么情况使用表格呈现，什么情况使用列表呈现。比如两列列表的序号如何排列
1 2
3 4
还是
1 3
2 4

2.逆向思维下，由PSD到HTML有没有一些可以确定下来的结构规范。
csszengarden可以拥有N中表现和一个结构，是不是可以从视觉表现中抽象出某些视觉效果可以拥有固定的结构。

3.交互稿使用HTML的方式去呈现的优劣
1）效率会不会比图形的低
2）传达的交互理念，html是不是比html更容易传递，还可以避免图形化的交互稿不遵循WEB规则的情况

呵呵，是最近的一些零零散散的想法汇总的。

greengnn's space/web design
Design your life with Web Standards Web商业模式讨论群：38032840

TOP

zbm2001z

宝儿
荣誉管理团队

帖子: 1416
体力: 3731
威望: 41
当前: 北京昌平区
离线: 1 天

17^# 大中小发表于 2008-1-27 23:02 只看该作者

回复 #13 marsidea 的帖子

复制内容到剪贴板

代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>任何支持CSS2的列表样式</title>

<style type="text/css">

li{

    display:inline;

}

li+li:before{

    content:"- ";

}

</style>

</head>

<body>

<ul>

<li><a href="#">清除 Cookies</a></li>

<li><a href="#">联系我们</a></li>

<li><a href="#">blueidea.com</a></li>

<li><a href="#">Archiver</a></li>

<li><a href="#">WAP</a></li>

</ul>

</body>

</html>

我没看出这样要花多得多的精力，并且在不久的将来（IE版本强制更新），相信你也会很愉快的这么写。
至于直接把“-”写到HTML里，greengnn阐明了一些基本逻辑，你也可以参考下[url=http://w3.org/]W3[url]的主导航。
我不否认现实的不如意——IE系列长时间的不思进取在某种程度上的延缓了WEB技术和先进思想的长足发展。这就像工作和生活中的种种不如意——但这些永远不应该成为影响自己做积极思考和正确判断的任何理由。

我家宝儿：http://blog.sina.com.cn/u/1258716075

TOP

welcome58

缘由心生
银牌会员

帖子: 447
体力: 1034
威望: 2
当前: 北京海淀区
离线: 5 天

18^# 大中小发表于 2008-1-28 09:12 只看该作者

楼主既然想到需要一些约定俗成的规则来提高沟通效率，方便后来者，那何不抛砖引玉，列出一些你认为可以约定的规则，让大家提提意见

不懂就问
http://www.welcome58.cn

TOP

js135

那个女人
高级会员

帖子: 795
体力: 858
威望: 0
离线: 62 天

19^# 大中小发表于 2008-1-29 19:26 只看该作者

回复 #18 zbm2001z 的帖子

不回帖，不灌水。慎思，多问，好学，勤奋

TOP

youhuata

非典型民工
初级会员

帖子: 84
体力: 154
威望: 0
当前: 北京海淀区
离线: 7 天

20^# 大中小发表于 2008-1-30 11:10 只看该作者

理想与现实的差距

楼主的想法是非常好的，而且相信也是广大做前端的朋友们所希望看到的，但是在整个团队里面，管理层，或者单纯做UI设计而不懂W3C标准的人，他们是不希望如此的。

事实上现在国内的现状是绝大部分创业公司是没有交互设计这一步的，这一步通常被忽视，直接让做视觉设计的顺手做个大概就行了，甚至有些做视觉设计的纯粹是艺术专业出生，连CSS是什么都不知道，更别提什么分离的思想了……我现在的团队，曾经在开会的时候，做视觉设计的设计师给我们提意见说，你们不要在FF下开发吧，不要老是用firebg去调试…… 面对这样的同事，你说我还能说什么呢，我是真的无语了……

事实上现在国内的这一行非常的不健康，策划文档这一步开始，问题就很严重，策划文档往往是由产品经理一个人埋头苦干确定之后，再走走形式的开会讨论，或者根本就不讨论，甚至有的连个像样的策划文档都没有，仅仅是个大体思路，然后就直接让所谓的“美工”做视觉图了……

TOP

ragecarrier

初级会员

帖子: 66
体力: 90
威望: 0
离线: 1 天

发短消息

21^# 大中小发表于 2008-2-13 14:01 只看该作者

这样的讨论我很喜欢，可是由于保密原则，一些问题不好和大家交流。

只能说前端开发很苦，里外不是人。

TOP

bigheadlyf

初级会员

帖子: 77
体力: 156
威望: 0
当前: 广东惠州
离线: 2 天

发短消息

22^# 大中小发表于 2008-2-14 12:34 只看该作者

面对当前的“中国国情”，真正需要做“内容结构表现行为”分离的有多少？

现实面前，经济价值最重要，除非客户、设计师、开发人员、管理者都能够足够的重视，都能够看的足够远，要实现这种如今看来有点吹毛求疵的“分离”，还是需要时间，过程是漫长的。

如楼上朋友讨论的“-”问题，各种解决办法都必然存在自己的优缺点，哪种是标准？现在的标准还可以如何改进？也许这正是我们需要努力的地方。

大头 --- bigik.cn

TOP

dsqwei1

Andy88
高级会员

帖子: 846
体力: 726
威望: 0
当前: 北京朝阳区
离线: 1 天

发短消息

23^# 大中小发表于 2008-2-15 10:47 只看该作者

感觉现在css需要改进不少。
现在的css还做不到完全胜任结构表现分离。她不是孙悟空。
等html 和 css都接近完美时候还差不多

It is not mine,but it will be mine

TOP

onlylove

onlylove
高级会员

帖子: 278
体力: 599
威望: 0
离线: 1 天

24^# 大中小发表于 2008-2-16 16:52 只看该作者

引用:

原帖由 js135 于 2008-1-29 19:26 发表

li{
display:inline;
}
li+li:before{
content:"- ";
}

可以实现"-"？？怎么我测试没效果，我用IE。

有 + 号的样式要IE7以上才支持...

我现在是美工和CSS一个人做...并没人做团队...我个人还是喜欢专门研究CSS和网站可用性...可用性是一项很贴近用户的事情....

我不是最笨的但也不是最聪明的人..QQ:40201787
$学习 = "Dreamweaver+CSS+Photoshop+PHP+Mysql";
echo 我正在学习 ."$学习";

TOP

jaxxcyh

新手上路

帖子: 20
体力: 47
威望: 0
离线: 85 天

发短消息

25^# 大中小发表于 2008-2-16 22:50 只看该作者

引用:

原帖由 marsidea 于 2008-1-17 18:28 发表
完完全全的分离成本会很高，有时候只是一个小细节，需要花多出几倍的精力来折腾。

举一个例子：
论坛下面的链接
清除 Cookies - 联系我们 - blueidea.com - Archiver - WAP

按照完全分离的思想，“-” ...

12楼的例子很形象生动，本来嘛，简单的东西有必要搞那么复杂吗？我觉得，在大方向上遵守规范的前提下，允许自己的自由发挥，所谓“百花齐放，百家争鸣”总比“千人一面”要好吧？

TOP

keigoo

初级会员

帖子: 28
体力: 51
威望: 0
离线: 2 天

发短消息

26^# 大中小发表于 2008-2-21 10:35 只看该作者

学习中..话题不错...

TOP

fuguotao

中级会员

帖子: 854
体力: 338
威望: 0
当前: 浙江杭州

发短消息

27^# 大中小发表于 2008-2-22 15:02 只看该作者

在没有发现css布局技术快速高效的途径之前可以不用。

TOP

[讨论] 内容 结构 表现 行为的分离

引用:

回复 #13 marsidea 的帖子

引用:

回复 #13 marsidea 的帖子

代码:

回复 #18 zbm2001z 的帖子

理想与现实的差距

引用:

引用:

[讨论] 内容结构表现行为的分离