翻译:HTML5与HTML4的区别

解释一下W3C Working Group Note,作为“工作组笔记” 发布,即意味着它是一个草稿版文档,可能被其它文档更新、替换或废弃。但由于翻译时草稿只发布了不到二十天,本文有很好的时效性。也作为比较性质的文献,它比起HTML5的标准更容易让人理解,可以让人快速地理解HTML5的变化轮廓。

关于本翻译:

本文所有指涉HTML5的地方皆用的是HTML,为了避免和HTML4的混淆,我将大部分HTML改为了HTML5,有可能遗漏;

由于其译名非常晦涩,本文将原文中的User Agent统一简写为UA;

Application统一简写为App,如Web Application简写为Web App;

为避免混淆,第四节,即文档模型章节部分的分类名统一不翻译。

1. 简介

1.1. 文档范围

本文档覆盖W3C的HTML5标准,它不包含W3C HTML5.1标准或WHATWG HTML标准。

1.4. 向后兼容

HTML是这样被定义的:使它能向后兼容目前UA处理内容的方法。为了让语言更简单,一些老的元素和属性被舍弃。比如一些纯粹用于展现的(译注:即非语义化的元素,如 big )属性被舍弃,因为他们更适合用CSS来处理。

但UA依然可以支持老旧的属性和元素。这就是为什么HTML标准清楚地划分了给开发的要求和给UA的要求。比如,开发者不应当使用 plaintext 元素,但UA需要兼容 plaintext 元素。

既然HTML已区分对UA和对开发者的要求,再也不需将一些特性标记为deprecated(不赞成使用)了。

 

Categories: 代码片段, 实用知识点, 经验分享, 网址分享, 网络转载

CSS3 animation实现点点点loading动画

一、再续前缘

去年夏天,写了篇名为“ CSS3 animation渐进实现点点点等待提示效果 ”的文章,主要内容是实现类似下面打点等待提示效果,比干巴巴的字符 ... 要更人性化:

点点点gif动画效果

之前实现的原理是通过宽度和 margin 控制实现,但是,问题非常明显,字符宽度受制于字体,例如移动端,没有宋体,字符可能就会被半路剪裁,从而出现显示 bug, 用计算机术语描述就是“健壮性不足”。

上周,实现某载入提示时候,上面圈圈转,下面就是干巴巴的静态文字:“数据导入中…”~

由于忘记吃药,我“看东西不顺眼”的病就犯了,心中不停地纠结:“这 ... 要是能用CSS动起来就好了!成本又低,效果又好,性价比超高,一劳永逸,多好啊!”

虽然忙到两泡尿攒成一大泡才去厕所的程度,还是趁着饭点捣腾了几下。首先看看以前的思路,确定不能在实际项目使用,于是,开脑洞想想有没有其他更好的方式实现打点动画效果(当然,要渐进兼容)。这一年多学习不止,还是有一些积累的,很快折腾了一个比以前的实现更加靠谱的方法,利用CSS3 xxx-xxxxxx 属性实现, IE6+都能正常显示,颜色跟随文字变化,看上去很赞,然而还是有瑕疵。于是,周末整理demo的时候顺便实践了自己的另外一个想法,发现效果果然如自己所料,这是一个更perfect的方法。趁着刚去万达看完《智取威虎山》有点high,特意分享下

二、基于box-shadow实现的打点效果

理论上, box-shadow 可以实现任意的图形效果,可参考我去年写的“ CSS3 box-shadow盒阴影图形生成技术 ”一文,自然我们可以利用 box-shadow 生成我们的点效果,然后通过 animation 控制不同时间点点的数目就可以实现点点点 ...loading效果了~

您可以狠狠地点击这里: CSS3 animation box-shadow渐进实现打点动画demo

Categories: animation, CSS3动画, 经验分享, 网络转载

动效原型工具Form指南

学习RelativeWave发布的交互设计工具 √可交互 √可上机预览 √动画表现力强 √可能是Google要力推的动画原型工具(安卓动画师请自行脑补)

最近我想学习RelativeWave的From,所以我分解了几个官方案例,然后原创了几个原型。

下面就是我制作这些原型过程中的一些经验心得。

一、首先,回答几个问题

Form是什么

Form现在已经免费 Mac App Store 链接

Categories: 经验分享, 网址分享, 网络转载, 设计前沿