February 17th, 2012Top StoryHow to Create a Compelling Browser-Based Presentation in Minutes with Deck.jsBy Adam Dachis
As always, showing trumps telling, so if you want an idea of how a deck.js presentation looks, take a peak at this quick demo I put together in a few minutes. Not bad, right? Creating a presentation with deck.js is very simple. Although it may seem daunting at first if you don't know a ton of HTML or CSS, there's still plenty you can do. Here are the basic steps:
If you want to do more, you can write a theme yourself using HTML and CSS (learn the basics here) and/or write your own extensions using JavaScript (learn the basics here). In this post we're going to show you how to make a a basic presentation using the steps outlined above. You should be able to follow along if you only know basic HTML and have no knowledge of CSS. When you're done, you'll have a presentation that you can post online for others to view. Alternatively, you can keep it on a flash drive and run it on any computer with a modern web browser. It makes your presentations very portable so you can give them from anywhere and know you have them in a format that doesn't require any special software. If you're interested, read on. What You'll NeedBefore you can get started with this guide, you're going to need a couple of things:
Step One: Create Your HTML Slides
<section class="slide"> <h2>A List of Things I Like</h2> <ol> <li> <h3>Cupcakes</h3> <p>They're tasty, but don't eat too many or you'll get fat!</p> </li> <li> <h3>Technology</h3> <p>It's tasty, but don't eat too much technology...or any technology...because it's not food.</p> </li> <li> <h3>Slankets</h3> <p>They catch all your cupcake and technology crumbs.</p> </li> </ol> </section> A slide that just contains an image can look as simple as this: <section class="slide"> <h2>I Like Din Tai Fung</h2> <img src="http://toasterdog.com/files/DTF-Shirt.jpg" width="400" height="414" /> </section> Basically, slides are simply HTML sections that are assigned the "slide" class. All you have to do is write standard HTML code (as shown in the above examples) to make them. From there, you can pretty much put in most anything you want. Video embeds and block quotes work, too. You can even wrap text around images by adding the relevant CSS styling, like so: <img src="http://toasterdog.com/files/FacePunch.jpg" width="292" height="334" style="float: left; padding: 0 16px 8px 0;" /> Those are some basic slides, and and we put together a demo so you can see them all in action (including a video slide). You'll also find this sample in the starter kit you downloaded at the beginning of this guide. When you create your slides, just follow the HTML examples you see above or in that document. When you've created your slides, move on to the next step to learn how to turn them into an interactive presentation. Step Two: Turn Your Slides Into a Functional Presentation
Step Three: Select a Theme and Transition StyleAlthough you now have a fully functional presentation, you may want to change themes and the type of transitions your presentation uses. To do this, you need to look for these lines of code at the top of your document: <!— Theme CSS files —> <link rel="stylesheet" href="themes/style/swiss.css"> <link rel="stylesheet" href="themes/transition/fade.css">
Step Four: Add Extensions to Your Deck
<!— Core and extension CSS files —> <link rel="stylesheet" href="core/deck.core.css"> <link rel="stylesheet" href="extensions/goto/deck.goto.css"> <link rel="stylesheet" href="extensions/menu/deck.menu.css"> <link rel="stylesheet" href="extensions/navigation/deck.navigation.css"> <link rel="stylesheet" href="extensions/status/deck.status.css"> <link rel="stylesheet" href="extensions/hash/deck.hash.css"> The JavaScript files are embedded at the bottom of the document and look like this: <!— Deck Core and extensions —> <script src="core/deck.core.js"></script> <script src="extensions/hash/deck.hash.js"></script> <script src="extensions/menu/deck.menu.js"></script> <script src="extensions/goto/deck.goto.js"></script> <script src="extensions/status/deck.status.js"></script> <script src="extensions/navigation/deck.navigation.js"></script> If you want to embed another extension, you simply need to go into the extensions directory, the directory with the extensions name, and embed the CSS and JavaScript files as shown above. Once you have your extensions embedded, you have to actually use them in your deck in order to get any functionality. Let's look at the deck.goto extension as an example. It lets you press the G key and type a number to go to the corresponding slide. This is useful if you want to skip around in the presentation. If you want to use it, you not only have to embed the JavaScript and CSS files (as mentioned above) but also add this code after all the slides in your HTML deck: <!— deck.goto snippet —> <form action="." method="get" class="goto-form"> <label for="goto-slide">Go to slide:</label> <input type="text" name="slidenum" id="goto-slide" list="goto-datalist"> <datalist id="goto-datalist"></datalist> <input type="submit" value="Go"> </form> Most extensions can be enabled with a little code snippet like this. To learn how to use the other extensions, read about how they all work in the Deck.js extension documentation. If you're JavaScript-savvy, you can even make your own extension to add even more functionality. That's all there is to it. While deck.js can seem a little intimidating at first, once you get used to the structure you'll be putting together presentations in no time. All you need are simple HTML skills to build the structure, and if you use the empty_deck.html file in our starter kit you won't need to learn how to write out the entire HTML file in order to create your first deck. Once you get the hang of things you can start fiddling around and customizing your presentations so you can make and impressive, unique deck of slides that can be viewed in just about any web browser. |
|
No matter how carefully you plan your goals they will never be more that pipe dreams unless you pursue them with gusto. --- W. Clement Stone
Friday, February 17, 2012
How to Create a Compelling Browser-Based Presentation in Minutes with Deck.js
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment