Adobe的HTML5实验

尽管HTML5技术差不多已经将Adobe的Flash逼上了绝路，但这并不意味着Adobe要始终与HTML5为敌。相反，Adobe现在也是HTML5技术的主要支持者之一。

Adobe的Web平台团队正在实施一些新的图形特性，并在一个网页中通过讲故事的形式展示出来，你可以直接在thegraphicalweb.com中观看，也可以通过这个视频来观看。
 
该项目使用到的技术主要包括：
 
1.SVG（Scalable Vector Graphics，可缩放矢量图形）
 
由于SVG的扩展性以及易于与CSS/ JavaScript操作特性，该技术被贯穿使用在thegraphicalweb.com网站中。其中动态SVG创建和动画效果，基于一个流行的SVG数据可视化库D3.js。D3在该网站中主要用于在背景中生成群山的形状。


2.CSS3和SASS
 
在网站中，主要使用CSS Animation和Transforms属性来实现闪烁和移动效果，这些属性被应用到内联SVG的路径和元素上。SASS是构建于CSS之上的元语言，扩展了CSS3，增加了规则、变量、混入、选择器、继承等特性。该网站主要使用Sass来生成良好格式化的CSS代码。
 
3.2D Canvas
 
在网站中，使用Processing.js来实现一个粒子系统，通过切换点阵的组合形式，来呈现一个说话的人脸效果。


4.着色器
 
该网站使用了一个自定义的GLSL着色器，来实现WebGL场景中发光的背景效果。通过CSS Filter Lab这个工具，编写自定义着色器的难度大大降低。


此外，该网站还使用3D Transforms来实现场景旋转、缩放效果，使用HTML5 Audio来播放音频。
 
该网站的源码托管在Github，感兴趣的Web开发者可以下载学习。
 
演示网站：thegraphicalweb.com
 
项目源码：https://github.com/adobe/graphicalweb-keynote