Building Impressive Presentations with Impress.js
4/5
()
About this ebook
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.
Read more from Rakhitha Nimesh Ratnayake
WordPress Web Application Development Rating: 5 out of 5 stars5/5Wordpress Web Application Development - Third Edition Rating: 0 out of 5 stars0 ratingsWordPress Web Application Development - Second Edition Rating: 0 out of 5 stars0 ratings
Related to Building Impressive Presentations with Impress.js
Related ebooks
Learning Underscore.js Rating: 0 out of 5 stars0 ratingsjQuery Mobile Web Development Essentials - Third Edition Rating: 0 out of 5 stars0 ratingsMastering MeteorJS Application Development Rating: 4 out of 5 stars4/5Learning Firefox OS Application Development Rating: 0 out of 5 stars0 ratingsjQuery UI 1.7: The User Interface Library for jQuery Rating: 0 out of 5 stars0 ratingsHybrid Mobile Development with Ionic Rating: 0 out of 5 stars0 ratingsInstant PageSpeed Optimization Rating: 0 out of 5 stars0 ratingsMicrosoft .NET Framework 4.5 Quickstart Cookbook Rating: 0 out of 5 stars0 ratingsSignalR – Real-time Application Development - Second Edition Rating: 0 out of 5 stars0 ratingsBeginning DotNetNuke Skinning and Design Rating: 0 out of 5 stars0 ratingsPHP Team Development Rating: 3 out of 5 stars3/5Android Application Development with Maven Rating: 0 out of 5 stars0 ratingsOpenCart Theme and Module Development Rating: 0 out of 5 stars0 ratingsExpress Web Application Development Rating: 3 out of 5 stars3/5Learning Bootstrap Rating: 1 out of 5 stars1/5Python Unlocked Rating: 0 out of 5 stars0 ratingsMeteor Design Patterns Rating: 0 out of 5 stars0 ratingsJavaScript Unleashed: Harnessing the Power of Web Scripting Rating: 0 out of 5 stars0 ratingsiOS in Practice Rating: 0 out of 5 stars0 ratingsLearning Highcharts Rating: 0 out of 5 stars0 ratingsMulti-Tier Application Programming with PHP: Practical Guide for Architects and Programmers Rating: 0 out of 5 stars0 ratingsInstant Highcharts Rating: 0 out of 5 stars0 ratingsPhantomJS Cookbook Rating: 0 out of 5 stars0 ratingshapi.js in Action Rating: 0 out of 5 stars0 ratingsGetting Started with Meteor.js JavaScript Framework - Second Edition Rating: 0 out of 5 stars0 ratingsNW.js Essentials Rating: 0 out of 5 stars0 ratingsMobile Application Development: JavaScript Frameworks Rating: 0 out of 5 stars0 ratingsCoreOS in Action: Running Applications on Container Linux Rating: 0 out of 5 stars0 ratingsSwarm Intelligence: Make better business judgments thanks to artificial intelligence inspired by honeybees Rating: 0 out of 5 stars0 ratingsLearning Python with Raspberry Pi Rating: 0 out of 5 stars0 ratings
Internet & Web For You
The Digital Marketing Handbook: A Step-By-Step Guide to Creating Websites That Sell Rating: 5 out of 5 stars5/5The $1,000,000 Web Designer Guide: A Practical Guide for Wealth and Freedom as an Online Freelancer Rating: 5 out of 5 stars5/5The Logo Brainstorm Book: A Comprehensive Guide for Exploring Design Directions Rating: 4 out of 5 stars4/5SEO For Dummies Rating: 4 out of 5 stars4/5Grokking Algorithms: An illustrated guide for programmers and other curious people Rating: 4 out of 5 stars4/5Cybersecurity For Dummies Rating: 4 out of 5 stars4/5Python QuickStart Guide: The Simplified Beginner's Guide to Python Programming Using Hands-On Projects and Real-World Applications Rating: 0 out of 5 stars0 ratingsCoding For Dummies Rating: 5 out of 5 stars5/5Coding All-in-One For Dummies Rating: 4 out of 5 stars4/5Wireless Hacking 101 Rating: 4 out of 5 stars4/5Six Figure Blogging In 3 Months Rating: 4 out of 5 stars4/5Hacking : The Ultimate Comprehensive Step-By-Step Guide to the Basics of Ethical Hacking Rating: 5 out of 5 stars5/5The Mega Box: The Ultimate Guide to the Best Free Resources on the Internet Rating: 4 out of 5 stars4/5How to Disappear and Live Off the Grid: A CIA Insider's Guide Rating: 0 out of 5 stars0 ratingsSix Figure Blogging Blueprint Rating: 5 out of 5 stars5/5Tube Ritual: Jumpstart Your Journey to 5000 YouTube Subscribers Rating: 0 out of 5 stars0 ratingsGet Rich or Lie Trying: Ambition and Deceit in the New Influencer Economy Rating: 0 out of 5 stars0 ratingsRemote/WebCam Notarization <<Extended>> Commonwealth of Virginia Rating: 0 out of 5 stars0 ratingsThe Beginner's Affiliate Marketing Blueprint Rating: 4 out of 5 stars4/5How To Make Money Blogging: How I Replaced My Day-Job With My Blog and How You Can Start A Blog Today Rating: 4 out of 5 stars4/5Everybody Lies: Big Data, New Data, and What the Internet Can Tell Us About Who We Really Are Rating: 4 out of 5 stars4/5Wordpress for Beginners: The Easy Step-by-Step Guide to Creating a Website with WordPress Rating: 5 out of 5 stars5/5How To Start A Podcast Rating: 4 out of 5 stars4/5
Reviews for Building Impressive Presentations with Impress.js
2 ratings0 reviews
Book preview
Building Impressive Presentations with Impress.js - Rakhitha Nimesh Ratnayake
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 (<duraidfatouhi@yahoo.com>)
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
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.