Thursday, May 28, 2009

Embedding a Tutorial in a Blog

With the new DemoMate embeddable tutorial player, you can now easily create content in DemoMate that can be embedded directly into blogs, providing you a new way to not just tell your users about your products and solutions, but show them as well. This new tutorial player is a great addition to blog posts whenever you need to walk your audience through a specific task or procedure, or simply want to demonstrate how to use a software application or web site.

What blog post on embedding tutorials in a blog would be complete without an embedded tutorial actually showing you how to embed a tutorial in a blog? Without further ado, here it is:

DemoMate Tutorial:

Embedding a Tutorial in a Blog

Get Microsoft Silverlight

To embed a tutorial in a blog, first package the tutorial in the DemoMate client. Once your tutorial is ready, you’ll need to upload all the demo assets, including the .xap file and the assets folder, to a publicly available web server. This is necessary because most blogging services don’t provide a place to store media files, unless you’re hosting the blog on your own corporate web server already.

You might also need to configure your web server to support the x-silverlight-app MIME type for .xap files, since you will most likely be linking to the tutorial player across domains.

After you have uploaded your demo assets and configured your web server, you’re ready to create a blog post containing a tutorial. Sign in to your favorite blogging service and create a new post. Within the body of your post, you’ll want to paste in the entire OBJECT embed tag for the tutorial, which can be found in the sample .html file created when you first packaged the tutorial.

Two values will need to be modified in the OBJECT tag – the “source” value and the “AssetUrlPath” value. You should add the full URL path to where these assets are located on your web server. For example, “Sample Demo.xap” might become "http://www.demomate.com/Sample Demo.xap".

From trial and experience on our end with posting tutorials, we’ve also found that if line breaks are inserted in the opening OBJECT tag, the tutorial will not render on the page. Be sure to check and make sure that all line breaks are removed from this first tag. It’s still OK if the tag wraps onto multiple lines in the text editor box.

After you’ve modified the OBJECT tag with the correct URLs, you’re ready to finish your blog post and share your tutorial with the world.

Tuesday, May 26, 2009

Windows 7 Capture Issue Update

Good news for all DemoMate users on the Windows 7 beta – we just heard from the Windows 7 Application Compatibility team, and they let us know the DemoMate capture issue is resolved as of Build 7133!

The issue prevented users from being able to press ‘ESC’ to end demo capture when capturing both demo clicks AND hover steps in a few locations in Windows 7. Since the issue is now resolved, anyone with special access to Build 7133 should see DemoMate behave as designed, and for those without special access, the issue will be eliminated when you install the RTM of Windows 7 upon its scheduled release in a few months.

In the meantime, our recommendation when creating a demo on Windows 7 is simply to either avoid capturing hover states, or to capture your demo in very short sections, if you have a need to capture the Control Panel or Task Manager.

On behalf of the DemoMate team, we want to pass along our kudos and a huge "Thank You" to the Win 7 Team for their great work in helping us resolve this issue. We’ve all heard the great things about Win 7 in the media, and having seen their work firsthand, we agree: Win 7 Rocks!

Wednesday, May 20, 2009

Save Time and Money: Paperless Training

As the DemoMate community continues to grow, we wanted to share some examples of how DemoMate is being used to save time, save money, and generate new revenue opportunities. This is the third in a series of 5 short posts where we'll be sharing the latest from the community on the following topics: Sales Demos, Rapid Documentation, Paperless Training, Capturing IT Knowledge, and Hands-On Labs.

Paperless Training – With any software solution, Customer Satisfaction and ROI are directly related to the rate of user adoption. Customers who sell and implement software are using DemoMate to create and deliver Custom, Interactive training materials at a fraction of traditional costs.

As discussed in previous posts, DemoMate’s Print Script functions are great for creating custom, rapid documentation for a wide range of purposes. However, as members of the DemoMate community (and their customers) “Go Green,” there is broad interest in “paperless training” techniques. Customers are using DemoMate’s “Tutorial” functionality to deliver this new value-added service.

