Slitastic

在本文中，我们将介绍我们的想法 Slitastic，该应用程序面向教育类平板电脑。

• 下载预告片 - 736.5 KB

引言

大约一年前，首届英特尔“应用创新竞赛”启动。当我们为这项竞赛构思时，我们不确定如何着手处理一款支持触摸屏的超极本。一年过去了，我认为最终决定拥抱超极本的所有组件，而不仅仅是触摸屏或传感器，已被证明是正确的决定。

随着最新一代超极本的出现，我们看到了其他令人兴奋的技术被包含在内，例如带深度传感器的网络摄像头。这些技术本身已经能够实现有趣的项目，但如果它们与其他功能结合，我们就处于技术奇境。例如，可以将加速计等传感器与英特尔感知计算竞赛中使用的 3D 摄像头结合起来。扫描功能远远超出了图像识别的范畴。现在，不仅可以根据图像信息进行图像识别，还可以根据来自环境的附加信息进行识别。

在这项新竞赛中，我们将再次参赛——显然我们有冠军头衔要捍卫。我们不是梦想家，所以我们知道获胜将非常困难，最终细节将至关重要，而这些细节超出了我们的控制。尽管如此，我们认为我们的新想法很棒，并最终会成为一款有趣的应用程序。这次我们的目标受众仍然是教育领域，但也可以称之为生产力领域。我们的目标机器仍然是平板电脑/超极本——我们正在创建一个以触摸为中心的应用程序，当使用键盘时，该应用程序会变得更好。最终，我们计划创建有史以来最先进、最具创新性的演示应用程序……

应用程序的概述及其功能将在 “想法” 部分中介绍。此外，上面下载的预告片（这是 ZIP 文件中包含的 PDF 文档）或 “功能” 部分中，通过视觉方式描述了该应用程序的预期用途。

在关于 “实现” 的部分中，将深入解释开发应用程序所采用的方法。在那里，还将介绍使用的编程语言以及我们选择的优势。

背景

多年来，“幻灯片”或“演示文稿”这两个词一直与Microsoft PowerPoint程序相关联。也存在其他同类应用程序，但没有一款能达到微软办公软件的普及度和接受度。现在随着平板电脑和智能手机的兴起，人们发现了其他应用程序来完成创建精美演示文稿的任务。

在学术界，尤其是在数学、物理和计算机科学领域，LaTeX演示文稿非常受欢迎。使用 LaTeX 的主要优点是所有内容都以文本形式编写，稍后进行“编译”（通常会生成 PDF，但也可以生成其他目标）。因此，对特殊 GUI 的需求（可能容易出错、缓慢或不准确）被淘汰了。此外，还可以轻松插入其他（LaTeX）文档中的方程，并且效果非常出色。

最后，还有一种新型的演示程序，大多数人称之为Prezi。这里的重点是图像，因为可以围绕图像之间的连接来构建整个演示文稿。在这里，过渡和效果非常重要。这种程序朝着原始幻灯片演示文稿的方向发展，其中将反转胶片与放映机结合使用。有人会讲述一个故事，并用图像来展示特定的场景或做出某种声明。

让我们来看看这三个程序各自的特定领域——以及将在下一节中介绍的新想法。

总而言之，Slitastic试图将这些程序的优点结合到一个功能强大、触摸友好、多用户的应用程序中。

想法

如前所述，近年来人们已经从一个演示文稿程序转向了多个程序。现在似乎已经普遍认为，没有万能的方法可以创建演示文稿。存在许多方法，不同类型的演示文稿可能更适合使用不同类型的程序。同样，PowerPoint 并非唯一的演示文稿程序似乎也已被接受。

那么我们的想法是什么？我们想创建世界上最先进、最具创新性的演示程序。它将围绕三件事展开：

• 可移植性，即使用 HTML 作为演示文稿的标记语言。
• 平板电脑/触摸友好，并允许自定义扩展，例如用于感知集成。
• 集成其他设备，例如使用智能手机控制演示文稿或使协作尽可能简单。

最终，我们的应用程序将成为构建演示文稿的创意基石。尽管如此，将重点放在内容上是我们设计目标之一。控件仅在需要时显示。界面元素将最少。这里一个非常重要的点是，每次用户交互不仅可以通过触摸完成，而且是为触摸而设计的。当然，鼠标也可以很好地工作——并且使用键盘输入会更有趣，但是，按钮及其行为是触摸优先的。

