Portfolio – Programming

Web Programming

The sampling of courses below show a variety of courses including courses developed for self-led eLearning (in Articulate Storyline), instructor-led remote training (LMS supported corporate), face-to-face corporate training (PowerPoint-based), and instructor-led training (LMS supported academia).   The bulk of my work history includes proprietary customer, technical, product, new hire orientation, and marketing training and job aids for internal use.  These are not shown for reasons of confidentiality and special purpose use.

Web Programming: Microlearning Coding Lessons For Web Programming

This is a series of microlearning lessons.  These are short lessons intended to help learners build skills and accomplish tasks in the shortest time possible.

Lessons:

Web Programming: How to Update Link Previews in Facebook Messenger (a just-in-time example)

Oh no!  When I tried to share a link in Facebook Messenger the preview had regrettable cropping (See the Before image below).  It was fixed (see After image) by making changes to the header of the index.html file.  Refer to instructions at right.  As just-in-time fixes, these instructions allow people to find information when they need it

How to Update Link Previews in Facebook Messenger

How to update the link previews in Facebook: It’s their cache which will clear in a few days or you can clear it manually.
  1. Crop image for link preview to 1500 x 1500  (You can use Photo 3D.)
  2. Add the basic meta tags (see below) to your HTML header.
  3. Visit https://developers.facebook.com/tools/debug/
  4. Enter the URL that you would like to share.
  5. Click Scrape Again until information updates. Ignore this error message: “Missing Properties – The following required properties are missing: fb:app_id”
  6. Now open messenger and try the link again.
As an example, here is what I added to the header of the Index.html file.  (Replace with your own links and descriptions.)

 <!– Add these meta data tags for Facebook Messenger link previews.  Note the image needs to be 1500 x 1500. –>

        <meta property=“og:image” content=“https://learningcenter.premierjones.com/css-infographic-challenge/images/linkpreview_portrait-business-woman.jpg” />

        <meta property=“og:description” content=“Embark on your journey to success. Join us for this inspiring, rejuvenating, motivating look at what secret sauce experts use to succeed in their business. This workshop is for leaders and aspiring leaders of any level that are committed to changing the world. Check out the details below.” />

        <meta property=“og:url”content=“https://learningcenter.premierjones.com/css-infographic-challenge/index.html” />

        <meta property=“og:title” content=“Leadership Training Workshop” />

        <meta property=“og:type” content=“website” />

 

Sources: 
Link Preview on Social Media doesn’t update
How to Change Your Link Preview on Facebook (for Squarespace websites),
The Open Graph Protocol

Web Programming: Online Learning Course Design

This is a series of microlearning lessons.  These are short lessons intended to help learners build skills and accomplish tasks in the shortest time possible.

Web Programming: xAPI for Collecting User Data