Try These Ideas for Adding Web Content to Your E-Learning

Mar102010
Written by brian — Posted in Articulate Presenter

This guest blog entry was written by Articulate Customer Support Engineer Brian Batt.


ForWebObjects

One of the great things about Articulate Presenter ’09 is that you can easily bring any kind of web content right into your e-learning courses by using Web Objects.

In this article, I’m going to show you three examples of web content you can leverage in your courses, and how to insert them with Presenter.

Add a Google Map

Let’s say your client is a trucking company that’s going to start a new route from Texas to Wisconsin. You want to embed a dynamic Google Map into an e-learning course to show the new route. A Web Object is a nice tool for something like this.

Just go to the Google Maps page, enter your route, and click the Link button. Google will give you both a link and an embed code. The tutorial below shows how to use either of these as a Web Object in your course. As I explain in the tutorial, you can use the link to display the whole page, or you can use the embed code to create an HTML file of just the map itself. Though the second option involves a few more steps, you get the added benefit of being able to fully customize the way the map looks within your slide.

View this screencast at Screenr

Feature a YouTube Video

Another way you can leverage web-based content is by incorporating a YouTube video into your course. Check out the following tutorial, which includes instructions for making a YouTube video appear full-screen on your presentation slide. It just takes a simple tweak to the video’s URL.

View this screencast at Screenr

Add an Interactive PDF with Youblisher

Here’s another useful & free tool that works well for Web Objects. Youblisher will convert an uploaded PDF into a dynamic and interactive document that users can print, zoom, and leaf through. It’s a great solution if you need to include some documentation in your course but you want to make it look and feel a little more interactive. Here’s how to do it:

View this screencast at Screenr

Questions?

If you have questions about Web Objects, or you’d like to talk more about the ideas I’ve shared here, feel free to post a thread in the Articulate Community Forums. I’m there every day and would be happy to help you out. You can also feel free to connect with me on Twitter.

20 responses to “Try These Ideas for Adding Web Content to Your E-Learning”

1

Hi Brian,

Comments and questions.

Web objects in Articulate is pretty cool, but here’s a caveat. If the web content contains hyperlinks that open in the same window, and learner clicks on them, they leave the eLearning course. And if on an LMS, get recorded as an incomplete. Is there any way to block those hyperlinks from openning? Is there any way to force those hyperlinks to open in a new window? If not, then we may want to have the web object in Articulate open in the same window.

Does Youblisher result in some massive flash files?

One problem I’ve had embedding videos in this way is that, if you plop the web object in the slide as something less than full slide, it creates unsightly lines around the video. If you switch to full slide to eliminate those lines, the video simply plays in the upper left (as I believe your Goggle Map example did). If you enlarge the video’s display to fix that, a low resolution video ends up horribly pixelated. I found a workaround to display the web object at full slide and still have it centered in the slide. Code you index.html like this, pasting the embed code in the obvious place:

html, body {
margin:0;
padding:0;
border:0;
height:100%;
}
#main {
width:100%;
height:100%;
}
#maintd {
vertical-align:middle;
}

Jim Dickeson // Posted at 3:55 pm on March 10th, 2010
2

Uh oh. When I submitted the above comment, the blog software stripped out some html coding. What you see above won’t work.

Brian, if you would like the code so YOU could paste it in, send me an email

Jim Dickeson // Posted at 3:57 pm on March 10th, 2010
3

That google map thing is awesome!
I can imagine an activity where the student needs to locate a place or directions etc to answer a question.
very cool.

onEnterFrame // Posted at 4:02 pm on March 10th, 2010
4

We have to be careful with linking/embedding YouTube content in our material. We have to be cognizant of copyright. Just because someone else put something on YouTube, doesn’t mean it’s right for us to perpetuate the wrong behavior.

Steve Nguyen // Posted at 4:28 pm on March 10th, 2010
5

Hi Jim,

Thank you for your reply.

In regards to the hyperlinks, unfortunately, I do not know of any code that can be implemented to block hyperlinks from being clicked. I’m sure that there’s something out there, but I wasn’t able to find it. With that being said, you can easily see the advantage of getting embed code and creating the HTML page yourself.

In regards to the Youblisher file size, I honestly wasn’t able to find any documentation. I ran a trace log on one of their demos and it appears that they are loading the PDF through a specialized SWF file. So, my guess is that the file size is similar to the PDF that you upload.

In regards to the videos and the code, would you mind posting the code on twitwall.com (or a similar site) and then posting a reply to this comment? I think that information would be very useful to other users as well.

Thanks for your response!

Brian Batt // Posted at 4:28 pm on March 10th, 2010
6

Hi Steve,

You make a very valid point! If you’re going to use someone else’s video, make sure that you contact the owner of the video for a release and respect copyright laws.

The goal of using Youtube as a web object is to inspire people to use Youtube as basically a media server. Some people don’t want to embed 10 MB files into their Articulate presentations due to bandwidth issues. So, the workaround would be to publish the video to Youtube and then insert it as a web object into the presentation.

Also, you can use Youtube as an interactive e-learning tool. Here’s a great example of what you can do with hyperlinks within Youtube:

