网站倾向于自行衰败。他们称之为链接腐烂。未支付的域名注册。倒闭的公司。失去兴趣的网站所有者。有什么比 404 更令人悲伤?登陆一个曾经存在的 URL 的保留页面,但现在在过期后落入了一些域名囤积者的手中,希望有人会支付溢价才能将其拿回。
这些东西一点也不好玩。但是那些仍然存在,只是旧的网站呢?我们可以做些什么有趣的事情来表明故意变老?
在 CodePen 博客中,我们指出至少两年未更新的博客文章。我们当然会更新文档,但我们倾向于将博客文章保留为历史记录。所以,我们对此非常清楚
<?php if (get_the_modified_date("Y") < 2017) { ?>
<p class="callout"><strong>Heads up!</strong> This blog post hasn't been updated in over 2 years. CodePen is an ever changing place, so if this post references features, you're probably better off checking the <a href="/documentation/">docs</a>. Get in touch with <a href="https://codepen.io/support/">support</a> if you have further questions.</p>
<?php } ?>
我们把它设计成一个小小的警告

但是如果它不那么明显呢?如果文本只是有点开始变得糟糕呢?单词从行中掉下来并变得模糊?内容越老,衰败就越多
查看 CodePen 上的示例
衰败的文本,由 Chris Coyier (@chriscoyier) 创建。
在 CodePen 上。
如果你故意让一个网站衰败会怎么样?假设,也许你正在为客户工作,而客户还没有支付账单。Dragoi Ciprian 有一个关于此的小想法 (代码库)。你可以设置截止日期和最后期限
var due_date = new Date('2017-02-27');
var days_deadline = 60;
这是一个演示。当我写作的时候,我已经过了 90 天的最后期限的 30 天。如果演示对你来说是空白的,好吧,我想我应该支付我的账单,这样这个代码就可以被删除了 😉
查看 CodePen 上的示例
not-paid 演示,由 Chris Coyier (@chriscoyier) 创建。
在 CodePen 上。
或者也许屏幕会有点红色闪烁,就像你在玩电子游戏时被击中一样。

或者你可以变得很 故障!(此演示是点击加载,快速颜色和运动警告。)
查看 CodePen 上的示例
故障加载器,由 Nathaniel Inman (@NathanielInman) 创建。
在 CodePen 上。
查看 CodePen 上的示例
CSS 故障文本,由 Lucas Bebber (@lbebber) 创建。
在 CodePen 上。
也许与其根据付款截止日期或内容的年龄来决定,这些效果会根据网站依赖项更新了多长时间而生效。或者至少进行过某种部署推送。
这只是有点间接相关,但它让我想起了非常非常可怕的游戏 Lose/Lose
Lose/Lose 是一款具有现实生活后果的电子游戏。游戏中每个外星人都是根据玩家计算机上的随机文件创建的。如果玩家杀死外星人,它所基于的文件就会被删除。如果玩家的飞船被摧毁,应用程序本身就会被删除。
虽然触摸外星人会导致玩家输掉游戏,杀死外星人会奖励分数,但外星人永远不会真正向玩家开火。这让人质疑玩家的任务,这个任务从来没有明确说明,只是通过经典的游戏机制暗示。玩家应该是侵略者吗?还是仅仅是观察者,穿梭在一个危险的土地上?
我想做一个淡出的网站,它链接到一个社交 API 提要,这样每当网站的 URL 被分享(例如通过推特)时,它就会再购买 5 分钟的观看时间。分享越多,持续时间越长,如果你到达网站,它为空白,你就必须分享它才能看到内容。
^ 这与这篇文章完全无关,但我仍然喜欢这个想法 :D
哈哈,我认为广告商会喜欢这个主意 :)
让我想起一个反向运作的概念作品:当用户访问页面时,它会移动到一个新页面并被替换为指向它的链接。它会不断变得越来越难看到,观看的人越多。
Brenda Laurel 在她的《人机交互设计艺术》一书中的一篇文章包含了一个想法(以及一张插图),即桌面文件管理器窗口中的文档图标可以根据创建日期更改颜色。具体来说,它们会变得更黄,最终会变成棕色,具体取决于文件的年龄。我很想看到网站中的一个页面变得更黄,而且随着帖子越老,边缘可能还会变得更毛躁,因为它很容易理解,并且可以帮助你一目了然地了解上下文,就像你在“现实世界”中一样。
让我想起了《行尸走肉》的片头字幕。每一季都随着我们深入僵尸末世而变得更加腐烂和破损。
Chris,我认为互联网上最令人困惑,有时也是最危险的问题是所有那些误导人们的文章,仅仅因为它们过时了——但它们上面没有日期,所以人们没有意识到它们可能已经过时十年或更长时间而将其视为真理!博客文章有日期,要么在顶部,要么在底部,但文章通常没有。在当今快速变化的世界中,所有作者和出版商都应该显示文章的日期,除非文章顶部附近有明确的日期(例如,对刚刚发生的事件的引用)。
Trello 有一款插件可以使卡片随着时间的推移而逐渐淡化和腐烂,就像旧纸一样。
https://foundation.mozilla.org/en/campaigns/eu-misinformation/publisher-campaign/
相反,怎么样
这使得代码更加动态 :-)
对不起,但我太喜欢这个概念了,我创建了一个小的
add_filter
函数,如果get_the_modified_date("Y")
大于两年,则会将decay
类添加到<body>
元素中// 如果文章过时,则将 \`decay\` 类添加到 \`<body>\`
function decay_class($classes) {
$output = "fresh";
if ( date("Y") - get_the_modified_date("Y") >= 2 ) {
$output = "decay";
}
return array_merge( $classes, array($output) );
}
add_filter( 'body_class', 'decay_class' );
将其放在
functions.php
或单独的插件中,嘿,瞧!:-)我目前正在我的博客上测试它,虽然我还没有添加任何 CSS (
view-source
><body>
)衰败的页面
新鲜的页面
喜欢这个想法,但我不知道这里给出的示例处理是否能很好地传达这个想法。不过,确实让人思考。