标签 css 下的文章

脱掉衣服看身材,裸节又来了

发表于 WebBuild

知道为什么网页没有想象中很炫的效果吗?因为今天是一年一度的“CSS裸奔节”。

脱掉衣服,亮出身材,大家一起裸奔吧

想参与或了解更多,请点击http://www.webrebuild.org/naked

重构的中国移动首页

发表于 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

先看几个图吧:

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)支持这个属性,等到其他浏览器的支持估计不知道得等到什么时候。

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

良好的用户体验设计中应注意的几个细节

发表于 WebBuild

我认为,在写网络程序时,要把每个用户都想像成满怀恶意的黑客高手,他们每个都想暴露你的数据库!安全是最重要的;在做网页设计时,要把每个用户都想像成刚接触电脑的电脑盲,他们连超链接是什么都不知道,可用性是最重要的。

而我觉得网页设计比网络编程更难,写程序时,遇到了难题,查查手册,google一下,基本就能搞定。但是一个网页,可能反复修改N多次还不能达到满意的要求,尤其是基于浏览器的原因,一个细节可能怎么都调不好。

而所有的一切,都是为了用户。当我不断的在用户和设计者身份间切换时,我学会了特别注意下面的细节处理:

1,首要的,尊重W3C标准,尊重每个浏览器,尊重每个用户。

2,不要忘记给radio和checkbox标签的说明文字加上label标签,你可以不必多辛苦,但是你的用户将不用玩“看你能不能点到我”的游戏;

3,翻转效果图片做在同一张图片上,然后用css定位位置。这样就不会出现当mouseover时图片未加载而出现什么都没有的情况。

4,一般情况下,对用于有明显表现意义的小图片(如Loading图片)进行预加载。

5,记住script只是页面功能的增强而不是增加。

6,noscript标签不要放在页面内容最前面,这样搜索引擎可能直接抓取了类于“抱歉!我们的网站需要启用jabascript才能正常浏览”作为摘要。你仍旧可以使用css将它绝对定位在页面的顶端。

7,如果你的<a>标签仅为了实现onclick,而不是真的需要连接,那么记得在代码后面加上"return false",以避免将页面带到顶部(不过从语义化角度上来说,不建议将<a>这样用)。

8,无论如何,给验证码图片加个方便的刷新连接。

9,当作品完成后,亲自观看一下至少一位用户怎样使用你的产品,然后你绝对会有至少一处地方想要修改。

而一旦你知道哪点是重要的,你就要将这点应用到你的设计里去,就像每天的吃饭睡觉一样,就会变成习惯,变成一种需要,而不是只会说却永远忘记做的口号。

将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>

完美调用新浪新闻的简单方法

发表于 WebBuild

早段时间叫我同学帮忙看看南华校友网,看看大家需要些什么样的功能,有个朋友说应该加个新闻的功能。

我当时就准备做个rss聚合来获取新浪搜狐的新闻的,后面就去找新浪新闻的RSS地址,然后无意找到新浪还有这个:http://rss.sina.com.cn/my_sina_web_rss_news.html?url=news/marquee/ddt.xml 可以直接调用新浪的新闻的,所以就放弃了再去写个RSS聚合了,呵呵。

然后马上就布置到南华校友网,因为我一直都是使用的Firefox ,测试也一开始是在Firefox上测试的,一切很好。然后是opera,也很好。最后IE,啪,不行了!老是弹出一个警告框提示页面无法打开,我当时就郁闷,一时也不知道是怎么回事。

我开始以为是我的IE出现了问题(因为基本上只有测试网页兼容和上工行支付宝才会用到IE),因为太久没用它,它给我闹脾气,然后在同学的IE上打开看,也是一样的问题。

于是就打开新浪提供的js地址看,看到在182有这样一句:

document.body.insertBefore(&nbsp;js,&nbsp;null);

而这里在我的网页上,UCH页面我调用了头尾模板,所以在新浪新闻调用之后及</body>标签之前还有内容需要载入的,此时</body>也没有载入,所以上面的代码才会在IE下出现错误。一种解决方法是可以判断页面载入完成了之后在执行这个操作,也可以将上面的语句改成类似:

document.getElementById("n_news").appendChild(js);

n_news是放js调用代码的div容器的id,这样就可以使页面内部数据照代码的顺序执行。

新闻调用的演示页面:http://www.nanhuau.com/news.php

还有,大家可以在调用的时候296行的:

code>document.getElementById(rss_news_sina_div).style.height = rss_news_sina_hight;code>

注释掉,因为这样才能自适用高度,至于宽度希望大家还是指定下,至于使用原新浪的方式还是自己的CSS那就看自己的喜好了,呵呵。

如果不想实用新浪指定的那些样式,可以将SinaRSSWriteCSS这整个函数去掉就可以了

然后将这个js文件保存上传到你的空间上,引用的时候替换新浪的路径到你的路径就可以了。

付:UCHome新闻速递插件下载(随便写的,功能比较简单,除上面说的调用新浪的新闻外,另加了百度的关键词新闻),演示地址在上面写出了,有需要的朋友就下着用吧
下载地址:http://www.iveshuo.cn/d/uchome_news_plug.7z