Building Impressive Presentations with Impress.js

By Rakhitha Nimesh Ratnayake

This book gives you exactly what you need, exactly when you need it. Using easy-to-follow practical examples, this guide takes you from simple presentations to complete websites in no time. If you want to engage your audience on a level not previously possible on software such as PowerPoint or Prezi, then this book is for you. With basic knowledge of HTML, CSS, and JavaScript you can start making presentations that truly Impress.

• Language: English
• Publisher: Packt Publishing
• Release date: Mar 26, 2013
• ISBN: 9781849696494

Rakhitha Nimesh Ratnayake

Rakhitha Nimesh Ratnayake is a freelance web developer, writer, and an open source enthusiast. He also provides technical consultation on large scale web applications to one of the leading software development firms in SriLanka. Rakhitha is the creator of www.innovativephp.com, where he writes tutorials on the latest web development and design technologies. He is also a regular contributor to a number of popular websites such as 1stwebdesigner, the Tuts+ network, and the SitePoint network. Building Impressive Presentations with impress.js was his first book, also published by Packt Publishing. In his spare time, he likes to watch cricket and spend time with his family. Make sure you visit him online at www.innovativephp.com and follow him on Google+ at http://goo.gl/UiEf5B.

Book preview

Table of Contents

Building Impressive Presentations with impress.js

Credits

About the Author

About the Reviewers

www.PacktPub.com

Support files, eBooks, discount offers and more

Free Access for Packt account holders

Preface

What this book covers

What you need for this book

Who this book is for

Conventions

Reader feedback

Customer support

Downloading the example code

Errata

Piracy

Questions

1. Getting Started with Impressive Presentations

What is impress.js?

Built-in features

Beyond presentations with impress.js

Why is it important?

Presentation outline

Using bullet points

Animations

Using themes

Downloading and configuring impress.js

Creating your first presentation

Designing the presentation

Creating the presentation container

Creating your first step

Applying styles on steps

Creating Step 1

Creating Step 2

Limiting the visibility of steps

Presentation overview

Summary

2. Exploring Impress Visualization Effects

Introduction to CSS transformations

Positioning effects

Positioning on the x axis

Positioning on the y axis

Positioning on the z axis

Rotating effects

Rotation around the x axis

Rotation around the y axis

Rotation around the z axis

Rotations in practice

Scaling effects

The importance of positioning in scaling

Scaling in practice

Planning the design

Data perspective

impress.js under the hood

Summary

3. Diving into the Core of impress.js

impress.js configuration

Default configurations

Customizing configurations

Configuring the width and height

Configuring the minScale and maxScale

Configuring the perspective

Configuring the transition duration

Looking at configurations inside the core

Understanding the impress API functions

Inside the next function

Inside the prev function

Inside the goto function

Automating presentations

Creating custom transition timing

impress.js step events

How to use the step class

Working with keyboard configurations

Default keyboard configurations

Inside the impress core

Assigning custom keys for custom events

Adding new keys for new events

Handling the step click event

Summary

4. Presenting on Different Viewports

Fullscreen presentations

Using impress.js inside a container

Developing a content slider

Planning the design

Designing slides

Wrapping the presentation inside a container

Playing the slider automatically

Creating navigation controls

Creating the play/pause features

Adding slide numbers

Highlighting the active slide

impress.js presentations on mobile devices

Issues in designing for mobile devices

Scenario 1

Scenario 2

Scenario 3

Best design practices for mobiles devices

Summary

5. Creating Personal Websites

Planning the website structure

Designing the header

Creating the presentation wrapper

Creating pages

Designing the home page

Designing the portfolio page

Portfolio gallery

Portfolio single

Designing the timeline page

Defining the timeline navigation

Designing the services page

Handling the navigation menu

Creating the navigation hint

Summary

6. Troubleshooting

Browser compatibility

Handling unsupported browsers

Limitations and new features

Positioning steps relative to other steps

Defining the previous and next steps

Transition duration for individual steps

Adding and removing navigation keys

Creating substeps

Troubleshooting and support

Summary

A. Impress Tools and Resources

Impress presentation tools

Strut

Impressionist

Impressive presentations

impress.js demos from the book

Index

Building Impressive Presentations with impress.js

