Archive for '颠覆网络35天' Category
颠覆网络35天 ─ Firefox 3.5中的透明度
10 August 2009原文地址：opacity in Firefox 3.5 系列地址：颠覆网络35天 ==================================== 这篇博客非常的短，不过我觉得非常有必要在这里写一下，因为大家通过这个可以了解到浏览器的特性是如何从某个制作者实现发展成全面支持的标准的。 在Firefox 3.5中，我们不会再支持Mozilla特化的一条CSS属性-moz-opacity。开发人员可以使用标准化的opacity属性来为元素设定透明度。 我们从Firefox 0.9开始引入属性opacity并且把-moz-opacity设定为deprecated属性。现在在Firefox 3.5中，我们正式的删除了-moz-opacity。 对于一个简单的属性来说，这个标准化的道路算是漫长了，不过非常值得一提，因为他能够让人们了解在所有这些标准化过程中，时间和进程可能是多么的漫长，:)
颠覆网络35天 ─ 使用MozAfterPaint调试绘图
7 August 2009原文地址：debugging painting with MozAfterPaint 系列地址：颠覆网络35天 ==================================== 本文作者为Robert O’Callahan，本来发布在Mozilla的互联网技术博客上。其中描述的特性是Firefox 3.5中非常有趣的特性，非常值得我们在35天计划中重新发布一次。 另外，Thomas Robinson为此作了一个非常方便的bookmarklet，方便在浏览器中调试页面绘图。 为了满足很多开发者的需求，我们在Firefox 3.5中提供了一个非常实验性质的API──在页面内容每次被绘画时激发相应事件。这个事件叫做MozAfterPaint，由文档对象激发，一直冒泡到window对象。事件提供两个属性：clientRects 和 boundingClientRect──用来表明什么被重画，同getClientRects 和 getBoundingClientRect方法使用相同的对象和坐标系统。 这对Firefox的扩展是非常有用的特性，或者是其他的“chrome”的代码例如使用canvas.drawWindow方法来截取窗体内容等。可能对类似Firebug之类的工具也会有用。同样，假如你希望向页面添加一些JavaScript代码来测量Firefox重画的区域、对象等等情况也会非常有用。 注意： 这个事件仅在Gecko引擎上提供。不要在公开的网页上使用这些功能──现在也没有看到有任何人会在公共网页上使用，因此也不知道这个事件会不会得到标准化的支持。 由于安全原因，普通网页内容仅仅会接收他自己文档中激发的重画事件──IFRAME内激发的重画不会报告给该IFRAME父辈对象上挂接的非安全监听器。 目前，该事件可能会在实际重画发生前被激发出。不过这应该不会有什么影响，我们将来也会解决这个问题。 如果你的事件处理程序做了某些再次激发重画的事情，例如改变元素的风格，你可能激发了一个死循环。你的浏览器可能还有反应，不过你的机器会着实为世界变暖贡献很多 ：） 在可视范围外滚动区域的重画也会被激发，但是如果该区域元素具有overflow:auto属性的话就不会被激发。 在窗口内插件（plugins，大部分在Windows和GTK上的plugins）的重画事件不会被激发。
颠覆网络35天 ─ 连接互联网和HTML5 video
6 August 2009原文地址：connecting html5 video to the web 系列地址：颠覆网络35天 ==================================== 这是Christopher Blizzard在2009年6月19日在开放视频大会上做得一次演示。演示本身是由一直超牛的Paul Rouget制作的。 观看video 下载.ogv格式 或者 .mp4格式。在blip.tv可以在线观看。 [译注] HTML 5的video标签不仅仅是允许直接在浏览器中播放一定格式的视频，也不是说如何制作超炫的播放器。HTML5 video允许HTML的任何其他元素同video进行交互，这也是该演示希望展示出的特性。所以文章标题叫做如何连接互联网和HTML5 video。在视频中可以看到如何在视频中加入twitter最新状态的更新、如何进行人脸识别等等，这些是比传统视频更加炫的特性。
颠覆网络35天 ─ Firefox 3.5中的DOM遍历
5 August 2009原文地址：DOM Traversal in Firefox 3.5 系列地址：颠覆网络35天 ==================================== Firefox 3.5中包含了两个全新的W3C DOM遍历规范实现。第一个，元素遍历API，主要针对逐个元素的遍历更简便；第二个，NodeIterator接口，允许更加容易的找到任何节点。 元素遍历API 元素遍历API的目的是为开发人员提供更加简单的方法来遍历DOM元素，不用在担心文本节点、注释节点等等。这曾经是开发人员的一剂毒药，例如使用document.documentElement.firstChild经常会产生不同的结果，可能仅仅是因为文档结构中多个空格，造成多个文本节点之类的。 元素遍历API提供一系列新的DOM节点属性。 这里是一份完整的现存DOM节点属性和全新副本的细分列表： 目的 所有DOM节点 仅DOM元素 第一个 .firstChild .firstElementChild 最后一个 .lastChild .lastElementChild 前一个 .previousSibling .previousElementSibling 下一个 .nextSibling .nextElementSibling 长度 .childNodes.length .childElementCount 这些属性为DOM规范作了有效补充（老实说，真应该从开始就有这些属性）。 不过还是有一个属性一如既往的缺失：.childElements（对应于.childNodes）。这个属性（包含DOM元素的所有子元素的NodeSet）在规范的前个版本中提出过，不过在最后貌似没有通过。 不过也差不多了，现在IE、Opera和Safari都支持.children属性可以提供类似于.childElements的功能集合。元素遍历API在Firefox 3.5的实现中也包括了.children。这就意味着在所有主流浏览器中都支持这一属性。（不过离所有浏览器支持其他真正的元素遍历规范还比较远。） 一些使用元素遍历API（以及.children）的代码示例： 点击发生时显示下个元素： someElement.addEventListener(“click”, function(){ this.nextElementSibling.style.display = “block”; }, false); 为所有子元素添加class： for ( var i = 0; i < someElement.children.length; [...]
颠覆网络35天 ─ 使用XHR制作文件上传组件
4 August 2009原文地址：XHR progress and rich file upload feedback 系列地址：颠覆网络35天 ==================================== 这个演示由Olli Pettay (smaug)和Austin King制作。 文件上传在今天的互联网中还是一个用户体验不那么好的功能特性。很多站点使用Flash或者单独构建客户端来完成文件上传的功能。 Firefox 3.5提供了一个稍好的进度条功能，也许可以完善一下这个用户体验。很多开发人员可能并不知道他们可以使用Firefox的文件对象 （nsIDOMFile）和XMLHttpRequest一起来构建完整的文件上传功能。这个演示的目的就是为大家演示一下如何使用他们来打造一个体验良 好的文件上传组件，可以显示上传的进度，并且可以同时上传多个文件。 进度条 在应用程序中向用户显示程序的进度总是一个非常好的体验，可以告诉用户你的应用正在努力工作完成他们的要求，并且能显示工作进行到大概什么样的一个程度。主要的两种进度反馈包括： 不确定进度 ── 显示正在发生的某些活动 确定性进度 ── 我已经完成40%了、42%了……等等 确定什么进度什么？看演示吧 我们制作了一个简单的文件上传/下载页面用来演示进度条： 演示放在mozilla.pettay.fi，并且需要Firefox 3.5 beta4或者更高版本。他演示了如何同时上传多个文件，而且不用通过提交表单的方式或者不离开当前页面。针对每个文件的上传/下载，我们显示当前的速度、完成的百分比和已经传输的字节数。我们会在后面介绍几个关键的地方，现在可以先试试这个演示，也可以查看整个演示的代码。 页面包括两个HTML输入控件，一个是type=”file”，另一个type=”button”。 但是表单从来没有被真正提交，相反我们为按钮添加onclick事件监听： <input type=“file” id=“file”> <input type=“button” onclick=“startXHR();” value=“Upload file using XHR”> 在startXHR函数中，我们生成XMLHttpRequest对象然后添加时间处理函数监听XHR对象的‘progress’事件 ──Firefox 3.5新加入的。使用这个进度事件ProgressEvent的lengthComputable属性，我们可以知道处理的是不确定进度还是确定性进度。 该事件对象还会告诉我们已经读取的和全部的字节数。 var xhr = new XMLHttpRequest(); xhr.onprogress = function(evt) [...]
颠覆网络35天 ─ Firefox 3.5中图像色彩校正
3 August 2009原文地址：color correction for images in Firefox 3.5 系列地址：颠覆网络35天 ==================================== 在Firefox 3中，我们介绍过关于标记图片配色方案的特性，但是该特性并没有默认开启。现在在Firefox 3.5中，我们处理色彩校正的效率比在Firefox 3中提升了5倍，所以在Firefox 3.5中默认开启了标记图片色彩校正的特性。 大部分互联网上使用的图片是未标记的。如果您不了解标记图像和未标记图像之间的区别，那您可能不会注意到这个特性的效果。不过我们建议您去了解一下，因为这些特性对将来Firefox在CSS颜色和图片的处理上可能会有影响。 什么是配色方案？ 花很多时间去摄影或者任何需要处理高解析度色彩打印的朋友明白很多输出设备──LCD、CRT、纸张等等──对于色彩的理解都是不同的。例如，未校正的红色在LCD和CRT上看上去会非常不同。其中一个上面的颜色好像被洗掉了一样。 JPG和PNG图片都支持配色方案。这些配色方案允许Firefox提取图片中的颜色并把他们根据特定的设备翻译成相应的颜色。 不仅仅图片包含配色方案的信息，类似于显示器之类的输出设备也都有配色方案。举个例子，可能某个设备显示红色的效果要比蓝色好很多。如果准备在该设备上显示他上面看到的“红色”，可能需要把颜色从自然的#ff0000转换到#f40301才会正确。 这也就意味着在使用配色方案时，需要做两步转换。首先，提取图像中的原始颜色信息，使用配色方案转换颜色到设备无关的颜色空间。然后使用输出设备的配色方案把颜色从设备无关的颜色空间中转换到输出设备的颜色空间，从而就可以在输出设备上正常显示了。 那关CSS颜色什么事阿？ 理解配色方案如何工作是很重要的，以及他们如何被转换，如何能够同CSS定义的颜色在同一个颜色空间中进行操作等。 在Firefox 3.5中，我们认为CSS定义的颜色已经是在输出设备的颜色空间中。换句话来说，CSS定义的颜色不是自然颜色空间并且不需要再转换到输出设备的颜色空间上了。 这就意味着，如果你希望放置一个标记图像，然后在他旁边使用CSS来制作一个相同颜色的背景之类的，实际效果中的色彩很有可能是不一致的。或者在某 些输出设备上是不一致的──可能你使用的开发机器上是一致的。请记住在不同的输出设备上是具有不同的配色方案的。看下面的例子： 在Firefox 3中，这个看上去回事一块连续的紫色。在Firefox 3.5和Safari中你会注意到在紫色盒子里面还有一个紫色盒子（除非您的系统配色方案是sRGB）。这是因为图片的颜色已经被校正过，而周围的CSS没有。 在未来版本的Firefox中，我们希望能够让用户来选择开启针对标记图像和CSS的色彩校正。您现在也可以测试这些特性，需要改变在MDC色彩校正中列出的首选项到“全色彩管理”。 支持图像和工具 PNG可以使用三种不同方法来标记。第一，他们文件中有iCCP块用来包含关联的ICC方案。第二，可以使用sRGB块明确标记为sRGB格式。最 后，他们可以包含gAMA和cHRM块用来描述图像的灰度系数和彩色系数。使用上述方法都可以让Firefox针对该图片进行颜色校正。 您也可以使用pngcrush删除所有的色彩校正信息，变成一个未标记图片： pngcrush -rem gAMA -rem cHRM -rem iCCP -rem sRGB infile.png outfile.png 当然，还可以使用TweakPNG手动的删除gAMA，cHRM，iCCP 和 sRGB块。