Website: Financial Planner

This site was developed, complete with custom header and theme, for a Certified Financial Planner.

SPS Financial Services
SPS Financial Services

Features

  • Custom Design
  • Password-protected pages
  • Customized back-end administration portal

Technology

  • WordPress
  • Custom theme

Website: Consulting Service Provider

Breastfeedingbond.com is a custom site developed for an International Board Certified Lactation Consultant that provides consulting services.

BreastfeedingBond.comFeatures

  • As of June 2013 ranked #1 in Google Search Results for “Lactation Consultant” in the Greater Philadelphia area!
  • Integrated Google Calendar
  • Ability for prospective clients to view availability and schedule an appointment online
  • Testimonials page – clients can submit a testimonial

Technology

  • WordPress CMS
  • Genesis Framework
  • Google Calendar
  • Theme customizations and styling

Website: News/RSS Aggregator

Goal was to build a site that curated sources from all over the web into an easy to read, nicely styled digest. This site polls numerous other website RSS feeds on an hourly basis, parses the RSS XML and presents the summaries.

breastfeeding_insightsFeatures

  • A Latest News page feed that aggregates content from all over the web and presents it in a single site
  • Users can register and vote on articles
  • A Most Popular articles page that lists the highest ranked articles
  • Administrative portal to add new external websites for inclusion in the Latest News page feed quickly and easily

Technology

  • Drupal CMS
  • RSS
  • Custom Database Views
  • Custom CSS

Website: Band

Custom site developed for internationally acclaimed fusion jazz band M’Oud Swing.

Moudswing.com

Features

  • Site visitors can listen to and purchase music
  • Video
  • Ability for band members to add new events (gigs, festivals, etc.), photos, and edit member bios via easy-to-use portal

Technology

  • Custom PHP/MySQL Content Management System
  • eCommerce PayPal integration

E-Learning: Developing a Captivate Template

I recently needed to design and develop a new corporate template for use with Adobe Captivate. Captivate is a great application for developing e-learning content, but it has its faults. I won’t go into those here, but I wanted to write about the process I took to develop the template, and the result.

Background

My team had been using a template that was adequate but not ideal. We needed something clean, up-to-date with corporate branding standards, and dead simple to use both for our learners as well as our not-so-tech-savvy instructional designers.

A Little About Captivate (and some Whining)

We’re using Captivate version 6. Version 7 was just released. I have years of experience with Captivate, and back in my active Flash/Actionscript days (back before Apple and Steve Jobs single-handedly destroyed Flash!), I used to frequent the forums and do quite a bit of custom Captivate development on the weekends. As much as I love Captivate and its flexibility, prior to version 5 you really needed to leverage Flash to build quality e-learning. With the recent versions they have enhanced the application with the ability to do simple scripting and custom variables. That helps a lot. Still, Adobe’s development of Captivate is, ahem, lackluster – a lot of features are superficial – meaning they can be listed on the ‘What’s New in Adobe Captivate Version 6!’ marketing materials, but when you actually go and use some features you find they are either too limited and inflexible to be of use, or they are just flat out ugly to look at. Adobe certainly didn’t put any graphic designers on this product team. Examples of this are the built-in Interactions. Very inflexible and ugly at the same time.

But my biggest gripe with Captivate is the playbars/navigation provided for the learner to interact with the content. Adobe uses a linear ‘video’/’tape’ metaphor – complete with play/pause toggle, fast-forward, and rewind buttons. The progress bar shows progress for the entire course, not the current slide, like other popular e-learning development tools (Articulate Presenter). The “TOC” is not the prettiest and very inflexible as well.

In theory, you can use the built-in SmartShapes and develop your own user interface. Even though there are limitations to that and it causes a lot of extra work for the end developer (dealing with all of the variables and Advanced Actions and just understanding how it’s supposed to be implemented), eventually I will go that route. For now, I opted to go with the ugly playbar, styled as best as can be.

What Exactly is a “Template”?

