Archive for the 翻译 Category

通过JavaScript访问和修改CSS3动画

原文:Accessing & Modifying CSS3 Animations with Javascript By Joe
翻译:yCoder.com

昨天Chris Heilmann在Mozilla博客上写了篇关于使用javascript查找和生成CSS动画的文章,文中用了我的一个小例子,详细的说明了代码访问css动画的相关技术

Chris最后写道:

我希望用一个CSSAnimations集合类,通过json或者string存放不同的动画,并使用他们的名字作为key,这样,可以动态的创建一个新的css rule,并添加到document或者rule集合中(以保证跨浏览器),思考中

听起来是个好主意,所以我写了一段JavaScript代码来实现这样的接口

CSS Animation Store

这个主意是通过一个简单的接口来访问CSS动画,实际上之前的Morf.jsCSSA中都有这样的处理,大部分代码已经有了,只需要整整,按照Chris所建议的接口风格写下来

从GitHub下载CSS Animation Store

下面是CSS Animation Store的基本接口(关于代码如何工作的信息),将代码放在标签之前,会创建一个全局的对象 CSSAnimations,这个对象包含所有当前可以使用的CSS动画

比如,获取名称为”spin”的动画,你可以按下面的代码:

var spin = CSSAnimations.spin;

参数spin是一个KeyframeAnimation实例,有下面的属性和函数:

  • keyframes – KeyframeRule 集合
  • original – 原始对象 WebKitCSSKeyframesRule 或者MozCSSKeyframesRule 类型
  • getKeyframeTexts() – 返回所有keyframe文本集合, e.g. ['0%', '50%', '100%']
  • getKeyframe(text) – 返回指定文字的 KeyframeRule 对象, e.g. getKeyframe(’0%’)
  • setKeyframe(text, css) – 设置新的CSS, e.g.setKeyframe(’10%’, {background: ‘red’, ‘font-size’: ’2em’})

可以看出,KeyframeRule提供了一些方法和函数,是对 WebKitCSSKeyframeRule 和MozCSSKeyframeRule (注意是frame不是frames)的封装,具有下面的属性和方法

  • css – 该keyframe的css内容, e.g. {background: ‘red’, ‘font-size’: ’2em’}
  • keyText – 该帧的名称, e.g. 10%
  • original – 原始对象 WebKitCSSKeyframeRule 或者MozCSSKeyframeRule

示例

获取动画中的所有帧

var spin = CSSAnimations.spin;

for(var i=0; i<spin.keyframes.length; i++)
    console.log(spin.keyframes[i].css);

修改动画中的某一帧

var spin = CSSAnimations.spin;
spin.setKeyframe('10%', {background: 'red', 'font-size': '2em'});

反馈

给我博客或者GitHub留言,让我知道你的想法,我还开放了修改和增加的权限

使用原生JavaScript访问和创建CSS动画

如果你不想使用CSS Animation Store,或者只是想知道它的实现原理,可以参看下面的介绍

访问CSS动画

可以通过CSSOM访问keyframe动画,下面是我CSSA中的代码,用于访问指定的CSS动画

CSSAnimation.find = function(a) {
    var ss = document.styleSheets;
    for (var i = ss.length - 1; i >= 0; i--) {
        try {
            var s = ss[i],
                rs = s.cssRules ? s.cssRules :
                     s.rules ? s.rules :
                     [];

            for (var j = rs.length - 1; j >= 0; j--) {
                if ((rs[j].type === window.CSSRule.WEBKIT_KEYFRAMES_RULE || rs[j].type === window.CSSRule.MOZ_KEYFRAMES_RULE) && rs[j].name == a){
                    return rs[j];
                }
            }
        }
        catch(e) { /* Trying to interrogate a stylesheet from another domain will throw a security error */ }
    }
    return null;
};

使用如下:

var animation = CSSAnimation.find("spin"); // Get the animation named 'spin'

返回对象为 WebKitCSSKeyframesRule 或者MozCSSKeyframesRule 类型,取决于你的浏览器

创建CSS动画

下面是我现在找到的唯一的创建动画的方法,有点变通,通过代码生成CSS文本,然后插入到CSSOM或者通过添加一个<style>标签到当前document中

下面是在我的 Morf.js中的实现代码:

// Adds the CSS to the current page
addKeyframeRule = function(rule) {
    if (document.styleSheets && document.styleSheets.length)
        // Insert the style into the first attached stylesheet
        document.styleSheets[0].insertRule(rule, 0);
    else
    {
        // No attached stylesheets so append to the DOM
        var style = document.createElement('style');
        style.innerHTML = rule;
        document.head.appendChild(style);
    }
}

当你生成了你的CSS动画文本,你可以按下面的方式调用

var css = '@-webkit-keyframes spin { ... }';
addKeyframeRule(css);

