如何将Javascript、CSS和HTML内容转换为交互式-pdf或.h5p页面

Question

我有一个网站应用程序，可以让用户在站点地图上放置点，并将它们链接到图像。

web应用程序使用Javascript、CSS和HTML。

phase1

当用户被订阅时，他使用一组丰富的功能来：

• 在站点地图上添加点并将其链接到图像
• 编辑圆点:移动、删除、链接图像等。
• 等等。

这是通过网站上的网站来完成的。

phase2

当用户结束订阅时，他会得到一个.zip文件，其中包含他创建的信息(站点地图、图像、站点地图和图像之间的链接等等)。

然后，用户可以连接到承载see应用程序的网站，而无需登录并获得功能的子集(例如，他只能点击这些点并查看链接的图像，但他不能再编辑这些点或添加图像)。

我想改变phase2。而不是与网站上的网络应用互动，我想“冻结”的网站应用程序为一个交互式的-pdf，或h5p页面，可以独立播放，不需要网络应用。

有多种原因促使我们这样做：

• webapp很复杂，所以与webapp打交道容易出现更多的错误。 如果最终数据的小子集功能可以通过h5p浏览完成，这可以归结为在单击超链接时显示图像，那么运行时错误的风险就会大大降低。
• 交互式-pdf或.h5p文件可以被各种工具浏览，甚至在离线时也是如此。
• 最终产品可以重新设计，看起来更简单。

我的问题：

• programatically是否可以将Javascript、CSS和HTML内容转换成交互式的-pdf或.h5p页面？ 每个最终产品都将是不同的(例如，点的数量，以及它们在站点地图中的位置)，所以每次都必须手动创建.h5p页面是不切实际的。
• 是否有移动应用程序(例如在Apple或Google上)可以在本地读取.h5p内容，例如当设备离线时？

谢谢

编辑：

奥利弗·塔克谢谢你的回复。

直到几天前，为了解决我的问题，我根本没有听说过h5p。

在查看h5p时，我看到了

• 许多评论都是关于h5p的，这有点老了--从5/6年前开始。
• h5p经常在教育背景下被谈论(例如Moodle)
• 当我提出这个问题时，我甚至找不到“h5p”的标签
• 我找不到h5p在主流频道上的论坛，比如对话或Slack。

所以我想知道我是否走对了方向。h5p是一种只需要时间才能获得的新事物，还是一种在一段时间前开始并逐渐减少的东西，或者是我错了，它现在比我想象的更活跃(我知道h5p.org，我确实看到了那里的活动)。

基本上，我想要创建能够工作的交互式内容。

• 理想情况下脱机，或
• 在线，但有一个主流浏览器/工具/网站(即不需要我的特殊网站)

在设计行业，我知道有互动式目录。但我不知道用户是否可以下载它们，并以某种方式(例如，使用epub阅读器)阅读它们。

谢谢

Answer 1

我不知道如何以编程方式创建PDF，所以我只能为与H5P相关的部分提供部分答案。考虑到你的问题范围很广，这可能是可以接受的评论。

H5P内容遵循在https://h5p.org/documentation/developers/h5p-specification上记录的规范。

基本上，您必须从服务提供的文件中实现H5P内容类型库(文件)。我假设JavaScript和CSS文件总是相同的，那么这些文件可以直接重用(但可能不是合法的)。您还必须添加一些接受参数的JavaScript，并生成从服务中获得的HTML。然后，您必须对semantics.json建模以适应这些参数，然后本质上就有了一个H5P内容类型。您不必使用当时可用的基于表单的编辑器(这可能没有意义)，但您可以通过编程方式创建content.json文件，并将其放入H5P内容文件存档中。要以编程方式创建该文件，您必须创建一个转换器，它标识由该服务生成的HTML中的参数，并将其转换为H5P语义/内容格式。不确定为H5P创建编辑器小部件是否更有意义，因此您根本不需要依赖其他服务。

目前还没有允许您加载和运行H5P内容的移动应用程序。他们在H5P核心团队路线图上，但我不指望他们很快就能解决这些问题。moodle有一个允许脱机使用H5P内容的moodle应用程序，但是它需要从moodle实例中获取。伊米允许在Windows、MacOS和Linux上本地运行H5P内容，而不是在Android或iOS上运行。然而，Lumi还允许从H5P内容创建单个独立的HTML文件，其中包含所有可以播放的内容和逻辑，这样就可以在Android和iOS上脱机使用。