Google Presentations: Save as ZIP

If you click the 'save as zip' link in the File Menu you can actually have your entire presentation in HTML/CSS/JS form. Once more, guess what this means for us? Customizing!

Let's take a brief look at what's actually in the zip file itself. The presentation directory structure has the following:

• files - this contains all the javascript files as well as the themes for the presentation.
• images - the pictures used by the main presentation
  
• Presentation_images - any pictures that we uploaded.
• [YourPresenation].html - the actual presentation

Alright, now let's take a look at that html file to see what it looks like. We'll take a look at the javascript in a bit to see how they set that up.

Below you'll see what an actual slide is setup like. To distinguish the layout of the slide it simply applies the layout css class. In this example slide it's using the LAYOUT_2_COLUMNS_TITLE for the layout.

Also, every component in the slide is setup within a simple div tag each with a revision number attribute. Everything else is just standard XHTML code and standard CSS styles.
In other areas of the html file you will find the primary slide div container. From what I can tell this is used for when the presentation is in view during the presentation. But we'll look at this in the css to make sure.

<div id="primaryView" class="slideshow-view-background">
  <div id="primaryViewSlide" class="slideshow-view"></div>
</div>

The last part of the html file is the toolbar area that the presentation file has for navigation and a close button to close the presentation. You can see this when you open the presentation at the bottom of the browser.
Getting to the core of this system, I took a look at the Slideshow.js file. Unfortunately, like all of google's obfuscated code, sifting through this seems to be a wii bit more difficult that I wanted it to be. But that's okay, thanks to Javascript autoformatting tool: SourceFormatX getting passed all that silly code was within a button click. Firstly, the javascript, after formatting is over 7500 lines of code. Secondly, there are replacement variables for typical javascript libraries, which include the following:

var Ka = encodeURIComponent, p = window, R = Number, Jc = Infinity, X =
        navigator, Hc = Boolean, Y = undefined, cb = parseInt, ob = parseFloat,
        da = String, Ic = Function, s = document, ac = decodeURIComponent, La =
        isNaN, w = Math;

Next, more replacements within an array.

var h = "length", Sc = "plugins", _P = "prototype", dc = "className", A =
        "width", pb = "clientWidth", gc = "slice", Z = "nodeType", Ma =
        "document", fb = "mimeTypes", Uc = "srcElement", Vc = "value", ya =
        "location", o = "style", cc = "capture", ec = "currentTarget", E =
        "body", eb = "left", ub = "ownerDocument", ea = "target", Lb =
        "screenX", Mb = "screenY", td = "lastChild", Pc = "innerHeight", Ib =
        "cells", Kb = "keyCode", Ia = "firstChild", Wa = "clientHeight", Mc =
        "compatMode", Lc = "bottom", Nc = "currentStyle", Oc = "href", db =
        "console", fc = "rows", ta = "type", sa = "tagName", sb = "defaultView",
        gb = "name", L = "parentNode", Qc = "nextSibling", v = "height", Rc =
        "offsetHeight", qb = "clientX", rb = "clientY", tb = "documentElement",
        Tc = "right", Jb = "event", Of = Of || {}
    , V = this;
Unfortunately, those replacement roles make it nearly impossible to fully understand what's going on in that 7000 lined javascript file. If anyone has managed to get passed that let me know. Although, just by looking at a few lines of code somewhere in that file you'll actually see something kind of cool. I've managed to find out where things are moving to and from in the code but it's going to take a little bit longer before I can fully deduce the entire file.

Nevertheless, you can see what I'm talking about when it comes to customizing and extending web applications. In this example I'm given my presentation in a zip file with all the files included; allowing for customization beyond what's available on the web site. This allows my presentation to be portable wherever I go, online or offline. Of course, there is one impeding problem with this, the slideshow.js file is not extensible at this point. It's obfuscated to the point where the code is not even comprehensible. One approach to this could of been to design this area with the developer in mind, so that people may be able to extend it in ways that Google wouldn't of even imagined. They're not making money off of it, why not?