发芽网界面更新 – 圆角、阴影、聊天窗口、HTML标准

作者:半瓶墨水   链接:http://www.2maomao.com/blog/fayaa-ui-update-2/

在线数独游戏上线以后,搜索了一下信箱里面关于发芽网界面的抱怨,居然快有一屏了 – 里面有一半是我自己提的
😀

呵呵终于有时间清理一下,心里很是爽啊。
列一下最近做的界面更新:HTML标准化、聊天窗口更清楚、给整站加上了阴影、给某些框框加上了圆角

首先是HTML标准化
以前一直觉得好几个页面有问题,不是firefox下怪异,就是IE下异怪,总之,不正常
问题在于,刷新一下可能就好了,或者浏览器换个版本,也会消失不见,但是有时候又会跳出来,烦!
直到有位朋友反馈说代码发芽网生成的html代码通不过W3C的验证,我才意识到可能是这个问题
于是乎安装了Firefox的HTML Validator扩展,一个个的检查页面,发现了一坨坨的html tag混乱的问题。
修正这些问题以后,现在大多数页面都能通过W3C的验证了,那些诡异的问题也就消失不见了。

然后是圆角
很多网站都是搞的圆角矩形,看起来比较可爱+顺眼,不知道跟iPhone流行有没有关系
我在网上搜索了好多个圆角矩形的实现方案,发现都不是非常好
直到后来看到Stackoverflow上面的几篇讨论,才豁然开朗:
css div rounded corner
how to make a cross browser w3c valid semantic non javascript round corner
里面有个家伙的观点深得我心:

我不是一个疯狂的display-hack爱好者,所以我用css3
IE7以下的那些浏览器不是圆角,那就不是圆角吧,只要看起来还行,我不在乎

然后我就采用了这个页面上提供的方法:

* -moz-border-radius-topleft / -webkit-border-top-left-radius
* -moz-border-radius-topright / -webkit-border-top-right-radius
* -moz-border-radius-bottomleft / -webkit-border-bottom-left-radius
* -moz-border-radius-bottomright / -webkit-border-bottom-right-radius
* -moz-border-radius: 5px;
* -webkit-border-radius: 5px;

然后无视IE7以下的存在 – IE8下显示是没有问题的。

然后我稍微配置了一下颜色,用在了聊天窗口上:(左边是以前的,右边是更改之后的)
聊天窗口 => talk_new

然后是阴影
嗯,这个简单,我加了两个div就搞定了,这样页面边缘和底端就有了3D阴影,不多说,上图
3D阴影

顺便说一下导航
游戏发芽网的顶端实现了一个导航条“您的位置”,尝试一下看看有没有帮助
top_navi_bar

发芽网的首页我也改了
依然保持以前的风格 – 你猜对了,就是土
fayaa_home

BTW:
有很多网友在各个反馈页面提出了很不错的建议,但是多数都没有完成,主要是因为时间的原因
业余时间写网站,虽然自己很有兴趣,也够累的,网页上没有编程模式,都是细节,无比琐碎的细节

BTW#2:
另外就是加上了友情链接页面

BTW#3:
把jQuery UI删了,自己手写了两句用来做Tab,居然超简单。
另外,jQuery在Stackoverflow上更受推崇,下面两个链接里面有详细的讨论:
为什么那么少人用prototype?
哪个javascript库最好?

OK啦,那么,下一步想做什么
o. OpenID支持
o. 代码底端显示Trackback/Pingback/Referrer
o. Feedback提供回复通知功能,注册用户不显IP
o. 写一坨blog,草稿箱里快攒了30多篇了

7 条评论 发表在“发芽网界面更新 – 圆角、阴影、聊天窗口、HTML标准”上

  1. Jason Lee说道:

    别想了选jQuery,简洁,Prototype过于复杂了,两个东西就像Java(Prototype)和Python(jQuery)一样.
    另外有句话我一直想说很久了,只是觉得不太好意思。就是你哪发芽网的风格太差了,其实你功能做得很不错的,但就因为风格不好,所以我一直没用你的,而用的国外的 http://pastie.org/,其实你可以模仿人家的呀!

  2. 半瓶墨水说道:

    jQuery我早已经选好了,只是作为一个信息贴出来分享

    至于说风格,不知道你指的是什么?颜色?
    要改,也要知道从什么地方改起啊,呵呵

  3. 半瓶墨水说道:

    另外,说到功能,pastie.org好像不能用来在blog上面贴代码

  4. Jason Lee说道:

    颜色都还不是重点
    重点在于文字排版、字体大小、字体颜色层次感、间距、区域边距等等
    pastie.org 现在有转帖功能,是通过javascript的,不过我都没用哪个,我是直接拿HTML发到博客的,这样速度快。

  5. 半瓶墨水说道:

    @Jason Lee
    谢谢你提出的建议

    我想知道的是,这些问题对你有多大的影响?比如说,是不是这样你就不用了?如果是这样,那么哪个页面、或者哪个链接、文字、编辑框应该最先改?改成什么样子比较好?

    发芽网有许多地方都可以改进(不完整列表参见这里: http://fayaa.com/code/view/794/ ),但是时间和精力有限,只能选择影响比较大的地方来改。

  6. LJJ说道:

    您好 非常喜欢你正在做的事情
    我了解到好像这些是你业余做的,所以应该说非常不容易,也花费了许多时间了吧。
    我是一个计算机院的学生,前阶段突然想起要写一个代码高亮工具,因为自己常常写一些代码,想发到百度上去,当时还不知道有发芽网哈,所以自己写了一个。仅仅是C++的,给自己用的。
    在你这里学到了许多东西,谢谢你。

  7. 半瓶墨水说道:

    @LJJ 很高兴能帮到你,欢迎常来逛逛 🙂