Azuresky

腾讯企业邮箱邀请名额30名

Thu, 19 Aug 2010 06:41:17 +0000

得到朋友的腾讯企业邮箱邀请
手头上也有闲置域名，体验了下腾讯企业邮箱，感觉还不错
网易也有免费企业邮也用过，不过网易免费企业发送的邮件有广告尾巴，如果你用本地客户端发送的邮件倒不会有。
经过测试，腾讯企业邮箱没有邮件广告尾巴
很多人都对腾讯的邮箱服务很满意，如果你也有闲置域名，想试用可以留下E-Mail，我看到即刻发送邀请
共有30个名额
Tags - tencent , mail

HTML5的新标签

Wed, 07 Jul 2010 11:53:55 +0000

关注Web发展的人们都几乎都知道html5的强大，都在讨论html5是否会取代并淘汰flash。
本文并不对html5是否取代flash进行讨论，我们来看看html5除了有名的标签外，还有什么新成员添加到html标签大家族。

HTML5新增的标签分别有：

图形媒体：canvas标签　audio标签　embed标签　video标签　source标签
文档结构：header标签　nav标签　section标签　footer标签
文档内容：article标签　aside标签　details标签　summary标签　hgroup标签　time标签　figure标签　figcaption标签
表单元素：command标签　datalist标签
其他文本：ruby标签　rp标签　rt标签　keygen标签　mark标签　meter标签　output标签　progress标签

............

Tags - html , html5

腾讯微博邀请码，赠送QQ微博邀请名额

Tue, 20 Apr 2010 02:38:35 +0000

早段得到朋友的腾讯微博邀请码
玩了好些天，今天得到了官方提供的5个蒲公英种子（也就是五个邀请名额）
得知很多朋友需要腾讯微博邀请码！特在这里提供
数量有限，需要的留下邮箱，看诚意了！

2010-04-24：新增3个邀请名额。看大家想玩的诚意了！
2010-04-28：赠送微博邀请码至腾讯结束微博内测，每天会有三个邀请名额，需要的请重新在下面留言。
Tags - 微博 , 邀请码

14条最佳JS代码编写技巧

Sat, 10 Apr 2010 10:30:01 +0000

写任何编程代码，不同的开发者都会有不同的见解。但参考一下总是好的，下面是来自 Javascript Toolbox 发布的 14条最佳JS代码编写技巧，Sofish翻译(1,2)。

1. 总是使用 ‘var’

在JavaScript中，变量不是全局范围的就是函数范围的，使用”var”关键词将是保持变量简洁明了的关键。当声明一个或者是全局或者是函数级（function-level）的变量，需总是前置”var”关键词，下面的例子将强调不这样做潜在的问题。

不使用 Var 造成的问题

var i=0; // This is good – creates a global variable
function test() {
for (i=0; i<10; i++) {
alert(“Hello World!”);
}
}
test();
alert(i); // The global variable i is now 10!

因为变量函数中变量 i 并没有使用 var 使其成为函数级的变量，在这个例子中它引用了全局变量。总是使用 var 来声明全局变量是一个很多的做法，但至关重要的一点是使用 var 定义一个函数范围的变量。下面这两个方法在功能上是相同的：
正确的函数

function test() {
var i=0;
for (i=0; i<10; i++) {
alert(“Hello World!”);
}
}

正确的函数

function test() {
for (var i=0; i<10; i++) {
alert(“Hello World!”);
}
}

2. 特性检测而非浏览器检测

一些代码是写来发现浏览器版本并基于用户正使用的客户端的对其执行不同行为。这个，总的来说，是一个非常糟的实践。更好的方法是使用特性检测，在使用一个老浏览器可能不支持的高级的特性之前，首先检测（浏览器的）是否有这个功能或特性，然后使用它。这单独检测浏览器版本来得更好，即使你知道它的性能。你可以在 http://www.jibbering.com/faq/faq_notes/not_browser_detect.html 找到一个深入讨论这个问题的文章。

例子：

if (document.getElementById) {
var element = document.getElementById(‘MyId’);
}
else {
alert(‘Your browser lacks the capabilities required to run this script!’);
}

3. 使用方括号记法

当访问由执行时决定或者包括要不能用”.”号访问的对象属性，使用方括号记法。如果你不是一个经验丰富的Javascript程序员，总是使用方括号是一个不错的做法

对象的属性由两种固定的方法来访问：”.”记法和”[ ]“方括号记法：

“.”号记法

MyObject.property“[ ]“

方括号记法

MyObject["property"]

使用”.”号，属性名是硬代码，不能在执行时改变。使用”[ ]“方括号，属性名是一个通过计算属性名而来的字符串。字符串要以是硬代码，也可能是变量，甚至可以是一个调回一个字母串值的函数。如果一个属性名在执行产生，方括号是必须，如果你有 “value1″, “value2″, 和 “value3″这样的属性，并且想利用变量 i=2来访问。

这个可以运行：

MyObject["value"+i]

这个不可以：

MyObject.value+i

并且在某些服务器端环境（PHP、Struts等）下，Form 表单被附加了 [ ] 号来表示 Form 表单在服务器端必须被当作数组来对待。如此，用”.”号来引用一个包含 [ ] 号的字段将不会执行，因为 [ ] 是引用一个 Javascript 数组的语法。所以，[ ] 号记法是必须的：
这个可以运行：

