网页设计趋势发展历程之2009

under 那些事 2009-06-9 pm

原文:http://www.smashingmagazine.com/2009/01/14/web-design-trends-for-2009

1. 凸版印刷

在过去几个月的观察中，最出人意料的趋势，是凸版印刷样式（实际上压上去的字）出现在网页设计中。可能这种趋势产生的最重要的原因是因为，这种印刷 术到现 今已经很少被使用了。凸版印刷以各式各样的风格被用在网站和主题上；尤其是，已经被频繁使用于产品设计和网站的在线服务中。

Continue to Read

Twitter, Flickr ,Bing,Live,Hotmail

under 那些事 2009-06-2 pm

twitter, flickr ,skydrive,bing,live,hotmail今天均不能访问了,而MS停用live.com域名颇及到刚刚上线的BING了实在让人匪夷所思,twitter, flickr也被河蟹.OMG,大中华局域网终于建设完成.

Continue to Read

Yahoo!网站性能最佳体验的34条黄金守则

under 学习笔记 2009-05-15 pm

Yahoo!的Exceptional Performance团队为改善Web性能带来最佳实践。他们为此进行了一系列的实验、开发了各种工具、写了大量的文章和博客并在各种会议上参与探讨。最佳实践的核心就是旨在提高网站性能。
Excetional Performance团队总结出了一系列可以提高网站速度的方法。可以分为7大类34条。包括内容、服务器、cookie、CSS、JavaScript、图片、移动应用等七部分。

其中内容部分一共十条建议：

一、内容部分

  1. 尽量减少HTTP请求
  2. 减少DNS查找
  3. 避免跳转
  4. 缓存Ajxa
  5. 推迟加载
  6. 提前加载
  7. 减少DOM元素数量
  8. 用域名划分页面内容
  9. 减小iframe的大小
  10. 避免404错误

1、尽量减少HTTP请求次数
终端用户响应的时间中，有80%用于下载各项内容。这部分时间包括下载页面中的图像、样式表、脚本、Flash等。通过减少页面中的元素可以减少HTTP请求的次数。这是提高网页速度的关键步骤。
减少页面组件的方法其实就是简化页面设计。那么有没有一种方法既能保持页面内容的丰富性又能达到加快响应时间的目的呢？这里有几条减少HTTP请求次数同时又可能保持页面内容丰富的技术。

合并文件是通过把所有的脚本放到一个文件中来减少HTTP请求的方法，如可以简单地把所有的CSS文件都放入一个样式表中。当脚本或者样式表在不同页面中使用时需要做不同的修改，这可能会相对麻烦点，但即便如此也要把这个方法作为改善页面性能的重要一步。

CSS Sprites是减少图像请求的有效方法。把所有的背景图像都放到一个图片文件中，然后通过CSS的background-image和background-position属性来显示图片的不同部分；

图片地图是 把多张图片整合到一张图片中。虽然文件的总体大小不会改变，但是可以减少HTTP请求次数。图片地图只有在图片的所有组成部分在页面中是紧挨在一起的时候 才能使用，如导航栏。确定图片的坐标和可能会比较繁琐且容易出错，同时使用图片地图导航也不具有可读性，因此不推荐这种方法；

内联图像是使用data:URL scheme的方法把图像数据加载页面中。这可能会增加页面的大小。把内联图像放到样式表（可缓存）中可以减少HTTP请求同时又避免增加页面文件的大小。但是内联图像现在还没有得到主流浏览器的支持。

减少页面的HTTP请求次数是你首先要做的一步。这是改进首次访问用户等待时间的最重要的方法。如同Tenni Theurer的他的博客Browser Cahe Usage – Exposed!中所说，HTTP请求在无缓存情况下占去了40%到60%的响应时间。让那些初次访问你网站的人获得更加快速的体验吧！

2、减少DNS查找次数

Tags:

Continue to Read

6

MSDN Library 下载

under 那些事 2009-04-28 pm

MSDN Library for Visual Studio 2008 SP1 (2008 年 12 月版)

稀里糊涂的装上了2005版的MSDN，今天无意在官方找到了最近版的，做个标记！

Tags:

Continue to Read

Google PageRank

under 那些事 2009-04-4 pm

Google PageRank,似乎最近更新了.blog最近很少更新,降值到了2,朋友的blog降到了0位 :twisted: 变的太突然了 :-?

Continue to Read

4

No Title!

under 那些事 2009-03-12 pm

还是没有标题吧……

音频片段：需要 Adobe Flash Player（9 或以上版本）播放音频片段。 点击这里下载最新版本。您需要开启浏览器的 JavaScript 支持。

月光海洋

无意中在路上听到

音频片段：需要 Adobe Flash Player（9 或以上版本）播放音频片段。 点击这里下载最新版本。您需要开启浏览器的 JavaScript 支持。

占有

同学推荐,到底是怎样的心情?似乎看到了发生在那个夏天的故事.

音频片段：需要 Adobe Flash Player（9 或以上版本）播放音频片段。 点击这里下载最新版本。您需要开启浏览器的 JavaScript 支持。

第七封信 七封寄不出去的情书 一首未完成的歌 情书

《海角七号》一首未完成的歌

音频片段：需要 Adobe Flash Player（9 或以上版本）播放音频片段。 点击这里下载最新版本。您需要开启浏览器的 JavaScript 支持。

梁静茹 第三者

有段时间一直在听

Continue to Read

4

js-attribute-class

under java script- 学习笔记 2009-02-19 pm

刚刚做一个例子,想要用getAttribute()方法获取对象的class属性.本来习惯在FF中测试,使用getAttribute(“className”)却总是无法获得结果,后来在ie中测试可得到结果.原来在FF中可识别getAttribute(“class”)在IE下识别getAttribute(“className”).
找了个兼容办法:
if (obj.getAttribute(”className”)== “class名字”||obj.getAttribute(”class”) == “class名字”)

Continue to Read

3

函数判断上下兄弟结点

under java script- 学习笔记 2009-02-18 pm

因为浏览器解析之间差异,在选择兄弟结点时,多数浏览器将元素间的换行符作为了文本结点.这样的情况同样存在于查看元素的子结点时.
使用childNodes查看元素第一层子结点列表.

Tips:You can change the code before run.

IE的输出中只有4个元素,FF同样将元素间的换行符作为了文本结点.

所以使用nextSibling,previousSibling并不能准确返回一个元素.
使用closestSibling方法避免这个问题,其中direction 为1时表示下一个兄弟结点,-1表示上一个兄弟结点:

function closestSibling(node,direction){
var tempObj;
if(direction==-1 && node.previousSibling!=null){
tempObj=node.previousSibling;
while(tempObj.nodeType!=1 && tempObj.previousSibling!=null){
tempObj=tempObj.previousSibling;
}
}else if(direction==1 && node.nextSibling!=null){
tempObj=node.nextSibling;
while(tempObj.nodeType!=1 && tempObj.nextSibling!=null){
tempObj=tempObj.nextSibling;
}
}
return tempObj.nodeType==1?tempObj:false;
},

Continue to Read

2