标签 xhtml 下的文章

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

发表于 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什么时候出来、我们什么时候用它。

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

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

重构的中国移动首页

发表于 WebBuild

这段时间在学校没有很多事,就将一直“看不惯”的中国移动的首页给重构了下玩玩。重构之后的网页:http://www.ivershuo.com/did/for_cmcc

下面是重构的效果:

重构网页和原网页对比

可以看出重构之后的页面大小(131.1K+127.3K=258.4K)不到原网页大小(525.5)一半,HTTP请求大幅度的减少。单从经济方面来说,也算不小的一笔开销节约了。

首先说说原网页有哪些地方不够合理吧:

  1. HTML标签混乱,结构不够合理;
  2. 过多的图片装饰;
  3. 浏览器兼容做得不好;
  4. 可访问性有待加强;
  5. 多余的样式和脚本(因为首页和内页的布局几乎完全不同);
  6. 那么大的一个FLASH放在内容前段!

所以在重构的时候主要从这几方面下手。使用XHTML+CSS重写结构和样式,完全通过W3C验证,HTML代码从原来的834行精简成342行;尽量兼容流行的浏览器(经测试,在WIN平台下的Firefox3、IE6、IE7、Opera9.6、Chrome2、Safari4 beta表现基本和原网页一致);重做装饰图片,减少HTTP请求;增强可访问性,使用可禁用、兼容且无侵入式的脚本。最后我觉得首页的那个大FLASH——并且正在我准备重构的时候,他又换了个更大的FLASH——对于页面的载入影响比较大,何况还是使用的用户并不多的移动线路,曾经我使用教育网的时候就很难完整的刷开移动的首页,所以对于这个FLASH个人颇有微词。

重构热点图

上图显示了页面主要重构的部分,下面列表的每项对应上图相应数字热点区域:

  1. 这里主要简单的做了个SEO的优化,思想借鉴了Google搜索结果页面的LOGO编写方式。关于细节可以查看原代码,至于可行性有待讨论(在CSS森林群里面讨论时,来自腾讯重构组的不赞同隐藏IE下无效图片的红叉);
  2. 个人认为这里是整个页面最杂乱的地方,没有办法,我得保留原来的呈现。优化了这里几个元素的底图,对英文版链接动态样式底图合并,并保证图片失效下的可用性(具体方法查看源代码)。搜索按钮使用border样式替换原背景样式。省公司的下拉链接添保证了禁用js下的可用性;
  3. 这里优化底图。不过使用了一个多余的标签,并不是完美的重构,希望能找到更好的方法;
  4. 这块的结构动了大手术,解决原网页在结构上的不科学、浏览器的不兼容及js禁用下tab无法切换的等诸多问题;
  5. 这里解决在Firefox等浏览器下不显示背景问题,及下拉链接添保证了禁用js下的可用性。

在文档结构上,吝啬的使用了Zeldman推荐的“i”、“j”、“c”文件夹分别保存图片、脚本和样式表,并且将网页需要动态替换的广告图片另外存放以便后台程序处理(真正使用中不推荐使用名称为“ad”的文件夹,以免被广告拦截软件拦截)。

这是一个基础的网站重构的例子,对于想了解网站重构的朋友或许有点帮助。当然在正式的重构中还有很多需要做的,也希望各位朋友指导我需要改善和提高的地方。

最后要说的,大家不要批评中国移动的网页开发人员,他们比我们大多数人优秀,技术比我们也强,只是在真正的实施中会有其他不可控的客观原因,如历史原因、产品经理或者老板的压力等。所以我更希望在中国各位网站负责人能真正重视网站重构,因为他确实能使你节省钱,获得更多的客户……

下面这个写给豆瓣看的,各位可以无视:doubanclaim4ab4a8b8908a8c2b

中广核校园招聘(补招)[能力测验部分]答案

发表于 WebBuild

早两天老师发个通知下来,是中国广东核电集团补招的消息,然后要去广核网站上填写简历,有几个同学去了,说网站要答题,是智力测试的那种,-_-!。然后我刚才去看了下,基于“职业”敏感,打开页面先直接Ctrl+U,然后发现:乖乖~嘻嘻