由于我们希望解耦一切，因此我们也解耦了用户界面与应用程序。最终，我们的应用程序将只是一个简单的“集线器”。这个集线器负责处理棘手的事情，如文档或状态管理。它还负责应用程序更新、与在线服务或其他设备的连接等等。

功能

在本节中，我们不想讨论所有功能。现在我们将主要讨论该应用程序的一些重要功能，其中一项功能将详细介绍：所谓的 SmartPointer。让我们从一系列（简短的）通用功能开始：

• 插件/扩展
• 布局和模板
• 形状/绘图
• 过渡和动画
• 数学方程
• 源代码编辑
• 可脚本化的程序流程
• 图像效果/图像流
• 集线器/云基础
• 触摸优先，支持笔输入
• 智能手机支持
• 音频和视频支持
• 流媒体功能

由于我们在浏览器中，我们仅通过 JavaScript 就拥有直接的脚本支持。整个应用程序将有一个通用的 API，这使得它非常易于脚本化。这允许高级用户通过应用具有不同变量的旧脚本，在几秒钟内创建完整的演示文稿。

创建的演示文稿可以导出（并重新导入）为 HTML，这使得在未安装程序的情况下编辑演示文稿变得非常容易。这实际上是一种非常像 LaTeX 的方式，区别在于显示演示文稿所需的唯一程序是网络浏览器（即，它将在任何地方运行）。

一个非常重要的点是插件/扩展功能。整个应用程序将非常注重扩展性。事实上，几乎所有内容都将作为扩展进行编程——只有少数核心概念将直接实现。我们将在下一节中详细讨论这一点。

现在，我们想详细介绍 SmartPointer 功能，该功能利用了现有的智能手机。想法如下：为什么必须购买专用设备才能拥有带控制功能的激光笔（前进、后退）？为什么不直接使用智能手机呢？当然，智能手机没有集成激光笔，但我们为什么需要这样的设备？智能手机有几个传感器，并且不使用激光笔有几个优点：

• 您确切地知道剩余电量
• 您不会用激光束攻击观众
• SmartPointer 可以进行平滑处理，从而减少抖动
• 您不必将方向指向屏幕
• 还可以实现更高级的选项

我们为 SmartPointer 应用程序提供的模型 UI 如下所示：

我们不会在本地应用商店发布 SmartPointer 应用程序，而是将其作为 Web 应用程序发布（即，我们将创建一个网页）。这有几个原因——而且我认为它们非常明显。一方面，我们不必将 Web 应用程序打包为原生程序；另一方面，我们避免了各种费用，最重要的是，我们也避免了有时非常缓慢的接受过程。这还确保了我们的应用程序始终是最新的。最后，分发过程比将应用程序提交到所有不同的应用商店要快得多。

那么 SmartPointer 实际上是如何工作的呢？嗯，这很简单……

我们将智能手机的方向传感器绑定到屏幕坐标。这意味着屏幕上的 Y 轴在 (0, height) 之间，实际上对应于智能手机上的 (45°, -45°) 的 beta。此外，屏幕上的 X 轴在 (0, width) 之间，实际上对应于智能手机上的 (-45°, 45°) 的 alpha。目前，gamma 没有明显的用途，但用户可以激活它以达到特殊目的。一个目的是，在 gamma 达到某个阈值后，演示文稿会旋转。

通过能够设置实际显示的标记，使其具有不同的尺寸和颜色，我们认为 SmartPointer 实际上远远优于普通的激光笔。由于几乎每个人都拥有智能手机，因此也无需额外的设备。目前，SmartPointer 将仅为 Slitastic 设计，尽管可能会实现更通用的实现。

但我们不仅将智能手机集成作为合适的指向设备。此外，我们从一开始就集成了多用户支持。整个应用程序都将围绕多用户支持进行设计。

另一个因素是使用本地传感器。如果传感器可用，将使用方向来增强创建内容的体验。此外，如果可以使用深度摄像头，我们将集成基本的手势，如滑动或竖起大拇指来控制演示文稿。还将提供一套丰富的语音控件。

最后，还将支持外部触控笔。我们将允许用户直接在幻灯片上进行绘图——实现模拟和数字排版的奇妙组合。

架构

系统的架构围绕所谓的文档集线器。该程序是一个非常简单的 WPF 应用程序。它将使 Web 应用程序能够访问文件系统，在没有本地存储限制的情况下跟踪状态，并访问感知计算 SDK 或传感器等复杂功能，而无需依赖 Web 浏览器。

