famo.us是什么?

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

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

famo.us2

关于CSS长度单位

发表于 & 归档在 HTML, Web.

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

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

Safari Web Content Guide – 配置视口

发表于 & 归档在 HTML, Web.

配置视口

iPhone OS 版本的Safari使用缩放模式显示网页,通常为桌面版设计的网页在这种模式下都工作良好,如果默认设置不适用于你的网页,那推荐你修改视口设置,如果你专门为iPhone OS设计网页,更加需要修改视口配置。配置视口很简单,就是在网页中添加一行代码,当然要理解视口属性如何对iPhone OS中的网页起作用是很复杂的。配置视口前,你需要深入了解iPhone OS中的可见区域和视口区域。

如果你已经熟悉了iPhone OS的视口机制,可以阅读 “Using the Viewport Meta Tag” 了解视口标签的详细使用,阅读 “Viewport Settings for Web Applications” 获取web应用程序技巧,此外按下面的顺序阅读这些章节: