Building Impressive Presentations with impress.js - Rakhitha Nimesh Ratnayake - E-Book

Building Impressive Presentations with impress.js E-Book

Rakhitha Nimesh Ratnayake

0,0
23,99 €

-100%
Sammeln Sie Punkte in unserem Gutscheinprogramm und kaufen Sie E-Books und Hörbücher mit bis zu 100% Rabatt.

Mehr erfahren.
Beschreibung

Everyone has had to present during their lifetime. We've all spent agonizing hours trying to make those PowerPoint presentations engaging. Well now there is a tool that will make those presentations look like child's play.

Impress.js is a powerful library that eases the task of creating presentations with smooth animations without depending on a software tool. You are no longer limited to desktop tools as these presentations run on any supported browser anywhere on the Internet.

"Building Impressive Presentations with impress.js" is a quick guide to creating professional presentations using the best aspects of CSS3. It will also guide you through several practical examples which go beyond the conventional slide-based presentations, covering each aspect of the Impress library.

From simple presentations to your own personal website this handy practical guide will ensure you get the most out of Impress.JS as quickly as you can. Starting with a simple slide-based presentation we move quickly on adding in sliders, galleries and portfolios to utilize this amazing tool. 3D transitions, rotations, scaling, and transforms are also covered to give your presentations that something extra. The final step is bringing all this together to create a personal website that is viewable on all impress supported browsers.

"Building Impressive Presentations with impress.js" gives you the chance to stand out from the competition and engage with audiences in a way you never have before.

Das E-Book können Sie in Legimi-Apps oder einer beliebigen App lesen, die das folgende Format unterstützen:

EPUB
MOBI

Seitenzahl: 131

Veröffentlichungsjahr: 2013

Bewertungen
0,0
0
0
0
0
0
Mehr Informationen
Mehr Informationen
Legimi prüft nicht, ob Rezensionen von Nutzern stammen, die den betreffenden Titel tatsächlich gekauft oder gelesen/gehört haben. Wir entfernen aber gefälschte Rezensionen.



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 (<[email protected]>)

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 <[email protected]>.

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 <[email protected]> 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.

http://PacktLib.PacktPub.com

Do you need instant solutions to your IT questions? PacktLib is Packt's online digital book library. Here, you can access, read and search across Packt's entire library of books. 

Why Subscribe?

Fully searchable across every book published by PacktCopy and paste, print and bookmark contentOn demand and accessible via web browser

Free Access for Packt account holders

If you have an account with Packt at www.PacktPub.com, you can use this to access PacktLib today and view nine entirely free books. Simply use your login credentials for immediate access.

Preface

Creating presentations and impressing the audience is an important task for people who work as software professionals, marketers, public speakers, or anyone who is familiar with computer-related work. Online presentation creation applications are gaining much more popularity over conventional desktop-based software applications in the recent years. impress.js is a powerful library that eases the task of creating presentations with smooth animations without depending on a software tool. You are no longer limited to desktop tools as these presentations run on any supported browser anywhere on the Internet.

This book consists of several practical real-world examples which go beyond the conventional slide-based presentations covering each aspect of the impress library. A wide range of applications such as content sliders, image galleries, awesome presentations, and complete websites are created throughout the book explaining the techniques in a way that even a beginner can understand.

Understanding how different features work is something we need to know as developers or designers in order to tweak the core library and create our own customizations. Important sections of the impress.js core code are explained in detail with practical examples to make it easier for you to implement new features and enhance impress.js.

By the time you are done with this book, you'll be able to create a wide range of components for websites using impress.js as well as stunning visualizations to impress your audience.

What this book covers

Chapter 1, Getting Started with Impressive Presentations, provides an introduction to presentations with impress.js and its importance. We also create a basic impress presentation with detailed code explanations.

Chapter 2, Exploring Impress Visualization Effects, discusses the in-depth usage of impress effects such as positioning, scaling, and rotating using practical real-world examples. impress.js core code is also discussed in detail to understand the implementation of CSS effects.

Chapter 3, Diving into the Core of impress.js, is focused on discussing impress.js configurations and the core code required for simplifying customizations to existing features. Usage of impress API, step events, and keyboard configurations is explained using advanced presentations.

Chapter 4, Presenting on Different Viewports, explores the use of impress presentation fullscreen, inside a container and mobile devices. Fully functional content slider is created to explain the wide range of uses for impress presentations. Mobile device support and the handling of presentations on different devices is explained in detail throughout this chapter.

Chapter 5, Creating Personal Websites, acts as a complete guide to creating personal websites using impress.js. A single page website is developed with commonly-used techniques in web design.

Chapter 6, Troubleshooting, covers the compatibility of impress presentations and the necessary information to fix bugs and get support for issues in impress.js. Limitations and possible future enhancements are explained to motivate you to implement your own features for impress.js.

Appendix, Impress Tools and Resources, guides you through the available impress.js presentation automation tools and some awesome presentations available online.

What you need for this book

This book assumes that the readers are familiar with the basics of HTML, CSS, and JavaScript. Also, you will need the following things in order to work with this book:

An Internet connection (to load external libraries and fonts in the demo files)Code editorimpress.js compatible browser

Who this book is for

This book is for anyone who is interested in impressing their audience with stunning online presentations without depending on software applications. The main focus will be for the web designers and developers who are familiar with technical stuff. impress.js is a powerful presentation creation library using CSS transforms, so readers are expected to have the basic HTML, CSS, and JavaScript knowledge for creating impressive presentations.

Conventions

In this book, you will find a number of styles of text that distinguish between different kinds of information. Here are some examples of these styles, and an explanation of their meaning.

Code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles are shown as follows: "We can use the data-rotate-x attribute to rotate elements around the x axis."

A block of code is set as follows:

$(document).ready(function(){ document.addEventListener ("impress:stepenter", function (event) { // Code for step enter }, false); document.addEventListener ("impress:stepleave", function (event) { // Code for step leave }, false); });

When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:

$(document).ready(function(){ document.addEventListener ("impress:stepenter", function (event) { // Code for step enter }, false); document.addEventListener ("impress:stepleave", function (event) { // Code for step leave }, false); });

New terms and important words are shown in bold. Words that you see on the screen, in menus or dialog boxes for example, appear in the text like this: "We can go to the overview of the presentation using the Overview button".

Note

Warnings or important notes appear in a box like this.

Tip

Tips and tricks appear like this.

Reader feedback

Feedback from our readers is always welcome. Let us know what you think about this book—what you liked or may have disliked. Reader feedback is important for us to develop titles that you really get the most out of.

To send us general feedback, simply send an e-mail to <[email protected]>, and mention the book title via the subject of your message.

If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide on www.packtpub.com/authors.

Customer support

Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.

Downloading the example code

You can download the example code files for all Packt books you have purchased from your account at http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.

Errata

Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you find a mistake in one of our books—maybe a mistake in the text or the code—we would be grateful if you would report this to us. By doing so, you can save other readers from frustration and help us improve subsequent versions of this book. If you find any errata, please report them by visiting http://www.packtpub.com/submit-errata, selecting your book, clicking on the errata submission form link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata will be uploaded on our website, or added to any list of existing errata, under the Errata section of that title. Any existing errata can be viewed by selecting your title from http://www.packtpub.com/support.

Piracy