Adding Articulate Presentation to WordPress.org

Since coming across Articulate a few months ago, I’ve made quite a few presentations and loaded them onto our VLE. But a new project on developing open access resources meant that I needed to host the videos myself. This entry explains how I took my Articulate presentation and loaded it up onto a site I set up. In particular (it took me two days to do what should have been a 5 minute job!), I highlight the pitfalls I came across and how I got around them.

The good news is that once you have everything set up, it should take less than five minutes from publishing Articulate to being live online.

Website Hosting

Outcomes of Website hosting section:

You will have WordPress installed on your site
You will have a redirect ready to set up so that domain.com will redirect to domain.com/wordpress
You will have your site FTP details

I love WordPress and have recently started using WordPress.org to mange a website. My service provider, Blacknight, facilitates automatic installation of WordPress, so I can avoid WordPress’ scary-looking “Famous Five Minute Install”. I installed automatically, and selected a theme, and hey presto, my new site was live. Some issues:

Issue 1:

My website was “http://www.domain.com/” When WordPress is installed, it chooses a URL like “www.domain.com/wordpress”. But I’m greedy and I wanted my WordPress site to come up when I typed just the domain name, without the WordPress. I’ve done this before with another site, just changed the URL in the service provider control panel to “/”. This works, but boy it causes problems!!

The main problem is that this is fine if you are just going to be using the very nice WordPress site admin to upload pictures, etc. But because Articulate presentations involve lots of files and folders, you need to upload them all to the domain server and then link to them from your WordPress site admin page editing. Changing the url to “/” to match with the domain name causes lots of problems. This is a lesson I have learned and will never forget.

• Keep the URL as “http://www.domain.com/wordpress” or whatever you want the “wordpress” bit to be.
• To make a redirect to upload later, open Notepad and type in the following (replacing “wordpress” with whatever you decide, then save as “index.php” on your desktop (“index.php” may be different on your host – see below).

<?php header(
'Location: http://www.domain.com/wordpress' ) ;
?>

• Below, we are going to upload this index.php file to the server, and this will redirect domain.com to domain.com/wordpress

Issue 2:

To move the articulate files from your computer to the host server, you need to ftp them. To do this, you need to get the ftp address. In Blacknight, this is in the Webspace > Website configuration. Note the FTP address (something like 12.34.456.78), the log in and password.

My problem here was that I host two websites on my domain hosting package, and the Webspace was set to the other site. Therefore I was moving files onto my server, putting in what I thought was the correct address in my web browser and getting “File not found”. I hate File not found”!! 22 emails between me and Blacknight later, it turned out that I was uploading files to the wrong webspace. This won’t be a problem if you just have one domain on your server host, but if not, check that you have the right webspace selected. In Blacknight user cp, this is found in Webspace > Webspaces (oh it’s SOOO easy when you know how!!). Get the FTP address as described above and the login and password.

Articulate Presentation

Outcomes of Articulate Presentation section:

You will have your articulate presentation (Web output) published
You will learn the wise ways and use .swf and not .flv

Make your articulate presentation. Publish it for Web delivery. It’s that easy!

In mine, I had embedded videos in my presentation which I made in Camtasia Studio. Because I wanted to upload these to Youtube at a later date, I published them as .flv files. But when I got to the end and put everything on my website, it turned out the my service provider didn’t like .fly (something to do with MIME error, don’t know and don’t care), so I reproduced my videos as .swf format (using very handy batch publish on Camtasia) and republished my Ariculate with these.

David Masterson (Twitter = @elearning), a very helpful Articulatually knowledgable person, pointed me to a nice workaround if you were stuck with .flv files. This is to upload them to Youtube and embed web object: you embed a link “www.youtube.com/v/xyz” where “xyz” is the Youtube video extension, the bit that comes after the “watch?v=” in a Youtube URL- see presentation below for details. This works nicely, although does assume that you are willing/able to upload any and all videos to Youtube. I could have also inserted a web object and linked to hosted .swf files on the server.

Add Articulate Presentation to Your Web Host and Go!

Outcomes of this section:

Set up redirect page
Upload your content to the website
Link through your WP Admin Page Editor

The last thing to do is to upload your redirect page (just have to do this once) and your Articulate presentation. I used Cuteftp, which has a 30 day trial. The Articulate FTP option that comes up at the end of publishing didn’t work for me, maybe I made an error. I used the connection wizard in Cuteftp and entered in the details for my site (remembering the point about webspaces above). Once this comes up, you use it like Windows explorer.

To test out your FTP prowess, remember the index.php file you saved earlier? In the left hand pane of cute ftp, navigate to your desktop. in the right hand pane navigate to your root folder, so you are in your domain window. You will see an index file here – this is index.php for my domain host, it might be different for yours (e.g. index.html) – whatever it is this is what you should save your Notepad file, above, as. Drag and drop the index.php file from your desktop to the server domain.

The CuteFTP window, I have navigated to my root folder of my domain to find my index.php file

You can test if this works by typing in your URL: www.domain.com – it should redirect immediately to www.domain.com/wordpress, or whatever you set the URL redirect to be in the code above. If it doesn’t you need to retrace your steps. Check very carefully that you have this index file in the root folder of your host server.

Once you have confirmed you are in the correct folder, you are on the home straight:

• Navigate in the left hand window of cuteftp to where you have your articulate projects saved. Click and drag on the folder you want to copy across (the one that contains the player.html and all the other files) and drag it to the domain window on the right hand side of cute ftp – or copy and paste if you prefer. (You can make a sub-folder if you like to be organised).
• Navigate to the folder and note down the path to the file player.html. In my case below, it would be: www.mathsforchemistry.info/DMCsimultaneousequations/player.html – this is the link you will be embedding into WordPress.

Picture of Cuteftp where I have navigated to the file on my host server I want to link in WordPress

You can now leave the world of ftp behind and move into your WP-admin, by logging into that. (Usually http://domain.com/wordpress/wp-login.php). Create a new post (or page) and put in your jargon. Now you want to insert the link. In my page, I screenshot a page from my presentation (using PixClip) and made that the link. Publish and bask in the reflective glory of your new articulate online presentation!!

One final little trick:

When I had done all this, it looks great. The only issue is that the webpage or tab title is that of the articulate presentation. If you called it something sensible, then this is OK, but it is possible to change it to whatever you want:

• Find the player.html file in the my articulate projects folder of whatever presentation you are looking at,
• Right-click on player.html and open with Notepad.
• Scroll down a few lines – you will see “<Title> gobbledygook </Title>”
• Delete the Gobbledygook and put in whatever you want there. In mine I entered:

<TITLE>
Simultaneous Equations for Chemical Analysis | Dr Michael Seery
</TITLE>

• Save this and upload just this player file to the folder with this articulate project using cuteftp.

You can see the results of all my labours at my website – click on the image!

Future Plans

Looking at things to make the loading of the presentation snazzier – an embedded presentation which expands on clicking. Watch this space!