文档集线器不仅提供内容（用户界面），还负责更新应用程序以及连接在线服务。这些在线服务允许用户将其他设备连接到本地应用程序。当然，整个应用程序都内置了某种安全系统，以防止任何其他设备未经授权的访问。

因此，我们在此应用程序中有两个可能的端点：

1. 本地计算机上的浏览器（开箱即用，应用程序将在此环境下工作）。
2. 浏览器上的其他设备（需要额外的授权才能允许这些连接）。

让我们看看为该应用程序构建的各种层。从文档集线器的角度来看，我们将连接许多不同的功能方面。

主要几点是：

• Slitastic 将以其自己的格式管理文档。
• 视图、图像、脚本或其他资源文件等文件将被嵌入。
• 整个 HTTP、控件和视图概念将由轻量级 MVC 架构处理。
• 一个非常关键的点是扩展模块。扩展很可能以 NuGet 包的形式从 Slitastic 包服务器提供。

所有在线服务很可能将在 Windows Azure 上运行。这将为我们提供灵活性和健壮性。此外，它还可以根据需求扩展服务的规模。

最后，一个主要功能将是使用 SmartPointer。如前所述，SmartPointer 使智能手机不仅可以控制演示文稿，还可以像激光笔一样显示某些内容。拥有 SmartPointer 不是必需的，但它提供了一个非常酷的功能，很可能会被广泛使用。

激光笔与读取智能手机的方向传感器密切相关。因此，我们需要检测旋转。此外，还需要一个按钮来激活激光笔。如果不按按钮，屏幕上将不会显示任何点。

从方向传感器接收到的数据将被平滑处理。这将防止微小的数值误差传播，并具有减少手抖动可视性的良好效果。

实现

作为实现语言，我们做出了一些自然的选择了。集线器应用程序将使用 C# 编程。我们将使用 .NET 框架的一些功能和一些外部库，如 AngleSharp（用于跟踪 HTML DOM，以及导入、导出等功能）或 Nancy（用于提供非常轻量级的 MVC 架构来提供内容）。视图将使用 Razor 语言编写，这对于使用 C# 代码扩展 HTML 非常完美。SignalR 将用于管理实时通信。

GUI 使用 HTML5、CSS3 和 JavaScript。我们将使用 TypeScript 编写所有 JavaScript，因为这通常会显著减少运行时错误。更少的错误意味着更少的测试和调试需求，最终将加速开发过程。样式表将使用 LESS 编写，以使其尽可能灵活。

工具和材料

我们的工具栈包括市场上一些最知名的工具。

• Visual Studio 2012
• Web Essentials 2012
• Emmet
• git
• Sublime Text 2
• LINQpad
• SparkleShare
• Blend
• GIMP

虽然 Visual Studio 将用于整个项目管理，包括 C#、TypeScript 和 LESS 的编码，但 Web Essentials 的工作是即时创建 CSS 和 JavaScript 文件。此外，Web Essentials 还为 Web 开发提供了一些其他有用的功能。Emmet 在这里也非常出色。它使我们能够以一种非常简洁易懂的方式编写 HTML。

对于我们的 VCS，我们使用 git。我们将像往常一样使用 TFS，它与 git 配合得很好，或者我们将使用 Raspberry Pi 形式的私有存储库服务器。其他文件将通过 SparkleShare 同步，SparkleShare 旨在 Linux 上安装 Mono 后运行。最后，将使用 Sublime Text 2 进行一些纯 JavaScript、CSS 或 HTML 编码。

对于编写简短的评估或测试小代码片段，将使用 LINQpad 工具。这个工具非常适合快速原型设计，而无需打开整个项目。此外，还将显示 MSIL 和非常不错的视图作为结果。

应用程序的设计大部分将手工完成。对于一些原型设计，将使用 Blend 工具。图像将使用免费工具 GIMP 创建和修改。

依赖项

整个应用程序需要 .NET 4.5。这是因为 .NET 4.5 对最佳 async / await 支持有要求。否则，.NET 4 也可以。由于我们还使用 Nancy、Razor 或 SignalR 等工具，因此我们也依赖于 ASP.NET 核心库。

我们所有的依赖项也应该与 Mono 兼容。尽管 XAML / WPF 不支持 Windows 以外的平台，但移植应用程序应该是很容易的。文档集线器非常简单，因此可以很容易地为其他 GUI 重写。目前，我们没有计划制作 Slitastic 的跨平台版本，但是，与以前的项目相比，这将容易得多。

那么，除了 .NET 4.5 之外，我们还有哪些显而易见的依赖项？

