Create a Slide Show with Slidifier

Slidifier is a browser-based, open-source slide show creator that is quick and very easy to use. Let’s take a look.

Many presenters at conferences these days use browser-based slide shows. This is more prevalent in the open-source community. Browser-based slide presentations have several advantages over application-based presentations. One of the biggest advantages is the viewer (Web browser) that has been omnipresent on every computer for the last decade. With the standardization of HTML and the powerful features of HTML 5, this trend is only going to increase in the coming years. In this article, we will not only familiarise ourselves with the installation and features of Slidifier but also learn how to extend its functionality. After all, that is why we all love open-source software.

An Overview of Slidifier

Slidifier is simple and easy-to-use open-source LAMP-based software developed by Holger Ludvigsen and Espen H Halvorsen. The software allows you to not only create presentations but also host them on a common server for many others to access using a Web browser. What a wiki is to Web authoring, Slidifier is to presentation slides. Wikis greatly simplified the creation of Web pages by abstracting the HTML and CSS syntax, thus making the creation of content on the Web child’s play. Similarly, Slidifier has simplified creating HTML-based presentations. The best part about Slidifier is that you can convert your ‘notes’ into ‘slides’ in no time. You can also create text (ascii) content on your mobile (text pad) and paste it into Slidifier, and your slides are ready!

Installing Slidifier

Since Slidifier is LAMP-based software, do ensure you have a working implementation of LAMP such as XAMPP or the equivalent. Visit Slidifier to download the source code of Slidifier into the directory that your server points to (e.g., C:/xampp/htdocs on MS Windows or /var/www/ on any Linux-based system). That is all you need to do to make Slidifier work. Next, open the browser and point to http://localhost/slidifier/. Just click the ‘Try Slidifier now!’ button to get started. You will be taken to some sample presentation content that gives you an overview of the features of Slidifier.

Features

Slidifier is best suited for quick and informal presentations. This is by far the fastest way to create slides. You only need to type the content in plain text and indicate what you want as the heading and the bullet points.

• There is an option to choose from the predefined themes designed using style sheets, which are equivalent to templates in Microsoft PowerPoint.
• You can choose to host the presentation slides on the server by clicking the ‘Save’ button. This action gives you two URLs that can be used in the future. The first URL is for the admin/author to edit the content at a later point. The second is for the viewers of the presentation.
• Slides can contain source code that is highlighted in a different block. The lines of code should be enclosed between ‘\’ lines as shown in the sample presentation.
• Navigation of slides is done using the mouse or keyboard. A left-click on the mouse advances the slides forward. You can also use the right arrow key to advance slides or the left arrow key to go backwards. The ‘Esc’ key will abort the presentation.
• The time and slide number are positioned on the top left corner and top right corner of each slide.

Syntax and Sample Presentations

Now let us look at the syntax used by creating a new presentation.

• Slide headings and text: You can specify the heading for each slide by prefixing ‘#’ in front of the text that you want as the heading. A single ‘#’ is equivalent to <H1> in HTML. For the next level of H2 and H3 headings, authors can type ‘##’ and ‘###’, respectively.
  • # Heading 1 (level 1)
  • ## Heading 2 (level 2)
  • ### Heading 3 (level 3)
• Slide separation: Slides are created by typing text in the large text area of the screen shown in Figure 3. Slides are separated by ‘—’ dashes.
• Bullets: Bullets are most frequently used in a slide. You just need to prefix each sentence in the slide with a ‘-’. Nested bullets can be achieved by adding ‘-’ in front of the bullet.
  • - Bullet 1
  • - Bullet 2
  • - Bullet 3
• Including pictures: Pictures can be added to slides by writing HTML one-liners into the slide text. Copy the images you would like to include in the presentation in the img directory of the Slidifier code. To include the image (e.g., taj.png) insert the text given below:
  • <img src="img/taj.png">
  • You can also adjust the width and height by using the line below:
  • <img src="img/taj.png" height=40 width=30>

Code Organisation and Implementation Details

Slidifier is the ideal example to showcase the power of JavaScript. Ninety-two percent of its functionality is realised using JavaScript and the remaining through a combination of HTML, PHP, and MySQL. The database is only used when the author chooses to archive the presentation for future retrieval or viewing. The functionality of text parsing, conversion to HTML, display in slide format, time and slide counts, etc., are all implemented in JavaScript. CSS is used to implement new templates or themes to achieve different looks for the slides.

• slidifier.html is the parent file in which all js files are included and the form to input text is displayed. This file also contains the sample slide content for you to try.

Directory Structure

Given below are the key directories that require to be explored to extend the functionality of Slidifier.

• css – stores the themes black, white, and colourful
• js – the directory that contains most of the functionality. Includes files to parse the slides (slideparser.js), prepare slide layouts (slidifier.js), load themes, capture keystrokes (ui.js), etc.

Creating More Templates Using CSS

It’s easy to create new themes either based on existing ones or by creating entirely new CSS files. With CSS3, great themes can be generated using features like gradient, etc.

Creating Pecha Kucha Style Presentations

An effective presentation style that evolved in Japan and gained popularity across the world is the ‘Pecha Kucha’ style. This methodology ensures that the slides have a lot of graphic content and little text. The key aspect that differentiates this style is the timing of each slide. The presenters have 20 slides in all and each slide is shown for 20 seconds. That keeps the presentation well-paced and to the point. We can extend Slidifier’s functionality to include a timer that changes each slide after exactly 20 seconds. This can be achieved by introducing the code given below in the slidifier.js file. This line should be inserted just after the ‘refresh()’ function is called.

• setInterval("slideForward()", 1000*20);
  • Forward slide after 20 seconds

Now, isn’t that simple?

Other Web-Based Presentation Software

There are many other Web-based (HTML) presentation software that are more sophisticated and have a rich UI. But they need the author to have a good knowledge of HTML, CSS, and programming. Some software also have a sharp learning curve before one can understand the functions provided. And the ease of carrying the presentation is sacrificed as the author needs to carry a set of HTML, JS, and CSS files.

References
[1] Slidifier Home – http://slidifier.com/
[2] Web based slideshow software – http://en.wikipedia.org/wiki/
Web-based_slideshow
[3] Presentation styles and methodologies
http://en.wikipedia.org/wiki/Pecha_Kucha
http://en.wikipedia.org/wiki/Ignite_(event)