易栈网-膘叔

html5 越来越近了，HTML5可能给我们带来很大的改变，就象新的标签可以支持视频了。看看javascript的架构师能够做什么吧。原文来自http://www.cnbeta.com/articles/109538.htm

由于当前技术仍偏向功能强化为主要思维，指令码趋向庞杂的结果，容易产生更多安全漏洞，且失去快速因应攻击调整架构的灵活性。
身 为JavaScript网路技术重要推手的雅虎（Yahoo!）架构设计师Douglas Crockford表示，现行网页开发技术思维仍偏重多媒体功能或浏览效能的提升，未来应以安全为第一优先。 Crockford 现为Yahoo!资深JavaScript架构师，负责YUI（Yahoo! User Interface）的架构设计，并且担任ECMA JavaScript 2.0技术委员会成员，为JavaScript开发社群大师级人物，此次受邀来台参加OSDC（Open Source Developer's Conference Taiwan）进行专题演讲，向国内开发者介绍ECMA JavaScript的发展。

Crockford向媒体阐述网络技术发展时指出，当前的网络技术仍然不脱过去的思维，网页开发技术仍以功能强化、浏览网页效能提升为主，虽然强 化了网络开发的丰富性，但未将网络安全列为开发优先考虑因素的结果，致使网络安全事件层出不穷。

延续过去网络开发思维的结果，现今网络技 术强调强大的互动、多媒体功能，但也让一些攻击手法兴起，以XSS（Cross-Site Scripting）为例，由于内嵌多个不同来源的脚本，容易让黑客借指令集趁虚而入，窃取用户端计算机的数据。

虽然也有新的技术，如 Google推动的Caja，用以防范XSS跨站攻击手法，但整体技术发展方向仍是朝功能、效能提升前进。

以HTML 5技术为例，Crockford表示，虽然HTML5增加了许多功能，但让整个脚本变得更为庞大且复杂，容易产生漏洞遭到攻击；另外，支持存取使用者电 脑、手机的终端数据，将数据被窃的安全风险扩大至手机上，而过于庞大复杂的结果，不容易因应日新月异的攻击手法改变，长期而言易形成安全风险。

对 于当前浏览器业者形成速度竞赛，纷纷强化JavaScript引擎加速网页浏览速度，号称最快的浏览速度，他认为，浏览器加速网页浏览速度虽是好事，但这 样改善方式有限，只在5至10%的终端浏览器部份加速，若能同时改善服务器端，加速的效果更大。

对于制定中的新标准ECMA Script 5，他乐观预期未来将成为主要的网络开发标准，虽然Apple、Chrome还不明确，但包括IE、FireFox、Opera都倾向ECMA Script 5，今年应会看到新的浏览器应用。
--EOF--
HTML5已经被越来越多的浏览器所支持，IE还能挺多久？是否又会创造出什么新标准？从IE4开始，多少网页设计师为了兼容所有的浏览器而痛苦？以后又会怎么样？IE6还有这么多用户，怎么办？这一些都让人迷惘啊。HTML5来了，对于前端工程师的压力就要更大一点了。代码没写好，很可能就直接被人利用了。以前的XSS漏洞可能会被更加扩大、放大。还是需要多学一点安全了

一般来说，讲机器人的往往到最后都会讲人机恋，当然那部《我，机器人》（i,robot）不太一样。机器人三守则是不会遗忘的事，被遗忘的嘛，那就是经典的《终结者》了。
《机器管家》这部片子挺老了，但是讲的故事有点感人，讲的是机器人成长的过程，和人的成长差不多，只是遇到的问题不一样。
当机器人越来越想成为人的时候，他不可避免的就是，时间对于他们来说是没有意义的。
内容大致如下：
马丁一家买来一个机器人当管家，可男主人马丁很快发现：这个名叫安德鲁的机器人，不仅有非凡的创造力，甚至还能表达情感。安德鲁一直称男主人的小女儿为 “小小姐”，并和她建立了深厚的感情；几十年过去了，安德鲁已经成为马丁家族的一员，在一个工程师的帮助下，他从内到外一点点的，几乎变成了一个真正的 人，安德鲁还发现自己陷入了爱情-——爱上了“小小姐“的孙女，外貌酷似“小小姐”的波西娅。这段机器人与人的科幻爱情将面临什麽样的考验？

事实上，这种爱情故事现在确实不多见。以前的人机恋都是男主人公恋上个女机器人。再来上一点女机器人为救爱人命怎么怎么样，偶尔有一部女主人爱上男机器人的确实很少。而且，确实可以算是跨度为二百年，爱上小小姐，爱上小小姐的孙女，并为之赴死。遗憾的是，直到最后也没有看到法庭宣判他可以成为人这个消息。他一直是想成为人，可到死也没有看到这个消息。其实他也算是想给自己的老婆一个名份吧。不想她有内疚？最后的护士机器人也不错，也有了人形了，是不是在暗示那位医生也会尝试和护士一起生活？

情节有点老套，但内容 和表演确实不错

原文：http://james.padolsey.com/javascript/grayscaling-in-non-ie-browsers/

在非IE浏览器中实现“灰阶化[1]”

这个问题看似简单，实际上要付出很大的努力[2]。要的结果很简单：在所有非IE浏览器中模拟Internet Explorer浏览器的grayscale（灰度）滤镜。然而，它的解决方法并非你想得那么简单，这也让我着实大大地吃了一惊。