---

Building Impressive Presentations with impress.js

Copyright © 2013 Packt Publishing

All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.

Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book.

Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.

First published: March 2013

Production Reference: 1190313

Published by Packt Publishing Ltd.

Livery Place

35 Livery Street

Birmingham B3 2PB, UK.

ISBN 978-1-84969-648-7

www.packtpub.com

Cover Image by Duraid Fatouhi (<[e-mail]>)

Credits

Author

Rakhitha Nimesh Ratnayake

Reviewers

Chetankumar Akarte

Christian Ziebarth

Acquisition Editor

Martin Bell

Commissioning Editor

Maria D'souza

Technical Editor

Nitee Shetty

Project Coordinator

Esha Thakker

Proofreader

Maria Gould

Indexer

Tejal Soni

Graphics

Aditi Gajjar

Production Coordinator

Pooja Chiplunkar

Cover Work

Pooja Chiplunkar

About the Author

Rakhitha Nimesh Ratnayake is a software engineer working in a leading software development firm in Sri Lanka. His work there includes planning and implementing projects in a wide range of technologies based on PHP frameworks.

He is the creator of www.innovativephp.com, where he writes tutorials on the latest web development and design technologies. He is also a regular contributor to a number of popular websites such as 1stwebdesigner, the tuts+ network, and the Sitepoint network.

He likes to watch cricket and stay with the family when he isn't working on coding or writing. Make sure to visit him online at www.innovativephp.com and follow him on Twitter at twitter.com/innovativephp.

I would like to thank my parents and my brother for providing great support throughout the book. This was my first book and I really appreciate the encouragement they gave in tough periods while writing the book. Special thanks to Bartek Szopka, who is the creator of impress.js, for helping me in the early stages of this book.

I would also like to thank Packt team members, Shrutika Kalbag for finding my article on 1stwebdesigner and providing me with the idea about this book, Maria D'souza for the support throughout the book and being the editor, and Esha Thakker for being the project coordinator of the book.

Finally, I would like to thank you for reading my book and being one of the most important people who helped me to make this book a success. Thank you.

About the Reviewers

Chetankumar Akarte is an Electronics Engineer from Nagpur University located in central India. He has more than 6 years of experience in the design, development, and deployment of Web, Windows, and mobile-based applications with expertise in PHP, .NET, JavaScript, Java, Android, and more.

He likes to contribute on the newsgroups and forums. He has written articles for Electronics For You, DeveloperIQ, and Flash & Flex Developer's Magazine. In his spare time, he likes to maintain his technical blog http://www.tipsntracks.com to get in touch with the developers community. He has been the technical reviewer for three books published by Packt Publishing. He has released some Marathi and Hindi e-book applications in the Android market (https://play.google.com/store/apps/developer?id=Sahitya+Chintan).

He lives in the hilly Kharghar area of Navi Mumbai with his son Kaivalya and wife Shraddha. You can visit his websites http://www.SahityaChintan.com and http://www.tipsntracks.com, or get in touch with him at .

I would like to thank my wife Shraddha and my parents for their consistent support and encouragement and my lovely son Kaivalya who allowed me to use his playtime with me to dedicate towards this book. I would also like to thank Packt Publishing for giving me the opportunity to do something useful and especially the Project Coordinator, Esha Thakker, for all the valuable support.

Christian Ziebarth began working on the Web in 1996 when he was informed of GeoCities. He began learning HTML in 1998, CSS in 1999, and was doing things in CSS in Netscape 4 of which only a few people knew could be done at the time. Since 2000 he has worked on many professional web projects of varying sizes and continues to explore new frontiers on the Web. He lives in California and has also lived in Ireland and Hawaii.

www.PacktPub.com

Support files, eBooks, discount offers and more

You might want to visit www.PacktPub.com for support files and downloads related to your book.

Did you know that Packt offers eBook versions of every book published, with PDF and ePub files available? You can upgrade to the eBook version at www.PacktPub.com and as a print book customer, you are entitled to a discount on the eBook copy. Get in touch with us at for more details.

At www.PacktPub.com, you can also read a collection of free technical articles, sign up for a range of free newsletters and receive exclusive discounts and offers on Packt books and eBooks.