IPEP 9: Slideshow from the notebook

IPEP 9 - Slideshow from the notebook.

Author

Avila Damián <damianavila@gmail.com>

Status

Draft

Created

2012-12-14

Updated

2012-12-18

Code

Live_slideshow - Static_slideshow

Discussion

Issue_2680

Example

Static_slideshow

Introduction

The aim of this IPEP is to discuss about some features of the implemented live slideshow_mode by @Carreau and the new static one pull requested by @damianavila as a part of nbconvert utilities.

As @ellisonbg suggested, there were a lot of places were the discussion was active, so I am writing this IPEP to collect all this ideas and centralized the place to think about this interesting feature.

Up to now, we have two implementation being developed to generate slideshow views from a notebook:

Live slideshow

The first one has been developed by @Carreau, and I called live slideshow, because is an active notebook with a different template to provide the feel like a slideshow. To delimit each slide, the last implementation use metadata attributes for each cell.

There are several advantages and constraints about this live mode:

Pros:

• You have a slideshow with editing capabilities and this interactivity can be useful presenting some ideas.
• Because you use metadata delimiters, you do not have to rewrite the notebook to be slideshow-friendly.
• You can put all the information you want in the slides because you have the possibility to get this content with a lateral bar as a normal webpage.

Cons:

• The live slideshow is a notebook currently communicating with one IPython server, so you need IPython to present it. This can be awkward when you want to share your slideshow with someone else.
• You do not have a easy way to get a pdf view from the slideshow.
• You get a notebook style in you slides that can be great for some audience but boring for others (and all of you know that you have to get the people awake... he he).

Static slideshow

The second one has been developed by @damianavila (hey, I hate talking in third person of myself... he he), and I called static slideshow, because this is not a notebook, it is just html + css + js parsing the notebook contents and representing them in a nice way. The last implementation is also using metadata attributes to delimit the slides. This implementation is currently a PR for nbconvert. You can see an example slideshow from a notebook here

Pros:

• This is a static presentation, so you do not need IPython running to use it.
• Because you use metadata delimiters, you do not have to rewrite the notebook to be slideshow-friendly.

* You can upload as a webpage to a free host, such as github pages, dropbox, even it could be part of nbviewer. to render slideshow from uploaded ipy notebooks. * You get all the slyling (very nice) and power (lot of plugins) of reveal.js library. * You can also get a pdf from the slides to share and publish.

Cons:

• You do not have editing in live, maybe necessary for some audience.
• You can not put all you want in one slide, you have a limited space to put content. If you want to put more content, you have to add another slide.

Design and Rational

As you can see, with @Carreau and @ellisonbg we have discussed and finally proposed us to use the same type of delimiter for both kind of slideshows. We agreed to use metadata delimiters. In this way, we could create a notebook of interest (as usual), and only choosing the metadata delimiters for each cell, through a simple UI, and show it as a live slideshow or nbconverted it to a static slideshow without any additional changes.

Metadata structure

As those are metadata all attributes are optional and mutually exclusive. The implementation relying on it should check their existance.

metadata :{
    slideshow :{
        slide_type: header_slide or
        slide_type: slide or
        slide_type: fragment or
        slide_type: skip
    }
}

if (metadata.slideshow == undefined){metadata.slideshow = {}}

The Proposed UI to change those value is a dropdown menu representing the state of current metadata. You have 5 options "-", "Header slide", "Slide", "Fragment", "Skip". All these options will be explained in the next section (Structure behind...). Of course the UI can be change independently from the metadata.

Structure behind the static slideshow

This proposed structure is in accordance with reveal.js structure to easily render as html slideshow. All the cells, whatever their contents can be metadata-applied.

• Header slide is the fundamental unit of content: you have to use it on a cell that begins new units of content. You can add new content to this slide with "-" cells, Fragment cells or Skip cells, labeling accordingly. Also, this kind of cell must have the first one in a group of nested slides (see below).
• Slide add a slide to a pre-existent cell or group of cells that, logically, belong together (nested slides). This option have to be applied to all the cells of the group except the first one which must have Header slide applied. In reveal.js, these are vertically oriented groups of slides.

* Fragment are used to highlight individual elements on a Header slide or on a*Slide. Every element with theFragment* will be stepped through before moving on to the next slide. You can applied Fragment to any cell to highlight it. Skip can be applied to any cell to skip it from the slideshow. - is just do nothing to this cell.

In the next graph (thanks @Carreau) you can see a representation of these different kind of cells.

To get this structure, cells marked as:

• 1, 4, 10, 13 have to be Header slide
• 6, 8, 16a, 19 have to be Slide
• 2, 3, 5, 7, 9, 11, 12, 14, 15, 20 have to be "-"
• 17b, 18c have to be Fragment
• Additionally, if you want to skip any of these cells, they have to be Skip

Ok, I have opened a issue to follow the discussion here I hope you join us!

Damián.

Note:

For more detailed information, can see relevant links about the discussion in several issues listed below:

Main references

* In IPython main repository: https://github.com/ipython/ipython/pull/2127 # First implementation of live slideshow mode to demo js toolbar by @Carreau https://github.com/ipython/ipython/pull/2193 # Brainstorming for live slideshow extension and implementation by @Carreau https://github.com/ipython/ipython/pull/2333 # Discussion about user interface for metadata and implementation by @Carreau https://github.com/ipython/ipython/issues/2680 # Current discussion about this IPEP and structure and names for the slideshow https://github.com/ipython/ipython/pull/2687 # MetaUI slideshow discussion

* In nbconvert: https://github.com/ipython/nbconvert/pull/63 # (Deprecated and closed) New reveal option in nbconvert to get a static html-based slideshow powered by reveal.js. Implementation by @damianavila.

https://github.com/ipython/nbconvert/pull/69 # Improved reveal* option in nbconvert to get a static html-based slideshow powered by reveal.js.

• Minor references

https://github.com/ipython/ipython/issues/977 https://github.com/ipython/ipython/pull/2199 https://github.com/ipython/ipython/pull/2518 https://github.com/ipython/ipython/pull/2549