During the implementation process, companies work with their clients to identify the top employee tasks by role. Then, they use DemoMate to capture step-by-step tutorials of each process, using the DemoMate Publish for Tutorial feature. Once complete, customers can invite the employees to view the tutorials and by doing so, take advantage of DemoMate’s ability to provision password-protected My Demos pages for each employee. Some customers are going one step beyond this – with the new “Package For Tutorial” feature introduced with the April release of DemoMate, customers can actually embed training demos or sales demos inside the application interface, such as on a Role page.

Embedded, “Paperless Training” has the opportunity to revolutionize software usability. We’re scheduling a number of specific webcasts on this topic. If you are interested in attending one of our upcoming webcasts, send e-mail to contact@demomate.com and put the words Paperless Training in the subject line.

Monday, May 18, 2009

Embedding a Tutorial in PowerPoint

With the new DemoMate embeddable tutorial player, you can easily embed your self-running tutorials into your Microsoft PowerPoint presentations. This allows you to create seamless presentations, including slide content and tutorial content. This is especially helpful in trade show kiosks or internal displays when you need to show content in an offline environment.

In order to embed a tutorial, you first need to download a plug-in for PowerPoint that lets you add web content into a PowerPoint slide. We recommend the excellent LiveWeb for Microsoft PowerPoint plug-in, which can be downloaded here.

Once the plug-in is downloaded and installed, you can embed a DemoMate tutorial file into a PowerPoint slide. This tutorial can either be content stored locally on your hard drive, or hosted remotely on a website. In either case, you need to point the LiveWeb plug-in to the URL where the tutorial .html file is located.

Be aware that if you point to a local file on your hard disk, then if you move the PowerPoint deck to a different machine you'll also need to move the DemoMate tutorial files and ensure the embedded link is still valid. This is because the plug-in does not actually embed the tutorial itself into PowerPoint, but only a link to where the tutorial player is located.

For a complete, step-by-step demonstration of this entire process, please view the following tutorial:

DemoMate Tutorial:

Embedding a Tutorial in PowerPoint

Get Microsoft Silverlight

One important thing to note is that this only allows you to embed the Silverlight auto-play tutorial format in PowerPoint. If you plan on actually presenting a click-by-click demonstration of DemoMate to your audience, you should still use the DemoMate client application. This allows you to take advantage of several important features, such as dual-screen presentation mode, viewing hover and down states for your demo, etc. In this case, you might consider doing the opposite of what is described in this blog post, and add your slide content directly into DemoMate.

This process is described in a separate blog post, located here. We feel there is a time and place for both scenarios.

Friday, May 15, 2009

Save Time and Money: Rapid Documentation

As the DemoMate community continues to grow, we wanted to share some examples of how DemoMate is being used to save time, save money, and generate new revenue opportunities. This is the second in a series of 5 short posts where we'll be sharing the latest from the community on the following topics: Sales Demos, Rapid Documentation, Paperless Training, Capturing IT Knowledge, and Hands-On Labs.

Rapid Documentation – Customers who need to deliver “hard copy” instructions for different demos or tasks, such as for Sarbanes Oxley requirements, for training materials, or for customers in the Public Sector, are using DemoMate’s Print Script functions to save time creating these documents. DemoMate automatically generates click-by-click documentation in a 3 column format including screen shots, click pointers, optional click instruction text, and optional descriptive text. This saves 3-6 hours of work per deliverable, and makes it easier to deliver custom documentation more often.

Thursday, May 14, 2009

Embedding a Tutorial in SharePoint

With the new DemoMate embeddable player, you can easily add your self-running tutorials into a SharePoint web part page, allowing you to quickly and easily provide tutorials to anyone in your organization.

Here’s a short tutorial that walks you through the process:

DemoMate Tutorial:

Embedding a Tutorial in SharePoint

Get Microsoft Silverlight

