Digital Workshop

Following the format of the last series, below are a series of ten intermediate videos for working with Opus Pro 9. This time the primary focus will be projects that publish to HTML5 although some of the lessons will apply to other publication types as well. You will need a basic knowledge of Opus (or at least followed the previous lessons) and certain lessons will require understanding of other concepts such as how to use an LMS as well as having access to additional software - all of which will be open source or freeware.

https://www.youtube.com/playlist?list=P ... 4ucrELVYhq

As each lesson becomes active, I will add the content for that video:

Lesson Eleven - Opus Pro HTML5 - Publishing - HTML5 Cross Platform

1. Switching between Opus Pro and HTML5 Types.
2. Understanding the defaults of publishing.
3. The caveats of working with HTML5.
4. Creating a Single Page Application.
5. Hash tagging for browser navigation.
6. Multiple Page outputting.
7. Using Opus HTML5 with other web pages.
8. Separating the code (JavaScript) and structure (HTML).
9. Making it readable.
10. No HTML5.

Software & Sites
http://brackets.io/
http://live.interaktiv.co.uk/?article=tips
http://activities.interaktiv.co.uk/sudoku-touch/

Lesson Twelve - Opus Pro HTML5 - Tools of the Trade

1. Installing the XAMPP Web Server.
2. The XAMPP Control Panel.
3. Publishing to htdocs & localhost access.
4. Using default files - the index.htm
5. Hidden HTML5 Errors.
6. The case for debugging tools.
7. Scripts rock, but Actions are safer.
8. Sending messages with Debug.trace.
9. The Console API for power users.
10. More firebug in 30 seconds.


Software and Sites:

XAMPP: https://www.apachefriends.org/download.html
Console API: https://developer.mozilla.org/en/docs/Web/API/console
Firefox: https://www.mozilla.org/en-GB/firefox/new/
Firebug: https://addons.mozilla.org/en-US/firefox/addon/firebug/
FireStorage Plus: https://addons.mozilla.org/en-US/firefo ... rage-plus/
Chrome Console: https://developer.chrome.com/devtools/docs/console

Lesson Thirteen - Opus Pro HTML5 - Cookie Monster

1. Reading & writing cookie actions.
2. Cookie name contamination.
3. Cookie data insecurity issues.
4. Domain implications.
5. Different browsers, different cookies.
6. Cleaning up the cookies with JavaScript.
7. Opus variables in JavaScript.
8. Getting & setting cookies with JavaScript.
9. FireStoragePlus' built-in functionality.
10. Cookies for the session only.

Software and Sites:

W3C Full Storage Specification: http://www.w3.org/TR/webstorage/

Lesson Fourteen - Opus Pro HTML5 - Lights, Camera, Action

1. Audio & Video Codecs.
2. Basic Video Settings (Bit-rate & Resolution).
3. Advanced H264 choices (Profiles).
4. Containers - The MP4 box.
5. Browser Compatibility - Can I Use?
6. Device Considerations - One Size Fits All.
7. Web Video in Opus 9.5
8. Playing with Video Actions.
9. Windows Fonts in HTML.
10. Unicode Characters.


Software and Sites:

A selection of free transcoders
https://sourceforge.net/projects/tenc...
http://fixounet.free.fr/avidemux/
http://www.xmedia-recode.de/en/downlo...
https://handbrake.fr/

Explains the Constant Rate Factor: http://slhck.info/articles/crf
Explains the H264 format: https://en.wikipedia.org/wiki/H.264/M...
Video used in Lesson: https://www.youtube.com/watch?v=QEfGT...

Browser Support of MP3: http://caniuse.com/#feat=mp3
Browser Support of AAC: http://caniuse.com/#feat=aac
Browser Support of MPEG4: http://caniuse.com/#feat=mpeg4

Lesson Fifteen - Opus Pro HTML5 - Hey, Mr POSTman - Communication with PHP

