Keypoint: PhoneGap-Based HTML Slide Decks

I’ve been using HTML slides instead of Keynote or Powerpoint for a while now. Since I’m doing a lot of PhoneGap/Cordova presentations, it also occurred to me some time ago that I could go one step further and package my HTML slide decks as PhoneGap applications. That way, I can demonstrate the PhoneGap APIs within my presentation, instead of constantly switching back and forth between my presentation and a demo app: My slides are the demo app.

To enable this, I built a simple presentation micro-framework that I called Keypoint. Keypoint uses Matteo Spinelli’s SwipeView as the swipable container. It is resource-conscious and fast, with only three slides in the DOM at any given time.

Because it is a Web application, you can also run your presentation in a browser on your laptop and navigate with the arrow keys. You’ll just not be able to use the PhoneGap specific capabilities.

A number of people have asked me to share the framework and my presentations. So here is a first one: The PhoneGap + Backbone.js presentation that I delivered last week at HTML 5 Dev Conf. You can view the presentation here. You can also get the code on GitHub and run it on your mobile device as a PhoneGap application to enjoy the full experience (I present on an iPad).

Keypoint also uses Topcoat as the UI framework.

Keypoint is not meant to compete with other HTML presentation frameworks out there. I built it as a custom “mobile-first” solution for some specific requirements.

3 Responses to Keypoint: PhoneGap-Based HTML Slide Decks

  1. von December 17, 2013 at 2:48 pm #

    wow. This is cool! thanks for the tutorial

  2. patchwork kilim March 24, 2014 at 5:15 am #

    This is cool! thanks for the tutorial

Trackbacks/Pingbacks

  1. Top 10 Performance Techniques for PhoneGap and Hybrid Apps — Slides Available | Christophe Coenraets - October 30, 2013

    [...] presentation was built as a PhoneGap application with the Keypoint HTML presentation framework I blogged about yesterday. Because it is a Web application, you can view the presentation here. You can also [...]

Leave a Reply