GoodDemo Architecture – Recording Component Part 2

[Gil Shabat (Novologies)]

Hi everyone,

If you recall from the previous post, our first challenge with the
recording component is to be able to add our own recording
functionality to any website without forcing users to install anything
on their web server or desktop. This would allow users to simply go to
any website and start recording their demo with no technical overhead.

One clever way to do this would be to use a bookmarklet. A user would
be able to add the GoodDemo bookmarklet to their browser’s bookmarks
or favorites and navigate to the site. When the bookmarklet is
clicked, a small bit of JavaScript would execute, download a script
from GoodDemo and set up the recording functionality.

Once we load our own JavaScript file into the user’s current webpage,
the sky’s the limit – we can easily interact with the local DOM just
like any other script running from within that specific domain. There
would be no limitations to what we could do (of course, provided it
adheres to the browser’s security restrictions). A simple and
effective solution:-).

For the purpose of recording, we envision the following scenario: once
a user clicks on our JavaScript bookmark on their chosen website, we
would load our JavaScript file and first delete the existing DOM body.
Then, three new sections would be created on the page:

(1) The first section would include the GoodDemo recording
functionality, much like a toolbar, so users can easily create and
manipulate their demo.

(2) The second section would be an IFrame that reloads the original
URL, which would present a live view of the current site that a user
can interact with.

(3) The third section would be another IFrame to view and manipulate
the recorded content. Users would be able to add notes to clarify
certain functionality, define existing links on the page to perform
actions similar to the original functionality (so end-users can
actually interact with the demo much like the original website or
application), and finally to add all kind of visual effects to better
define and describe the different options and functionality available
on the page.

This approach allows us to control the user’s webpage and access the
data the user wants to record, as well as to allow users to view and
manipulate the final demo.

That’s it for now. In the next post, I’ll cover our potential approach
for avoiding the cross browser limitations and transferring data from
and to the GoodDemo website. Shortly after my next post, we hope to
have a quick & dirty demo for you to visualize how the recording
component might work from an end user’s perspective.

What do you guys think? Feel free to comment on any of the above or
anything else that might be related. Thanks!

Gil