Interactive eLearning Project: SPIB.org

I recently completed a large-scale eLearning project consisting of 3 courses that each contain over 50 modules/lessons.

Requirements

The requirements included:

  • Take existing PC-based CBT courseware and re-design with a modern look and feel
  • Must be HTML5/JavaScript – develop it so that it is consumable across all popular platforms/devices
    • Windows
    • Mac OS X
    • Linux
    • iOS (iPhone, iPad)
    • Android
  • Duplicate the existing and very unique quiz and learner tracking capabilities in the desktop version

Tools/Technologies Used

  • Adobe Captivate 8 (publishing to HTML5)
  • Javascript (custom Javascript utilized throughout the courseware for the following):
    • Interactions
    • Custom quiz engine/scoring/feedback
    • Learner score tracking and reporting
    • Interfacing with custom score tracking database
  • Adobe Edge Animate
  • Adobe Photoshop
  • Adobe Illustrator

Screenshots

Screen Shot 2015-06-18 at 3.00.26 PM
Layered interactive guides/information available
Screen Shot 2015-06-18 at 3.00.41 PM
Included Rule Books/Additional Information
Screen Shot 2015-06-18 at 2.59.43 PM
Custom graphics/images
Screen Shot 2015-06-18 at 3.02.03 PM
Interactions throughout courses allow learners to learn critical skills by doing.
Screen Shot 2015-06-18 at 3.03.46 PM
Learners are tested with randomized pools of high-definition video clips.
Screen Shot 2015-06-18 at 3.04.02 PM
Customized feedback, based on the user’s responses/grading, for each video question.
Screen Shot 2015-06-18 at 3.05.04 PM
Unique scoring and reporting of test scores – this dimensional reporting allows for greater insight and learning by both students and supervisors.
Screen Shot 2015-06-18 at 3.05.15 PM
Students can review the videos questions they scored incorrectly.
Self-reporting capability
Self-reporting capability

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

More information: http://www.spib.org/wood-services/elearning

Site Re-Design: Nursing Mothers Alliance

I was asked to update an older WordPress-based website, www.nursingmothersalliance.org, recently. Here is what the site looked like before:

This is the old site.
This is the old site.

 

Initially based on the Cirrus theme for WordPress (which is a great base for a project like this), I customized the base theme’s design and typography, added some custom CSS to fix some issues, as well as some additional features.

I’m happy with how it turned out and the client is as well. This was a pro-bono project that I was happy to take on given the service that the Nursing Mothers Alliance provides to the community, free of charge. You can check out the new site here.

 

Article: Installing web2py on Webfaction

Wanted to write this post as I am sure I may need to refer back to it at some point, and couldn’t find this info anywhere else…

Setting Up a web2py Instance on Webfaction

  1. Browse to the Webfaction Install Scripts Wiki: https://wiki.webfaction.com/wiki/InstallScripts
  2. You will be asked to login to your Webfaction account. Do so.
  3. The ‘Create Application’ form will be pre-filled for you! Very nice. All you need to do is enter a name for your application. In the screenshot below I simply called mine ‘myweb2py’. Continue reading “Article: Installing web2py on Webfaction”

Site Re-Design: NaturalSelling

I was asked to re-design an existing site. Here is the before/after.

This was/is the existing site. Not too pleasing to the eye...
This was/is the existing site.

As you can see, it needed some work. Below is the proposed re-design. After considering the client’s needs, it was obvious that a static site (no Content Management System) would be the best solution.

The proposed new design.
The proposed new design.

Not shown is the bottom-third of the new design, which includes a 3-columned additional content area, as well as  footer area. Most importantly, this new site is responsive and scales to ANY screen size.

Technologies: HTML, JavaScript, PHP

Custom Social Network: Karkades.com

Karkades.com is a custom social network with hundreds of users located all over the world and is growing rapidly.

The site has received lots of international press, and is particularly popular in Morocco. The owner of the site came to me with nothing more than a vision of what he wanted in a site. He had initially contracted another web designer to build out the site, but after repeated failed attempts and roadblocks, and after two other web development firms could not produce the site, I was asked to take it on.

Under the hood, Karkades.com is based on the Drupal CMS and makes extensive use of custom database views, and specialized modules including Organic Groups. I am the sole designer and developer of the entire site, from the logo design to the development and maintenance/administrative tasks. The site is based on the Corolla theme but with extensive CSS customizations.

Karkades.com - Custom Social Network
Karkades.com – Custom Social Network

Features

  • Multilingual
  • Custom social groups feature – Members can join one or more groups
  • Members can post photos, videos, music, events, and items for sale on their personalized profile pages
  • Members can post status updates to other group members

Technology

  • Drupal Content Management System
  • PHP
  • MySQL
  • CSS
  • HTML

Press