Adding a DemoMate tutorial to SharePoint is very straightforward. First, from DemoMate, select Package Tutorial. From the Packaged Tutorial Settings dialog, select the “Single File” option. DemoMate will now open a folder and display your Silverlight .xap and .html files.

Next, navigate to the document library where you want to publish your tutorial, and upload both the Silverlight .xap and the sample .html file. As soon as the upload has completed, copy the shortcut for the .html file associated with that tutorial. Now you can navigate to a SharePoint page, and embed the tutorial by adding a new Page Viewer Web Part to the page. You’ll need to customize the web part by specifying the URL for the .html file, which you copied in a previous step, and possibly adjusting the height and the width so that the Silverlight player fits perfectly.

Using this method, you can quickly build up an entire document library of useful demos, training materials, or process documentation to share with your colleagues, partners, and customers.

Friday, May 8, 2009

Using the DemoMate Silverlight Tutorial Player

The new Silverlight tutorial player is designed to be as easy as possible for your viewers to enjoy. When the tutorial player has finished loading, the user will be presented by a large Play button in the center of the screen, encouraging them to engage with your content and watch the tutorial. Clicking this button (or the Play button on the toolbar) will start the tutorial playing to auto-play mode.

While the tutorial is playing, the viewer has the following options from the bottom toolbar:

Play / Pause: When the tutorial is paused, the auto-play mode will pause on the current step, allowing the viewer additional time to view the content, read the presenter script text, etc. While the tutorial is paused, the viewer can actually continue to advance one step at a time, instead of watching the demo in auto-play mode. If a viewer wants to navigate through a tutorial in this manner, it is recommended that the Click Instruction and / or Click Beacon option be enabled, to make it clear where to click next.

Next Step: Advances the tutorial to the next step.

Previous Step: Returns the tutorial to the previous step.

Progress Bar: Shows the current location in the tutorial. The play head on this bar can be dragged, allowing the viewer to quickly move to any point in the tutorial.

Audio Button: Enables / disables the click sound.

Full-Screen Button: Switches the player into full-screen mode. In this mode, the tutorial player takes over the viewer’s entire screen, breaking out of the browser window entirely. The screenshots in this mode will be scaled up to their maximum resolution, allowing for a much larger and clearer picture than might be possible in a small embedded player. While in this mode, the viewer can press the Restore button or ‘ESC’ to return to normal browser mode.

Options Menu: Allows the viewer to adjust many of the settings for the player, including:

  • Pointer Speed
  • Presenter Script Orientation
  • Show / Hide Click Instructions
  • Show / Hide Mouse Pointer
  • Show / Hide Click Beacon
  • Enable / Disable Looping

The following keyboard shortcuts are also available when viewing a tutorial:

LEFT ARROW – Previous step
RIGHT ARROW – Next step
SHIFT + LEFT ARROW – Previous section
SHIFT + RIGHT ARROW – Next section
TAB – Show / Hide Click Beacon

Thursday, May 7, 2009

Save Time and Money: Sales Demos

As the DemoMate community continues to grow, we wanted to take a minute and share some examples of how DemoMate is being used to save time, save money, and generate new revenue opportunities. This is the first in a series of 5 short posts where we'll be sharing the latest from the community on the following topics: Sales Demos, Rapid Documentation, Paperless Training, Capturing IT Knowledge, and Hands-On Labs.

First Up: Sales Demos.

Sales Demos – Customers are using DemoMate for sales demos to reduce sales costs and make it easier for sales teams and partners to give demos to more people. Demos which would normally require virtual machines, servers, or access to hosted environments are now portable and lightweight. One customer reported that his original demo was 65 GB, but the DemoMate version was only 19MB, and much easier for his partners in remote geographies to download, learn and present.

For example, in less than 6 months from its introduction into the Microsoft partner community, DemoMate use had spread to 90 countries around the world, bringing important sales content along with it. In trade show settings, DemoMate is being used to reduce costs – saving up to $1,000 per demo kiosk where demos would normally require CAT5 cabling for online access.

