jinjiang / h5slides

A Slides App based on HTML5

H5Slides

注意：该项目以不再维护，同时欢迎继续关注 v-mark-display —— 一个新的可以利用 Markdown 文本展示幻灯片的 Vue 组件。

---

H5Slides希望通过HTML5的技术，成为用户编辑、播放、控制幻灯片这一系列行为的全套方案的提供者。幻灯演示将会变得更自如，更轻便，更开放，更易于分享。

特点

1. 它是HTML5的！
2. 我们不需要臃肿的Powerpoint也可以自由的制作和演示幻灯片
3. 我们可以自由的在各种设备上进行幻灯演示
4. 我们可以自由扩展幻灯片的制作工具和播放环境
5. 它可以很自由很方便的传播

它不是……

• 它不是个重量级选手
• 它不是个全能型选手
• 它不是PPT，而是H5Slides！

---

运行方式

运行环境

H5Slides目前仅支持webkit内核浏览器，PC、Mac端经过本人测试的包括最新版的Safari/Chrome/Maxthon，iOS端仅支持iOS6以上版本(因为可以导入相册图片或相机拍照)。
兼容更多的浏览器和操作系统需要一个过程，也希望大家可以踊跃参与，贡献代码 :-)

运行步骤

1. 用浏览器打开源代码中的index.html即可运行；
2. 在新打开的界面中，我们可以自由编辑幻灯片的内容和样式；
3. 点击右上角的“Preview”(预览)按钮，可以进入播放器模式，播放我们之前编辑好的幻灯片；
4. 如果想重新编写一个全新的幻灯片，可以点击右上角的“Reset”(重做)按钮。

---

我们的计划

H5Slides还是个很初级的WebApp，我们希望大家可以一同参与其中，共同打造我们自己的幻灯演示平台！
同时，H5Slides也是一块HTML5的试验台，很多新的特性、规范、库和框架都可以在这个平台上得以实践，比如：

• css 3 transformation
• css 3 flexbox
• fullscreen api
• web storage
• knockout.js
• bootstrap
• require.js

欢迎为我们push代码，如果希望更深入的交流，可以随时与我们取得联系。

我们的联系方式

我们的github页面：https://github.com/Jinjiang/h5slides
我们的邮箱：[email protected]
我的个人微博：@勾三股四

h5slides's Issues

排版自定义可拖动

希望能修改成为排版自定义元素位置，拖动排版~

没有example？

github上放一个啊

advice

生成需要的幻灯片后，增加导出接口；
API文档，具体详细一些，方便开发维护

v2 plan (Simplified Chinese)

如题，这个项目搁置有很长时间了，这期间其实对在线 slides 已经有了很多新的想法。因此打算在近期重启新的研发计划，开发第二版。

新版不出意外将基于 Vue.js 开发，并且会以 markdown 为主体格式，同时提供很多人一直希望可以支持的导出为本地文件的功能。另外对于这个古董项目来说，我会尽可能引入并使用一些社区比较主流或新兴的研发方式和工具。这里不一一列举。

之前的版本将正式停止维护并切换到 legacy 分支，未解决的 issue 会直接关闭，未完成的 TODO 和 milestone 也将作废 (抱歉请谅解)，在线预览的网站
http://jinjiang.github.io/h5slides/demo/index.html 暂时不会撤下，所以依然可以使用。

另外 GUI editor 不会成为一个必选项，只会是一个辅助工具，这意味着新版会开放更低层的能力和数据格式。这主要也是归功于越来越多的人 (不只是技术人员) 接受了用 markdown 撰写内容。

最后，要跟英文有障碍或不自信的人说声抱歉，为了让更多人能够了解和使用这个项目，从技术文档和源代码的角度，新版会全部使用英文。使用层面的文档，我会考虑维护一个简单的中文版本。

未来的 issue 和 PR 也希望大家可以尽量使用英文，这样可以得到更广泛开源社区的关注和讨论。

谢谢

该 issue 会在新版的第一个 MVP 发布后关闭

demo

这位小哥，在 README 给个在线 demo 呢？

建议将<空格>改成下一个动画，增加<回删>为上一个动画，增加鼠标滚轮支持

在Powerpoint还有Keynote中，空格都是下一个动画。
我觉得这样做非常合理，因为在做展示的时候，按长长的空格键比精确的定位到向左或者向右键要容易的多。
而且很多时候我未必是正对着键盘，这时候要下一个动画的时候，更要纠结一下该按哪个按键才行。
同理上一个动画也有同样的问题。

所以建议把空格和回删改成跟其他软件一样的功能，这样用起来就方便了。

此外，对于在网上浏览的时候，有鼠标滚轮的支持也是很方便的事情，希望作者能考虑一下。

能做一个Metro样式的模板么？

Hi Jinjiang,

我是感觉现在Metro样式的PPT很多，而且比较吸引人的眼球，不知道能不能做一个有关于Metro样式的PPT模板呢？

是否可以加进富文本的支持？

就是编辑textarea的时候，是否可以加上一个简单的富文本支持的悬浮菜单？比如：列表、字体设置。自己试了一下，好像不行，有什么好的建议么？
多谢！

widget系统的设计以及随之而来的新的数据格式设想

如题，目前H5Slides还只能编辑简单的文字内容。接下来，我们希望H5Slides可以承载更丰富的内容，所以我们打算设计一套widget系统，通过不同的widget扩展不同形式的内容，然后将他们自然顺畅的存在于H5Slides当中。

对于每一张幻灯片中的某一个界面元素，它可以是文字，也可以是图片，或者是一个youtube视频、一张google地图等等。这里我希望以图片为例进行widget系统的设计和实现。

相应的，我觉得之前设计的数据结构存在一定的局限性。主要的问题在于：相同的界面元素，文字内容、位置细节、样式等信息是分散在不同的数据结点的。但它们又有着紧密的联系，所以这里存在一个矛盾。新的数据结构希望可以解决这的问题，强调一个界面元素是一个小单位的整体。具体的思路还在思考之中。

是否考虑集成impress.js的功能

impress.js本身实现了slide的部分功能，是否考虑集成进来

关于数据保存持久化

昨天用了一下， 发现功能很赞，
就是在数据存储这一块有点问题， 如果存储在 localStorge 中的话，只能在自己的机器上访问， 而且万一不小心，清空浏览器数据，那 做成的东西就白费了， 加之在手机上试了下 关闭浏览器后再打开，数据不会怎么保存，这可能是手机浏览器默认策略。

那为什么不考虑 轻量级数据库 或者 本地文件存储，这样至少保存的数据是 可靠的