When I use the term “template” I need to clarify something: I didn’t bother saving the new “template” as an actual Captivate template file, as indicated by the .cptl extension. Why? Because there really isn’t any benefit to doing that. It’s another one of those features that looks great on a marketing slick (“We now have templates in this version!”), but there is no benefit to a .cptl over a regular .cptx project file. And it just adds another step to the process, having to open up Captivate and then create a new project FROM an existing template. I opted to simply save my ‘template’ as a regular .cptx project and provide it to the team so they could immediately open it up, do a Save As to rename it, and then start developing their content. Quick and simple, with no real downside.

So we needed something that contained our corporate branding, our custom captions, quiz settings, playbar and TOC settings, etc. In addition, certain ‘boilerplate’ slides, such as a splash/intro slide, a section divider/transition slide, an ‘About this Course’ slide, etc.

Template Slides

These are the published (in other words, those that are intended to be included in the published output) slides in our template, listed in assumed order of use in a course:

  1. Intro/Splash
  2. About This Course
  3. Navigation Help
  4. Section Transition
  5. Content with Title
  6. Content – Empty with No Graphics (used for Demonstration and Simulation slides where we don’t want branding or graphics covering up the screen captures)
  7. Quiz slides (not necessarily included in the published course but styled to match branding and available as part of the template)
  8. Certificate of Completion
  9. End of Course

The images below are a portion of the ones above. Note that I have blurred out the corporate logo and name from the slides, which results in not the prettiest of images but you’ll get the idea. Click on each of the images to view them:

Also included in the above images are the “Hidden” slides. These are, basically, a sample of the ‘Style Guide’. While a lot of corporate training departments have a formal style guide in PDF/hardcopy format, I find that it’s best to have the essentials in the actual Captivate template. In the .cptx I have them setup as Master Slides, so they are for internal use by the Instructional Developer only. The developer simply doesn’t assign any slides to these Master Slides. Need to know the hexadecimal value for a secondary color? Simply copy/paste the color chip from that Master Slide, or just grab the value listed for it. Need to use one of the custom captions and don’t have it in your installed \Adobe\…\Gallery directory? Just copy it from the Master Slide. Easy peasy!

Some Tips

  • The TOC, if enabled, will automatically force an ugly [<<] icon to appear in the corner of all slides. It’s not obvious to the user what this icon does, so they click it and the TOC slides in. Nice effect, but the problem is that there is an ugly looking icon distracting people in the corner. My problem is not with the icon being ugly, as fortunately there is an easy way to change it in the TOC settings. The problem is that there is no way to disable it in the settings. The workaround? Just create a small transparent PNG file and use that.
  • Putting SmartShapes on Master Slides seems to wreak havoc at publish. Specifically for me, it causes the alignment of the borders to be off, adding pixels to the edges. If you obsess over every pixel and appreciate beautiful and intentional design, then this type of stuff can drive you nuts. But your experience may differ, because when I posted this as a bug on the Captivate Support Forums, others said that removing the SmartShapes did not fix the problem for them. Try it and see.
  • Not relevant to the template itself but some things to remind the developers using the template:
    • When you’re finished development and go to save the final copy of the source .cptx, make sure to hit the ‘Find Unused Items’ in the Library button and delete them. This will save a lot of disk space. More importantly, it will save time during opening and publishing the file.
    • At the end of each slide’s timeline where you have voiceover audio, get in the habit of adding a few tenths of a second of ‘dead space’ after the audio voiceover ends. Otherwise you will find that, sometimes (not always and not consistently), the audio will prematurely cutoff. That’s very distracting to the learner.

Website: Musician

Website for Marlon Simon, an internationally renowned jazz musician.

Marlon Simon
Marlon Simon

Features

  • Streaming audio and performance video
  • Event calendar
  • E-Commerce Integration

Technology

  • HTML
  • CSS
  • JavaScript
  • PHP
  • MySQL
  • JQuery
  • Flash