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 the application-based presentations. One of the biggest advantages is the viewer (Web browser) that has been omnipresent in every computer since the last decade. With the standardisation of HTML and the powerful features of HTML 5, this trend is going to only 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 childs 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 in your mobile (text pad) and paste it into Slidifier, and your slides are ready!
Since Slidifier is LAMP-based software, do ensure you have a working implementation of LAMP such as XAMPP or the equivalent. Visit http://slidifier.com/ 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.
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 Template 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 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 is 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.
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:
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.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.
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 key strokes (ui.js), etc.
Creating more templates using CSS
Its 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 Slidifiers 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.
// Forward slide after 20 seconds
Now, isnt 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.
 Slidifier Home – http://slidifier.com/
 Web based slideshow software – http://en.wikipedia.org/wiki/
 Presentation styles and methodologies