• TypeScript 编译器
• LESS 编译器
• Razor v2
• SignalR
• JSON.NET
• AngleSharp v0.3 或更高版本
• Nancy
• NuGet 客户端
• jQuery v1.9.1
• Twitter Bootstrap
• Font Awesome

这些依赖项也可以在各种类别中可视化。让我们看看块状可视化。

我们不会使用 Knockout（或 AngularJS 或类似框架）来进行客户端的 MVVM。我们所有的模型绑定都将通过我们的 JavaScript API 进行，这会更加动态和以服务为中心。因此，我们将在此使用自定义解决方案，该解决方案将优于这些其他框架（在此特殊情况下更优——并非普遍适用）。

非平凡代码

将在第二轮讨论。

问题和解决方案

将在第二轮讨论。

扩展系统

将在第二轮讨论。

最终用户体验

这一部分目前有点猜测。应用程序尚未编写，这意味着任何关于客户如何与之互动或使用它的假设都可能完全错误。尽管如此，我们认为——用户将如何与 Slitastic 互动？

在我们看来，大多数用户肯定会继续主要使用键盘和鼠标/触摸板来创建内容。尽管我们认为大多数用户仍将通过键盘和鼠标与应用程序互动，但我们（正如应该做的那样）是为极端情况设计的：触摸优先是首要任务！用户将启动 Slitastic 应用程序，该应用程序将在最后一个打开的文档（或多个文档）上打开一个浏览器。如果尚未创建任何文档，则仅显示集线器。在这里，用户只需单击“添加文档”，这将在用户的标准浏览器中打开一个新文档。

现在，大多数时候用户将编辑或添加内容到演示文稿。为此，他们将单击某处输入文本，或使用更高级的选项，如形状扩展。在这里，用户可以拖放各种形状。添加的形状可以随意修改。它们可以重新着色、调整大小或只是变换。

一些用户可能希望与他人共享他们的演示文稿。他们所要做的就是按下共享按钮，然后输入他们想要共享演示文稿的人的用户名。他们可以选择是否启用修改（只读模式）。这将允许其他用户通过键入创建者的用户名并选择特定的文档来打开文档（如果创建者与此人共享了更多文档，则可能会有更多文档）。

现在协作是实时的。如果一个协作者断开了连接，更改将被缓冲。这个系统实际上会非常强大，因为它允许实时协作，但它不依赖于实时协作。如果原始创建者离线，在线服务将进行缓冲，稍后通知创建者。

最后是演示时间了！创建者可能已经设置好了他的 SmartPointer（这只需要两分钟——只需转到 SmartPointer 网页并输入 Slitastic 帐户的用户名和密码；搞定！），这意味着 SmartPointer 检测到用户正在运行演示文稿。这意味着网页可以在没有任何进一步配置的情况下使用。

这里值得注意的是：我们试图让一切尽可能简单。我们希望为高级用户提供非常高级的功能（例如脚本或直接编辑源代码），但通常它们并不存在。用户只会看到绝对最少的东西：最少的界面元素，最少的设置，等等——想法是让一切都能在最少的配置下正常工作。如果用户想要更具体，他们可以，但这都是可选的。

其余内容将在第二轮讨论。

兴趣点

编写自己的演示应用程序是我长久以来的梦想之一。我们认为其架构非常有趣，并且已经被一些非常知名的程序所使用。这里的创新在于集成了其他设备（如智能手机）以及多用户/触摸优先范例，以及使用 HTML5 进行演示文稿和 GUI。最终的应用程序肯定不会像 PowerPoint 那样功能丰富，但这就是扩展系统的作用。我们的计划是提供一个系统，可以轻松地启用进一步的扩展，而无需更改任何主程序。

因此，需要遵循“自狗食”原则，将程序一些最重要的部分作为扩展进行编程，例如始终通过我们自己的 JavaScript API，最终触发 C# API。尽管这起初看起来更复杂，但它有几个优点。首先，我们直接看到了哪些 API 调用缺失；其次，我们体验了为 Slitastic 编程扩展的难度。这不应该太复杂！如果感觉复杂，那肯定有问题。

我们无法达到 LaTeX 的清晰度，因为 HTML 目前还不能提供如此好的排版。尽管如此，我们希望让方程看起来尽可能像 LaTeX 一样好。最终，结果将会很有趣。个人来说，我对这款应用程序寄予厚望。你们感觉如何？

历史

• v1.0.0 | 初始发布 | 2013年8月12日
• v1.1.0 | 添加了海报供下载 | 2013年8月14日