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 recently wrote about how I've swapped PowerPoint out for something I call PowerPinch (a term I made up).
When it came time to make a demo video for Socialize, I wondered if I could use PowerPinch to make the video, and then somehow capture what was happening on my iPad. It turns out, you can. Here's the finished video, and below is how I did it.
First, I made the demo video using my PowerPinch process. To learn more about that part, read this blog on PowerPinch.
I recently wrote about how I've swapped PowerPoint out for something I call PowerPinch (a term I made up). When it came time to make a demo video for Socialize, I wondered if I could use PowerPinch to make the video, and then somehow capture what was happening on my iPad. It turns out, you can. Here's the finished video, and below is how I did it. First, I made the demo video using my PowerPinch process. To learn more about that part, read this blog on PowerPinch. Then, I made a script for the video using Google Docs (pic at right). Once I was ready to capture, I bought a BlackMagic H.264 Pro Recorder box from Amazon, an HDMI cable, the HDMI iPad 2 Connector, and a mini USB cable. That's all the hardware I needed to connect my iPad to my Macbook Pro and start recording the content of my iPad screen. The BlackMagic box comes with its own capture software, called Blackmagic Media Express, which was perfectly sufficient for the job. I then read the script into a pair of Logitech USB Headphones and used audio editing program Audacity to splice the audio together the way I wanted it. I imported both the video and the audio into iMovie, and exported an .mp4, which I then uploaded to Vimeo and YouTube. Presto! The video isn't as smooth as I'd like, but for a $500 hardware budget, I'll definitely take it as a v1. It's more polished than anything I could've done without having to whip out AfterEffects. Plus it's kinda cool to have done it on the iPad. If you do have a $5k+ budget to spend, I'd recommend a company like DigitalFlair, which made our AppMakr demo video. I'd love any ideas you have to improve on this v1 -- at some point I'll try making another one based on what I learned from the first go-around. So if you have any thoughts or any questions on how I did it, please leave them in the comments below.
The Custom Icon and Image Creation Guidelines for iOS applications recommend different web clip and application icon sizes for phones and tablets. Sencha Touch provides a means to define these icons in the Application Class. The icons will be shown on the home screen for iPhone and iPad applications.
These are the web clip and Application icon sizes, as recommended by the guidelines:
In Sencha Touch, we define the app’s icons with the help of three configuration options of the Application Class – icon, phoneIcon, and tabletIcon.