tag:blogger.com,1999:blog-47903916936458893942024-03-05T06:29:56.138-08:00eLearning UpgradeOne man's attempt to improve eLearning as we know it.Joseph Suarezhttp://www.blogger.com/profile/06768416079555182568noreply@blogger.comBlogger11125tag:blogger.com,1999:blog-4790391693645889394.post-84814908952440583422014-01-01T16:14:00.000-08:002014-01-01T16:24:14.261-08:00File > New Year<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi902CBmD_mKySYmmlH_1FM1dtavjZPCOsls0MPwMwFivjYJVW5eWdfLhr7_bsUtJ4w07rLQku38Jk5xywPHsjJyJY-ZUx3WhHdrmxoE-45YL9VNzd5rpfaNim1u3AhkOtjX_wDj7J8bos/s1600/File-New.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="214" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi902CBmD_mKySYmmlH_1FM1dtavjZPCOsls0MPwMwFivjYJVW5eWdfLhr7_bsUtJ4w07rLQku38Jk5xywPHsjJyJY-ZUx3WhHdrmxoE-45YL9VNzd5rpfaNim1u3AhkOtjX_wDj7J8bos/s400/File-New.jpg" width="400" /></a></div>
<div style="font-family: Tahoma; orphans: 2; text-align: -webkit-auto; widows: 2;">
<br /></div>
<div style="font-family: Tahoma; orphans: 2; text-align: -webkit-auto; widows: 2;">
Today, this first day of 2014, I decided to do something I've been meaning to do for quite a while - create some hand crafted art for the hell of it. That's what the image above is.</div>
<div style="font-family: Tahoma; orphans: 2; text-align: -webkit-auto; widows: 2;">
<br /></div>
<div style="font-family: Tahoma; orphans: 2; text-align: -webkit-auto; widows: 2;">
Most applications from Photoshop to Word start a new document by going to the "File" menu and choosing "New". I found it oddly refreshing to take that concept offline and cut letters out with an X-acto knife. Here's to all the new beginnings and blank documents this year will open for each of us. </div>
<div style="font-family: Tahoma; orphans: 2; text-align: -webkit-auto; widows: 2;">
<br /></div>
<div style="font-family: Tahoma; orphans: 2; text-align: -webkit-auto; widows: 2;">
It's hard to believe 2013 already came and went. Here's a recap of all the eLearning related milestones I reached last year:</div>
<div style="font-family: Tahoma; orphans: 2; text-align: -webkit-auto; widows: 2;">
<ul>
<li><span style="text-align: -webkit-auto;">Attended my first <a href="http://www.elearningguild.com/DevLearn/" target="_blank"><span id="goog_55307900"></span>DevLearn<span id="goog_55307901"></span></a> conference</span></li>
<li><span style="text-align: -webkit-auto;">Started a local <a href="http://www.meetup.com/Columbus-eLearning-Meetup/" target="_blank">eLearning meet-up</a> for the Columbus, OH area</span></li>
<li><span style="text-align: -webkit-auto;">An article I wrote was featured in ASTD's <a href="http://www.astd.org/Publications/Magazines/TD" target="_blank">T+D magazine</a></span></li>
<li><span style="text-align: -webkit-auto;">Presented at an internal company conference on PowerPoint prototyping</span></li>
</ul>
<div>
<div style="text-align: -webkit-auto;">
<span style="text-align: -webkit-auto;"><br /></span>
<span style="text-align: -webkit-auto;">Despite my full time job, a steady stream of freelance projects, and family responsibilities, I somehow also managed to publish 9 writings in the past year. </span></div>
<div style="text-align: -webkit-auto;">
<ul>
<li><span style="text-align: -webkit-auto;">Dec. - </span><a href="http://www.astd.org/Publications/Magazines/TD/TD-Archive/2013/12/Visual-Design-for-the-Rest-of-Us" style="text-align: -webkit-auto;" target="_blank">Visual Design for the Rest of Us</a></li>
<li><span style="font-family: Tahoma; text-align: -webkit-auto;">Nov. - </span><a href="http://www.impactinstruction.com/learning/4-roles-of-creativity/" style="text-align: -webkit-auto;" target="_blank">Using the 4 Creativity Roles in Your Next Project</a></li>
<li><span style="text-align: -webkit-auto;">Nov. - </span><a href="http://elearningupgrade.blogspot.com/2013/11/how-to-easily-transcribe-audio-and.html" style="text-align: -webkit-auto;" target="_blank">How to Easily Transcribe Audio and Video by Hand</a></li>
<li><span style="text-align: -webkit-auto;">Oct. - </span><a href="http://elearningupgrade.blogspot.com/2013/10/devlearn-2013-i-went-i-sat-i-learned.html" style="text-align: -webkit-auto;" target="_blank">DevLearn 2013: I went, I sat, I learned.</a></li>
<li><span style="text-align: -webkit-auto;">Oct. - </span><a href="http://www.impactinstruction.com/learning/news-for-elearning-video/" style="text-align: -webkit-auto;" target="_blank">Good News and Bad News for eLearning Video</a></li>
<li><span style="text-align: -webkit-auto;">Sep. - </span><a href="http://www.impactinstruction.com/learning/unlock-mlearning/" style="text-align: -webkit-auto;" target="_blank">Unlock the Potential of mLearning</a></li>
<li><span style="text-align: -webkit-auto;">Mar. - </span><a href="http://elearningupgrade.blogspot.com/2013/03/legacy-systems.html" style="text-align: -webkit-auto;" target="_blank">Legacy Systems</a></li>
<li><span style="text-align: -webkit-auto;">Jan. - </span><a href="http://elearningupgrade.blogspot.com/2013/01/the-ghost-of-elearning-future.html" style="text-align: -webkit-auto;" target="_blank">The Ghost of eLearning Future</a></li>
<li><span style="text-align: -webkit-auto;">Jan. - </span><a href="http://blog.integratedlearningservices.com/2013/01/lectora-resource-roundup.html" style="text-align: -webkit-auto;" target="_blank">Lectora Resource Roundup</a></li>
</ul>
</div>
</div>
</div>
<div style="font-family: Tahoma; orphans: 2; text-align: -webkit-auto; widows: 2;">
<ul>
</ul>
</div>
Joseph Suarezhttp://www.blogger.com/profile/06768416079555182568noreply@blogger.com0tag:blogger.com,1999:blog-4790391693645889394.post-74322457761071231452013-11-07T09:13:00.002-08:002014-01-01T16:16:19.779-08:00How to Easily Transcribe Audio and Video by Hand<div class="MsoNormal">
It’s nice to see more online video services like <a href="http://www.panopto.com/" target="_blank">Panopto</a>,
automatically transcribe video and make them searchable. Nice, but usually pricey
and locked down as a proprietary service. </div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
For the rest of us on a budget, developing audio and video
based training with closed caption style transcription requires a typed text transcript. However many times, I’ve used audio or video for a course
with no pre-typed script. </div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
This meant I had to simultaneously listen to a media
file and frantically type out whatever was spoken. I could type a sentence or two
down before the audio got away from me. Then I’d have to stop, go back a few
seconds, and listen again. I’d repeat this over and over again, seldom
rewinding to exactly where I needed to replay. </div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
The whole process took an annoyingly long amount of time. Eventually
I figured out a simple technique: <b>Slow down playback to a comfortable typing speed.</b></div>
<div class="MsoNormal">
<b><br /></b></div>
<div class="MsoNormal">
First off, <a href="http://www.videolan.org/vlc/" target="_blank">download VLC</a> for video playback. It’s a free, open
source tool that will save you the headache of opening video and audio files in
different slower loading players like Windows Media Player or QuickTime only to
get error messages about unsupported codecs or file formats.</div>
<div class="MsoNormal">
<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFDYUt-mKtbHaSiKCZyB-hCryxwIzLjL3JYwQF3NLaMFtw3CEM0fSygQFqWbEeAy99bOLBo9Bb3YfFqGIhps2s_xIJOxvaLvbDFXPT0nUMLtz6PLnwGPYKlXVrbQlA9NAjC5Hmmlc3fS8/s1600/VLC_speed.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFDYUt-mKtbHaSiKCZyB-hCryxwIzLjL3JYwQF3NLaMFtw3CEM0fSygQFqWbEeAy99bOLBo9Bb3YfFqGIhps2s_xIJOxvaLvbDFXPT0nUMLtz6PLnwGPYKlXVrbQlA9NAjC5Hmmlc3fS8/s1600/VLC_speed.png" /></a>One of the capabilities of the VLC player is controlling the
playback speed right from the main window. Adjust that down to somewhere between 0.25x
and 0.5x speed depending on your typing abilities and how fast the speaking
occurs.</div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
You’ve now entered what I affectionately refer to as “drunken
narration” mode (You’ll understand why during playback. This is particularly fun
if it’s a video is of a co-worker or high ranking executive. <span style="font-family: Wingdings;">J</span>). This reduced speed
lets you type at a comfortable pace without having to continuously stop and
start the video to listen again to short bursts.</div>
<div class="MsoNormal">
<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
After I type out a video’s transcript with this method, I
replay at 1x speed and double check my text for accuracy.</div>
<div class="MsoNormal">
<b><br /></b></div>
<div class="MsoNormal">
<b>Bonus Tip:</b> If you
like to listen to Podcasts, TED videos, etc., try downloading a file of the
media and playing it back with VLC at a faster speed (1.25x or 1.5x, or even
2.0x). You’ll save time, and get up to speed on your podcast library much
quicker. I've noticed beta versions of YouTube and Lynda.com HTML5 players also currently allow speed changes.<o:p></o:p></div>
Joseph Suarezhttp://www.blogger.com/profile/06768416079555182568noreply@blogger.com0tag:blogger.com,1999:blog-4790391693645889394.post-35306106160429900852013-10-27T20:21:00.003-07:002014-01-01T16:16:31.639-08:00DevLearn 2013: I went, I sat, I learned.This year's <a href="http://www.elearningguild.com/DevLearn/content/2825/devlearn-2013-conference-and-expo---home/" target="_blank">DevLearn</a> was my first, and it was awesome. I had the chance to meet so many great people, and sit through some amazing sessions. I walked away with a few solutions to implement, and some great challenges to mull over. Here are some highlights from my perspective.<br />
<br />
Jeremy Gutsche gave an energetic opening keynote on <a href="http://www.elearningguild.com/DevLearn/concurrent-sessions/session-details.cfm?session=4807" target="_blank">"Unlocking Cool"</a> that happened to hit some key themes that appeared throughout the following sessions I attended. First he posed a question to all of us...<br />
<br />
<b>Why Should I choose you?</b><br />
Meaning, why should our customers choose us (ideally answered in 7 words or less)? I found it a bit odd from the perspective of our industry's “customers” since the learner, student, user, eLearner, etc. (whatever we choose to call those who consume our content) often has no real choice. After deciding to work for a company, the average employee doesn't have the luxury of choice when they are assigned mandatory training from a single LMS. So instead of, “Why should I choice you?” the questions are more often “How long will this take?” and “Didn't I just do this last year?” This led right into one of Jeremy's next points.<br />
<br />
<b>Success leads to complacency</b><br />
Despite all the talk of innovation today, there is no incentive to adapt to change when we think we already know the answer. After our industry perfected the course assignment, completion, and tracking model (via SCORM, the LMS, and rapid authoring tools), we gained the illusion of success. What little tracking SCORM allows for provided metrics to justify our actions rather than evaluating the actual impact.<br />
<br />
But behind our metrics is a false security. What does it really mean to complete a training item with a score of 80% or higher in an LMS? As Neil Lasher asked in his session <a href="http://www.elearningguild.com/DevLearn/concurrent-sessions/session-details.cfm?session=4904" target="_blank">"How to Deliver Measurable Behavioral Change Using Technology,"</a> do you want your airplane pilot or surgeon to have passed an eLearning course with an 88%? What question did they miss? The part about landing the plan?! The part about not leaving surgical equipment inside the patient?!<br />
<br />
In the panelist session <a href="http://www.elearningguild.com/DevLearn/concurrent-sessions/session-details.cfm?session=4898" target="_blank">"Is eLearning Broken?"</a> (spoiler: yes), Judy Katz served questions about this innovation stifling complacency to Reuben Tozman, Micheal Allen, Julie Dirksen, and Clark Quinn. Some proposed solutions centered around asking what value we actually offer to the world as we come to terms with no longer being containers and distributors of knowledge.<br />
<br />
Coming from a web design background, I found Chad Udell’s session on <a href="http://www.elearningguild.com/DevLearn/concurrent-sessions/session-details.cfm?session=4879" target="_blank">content strategy</a> hitting the nail right on the head on the issue of complacency. Web designers and developers realized a full decade ago that the separation of content from presentation was crucial to the advancement of the web, yet it’s still a ground breaking concept to the eLearning world.<br />
<br />
So what's the solution to all this? Perhaps a big part of the answer lies in another idea Jeremy presented...<br />
<br />
<b>Customer Obsession</b><br />
One of Jeremy’s final talking points was around gaining an obsession for our customer. This theme came up again and again in following sessions.<br />
<br />
At the panel previously mentioned, Julie Dirksen asked, “Who here watches their people use their product?” No hands were raised. Jeremy’s suggestion: Talk to your customer (with genuine interest!). If we are truly concerned with the impact of our work, we should engage in some level of user testing and observe our product is actually used.<br />
<br />
In another session, Allison Anderson explained how Intel's "<a href="http://www.elearningguild.com/DevLearn/concurrent-sessions/session-details.cfm?session=4925" target="_blank">Learner's Manifesto</a>" seeks to motivate employees and drive them to learn while respecting their time, and intelligence.<br />
<br />
Along those same lines Chad Udell and Clark Quin <strike>busted</strike> <a href="http://www.elearningguild.com/DevLearn/concurrent-sessions/session-details.cfm?session=4952" target="_blank">smashed common myths</a> about learning styles and generational differences to keep misinformation from hampering our instructional efforts.<br />
<br />
Nancy Proctor explained how the Smithsonian enhanced the museum experience (both in-person and virtually) through mobile technology to become a sort of offline Wikipedia. But, their success stemmed from a mindset that looks past the technology itself, and embrace what's available to tell stories and produce relevant experiences for people.<br />
<br />
In his session, Karl Kapp proposed the concept of game design to rethink how we approach creating eLearning. Techniques such as arouse curiosity, enhance mystery, and put the user at risk may seem counter-intuitive to traditional instructional methods, but these kinds of game concepts actually involve the user in their own learning experience.<br />
<br />
These are just some highlights of the vast amount of information and experiences I took away from DevLearn 2013. DemoFest was amazing, the ExpoHall also had some interesting presentations on stage, and I also caught the end of a <a href="https://twitter.com/Joseph_Suarez/status/393548279184916481" target="_blank">live learn chat</a> (#lrnchat). However by far the biggest highlight of my first DevLearn was meeting so many amazing and knowledgeable people in my industry, many of whom I had only previously read their blogs, books, and tweets.<br />
<br />
I'm definitely looking forward to attending another DevLearn in the future. See you there!<br />
<br />
And if by chance you're in the Columbus, OH area (or know a learning professional who is), <a href="http://www.meetup.com/Columbus-eLearning-Meetup/" target="_blank">we have a local meetup</a>. Come join us!Joseph Suarezhttp://www.blogger.com/profile/06768416079555182568noreply@blogger.com1tag:blogger.com,1999:blog-4790391693645889394.post-76404269253480450972013-03-13T09:05:00.003-07:002014-01-01T16:16:40.951-08:00Legacy SystemsI love the podcast <a href="http://www.accidentalcreative.com/" target="_blank">Accidental Creative</a>. It’s a great quick audio inspiration for creative professionals looking to produce good work without getting burned out.<br />
<br />
The <a href="http://www.accidentalcreative.com/podcasts/ac/ac-podcast-legacy" target="_blank">latest podcast</a> covers legacy systems, and how to keep them from inhibiting our work. A few take-a-ways: <br />
<ul>
<li>At regular intervals, step back and examine how you're doing your work. </li>
<li>Examine if your priorities are still the same, or if they have shifted.</li>
<li>Do you need to approach work differently to stay effective?</li>
<li>Changing tools can help, but don’t assume it’s an end-all solution.</li>
</ul>
In many ways the podcast’s portrayal of legacy systems reflects the traditional eLearning course and LMS relationship. At what point do we take a step back and reexamine if what we’re doing is truly effective? Are we just throwing good money after bad?<br />
<br />
This was a timely topic for me. I’m becoming increasingly frustrated with the tools available for creating eLearning content. Often, I find myself developing hand-coded solutions that work in spite of the tool rather than in tandem.<br />
<br />
The landscape of web technology is changing faster than tool vendors can release products and patches. I often wonder why I’m even using certain tools in the first place, and if I should just hand-code my own solutions entirely.<br />
<br />
So for me, taking a step back means reflecting on whether it’s finally time to give my hand-coding skills some much needed attention and work to someday ditch such expensive legacy systems entirely.Joseph Suarezhttp://www.blogger.com/profile/06768416079555182568noreply@blogger.com0tag:blogger.com,1999:blog-4790391693645889394.post-47848823766440630962013-01-30T09:14:00.000-08:002013-01-30T09:14:35.491-08:00The Ghost of eLearning FutureDuring my 5+ years as an eLearning developer, I've continually wondered what our industry would look like if we didn't become entrenched in decade(s) old bad habits. What if we could truly embrace advances in web design and development, and not insist on CD-Rom era course structures and flashy... Flash?<br /><br />Sure, we'll probably always be a bit behind the times, but glossaries? Tables of contents? Locked linear navigation? These kinds of book navigation metaphors were all hold overs from an era before the Internet went mainstream and people became comfortable with web technology (like scroll bars). The familiar concept of a book was a mental anchor secured in reality while one trekked into the scary unknown technology realm of the early 1990's. To me, this is as outdated a navigation structure as <a href="http://www.urbandictionary.com/define.php?term=AOL%20Keyword">AOL keywords</a>, so to still be using it so heavily in 2013 is beyond absurd. Yet it's unchecked prevalence is overwhelming.<br /><br />Then, just when I had almost forgotten what it was like to be inspired as an eLearning developer, I came across <a href="http://www.nytimes.com/projects/2012/snow-fall">Snowfall</a>, a New York Times multimedia feature experiment. If you haven't, I highly recommend taking a few minutes to truly delve into it's splendor.<br /><br />Each time I view compelling web content like this, it's like a visitation from the Ghost of eLearning Future to warn of all the cool stuff we'll miss out on if we continue our same tired old habits of eLearning past. I'm far from the first to say so, but nothing ever seems to truly shake things up.<br /><br />Here are my main take-a-ways from the Snowfall piece:<br /><br /><b>This is what real HTML5 looks like.</b><br />Forget the marketing hype (or flat out lies) many vendors proclaim about tools publishing to HTML5. THIS is what HTML5 (and related web technologies) can do. We should expect nothing less for eLearning. To be fair, vendors are breaking new ground with HTML5 publishing options, so they need some time to work out the kinks. However, to only focus on replacing PowerPoint to Flash conversion with PowerPoint to HTML5 conversion completely misses the point in my opinion. Ditch the slides. Embrace the scroll. <br /><br /><b>This is the future of consuming content online.</b><br />Compelling storytelling. Well thought-out visual design. Multimedia content that reinforces text. Responsive page layouts and content (adapting to a whatever device screen viewed on). All of these work beautifully together, as they should. This is the future of web content, and it's wonderful. Let's get on board before we're left at the station.<br /><br /><b>This is what eLearning could and should be! </b><br />I'm willing to accept that as an industry, eLearning development will always lag behind cutting edge technology trends and even take a while to adopt established best practices. However, I'm not comfortable repeating the same past mistakes. In my opinion, we should push to make this new kind of content delivery a reality.Joseph Suarezhttp://www.blogger.com/profile/06768416079555182568noreply@blogger.com0tag:blogger.com,1999:blog-4790391693645889394.post-89361972003347393722013-01-11T18:22:00.001-08:002013-01-14T07:25:47.675-08:00Unconventional eLearning Simulation<span style="font-family: Helvetica, Arial, 'Droid Sans', sans-serif; font-size: 14px; line-height: 19.983333587646484px;">Last year during the Articulate Storyline beta, I created an unconventional "eLearning" simulation.</span><br />
<div style="border: 0px; font-family: Helvetica, Arial, 'Droid Sans', sans-serif; font-size: 14px; line-height: 19.983333587646484px; margin: 0px; padding: 0px;">
<br clear="none" /></div>
<span style="font-family: Helvetica, Arial, 'Droid Sans', sans-serif; font-size: 14px; line-height: 19.983333587646484px;">Since I typically spend work days creating conventional corporate training courses (sales training at the time), I wanted to try something completely different and also experiment with some ideas:</span><br />
<div style="border: 0px; font-family: Helvetica, Arial, 'Droid Sans', sans-serif; font-size: 14px; line-height: 19.983333587646484px; margin: 0px; padding: 0px;">
<br clear="none" /></div>
<span style="font-family: Helvetica, Arial, 'Droid Sans', sans-serif; font-size: 14px; line-height: 19.983333587646484px;">What if the goal of a simulation was to do tasks incorrectly? Could that actually reinforce correct behavior?</span><br />
<ul>
<li><span style="font-family: Helvetica, Arial, 'Droid Sans', sans-serif; font-size: 14px; line-height: 19.983333587646484px;">What if avatars were jerks and gave you bad advice?</span></li>
<li><span style="font-family: Helvetica, Arial, 'Droid Sans', sans-serif; font-size: 14px; line-height: 19.983333587646484px;">What if you were yelled at and insulted instead of monotonously encouraged and congratulated? </span></li>
<li><span style="font-family: Helvetica, Arial, 'Droid Sans', sans-serif; font-size: 14px; line-height: 19.983333587646484px;">Could an eLearning authoring tool be used to tell an interactive story?</span></li>
</ul>
<span style="font-family: Helvetica, Arial, 'Droid Sans', sans-serif;"><span style="font-size: 14px; line-height: 19.983333587646484px;">Somewhere in the recesses of my imagination, I came up with </span><a href="http://josephsuarez.com/CarlsClunkers/" style="font-size: 14px; line-height: 19.983333587646484px;" target="_blank">Carl's Clunkers</a><span style="font-size: 14px; line-height: 19.983333587646484px;">, a sleazy car salesman simulation. </span></span><br />
<div style="border: 0px; font-family: Helvetica, Arial, 'Droid Sans', sans-serif; font-size: 14px; line-height: 19.983333587646484px; margin: 0px; padding: 0px;">
<br clear="none" /></div>
<span style="font-family: Helvetica, Arial, 'Droid Sans', sans-serif; font-size: 14px; line-height: 19.983333587646484px;">As you'll see, the high quality images of people from <a href="http://elearningart.com/" target="_blank">eLearningArt </a>played a strong role. All of the sources of the assets used are listed at the end.</span><br />
<div style="border: 0px; font-family: Helvetica, Arial, 'Droid Sans', sans-serif; font-size: 14px; line-height: 19.983333587646484px; margin: 0px; padding: 0px;">
<br clear="none" />
<a href="http://josephsuarez.com/CarlsClunkers/" target="_blank">Launch the simulation</a><br />
<br /></div>
<span style="font-family: Helvetica, Arial, 'Droid Sans', sans-serif; font-size: 14px; line-height: 19.983333587646484px;">Post a comment if you have any feedback or questions about how I made this unconventional simuation.</span>Joseph Suarezhttp://www.blogger.com/profile/06768416079555182568noreply@blogger.com0tag:blogger.com,1999:blog-4790391693645889394.post-43177325375080689072013-01-05T20:21:00.000-08:002013-01-05T20:21:38.863-08:00Moving into 20132012 was a huge year for me personally. I started a new job in August, became a father (again) in September, and achieved several personal goals I set earlier in the year including running 5k. <br /> <br />As far as eLearning, I was involved in both the Articulate Storyline and Lectora 11 Betas, and posted several eLearning related blog posts on other sites last year (often to the neglect of this one). Here are all 13:<br />
<br />Musings:<br />
<a href="http://blog.integratedlearningservices.com/2012/12/realizing-potential-of-tin-can-api.html">Realizing the Potential of the Tin Can API</a><br /><br />Product Reviews: <br /><a href="http://blog.integratedlearningservices.com/2012/05/3-defining-features-of-articulate.html">3 Defining Features of Articulate Storyline</a><br />
<a href="http://blog.integratedlearningservices.com/2012/01/reviewlink-online-review-tool-for.html">ReviewLink: Online Review Tool for Lectora</a><br /><br />Effective Visual Design Series:<br /><a href="http://www.impactinstruction.com/learning/effective-visual-design-part-1-being-an-advocate-for-good-design/">Part 1 – Being an Advocate for Good Design</a><br /><a href="http://www.impactinstruction.com/learning/effective-visual-design-part-2-solving-problems-visually/">Part 2 – Solving Problems Visually</a><br /><a href="http://www.impactinstruction.com/learning/choosing-colors-fonts-images">Part 3 – Choosing Colors, Fonts & Images</a><br /><br />eLearning Development Tips:<br /><a href="http://blog.integratedlearningservices.com/2012/07/using-white-space-for-clutter-free.html">Using White Space for Clutter-Free eLearning</a><br /><a href="http://blog.integratedlearningservices.com/2012/08/keeping-elearning-readable-visual.html">Keeping eLearning Readable – Visual Readability</a><br /><a href="http://blog.integratedlearningservices.com/2012/11/call-to-action-items-in-elearning.html">Call to Action Items in eLearning</a><br /><br />Lectora Tutorials:<br /><a href="http://blog.integratedlearningservices.com/2012/02/extending-lectora-with-iframe.html">Extending Lectora with an iFrame</a><br /><a href="http://blog.integratedlearningservices.com/2012/03/lectora-development-best-practices-part.html">Lectora Best Practices Part 1 – Optimizing Preferences</a><br /><a href="http://blog.integratedlearningservices.com/2012/04/lectora-best-practices-part-2-variables.html">Lectora Best Practices Part 2 - Variables and Actions</a><br /><a href="http://blog.integratedlearningservices.com/2012/10/lectora-best-practices-part-3-using-text.html">Lectora Best Practices Part 3 – Using Text</a><br /><br />I'm looking forward to 2013. I'm planning to step up my game on several fronts when it comes to my work. So far things are going great. Hopefully you are off to a good start into 2013 as well! Joseph Suarezhttp://www.blogger.com/profile/06768416079555182568noreply@blogger.com0tag:blogger.com,1999:blog-4790391693645889394.post-41727097304142582912012-03-15T12:56:00.001-07:002012-03-15T12:59:25.887-07:00Adobe Demos Flash Professional Export to HTML5Back in April 2010, Steve Jobs <a href="http://www.apple.com/hotnews/thoughts-on-flash/" target="_blank">made it clear</a> Flash Player was never coming to the iOS devices (iPod, iPhone & iPad). With the slow and gradual decline in Flash usage since, it’s easy to forget just how huge this was. Flash was THE way to experience an interactive web. Every streaming video, image slideshow, music player widget, and animation use to be done with Flash. <br />
<br />
For years, Flash developers could be confident every computer could run Flash exactly the same way in every browser excluding mobile devices. Even that wasn’t an issue until the iPhone showed us the mobile web didn’t have to be the subpar experience it once was.<br />
<br />
The reports of Flash’s death were greatly exaggerated. Now it’s clear that the foreseeable future will have Flash confined to the desktop only. And, since it’s more and more feasible to create an HTML and JavaScript alternative that will work across different devices, the inevitable finally occurred. The tool we have been using for over a decade to bring richer experiences to the web can do so once again.<br />
<br />
Adobe Flash now has the ability to export to HTML5 (and apparently Steve Martin works for Adobe):<br />
<br />
<iframe allowfullscreen="" frameborder="0" height="296" scrolling="no" src="http://tv.adobe.com/embed/877/12233/" title="AdobeTV Video Player" width="515">&amp;lt;p&amp;gt;(And&amp;lt;/p&amp;gt;</iframe>Joseph Suarezhttp://www.blogger.com/profile/06768416079555182568noreply@blogger.com0tag:blogger.com,1999:blog-4790391693645889394.post-2382059142412571002011-12-05T11:43:00.000-08:002011-12-08T13:39:51.706-08:00The Problem with Templates<div class="MsoNormal">Think about the last time you created a presentation in a program like PowerPoint. Did you use one of the design templates (themes) that come pre-installed? Did you find a free template online? What led you to finally settle on the template you used? Was it personal preference, company branding, or maybe the desire to stand out from the crowd? </div><div class="MsoNormal"><br />
</div><div class="MsoNormal">I went all through college creating presentations using the same generic PowerPoint template. Why? Because I was always in a hurry to create a presentation to go with whatever class project I was working on. Template choice was an afterthought since I was graded on my project work first, presentation skills second, and presentation design dead last. </div><div class="MsoNormal"><br />
</div><div class="MsoNormal">My few (but increasing) years of working in the corporate world have revealed the same low priority is typically given to presentation design. But, at the same time, people are quick to praise a well thought-out presentation where the visual theme matches the message. It’s as if everyone unconsciously yearns for greatness, yet expects disappointment.</div><div class="MsoNormal"><br />
</div><div class="MsoNormal">To the vast majority of people, design templates are quick fixes to the problem of black text on a white background. In short, anything seems better than nothing with the bulk of decision making unrelated to truly enhancing the content itself. </div><div class="MsoNormal"><br />
</div><div class="MsoNormal">But is “anything” really better than nothing? Simply switch to white text on a black background, and you have something profoundly different that worked quite well for <a href="http://www.presentationzen.com/presentationzen/2008/01/5-presentation.html">Steve Jobs</a>, but that doesn’t mean it works for every situation. What is the real problem a template is supposed to solve anyway? </div><div class="MsoNormal"><br />
</div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTju3B8UZKZS3eIe9cIqLAx-wx4LUjVQ4GkpYtYs6o1H-t3kpoF78P4xwrg3qJCIS2AROU61dT8hOPmoKX81Z2IA2sdBrKz0EkcH_LjAxAX2dsD5jilUzJ77iSLlDJqPvOrshzoxqBuyU/s1600/Templates-SteveJobs-iPad.jpg" imageanchor="1"><img border="0" height="266" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTju3B8UZKZS3eIe9cIqLAx-wx4LUjVQ4GkpYtYs6o1H-t3kpoF78P4xwrg3qJCIS2AROU61dT8hOPmoKX81Z2IA2sdBrKz0EkcH_LjAxAX2dsD5jilUzJ77iSLlDJqPvOrshzoxqBuyU/s400/Templates-SteveJobs-iPad.jpg" width="400" /></a></div><div class="MsoNormal"><br />
</div><div class="MsoNormal"><br />
</div><div class="MsoNormal">When you open a program like PowerPoint, you want to solve a problem by communicating an idea. How well that idea comes across to the audience is dependent upon the visual design of the slides. The other day I came to a realization about the problem, and sent out <a href="http://twitter.com/Joseph_Suarez">this tweet</a>: </div><blockquote class="tr_bq"><div class="MsoNormal"><i>“Templates are solutions to someone else's problem that may happen to mimic your own problem.”</i></div></blockquote><div class="MsoNormal">With a pre-created template, you don’t need to worry about font pairings, the size and color of body text relative to the header, the leading (line spacing) between bullet points, or creating your own background image. Those types of tough design decisions are already implemented for you, and it’s a great time saver that keeps presentations readable at a distance.</div><div class="MsoNormal"><br />
</div><div class="MsoNormal">However, at the expense of time saved, your original idea becomes boxed into someone else’s preconceived notions and design choices. You have to settle for, at best, a close fit between a visual theme and your idea. Not to mention, you risk using the same exact template as the last guy or gal who presented on a totally different idea. Will your idea still get across to the audience after all that?</div><div class="MsoNormal"><br />
</div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZWoU-ZnQr0g_eIJC2O_7Y4HgLg3k3XnY63bwfnYkQaja5kGKB5EOJau7gkRKgj-mjt6pt6orzEPKkqpmdz_ZtngCm9xvwfuEDLyutmjF2XqsL1sFEBM_KT5r-avRee2lA4ohs4ZJac8k/s1600/Templates-tweet.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZWoU-ZnQr0g_eIJC2O_7Y4HgLg3k3XnY63bwfnYkQaja5kGKB5EOJau7gkRKgj-mjt6pt6orzEPKkqpmdz_ZtngCm9xvwfuEDLyutmjF2XqsL1sFEBM_KT5r-avRee2lA4ohs4ZJac8k/s1600/Templates-tweet.png" /></a></div><div class="MsoNormal">So what’s the solution? Not everyone is a visual designer, I understand that. But taking the time to understand the programs we use enough to at least tweak an existing template to better support our idea can go a long way. With PowerPoint, that means reading up on what the “Master Slide” is and how it can be edited. It’s a power feature when used as intended.</div><div class="MsoNormal"><br />
</div><div class="MsoNormal"></div><div class="MsoNormal">Of course creating a customized template is the best solution. If possible, utilize the expertise of an organization’s marketing department or hire a designer to create custom template(s) designed specifically around an idea or a common theme you often present on.</div><div class="MsoNormal"><br />
</div>Joseph Suarezhttp://www.blogger.com/profile/06768416079555182568noreply@blogger.com0tag:blogger.com,1999:blog-4790391693645889394.post-35498351515759643732011-05-04T05:17:00.000-07:002011-05-04T05:17:08.353-07:005 Reasons Why Good Visual Design is Important for eLearning<div class="MsoNormal">Next week I’ll be speaking at the <a href="http://www.trivantis.com/lectora-user-conference-2011">2011 Lectora User Conference</a> on the topic: “Graphic Design for the Rest of Us”. My talk will focus on the basic elements of visual design (color, shape, type, etc), and how they can be applied effectively in Lectora to improve the visual quality of courses.</div><div class="MsoNormal"><br />
</div><div class="MsoNormal">I’d argue that effective visual design of online training is just as important as effective instructional design. I’ll back up that claim with these five reasons:</div><div class="MsoNormal"><br />
</div><div class="MsoNormal"><b style="mso-bidi-font-weight: normal;">Good visual design is timeless. </b><br />
<span style="mso-spacerun: yes;"> </span>Sure design fads and trends may bend or break the rules, but the overall principles of good design themselves are set in stone. Learning them makes subjective design decisions easier to make, and increases the odds your design will stand the test of time.</div><div class="MsoNormal"><br />
</div><div class="MsoNormal"><b style="mso-bidi-font-weight: normal;">Good visual design is refreshing. </b><br />
Unfortunately, it is not the norm to see eLearning with a strong emphasis placed on visual design. So when it <a href="http://blog.cathy-moore.com/elearning-samples/">actually does occur</a>, it’s like a <a href="http://elearningexamples.com/">breath of fresh air</a>.</div><div class="MsoNormal"><br />
</div><div class="MsoNormal"><b style="mso-bidi-font-weight: normal;">Good visual design is engaging. </b><br />
When the visual design of an eLearning course syncs seamlessly with the instructional content, it creates a cohesive presentation that is much more likely to keep the user engaged. It sends a message that the content deserves the user’s attention. </div><div class="MsoNormal"><br />
</div><div class="MsoNormal"><b style="mso-bidi-font-weight: normal;">Good visual design aids learning. </b><br />
Bad visual design can end up being so distracting that it can inhibit learning. People get turned off to poorly designed courses. <a href="http://www.amazon.com/gp/product/0787977284/ref=as_li_ss_tl?ie=UTF8&tag=desig07-20&linkCode=as2&camp=217145&creative=399349&creativeASIN=0787977284">These</a> <a href="http://www.amazon.com/gp/product/0470547448/ref=as_li_ss_tl?ie=UTF8&tag=desig07-20&linkCode=as2&camp=217145&creative=399349&creativeASIN=0470547448">three</a> <a href="http://www.amazon.com/gp/product/013219158X/ref=as_li_ss_tl?ie=UTF8&tag=desig07-20&linkCode=as2&camp=217145&creative=399349&creativeASIN=013219158X">books</a> link cognitive research on learning to graphics and instructional design.</div><div class="MsoNormal"><br />
</div><div class="MsoNormal"><b style="mso-bidi-font-weight: normal;">Good visual design is tool agnostic.</b> <br />
Adobe Photoshop & Illustrator are the industry standard for graphic editors, but they don’t hold a monopoly on great design. The cost and learning curve to such programs can be a barrier for many, but fortunately cheaper, simpler tools are available such as those available for free at <a href="http://aviary.com/">aviary.com</a>. </div><div class="MsoNormal"><br />
</div><div class="MsoNormal">The same goes for eLearning authoring tools. Every popular authoring tool can enable good visual design principles. If not directly, then through the ability to import graphic assets created in other programs. </div>Joseph Suarezhttp://www.blogger.com/profile/06768416079555182568noreply@blogger.com0tag:blogger.com,1999:blog-4790391693645889394.post-36598072333370541642011-05-01T16:49:00.000-07:002011-05-01T16:49:24.970-07:00Image Transparency Explained<div class="MsoNormal"><span style="font-size: 12.0pt; line-height: 115%;">eLearning authoring tools are great for producing web based content without having to directly code any web languages like HTML, CSS, or JavaScript. However, the web doesn’t play nice all the time. Different browsers render things differently, and there are subtle yet numerous caveats one should be aware of. <o:p></o:p></span></div><div class="MsoNormal"><span style="font-size: 12.0pt; line-height: 115%;"><br />
</span></div><div class="MsoNormal"><span style="font-size: 12.0pt; line-height: 115%;">One of those caveats is image transparency. Some image types support it, others don’t, and still others only partially. To make matters worse, there is inconsistent support in older web browsers. Let’s see if we can make some sense out of all this.<o:p></o:p></span></div><div class="MsoNormal"><span style="font-size: 12.0pt; line-height: 115%;"><br />
</span></div><div class="MsoNormal"><b style="mso-bidi-font-weight: normal;"><span style="font-size: 12.0pt; line-height: 115%;">Image Transparency Basics</span></b><span style="font-size: 12.0pt; line-height: 115%;"><br />
The main file types for the web are JPEG, GIF, and PNG. PNGs can be confusing because certain image editors like Photoshop and Fireworks can save as low quality (8bit) and high quality (24bit or 32bit). Each of these image types has a varying level of transparency support as shown below when placed over a blue background:<o:p></o:p></span></div><div class="MsoNormal"><span style="font-size: 12.0pt; line-height: 115%;"><br />
</span></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivbn5OOvAPQSUaJc_DrltkdELXxBvK5_OJ_CvG8nltJ86iKWIp5sQEs2iZ9k4LSH36k4fGera3UIsckOA95rc85qiz5nAGr7-lr2v2jrAgRtVfvJwdR5HEuTHqC2g-u39CEr29zu9D_LM/s1600/ImgTypes.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivbn5OOvAPQSUaJc_DrltkdELXxBvK5_OJ_CvG8nltJ86iKWIp5sQEs2iZ9k4LSH36k4fGera3UIsckOA95rc85qiz5nAGr7-lr2v2jrAgRtVfvJwdR5HEuTHqC2g-u39CEr29zu9D_LM/s1600/ImgTypes.png" /></a></div><div class="MsoNormal"><span style="font-size: 12.0pt; line-height: 115%;"><br />
</span></div><div class="MsoNormal"><span style="font-size: 12.0pt; line-height: 115%; mso-no-proof: yes;"><v:shapetype coordsize="21600,21600" filled="f" id="_x0000_t75" o:preferrelative="t" o:spt="75" path="m@4@5l@4@11@9@11@9@5xe" stroked="f"> <v:stroke joinstyle="miter"> <v:formulas> <v:f eqn="if lineDrawn pixelLineWidth 0"> <v:f eqn="sum @0 1 0"> <v:f eqn="sum 0 0 @1"> <v:f eqn="prod @2 1 2"> <v:f eqn="prod @3 21600 pixelWidth"> <v:f eqn="prod @3 21600 pixelHeight"> <v:f eqn="sum @0 0 1"> <v:f eqn="prod @6 1 2"> <v:f eqn="prod @7 21600 pixelWidth"> <v:f eqn="sum @8 21600 0"> <v:f eqn="prod @7 21600 pixelHeight"> <v:f eqn="sum @10 21600 0"> </v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:formulas> <v:path gradientshapeok="t" o:connecttype="rect" o:extrusionok="f"> <o:lock aspectratio="t" v:ext="edit"> </o:lock></v:path></v:stroke></v:shapetype><v:shape id="Picture_x0020_1" o:spid="_x0000_i1025" style="height: 108pt; mso-wrap-style: square; visibility: visible; width: 375pt;" type="#_x0000_t75"> <v:imagedata o:title="" src="file:///C:\Users\Joe\AppData\Local\Temp\msohtmlclip1\01\clip_image001.png"> </v:imagedata></v:shape></span><span style="font-size: 12.0pt; line-height: 115%;"><o:p></o:p></span></div><div class="MsoNormal"></div><ul><li><b style="mso-bidi-font-weight: normal;">JPEG:</b> <span style="mso-bidi-font-family: Arial;">Transparency <span style="mso-bidi-font-weight: bold;">not</span> supported</span></li>
<li><b style="mso-bidi-font-weight: normal;">GIF:</b> <span style="mso-bidi-font-family: Arial;">Transparency supported (Low Quality). Matte with jagged edges</span></li>
<li><b style="mso-bidi-font-weight: normal;">PNG 8:</b> <span style="mso-bidi-font-family: Arial;">Transparency supported</span> <span style="mso-bidi-font-family: Arial;">(Low Quality).</span> <span style="mso-bidi-font-family: Arial;">Matte with jagged edges</span></li>
<li><b style="mso-bidi-font-weight: normal;">PNG 24:</b> <span style="mso-bidi-font-family: Arial;">Transparency supported (High Quality). No Matte Looks great, but can be large file sizes. <span style="color: red;">Doesn't work <b style="mso-bidi-font-weight: normal;">correctly</b> in IE6</span></span></li>
</ul><br />
<div class="MsoNormal"><b style="mso-bidi-font-weight: normal;"><span style="font-size: 12.0pt; line-height: 115%; mso-bidi-font-family: Arial;">Mattes</span></b><span style="font-size: 12.0pt; line-height: 115%; mso-bidi-font-family: Arial;"><br />
That ugly jagged white ring around the GIF and PNG 8 is called a matte, and will show up around any soft, anti-alias (fuzzy) edges such as drop shadows.<span style="mso-spacerun: yes;"> </span><o:p></o:p></span></div><div class="MsoNormal"><span style="font-size: 12.0pt; line-height: 115%;">One trick is to change the matte color to match whatever it will overlay. In this case, a matte color matching the solid blue background will appear as seamless as the PNG 24. However this technique’s limitation is exposed when placed over a multicolored background such as a gradient or photo.<o:p></o:p></span></div><div class="MsoNormal"><span style="font-size: 12.0pt; line-height: 115%;"><br />
</span></div><div class="MsoNormal"><b style="mso-bidi-font-weight: normal;"><span style="font-size: 12.0pt; line-height: 115%;">Myth: Internet Explorer doesn’t support PNG images!</span></b><span style="font-size: 12.0pt; line-height: 115%;"> <br />
In reality, Internet Explorer 6 and below only has problems rendering high quality (alpha) transparency PNGs. Low quality PNG 8 images with transparency work fine in IE6, and PNG 24 images will still display, however any transparent areas will render as a nasty grey instead. And both versions display without any problems whatsoever when there is no transparency involved.<o:p></o:p></span></div><div class="MsoNormal"><span style="font-size: 12.0pt; line-height: 115%;"><br />
</span></div><div class="MsoNormal"><span style="font-size: 12.0pt; line-height: 115%;">All other major browsers and later versions of IE don’t have any major problems with image transparency. There are numerous JavaScript workarounds available to force IE6 to display alpha transparency correctly, and thankfully it becomes less and less of an issue as IE6 usage drops.<o:p></o:p></span></div>Joseph Suarezhttp://www.blogger.com/profile/06768416079555182568noreply@blogger.com0