模型-视图-呈现器(MVP)

网上有人问MVP设计模式,不是最有价值球员,是Web开发中的一种名词,有很多人介绍这种设计模式,但没有给出中文的说法,这里的P是一个中间人的角色,本人不才杜撰了一个名词:呈现器,MVP也就成了模型-视图-呈现器设计模式,下面是stackoverflow上某人对MVP的解释,虽然说的是Web开发,但对于其他应用也有价值,故这里翻译如下:

原文:http://stackoverflow.com/questions/2056/what-are-mvp-and-mvc-and-what-is-the-difference
翻译:sam sha – ycoder.com

Model-View-Presenter – 模型-视图-呈现器

在MVP中,呈现器包含视图的UI业务逻辑,所有视图的调用直接委托给呈现器,呈现器使用接口与视图对话,避免了与视图的直接耦合,这意味着可以模拟视图组件进行单元测试。MVP中有一个特点,它存在很多个双向派发,比如,当点击“保存”按钮,事件委托呈现器“OnSave”方法,当完成保存,呈现器将通过接口回调视图,这样这个视图可以显示保存已完成。

MVP倾向于一种非常自然的模式实现Web Forms呈现的分离,原因是视图总是被ASP.NET运行器最先创建,你可以找到更多关于两者的资料

Objective-C – 关联引用

你可以使用关联引用模拟在已存在的类上添加对象参数,这个功能只在Mac OS X v10.6和以上版本支持

在类外添加存储

使用关联引用,你可以对一个对象添加数据而不需要修改这个类定义,这在你没有这个类的源代码时很有用,或者是为了二进制兼容的原因你无法修改这个对象的时候。

关联基于一个key,所以你可以在一个对象上添加多个关联,每个使用不同的key,关联对象也可以确保被关联的对象是否存在,至少在源对象的生命周期内(也就是说这个对象没有将被引入到垃圾回收系统的可能性)

创建关联

你可以使用方法 objc_setAssociatedObject 创建一个关联,这个方法有四个参数,源对象,key,值,关联方式,key和关联方式值得进一步说明

  • key是一个 void 指针,必须唯一,通常使用static变量
  • 方式指关联对象是否转让,保留还是复制,关联是按原子级还是非原子级,这与声明属性的元属性类似( “Property Declaration Attributes”),你可以使用一个常量(见 objc_AssociationPolicy)来指定这种联系的方式

下面的例子显示如何建立一个数组和一个字符串之间的关联

Objective-C – 定义一个类

原文:The Objective-C Programming Language: Defining a Class
翻译:Sam Sha – ycoder.com

Much of object-oriented programming consists of writing the code for new objects—defining new classes. Objective-C 中类包括两部分

  • 接口部分 - 声明方法和实例变量,类型以及他的基类
  • 实现部分- 类的实际定义部分 (包括方法的实现体)

他们通常写在两个文件中,有时候分成多个文件,通过使用一种叫做“ category”的功能。类目可以分割一个类定义或者扩展已经存在的类。详见“Categories and Extensions.”

源文件

虽然编译器不需要他们,接口和实现通常分放在两个不同的文件中,接口文件必须可以被任何使用这个类的获取

单个文件可以声明和实现多个类,然而,习惯上每个类有一个单独的接口文件,同样单独的实现文件。保持类接口的分离可以更好的反映独立实例的地位

接口和实现文件通常以类名命名,实现文件以 .m后缀,其中包含Objective-C的源代码,接口文件可以指定其他任何后缀。因为他包含在其他源码文件中,通常以 .h 后缀作为头文件。如 Recangle.h 和 Rectangle.m

Objective-C – 对象,类和消息

原文:http://developer.apple.com/library/ios/#documentation/cocoa/conceptual/objectivec/Chapters/ocObjectsClasses.html
翻译:Sam Sha – ycoder.com

本章描述Objective-C中的对象,类和消息的原理使用和实现,还会介绍Objective-C的运行

运行器

从compile time 和 link time 到 runtime,Objective-C都尽可能遵循规范。只要有可能,它会动态的执行操作如创建对象,调用函数。这意味着这个语言不只是需要编译器,也需要运行系统去执行编译过的代码。运行系统扮演着Objective-C语言的操作系统的角色,它让语言工作。通常,你并不需要直接关心runtime,要了解更多相关功能,参阅 Objective-C Runtime Programming Guide.

对象

正如其名,面向对象程序都是围绕着对象而建立,一个对象关联数据,通过特定操作去使用和影响数据。Objective-C提供一个数据类型标示一个对象变量,无需指定这个对象的类型──这样就能允许动态输入

对象基础

译:Silverlight vs Flex

有人问Silverlight与Flex技术的比较,正好stackoverflow上有人解答,这里转载过来,加以个人看法
原文:http://stackoverflow.com/questions/20910/silverlight-vs-flex

