请选择进入手机版 | 继续访问电脑版

收藏本站腾讯微博新浪微博

邮件列表客服QQ 800003860 切换到窄版

点点网模板设计大赛

phpchina

蓝色理想最新研发动态 用悬赏三天解决问题解决访问速度慢 论坛支持农历生日 - 给官方提建议

论坛活动及任务 归纳网站最新活动地图任务 邮件更新任务:保护帐号安全

积分换实物，来参加蓝色理想积分兑换吧！ 联系招聘客服蓝色理想帮你找工作！ 万元奖励等你拿——点点网模板设计大赛

经典论坛 › 论坛 › 网站开发区 › HTML5及WEB标准化专栏 › 内容结构表现行为的分离

发新帖

查看: 4838|回复: 26

[讨论] 内容结构表现行为的分离 [复制链接]

greengnn　楼主

酒酣几度

荣誉管理 

帖子: 1367
体力: 3521
威望: 127

发表于 2008-1-13 03:42:33 |显示全部楼层

老话常谈的问题了，分离，从标准到国人重视那天起，就已经讨论了，但是停留在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的结构会相同嘛？
类比，如果你的策划，给两个交互和视觉设计师处理，页面构建的结构会相同嘛？
答案是肯定的不会相同，为什么不会相同呢？
这是本次讨论的问题

blog Web标准化交流会 WEB标准群：23783439

西部数码顶级域名注册商39元抢注！

使用道具举报

帖子: 13
体力: 21
威望: 0

发表于 2008-1-13 13:18:02 |显示全部楼层

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

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

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

租服务器，上51IDC | [长沙]招聘:PHP经理10K/WEB前端6K/PHP开发6K

使用道具举报

greengnn　楼主

酒酣几度

荣誉管理 

帖子: 1367
体力: 3521
威望: 127

发表于 2008-1-13 15:56:15 |显示全部楼层

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

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

blog Web标准化交流会 WEB标准群：23783439

使用道具举报

半成品

银牌会员 

帖子: 994
体力: 2642
威望: 0
居住地: 江苏省苏州市

发表于 2008-1-13 23:15:12 |显示全部楼层

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

http://www.qianduankaifa.com

使用道具举报

帖子: 288
体力: 1191
威望: 0
居住地: 陕西省西安市

发表于 2008-1-13 23:24:52 |显示全部楼层

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

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

使用道具举报

猫子小宁

银牌会员 

帖子: 508
体力: 2342
威望: 30
居住地: 浙江省杭州市

发表于 2008-1-14 16:12:48 |显示全部楼层

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

使用道具举报

wangyingdong　

帖子: 211
体力: 194
威望: 0

发表于 2008-1-14 16:24:04 |显示全部楼层

技术是无止境的。。

哪个好用用哪个。。

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

使用道具举报

宇天蓝

帖子: 1348
体力: 1999
威望: 0
居住地: 甘肃省兰州市

发表于 2008-1-15 13:29:24 |显示全部楼层

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

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

"有的人理解的不正确"

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

天宝斋书画网CNTBZ.COM

使用道具举报

alou　

小娄

帖子: 409
体力: 1682
威望: 0

发表于 2008-1-15 15:48:24 |显示全部楼层

举例说明那就更加好了

使用道具举报

蓝色王子

帖子: 192
体力: 549
威望: 0
居住地: 广东省广州市

发表于 2008-1-17 00:45:20 |显示全部楼层

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

使用道具举报

林小志

荣誉管理 

帖子: 2439
体力: 3085
威望: 25
居住地: 上海市长宁区

发表于 2008-1-17 00:49:15 |显示全部楼层

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

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

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

这里是可以点击的，你会点吗？

使用道具举报

火星

银牌会员 

帖子: 416
体力: 1264
威望: 5
居住地: 湖南省长沙市

发表于 2008-1-17 18:28:03 |显示全部楼层

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

举一个例子：
论坛下面的链接
清除 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里要多得多，如果项目时间紧张，相信很多人就直接偷工减料了。

不潜水不灌水

使用道具举报

帖子: 222
体力: 423
威望: 0
居住地: 广东省深圳市

发表于 2008-1-19 11:27:40 |显示全部楼层

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

使用道具举报

greengnn　楼主

酒酣几度

荣誉管理 

帖子: 1367
体力: 3521
威望: 127

发表于 2008-1-20 01:25:57 |显示全部楼层

回复 #13 marsidea 的帖子

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

blog Web标准化交流会 WEB标准群：23783439

使用道具举报

体验css

帖子: 207
体力: 361
威望: 14

发表于 2008-1-20 12:52:29 |显示全部楼层

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

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

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

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

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

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

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

使用道具举报

greengnn　楼主

酒酣几度

荣誉管理 

帖子: 1367
体力: 3521
威望: 127

发表于 2008-1-22 13:33:56 |显示全部楼层

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

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规则的情况

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

blog Web标准化交流会 WEB标准群：23783439

使用道具举报

宝儿

帖子: 1600
体力: 11357
威望: 43

发表于 2008-1-27 23:02:33 |显示全部楼层

回复 #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

使用道具举报

缘由心生

帖子: 473
体力: 2799
威望: 2

发表于 2008-1-28 09:12:19 |显示全部楼层

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

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

使用道具举报

那个女人

帖子: 844
体力: 1339
威望: 0
居住地: 广东省湛江市

发表于 2008-1-29 19:26:32 |显示全部楼层

回复 #18 zbm2001z 的帖子

<style type="text/css">
li{
display:inline;
}
li+li:before{
content:"- ";
}
</style>

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

使用道具举报

非典型民工

高级会员 

帖子: 195
体力: 998
威望: 0

发表于 2008-1-30 11:10:58 |显示全部楼层

理想与现实的差距

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

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

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

使用道具举报

正淳

帖子: 115
体力: 118
威望: 0
居住地: 浙江省杭州市

发表于 2008-2-13 14:01:15 |显示全部楼层

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

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

使用道具举报

帖子: 87
体力: 355
威望: 0
居住地: 广东省惠州市

发表于 2008-2-14 12:34:07 |显示全部楼层

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

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

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

大头 --- bigik.cn

使用道具举报

Andy88

帖子: 2590
体力: 1823
威望: 0

发表于 2008-2-15 10:47:02 |显示全部楼层

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

Thr's an I in happiness, thr's no Y in happiness

使用道具举报

onlylove

帖子: 316
体力: 1367
威望: 0
居住地: 广东省广州市

发表于 2008-2-16 16:52:01 |显示全部楼层

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

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

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

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

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

我不是最笨的但也不是最聪明的人.

使用道具举报

帖子: 20
体力: 52
威望: 0

发表于 2008-2-16 22:50:17 |显示全部楼层

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

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

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

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

使用道具举报

帖子: 29
体力: 502
威望: 0

发表于 2008-2-21 10:35:36 |显示全部楼层

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

使用道具举报

银牌会员 

帖子: 1333
体力: 1137
威望: 0
居住地: 浙江省杭州市

发表于 2008-2-22 15:02:03 |显示全部楼层

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

使用道具举报

发新帖

Archiver|手机版|安久科技提供CDN|blueidea.com ( 京ICP备05002321号 )

GMT+8, 2012-2-12 08:48 , Processed in 0.119526 second(s), 10 queries , Gzip On, Memcache On.

Powered by Discuz! X2

© 2001-2011 Comsenz Inc.

回顶部