标签 html 下的文章

标记语言设计的抽象程度思考

发表于 WebBuild

突然觉得HTML越来越乱了,现在满世界都在喊着HTML5,前端同学好像都把他当作了一个救世主。

HTML是一门标记语言(Markup Language),标记语言在于他的设计不需要逻辑功能,他最主要的作用就是用确定的标签(在html中是HTML elements)来容纳有不同的内容。其实世间万物本来就有他自己的意义的,在网页上显示出来的一切文本、图像、视频也是。一块巧克力不把它放到巧克力盒子里我们一样知道它是巧克力,只是为了方便生产、运输、卖出的识别我们大多会将巧克力用包装装起来。一个图像我们不用img标签包含,浏览器也是有可能知道它是一个图像的,从一定程度上来说,超文本标记语言的发展是浏览器工业化发展的一个象征。将同类的的东西放到同一个特定的“容器”中,在oop中来说,就是类的思想了。

于是,真正引发的问题就是这个容器究竟该设计得多“大”?这就是设计中经典的抽象程度的问题了。阴阳五行足够概括世间万物、但不能完全描述世间万物。在HTML中,使用标签(Element)和属性(Attribute)二维结合来描述超文本资源。无奈所有的东西都是不断发展的,互联网也不例外。其实HTML5中多出来video等标签就像HTML2多出来img标签一样正常,虽然我们确实值得欢呼,也不用太为此担心兼容——想想gif、png、jpeg——我是达尔文物竞天择思想的支持者。但是我觉得HTML的设计从一开始就没有很好的考虑抽象程度这个问题,可能是为了迁就使用上的方便,最明显的就是这门语言虽然有结构树(DOM)的层级、但是没有意义上的继承,不管是从标签上还是属性上。HTML生来就是有语义的,XHTML想解决数据和结构分离,结果被传道士努力得让大家都只在乎结构和表现的分离了。XHTML2曾一度想放弃向前兼容,还推荐将图像从img标签过渡到object标签,以达到更高的抽象程度,用以更“方便”地描述互联网上将来越多的不同格式的其他资源。HTML5又干脆弄出来一大堆的极度语义化的标签。那么Microformat的出现又是因为什么原因呢?

要看清楚这些,其实我们应该明白其实W3C是一个商业组织。WHATWG更是一个商业化——最明白就是浏览器竞争——的产物。很多东西其实就是商业杂交出来的(比如最明显的代表就是鼓吹“高尚情操”的video标签),HTML的一出生就流淌着商业的血。问题还在于离开商业一切都活不了。

不要再讨论HTML5好不好、HTML5什么时候出来、我们什么时候用它。

有些东西你在思考的时候永远很难想到,比如中国特色的双核浏览器,虽然或许这只是在揠苗助长。

这是个最好的时代,这是个最差的时代。或许一直以来就是。

页面重构合理化讨论(第三期WEB标准化交流会总结)

发表于 WebBuild

昨天参加第三届WEB标准化交流会,讨论的话题是页面重构的合理化。会上大家都讨论得很热烈,我也在这里做下个人的总结吧。

WEB标准化交流会在北京已经成功举办了三届,首先感谢这三期以来积极参与讨论的参会者,感谢身边网百度UXday的场地支持,感谢W3C中国简单网buleidea、谷歌中国软件部、百度FE及WED团队的支持。我们也希望更多的前端爱好者参与到讨论会中来,共同讨论和推广WEB标准。

好了,回到昨天的讨论的话题吧。先从DTD开始,DTD其实主要是告诉终端你的doc是什么type的。就好像在入校之前你会告诉学校你的性别以方便安排你到男宿舍还是女宿舍一样,不写DTD就留给了浏览器一个“猜”的任务,这样其实是比较危险的,很多情况下你不知道浏览器会怎样来处理。假如春哥入学不写明性别,就可能有分错宿舍的危险。接下来讨论的是通过W3C验证的必要性,大部分同学观点比较明确和统一:通过W3C验证至少可以去除一些基础的嵌套错误。就像是照镜子吧,脸上有个脏的地方可以通过镜子照出来,有没有前列腺炎是不能照镜子照出来的,所以镜子是必要的,但是镜子不能反映所有的问题。这就是为什么会有医生为什么会有专业的前端开发者。语义化及命名规范以及由此衍生的microformats和RDFa等知识好像在昨天的参会者中研究的同学并不是很多,记得原先初中政治课中有说道规则是为了更大方面的自由。第二期交流会的时候就有提到行业规范化的东西、后来我和月影回来一直觉得可以推动这方面的工作,这个真的还是挺有意义的。社会主义是有可能实现的,关键是不能做空想社会主义也不能在实现的时候变质,我们的国家已经走了中国特色,我们的网页不能再走中国特色,如果你和我一样觉得互联网是当今世界社会主义最好的呈现的话。如果能理解就不会出现div和ul标签泛滥的情况,扯远了~。微格式和twiter的@符的马太效应使我们想到可以做和应该做的还有很多。关于标签更大语义化的工作W3C也在努力,大家应该可以在HTML5中感受到,就有同学提到了实际应用中经常遇到不知道该选择什么样的标签的问题,这也确实是现阶段HTML标签存在的一个问题。当网页内容越来越“丰富”的时候问题将会更加明显化,最开始的网页不是也不支持图片?现在的网页上img标签已经遍地都是了。不过世间万物可以归宗两象五行,又但是W3C曾有想将图片归用object标签来描述是合理的么?这方面可以思考的还有很多。会上有很多同学不太熟悉属性语义和属性值语义方面的东西,特发几个传送门:语义网microformats.orgRDFa

