Git Product home page Git Product logo

gossip's Introduction

Gossip

Gossip is an online user interface to efficiently author and delivery beautiful and enlightening presentations. If you are in China, you can try it here, otherwise here. Please use Chrome, Firefox, or Safari for a better experience.

There is a view in Sapiens: A Brief History of Humankind that the ability to tell and share stories makes humans far more strong than animals because stories allow us to trust strangers which led to large-scale cooperation.

Presentation is an excellent way of telling and sharing stories, and gossip is one of the favorite kinds of stories that we talk about any time. Therefore, I name the software as Gossip to build a tool that enables users to produce and convey stories more efficiently and conveniently.

Make your next presentation not a presentation.

edit mode

word cloud

Getting started

There is a tutorial in Chinese to help you with all the techniques you need to know to create and deliver presentations by Gossip. And there is an upcoming tutorial in English.

Why bother?

Gossip is inspired by impress.js. Although impress.js is impressive, it is also hard to use because you must code... In the meantime, existing tools to author and delivery presentation do have some problems which can't be ignored.

Hard to author a presentation

On the one hand, existing tools make the authors pay more attention to the graphics design of each slide, rather than the efficiency of transmitting information and the whole structure of the presentation.

The presenter ultimately has to decide what information will be included in the presentation, how that information will be organized, and how to best turn that organization into a story for the target audience.

Hard to deliver a presentation

On the other hand, it is difficult for existing tools to provide the audience more context to hold their interest during delivering presentations, such as the individual slides relate to one another or how they fit into the larger structure of the presentation.

As a result, they are often inadequate in helping presenter communicate the structure of a presentation to the audience.

Next, there is an introduction to the workflow of Gossip which will show what makes Gossip unique.

Author a presentation

Past research analyzed several models of authoring text and identified four common components in these models including generating, organizing, composing, revising. The process of authoring presentation is very similar to authoring text, only it includes images and other multimedia elements. So Gossip is designed according to the four components.

Generating: Idea

The generating component is where ideas are collected and recorded. These ideas can come from the author's introspection or external sources.

When using traditional presentation software, there's no place for presenters to collect and record ideas, they must use other related software to do so. But there is an Idea panel in Gossip where users can collect and record scattered ideas at the first stage of creating a presentation.

Idea panel

Ideas can be text, image, or even code.

Idea pre

Organizing: Outline and Thumbnails

The organizing component involves making decisions about abstractions and ordering leading to hierarchical and linear structures.

Most tools allow presenters to organize slides in a linear fashion, which is hard to understand or change the latent hierarchical relations among them. Some tools enable users to order hierarchical structures, such as Keynote or Prezi, but they are still not good enough.

In Gossip, there is an Outline panel to help presenters to make a clear hierarchy efficiently. Also a Thumbnail panel is provided to preview the whole presentation.

In the Outline panel, when the presenter creates a new point node, Gossip will automatically create a slide for it. And users can simply drag a node to modify the linear order or hierarchical structure of the presentation rather than dragging many nodes for a slight change.

outline

Composing: Main and Element

In the composing stage, the author takes the structure developed in the generating and organization stages and turns it into an actual usable product.

At this stage, it often requires a lot of drag and aligns operations to set the right position or size of each element (text, image, etc.) which is very time-consuming and annoying. This is because there are no constraints between elements which means users have to layout every element manually.

But it is possible to add constraints for elements according to the logical structure, so Gossip allows the user to organize elements in a hierarchical structure in the Element panel and changes there will be reflected in the Maini panel.

With the help of CSS Flexible Box Layout, Gossip provides the container element to manage other elements, such as texts, images, container, etc. Users can add elements to the container and specify their arrangement(horizontal or vertical) and proportion(1:1 or 1:3).

One of the main advantages is that for each element, Gossip will automatically set the proper position or size of it according to its container's styles(padding, direction, etc.) and the other elements in that container. The other one is that users can operate a group of elements rather than just one each time.

element

Revising: Style and Variable

Lastly, the revision stage involves reviewing the work, adding new ideas, and fixing inconsistencies with the original organization.

The features introduced above already have shown that it is pretty easy to add, delete, edit each slide, and adjust the structure of the whole presentation in Gossip. Those are related to the content of the presentation, but there is also a need to make change styles easy. To solve this problem, Gossip offers a Style and Variable panel to presenters.

For those elements which tend to have the same or similar styles, such as the font color of highlight texts or the font size of the title, Gossip enables the user to create a variable and assign to these elements. When the user changes the value of that variable, Gossip will change the value of those related elements as well!

variable

Delivery a presentation

To hold the audience's interests and help the presenter communicate the structure of a presentation to the audience, Gossip uses some cool but meaningful switch animation and a Word Cloud mode for the overview.

Switch animation: Zoom in, Zoom out, Rotate

The Zoom in animation will remind the audience of a big point to a small point. And Zoom out animation is for a small point to a big point. If the two points are at the same level, it will be the Rotate animation.

Overview: Word Cloud mode

Word Cloud mode uses a traditional word cloud algorithm to layout each slide. As a result, the audience can quickly familiarize or review the general content of the entire presentation. It is also helpful when the audience asks the presenter a question about a specific slide because the presenter needn't scroll the mouse wheel to find the specific slide.

