本文介绍了一个 Web 项目，该项目重新思考了如何在公共场所使用电视设备来实时显示内容并与社交网络互动。Tela Social 是一个由 Mozilla 系统应用程序驱动的应用程序，它在 Linux 设备上运行，并创建了一种视觉体验，使用 Web 以实时数据呈现自定义和交互式内容。它与标准的自助服务终端不同，并且远离个人浏览器体验，因为它不是为个人量身定制的。相反，它探讨了如何利用在线数据为公共区域的用户提供影响。在以下部分，您将了解系统的一般架构；特别关注如何使用 CSS3 和 JavaScript 来支持用户体验并提供引人入胜的动画效果。

首先，启动 Web

应用程序在 Linux 系统重新启动后开始运行。启动一个监视器进程，并开始检查基于 Gecko 的客户端是否正在运行。如果未运行，则启动主进程：一个基于 Gecko 的单窗口浏览器引擎，在全屏模式下没有工具栏。

下图显示了启动的 Web 堆栈基础架构概述。Web 应用程序以类似于 Firefox 或其他使用 Gecko 的由 Mozilla 提供支持的应用程序的方式位于引擎之上。

在线和离线

大多数资源不是从远程网页加载，而是从使用 NodeJS 编写的本地 Web 服务器加载——TelaSocial Mediator。为了减少脚本执行失败时出现的问题，还会监视此系统。

一旦 Web 应用程序来自本地 Web 服务器，主 HTML 布局可能会引入在 iframe 内加载的内部 HTML 组件。这种分离程度是为了帮助开发人员在标准测试环境中创建隔离的组件：所有组件都是由普通页面组成的。作为该项目的一部分，创建了一个实验性项目脚本，以帮助开发人员快速部署新的网格布局——Gridtype.JS 可以将字符串作为参数，并可以生成一个无表格的网格布局。以下示例显示了如何生成一个 DIV 网格

grid('abcdabee',4);

上面的“字符串”规范将生成以下布局

没有弹出窗口或不需要的桌面界面

许多系统使用在线数据在电视设备上显示信息。其中一些系统是在操作系统图形用户界面之上启动的应用程序。以下照片拍摄于 2012 年巴西的机场。这些是在操作系统桌面上的系统上显示不需要的用户界面元素的众多示例中的几个。因此，出于简单性和降低成本的原则，设计的方案是从基本 X Window 基础架构启动 Gecko。这种方法确保不会同时运行其他可视化应用程序，从而在没有这些不需要的弹出窗口的情况下创造出改进的质量体验。

将 Gecko 弹出窗口路由到框架

虽然操作系统桌面弹出窗口已不在场景中，但 Gecko 用于显示弹出窗口以提醒用户的情况仍然存在。解决此问题的方法是使用 Gecko 的首选项 API 并要求 Gecko 内联显示网络错误消息。这样，所有错误都将在 iframe 中显示，这很棒，因为可以跟踪错误并在 Gecko 进程之外发出应用程序逻辑信号。例如，我们可以监视输出控制台并根据网络错误情况更改布局。因此，例如，如果天气频道框架出现网络错误，则系统应该能够启动备用布局。

带缩放和平移的动画库

上述元素对于保持企业环境中预期的质量水平至关重要。有了这个功能基础，就可以发挥创造力，Web 开发人员的心态占据主导地位。HTML5 和 CSS3 提供的现代效果可用于帮助理解和改进此场景中的用户体验，该场景与桌面或移动设备不同。

为了帮助创建内容，作为该项目的一部分，还制作了一个小型 JavaScript 库。该库的主要目标是帮助从 HTML 页面创建视觉叙事。TagVisor 库 读取 <li> 元素列表，这些元素说明了如何使用时间参考数据应用 CSS3 和其他转换效果

上述脚本分派转换函数，这些函数可以使用 JavaScript 修改文档以进行 DOM 转换和 DOM 样式更改，这些更改将负责视觉效果。这些效果在许多系统中很常见，包括 Impress.JS 等众所周知的基于 JS 的解决方案。但是，TagVisor 带有针对数字标牌场景非常重要的定制函数。一个区别是该脚本允许在 iframe 内执行修改，这对于在网格排列中加载许多分离的 HTML 资源的情况很有用。

缩放和动画隐喻承担了大量工作，以确保用户在电视面板前期望的动画流畅度。还可以及时组合一些效果，以产生引人入胜的视觉叙事，如TagVisor 视频演示中所示。

Web 驱动，用于适应

用户体验至关重要，也是使用基于 Web 的基础架构的主要原因。这种模型带来了一定程度的活力，支持组织使用 Web 服务格式（如 JSON 或 RSS）使用自定义数据源定制系统。这种方法使我们能够使用各种在线资源测试屏幕；并了解 Web 事件流如何影响本地组织中的用户。

以下视频是使用 Tela Social 的系统的示例。第一个视频指的是巴西一个大型科学园区的系统（葡萄牙语新闻稿）。这是一个包含各种内容区域的示例，这些区域与各种来源相关：从记者到编辑，以及使用社交网络的开放渠道。第二个视频显示了一个电视设备垂直放置的示例。

人们认识到，使用事件数据加上本地兴趣内容可以建立本地参与度。对于大多数人来说，电视内容是遥不可及的，并且不是针对其本地社区的兴趣量身定制的。为了让事情变得不同，我们甚至将电视以垂直位置放置，以说明整个体验发生了翻转，内容和互动自下而上。

该项目的目的是开发可在空间中使用的基于 Web 的解决方案，并带来对当地社区有积极影响的社交感知体验。虽然可以在移动设备和桌面上使用社交功能，但我们相信我们的方法可以帮助社区，因为它扩展了物理环境——它为环境创造了社会反映。这是一个构建对当地社区贡献的意识以及感兴趣的实时数据的自定义 Web 体验的机会。这种方法还探讨了用户界面方面的挑战，因为它促使人们以新的方式互动：它不像标准的自助服务终端那样直接触摸。首先是 Web，并基于实时数据探索交互机会。