交流会的第二个讨论话题是样式合理化的问题。在实际应用中会分项目的性质来把不同的组织,一般小的个人网站就一个样式文件就行了,节省请求。对于具体的应用项目可以分离公共样式+项目特定样式的形式组织,大家的意见也都比较统一。讨论期间rekey有提到公用样式后期的特殊化的问题,相信这也是很多页面开发者遇到的实际问题。其实克军在12号的webrebuild要也有讲到这个问题,关于模块化的组织。核心还是在页面架构方面,好的架构可复用性和单独拓展性都是需要考虑到的,当然在实际项目中还要评估为什么以前的统一模块中有一个或几个要单独加/减其他东西。能不能实现改的功能是我们在架构时候需要考虑的,为什么需要改是产品和设计和我们协作的问题,有一个前期的一致规范是好的。克军上次也有提到接下来HTML要走一段路了,关于模块化方面的东西个人觉得某些方面是可以借鉴js框架的思维。HTML是洋葱的核心(?,见克军ppt),是牵一发动全身的东西,这么重要的东西不能三思而后行么?

第三个讨论话题是素材合理性,更多的涉及到了第一期讨论会网站重构中的文件组织和第二期讨论会CSS Sprites方面的知识。讨论到了图片格式的选择,结论还是大部分选择png-8、gif、jpg这三种格式,按需所取。比较理想的是期间讨论了图片压缩的话题,本来我们上周自己的组内也讨论了这个话题,两次讨论得到的结论都是压缩无止境,呵呵。其实素材管理很有讨论性的是图片管理和缓存方面的东西,我也很想听到各个公司对于这方面的实战经验,因为到会的有谷歌、微软、新浪、百度等大公司的前端,各个公司的部署肯定有很多不同,很有交流讨论价值,不过由于时间原因还是没来得及讨论。

很高兴在twitter直播上码头同学有提到“认为要做好页面重构的合理化最重要的是前期项目规划的合理化”。这其实是我一直在等待的答案。建筑结构工程师和只会砌墙(切图)的建筑工人,你自己怎样定位?知道这一点你就知道以怎样的态度来思考你在干的事情。

期待下一次的交流会,如果你也一样的话,请留意w3ctech官方网站,我们将在每月的最后一个礼拜的周六聚首讨论。更多信息可以follow我们的twitter:http://twitter.com/w3ctech或加入QQ群:46077068。

这个“竖线”应该是什么?

发表于 WebBuild

先看几个图吧:

QQ邮箱顶部导航

腾讯首页导航

Yahoo英文站搜索导航

腾讯首页顶部导航

淘宝栏目导航

提问:这些“竖线”分隔符是什么——在HTML里怎么表现?

  1. 仅仅在HTML里面插入一个竖线:|;
  2. 将竖线放在一个<span>标签里面;
  3. 作为背景图片插入(作为该导航连接的标签背景或者添加一个如<span>标签设置其背景);
  4. 作为列表(如果导航连接是放在一个列表标签里)的list-style样式属性;
  5. 作为border样式表现;
  6. others......

绝大部分网站将这个竖线表现为1或者2的形式,有些网站将这个用在了背景图(如淘宝),yahoo是用border样式表现的。到底用那种表现方式更好呢?

首先我们得弄清楚一件事:(从语义上来说)这个竖线到底是什么?

我个人的理解这是一个分割符(废话!),应该用border样式比较科学。打个比方:就像两个相邻的房间,中间分割的是墙。那么作为盒模型,border应该是最类似这个“墙”的。

只是,如果这个分割符不是一个“竖线”呢?像淘宝栏目导航和腾讯首页顶部的导航。我觉得这个分割(视觉表现形式)从HTML语义上来说没有明显的意义,在现阶段作为list-style表现可能比较好(不要说你的导航不是包含在列表里的)。

之所以说“现阶段”,是因为幸运的是CSS3已经支持将图片作为border(感谢腾讯文王同学提供参考文章地址),当然不幸的是还只有Safari和Firefox 3.1 (Alpha)支持这个属性,等到其他浏览器的支持估计不知道得等到什么时候。

上述观点欢迎大家发表不同意见。