翻译:sam sha – yCoder.com

我想你应该看到Silverlight是一个长远的项目,就像微软正在做的。如果你从插件的可用率和安装率考虑使用Silverlight vs Flash,两者有明显的平衡,但有下面一些原因让采用Silverlight是一个好的选择

  • 后来者居上 – 就像微软创建了“更好的Java”.NET,他们可以看到你是如何从起步开始设计RIA插件的,今天他们更了解现在人们如何使用web,而这些在当时的Flash发明者是无法准确猜测的,Flash可以添加功能,但它无法抛弃这个平台重新架构
  • 开发者熟悉度 – 虽然Silverlight是一个新的东西,但对于开发者并不是完全陌生的,相比让开发者理解一种新的脚本语言和事件模型的全新编程环境,他们可能更快的适应Silverlight的开发方式。
  • 摆脱Flash的时间线模型 – Flash最初是建立在帧基础的动画,虽然有办法抽象这种方式,但这是Flash工作的核心,Silverlight则采用应用程序为中心的模型,避免了这种缺陷。
  • ScottGu – ScottGu(这个家伙写了不少Silverlight相关的文章,算是微软的传教士,他有个网站 - scottgu.com)让Silverlight火起来了,无需多言
  • 很酷的新功能 – Silverlight也提供了一些Flash中常用的功能(比如摄像头、麦克风,或者3d、图形加速),Silverlight中还有一些独一无二的新技术 – 深度缩放就是一个例子,在Silverlight中我正看到更多革命性的技术,而在这一点上,Flash似乎处于维护模式。

译:Silverlight 5 RC 发布了

原文:http://10rem.net/blog/2011/09/01/silverlight-5-rc-now-available
翻译:sam sha – ycoder.com
备注:虽然Silverlight开发起来很费劲,但是微软在技术方面很是很牛的,就是用户体验错的太差

我很高兴的宣布,Silverlight 5 发布候选版本在太平洋时间今天(2011.9.1)上午10点(服务器复制链接和内容可能需要几分钟)可以获取了,赶紧上Silverlight.net的下载页面获取和使用吧,这个RC版本只是一个开发版本(不是正式上线的许可),旨在让你了解年底将发布的正式版本,使用这个发布版本取更新你的 SL5 beta 代码,使用名称空间和引用变化,使用新的功能,这不是最终版本,所以请使用和测试它,提交你找到的Bug,此外除了beta版本中的功能外,这个版本还包含更多很酷的功能:
  • P/Invoke 支持调用本地函数
  • 64 位支持 (yay!)
  • 矢量 (Postscript) 打印
  • 远程控制和多媒体命令支持
  • DataContextChanged 事件
  • In-Browser Trusted Applications浏览器信任应用程序
  • PivotViewer 控件(译者备注:这个组件很酷,详见 http://www.silverlight.net/learn/data-networking/pivot-viewer/pivotviewer-control)
  • 多媒体程序的电源感知(比如当播放电影时保持PC不待机)
此外,我们对一些XNA名称空间和文件位置做了调整,你会发现很多3D的东西被转移到不同的DLL,我们还修改了链接文本功能,使用只读 RichTextBlock而不用可编辑的RichTextBox,我已经更新了这些修改的公告和源码下载。再回头看看Silverlight 5 beta中其他功能的信息,这里有些我的 beta 版公告,RC版本又做了修改:

译:HTML5演示文稿资源列表

http://blogs.msdn.com/b/cbowen/archive/2011/07/13/list-of-html5-presentation-resources.aspx

原作者:Chris Bowen
翻译:sam.sha – ycoder.com
备注:这些都是学习HTML5的绝佳资料,强烈建议收藏

在最近的web,编程分会和用户组会议中,我参加了很多关于HTML5, Internet Explorer 9/10, CSS3 等课程,这些会议展示和提及了很多资源,所以我在这里列出来,希望能对你有所帮助

HTML5

  • HTML5 at W3C –  标准和学习资料
  • HTML5 W3C Logo – HTML5和相关logo
  • HTML5 Labs – web标准的早期原型(比如 IndexedDB, FileAPI 等等)
  • ScriptJunkie.com –  web开发文章和信息
  • CanIUse.com –  各个浏览器对HTML5, CSS3以及其他技术支持的详细信息
  • Modernizr – HTML 和 CSS3特性探测变得容易
  • HTML5 Cross Browser Polyfills – Shims, polyfills helpful for implementing features while supporting a range of browsers – 被大部分浏览器支持的,有益于改进特性的 shims, polyfills (注释:polyfill是浏览器本地支持的一段代码或者插件,参看:http://remysharp.com/2010/10/08/what-is-a-polyfill/)
  • HTML5 Boilerplate –  一个HTML5模版,可以作为好的参考