html5 – 落园

这两天手痒痒，就把个人网站（cloudlychen.net）改版了...原来那个实在是太朴素了，完全没有HTML5和CSS3的感觉...

这次走黑色系，主要是因为网络图还是在一片暗黑的宇宙中比较闪耀。

先上效果图：

然后简单记录一下这次的变动。

其实这是v2了，V1在Photoshop里面效果图出来之后，就被我kill掉了...这次主要想营造的是星空的感觉，然后加上network的feature，突出在茫茫星海中遨游（explore）这样子。
大的框架是从某个摄影师网站抄的，runemolnes.com。不过被我kill掉了很多很炫的效果。实在是没那么多东西可以填呀。
然后最上面的banner实际上是可以“调戏”的网络图，这个是底层是HTML的canvas效果，每次刷新都会随机生成，可以鼠标调戏之～技术层面是sigma.js. 基本就是把他家的banner抄过来了，很强大的网络图HTML5可视化框架，可以加interactive效果什么的！
中间是精选了一些以前的照片，目前是博物馆系（开场图是一张很朴素的chihuly museum的墙图，主要是想要这样的风格，虽然那些更炫的照片只能压箱底了...）。底层的是COIN SLIDER. 这个本来想效仿flickr的翻页，结果看了一下源码比较难抄（话说顺便看到他们的小广告——we are hiring），所以另外找了一个基于jQuery的框架。还比较契合整体页面的黑色风格。
其他的就没什么特殊的了...那个logo是我很无奈的从网上随便拎了一个...填空而已。
移动端访问效果未知....非FF和Chrome访问效果未知...欢迎报告bug。
Css3已经强大到渐变线这种都不需要在PS里面画好另存为图片了...直接几行代码搞定，大爽！

吐槽时间：真的是太久不做前端了，完全赶不上潮流了。写个JS真的是绞尽脑汁才搞定...PS也是越来越不熟了，还好一开始想要的设计感还是多少保留了。后端能写死的都写死了，才不去调用PHP或者其他API来增加风险...

还好有那么开源的框架可以用，终于磨磨悠悠的搞定了。说明我做网页的基本功力还是在的，哈哈。

好吧，感谢@乐天诗人童鞋的推荐，让我见识到了这么震撼的presentation template。面对这种东西，完全没有抵抗力5555。什么powerpoint，什么beamer...什么pandoc自带的那几个破烂HTML5...一切都定格在impress.js。不要问我这是什么，如果你连自己搜都不会，就太不符合geek精神了。作者超级霸气，比如在帮助文档里面...

HOW TO USE IT

Use the source, Luke 😉

If you have no idea what I mean by that, or you just clicked that link above and got very confused by all these strange characters that got displayed on your screen, it's a sign, that impress.js is not for you.

Sorry.

然后乖乖的看源代码，好不容易看完几百行废话连篇自恋不已的说明，悍然发现：

Oh, you've already cloned the code from GitHub?

You have it open in text editor?

Stop right there!

That's not how you create awesome presentations. This is only a code. Implementation of the idea that first needs to grow in your mind.

So if you want to build great presentation take a pencil and piece of paper. And turn off the computer.

Sketch, draw and write. Brainstorm your ideas on a paper. Try to build a mind-map of what you'd like to present. It will get you closer and closer to the layout you'll build later with impress.js.

Get back to the code only when you have your presentation ready on a paper. It doesn't make sense to do it earlier, because you'll only waste your time fighting with positioning of useless points.

If you think I'm crazy, please put your hands on a book called "Presentation Zen". It's all about creating awesome and engaging presentations.

伤不起啊...还是乖乖的去找“Presentation Zen”这个东西吧。在书到手之前，乖乖的先弄一点东西应付一下接下来的presentation。可惜没搞定knitr，总是报错。只能手动拷代码进去了，sigh。

BTW，这里有个impress.js制作的稍稍潦草的slides，大家凑活着看一下，嘻嘻： http://loyhome.com/impress/ 注：中文默认用“冬青黑体”，没有的自己看着办吧....