overview

Limitations

There are some limitations in Gossip now.

  • Outline is not flexible enough.
  • Variables are not easy enough to use.
  • Layout method is not convent enough.
  • No support for animation, template, shortcuts, redo, undo, etc.
  • The context provided during delivery is not enough.
  • Word cloud mode has some problems.

Future works

  • Solve the problems mentioned above.
  • Design a better UI.

Contributing

Gossip 1.0 is just a course project at the beginning, we need your support and advice to improve the code and features of it.

If you like Gossip, not only can you give it a star, you can also do the following things.

  • Join Telegram to discuss.
  • Give us the slides you made by Gossip and we will display some of them.
  • Fill out the questionnaire.

Tech stack

gossip's People

Contributors

chengluyu avatar dependabot[bot] avatar pearmini avatar sdu-gyf avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

gossip's Issues

feat: 直接download整个present的静态页面

idea很有范~
比如说现在同学们答辩,有时候得事先拷一份到教室的电脑上,所以如果能直接下载present的那个页面下来就好了~
但是就需要处理一下js打包和js打包到本地等等。

只是一个 idea

set in local

Hi. Mr MiniPear.
I am using your gossip ppt maker web. And it is acually brilliant.
You shared the code in github, but I don't know how to run in local.
do you mind tell me how to set it in local?

防止意外關閉的 onbeforeunload 事件

今天初次製作投影片時,不小心沒存到檔就關閉了好幾次。
有時是不小心把網址拖到頁面上,就載入該網址了。
如果加個保險應該不錯,例如未存檔但試圖關閉時提醒。

window.onbeforeunload = event => {
  if (prompt('are you sure to close window?')) true
  else event.preventDefault()
}

How to store Gossip Slide on server Level ?

Hi,

I am currently experiencing an issue with my locally hosted gossip application, and I am seeking your expertise to address it.

The problem arises when I save a slide and refresh the page; the slide persists within the same browser. However, upon opening the link in a different browser, the application displays the default example slide instead of the saved one. It seems that the slides are being stored at the session level rather than at the server level.

My objective is to ensure that saved slides are accessible universally, irrespective of the browser being used. I would like the application to recall the last saved slide each time the link is reopened.

Thanks

通过 Markdown 简易编辑幻灯片

当前的模式可能还不够高效。
之前我有使用过一个通过 Markdown 语法快速实现高桥流幻灯片的项目,这种模式应该也能够套用到 gossip 上。
我们先通过 Markdown 编辑大致内容,再通过预设的相应语法的对应样式进行解析,最后可视化界面进行其他的定制。这简化了创建容器/元素、添加内容、设置样式的步骤。

https://github.com/joyqi/takahashi-template

features for 2.0

  • 可以导出 ppt, pdf 和静态文件
  • 将所有编辑面板都放在左面,主面板放在中间
  • 优化想法面板
  • 去掉 canvas 的支持
  • 桌面版
  • 多种开箱即用的放映模式
  • undo & redo

导出PPT

产品非常棒,就是不知有没有办法导出一个PPT文件?

使用中的一些感受

想法很不错。下面是使用中的一些感受

  1. 缩略图一开始没找到,不应该用switch开关控制(以为是控制面板展示的,实际上是切换面板里的2 个不同的功能),应该用tab
  2. 面板关闭按钮太小了
  3. 输入大纲和想法时,尽量支持双击切成编辑模式,离开自动保存,而不是需要点编辑按钮和保存按钮
  4. 需要编辑文本时选中文本的动作容易和拖动动作冲突
  5. ppt里把支持画布这个功能放的那么高,感觉不太合理,需求不是那么强烈啊,因为不是所有人都要展示前端动画效果,看教程以后还要支持 SVG, Processing 和 P5.js 等,主要也是支持动效的。不如直接支持codepen这种在线编辑器,动效在那里边搞,同时还支持其它页面渲染,这样多通用。

一些想法

一直有做个ppt的cms的想法,苦于不知道怎么实现。在周刊看到了这个repo。惊了!!
感觉就是这个repo加上云存储。

实际试用了一下,有一些不成熟的想法:

  • 新添加的想法会出现在最右边,需要手动滑过去;理想的话添加之后自动滑到最右默认编辑状态
  • 变量这个真的眼前一亮,感觉是ppt的theme加强版,改了之后全局都会变。或许可以预先设置一些变量作为theme,能保存最好。
  • 大纲面板每个项目左边的十字形图标有点容易误解为添加按钮。。。也许可以换成表示层级的,比如数字等
  • 缩略图模式也能表示层级就好了(有必要吗?)
  • 缩略图的页码
  • 没有试过不清楚,能在触摸屏上滑动播放吗?
  • 我是感觉换页效果很炫酷,但面对上了年纪的顾客(或者老板)的时候,可能会被觉得花里胡哨。。添加classic换页模式可能比较好
  • 样式似乎有点少。最主要不能改字体

差不多就是这些了。
("pearmini" 是小梨子的意思吗。。?)
总之pearmini加油。
最近正好在学习umi, 我也加油。

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.