首先,基于为Firefox讨个公道的原因,批评一下网站验证码部分的设计。页面网址(http://www.cgnpc.com.cn:8002/hrrs/Campus/CampusMain.html

function showAuthCode(e,whichone){
        if (whichone.style.visibility == "hidden"){
            whichone.zIndex++;
            whichone.style.left=document.body.scrollLeft+event.clientX-event.offsetX-3;
            whichone.style.top=document.body.scrollTop+event.clientY-event.offsetY+21;
            whichone.style.visibility="visible";
        }else{
            whichone.style.visibility="hidden";
        }
}

上面是验证码输入框onfocus()的js代码,你说你个验证码到底是给eval robots看的还是给human看的?!

Firefox用户同僚可以直接输入http://www.cgnpc.com.cn:8002/hrrs/imageCode这个网址将得到的验证码填上就可以了。

然后登录,通过对我的鄙视(第一个页面那里我都需要选择“否”)之后就进入了能力测试部分,题目就是汪涵主持的那个什么什么英雄的那个答题节目差不多的题。我就不多说了,直接教大家答题:查看源代码,通过几个frame,再查看源代码(这页的http://hr-exam.cgnpc.com.cn/User/AbilityDo.aspx),你会发现下面的源码(我精简了只留下核心部分):
第3题:0, 2, 6, 12, 20, ( )

<input type="radio" value="0" />A.28
<input type="radio" value="1" />B.30
<input type="radio" value="0" />C.40
<input type="radio" value="0" />D.48

我想稍微有点智商的朋友都知道选哪个了吧!然后再提醒一下用Firefox的朋友,这里提交的时候在IE下会有验证,如果题没有答完会弹出警告框来提示并阻止提交的,然是Firefox下不会提示而直接给你提交,并且不管答题是多久时间都是0。

我以前没有看到过一个程序这样的依赖前端脚本(并且是非标准脚本)来判断和处理敏感数据,并且还是用在大型的公司上(据该程序的官方网站上注明,广东移动也是用的这套系统)

点击下面的连接打开我整理的答案

- 阅读剩余部分 -

将twitter添加到XHTML页面

发表于 WebBuild

因为twitter在国内的访问速度实在太慢,之前一直都没有将它放到博客。但是我的博客很久不更新,现在终于还是决定将twitter放上来,写twitter还是比较容易的。
没有去研究Twitter的API,因为它本身提供了添加到博客的widget,就直接用了。个人推荐用js版本的,因为可以通过CSS来改变输出样式。并且需要将后面的两个js链接放到网页<body>标签的最后(有统计代码的可以放统计代码之前,尤其用google统计的,如本博客),因为前面说了国内访问twitter那个慢啊...

但是,通过此方法添加在XHTML页面会出现不能通过W3C的验证,提示ul标签内需要至少一个li标签。

要解决这个问题,我们可以手动添加一个li标签,如本博客所表现的,并且在内容正式载入中用wait类语句代替也比较实用,等页面加载到页尾则调用twitter的js输出正式的内容,因为blogger.js通过innerHTML方法重写ul里的内容,所以之前的wait信息会自动替换调。

p.s:在上面的情况下如果twitter出现不能访问的情况(e.g:万恶的GFW),则wait信息会一直存在,可以通过在调用的两条js后面用js输出一个样式将wait信息的display设置为none,当然需要将此wait信息赋id或者class。

还有另外一种方法可以通过XHTML验证,那那就用js输出,如:

<div id="twitter_div">

<script type="text/javascript">
<!--//-->< ![CDATA[//><!--
document.write("

<ul id='twitter_update_list'>");
//-->< !]]>
</script>

终于搞到google+百度收录=1条了,重新开始

发表于 WebBuild

我的博客,近一个月来不断的搬迁,
先是用的去年在路五那里买的DH空间不能用了(之前ip就被封,然后换了个ip,然后不到几天,路五好像忘记续费了,空间停了,所有的数据也都没有备份下来),中间就几天没有地方放,
之后好心人微笑着吃饭赞助了个空间,真是旱中甘露血中之碳,将博客搬上去了(因为之前没有近期的备份,之前辛苦修改好的风格也没有了,所以重新整理起来也很辛苦,后面的博客都是从各个RSS阅读器里面提取的XML修改之后导入的),可惜的是用了几天就突然出问题了,唉当时是放上去之后就马上回家了,也好没有一个完整的备份,没有想到这么快出问题.不过后来微笑着吃饭将备份拿下来发给我了
然后就拿到枫信的空间了,因为搬来搬去,乱七八糟,这几天索性将博客完整的来个整理.因为全能空间基本都是IIS的,所以php的rewrite不怎么完美,wp的rewrite不能正常使用,需要用到index.php的rewrite功能,所以所有的url中间又都会夹杂个不伦不类的/index.php/,昨天和枫信的人商量装个IIS组件来解决这个问题的,不过一直装不上.而这样基本所有的301重定向都不能实现(即使404我都是要用到404.asp跳转到wp的index.php重定向生成的404,无语),所以既然url都变了索性将之前的没有做好的分类重新做了下,将之前的中文地址全部转化成英文的(通过一个插件自动从google翻译调用,所以url现在翻译得很好笑),不管了昨天提交了sitemap,等收录了,慢慢来.反正个人博客我也不主要在乎想垃圾站那样的收录,基本是自己个朋友们看的.(不过wp的博客各个搜索引擎收录确实很好).
之后好好的写写博客,之前都是在乱弄.终于算是将从2005年1月1日(我开始写博客的时间)的所有博客从各个博客BSP(之前写日记样的,也没有正式的学做网站,所以这里写那里也写)和之前的pj博客全部完美转换到了wp(之前转换了没有整理),也都加了标签了,分好类了,现在感觉看上去很舒服,博客模板也都写好符合xhtml1.0和css3.0规范标准
还有和之前一个大的改变算是第一次放广告在上面了,放了两个GG的广告,我想这样或许更能吸引GG的蜘蛛
看有没有可以做链接的朋友?http://www.ivershuo.com(现在pr只有2,之前用的二级域名,后面转到这个域名上来的,原先那个域名pr已经有4了),以后主要写建站心情,代码标准性讨论和UI用户体验php等,那种基本没原创只是拿来赚广告的朋友就免了,呵呵.

同时非常感谢路五,微笑着吃饭和叶子.在使用DH空间中,有任何问题路五基本都很及时很热心的解答,他的做的关于DH空间使用的教程对我帮助很大;微笑着吃饭人也很好,空间出问题的时候他每天都在写信(大家知道国外的空间商基本上都喜欢email联系的),实时在群里发布最新消息,最后我回家了他都往QQ上发信息,发了网站的备份到我邮箱;叶子认识也很久了,人也很不错,枫信的空间其实也很不错,有时候在落伍看到有人抱怨枫信,其实枫信能在落伍做这么多年(看看那时候评的多少大空间商现在还有几家继续壮大),从个人发展起来的确实很不容易,尤其在落伍这种其实对IDC并不友善和良性的环境(呵呵~).不像那个什么中网的(一般说坏的方面我不直接点名的,除非...),那时候用的时候硬盘坏了,也不恢复也没有解释(解释就是坏了)也没有任何能感受到的抱歉(我个人就没有收到什么致歉的消息),访问速度很慢(因为我那时候是论坛,所有论坛会员都这样反映的,就不是我个人的感受了),平常有问题也不积极解决,最后网站数据毁于一旦!抱歉,说多了

本来只想在落伍随便说下的,没想到说多了,本来也是要写个博客来纪念下博客的这次打变动的,先将这个贴上来.一切从头开始吧.
之后再慢慢说

ip被封了,FUck The GFW

发表于 Life

要fuck一下gfw了,封了我好几个网站所在的ip段了.
昨天为小桂子写了个相册(XHTML+js):http://shuo.he.cn/photos/,明天考四级