Following is the article “Lets Present” that I wrote for Linux for You , this article is now in CC by SA license.
“Presentation” : The word which whenever comes to our mind, the very next thought that comes after this is that “Oh, hell again a odp or ppt” . All of us are preparing presentation when we are in school, we used to create presentation for assignments and summer project, when we came in college, we prepared presentation for projects, assignments, arranging fests funding through sponsors and off-course for impressing companies during the placement, after that start the client presentations, project status presentations etc. Although the content of presentation always changes but the way you showcase your presentation never , it almost always remain PPT or ODP . But there are many interesting ways you can present your presentation except those. In this article we will be discussing about the using impress.js (http://bartaz.github.com/
impress.js is a javascript library created by developer Bartek Szopka, which takes the power of CSS3 transforms and transition and gives you a rock solid platform over which you can built impressive presentations. The javascript library is licensed under the MIT License. The project can be forked from the project page that is : https://github.com/bartaz/
Using impress.js for creating presentations is quite straight forward. In the next few steps you will see how to create very basic presentation using this library.
-
First of all you need to download the impress.js library from the github.For this first go to the https://raw.github.com/bartaz/
impress.js/master/js/impress. and then save it a folder.js -
Now, create the html page, which will contain your slides. Also include the impress.js file in the html page.For this use the following code :
——Code——
<!doctype html>
<html>
<head>
<title>my first presentation using impress.js</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>
</head>
<body>
<script type=”text/javascript” src=”impress.js”></script>
</body>
</html>
——Code——
Note : The javascript library impress.js must be included just before the closing body tag.
-
The source in the script tag is the place where you have downloaded the impress.js library in the first step. If it is the same directory where your html page is located then src=”impress.js” is fine, else made the adjustment based on the location where you have saved the impress.js library.
-
Now, inside the body tag, create a division with id “impress” which will contain all the slides.
-
Now, the body tag will look something like this :
——Code——
<body>
<div id=”impress”>
</div>
</body>
——-Code——
-
Now, inside that impress division, you can have multiple slide, each slide inside the separate division with class step slide. After this you body tag will contain following code.
——Code——
<body>
<div id=”impress”>
<div class=”step slide” >
This is my first slide.
</div>
<div class=”step slide” data-x=”500″ data-y=”0″>
This is my second slide.
</div>
</div>
</body>
——Code——
-
Yes, you are down, open the html page in Google Chrome or Safari (or Firefox 10 or IE10), any see the magic.Use the arrow key to move back and forth.
If you want to check inform user if his/her browser does not support impress.js, then you can create a division with class=”no-support-message” whose content will be shown, if users browser does not support the impress.js library. You can also play around with each and every slides orientation (when slide is not active) by changing any of the following properties of the slides ( i.e. division with class “step slide” , inside the division with id “impress” ) : (taken from the http://www.cubewebsites.com tutorial )
1. data-y = the y co-ordinate of the slide
2. data-x = the x co-ordinate of the slide
3. data-z = the z co-ordinate of the slide
data-scale = scales your slide by a factor of this value. A data-scale of 5 would be 5 times the original size of your slide
4. data-rotate = rotates your slide by the specified number of degrees
5. data-rotate-x = This is the number of degrees it should be rotated about the x-axis in 3D slides.
6. data-rotate-y = This is the number of degrees it should be rotated about the y-axis in 3D slide
7. data-rotate-z = This is the number of degrees it should be rotated about the z-axis in 3D slide
Some cool presentation as based on impress.js as claimed by https://github.com/bartaz/
http://bartaz.github.com/
http://johnpolacek.github.com/
http://extra.12412.org/
http://wakame.jp/wiki/