在 IE中，grayscale滤镜可以应用到任意一个元素中，它会很直观地将元素转变为灰度。可以使用下面 这行复杂且专有的CSS来实现grayscale滤镜。

如上所示，在IE中实现这种效果简单是小菜一碟；然而，在其他的浏览器中，需要引起很大的关注。

需要有两件情况值得考虑：图片元素和非图片元素。“非图片”类元素实现十分简单：在当前文档中遍历每个元素，寻找类似“backgroundColor”和 “color”的色彩属性，将它的RGB颜色值转换为灰度值。有不少方法可以实现；注意我们这里不是说降低图片的饱和度；“灰阶化”很明显跟它不一样。

 
JavaScript代码
// Desaturate:降低饱和度  
function RGBtoDesat(r,g,b) {  
var average = (r + g + b) / 3;  
return {  
  r: average,  
  g: average,  
  b: average  
};  
}  
   
// Grayscale:灰阶化  
function RGBtoGrayscale(r,g,b) {  
var mono = parseInt( (0.2125 * r) + (0.7154 * g) + (0.0721 * b), 10 );  
return {  
  r: mono,  
  g: mono,  
  b: mono  
};  
}  

因此，每个带颜色属性的元素要使用它来转为灰阶；初始颜色用来重置属性值。

我们的图片能否转为灰阶取决于两个因素；一是浏览器必须要支持HTML5 canvas元素和它getImageData方法，二是主机上的所有图片必须位于同一域名下；除此外，主机上的图片不能脱离getImageData方法而不管它是否支持[3]。Google Chrome浏览器和Safari（4以下版本）由于不支持getImageData，先不作讨论。其他的浏览器支持canvas元素，完全可以做到“灰阶化”图片。

实现这种方式是要“手工”遍历图片中的每一像素，并应用我们用来设置CSS 颜色属性的RGBtoGrayscale函数。真要这样做的话，浏览器绝对吃不消；除非有极其快速的Javascript引擎来承受大图片处理的压力。

鉴于上面提到的原因，因此在任一个元素需要“灰阶化”前，添加一个“预置”函数去运行显得尤为必要，这个函数可以使用零超时递归技术[4]来避免耗死浏览器。如果仅仅是小图片需要转换的话，不必使用“预置”函数，可以直接使用这种暴力转换。

为什么呢，这是为什么呢？

你肯定想知道在“灰阶化”会有哪些应用。那么，比如说：降低色彩以减少用户的视觉焦点，以此来减少用户对你网站上五颜六色东西的关注；比如说，光箱特效。像 vBulletin的论坛系统就使用了这种效果，它会你点击离开时，将页面变灰；然后会弹出确认框，这个确认框非很容易识别，因为它是页面中惟一的带色彩的东西。

“灰阶化”困扰我的真实原因是因为我很想知道是否有可能做到这个目的。我已经知道在IE浏览器里有这个滤镜，我还想看看在其他浏览器中能否模拟实现这种方便的特效。我也知道这种特效可能被认为已经过时了，但这并不重要；我仅仅是对实现它很感兴趣。 

示例

我做了一个示例页面，上面有几个格斗士[5]的图片，功能已经在这篇文章中说过了。注意，在Safari（小于4）或才 Chrome（还有可能在Firefox老版本（V.2以前））不起作用；不要忘了它仅仅是一个试验。
http://james.padolsey.com/demos/grayscale/

使用方法

要对一个元素实现“灰阶化”需要调用 grayscale()函数，并将元素作为参数传递，比如：
 
JavaScript代码
var el = document.getElementById( 'myEl' );  
grayscale( el );  
// 也可以传递一个DOM集合  
// (这样所有的元素都会得到“灰度效果”)  
grayscale( document.getElementsByTagName('div') );  
 //也可以在jQuery对象集合中使用  
grayscale( $('div') );  

若要重置元素（返回到原来的颜色状态）必须调用grayscale.reset()，并将需要重置的元素作为参数传递：
JavaScript代码
grayscale.reset( el );  
// reset()同样可以接受DOM对象或jQuery对象集合参数  
grayscale.reset( $('div') );  
其中的prepare函数，上面已经讲过了，在有大图片要处理的情况下需要使用到，或者即使只是几个小图片。注意大图片需要有一会儿的时间去处理（一张 300×300的PNG格式图片在“预置”方式下需要耗费3秒钟的时间）。
JavaScript代码
grayscale.prepare( document.getElementById('myEl') );  
// 同样可以接受DOM对象或jQuery对象集合参数  
grayscale.prepare( $('.gall_img') );  

[完]

注：

[1]:灰阶化：原文grayscaling，意为“采取灰度标准”，即灰阶化，将图片由彩色转为灰度；
[2]原文为”This started out as a little experiment and eventually turned into quite an endeavor.“，可能存在翻译问题；
[3]原文为“externally hosted images cannot be passed into ‘getImageData’ regardless of whether it’s supported.”，翻译存疑；
[4]零超时递归技术：原文zero-timeout recursion technique，应为zero-time recursive technique；参见http://en.wikipedia.org/wiki/Recursion_(computer_science)；
[5]格斗士：原文blood-thirsty hunters，嗜血的猎人

--EOF--
灰阶化可以用在414或者512，值得用用喽。。。