famo.us是什么?

发表于 & 归档在 CSS, HTML, JavaScript, Web.

初次访问famo.us,被他的动画和交互效果所震撼,研究过其代码后,发现用到三种技术:matrix3d变换,requestAnimationFrame实现动画,以及物理运动引擎,单从技术上看三者都不难实现,但事物表面背后往往隐藏深意,famo.us的由来和目标却是野心勃勃。

famo.us2

JavaScript模板

发表于 & 归档在 HTML, JavaScript, Web.

原文:https://developer.mozilla.org/en-US/docs/JavaScript_templates 补充说明:原文列举了不少模板方案,但很多都已经不再维护或者久未更新,此外他所说的标准可能是mozilla自己的标准,而非w3c的标准,我简单试用了一些,感觉 PURE 方案还不错,此外大家还可以参阅这里的推荐:http://stackoverflow.com/questions/7788611/what-javascript-template-engines-you-recommend 除(Firefox)自带的XUL模板系统外,还可以使用JavaScript模板,这种方法也可以实现内容格式与结构的分离,但依赖于JavaScript模板引擎通过JavaScript业务逻辑将内容注入到模板中,不需要使用RDF/XML这样的技术 按语法风格 100%基于标准(没有自定义语法) 纯JavaScript(JavaScript函数调用生成HTML) JsonML (没有“浏览器端模板”),也可以使用JavaScript的JSON子集 domMaster 和 nodejs master_texthtml Mootools Template Engine (null-tech.com) 纯HTML(使用JavaScript选择器找出正常的HTML,按业务逻辑填充) PURE mustache (有一些设计逻辑,但语法简单) Chain.js (死链接); 这里有说明 LightningDOM Mootools Template Engine (zealdev.wordpress.com) XSL XSLTJS (实现跨浏览器支持的XSL模板) E4X E4X for templating (注意E4X已被废弃) 标准友好的(自定义属性或者语法,但大部分采用标准兼容的用法) X/HTML/E4X/XUL 自定义属性和元素 Adobe Spry processing instruction attributes ASP.NET client templates Seethrough (使用具有名称空间的E4X属性和元素,注意虽然E4X已被废弃) XUL Templates (只支持XUL) 纯JavaScript嵌入在HTML/XML设计逻辑(ASP/JSP/PHP或者大括号{}风格) EJS (嵌入式JS)… Read more »

通过JavaScript访问和修改CSS3动画

发表于 & 归档在 CSS, HTML, JavaScript, Web, 翻译.

原文:Accessing & Modifying CSS3 Animations with Javascript By Joe 昨天Chris Heilmann在Mozilla博客上写了篇关于使用javascript查找和生成CSS动画的文章,文中用了我的一个小例子,详细的说明了代码访问css动画的相关技术 Chris最后写道: 我希望用一个CSSAnimations集合类,通过json或者string存放不同的动画,并使用他们的名字作为key,这样,可以动态的创建一个新的css rule,并添加到document或者rule集合中(以保证跨浏览器),思考中 听起来是个好主意,所以我写了一段JavaScript代码来实现这样的接口 CSS Animation Store 这个主意是通过一个简单的接口来访问CSS动画,实际上之前的Morf.js和CSSA中都有这样的处理,大部分代码已经有了,只需要整整,按照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…. Read more »

关于CSS长度单位

发表于 & 归档在 HTML, Web.

CSS中的长度单位很多种:cm, mm, em, pt, px …其中“px”也就是像素用处最多。这些单位分两种类型,一种是绝对长度,或者称为“真实长度”,比如厘米,毫米,英寸,这些都是物理学中标准的长度单位,在打印文档时有重要意义,因为你设置多大尺寸,打印出来就是真实的尺寸,但对于电脑屏幕来说,这些所谓的“真实长度”也并非真实的长度,你可以用尺子对着电脑屏幕测量,一个10cm宽度的div通常不会是10cm,如果你问我到底有多长,我会告诉你电脑中的“10cm”约等于378像素,至于这378个像素到底有多长,不同的显示器会是不同的结果,比如iPhone4的视网膜(这里有误,视网膜技术与分辨率没有实际关系)屏幕上面378像素宽度可能不到5厘米,这就是绝对长度与像素长度的区别

译:Silverlight vs Flex

发表于 & 归档在 .Net, Silverlight, 翻译.

有人问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 发布了

发表于 & 归档在 .Net, Silverlight, 翻译.

原文: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演示文稿资源列表

发表于 & 归档在 HTML, Web, 翻译.

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模版,可以作为好的参考