A Browser Based Open Sourse Presentation tool

What is the software package you would use if you want to create a presentation.The traditional answer is Microsoft Office Powerpoint or LibreOffice Impress. Most of the general public (In Sri Lanka) still even do not know about Prezi.com. Using Prezi.com you can create awesome presentations. Since my topic is not about prezi in this article,You can visit www.prezi.com and learn more about prezi. 

The idea behind the prezi presentations is innovative. It has changed the traditional image of presentation, and has made  every step of the presentation special and interesting. But you have to pay for their service.

There is no program in the world that would make a developer happy, unless it is open source. There are plenty of open source  presentation tools developed by the community which are very similar to Prezi. some of them have more powerful tools than Prezi. But they do not provide a fancy user interface nor user friendly unless the user is a developer. But gain ultimate control  of all of your presentation. "reveal.js" and "impress.js" are   two examples for these kind of open source tools.

Impress.js has been developed by Bartek Szopka. You can fork his impress.js repository from github. From the demo you would see how smoothly, impress.js handles the transformations. Bartek has mentioned every drop of information that you need to know in the source code. If you read html, javascript and css files you will understand most of them. How ever I am going to summarize everything. I will not explain the code in detail but the abstract method of making presentations. Please note that I am not an expert in making impress.js presentations I am only writing this to share my experience with you.

Before you make your first presentation you have to break down the ideas in to steps. Yes! exactly in the way how you break down your steps to make slides in Libre office . The slide like objects in impress.js are called "steps". You can place these steps anywhere in the canvas 3d space.Every step should be marked in a separate HTML division. You should assign the class "step" to corresponding <div> element of each step. To position the each step in the canvas we use "data-x", "data-y" and "data-z"   parameters. Using "data-rotate-x", "data-rotate-y" and "data-rotate-z" we can rotate the text appearance in the canvas around x,y and z axes respectively. One other thing, you should use "data-scale" parameter to specify the scale of the whole step element compared to another one. A step will look like this

<div id = "test-div" class = "step" data-x = "1000" data-y = "2000" data-z = "0" data-rotate -x = "0" data-rotate-y = "0" data-rotate-z = "0" data-scale = "3">

      <h1>Hello Impress</h1>

</div>

As always it is very handy if you use a separate css file to style your presentation. Try this out and wish you good luck.