In the words of a DemoMate customer at a recent trade show, "What amazed me about DemoMate was how little there was to learn. I captured my entire on-stage demonstration in a single sitting, and it worked perfectly the very first time."

In other cases, customers are using DemoMate as an "insurance policy." Sometimes bandwidth or performance issues render a live demo impractical, or no one in the board room knows the WEP key for the wireless network – having a DemoMate version of your demo keeps your meeting moving. At a recent trade show, a group of employees missed their scheduled stage time due to airport delays, but because DemoMate copies of the on-stage presentations were available, it was possible for a different presenter to be successful in front of hundreds of people.

Wednesday, May 6, 2009

Hosting or Embedding an Online Tutorial

Hosting your own tutorials is very straightforward. In order to host a tutorial on your web site, you’ll need only a working knowledge of HTML, and access to a web server that can be used to host the tutorial assets. If you are unsure how to host a tutorial on your website, please contact your IT department for assistance.

Once you have packaged your tutorial, navigate to the location where you saved your assets. Be sure to grab all of the files associated with that tutorial, including the .html reference file, Silverlight .xap file, and assets folder, if one was generated. All these files can be moved to the location where you want to host the demo, such as your corporate website, a SharePoint document library, etc.

The .html file is included for your reference purposes, and contains all the code you need to embed your tutorial in your own website. It is not necessary to use this entire file. The portions of the file you are interested in are everything in between (and including) the OBJECT embed tag. All of this code can be copied from the reference .html file and included in any of the pages on your web site. This will allow you to embed the tutorial in your own site, with your own corporate branding and site navigation.

If you need to modify any of the default parameters after you have already packaged your demo, you can do so by editing the values in the OBJECT tag. It is not necessary to repackage your tutorial unless you have made changes to the content itself. For further information on valid values for each of the parameters, please refer to the comments in the sample .html document.

Here's a brief tutorial showing how to edit the tutorial source code:

DemoMate Tutorial:

Editing Tutorial Source Code

Get Microsoft Silverlight

If you plan on hosting the Silverlight asset files (the .xap and/or the assets folder) on a different web server from your main web server, then you might need to ensure that your media server is configured to support the x-silverlight-app MIME type. This is necessary to host Silverlight applications being served on a different domain.

You’ll notice a section at the end of the OBJECT embed tag that is displayed only if the Silverlight application could not load. The most common time this occurs is if a user does not have the Silverlight plug-in installed in their browser. You might want to consider modifying this code to customize the look-and-feel to better match the site it is embedded in. In addition, text that is stored in this section can be seen and indexed by search engines, so you might want to spend some time optimizing this with relevant keywords to your demo and product.

A special note on embedding tutorials into blogs: Many blogging services on the Internet do not allow you to upload assets directly to their services. You will need to host the Silverlight .xap file and demo assets folder on a public web server you have access to. You can then take the OBJECT embed code and add it to your blog post. In the OBJECT embed code, be sure to change the source value to point to the location where you are hosting your .xap file, and the AssetUrlPath, if necessary. You should also be careful that the OBJECT tag is all on one line of code – some blogging services will insert extra carriage returns if the tag spans multiple lines, which will prevent the Silverlight application from loading correctly.

Monday, May 4, 2009

Tips for Packaging Tutorials

The all-new DemoMate Embeddable Player is here, and with it come new opportunities for you to increase revenues, decrease cost, and delight your customers. With the latest version of DemoMate (Build 690), you can now “package” your tutorials in a new Silverlight player that can be embedded in websites, blogs, and SharePoint portals. We worked hard to give you a great deal of flexibility and control of the first-run experience for your tutorials. You can view your options on the new Tutorial Settings screen:

Here are some useful tips for packaging your tutorials:

Title: The name of the tutorial as it will show up in the player. By default, this is simply the name of your DemoMate file, but can be changed if you desire. Generally speaking, short names work best. You can use the length of the Title field as guide for when your Title gets too long.

Output: There are two different output formats available:

