2011回顾：20个将JavaScript推到极致的网站
jopen 13年前
<p style="text-align:center;"><img title="" alt="2011回顾：20个将JavaScript推到极致的网站" src="https://simg.open-open.com/show/3d567f335c249043525d3aa484ded7e4.jpg" width="595" height="325" /><strong><br /> </strong></p> <p style="text-align:left;"><strong> 对于浏览器上的开发者来说，2011年又是相当精彩的一年。web 开发者 Phil Hawksworth 在这篇文章中总结了 web 上经典的 JavaScript 用法。</strong></p> <p> 那些喜欢冒险体验前沿技术的开发者现在应该会非常开心。浏览器正变得越来越强大，上面有各种丰富的功能可以供开发者选择，一些在几年前几乎难以 想象的功能都已经一一实现。有了这些新功能，开发者现在能够开发出更精细、更复杂、更有想象力的用户界面了。这为网站开发扫清了障碍，网站能够拥有让人惊 喜的用户界面了。</p> <p> 有时候，这种技术的运用是非常精妙的，它无声无息地改变了应用的用户体验。有时结果就像是加入樱桃可乐中的跳跳糖，悄悄地给人们带来惊喜。</p> <p> 这里有 20 个特别突出的网站，他们在定位、技巧或者是 JavaScript 的使用上有各自的独到之处。</p> <p> <strong>演示网站</strong></p> <p> 先看一些有趣的东西。这些网站利用 JavaScript 将 Canvas，WebGL，CSS3和 HTML5 元素这些浏览器技术融合在了一起。通常这些技术只是用来取悦用户，或是在现代的浏览器中显示一些新的功能。虽然大多数的功能都很不错，但有些会占用大量的 处理器或是显卡，所以笔记本电脑用户常常需要关注他们的笔记本温度，以免温度过高而出现异常。</p> <p> <strong>1. Baroque.me</strong></p> <p> <a href="/misc/goto?guid=4958322148763215686">Baroque.me</a> 是一个简单，但是能够催眠的网站，它就用到了 HTML5 Canvas 元素，并使用 JavaScript 巧妙地控制了一个简单的虚拟巴赫大提琴设备的渲染工作。网站的声音是由 Flash 提供的，并且使用 JavaScript 控制。你可以控制页面上那些跳动的圆点，但是却很难控制大提琴的时间节奏。</p> <p> 它的开发者 <a href="/misc/goto?guid=4958322149598397984">Alexander Chen</a> 来自 Google Creative Labs，也参与了非常受欢迎的 <a href="/misc/goto?guid=4958322150393162026">Les Paul Google Doodle</a> 开发，在早些时候，还开发了一个非常棒的<a href="/misc/goto?guid=4958322151197590200">可视化 NY 地铁系统</a>。</p> <p><strong><a href="/misc/goto?guid=4958322148763215686"><img style="display:block;margin-left:auto;margin-right:auto;" title="" alt="2011回顾：20个将JavaScript推到极致的网站" src="https://simg.open-open.com/show/f06d0e59e0d0e7b5de040baf4b4f6613.jpg" width="615" height="329" /></a></strong></p> <p><strong> 2. Beercamp</strong></p> <p> <a href="/misc/goto?guid=4958322152725097986">Beercamp 2011</a>的界面非常有趣，可以自由缩放，它非常巧妙地使用了 CSS3 和 JavaScript 技术，这一点吸引了许多人的关注。网站大量采用了 CSS3 转换和变形效果，你还会发现它劫持了浏览器的滚动事件用来控制网页的缩放效果。今年的早些时候 <a href="/misc/goto?guid=4958322153540063640">David DeSandro</a> 曾<a href="/misc/goto?guid=4958322154341678850">分享了相关效果实现的技术细节</a>。</p> <p><strong><a href="/misc/goto?guid=4958322152725097986"><img style="display:block;margin-left:auto;margin-right:auto;" title="" alt="2011回顾：20个将JavaScript推到极致的网站" src="https://simg.open-open.com/show/dd7e563dc6cb027e2eea72e8c1c4da60.jpg" width="615" height="349" /></a></strong></p> <p><strong> 3. Three.js</strong></p> <p> Canvas 和 WebGL 这些技术为浏览器带来了强大的渲染功能。<a href="/misc/goto?guid=4958322155889143143">Mr. Doob</a> 开发的 Three.js 项目是一个 3D JavaScript 引擎，能够利用浏览器上的这些新功能渲染页面。下面是一个利用 <a href="/misc/goto?guid=4958322156683444018">Three.js</a> 渲染动画或是 3D 模型的例子。</p> <p><strong><a href="/misc/goto?guid=4958322156683444018"><img style="display:block;margin-left:auto;margin-right:auto;" title="" alt="2011回顾：20个将JavaScript推到极致的网站" src="https://simg.open-open.com/show/f6c0ee72ec99d6572902c7faeb9142d0.jpg" width="615" height="402" /></a></strong></p> <p><strong> 4. Windows Phone Demo</strong></p> <p> 最新消息：web 将覆盖移动设备！老实说，这个消息确实对使用 JavaScript 技术的移动市场来说是一个好消息。这还只是推动移动市场发展的第一步。</p> <p> 为了演示新的 Windows 移动设备界面，Microsoft 开发了一个 Windows mobile 上的<a href="/misc/goto?guid=4958322158213368111">演示示例</a>。用户确实能够发现它的界面播放的动画非常流畅，并且响应相当及时。这也是 CSS 和 JavaScript 的功劳（最好是通过 iPhone 或是 Android 设备访问——目前还不支持 Windows Phone！）。</p> <p> <strong><a href="/misc/goto?guid=4958322158213368111"><img style="display:block;margin-left:auto;margin-right:auto;" title="" alt="2011回顾：20个将JavaScript推到极致的网站" src="https://simg.open-open.com/show/5a56c87bd192c0b7bfd955f8449717d5.jpg" width="584" height="473" /></a></strong></p> <p><strong><br /> </strong></p> <p><strong> 工具</strong></p> <p> 这一节介绍的技术可能不会直接给用户带来惊艳的感觉（虽然有些可能可以做到），但他们确实非常重要。其中有些是开发者可能会频繁使用的 JavaScript 资源，而有些是人们开发浏览器应用时的首选工具。</p> <p> <strong>5. Workflowy</strong></p> <p> <a href="/misc/goto?guid=4958322159734125091">Workflowy</a> 可以帮助人们整理自己的想法。在 2010 年十一月推出了他们的测试版本，仅仅用了 30 天的时间，它就拥有了一百万条记录了。它是由 <a href="/misc/goto?guid=4958322160517527417">Jesse Patel</a> 和 <a href="/misc/goto?guid=4958322161313597446">Mike Turitzin</a> 共同开发的，Workflowy 使用 JavaScript 处理 DOM 操作和存储，并且能够在大量的本地记录中快速查找目标记录。如果你需要整理自己的记录或是想查找新的 <a href="/misc/goto?guid=4958322162112129053">GTD</a> 工具，Workflowy 会是一个不错的选择。最近它还增加了对移动设备和平板电脑的支持，方便用户分享文档。</p> <p><strong><a href="/misc/goto?guid=4958322159734125091"><img style="display:block;margin-left:auto;margin-right:auto;" title="" alt="2011回顾：20个将JavaScript推到极致的网站" src="https://simg.open-open.com/show/43de06608cb5b4e08046bbd566da0a8e.jpg" width="615" height="272" /></a></strong></p> <p><strong> 6. jQuery Mobile</strong></p> <p> 虽然现在移动 web 开发正变得越来越热，但是移动设备的开发工作还是相当困难的。jQuery JavaScript 库的目标就是想在浏览器上实现一个通用的 JavaScript 开发方法。而 <a href="/misc/goto?guid=4958183601317272178">jQuery Mobile</a> 的目标则更加远大：简化各种移动设备平台上的 web 开发工作。这个库已经推出了1.0版本，<a href="/misc/goto?guid=4958322164383941502">jQuery Mobile</a> 网站就是一个很好的示例，展示了如何使用 jQuery Mobile 开发一个能够在各种移动设备和传统浏览器设备上运行的网站。<strong><a href="/misc/goto?guid=4958183601317272178"><img style="display:block;margin-left:auto;margin-right:auto;" title="" alt="2011回顾：20个将JavaScript推到极致的网站" src="https://simg.open-open.com/show/9794cb2cf6addbf210806a3dd43b7bd2.jpg" width="615" height="401" /></a></strong></p> <p><strong> 7. Spritecow</strong></p> <p> <a href="/misc/goto?guid=4958322165925741766">Spritecow</a> 是由 <a href="/misc/goto?guid=4958322166716462732">Jake Archibald</a> 开发的，它能够帮助用户解决许多繁琐费时的问题。前台开发人员都知道，创建 spritesheets 的目标就是使得界面响应更加及时并尽量减少 HTTP 请求的次数。Spritecow 将 JavaScript，Canvas 和一些数学逻辑算法融合在一起，为用户提供了一个好用的 CSS 生成工具。</p> <p><strong><a href="/misc/goto?guid=4958322165925741766"><img style="display:block;margin-left:auto;margin-right:auto;" title="" alt="2011回顾：20个将JavaScript推到极致的网站" src="https://simg.open-open.com/show/5ae2ad0bcc3c95901121947990d8bce2.jpg" width="615" height="272" /></a></strong></p> <p><strong> 8. Cloud 9 IDE</strong></p> <p> 将整个开发环境整合到云和浏览器里面已经成为了我们这个时代的标志。在过去的几年里面，Cloud 9 一直在开发他们的<a href="/misc/goto?guid=4958322168253735688">集成开发工具（IDE）</a>，但是今年，它变成一个令人期待的项目并且成为一个可用的 web 开发资源。创始人兼 CTO <a href="/misc/goto?guid=4958322169060726910">Rik Arends</a> 表示，与其他类似项目（如 Bespin）相比，使用 JavaScript 来管理 DOM，在编辑环境中控制文档性能更好。 通过配置和扩展 JavaScript，还可以为这个开发环境带来更多的提升和功能。都相当值得期待。</p> <p><strong><a href="/misc/goto?guid=4958322168253735688"><img style="display:block;margin-left:auto;margin-right:auto;" title="" alt="2011回顾：20个将JavaScript推到极致的网站" src="https://simg.open-open.com/show/7502feed3a7dec2fafa846ae5df04f29.jpg" width="615" height="343" /></a></strong></p> <p><strong> 9. Reveal.JS</strong></p> <p> <a href="/misc/goto?guid=4958322170597178744">Reveal.JS</a> 是 <a href="/misc/goto?guid=4958322171391926898">Hakim El Hattab</a> 开发的一个演示文稿制作工具，能够制作绚丽的演示文稿并生成 HTML 格式，将它发布到 web 上。它使用了 CSS3 变换功能和 JavaScript，这个工具大受 web 开发者的青睐。</p> <p><strong><a href="/misc/goto?guid=4958322170597178744"><img style="display:block;margin-left:auto;margin-right:auto;" title="" alt="2011回顾：20个将JavaScript推到极致的网站" src="https://simg.open-open.com/show/ffd857344428cfb40b2f5018e96b3528.jpg" width="615" height="190" /></a></strong></p> <p><strong> 10. Pusher</strong></p> <p> <a href="/misc/goto?guid=4958322172917627696">Pusher</a> 是一个很棒的工具，在此不得不提。虽然它已经推出一年多了，但最近提升了 Web Sockets 对浏览器的支持，Node 使得 Pusher 受到了更多的关注。</p> <p> Pusher 提供了一组 API 用来提升实时 apps 和服务。有许多非常棒的网站都使用了 Pusher。</p> <p> Pusher 最初是由 <a href="/misc/goto?guid=4958322173717677581">New Bamboo</a> 的几个员工开发的，虽然规模不大，但是做的工作却相当了不起，New Bamboo 需要实现实时通讯来提升 web 游戏和工具，所以 Pusher 自身用到了 Node。<strong><a href="/misc/goto?guid=4958322172917627696"><img style="display:block;margin-left:auto;margin-right:auto;" title="" alt="2011回顾：20个将JavaScript推到极致的网站" src="https://simg.open-open.com/show/cdac4e3f835c8eca4037f4154edbd4db.jpg" width="615" height="295" /></a></strong></p> <p><strong> 11. Speakerdeck</strong></p> <p> 来自 <a href="/misc/goto?guid=4958322175236430865">Ordered List</a> 的 <a href="/misc/goto?guid=4958322176029034358">Speakerdeck</a> 最近被<a href="/misc/goto?guid=4958322176823819265">收录到 Github</a> 上，它利用 JavaScript 和 web 技术在 web 上展示演示文稿。虽然许多其他类似的服务都利用了大量的 Flash 技术，Speakerdeck 相比之下则较少用到 Flash，而是利用 JavaScript 实现幻灯片预览功能。这里有许多丰富的功能和技术。</p> <p> <strong><a href="/misc/goto?guid=4958322176029034358"><img style="display:block;margin-left:auto;margin-right:auto;" title="" alt="2011回顾：20个将JavaScript推到极致的网站" src="https://simg.open-open.com/show/5d396e8527f9fd7e6b048c3291ffa312.jpg" width="615" height="280" /></a></strong></p> <p><strong> 12. Gauges</strong></p> <p> 既然已经提到了 Speakerdeck，就不得不提一下 <a href="/misc/goto?guid=4958322175236430865">Ordered List</a> 的另一个精彩服务——<a href="/misc/goto?guid=4958322179109669674">Gauges</a>。它是一个分析工具，有点类似于 Google Analytics，使用了常用的 JavaScript 插件获取用户的访问数据。Gauges 有丰富的 API，并且能够很好地渲染实时数据。JavaScripty 相当的精彩。</p> <p> <strong><a href="/misc/goto?guid=4958322179109669674"><img style="display:block;margin-left:auto;margin-right:auto;" title="" alt="2011回顾：20个将JavaScript推到极致的网站" src="https://simg.open-open.com/show/9100dac859c6478a31da734c86ba073d.jpg" width="615" height="302" /></a></strong></p> <p><strong> 改进界面</strong></p> <p> <strong>13. BBC 主页</strong></p> <p> 最近关于 BBC 更新的主页有一些争论。有些人喜欢它，而有些则对它感到反感。就个人而言，作者开始觉得新的主页看起来有点疯狂，但慢慢地也觉得它其实也挺可爱的。它的交 互看起来非常酷，并且有许多的改进。即使在不支持 JavaScript 的环境中，这个主页也考虑得非常周到。但是，它还是显得有点拥挤和正正方方了。</p> <p><strong><a href="/misc/goto?guid=4958322180638427349"><img style="display:block;margin-left:auto;margin-right:auto;" title="" alt="2011回顾：20个将JavaScript推到极致的网站" src="https://simg.open-open.com/show/e609c2c4607edb271d29916fc4094bfb.jpg" width="615" height="291" /></a></strong></p> <p><strong> 14. BBC iPlayer</strong></p> <p> 虽然已经介绍过 BBC 了，但是 <a href="/misc/goto?guid=4958322181434119563">BBC iPlayer</a> 的确值得拿出来再说一说。它有一个非常了不起的 JavaScript 驱动界面，能够非常有效地呈现丰富的内容信息（不仅仅是视频信息，还包括图片信息）。使用 BBC 的主页和开源的 <a href="/misc/goto?guid=4958322182228100867">Glow</a> JavaScript 库能够做许多新颖的工作。</p> <p><strong><a href="/misc/goto?guid=4958322181434119563"><img style="display:block;margin-left:auto;margin-right:auto;" title="" alt="2011回顾：20个将JavaScript推到极致的网站" src="https://simg.open-open.com/show/573eecf0e86465d8f63ca561f6875a04.jpg" width="615" height="269" /></a></strong></p> <p><strong> 15. 非死book</strong></p> <p> 必须承认，<a href="/misc/goto?guid=4958322183768553732">非死book</a> 在界面设计上做了大量复杂、精细的工作，使得它真实。上面有丰富的实时资讯，通知和聊天功能，虽然它的风格可能无法迎合所有人的口味，但是它的确对 web 设计产生了影响，并且影响了许多人。</p> <p><strong><a href="/misc/goto?guid=4958322183768553732"><img style="display:block;margin-left:auto;margin-right:auto;" title="" alt="2011回顾：20个将JavaScript推到极致的网站" src="https://simg.open-open.com/show/b7740445cf8cf2b9cd5cb47c1d976b67.jpg" width="615" height="259" /></a></strong></p> <p><strong> 背后的美丽</strong></p> <p> 虽然作者非常关注视觉效果和代码库（代码库确实相当重要），但他最关心的其实是如何巧妙地利用这些技术。最后几个例子很好地展示了如何灵活地使用现有的技术。</p> <p> <strong>16. Github</strong></p> <p> <a href="/misc/goto?guid=4958183584851817768">Github</a> 在用户交互方面做得相当出色并且非常注重细节的设计。在<a href="/misc/goto?guid=4958322186023167647">代码导航树</a>中，用户能够在项目的目录树中平滑地切换，网站记录了各个页面的地址信息并且可以对地址进行标记，内嵌了编辑器，可以直接在浏览器中修改代码（使用 <a href="/misc/goto?guid=4958322186820111019">Cloud 9 editor</a>）。使用 Canvas 实现网站的可视化工作，包括搜索预览，弹出菜单和界面元素，这个列表还在不断增加。Github 做得非常棒。<strong><a href="/misc/goto?guid=4958183584851817768"><img style="display:block;margin-left:auto;margin-right:auto;" title="" alt="2011回顾：20个将JavaScript推到极致的网站" src="https://simg.open-open.com/show/c52170d8b4c871f43d4b1fe760f3130f.jpg" width="615" height="262" /></a></strong></p> <p><strong> 17. Google Doodle</strong></p> <p> Google Doodles 提供了非常有趣的动画，用户能够与这些动画交互。有时，这些设计会让用户会心一笑，有时也许人们还没发现它们，它们就已经消失了。<a href="/misc/goto?guid=4958322188341476804">Marcin Wichary</a> 是 Google 的这个“<a href="/misc/goto?guid=4958322189148925840">delighters</a>”项目的负责人之一，为了推广这个项目，必须扫清 JavaScript 优化技术中的障碍。这个团队使用了 sprite-crunch 技术，用来压缩它们在<a href="/misc/goto?guid=4958322189945539280">动画</a>中使用的 <a href="https://simg.open-open.com/show/47354f11749d0960dbe927771980d819.jpg">sprites</a> 的。处理方法相当妙。这些涂鸦非常巧妙地利用了浏览器 API 和 JavaScript。Google 的开发人员太聪明了！</p> <p> <strong><img style="display:block;margin-left:auto;margin-right:auto;" title="" alt="2011回顾：20个将JavaScript推到极致的网站" src="https://simg.open-open.com/show/5293853e47d10fbc6f27eb7101588e7b.jpg" width="615" height="169" /> 18. Nike Better World</strong></p> <p> <a href="/misc/goto?guid=4958187486065905943">Nike 团队的这个网站</a>常常被复制和讨论。 这个网页将 JavaScript 和 CSS 结合起来，当用户滚动页面时，营造出一种有趣的视觉差。即使浏览器不支持 JavaScript，这个网站也能优雅地降级显示，将视觉差效果移除，但并不会影响页面的正常显示，作者建议将导航链接保留下来。可以用 JavaScript 劫持这个链接，这样无论应用环境是否支持 JavaScript，这个导航都能够工作。</p> <p> <strong><a href="/misc/goto?guid=4958187486065905943"><img style="display:block;margin-left:auto;margin-right:auto;" title="" alt="2011回顾：20个将JavaScript推到极致的网站" src="https://simg.open-open.com/show/557267734032ebd79e8f97c48c0248bc.jpg" width="614" height="270" /></a></strong></p> <p><strong> 19. Mobile Beetle</strong></p> <p> 作者在今年早前曾对 <a href="/misc/goto?guid=4958322192223681870">Volkswagen Beetle</a> 的<a href="/misc/goto?guid=4958322193005758818">新网站</a>提出了一些批评。在此不会重复这些批评，而只是介绍这个网站在<em>将 JavaScript 推向极致</em>的几个方面。它也是一个旋转效果做得相当不错的网站。这个网站的移动版本做得相当精巧。当你在 iPhone 上访问这个网站时，它充分利用了触摸和旋转事件提升服务的用户体验（尽管如果不是使用的 WIFI 的话，网页中的图片可能显得有点过大）。<strong><a href="/misc/goto?guid=4958322193005758818"><img style="display:block;margin-left:auto;margin-right:auto;" title="" alt="2011回顾：20个将JavaScript推到极致的网站" src="https://simg.open-open.com/show/39af33fb4aed83039094f1a41e5432d5.jpg" width="615" height="410" /></a></strong></p> <p><strong> 20. 推ter 移动网站</strong></p> <p> 其实移动设备上已经有许多非常棒的 推ter 客户端了，以至于大家可能会忽略今年 推ter 推出的<a href="/misc/goto?guid=4958322194535568669">移动优化版本的 web 客户端，尽管它相当不错</a>。推ter 的开发团队采纳了 iPhone 推ter apps 上的许多 UI 惯例，并且在自己的 web 框架中重新设计了一些 UI。结果相当不错，在智能手机上访问浏览器中的页面就像是 native app 一样。在 Android 和 iPhone 上的效果都相当出色。真的是一个很棒的工作。</p> <p><strong><a href="/misc/goto?guid=4958322194535568669"><img style="display:block;margin-left:auto;margin-right:auto;" title="" alt="2011回顾：20个将JavaScript推到极致的网站" src="https://simg.open-open.com/show/2f493048706dd9f3d5aadfd507e2ee9a.jpg" width="615" height="410" /></a></strong></p> <p><strong> …这就是全部的 20 个网站</strong></p> <p> 这就是作者挑选出来的 20 个将 JavaScript 推到极致的网站。当然，其实应该还有许多其他的网站也有资格出现在这个列表上，但是 web 太大了，而列举出 20 个网站只是一个很小的集合。虽然许多其他的网站也有一些突出的特点，但也各有不足。JavaScript 让开发者能够在浏览器中做许多了不起的工作，但这里列出的 20 个网站中，有些为了实现某些特色牺牲了网站的访问性、地址性和其他性能或功能，这是一个优秀的 web 应用应该克服的。不过，它们确实在今年，给 web 开发者带来了不少新的想法。</p> <p> 文章来源：<a href="/misc/goto?guid=4958322196050357186">2011 in review: 20 sites thatpushed JavaScript to the limit</a></p>