Sick of endless PowerPoint slides? If you want to take your presentation to the next level, and you know basic HTML, you can hack together a presentation on an iPad that lets you interact with your content like never before. I call it "PowerPinch" because you can pinch, swipe and zoom seamlessly with your presentation, and focus in on the content you're talking about, then zoom out quickly and move on to the next thing. It's seriously liberating.
First, some caveats: Creating a presentation like this takes more work than throwing a PowerPoint together. (I'd also argue that the output is obviously better than PowerPoint too). But if you just need to throw some messaging together, or if your pitch is still in a mode where it's iterating quickly, I'd suggest you get a flow down with PowerPoint first, and then move it to PowerPinch. You'll also need to be able to work within a photo editing program -- I use PhotoShop -- to put the pitch together.
Ready to have at it? First, here's a video showing what a PowerPinch presentation looks like:
The first step is to make what I call Image Tiles that form each "slide." Assuming you'll be using an iPad for this, you want to oversize the tile resolution so you can zoom in on the tile on the iPad. The iPad's resolution is 1024 pixels wide by 768 pixels tall. I made each image tile 1859 pixels wide by 1347 pixels tall. To the right is what one of my image tiles looks like that I used in the video above.
I create the image tile in PhotoShop as a .psd and then save it as a .png. You want to keep the .pngs at 1 megabyte or smaller, or the presentation will get unruly as you add image tiles.
I save the .png to my public dropbox folder. That way, whenever I update the .png, the hosted file is also automatically updated. So, for example, this is the URL of the Image Tile at right: http://dl.dropbox.com/u/1096184/pitch/main/00070_hor_soc_overview.png . And the next Image Tile URL is http://dl.dropbox.com/u/1096184/pitch/main/00080_hor_soc_overview_soon.png. (If you don't know what Dropbox is, that's outside the scope of this blog, but I highly encourage you to read my blog on playing a computer like an instrument, that talks about Dropbox and how it works, along with other lifehacker productivity tools.)
You'll also notice that the Image Tiles are named with numbers at the beginning. For example, the first one is 00070_hor_soc_overview.png and the next one is 00080_hor_soc_overview_soon.png. More on the reason for that later.
Once you have a few Image Tiles created, you'll want to string them together with a simple HTML file. You can find and view source on the full, finished HTML file that I load onto the iPad by clicking here. You'll notice that I put a spacer .png file between each Image Tile to give them some spacing. A screenshot of the code is at left.
Next, just open the web page you just coded on your iPad using Safari, and choose "Add to Home Screen." Doing this allows you to make the PowerPinch presentation look like an "app" and keeps the Safari URL bar from showing on the screen.
That's all there is to it. You'll be rocking PowerPinch presentations in no time.
Here are a few other things you'll need to know:
You'll want to pick up either a VGA iPad connector or an HDMI iPad connector so you can output your iPad on a big screen. I went all out and connected mine to a 10 foot VGA extension cable, since many board rooms have short cables, and I really like to be able to walk around with iPad in hand while I'm presenting.
Also, the reason I name my Image Tiles with numbers in front of the file name is so they're easy to print when you want to compile them into a PDF to email out. Here's the process to turn your PowerPinch presentation into a PDF on a Mac:
This is great Daniel. Another pragmatic way would be to save your powerpoint as images (e.g.: png), copy them to dropbox, enter dropbox with your ipad and save each slide (png) as a photo (under the share icon on the top right), which then goes to your Photo app. Now you have a sequence of images that form your presentation. You can even create albums with Photo and each album can be a different presentation. The upside here - works offline too!
Thanks Paul! Here's a video of our CTO Isaac using PowerPinch in a presentation at MoDevEast: http://vimeo.com/33185868
I moderated a panel this week at the Mobile Health Expo on the pros & cons of native vs. HTML mobile development.
The panel speaker was Bill French, and he did a great job outlining the advantages and disadvantages of each approach. You can also find a related blog I posted of the recent Silicon Valley Mobile Monday event on the same topic.
Anyone trying to understand the challenges in mobile development should understand the mobile pyramid, and read PointAbout's whitepapers on the topic - especially the one on 14 mistakes not to make.
The video of Bill's presentation is below. You can also download his slides in Keynote and PowerPoint formats.
Here are the best ways for speeding up your WordPress.
80% of the end-user response time is spent on the front-end. Most of this time is tied up in downloading all the components in the page: images, stylesheets, scripts, Flash, etc. Reducing the number of components in turn reduces the number of HTTP requests required to render the page. This is the key to faster pages.
One way to reduce the number of components in the page is to simplify the page's design. But is there a way to build pages with richer content while also achieving fast response times? Here are some techniques for reducing the number of HTTP requests, while still supporting rich page designs. Combined files are a way to reduce the number of HTTP requests by combining all scripts into a single script, and similarly combining all CSS into a single stylesheet. Combining files is more challenging when the scripts and stylesheets vary from page to page, but making this part of your release process improves response times.
CSS Sprites are the preferred method for reducing the number of image requests. Combine your background images into a single image and use the CSS background-image and background-position properties to display the desired image segment.
Image maps combine multiple images into a single image. The overall size is about the same, but reducing the number of HTTP requests speeds up the page. Image maps only work if the images are contiguous in the page, such as a navigation bar. Defining the coordinates of image maps can be tedious and error prone. Using image maps for navigation is not accessible too, so it's not recommended.