Multiple Files - Creates one small Silverlight file (.xap) and a folder containing all tutorial assets. Best for online (streaming) scenarios.

Single File - Creates one large Silverlight file (.xap) containing all tutorial assets. Best for offline or high-bandwidth scenarios only.

Width: Determines the width of the demo player, in pixels. Changing this value to 0 will default the player to 100% of your browser width, and allow it to flex as the browser window is resized.

Height: Determines the height of the demo player, in pixels. Changing this value to 0 will default the player to 100% of your browser height, and allow it to flex as the browser window is resized.

Lock Aspect Ratio: If this box is checked, then when you change either the Height or Width, the other value will be automatically calculated based on your screen resolution to determine the best possible fit and reduce the amount of letterboxing in the player.

Pointer Speed: Determines how fast the mouse pointer moves between steps, and thus how fast the tutorial progresses.

Start Screen: Determines which player elements are shown when the player is first loaded. The options are to show the Play button and the Title, just show the Play button, or show neither. If both of the elements are not shown, then clicking anywhere on the first step will start the tutorial; this allows you to customize your Tutorial experience by using the first Step of your Tutorial as the Start Screen, branded however you like.

Show Presenter Script: Determines the default location for the presenter script pane in the tutorial player. Options are to dock it to one of the sides of the player, or have it as a floating box that can be dragged around the screen by the viewer. You can also choose not to display a presenter script pane at all by selecting Off. For demos that you intend to embed in small spaces, consider not using any presenter script text whatsoever, and having short descriptions of your actions contained just in the Click Instruction field.

Show Click Instructions: Determines if the Click Instruction bubble is displayed.

Show Mouse Pointer: Determines if the mouse pointer that moves between steps is displayed.

Play Click Sound: Determines if a subtle click sound is played before advancing to the next step.

Start Demo Automatically: Determines if the demo automatically starts playing as soon as it is loaded, or if the user must click a Play button.

Show Click Beacon: Determines if the click beacon is shown for each step. This beacon can be useful as an alternate method of indicating where to click to move to the next step in your tutorial.

Loop Demo: Determines if the tutorial will loop after it reaches the last step. You can also set a time, in seconds, that the player stays on the last step before starting to play the tutorial again.

All of the player control settings can be changed by your customers once they start viewing a tutorial, through the Options menu in the player. When you are through selecting your defaults, click the OK button to package your tutorial. By default, tutorials will be placed in a My Tutorials folder in your Documents folder (Note: this is different from your My Demos folder).

Take a few moments to familiarize yourself with the new Package Tutorial feature and let us know if you have any questions!

Friday, May 1, 2009

DemoMate Enhancements - May 2009

You asked for it … you got it! The all-new DemoMate Embeddable Player is here, and with it come new opportunities for you to increase revenues, decrease cost, and delight customers.

In this release of DemoMate (Build 690), we’re proud to introduce a powerful new feature – requested by the DemoMate Community – that dramatically expands what you can do with your demos. Now, at the touch of a button, you can package your demo in an embeddable Silverlight player similar to a YouTube player. This new features is called “Package Tutorial.”

Once packaged, your demos can be hosted on a web site, run from your desktop, or even embedded in blogs, SharePoint portals, PowerPoint presentations, or other applications that support Silverlight.

To package a tutorial, simply create or open your demo, switch to the Share tab, and select Package Tutorial. Better yet, just press Play to watch this Tutorial below. Be sure and check out the full-screen mode to see how clear and easy-to-follow the demo screens are at their full size:

DemoMate Tutorial:

Packaging a Tutorial

Get Microsoft Silverlight

Here's an example of how you can embed a tutorial in a SharePoint portal:

We’ve worked hard to bring you this new feature, and we’re looking forward to seeing the many different uses you find to showcase your demos, solutions, and training materials. Keep an eye on the Tips and Tricks section of this blog over the next couple weeks, as we’ll be publishing a series of articles on how to embed the new tutorial player in different kinds of content, such as SharePoint portals, PowerPoint presentations, and more.