小技巧利用css实现背景图片预加载

今天在做一个logo的效果遇到了问题。要实现打开网页logo呼吸状缓慢发光后熄灭,鼠标hover状态呼吸状缓慢发光常亮这样一个效果。

当然先用gif做两个简单的5帧左右的动画,起初想使用css sprite技术同时加载两个整个到一张图片上的gif动画,可是经过测试失败了,因为当鼠标悬停在logo上时,切换的第二章背景图已经在刚才打开页面时候随第一个图一起加载并开始动画了(这时其实是一张图),随后想到用两个GIf动画,鼠标悬停时,前换到另一个gif。

可是有经验的人都知道,鼠标hover状态时,已经向服务器发出下载第二章gif背景图片动画的请求,这是由于网络因素,应该有一个短暂的下载时间,这时会有白色间隙出现。这就需要对第二个gif背景图片预加载了

一个很简单的方法就是在前台页面文件里写入一个空的div层,在css中对他设置背景图片,给予相关属性:hight:0; weight:0;display:inline;这样就可以在第一次展示页面时下载所需的图片了。当再次向服务器发出请求时,这个图片已经在电脑缓存中,可以立即显示,很好的解决了切换背景图片时的空白间隔问题。

网站开发人员应该知道的62件事

有人在Stack Overflow上发问,动手开发网站之前,需要知道哪些事情? 不出意料地,他得到了一大堆回答。通常情况下,你需要把所有人的发言从头到尾读一遍。但是,Stack Overflow有一个很贴心的设计,它允许在问题下方开设一个wiki区,让所有人共同编辑一个最佳答案。于是,就有了下面这篇文章,一共总结出六个方面共计62条”网站开发须知”。

我发现,这种概述性的问题,最适合这种集合群智、头脑风暴式的回答方式了。这也是我第一次觉得,Stack Overflow做到了Wikipedia做不到的事。(难怪它最近挤进了全美前400大网站。)

在我的印象中,关于网站开发,这样全面的概述性文章非常少见,因此也就非常有用。大家不妨看看,62件事情中你做到了多少?

Continue reading

团队网站开发规范

网站开发规范beta1.0

写在前面

项目的可维护性第一。我们并不是一个人在做事,项目的维护和二次开发可能是直接或间接的团队合作。好的可维护性可以从四个方面获得:

a)                      代码的松耦合,高度模块化,将页面内的元素视为一个个模块,相互独立,尽量避免耦合过高的代码,从HTML,CSS,JavaScript三个层面考虑模块化。

b)                      良好的注释

c)                      注意代码的弹性,在性能和弹性的选择上,一般情况下弹性为优先考虑条件,在保证弹性的基础上,适当优化性能。

d)                      严格按照代码规范

Continue reading

如何做合格的敏捷建模者

敏捷建模者的个性  Alistair Cockburn指出:很多的方法学都定义了软件开发项目中开发人员所担任的角色,同时还定义个各个角色执行的任务,尽管入席,这些方法并没有定义这些角色最适合的人选。一个人要想成功的担任某个角色,他应当很好的适应它--虽然这并不需要人们掌握所有的技能,但人们必须要慢慢的熟悉这些技术。我的经验告诉我,要成为一个成功的敏捷建模者,下面的列出的个性是必要的:

Continue reading

敏捷开发(一)百科

简单的说,敏捷开发是一种以人为核心、迭代、循序渐进的开发方法。在敏捷开发中,软件项目的构建被切分成多个子项目,各个子项目的成果都经过测试,具备集成和可运行的特征。换言之,就是把一个大项目分为多个相互联系,但也可独立运行的小项目,并分别完成,在此过程中软件一直处于可使用状态。

Continue reading

基于Web标准的企业网站及优化

摘要

随着WEB标准在国内的不断普及,结构表现行为分离、模块化、语义化、优雅退化等概念也成为考核一名前端人员对WEB标准理解的重要条目,其中,由于SEO背后的商业价值影响,“语义化”得到了突出的重视,作为一名前端工作者,必须明确的认识到标准化的网页对一个企业网站的商业价值的重要性。

随着越来越多的网站改版成符合Web标准的版本,Web标准也逐渐的被网站的设计者们所了解和认可,Web标准之所以能从原来的被质疑,争论,到现在的被应用和认可,其中的主要原因是,Web标准能给使用者带来真正的好处。在传统的table布局中,页面内容要等表格中的内容加载完后才能显示出来。而使用css布局的页面里,内容边加载边显示,所以大大提高的页面的显示速度。同时由于标准的布局代码更加简洁,增加了关键字占网页代码的比重,从而实现了搜索引擎的优化。

基于Web标准化xHTML+CSS构架的企业网站正式利用了标准化网页做具有的独特优势,能够给在不同类型客户端的潜在客户带来良好的用户体验的同时,最大化的降低网站的维护成本,提高网站的效率,为企业网站带来更大的价值。

  Continue reading

简历中的交互设计–renrenFED

http://fed.renren.com/2009/10/83

每年的10月和11月是各大公司校园招聘的高峰期,今天没事的时候在同事收到的一箱子简历里面翻了一会,突然意识到,其实书写求职简历的过程,就是一种典型的交互设计过程。

我们一般所说的交互设计,都是指用户通过软件等手段与机器之间的交互,这从交互设计的前身“Soft Face”这个名字中,或许就可以窥知一二。但是事实上,交互设计在生活中是无处不在的。对于人机交互来说,用户需要通过设计师所设计的用户界面(UI) 来与机器交互,UI的好坏直接影响着用户体验。同样,作为一个求职者,他们所面对的“用户”,实际上就是公司的HR,而求职简历这薄薄的两张纸,就是求职者的UI,而这个“UI”的好还则直接决定了其是否能够得到面试机会。本文试图从交互设计的角度来探讨一下如何书写求职简历(因为校园招聘中的简历问题比较明显,本文以校园招聘为例)。

  Continue reading