1. Getting to know your PHP with phpinfo()
2. Creating basic PHP scripts.
3. It's in the $_POST.
4. Echo, Echo Echo.
5. POST Web Data Action.
6. Using Query Strings.
7. Firebug's NET Panel for Debugging PHP.
8. Relative or Absolute links and don't forgot CORS.
9. IF THEN ELSE there and back.
10. Waiting for the reply aka the Variable Change Trigger.


Software and Sites:

A selection of editors for PHP
https://www.sublimetext.com/
http://brackets.io/
https://alternativeto.net/software/brackets/


The Official PHP Documentation: https://secure.php.net/docs.php
Cross Origin Information: https://en.wikipedia.org/wiki/Cross-ori ... ce_sharing

Lesson Sixteen - Opus Pro HTML5 - Advanced Export - Headers

Lesson Seventeen - Opus Pro HTML5 - The Mashup - Adding custom HTML5 Content

Lesson Eighteen - Opus Pro HTML5 - Starting with SCORM

Lesson Nineteen - Opus Pro HTML5 - Who, What & Where - The Question Object I

Lesson Twenty - Opus Pro HTML5 - How, When & Why - The Question Object II


</mack>

Lesson Eleven:

In this lesson we look at various publishing options. One of these is to use the hash tag to add browser navigation. At present, Opus does not appear to return to a bookmarked hash tagged page but it is possible to do this manually using this snippet of code:



1. Create a blank splash page and add the code above to a script object.
2. Change myStartPage to the name of the page you want to start at if no hash is found.

Now when somebody bookmarks a page in your project, it will return to that page or you can give out hashed links to have users start at a specific place.

</mack>

Lesson 11: Brilliant video Mac! I never realised that Opus could output HTML5 in so many ways. I'm having to work with WordPress at the moment and this information will be very helpful. Many, many thanks for all your efforts, they are REALLY appreciated.

Paul C.

Thanks Paul,

Glad it's useful. We primarily work with Moodle which does accept Opus HTML5 in various forms but decided as I was installing XAMPP in Lesson Twelve, that I'd try a publication on Wordpress and it seems to have an issue. The way Opus HTML5 works with handling mouse / touch events appears to be out of alignment. I don't use WP normally, so not sure if this is a configuration issue or something to do with Opus. Have a go and see but I'll also email DW and highlight the issue.

However, there is a simpler way of getting Opus HTML5 content in Wordpress and that is to copy the DIV output files (IE The three in the video) to the server and then add an <iframe> to the WP post in text mode with the .htm as the src. This appears to work fine.

</mack>

Mac, thanks for the really helpful advice. I have only skilled up on WordPress because the motorcycle club I belong to has its website written in WordPress and they asked me to help make some changes. I will have a look at the mouse problem that you have discovered to try and replicate it. I hadn't had any problems with the alignment of the mouse. The only problem I had was finding where to put the javascript file in the WordPress installation. I think it goes into the js subfolder of the themes folder, but I still have to do more checking on this solution. I didn't use a local server running XAMMP, but ran the WordPress webpage online. I'll have a look at all the output formats over the weekend.

Regards

Paul

Lesson 12: Opus Pro HTML5 - Tools of the Trade

Mac,

Just watched the latest lesson. Another very helpful video.

Many thanks

Paul

Lessons have been re-ordered slightly. SCORM has moved and fifteen is now:

Opus Pro HTML5 - Hey, Mr POSTman - Communication with PHP

A couple of pointers from other posts in the forum:

1. Security.
2. Opus is responsible for the sending of the data and handling it on return.
3. You are responsible for building the script that processes the data.
4. Stop using old posts / tutorials - as of today, look for $_POST and mySQLi
5. Buy a beginners book published recently. The Visual QuickStart Guides are usual good.
6. Security. Forget it twice, shame on you.

</mack>

Haven't forgotten about these.

The rest of the series should start going live about Easter.

</mack>