formref.elements["name[]“]

这个不可以：

formref.elements.name[]

推荐使用”[ ]“方括号记法是说当其需要时（明显地）总是使用它。当不是严格需要使用它的时候，它是一个私人的偏好和习惯。一个好的经验原则是，使用”.”号记法访问标准的对象属性，使用”[ ]“方括号记法访问由页面定义的对象属性。这样，document["getElementById"]() 是一个完美可行的”[ ]“方括号记法用法，但 document.getElementById() 在语法上是首选，因为 getElementById 是一个 DOM 规范中定义的一个标准文档对象属性。混合使用这两个记法使哪个是标准对象属性，哪个属性名是由上下文所定义的，在代码中显得清晰明了：

document.forms["myformname"].elements["myinput"].value

这里，forms 是 document 的一个标准属性，而表单名 myformname 则是由页面所定义的。同时，elements 和 value 属性都是由规范所定义的标准属性。而 myinput 则是由页面所定义的。这页是句法让人非常容易理解（代码的内容），是一个推荐遵循的习惯用法，但不是严格原则。

4. 避免 ‘eval’

在Javascript中，eval()功能是一个在执行期中执行任意代码的方法。在几乎所有的情况下，eval 都不应该被使用。如果它出现在你的页面中，则表明你所做的有更好的方法。举一个例子，eval 通常被不知道要使用方括号记法的程序员所使用。

原则上，”Eval is evil（Eval是魔鬼）”。别使用它，除非你是一个经验丰富的开发者并且知道你的情况是个例外。

5. 正确地引用表单和表单元素

所有的 HTML 表单都应该有一个 name 属性。对于 XHTML 文档来说，name 属性是不被要求的，但 Form 标签中应有相应有 id 属性，并必须用 document.getElementById() 来引用。使用像 document.forms[0] 这样的索引方法来引用表单，在几乎所有情况下，是一个糟糕的做法。有些浏览器把文档中使用 form 来命名的元素当作一个可用的 form 属性。这样并不可靠，不应该使用。

下面这个例子用使用方括号和正确的对象引用方法来展示如何防止错误地引用一个表单的input：

正确引用表单 Input：

document.forms["formname"].elements["inputname"]

糟糕的做法:

document.formname.inputname

如果你要引用一个函数里的两个表单元素，较好的做法是先引用这个form对象，并将其储存在变量中。这样避免了重复查询以解决表单的引用：

var formElements = document.forms["mainForm"].elements;
formElements["input1"].value=”a”;
formElements["input2"].value=”b”;

当你使用 onChange 或者其他类似的事件处理方法，一个好的做法是总是通过一个引来把 input 元素本身引用到函数中来。所有 input 元素都带有一个对包含其在内的Form表单有一个引用：

    function validate(input_obj) {
    // 引用包含这个元素的form
    var theform = input_obj.form;
    // 现在你可以不需要使用硬代码来引用表单自身
    if (theform.elements["city"].value==”") {
    alert(“Error”);
    }
    }

通过对表单元素的引用来访问表单的属性，你可以写一个不包含硬代码的函数来引用这个页面中任何一个有特定名的表单。这是一个非常好的做法，因为函数变得可重用。

6. 避免 ‘with’

Javascript 中的 with 声明在一个作用域的前端插入一个对象，所以任何属性/变量的引用将会倚着对象被首先解决。这通常被用作一个避免重复引用的快捷方法：

使用 with 的例子：

with (document.forms["mainForm"].elements) {
input1.value = “junk”;
input2.value = “junk”;
}

但问题在于程序员并没有方法来验证 input1 或 input2 实际上已经被当作 Form 元素数组的属性来解决。它首先以为这些名来检测属性，如果找不到，它将会继续（向下）检测这个作用域。最后，它在全局对象中尝试把input1 和 input2 作为一个全局对象来对待，而这以一个错误作为结尾。

变通的方法是：创建一个引用来减少引用的对象，并使用它来解决这些引用。

使用一个引用：

var elements = document.forms["mainForm"].elements;
elements.input1.value = “junk”;
elements.input2.value = “junk”;

7. 在锚点中使用 “onclick” 替代 “javascript: Pseudo-Protocol”

如果你想在标签中触发Javascript 代码，选择 onclick 而非 JavaScript: pseudo-protocol；使用 onclick 来运行的 Javascript 代码必须返回 ture 或者false（or an expression than evalues to true or false [这句要怎么翻译呢? 我是这样理解的：一个优先性高于true 或 false 的表达式]）来返回标签本身：如果返回 true，则锚点的 href 将被当作一个一般的链接；如果返回 false，则 href 会被忽略。这就是为什么”return false;” 经常被包含在 onclick 所处理代码的尾部。

正确句法：

在这个实例中，”doSomething()” 函数(定义于页面的某个角落)将在被点击时调用。href 将永远不会被启用了Javascript 的浏览器访问。在你可以提醒Javascript 是必须的、而用户未启用之的浏览器中，文档 javascript_required.html 才会被加载。通常，当你确保用户将会开启 Javascript 支持，为尽量简化，链接将只包含 href=”#”。而这个做法是不被鼓励的。通常有一个不错的做法是：可以提供没用启用 javascript 一个返回本地的页面。

有时，众多想要分情况来访问一个链接。例如，当一个用户要离开你的一个表单页面，而想先验证来确保没有东西被改变。在这个情况下，你的 onclick 将会访问一个返回询问链接是否应该被遵循的函数：

有条件的链接访问:

    Home

    function validate() {
    return prompt(“Are you sure you want to exit this page?”);
    }

在这个实例中，validate() 函数必须只返回 ture 或 false。ture 的时候用户将被允许问题 home 页面，或 false 的时候链接不被访问。这个例子提示确认（其行为），以访问 ture 或 false，这完全由用户点击”确实”或者”取消”决定。

下面是一些”不应该”的例子。如果你在自己的页面中看到下面这样的代码，这是不正确的，需要被修改：

什么是不应该做的：

link
link
link
link

8. 使用一元 ‘+’ 号运算符使类型转向Number

在Javascript中，”+”号运算符同时充当数学加号和连接符。这会在form表单的域值相加时出现问题，例如，因为Javascript是一个弱类型语言，form 域的值将会被当作数组来处理，而你把它们”+”一起的时候，”+”将被当成连接符，而非数学加号。

有问题的例子:

    function total() {
    var theform = document.forms["myform"];
    var total = theform.elements["val1"].value + theform.elements["val2"].value;
    alert(total); // 这个将会弹出 “12″, 但你想要的是 3!
    }

解决这个问题，Javascript 需要一个提示来让它把这些值当做数字来处理。你可以使用”+”号来把数组转换成数字。给变量或者表达式前置一个”+”号将会强制其当作一个数字来处理，而这也将使得数学”+”得以成功应用。

修改好的代码：

function total() {
var theform = document.forms["myform"];
var total = (+theform.elements["val1"].value) + (+theform.elements["val2"].value);
alert(total); // This will alert 3
}

9. 避免 document.all

document.all 是由Microsoft 的 IE 所引进的，并不是一个标准的 Javascript DOM 特性。尽管大多数新的浏览器支持它以支持依赖于它的糟糕代码，（而）还有很多浏览器是不支持的。

并没有理由其他方法都不适用，而一个老的IE浏览器（<5.0）需要支持，而在Javascript中使用 document.all 作为一个折衷方法。你并不需要使用 document.all 来检测其是不是IE浏览器，因为其他浏览器现在一般都支持。

只把 document.all 当做最后的选择：

if (document.getElementById) {
var obj = document.getElementById(“myId”);
}
else if (document.all) {
var obj = document.all(“myId”);
}

一些使用 document.all 的原则：

    * 同尝试其他方法
    * 当其作为最后的选择
    * 当需要支持 5.0 版本以下的 IE 浏览器
    * 总是使用 “if (document.all) { }” 来查看是否支持.

10. 不要在脚本代码块中使用HTML注释

在 Javascript 的旧日子（1995）里，诸如 Netscape 1.0 的一些浏览器并不支持或认识

在今天，没有任何一个常用的浏览器会忽略掉

Tags - javascript

开源界的 5 大开源许可协议

Thu, 01 Apr 2010 04:46:22 +0000

越来越多的开发者与设计者希望将自己的产品开源，以便其他人可以在他们的代码基础上做更多事，开源社区也因此充满生机。在我们所能想到的应用领域，都有开源软件存在（象 WordPress，Drupal 这些开源CMS）。然而很多人对开源许可并不了解，本文介绍开源领域常用的几种许可协议以及它们之间的区别。

什么是许可协议？

什么是许可，当你为你的产品签发许可，你是在出让自己的权利，不过，你仍然拥有版权和专利（如果申请了的话），许可的目的是，向使用你产品的人提供一定的权限。

不管产品是免费向公众分发，还是出售，制定一份许可协议非常有用，否则，对于前者，你相当于放弃了自己所有的权利，任何人都没有义务表明你的原始作者身份，对于后者，你将不得不花费比开发更多的精力用来逐个处理用户的授权问题。

而开源许可协议
使这些事情变得简单，开发者很容易向一个项目贡献自己的代码，它还可以保护你原始作者的身份，使你至少获得认可，开源许可协议还可以阻止其它人将某个产品据为己有。以下是开源界的 5 大许可协议。

GNU GPL

GNU General Public Licence
(GPL) 有可能是开源界最常用的许可模式。GPL 保证了所有开发者的权利，同时为使用者提供了足够的复制，分发，修改的权利：

可自由复制
你可以将软件复制到你的电脑，你客户的电脑，或者任何地方。复制份数没有任何限制。
可自由分发
在你的网站提供下载，拷贝到U盘送人，或者将源代码打印出来从窗户扔出去（环保起见，请别这样做）。
可以用来盈利
你可以在分发软件的时候收费，但你必须在收费前向你的客户提供该软件的 GNU GPL 许可协议，以便让他们知道，他们可以从别的渠道免费得到这份软件，以及你收费的理由。
可自由修改
如果你想添加或删除某个功能，没问题，如果你想在别的项目中使用部分代码，也没问题，唯一的要求是，使用了这段代码的项目也必须使用 GPL 协议。

需要注意的是，分发的时候，需要明确提供源代码和二进制文件，另外，用于某些程序的某些协议有一些问题和限制，你可以看一下 @PierreJoye 写的 Practical Guide to GPL Compliance 一文。使用 GPL 协议，你必须在源代码代码中包含相应信息，以及协议本身。

GNU LGPL

GNU 还有另外一种协议，叫做 LGPL （Lesser General Public Licence），它对产品所保留的权利比 GPL 少，总的来说，LGPL 适合那些用于非 GPL 或非开源产品的开源类库或框架。因为 GPL 要求，使用了 GPL 代码的产品必须也使用 GPL 协议，开发者不允许将 GPL 代码用于商业产品。LGPL 绕过了这一限制。

BSD

BSD 在软件分发方面的限制比别的开源协议（如 GNU GPL）要少。该协议有多种版本，最主要的版本有两个，新 BSD 协议与简单 BSD 协议，这两种协议经过修正，都和 GPL 兼容，并为开源组织所认可。

新 BSD 协议（3条款协议）在软件分发方面，除需要包含一份版权提示和免责声明之外，没有任何限制。另外，该协议还禁止拿开发者的名义为衍生产品背书，但简单 BSD 协议删除了这一条款。

MIT

MIT 协议
可能是几大开源协议中最宽松的一个，核心条款是：

该软件及其相关文档对所有人免费，可以任意处置，包括使用，复制，修改，合并，发表，分发，再授权，或者销售。唯一的限制是，软件中必须包含上述版权和许可提示。
这意味着：

你可以自由使用，复制，修改，可以用于自己的项目。
可以免费分发或用来盈利。
唯一的限制是必须包含许可声明。

MIT 协议是所有开源许可中最宽松的一个，除了必须包含许可声明外，再无任何限制。

Apache

Apache 协议 2.0 和别的开源协议相比，除了为用户提供版权许可之外，还有专利许可，对于那些涉及专利内容的开发者而言，该协议最适合（这里有一篇文章阐述这个问题
）。
Apache 协议还有以下需要说明的地方:

永久权利
一旦被授权，永久拥有。
全球范围的权利
在一个国家获得授权，适用于所有国家。假如你在美国，许可是从印度授权的，也没有问题。
授权免费，且无版税
前期，后期均无任何费用。
授权无排他性
任何人都可以获得授权
授权不可撤消
一旦获得授权，没有任何人可以取消。比如，你基于该产品代码开发了衍生产品，你不用担心会在某一天被禁止使用该代码。

分发代码方面包含一些要求，主要是，要在声明中对参与开发的人给予认可并包含一份许可协议原文。

Creative Commons

Creative Commons (CC) 并非严格意义上的开源许可，它主要用于设计。Creative Commons 有多种协议，每种都提供了相应授权模式，CC 协议主要包含 4 种基本形式：

署名权
必须为原始作者署名，然后才可以修改，分发，复制。
保持一致
作品同样可以在 CC 协议基础上修改，分发，复制。
非商业
作品可以被修改，分发，复制，但不能用于商业用途。但商业的定义有些模糊，比如，有的人认为非商业用途指的是不能销售，有的认为是甚至不能放在有广告的网站，也有人认为非商业的意思是非盈利。
不能衍生新作品
你可以复制，分发，但不能修改，也不能以此为基础创作自己的作品。

这些许可形式可以结合起来用，其中最严厉的组合是“署名，非商用，不能衍生新作品”，意味着，你可以分享作品，但不能改动或以此盈利，而且必须为原作者署名。在这种许可模式下，原始作者对作品还拥有完全的控制权，而最宽松的组合是“署名”，意味着，只要为原始作者署名了，就可以自由处置。

延伸资源

Creative Commons Licenses
Creative Common 许可的官方条款与解释
Open Source Initiative
包含各种开源协议资源
Open Source Licenses Comparison
对主流开源协议的对比
Understanding Open-Source Licensing
开源协议详解
HOW TO: Pick an Open Source License
如何选择不同的开源协议

本文国际来源：Smashing Magazine A Short Guide To Open-Source And Similar Licenses

中文编译来源：锐商企业CMS 网站内容管理系统官方网站
Tags - gpl , lgpl , mit , apache , creative-commons

jQuery编写技巧之性能优化

Sat, 27 Mar 2010 03:14:57 +0000

现在jquery应用的越来越多, 有些同学在享受爽快淋漓coding时就将性能问题忽略了,  比如我.  jquery虽在诸多的js类库中性能表现还算优秀, 但毕竟不是在用原生的javascript开发, 性能问题还是需要引起重视的. 在twitter上发现了这篇文章, 简单的摘译了一下:

   1. 总是从ID选择器开始继承
   2. 在class前使用tag
   3. 将jquery对象缓存起来
   4. 掌握强大的链式操作
   5. 使用子查询
   6. 对直接的DOM操作进行限制
   7. 冒泡
   8. 消除无效查询
   9. 推迟到 $(window).load
  10. 压缩js
  11. 全面掌握jquery库

1. 总是从ID选择器开始继承

在jquery中最快的选择器是ID选择器. 因为它直接来自于Javascript的getElementById()方法.

像这样选择按钮是低效的:

var traffic_button = $(‘#content .button’);

用ID直接选择按钮效率更高:

var traffic_button = $(‘#traffic_button’);

选择多个元素

提到多元素选择其实是在说DOM遍历和循环, 这些都是比较慢的东西.为了提高性能, 最好从就近的ID开始继承.

var traffic_lights = $(‘#traffic_light input’);

2. 在class前使用tag

第二快的选择器是tag选择器($(’head’)). 同理,因为它来自原生的getElementsByTagName() 方法.

总是用一个tag name来限制(修饰)class (并且不要忘记就近的ID):

var active_light = $(‘#traffic_light input.on’);

注意: 在jquery中Class是最慢的选择器. IE浏览器下它会遍历所有DOM节点不管它用在那里.

不要用用tag name来修饰ID. 下面的例子将会遍历所有的div元素来查找id为’content’的哪一个节点:

var content = $(‘div#content’);

用ID修饰ID也是画蛇添足:

var traffic_light = $(‘#content #traffic_light’);

3.将jquery对象缓存起来

要养成将jquery对象缓存进变量的习惯.

永远不要这样做:

$(‘#traffic_light input.on).bind(’click‘, function(){…});
$(’#traffic_light input.on).css(‘border’, ‘3px dashed yellow’);
$(‘#traffic_light input.on).css(’background-color‘, ‘orange‘);
$(’#traffic_light input.on).fadeIn(’slow’);

最好先将对象缓存进一个变量然后再操作:

var $active_light = $(‘#traffic_light input.on’);
$active_light.bind(‘click’, function(){…});
$active_light.css(‘border’, ‘3px dashed yellow’);
$active_light.css(‘background-color’, ‘orange’);
$active_light.fadeIn(’slow’);

为了记住我们本地变量是jquery的封装, 通常用一个$作为变量前缀.
记住,永远不要让相同的选择器在你的代码里出现多次.
缓存jquery结果,备用

如果你打算将jquery结果对象用在程序的其它部分,或者你的function会多次执行, 那么就将他们缓存到一个全局变量中.

定义一个全局容器来存放jquery结果, 我们就可以在其它函数引用它们:

// 在全局范围定义一个对象 (例如: window对象)
window.$my =
{
// 初始化所有可能会不止一次要使用的查询
head : $(‘head’),
traffic_light : $(‘#traffic_light’),
traffic_button : $(‘#traffic_button’)
};

function do_something()
{
// 现在你可以引用存储的结果并操作它们
var script = document.createElement(’script’);
$my.head.append(script);

// 当你在函数内部操作是, 可以继续将查询存入全局对象中去.
$my.cool_results = $(‘#some_ul li’);
$my.other_results = $(‘#some_table td’);

// 将全局函数作为一个普通的jquery对象去使用.
$my.other_results.css(‘border-color’, ‘red’);
$my.traffic_light.css(‘border-color’, ‘green’);
}

4. 掌握强大的链式操作

上面的例子也可以写成这样:

var $active_light = $(‘#traffic_light input.on’);$active_light.bind(‘click’, function(){…})
.css(‘border’, ‘3px dashed yellow’)
.css(‘background-color’, ‘orange’)
.fadeIn(’slow’);

这样可以写更少的代码, 让我们的js更轻量.
5.使用子查询

jQuery 允许我们对一个已包装的对象使用附加的选择器操作. 因为我们已经在保存了一个父级对象在变量里, 这样大大提高对其子元素的操作:

例如, 我们可以用子查询的方法来抓取到亮或不亮的灯, 并缓存起来以备后续操作.

var $traffic_light = $(‘#traffic_light’),
$active_light = $traffic_light.find(‘input.on’),
$inactive_lights = $traffic_light.find(‘input.off’);

提示: 你可以用逗号分隔的方法一次声明多个局部变量–节省字节数
6.对直接的DOM操作进行限制

这里的基本思想是在内存中建立你确实想要的东西，然后更新DOM 。这并不是一个jQuery最佳实践，但必须进行有效的JavaScript操作。直接的DOM操作速度很慢。

例如,你想动态的创建一组列表元素, 千万不要这么做:

var top_100_list = [...], // 假设这里是100个独一无二的字符串
$mylist = $(‘#mylist’); // jQuery 选择到

{
$mylist.append(‘

’ + top_100_list[i] + ‘

’);
}

我们应该将整套元素字符串在插入进dom中之前全部创建好:

var top_100_list = [...],
$mylist = $(‘#mylist’),
top_100_li = “”; // 这个变量将用来存储我们的列表元素

for (var i=0, l=top_100_list.length; i{
top_100_li += ‘

’ + top_100_list[i] + ‘

’;
}
$mylist.html(top_100_li);

我们在插入之前将多个元素包裹进一个单独的父级节点会更快:

var top_100_list = [...],
$mylist = $(‘#mylist’),
top_100_ul = ‘

{
top_100_ul += ‘

’ + top_100_list[i] + ‘

’;
}
top_100_ul += ‘

’; //关闭无序列表
$mylist.replaceWith(top_100_ul);

如果你做了以上几条还是担心有性能问题,那么:
* 试试jquery的 clone() 方法, 它会创建一个节点树的副本, 它允许以”离线”的方式进行dom操作, 当你操作完成后再将其放回到节点树里.
* 使用 DOM DocumentFragments. 正如jQuery作者所言, 它的性能要明显优于直接的dom操作.

7. 冒泡

除非在特殊情况下, 否则每一个js事件(例如:click, mouseover, 等.)都会冒泡到父级节点. 当我们需要给多个元素调用同个函数时这点会很有用.

代替这种效率很差的多元素事件监听的方法就是, 你只需向它们的父节点绑定一次, 并且可以计算出哪个节点触发了事件.

例如, 我们要为一个拥有很多输入框的表单绑定这样的行为: 当输入框被选中时为它添加一个class

像这样绑定事件是低效的:

$(‘#entryform input).bind(’focus‘, function(){
$(this).addClass(’selected‘);
}).bind(’blur‘, function(){
$(this).removeClass(’selected‘);
});

我们需要在父级监听获取焦点和失去焦点的事件:

$(‘#entryform’).bind(‘focus’, function(e){
var cell = $(e.target); // e.target grabs the node that triggered the event.
cell.addClass(’selected’);
}).bind(‘blur’, function(e){
var cell = $(e.target);
cell.removeClass(’selected’);
});

父级元素扮演了一个调度员的角色, 它可以基于目标元素绑定事件. 如果你发现你给很多元素绑定了同一个事件监听, 那么你肯定哪里做错了.

8.消除无效查询

尽管jquery可以很优雅的处理没有匹配元素的情况, 但它还是需要花费时间去寻找. 如果你整站只有一个全局js, 那么极有可能把所有的jquery函数塞进$(document)ready(function(){//所有你引以为傲的代码})里.

只运行在页面里用到的函数. 大多数有效的方法就是使用行内初始化函数, 这样你的模板就能准确的控制何时何处该执行js.

例如, 你的”文章”页面模板, 你可能会引用如下的代码在body结束处:

如果你的页面模板包含一些多变的模块可能不会出现在页面中, 或者为了视觉呈现的原因你需要它们能够快速加载, 你可以将初始化函数紧跟在模块之后.

Yellow

Green

你的全局js库可能会是这样子的:

var mylib =
{
article_page :
{
init : function()
{
// Article 特有的jQuery函数.
}
},
traffic_light :
{
init : function()
{
// Traffic light 特有的jQuery函数.
}
}
}

9. 推迟到 $(window).load

jquery对于开发者来说有一个很诱人的东西, 可以把任何东西挂到$(document).ready下冒充事件. 在大多数例子中你都会发现这样的情况.

尽管$(document).rady 确实很有用, 它可以在页面渲染时,其它元素还没下载完成就执行. 如果你发现你的页面一直是载入中的状态, 很有可能就是$(document).ready函数引起的.

你可以通过将jquery函数绑定到$(window).load 事件的方法来减少页面载入时的cpu使用率. 它会在所有的html(包括)被下载完成后执行.

$(window).load(function(){
// 页面完全载入后才初始化的jQuery函数.
});

多余的功能例如拖放, 视觉特效和动画, 预载入隐藏图像,等等. 都是适合这种技术的场合.
10. 压缩js

推荐一个js在线压缩地址: http://dean.edwards.name/packer/
11. 全面掌握jquery库

知己知彼, 百战百胜. 只有更深入的了解jQuery才能更灵活的使用它. 这里提供一个jQuery的速查手册, 可以打印出来随身携带. 要是有能力将jQuery源码通读一遍那就更好了.

原文来自：jQuery Performance Rules ; 译文来自：Rlog.cn . 若转载请注明出处, 谢谢
Tags - jquery , javascript

Google Wave邀请码，赠送14份Google Wave体验名额

Thu, 26 Nov 2009 07:11:15 +0000

早段时间得到Google发送的Google Wave体验的邀请
当时有8个邀请朋友的名额，送了几个给朋友
今天登陆Wave发现邀请名额新增至14个
如果需要体验Google Wave的朋友留下你的Gmail
我抽空发送邀请名额给你
名额有14位。
最好是Google迷，不然估计玩不久。不要浪费名额。
谢谢合作。

2010-04-20登录Wave发现名额又增至15,需要体验的朋友可以继续留言!
Tags - google , wave

让IE8以IE7的渲染模式来渲染CSS

Sun, 08 Mar 2009 02:50:03 +0000

极少时候，需要用到IE8 CSS hack
但是网络搜索到的都是标题党，所提供的并不是真正的IE8 CSS hack
难道IE8没有专有的识别字符？

答案我也不知道，未发现。
但是可以通过另外一种途径，使你的网页能像IE7那样显示。
虽然我明白，IE8比IE7进步很多，网页标准的支持也更大
渲染CSS上与Firefox非常接近了，在IE8上所见与Firefox几乎无异（极少差异，但却存在）。
但是因为IE这个家族的其他两位重要成员IE6、IE7还是非常多人在使用，特别是IE7。
目前截至2009年05月为止，IE7占有率为44.51%，IE6占有率为17.52%，IE8为3.99%
IE6、IE7是网页设计师们重点的网页测试对象（这里所说的网页测试，是在浏览器中CSS布局的定位是否精确）。
但是我们也得考虑IE8，IE8是的成熟是未来几年升级的对象，因该会有部分用户从IE6直接升级到IE8。
因此我们一定要考虑IE8，把它纳入网页测试对象。

以上是我针对性的分析，言归正传。

微软IE设计团队在设计IE8的时候就为IE8浏览增加了兼容模式、IE7浏览模式。
因此我们用微软提供的下代码可以在IE8浏览器中使用IE7的渲染模式来渲染CSS

这是一个“思想”倒退的办法，但是能暂时解决在IE8中遇到的问题。

其实很少需要用到以上方法，前面说过，IE8上所见与Firefox几乎无异（极少差异，但却存在）。
这个“几乎”就让我使用了一次“让IE8以IE7的渲染模式来渲染CSS”
Tags - ie7 , ie8

使IE6中DIV(或其他容器)设置高度(height)为100%

Wed, 04 Mar 2009 05:33:38 +0000

当你在制作网页中用CSS定义一个DIV(或者其他容器，如table等...)的height:100%
在IE6中此定义无法达到预期纵向(y)100%显示效果时
以下方法可以帮你解决

首先请用CSS定义

body{height:100%}

此定义是为了让本身body就具有height为100%

然后
再定义你想让其达到高100%纵向满屏的DIV(或者其他容器)的父DIV(或者其他容器)
其高度亦为height:100%

注意加重字体所表达的意思

即：
你要定义一个DIV的高100%纵向满屏
那么请先将其上级的DIV的高定义为100%
上级有多少个DIV，你都要定义它们的高为100%
这样才能达到包含在里面的DIV的高为浏览器高100%的纵向满屏效果。

Tags - xhtml , css , div , ie6 , height

Azuresky Blog重新开放

Sat, 20 Dec 2008 11:45:28 +0000

Azuresky Blog于2008-12-10到20日无法访问！
原因：
原来的空间到期，因某些原因不能继续使用原来的空间！
我没有提早购买新的空间进行转移博客数据！导致10天无法进行访问！

今天终于重新开放！

又见地震

Mon, 01 Sep 2008 11:17:27 +0000

08年08月30日，晚上看凤凰卫视中国四川又有较严重的地震发生
有一些人们和动物在地质灾害中去世

生命就在某天被收回，任何“动物”面对死亡都只能仰天叹惜，无能为力，人也不例外。
去世的人们请安息，活着的人们珍惜每一天！
Tags - 地震

CSS网页设计解决方案(Hacks Issues)

Fri, 13 Jun 2008 13:20:13 +0000

    1、说明本文阐述了8条我们发现的在用CSS设计中有用的解决方案。

    2、浏览器特定的选择器

    英文地址：  http://www.solidstategroup.com/page/1592

    当你想在一个浏览器里改变样式而不像在其他浏览器中改变时，这些选择器很有用。

    IE6以下

   *html{}

    IE 7 以下

*:first-child+html {} * html {}

    只对IE 7

*:first-child+html {}

    只对IE 7 和现代浏览器

html>body {}

    只对现代浏览器(非IE 7)

html>/**/body {}

    最新的Opera 9以下版本

html:first-child {}

Safari

html[xmlns*=”"] body:last-child {}

    要使用这些选择器，请在样式前写下这些代码。例如：

#content-box {
　　width: 300px;
　　height: 150px;
}
* html #content-box {
　　width: 250px;
}
/* 重写上面的代码并且把宽度改为250px
在IE6以下版本中适用。 */

    3、在IE6中使用透明PNG图片

    IE6的一个很难处理的BUG就是它不支持透明PNG图片。

    你可能需要用一个重写的CSS的滤镜来解决这个问题：

*html #image-style {
　　background-image: none;
　　filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=”filename.png”, sizingMethod=”scale”);
}

    4、去掉连接虚线框

    当你点击链接时，Firefox会在链接周围产生一个虚线外框。
　　
    这个很好解决，只需在a标签中添加outline:none就可以了。

a{
　　outline:none;
}
注：此样式定义对IE6、IE7无效。但IE8有效
    5、对inline元素应用宽度。

    如果你对一个inline元素使用宽度，它将只在IE6下起作用。

    所以的HTML标签要么是Block的要么就是inline的。inline属性的标签有< strong>和Block标签包括
和

    你不能控制inilne标签的宽带，不过有一个方法是把标签属性从inline改为Block。

span{
　　width:150px;
　　display:block;
}

    应用display:block能够把span标签变成block标签，从而控制它的宽度。

    6、使一个固定宽度的网站居中。

    为了让你的网站在浏览器中居中，可以为最外层Div添加position:relative属性，然后将margin设为auto。

#wrapper {
　　margin: auto;
　　position: relative;
}

    7、图片替换技术

    对于头部来说，永远是最好用文字而不是图片。在你必须要用图片的某个特殊地方最好使用隐藏文字的层的背景图片。这对于屏幕阅读和SEO非常有用，尽管依然使用很普通的文字，这可以联想到所有的优点。

HTML：

Main heading one

CSS:

h1 {
　　background: url(heading-image.gif) no-repeat;
}
h1 span {
　　position:absolute;
　　text-indent: -5000px;
}

    正如你所见，我们对H1标签使用普通的HTML代码，用CSS来将图片替代文字。Text-indent把文字放到左边5000像素处，从而用户看不到它们

    8、最小宽度

    IE的另外一个Bug就是它不支持min-width属性。min-width确实非常有用，特别是对于100%宽度的可变模板来说，因为他告诉浏览器停止收缩。

    对于除IE6以外的所有浏览器来说你只需min-width:xpx;例如：

.container {
　　min-width:300px;
}

    要让这些在IE6下起作用的话你要添加额外的努力！你需要创建两个DIV，一个包含着另一个。

Content

    然后你需要设置外面层的min-width：

.container {
　　min-width:300px;
}

    现在又要IE hack起作用了，你需要写下以下代码：

* html .container {
　　border-right: 300px solid #FFF;
}
* html .holder {
　　display: inline-block;
　　position: relative;
　　margin-right: -300px;
}

    当浏览器窗口调整外层宽度来适应直到它缩小到border的宽度时，这个时候它就不能够在缩小了。而holder层也会停止收缩。外层的边框宽度变成了内层的最小宽度。

    9、隐藏水平滚动

    要去除水平滚动条，可以在body中插入overflow-x:hidden属性。

body {
　　overflow-x: hidden;
}

    这在你决意要用一个比浏览器款的图片或Flash时很有用。
Tags - css , css滤镜 , code , 解决方案

较常用的CSS层叠样式表缩写总汇

Fri, 13 Jun 2008 12:42:34 +0000
善用CSS层叠样式表缩写可以有效地把CSS文件的大小减小。

CSS缩写的主要规则如下：

颜色(color)
16进制的色彩值，如果每两位的值相同，可以缩写一半，例如：
#000000可以缩写为#000;#336699可以缩写为#369;

容器填充(padding)与边距(margin)
通常有下面四种书写方法:
    property:value1; 表示所有边都是一个值value1；
    property:value1 value2; 表示top和bottom的值是value1,right和left的值是value2
    property:value1 value2 value3; 表示top的值是value1，right和left的值是value2，bottom的值是value3
    property:value1 value2 value3 value4; 四个值依次表示top,right,bottom,left

方便的记忆方法是顺时针，上右下左。具体应用在margin和padding的例子如下：
引用
margin:5px;
margin:5px 6px;
margin:5px 6px 4px;
margin:5px 6px 4px 6px;

边框(border)
边框的属性如下：
引用
    border-width:1px;
    border-style:solid;
    border-color:#000;

可以缩写为一句：
引用
border:1px solid #000;

语法是border:width style color;

背景(backgrounds)
背景的属性如下：
引用
    background-color:#f00;
    background-image:url(background.gif);
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:0 0;

可以缩写为一句：
引用
background:#f00 url(background.gif) no-repeat fixed 0 0;

语法是background:color image repeat attachment position;

你可以省略其中一个或多个属性值，如果省略，该属性值将用浏览器默认值，默认值为：
    color: transparent
    image: none
    repeat: repeat
    attachment: scroll
    position: 0% 0%

字体(fonts)
字体的属性如下：
引用
    font-style:italic;
    font-variant:small-caps;
    font-weight:bold;
    font-size:1em;
    line-height:140%;
    font-family:"Lucida Grande",sans-serif;

可以缩写为一句：
引用
font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif;

注意，如果你缩写字体定义，至少要定义font-size和font-family两个值。

列表(lists)
取消默认的圆点和序号可以这样写list-style:none;
list的属性如下:
引用
    list-style-type:square;
    list-style-position:inside;
    list-style-image:url(image.gif);

可以缩写为一句：
引用
list-style:square inside url(image.gif);

Tags - css , code , css缩写

Mozilla给网站制作朋友们的CSS书写顺序建议

Fri, 13 Jun 2008 12:22:30 +0000
css显示样式定义属性
display
list-style
position
float
clear

css容器、块等自身样式定义属性
width
height
margin
padding
border
background

css文本样式定义属性
color
font
text-decoration
text-align
vertical-align
white-space
other text
content
Tags - xhtml , css , mozilla

黑灰白网页，为全国哀悼日改网页样式为黑灰白色方法-CSS滤镜Gray

Mon, 19 May 2008 14:35:51 +0000
2008年05月19日，绝大部分大型门户网站、百度、腾讯、网易、雅虎等等都把网站、网页改成了黑白灰色的样式
以示深切哀悼的心情。

这里我教大家用CSS滤镜就能不用进行特大的工程来改变风格样式达到黑白灰色网站效果。
............

Tags - 全国哀悼日 , 2008.05.19 , css , css滤镜 , code

2008年05月19-21日全国哀悼日，为四川汶川默哀3分钟

Mon, 19 May 2008 14:14:45 +0000
2008年05月19日14时28分起，全国人民为四川汶川大地震遇难者默哀3分钟。
各地汽车、火车、舰船笛声长鸣，防空警报在各城市上空鸣响。
并将05月19-21日定为全国哀悼日。

我也将我的个人网站“蔚蓝色天空”、“Azuresky Blog”黑灰白色三天，以表默哀之心。
历史将记住让人们沉痛受苦的这些日子
............

Tags - 四川汶川 , 7.8级地震 , 地震 , 2008.05.19 , 全国哀悼日 , 救灾

中国雅虎、百度、谷歌的四川汶川救灾最新消息，雅虎还有捐款的通道

Fri, 16 May 2008 13:23:55 +0000
Yahoo(中国雅虎)提供的四川汶川救灾最新消息，也有捐款的通道
详情点击下面图片！有救灾的最新情况
里面有捐款通道，都靠自愿吧...

百度的赈灾图片也放出来，包含链向百度赈灾的专区


Google（谷歌）设的“寻找灾区的亲人”搜索专区：

    寻找灾区的亲人

Tags - 四川汶川 , 7.8级地震 , 地震 , 救灾 , yahoo , google , baidu

震碎蜀地,流亡...向天...无力...

Wed, 14 May 2008 15:43:33 +0000

2008-05-12日，一个令人感到无法表达的事情发生了
四川汶川发生7.8级的强烈地震，面对死亡，有太多的不可预测。

看那些新闻图片，全身会颤抖，不想放上来，也不知道要说些什么。

......

让我们为四川地震灾区的人们默哀祈福一分钟...
Tags - 四川汶川 , 7.8级地震 , 地震

十种用JavaScript处理图片的特别效果

Wed, 14 May 2008 04:45:38 +0000
10种用JavaScript来进行处理图片的特别效果
前段时间网络上暇逛，在“可能吧”看到一篇“10个用能用JavaScript实现的图片特效”
然后连接到国外的一个叫Blog Oh Blog原文上。
感觉非常有趣，不需要Photoshop来进行处理，图片本身还是原来的图片
用JavaScript来自动对页面上的图片在原来的基础上处理显示出的特别效果
有需要玩玩可以体验下。

1、图片倒影效果（Reflex.js）
这个脚本能使图片产生倒影的效果。效果如下：

引用
下载地址（官方提供）：Reflex.zip

2、图片边角卷叶效果（Curl.js）
这个JavaScript能使图片产生卷页的效果，而且鼠标悬停时可以添加动态卷页效果。效果如下：

引用
下载地址（官方提供）：Curl.zip

3、图片花边效果（Edge.js）
这个脚本能使图片的边缘产生花边和模糊效果，。效果如下：

引用
下载地址（官方提供）：Edge.zip

4、图片圆角、阴影效果（Corner.js）
这个JavaScript能使图片的边角成为圆角并且整个图片有阴影效果。效果如下：

引用
下载地址（官方提供）：Corner.zip

5、图片幻灯片框架效果（Slided.js）
这个脚本能使图片的周边产生幻灯片的框架效果。效果如下：

引用
下载地址（官方提供）：Slided.zip

6、图片高光立体按钮效果（Glossy.js）
这个脚本能使图片产生立体的光泽效果，犹如水晶按钮般，还会产生阴影。效果如下：

引用
下载地址（官方提供）：Glossy.zip

7、图片电影胶片效果（Filmed.js）
这个脚本能使图片产生犹如电影胶片的效果，还能调整阴影立体感。效果如下：

引用
下载地址（官方提供）：Filmed.zip

8、图片内部放大镜效果（Loupe.js）
这个脚本能使图片的内部生成一个放大镜，能让浏览者拖动放大镜放大查看图片的效果。效果如下：

引用
下载地址（官方提供）：Loupe.zip

9、图片边框与阴影效果（Instant.js）
这个JavaScript能使图片产生犹如照片的边框效果效果。效果如下：

引用
下载地址（官方提供）：Instant.zip

10、图片斜光立体效果（Bevel.js）
这个脚本能使图片产生立体的效果，犹如水晶按钮般，还会产生阴影
跟Glossy.js差不错，但立体程度与光泽有所区别。效果如下：

引用
下载地址（官方提供）：Bevel.zip

应用以上图片效果在网页方法：

下载解压后上传到空间，然后在需要显示效果的页面内head标签里添加入以下代码（示范倒影效果reflex.js）：

然后，在想要显示图片处理特效的图片img标签里添里加入class类参数，例如：

更详细可到官方网站查看。本身下载回来的文件里面也有详细用法介绍

然后，加上该class的图片就会有倒影的效果了。

其它图片处理特效添加方法相同。
Tags - javascript , 特效 , code

Azuresky Blog悄悄地Google PageRank为2

Wed, 30 Apr 2008 14:10:39 +0000
Google神不知鬼不觉的把握的Blog的PR值更新为2了。
因为与2008年4月24日找到并开始工作，所以都在忙。
也估计没太多时间来更新Blog了，反正有时间就更新Blog。
愿它成为常青树，可是我没时间更新，很难成为常青树吧？？
革命尚未成功，Tim我还得继续努力。

Google PR值2与其他搜索引擎收录情况截图。

Tags - google , pagerank

提供“我爱中国”与“中国心”头像

Fri, 18 Apr 2008 06:59:44 +0000

我没“anti-cnn”上的一些朋友那么“愤青”，但我是爱国的。I Love China
什么都不想说！
对用不用这两个头像的人，我很能理解，的确是不一定要把QQ和MSN换成这个头像！
但是对于一些麻木的人，说想叫他换这个两个头像是傻瓜的人，换这个头像是傻了的人。
我为你们感到悲哀，换不换是你的权利，可是不要讽刺换了这个头像的人。
我真的怀疑，是不是你到了出去国外被人讥笑、到了“三战”你才会觉悟？？？

现在似乎网络上找到的头像都是比较不清晰的头像！
要么还出现红心中间有黑色半透明条纹的“盗版”中国心头像（笑）。
............

Tags - 中国心 , 我爱中国

Photoshop Express已经开始公测

Thu, 03 Apr 2008 04:55:54 +0000
刚刚得知
Adobe公司于2008-03-29宣布，在线版PS程序“Photoshop Express”已经开放公测。

Photoshop Express免费提供2GB空间，用户可以在线存储、管理、编辑、分享自己的照片，并能通过Facebook等社交网站进行上传和下载，或者在Adobe提供的画廊里互相展示。

感兴趣的朋友可以到：http://www.photoshop.com/express
注册自己的帐号！
感慨，虽然现今Photoshop Express与专业Photoshop功能差别很大。
但，全新的Web时代Photoshop从此到来。
Tags - adobe , photoshop , 历史见证

对整个Blog的文章进行了SEO

Wed, 02 Apr 2008 09:24:00 +0000
针对整个Blog进行了SEO！
完毕后有些后悔！因为在搜索引擎搜索我的blog。所有文章点击后无法显示了（SEO文章的url）。

应该每天两三篇的进行SEO才好！大规模的SEO，太多的404页面！怕被Google和百度给K掉了。

也对robots.txt文件进行了修改！希望能起到屏蔽优化前的全部文章收录。

期待，期待无事的度过这一时期。如果真的被搜索引擎K掉，也只好以后再去搜索引擎登录了。

Flash视频全屏播放的ActionScript

Tue, 01 Apr 2008 13:50:52 +0000
最近在深入学习Flash中！
在看56或者土豆的视频的时候。有一个全屏幕播放视频的按钮。

想要通过点击一个按钮然后全屏播放你的Flash，那么就需要用到ActionScript 2.0的一个语句来实现。
很简单，只需在Flash需要点击的按钮中加入以下ActionScript语句：
全屏播放:

on (release) {
　　Stage.displayState = "fullScreen";

退出全屏播放:

on (release) {
　　Stage.displayState = "normal";
}

鼠标响应事件随便你选择点击或者鼠标滑过等等

然后还需要在网页插入Flash的参数中加入下面这段：

启用全屏设置为"true"，否则设置为"false"（默认值）
这是当在响应鼠标事件或键盘事件时才会调用启动Flash全屏模式的ActionScript。
值得注意的是，在全屏模式下，无法在Flash文本框输入文本。

Tags - flash , code , actionscript

Flash网页在浏览器中全屏显示的详细方法

Mon, 31 Mar 2008 12:17:34 +0000

最近一段时间都在做毕业设计和帮忙制作“Ｐ＆Ｄ品多卫浴”的产品展示网站。
都没有时间写写东西了。
不过在制作毕业设计和“Ｐ＆Ｄ品多卫浴”这个网站的时候。
需要用到有单独Flash页面在浏览器中全屏显示。

最简单的方法就是：
先用Dreamweaver直接插入Flash。然后把里面的参数属性width和height设置成：width="100%" height="100%"

部分代码：

如果现在在浏览器查看效果，可能不是在浏览器中以全屏幕的显示方式浏览Flash。
因为还需要写几个CSS的样式定义。
因此我在head标签中写入一下CSS：

这是为了让html与body标签内的内容以浏览器100%全屏幕的方式显示，而#flashContent则是我插入Flash的那个层的id。
好了，现在在浏览器中浏览，发现是以全屏模式浏览Flash了

切记的是，插入的Flash不要加上salign这个参数

它将会以上、下左右等等对齐的方式显示Flash

为了插入通过XHTML 1.0的验证。不想你网页上的Flash有“单击以激活并使用此控件”框，可采用SWFObject的方法插入Flash（有关SWFObject的资料去看这里）。
用SWFObject插入在浏览器中全屏显示Flash的方法也是设置宽与高为100%

Tags - flash , code

把Azuresky BLOG换回我自己最初的风格

Sat, 22 Mar 2008 03:32:50 +0000
由于审美观还是以简洁清新为主。
所以昨天把风格恢复到TTFlying，待以后制作出符合我自己的Style后再进行更换。
相信不会很久，等有空了，就开始制作新的Template。

博客SEO必知：搜索引擎Ping服务的一些地址

Fri, 21 Mar 2008 07:24:44 +0000
Ping服务
Ping 服务是一种通知“博客搜索引擎”某一博客内容已经更新的通知服务。
当blog作者在发表更新文章时，这些更新将通知搜索引擎
使搜索引擎能及时以最快的时间内收录更新你Blog的文章。
以上能体现Ping服务对SEO的重要性。

Ping服务分
　- 手动Ping服务
　- 自动Ping服务

手动Ping服务
当发布或更新你的Blog文章后
在博客搜索引擎提供的手动Ping服务页面提交一次Blog的地址或Blog的RSS地址即可。

自动Ping服务
以博客搜索引擎提供的Ping Server API将Blog内容的更新通知给搜索引擎
无需每次更新Blog后都手动进行更新通知，这对于经常更新Blog内容的用户尤其有用。

......
............

Tags - seo

Apple(苹果)官方已经放出Safari 3.1 正式版下载

Thu, 20 Mar 2008 11:28:16 +0000

Apple官方网放出了Safari 3.1 正式版本的下载

Safari 3.1
支持新一代的因特网视频、音频、与动画标准，能够提供尽可能最佳的Web 2.0浏览体验。
并支持全部范围普及的互联网插件-包括Flash、Shockwave和QuickTime（CSS3 Web字体支持、CSS动画支持、HTML 5的媒体支持等...）
............

Tags - apple , safari

经典Logo改造成Web2.0样式

Thu, 20 Mar 2008 09:46:50 +0000
Web2.0样式风行，现在不知道哪位朋友把一些品牌的经典Logo改造成Web2.0样式！
这些图片好像是一年前左右的了！现在贴出来欣赏欣赏！

............

Tags - 经典

横空出世IE 8.0 Beta1安装与新体验

Tue, 11 Mar 2008 08:39:41 +0000
IE7还没有普及，现在微软又继续推出了IE 8.0 Beta1来刺激用户！
这些年浏览器这块版，被分成4份。

有微软的代表IE（Internet Explorer）
还有“热火朝天”的FF（Firefox）
从手机平台发展到Windows平台的Opera
还有来势汹汹的Apple Safari。

当然其中最火热的还属IE与FF之间的战争！
Firefox 3 已经到了Beta 3了；微软也不甘心落后，现在推出了IE 8.0 Beta1决心与之抗衡。誓把遗失之地争取回来？
............

Tags - microsoft

两个课程期末设计的窗体界面

Thu, 06 Mar 2008 14:11:09 +0000

............

Tags - design , 设计

Adobe Photoshop历代启动界面回顾(截至07年的CS3)

Wed, 05 Mar 2008 10:43:36 +0000
Adobe Photoshop有着很悠久的版本历史，本文将介绍Photoshop各版本启动画面。

前身与Photoshop0.87-3.0版本的启动界面
......
Photoshop4.0-7.0版本的启动界面
......
Photoshop CS-CS3(8.0-10.0)版本的启动界面，改称为Photoshop Creative Suite(Photoshop CS)。
......
............

Tags - adobe , 设计 , design , 历史见证

解决IE5、IE6、IE7与W3C标准的冲突(IE7.js IE8.js)

Fri, 22 Feb 2008 15:34:46 +0000
如果分别用IE5、IE6、IE7浏览同一个网页，将可能出现不一样的效果。
这是它们之间对CSS的解析选择器不一样或错误和个别bug所导致。为了解决这些错误和bug。
我们不得不找到一个能平衡于它们之间的解决方法。

如png透明问题在IE5、IE6下无法显示出其效果，我们可能会使用CSS hack或者引入外部JavaScript来实现。譬如前面我提到过用pngfix的那个方法就是调用外部JavaScript来解决在IE5、IE6下png透明问题。当然还有更多的方法。

而现在有种更加完美的方法能兼容IE5、IE6、IE7的CSS选择器解析不一样问题。那就是： ie7 - js

ie7 - js中是一个JavaScript库（解决IE与W3C标准的冲突的JS库），使微软的Internet Explorer的行为像一个Web标准兼容的浏览器，支持更多的W3C标准，支持CSS2、CSS3选择器。它修复了许多的HTML和CSS问题，并使得透明PNG在IE5、IE6下正确显示。

目前该ie7 - js版本： 2.0 beta 3

用法：
直接引用Google Code服务器上的js文件。

IE7.js
使IE5、IE6升级至兼容IE7
注释使Internet Explorer版本号低于IE7的IE浏览器载入该代码。

IE8.js
使IE5、IE6、IE7支持更多的W3C标准（修复了许多的HTML和CSS问题）。
注释使Internet Explorer版本号小于8的IE浏览器载入该代码，而其它符合标准的浏览器则会忽略该代码，并在IE8出来后不干扰其工作。

PNG
此脚本仅修复了图像命名为：*-trans.png
遗憾的是，此方法透明的PNG图像不能平铺（重复）使用在背景上；也不能用在CSS “position”定位属性上。

除了直接引用Google Code服务器上的js文件外，如果你愿意你也可以下载然后引入
2.0 beta 3下载地址页面：http://ie7-js.googlecode.com/svn/version/2.0(beta3)/
右击另存下载地址：IE7.js IE8.js

演示：
http://ie7-js.googlecode.com/svn/test/index.html
Tags - code , javascript

Apple Safari 3.1 (525.9)苹果浏览器简体中文版for Windows

Thu, 21 Feb 2008 11:50:10 +0000
Apple最近频繁更新了Safari, 与2月15日, 发布Windows发布的同时还有 Tiger 与 Leopard 版的 Safari.

Digidea朋友立即对其进行完善
引用
这阵子 Apple 动作好快, 几天不看居然又更新了, 日期是 2 月 15 日, 同时发布的还有 Tiger 与 Leopard 版的 Safari.

此次变化不大, 在上一个全语言版的基础上, 除了常规的 WebKit 内核更新, 对语言文件又进行了一些完善, 就 Safari 目前的功能来看, 几乎可以说是完美了. 我又修改了替换用的中文字体, 相信显示效果应该能更好一些.

官方更新日志

- Huge plain text pastes are now much faster
- Photo uploading to auction websites now works
- Safari now logs unsafe javascript to system log
- Writing direction shortcuts now implemented

因为 Safari 的界面根据系统环境而定, 因此在这里我将系统与软件语言的关系说明一下.

系统语言↓ Safari 语言↓ 所需操作↓

英语英语 无需安装语言包
英语简中 安装语言包后将所有目录中 zh_CN.lproj 文件夹内的文件复制到 English.lproj 或 en.lproj 内
英语繁中 安装语言包后将所有目录中 zh_TW.lproj 文件夹内的文件复制到 English.lproj 或 en.lproj 内
简中英语 无需安装语言包并将所有目录内除 English.lproj 或 en.lproj 外并以 .lproj 结尾的文件夹删除
简中简中 安装语言包即可
简中繁中 安装语言包后将所有目录中 zh_TW.lproj 文件夹内的文件复制到 zh_CN.lproj 内
繁中英语 无需安装语言包并将所有目录内除 English.lproj 或 en.lproj 外并以 .lproj 结尾的文件夹删除
繁中简中 安装语言包后将所有目录中 zh_CN.lproj 文件夹内的文件复制到 zh_TW.lproj 内
繁中繁中 安装语言包即可
其他英语 无需安装语言包并将所有目录内除 English.lproj 或 en.lproj 外并以 .lproj 结尾的文件夹删除
其他简中 安装语言包后将所有目录中 zh_CN.lproj 文件夹内的文件复制到 English.lproj 或 en.lproj 内并将除 English.lproj 或 en.lproj 外以 .lproj 结尾的文件夹删除
其他繁中 安装语言包后将所有目录中 zh_TW.lproj 文件夹内的文件复制到 English.lproj 或 en.lproj 内并将除 English.lproj 或 en.lproj 外以 .lproj 结尾的文件夹删除

SkyDrive 下载地址：
引用
Apple Safari 3.1 (525.9)下载

Tags - apple , safari

AuroraNight风格投入使用

Wed, 20 Feb 2008 07:26:24 +0000
于2月13日开始制作NewYearNight的续作AuroraNight极光夜晚
期间在2月14日发布给bo-blog的blogger们使用，期间经过5、6次修改。

本准备刚好过了正月十五后才开始投入Blog使用，现提前一天投入使用！

即时截图：

使PNG图片格式在IE6中背景透明(pngfix)

Wed, 20 Feb 2008 07:06:56 +0000
很多朋友在制作网页时都会用到图片透明。使其部分透明的图片后面显示背景部分。
而现在流行的具有透明性的图片有GIF和PNG两种非常普及格式。

GIF(Graphics Interchange Format图像互换格式)可实现图像区域的部分或全局透明。现非常多的网站都将其运用到其中。
但是256色的限制GIF的使用范围。还有一个问题：譬如，当我们的图像边缘有阴影时，保存透明后会发现其边缘不是以渐变式透明显示，而是用灰度色显示而无透明而言。

解决上面GIF的缺陷方案最好方法就是使用现在网络上流行使用的另一种图像格式PNG(Portable Network Graphic Format流式网络图形格式)
但是PNG最大的问题就是，它在IE6下无法显示透明区域（Firefox、Opera、Safari均支持PNG透明），会有一种灰白色代替成为其背景色。这不是PNG这个格式图片的问题，而是IE6的BUG，没有将PNG的Alpha通道打开,造成透明PNG图片的在IE6上显示不出透明区域。

现在就有种方法是通过引入JavaScript的方式解决这个问题。

第一步：
新建一个pngfix.js文件写入以下代码（放在你网页的相同目录下）：

var PIXELGIF="pngfix.gif";// 这个是个头1*1像素的透明gif图片，请自行建立并放在你网页的相同目录下

var arVersion = navigator.appVersion.split("MSIE");
var version = parseFloat(arVersion[1]);
var pngxp=/\.png$/i;
var AlphaPNGfix= "progid:DXImageTransform.Microsoft.AlphaImageLoader";
function fixPNGAll() {
        if(!document.all) return;
        if ((version >= 5.5 && version < 7) && (document.body.filters)) {
          for(var i=0; i                var img = document.images[i];
                if(img.src && pngxp.test(img.src)) {
                  var imgName = img.src;
                  var imgID = (img.id) ? "id='" + img.id + "' " : "";
                  var imgClass = (img.className) ? "class='" + img.className + "' " : "";
                  var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' ";
                  var imgStyle = "display:inline-block;" + img.style.cssText;
                  if (img.align == "left") imgStyle = "float:left;" + imgStyle;
                  if (img.align == "right") imgStyle = "float:right;" + imgStyle;
                  if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle;
                  var strNewHTML = "                  + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
                  + "filter:" +AlphaPNGfix
                  + "(src='" + img.src + "', sizingMethod='scale');\">";
                  if (img.useMap) {
                        strNewHTML += "                        + "height:" + img.height + "px;width:" + img.width +"\" "
                        + "src=\"" + PIXELGIF + "\" usemap=\"" + img.useMap
                        + "\" border=\"" + img.border + "\">";
                  }
                  img.outerHTML = strNewHTML;
                  i--;
                }
          }
          /* for type=image png button */
          var kmax = document.forms.length;
          for(var k=0; k                var fmob = document.forms[k];
                var elmarr = fmob.getElementsByTagName("input");
                var jmax = elmarr.length;
                for(var j=0; j                        var elmob = elmarr[j];
                        if(elmob && elmob.type=="image" && pngxp.test(elmob.src)) {
                                var origsrc = elmob.src;
                                elmob.src = PIXELGIF;
                                elmob.style.filter = AlphaPNGfix+"(src='" +origsrc +"')";
                        }
                }
          }
        }
}

function fixPNG(img) {
        if(!document.all) return;
        var img;
    if(img && img.src && pngxp.test(img.src)) {
      var imgName = img.src;
      var imgID = (img.id) ? "id='" + img.id + "' " : "";
      var imgClass = (img.className) ? "class='" + img.className + "' " : "";
      var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' ";
      var imgStyle = "display:inline-block;" + img.style.cssText;
      if (img.align == "left") imgStyle = "float:left;" + imgStyle;
      if (img.align == "right") imgStyle = "float:right;" + imgStyle;
      if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle;
      var strNewHTML = "      + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
      + "filter:" +AlphaPNGfix
      + "(src='" + img.src + "', sizingMethod='scale');\">";
      if (img.useMap) {
        strNewHTML += "        + "height:" + img.height + "px;width:" + img.width +"\" "
        + "src=\"" + PIXELGIF + "\" usemap=\"" + img.useMap
        + "\" border=\"" + img.border + "\">";
      }
      img.outerHTML = strNewHTML;
    }
}

第二步：
在head标签中引入js文件

第三步（分两种情况）：
1、指定PNG图片使其在IE6下背景透明
在img标签中加入onload="fixPNG(this)"事件

2、页面内所有PNG图片使其在IE6下背景透明
在body表情中加入onload="fixPNGAll()"事件

需要注意的是：
如果你的网页需要符合XHTML 1.0标准的话，请用第三步中的2方法，因为1方法中img标签中的onload事件是不符合XHTML 1.0标准的

特殊情况（用PNG为button按钮的背景时）：
如果你要在input标签的背景中使用PNG图片，此js文件同样适用。

先在head标签中引入js文件

在body标签中加入onload="fixPNGAll()"事件

示例

其实还有其他一些方法也能解决PNG图片格式在IE6中背景透明的问题，Tim将下次跟大家共同探讨。
Tags - javascript , code

Alexa的Traffic Rank突进到一百四十万内

Mon, 18 Feb 2008 07:07:30 +0000
从在Alexa有Traffic Rank的12583052名到现在的1392008名有不错的进步，希望能再接再厉，突进十万。

截图：

用来提高Alexa排名的几个有效方法

Sun, 17 Feb 2008 10:34:50 +0000
这里所说的方法，都是合理合法的，不会受到搜索引擎的惩罚。
引用

1、安装Alexa工具条，或者安装Firefox下的SearchStatus插件。并且设置自己的Blog作为默认首页，这样每次你打开浏览器的时候，Alexa统计就开始工作了。

2、把Alexa排名统计的widget放在Blog上，当它被点击的时候，也相当于Alexa统计到一次PV，即使那个用户没有安装Alexa工具条。

3、如果可以的话，在你的公司或者办公室里的电脑里都安装上Alexa工具条。

4、在站长论坛里发贴子的时候留下你的链接，一般站长安装Alexa的较多，当他们访问你的Blog的时候，当然会有帮助。

5、给你的Blog添加一个Alexa分类，把有关Alexa的文章都放在里面，这样站长有更大的机会来到你的Blog，你的排名当然就容易上升。

6、找到你的Blog上最受欢迎的文章，把Alexa的链接添加上，或者使用第五点中所说的重定向链接到你自己内部的文章。

7、提供一些站长工具，这样站长就会经常来造访，并且提高你的Alexa排名，比如SEO 在线工具中的Google PageRank Checker就是一个很好的例子。

Tags - seo , 站长 , alexa

Azuresky

腾讯企业邮箱邀请名额30名

HTML5的新标签

腾讯微博邀请码，赠送QQ微博邀请名额

14条最佳JS代码编写技巧

开源界的 5 大开源许可协议

什么是许可协议？

GNU GPL

GNU LGPL

BSD

MIT

Apache

Creative Commons

延伸资源

jQuery编写技巧之性能优化

Traffic Light

Traffic Light

Traffic Light

Google Wave邀请码，赠送14份Google Wave体验名额

让IE8以IE7的渲染模式来渲染CSS

使IE6中DIV(或其他容器)设置高度(height)为100%

Azuresky Blog重新开放

又见地震

CSS网页设计解决方案(Hacks Issues)

Main heading one

较常用的CSS层叠样式表缩写总汇

Mozilla给网站制作朋友们的CSS书写顺序建议

黑灰白网页，为全国哀悼日改网页样式为黑灰白色方法-CSS滤镜Gray

2008年05月19-21日全国哀悼日，为四川汶川默哀3分钟

中国雅虎、百度、谷歌的四川汶川救灾最新消息，雅虎还有捐款的通道

百度的赈灾图片也放出来，包含链向百度赈灾的专区

Google（谷歌）设的“寻找灾区的亲人”搜索专区：

震碎蜀地,流亡...向天...无力...

十种用JavaScript处理图片的特别效果

Azuresky Blog悄悄地Google PageRank为2

提供“我爱中国”与“中国心”头像

Photoshop Express已经开始公测

对整个Blog的文章进行了SEO

Flash视频全屏播放的ActionScript

Flash网页在浏览器中全屏显示的详细方法

把Azuresky BLOG换回我自己最初的风格

博客SEO必知：搜索引擎Ping服务的一些地址

Apple(苹果)官方已经放出Safari 3.1 正式版下载

经典Logo改造成Web2.0样式

横空出世IE 8.0 Beta1安装与新体验

两个课程期末设计的窗体界面

Adobe Photoshop历代启动界面回顾(截至07年的CS3)

解决IE5、IE6、IE7与W3C标准的冲突(IE7.js IE8.js)

Apple Safari 3.1 (525.9)苹果浏览器简体中文版for Windows

AuroraNight风格投入使用

使PNG图片格式在IE6中背景透明(pngfix)

Alexa的Traffic Rank突进到一百四十万内

用来提高Alexa排名的几个有效方法