Archive for '颠覆网络35天' Category
颠覆网络35天 ─ Firefox 3.5中DOM选取器API
20 July 2009原文地址：DOM selectors API in Firefox 3.5 系列地址：颠覆网络35天 译注：本文作者为JQuery作者John Resig，:) ==================================== W3C发布的推荐选取器API为JavaScript开发人员提供了一种全新的能够通过CSS选取器来获取DOM（文档对象模型）对象的能力。该API包括了很复杂的在DOM中遍历/选取元素的过程，但是提供给开发人员使用的接口却非常的简单和统一。 通过标准化的工作进行，目前这个特性已经能够很好的在现代浏览器中得到支持：IE8、Chrome和Safari的最新版本都支持，马上要发布的Firefox 3.5和Opera 10也都会包括实现。 使用querySelectorAll 选取器API为所有的DOM文档、元素和片段提供了两个方法：querySelector 和 querySelectorAll。两个方法的做得事情差不多一样，都是接受CSS选取器作为参数，然后返回DOM元素对象（不过querySelector仅仅返回第一个元素，而querySelectorAll返回所有元素集合）。 例如，参考下面一段HTML代码： <div id=“id” class=“class”> <p>First paragraph.</p> <p>Second paragraph.</p> </div> 我们现在希望使用querySelectorAll使得所有在ID为“id”的DIV内的段落背景变为红色。 var p = document.querySelectorAll(“#id p”); for ( var i = 0; i < p.length; i++ ) { p[i].style.backgroundColor = “red”; } 或者我们还希望找到拥有‘class’类的DIV的第一个子段落，然后把这个段落赋予‘class’类属性。 document.querySelector(“div.class > p:first-child”) .className = [...]
颠覆网络35天 ─ 在开放街区地图中使用地理定位
17 July 2009原文地址：geolocation with open street maps 系列地址：颠覆网络35天 ==================================== 这个演示的作者是René-Luc D’Hont。他为颠覆网络35天计划作了这个演示，其中使用了开源软件和来自不同项目的开放数据。3Liz是他的公司，致力于开源GIS应用开发。 三天前，我们有来自Doug Turner的文章来介绍在Firefox 3.5中的地理定位功能。René-Luc充分利用Firefox 3.5中的地理定位功能，同来自于OpenStreetMap的数据和其他资源的开放数据组合在一起。您可以试试下面的演示。别忘了在站点上点击Share Location的按钮。 在Firefox 3.5中试用演示 假设他可以找到您的位置，您可以在地图中看到一个红色的标记，表示您所在的位置。蓝色的圆圈包围红色标记表示了您定位数据的精确度。需要注意的是，因为这个数据是根据IP地址信息和本地WiFi接入点信息获得，精确度可能随时都会变化。 这个演示中还尝试从其他来源获取关于您当地的信息。每一个信息来源都被作为一个图层显示在地图中。这些图层包括： 基础图层是地图本身，由OpenStreetMap提供。OpenStreetMap致力于制作和提供免费的地理数据，例如街区地图。同Wikipedia类似，任何人都可以编辑地图数据或者添加他们自己的信息。 接下来图层基于Wikipedia上的文章。在某些文章中，例如Mountain View或者Montpellier，你可以找到坐标数据。GeoNames提供了一种网络服务可以通过位置来查询Wikipedia上的文章。这个演示可以帮助你找到描述附件地点和事情的Wikipedia文章。 最后一个图层基于GeoNames。GeoNames是一个地理数据数据库，覆盖所有国家并涵盖超过800万地名。在演示中，你可以看到来自GeoNames的数据，包括城市、村庄、湖泊、公园或者旅馆。 地图和所有的图层都是使用OpenLayers来制作，OpenLayers是一个免费的JavaScript库可以让你在任何网页上生成动态地图。 资源 MDC & Geolocation GeoNames OpenStreetMap OpenLayers 在下面还可以看到我们挑出来的示例截图。
颠覆网络35天 ─ 使用-moz-box-shadow渲染阴影
16 July 2009原文地址：shadow boxing with -moz-box-shadow 系列地址：颠覆网络35天 ==================================== 在Firefox 3.5中实现的CSS特性中还有一个很有意思的──盒子阴影。这个特性允许在任何支持盒子模型的元素上投射出“阴影”效果。 由于CSS3的盒子阴影属性目前还在发展中，所以Firefox特化的把他实现为-moz-box-shadow。这种特化方式是Firefox实现CSS中的实验属性的方法之一，在属性前面加上前缀“-moz-”。等到这个属性最终被CSS3确定之后，属性会重新命名为“box-shadow”。 怎么来用呢 为元素添加盒子阴影效果非常直观。CSS3标准中允许的取值为： none | <shadow> [ <shadow> ]* 这里<shadow>被定义为： <shadow> = inset? && [ <length>{2,4} && <color>? ] 前面两个length长度取值对应着影子在水平和竖直方向的位移。第三个length长度取值是模糊半径（还记得之前介绍过的text-shadow 属性吗，里面也有模糊半径）。最后第四个length长度取值是传播半径，使用正数表示影子拉长，使用负数表示影子缩短，而这个长度是相对于父元素的大小而言的。 inset（嵌入）关键字用标准里面的话来说就是： 如果出现，他把向外投射的阴影（把盒子投射到画布上的阴影，可以理解为从画布上把盒子提起来）改变为向内投射的阴影（把画布投射到盒子上的阴影，可以理解为把盒子从画布上切下来然后移到画布后面）。 让我们来看看实战的例子。 简单画一个阴影，主需要定义好位移和颜色： -moz-box-shadow: 1px 1px 10px #00f; （文中的每个例子我们都会先给出一个实际运行代码的效果，接着一个在Mac OSX上的Firefox 3.5的渲染截图。） 同样，您可以使用前面提到的关键字画一个嵌入的阴影。 -moz-box-shadow: inset 1px 1px 10px #888; 借助传播半径的力量，您还可以定义相对于应用元素的更小（或者更大）的阴影： -moz-box-shadow: 0px 20px 10px -10px #888; [...]
颠覆网络35天 ─ 美妙字体就用@font-face
14 July 2009原文地址：beautiful fonts with @font-face 系列地址：颠覆网络35天 ==================================== 在Firefox 3.0里面针对印刷字体的渲染做了很多改进，这样就允许在字体渲染方面实现包括字距调整、字体大小混排之类的效果，不过设计中还是要受到字体本身的限制。在Firefox 3.5中取消了这种限制，他实现了CSS的@font-face规则，允许大家如同使用脚本和图片一样把TrueType和OpenType的字体文件连接到HTML文件中。Safari从3.1开始也支持了这一规则，Opera也已经发布通告准备在Opera 10里面支持。 使用@font-face来引用字体资源非常直观。在CSS的格式表中，每条@font-face规则都定义了使用的字体家族名字、需要读取的字体资源，以及其他的一些格式特征，例如是否粗体是否斜体等。Firefox 3.5仅在需要的时候下载这些字体文件。 /* Graublau Sans Web (www.fonts.info) */ @font-face { font-family: Graublau Sans Web; src: url(GraublauWeb.otf) format(“opentype”); } body { font-family: Graublau Sans Web, Lucida Grande, sans-serif; } 支持@font-face的浏览器会使用Graublau Sans Web来渲染文字，而不支持这一规则的浏览器则会使用Lucida Grande或者缺省的sans-serif来渲染文字。在这里查看效果： 来个复杂点的 现在大部分字体支持四种样式：正常、粗体、斜体和粗斜体。如果要分别支持这四种样式，需要定义好相应的font-weight和font-style描述符。如果没有对这些属性进行设定的话，那就是对应为正常的字体描述： /* Gentium by SIL International */ /* http://scripts.sil.org/gentium */ @font-face { [...]
颠覆网络35天 ─ 亲身“触摸” TraceMonkey
13 July 2009原文地址：what does tracemonkey feel like? 系列地址：颠覆网络35天 ==================================== Firefox 3.5很重要的目标之一是颠覆互联网本身。在Firefox 3.5的发布周期中，我们在针对开发人员的特性上投入了很多力量。其中之一就是TraceMonkey──使用“跟踪”解释技术将常用的 JavaScript的代码转化为机器代码从而获得近乎机器级别的速度。一方面，这个特性是针对最终用户的，因为他能够帮助互联网应用运行的更快；另一方面，也是针对开发人员的，因为他使得开发更多更炫的应用成为可能。 我们一直试图找到合适的办法来描述他究竟是什么样子的，而不是通过很多乏味的测试数据。我们究竟怎么能描述出亲身“触摸”他的感觉是什么样的呢？ 我们制作了一个视频可以帮助描述，不仅仅通过一些数字，而且能够让您真正亲身感觉一下。在这里试试效果，不过我们建议您使用Firefox 3或者Firefox 3.5。
颠覆网络35天 ─ 使用Canvas和Burst制作SVG动画
10 July 2009原文地址：animating SVG with canvas and burst 系列地址：颠覆网络35天 ==================================== 今天的演示可能相对简短一些，不过其中也包括了一段介绍如何制作演示的视频。演示的作者是Alistair MacDonald (@F1LT3R)，他是Processing.js和Burst 引擎的主要维护者，这两个库也是我们今天演示中主要使用的。（译注：Burst引擎是基于HTML 5的Canvas元素的矢量绘图库。） 如果您还没有通过点击到他的站点上 看看的话，我强烈建议您先去看看。您会注意到他的站点非常具有动画效果，有些部分还带有幻灯播放的平滑效果和大量的影像。您看到这些动画和影响以往都是使 用Flash技术实现的，但是在这个站点的首页上没有Flash，全是使用CSS、Canvas和DOM来实现动画效果。很酷哈～～ 回到我们今天的演示上，曾经有过一些制作SVG动画的演示，但是这个演示跟之前的那些有个很大的不同。并不是直接把SVG读取到HTML的文档对象 模型（DOM）中──SVG最初就是这样设计的──而是使用Burst引擎读取SVG，解析并生成对应的JavaScript对象以便之后使用这些 JavaScript对象在Canvas上渲染出来。这样，你可以通过Burst引擎制作动画，或者同Canvas上的内容融合产生动态效果。 观看演示 我还建议您观看下面的教程，是讲述如何制作这个演示的。他展示了如何能够非常简单的使用inkscape（一个矢量做图软件包），Burst引擎和其他简单的JavaScript来制作简单的绘图并产生动画效果. 观看视频 (.ogv格式) | 观看视频 (.mp4格式)