http://www.youtube.com/watch?v=qw3u52vfkKs

Brian Batt // Posted at 5:51 pm on March 10th, 2010
7

As a new Articulate user, I think is excellent and important information. But it will be difficult to use as reference material because some is in video and some is off-site.

Couldn’t Articulate set up a Wiki so we could have an easy way to access this type of information?

Or does it already exist and I just am looking in the wrong place.

Charlie

Charlie Kreitzberg // Posted at 7:26 pm on March 25th, 2010
8

Hi Brian

Has anyone had issues with slides freezing while running courses off an LMS site like Lingos?

We have at Save the Children and any info regarding this would be very useful

Thank you so much!

Jude.

Jude McBride // Posted at 10:27 am on April 15th, 2010
9

Jude are you using AICC or SCORM?

onEnterFrame // Posted at 11:26 am on April 15th, 2010
10

Brian

SCORM 1.2 then published to Lingos LMS.

Many thanks for your response.

Jude.

Jude McBride // Posted at 11:29 am on April 15th, 2010
11

I have noticed some trouble with various LMS’s SCORM api.
If possible you might want to try publishing as AICC.

onEnterFrame // Posted at 11:37 am on April 15th, 2010
12

Hi Brian,

Sorry I never got back to you. I failed to click the “Notify me of followup comments” box.

I have uploaded a text file to my site. You can get it at http://www.importexportgeeks.com/index.txt. If you go there, you will see a blank page because it is just a bunch of CSS and HTML tags. But if you do a View Source, it will open in notepad. If you do a Save As, you can save it to your computer.

It should be clear where to stick the embed code. Then when you close it, change the extension from .txt to .html.

Now I have another questions for you. Articulate Web Objects, if displayed at less than full slide, have a border that gives the impression of being sunken into the page. I need to get rid of that because it interferes with a needed background image. Removing fill or lines in Powerpoint doesn’t do it. I’ve gotten around this in the past by just making the Web Object display at full slide.

But in my current project, I need to turn off the Articulate navigation buttons and use hyperlinks on the slide for navigation. But here’s the problem. Even with embed code creating a player much smaller than full slide, the Web Object itself remains at full slide, and lies on top of my hyperlinks, blocking the links from being clicked. But if I make the web object smaller, not covering the hyperlinks, the links are accessible, but now I have the ugly lines around the web object.

Any thoughts to a solution?

Jim Dickeson // Posted at 3:07 pm on April 16th, 2010
13

Embedding the web object (as in the 2nd example with the Google Map) works fine when I preview it. However, after I publish, the web object doesn’t come up. The lines around it do, but not the object itself. Any ideas?

Cory Hansen // Posted at 4:39 pm on September 24th, 2010
14

I have the same problem Cory. Works fine locally too but when I publish to server the web object completely disappears.

Denise Wilson // Posted at 3:52 pm on September 28th, 2010
15

Cory and/or Denise,
Can you post a link to your course?
I’ll take a quick look at it.

onEnterFrame // Posted at 4:04 pm on September 28th, 2010
16

Hi Cory,

After you publish your content & view the web object in Internet Explorer, you may find that Internet Explorer doesn’t load the web object. This has to do with security permissions. You’ll find that Firefox & Chrome will load the map immediately. In some installations of Internet Explorer, IE won’t let you view both local and online content. However, once you upload your content online, the map will load as expected.

Denise – The content should work properly when viewing online. You might want to check your security permissions in your browser. Also, I’d recommend viewing the content in an alternate browser like Firefox or Chrome. If the web object loads in the other browsers, then that tells you that the issue lies in a security permission in Internet Explorer.

Good luck with your projects!

Brian Batt // Posted at 4:05 pm on September 28th, 2010
17

[…] Cet articule décrit Scribd. Un autre service est Youpublisher décrites dans cet article. […]

18

Hi Brian,

These tutorials are great – I’m having an issue however with embedding code. I’m trying to embed a Qwiki flash file (qwi.ki/fGKFI8) and don’t want the entire web site to show – just the flash file.

I followed your instructions to create the HTML file and inserted it in the same way using a web object. However when I preview or publish Articulate loads the folder where the HTML file is saved (instead of loading the file) and the user is required to click on “index.html” to load the file. I want the file to load automatically as it does in your demo.

This is the screen the user gets in the module:
http://dl.dropbox.com/u/14999829/Web%20Objects%20issue/Web%20Object%20issue.jpg

And here is the HTML file I have created – working as it should:
http://dl.dropbox.com/u/14999829/Web%20Objects%20issue/index.html

I’m using office 2003 and a 30 day trial version of Articulate 09 to see if we want to purchase it.

Thanks in advance,

Jared

Jared Cameron // Posted at 5:42 am on February 9th, 2011
19

[…] […]

20

[…] Adding Google Maps – Brian Batt http://www.articulate.com/blog/try-these-ideas-for-adding-web-content-to-your-e-learning/ […]

Some of the Best Articulate Studio tricks to make you a pro // Posted at 8:01 am on January 24th, 2013

Comments are closed on this post. Need more help? Post your question in the E-Learning Heroes Discussions.

Recent Comments