General discussion

I guess the basic principles for what the end user can see can be described as this:

HTML5 defines Structure (And some functionality like video/sound etc).
CSS defines Presentation
Javascript defines Behaviour (Interactivity).

So far so good, but then what for me something still difficult:

When I open a h5p module and looks into the files and file structure, how can I know which html5/javascript code/files that belong to the interface that the courseware author will see, and which one belongs to the interface that the end-user or the student will see?

The demos published by h5p.org have two "buttons" "download" and "embed".

When you are using the "embed" option you can use one framework (cms) for running the h5p modules and one other framwork/cms to make them "public visible". With this option you can "embed" h5p modules in a lot of different platforms.

Like here I am running the h5p presentation module "inside" Mediawiki but actualy it's not, its just your demo h5p mudule that is embedded into the Mediawiki page.

For technical training purposes you can make quite easy "animations" by just making a "multi layer presentation" of more than than one image. This can be used for such things like showing "different states" of technical equiment.

As an excample, I have made one Flash animation/presentation that shows two states of an elecrical relay here:
http://elektrofag.info/animate/kontaktoren/