Archive for '颠覆网络35天' Category
颠覆网络35天 ─ “开放视频编码和质量”一文的更新
28 July 2009原文地址：an update on open video codecs and quality 系列地址：颠覆网络35天 ==================================== 两天前，我们在博客上发布了Greg Maxwell比较了Youtube和Theora在相同比特率下低和中解析情况下视频的质量。最终测试的结果表明Theora在低比特率情况下要更好一些。结论就是Theora格式完全适合于类似于Youtube这样的视频网站。 现在Maik Merten完成了在高清视频方面的比较，对比Youtube编码的视频和使用全新Theora编码器的视频。结果呢？看看下面的截图。如果您看到很大的不同，请告诉我们。不过我们真得看不出来。 H.264 Theora
颠覆网络35天 ─ 使用本地JSON获得更好的安全和性能
27 July 2009原文地址：better security and performance with native JSON 系列地址：颠覆网络35天 ==================================== 使用JavaScript对象标记（JSON，下面都会说JSON）来呈现数据已经迅速地成为互联网开发人员工具箱中不可或缺的一部分，他可以让JavaScript应用非常容易的在脚本语言范畴内获取和解析数据。Firefox 3.5 包含了对JSON的本地方法（更接近于机器实现而不是使用脚本语言实现）支持，并且提供了window.JSON 这样的顶级对象。 本地支持的JSON来自ECMAScript第五版（链接为规范的PDF文件），规范中其他方面的实现也会在Firefox 3.5中得到支持。目前支持本地JSON的浏览器包括Firefox 3.5 和 IE8，不过其他浏览器很快也会开始提供支持。 本地JSON支持有两大优点： 安全。简单使用eval来把字符串转化为对象会暴露出安全漏洞。而且，本地JSON调用只能在数据上进行处理。不能用来解析带有函数调用的对象；任何这样的尝试都会返回错误。 性能。安全的解析JSON，使用第三方脚本和库，都要比在浏览器中使用本地JSON慢很多。 我们来看看具体例子。 一个搜索服务的JSON API可能类似于这样： /* Assume that you obtained var data as a string from a server For convenience we display this search result on separate lines */ var data = ‘ { “responseData”: {”results”: [...]
颠覆网络35天 ─ Firefox 3.5中的3D变形：isocube
24 July 2009原文地址：3D transforms in Firefox 3.5 – the isocube 系列地址：颠覆网络35天 ==================================== 这个演示的作者是Zachary Johnson──居住在美国明尼阿波利斯的网页开发者，同时也是jQuery的动画“3D”旋转插件的作者。 我非常高兴能够在这里给大家做一个视觉效果的演示，这个视觉效果完全使用在Firefox 3.5中全新支持的-moz-transform CSS变形属性。我非常兴奋的看到这个特性被加到Firefox中，因为这样我就可以制作一些3D的等轴立方体效果，有时候也被称作2.5D。我制作了这个演示使得HTML的内容被映射到一个“3D”的等轴立方体的面上： 使用Firefox 3.5查看演示 -moz-transform属性可以使用一个CSS变形函数列表组成，这些函数可以包括旋转、缩放、倾斜和位移。或者，通过定义二维Affine变形矩阵来同时应用多个变形效果。由于所有的CSS变形函数都是在二维上工作，所以真正的3D带有立体投影的变形还不能被实现。在这个演示中，为了制作同轴效果，我使用了旋转和倾斜变形函数。 首先，定义立方体的容器div，以及容纳各个“面”的div，包括立方体的上、左、右三个面。 <div class=“cube”> <div class=“face top”> </div> <div class=“face left”> </div> <div class=“face right”> </div> </div> .cube { position: absolute; } .face { position: absolute; width: 200px; height: 200px; } 现在我们需要把这几个面进行旋转和倾斜，主要是把每个面的div变形为顶角为60°或者120°的平行四边形。下面代码展示了如何使用-moz-transform来定义这些变形： .top { -moz-transform: rotate(-45deg) skew(15deg, 15deg); [...]
颠覆网络35天 ─ Firefox 3.5中媒介查询简介
23 July 2009原文地址：a short introduction to media queries in Firefox 3.5 系列地址：颠覆网络35天 ==================================== 本文作者为Eric Shepherd──Mozilla开发者中心文档项目负责人之一。 现如今，支持将网页内容渲染到各种不同的设备上的需求越来越重要，而这些设备的种类也在日益增多。用户不仅仅希望能够在家用计算机上看到网页内容，或者打印到纸上，或者更希望能够在类似于手机这样的手持设备上使用这些网页内容，而且对于性能和显示的要求也越来越高。 CSS 2开始支持“媒介类型”（media type）的声明，可以允许您根据设备的不同指定不同的渲染风格规则。例如，您可以为打印效果做单独的设定： <link rel=“stylesheet” media=“print” href=“print.css”> 非常容易，对吧～不过他还不能提供能够自动根据设备某些参数自动调节的渲染能力，例如设备的屏幕大小、屏幕比例等等。 Firefox 3.5开始支持媒介查询功能（media queries）──一个全新的CSS 3特性──可以更加详细的定义在何种情况下使用哪些样式来渲染内容。 这个功能会根据不同的媒介特性的取值来决定使用渲染样式，而这些媒介特性包括范围很广，包括颜色深度、渲染区域宽度高度、像素解析度、显示设备是否为彩色设备等等。您可以在Mozilla开发者中心上关于媒介查询的文章中找到完整的列表。 媒介查询相当强大，却非常易用。您可以看一下我为这篇文章准备的示例网页。 这个示例网页使用两个样式表，并使用下面两条规则指定： <link rel=“stylesheet” media=“all and (orientation:portrait)” href=“portrait.css”> 这条规则使用媒介查询的all和(orientation:portrait)来指明，如果设备的显示区域（例如Firefox的窗口）高度大于宽度时，使用portrait.css样式表。 <link rel=“stylesheet” media=“all and (orientation:landscape)” href=“landscape.css”> 这条规则表明，如果设备的显示区域宽度大于高度时，使用landscape.css样式表来渲染内容。 媒介查询还有一个非常棒的特性就是每次显示模式发生改变的时候，这些查询规则都会重新运算，从而针对不同的显示模式做出调整；例如，如果您打开上面的示例页面并开始调整窗口大小，你会发现当窗口宽度大于高度时（就是在风景广角模式时），页面中的工具条会被调整到页面左边。 当你调整窗口大小到高度大于宽度（就是人像模式）时，页面中的工具条会移动到页面顶端。这些动作都会随着您的动作而发生变化。 在landscape.css的代码中，你会找到那里也使用了一些媒介查询，可以根据窗口的宽度重载<body>元素的字体大小。缺省情况下，该元素中字体大小为14像素。 @media all and (min-width: 600px) { body { font-size: [...]
颠覆网络35天 ─ 开放视频的编码和质量
22 July 2009原文地址：open video codecs and quality 系列地址：颠覆网络35天 ==================================== 这篇文章是Greg Maxwell最初发表在在whatwg邮件列表上回应来自Google的Chris DiBona的一篇评论。在这次讨论中针对的编码同我们在Firefox 3.5中包含的编码是一样的，并且这种编码也是Mozilla、Wikipedia等很多机构一直投入很多精力研究和实现的。 最新的Chrome开发渠道的Nightly构建开始支持这些编码，在不久的将来，Opera也会提供支持。在安装Xiph Qt组件之后，Theora和Vorbis在Safari上也能够使用。很快，我们就能够在所有现代浏览器上完全支持这些开放的视频编码，开发人员对视频的引用仅仅需要使用HTML 5的video标签。 Greg在文章中不会包含很多营销辞令。这也不是一次针对高清视频的比较。相反，我们试图做一次非常诚实的比较，开放视频的编码如何迎战目 前最常用的视频格式──他们正在被世界上最大的视频服务网站广泛使用。我想你会在最后同意Greg的结论，尤其是在使用音频时，Vorbis真的超人一 等。 接下来就是Greg的文章。 目标 在2009年6月13日，来自Google的Chris DiBona在WhatWG邮件列表中说了一句惊世骇俗的结论： “如果Youtube决定切换到theora格式但是还想保持在现有视频质量的话，他会占用全世界所有的带宽” 不幸的是，开放式视频格式日渐频繁的提交到FUD上去，以至于人们更愿意相信这种大胆的结论而不愿意去证明真实性。 在这篇文章中，我会展示上面这个结论是多么不公平、不合理、不切实际。使用简单的测试用例，我就可以向大家证明Theora格式非常具有竞争力甚至要比目前在Youtube上发布的某些格式要先进很多。 Theora并不是目前为止最有效的视频编码。但是他也并不坏，甚至要比很多目前被广泛使用的视频编码好很多。同时，Theora在计算复杂性方面 还具有很大的潜力，而且是完全开源的项目。虽然Theora并不能代表解决比特率和质量问题的最优方案，但是Theora编码器在最近获得了很大的改进和 提升。 结果 我们来比较两种不同格式和比特率的视频输出，一个是499kbit/sec H.264+AAC，另一个是327kbit/sec H.263(Sorensen Spark)+MP3输出，在下面的下载部分您可以下载到。Youtube编码后的视频在这里。因为Youtube可能会改变比特率或者网页中的视频播放器不显示比利率，我这里也提供编码后的文件。 ~499kbit/sec对比 YouTube 下载 (H.264+AAC; 17MB) Ogg/Theora+Vorbis 下载/观看 (Ogg/Theora+Vorbis; 17MB) ~327kbit/sec对比 YouTube 下载 (H.263+MP3; 12MB) Ogg/Theora+Vorbis 下载 / 观看 (Ogg/Theora+Vorbis; 12MB) 在Theora+Vorbis测试用例中使用了稍微低一点的比特率，用来避免由于输出文件过大带来的质量改进方面的问题。 同样，我们也需要比较音频。即便在音频上没有差异，图像的比较也可以作为视频质量比较的某个标准，虽然不太精确。 方法 [...]
颠覆网络35天 ─ 简单演示网络字体和CSS特性
21 July 2009原文地址：web fonts and css features – a simple demonstration 系列地址：颠覆网络35天 ==================================== 本文作者为Laurent Jouanneau，他为我们带来的一个非常简单但是非常美妙的演示如何使用Firefox 3.5中的网络字体和一些全新的CSS特性。 在Firefox 3.5中查看演示 阴影和圆角 首先，我们来看一下整个工具条div的风格属性： -moz-border-radius -moz-border-radius:10px 0px 10px 0px; 这条语句表示左上角和右下角都有半径为10像素的圆角。 -moz-box-shadow -moz-box-shadow: #9BD1DE 5px 5px 6px; 这条语句表示在div下方渲染阴影，向右下方向位移5个像素，并使用6个像素大的模糊半径。 然后，让我们看看按钮。我们同样使用border-radius属性。但是我们还使用盒子阴影属性这样可以根据按钮的状态发生变化。在正常状态下，阴影在按钮外面。当鼠标悬停在按钮上（hover状态），阴影通过使用inset的CSS属性变为在按钮里面。在点击按钮时（active状态），我们也使用同样的效果，但是我们会将按钮的阴影做得更大更深。 #superbox button { -moz-border-radius: 5px; -moz-box-shadow: #000 0px 0px 8px; } #superbox button:hover { -moz-box-shadow: inset #989896 0 0 3px; text-shadow: red 0px [...]