Letexa Blog

There have been small changes every day - same as I said previously applies (about slow progress at this early stage despite regular work on this project).

I have updated the media control component and the Flash (vPlayer.swf) video player object. Reminder: I put the things that I absolutely cannot do with “pure” web techniques (HTML/CSS/JS) into a Flash object, and that is playing audio and video and to do so in a way that still lets the video interact with the rest of the page.

So I worked on this interface and the interaction between Flash and the page. The result is the Media Control (play/stop/sound vol. up/down, etc.) box at the top of the course page (see homepage, first course - explanation there). The things you cannot see is callbacks from Flash to the JS in the page, and that I organized the three layers I talked about earlier - so lots of changes “under the hood” have happened.

One - there is global Javascript needed for all courses. Two - if someone provides their own template (see last changelog-blog entry), they can customize the interaction between elements in their own HTML in their own JS file(s), and use the API of [ONE] to get info from the Video object (example: the user interface, i.e. the course template, probably wants to exchange the “Stop” for the “Play” image or text when the video play status changes, and much more) and to the object (example: user presses the “Play” button -> start the video).
Three - The course itself, which basically consists of JS files - later generated from XML, now written manually - describing the behavior, and which (text,img,etc.) objects go where and when into what spaces (DIVs) in the template (which can be any course template, completely altering look&feel).

Right now I still have the issue that Flash does not send a “completed” event when the Video is over, as it should (Update one day later: got it - as usual, my fault!). I get all cue point events (to trigger actions on page), volume setting works, pause/resume works.
Next task: adding cue points - I use manual AS cue points and not FLV embedded cue points, following the strategy to put as much as I can into the standard web techniques and not into Flash. Embedded cue points will be supported, I have to add to the JS init function and the Flash object code that queries all embedded cue points and sends them to JS before setting the manual ones. Also, I’m going to disable any cue points that are not for the courses to avoid that they trigger events - which cue point is for the course is determined by its syntax/name.

Mörre

Course test page http://letexa.com/courses/1/ (URL changed: updated 21 November, now points to parent page which should give a more stable link for now) now has a flash sample video with working controls. The controls are HTML/Javascript. It took some time to figure out the peculiarities of the Flash “ExternalInterface” for Flash/Javascript interaction. For example, it first worked in MS IE(7) but not in Firefox, later it was the other way around. One doesn’t like it when the flash object is in a container (div) that is “display:none”, the other one doesn’t like “visibility:hidden”. I had to read through semi-religious wars of factions who favor Javascript to embed Flash, others want nothing but the OBJECT tag, etc. These fights are about (W3C) standards vs. “practical solutions”.

All the details take a loooong time to figure out, the website looks as if I worked on it only 5 minutes per week but in fact I’m spending almost ALL my time on it!

This reminds me to point out (again?) why there is Flash on these pages: I want multimedia, and there is no other/better way than Adobe (Macromedia) Flash right now. I’m going to use the Flash object as the “timer” of the course/presentation. That means I am going to add “cue points” (a flash term) to the video/audio stream. Basically, these are events that trigger Actionscript functions, which (here in my project) in turn call Javascript to do something on the page, e.g. change a text or a picture on the page. There should not be too many cue points because I don’t trust Javascript to keep up with the Flash media stream on slower computers.

Why not do it all in Flash? Well, since some day I don’t want to be the only one working on this I prefer a format that more people know and accept, so I use Flash only where it is absolutely necessary - for the multimedia, which I cannot do in HTML/CS/JS (all I can do is choose which proprietary technology I embed and that’s definitely Flash).

The idea is to have three kinds of files:

• Contents, i.e. course text, course audio/video, pictures, etc.
• HTML/CSS templates
• Description file(s) for the dynamic behavior of the course, i.e. the sequence/flow of the course in time, like which picture or text to show at what time.

The dynamic description shall some day be XML. The templates determine how the course looks like. Each container that is to hold text, images, etc. is to be defined in the templates (but without contents, or if there’s contents it is ignored). Those containers’ ID-tags are to be used in the dynamic description files to set which contents goes into which container at what time.

Because of the separation of template, behavior and content it will be possible to a) reuse, change or edit the content separately easily in its own format (text, gif, audio, etc.), b) use the same content and behavior with different templates, e.g. to use a different organizations “look&feel” without having to re-make the course itself (as long as the same container - e.g. div - ID-tags are present in the templates), c) change the behavior (flow) of the course simply by editing the (XML) behavior description, e.g. to easily and quickly insert additional content, and if this is done without introducing new containers in the templates this change will work across all templates using this course behavior description file!

I think this is a great flexible base for reusable course creation for the Internet!

Mörre Noseshine (a Letexa webmaster)

I’m preparing the very first course (http://letexa.com/courses/1/). Progress is slow, because designing practically from a blank sheet is tough, and so much depends on these very first pieces of infrastructure! It really is not much, but as with any building, the very first stones don’t look like much but later tons of others need to be supported by them. So I rather take my time and think three times, and go back to an earlier point many times, rather than rushing forward.

I also needed to do some research about related technologies that I am going to use in the courses. For example, the decision for HTML or a Flash-only course infrastructure is tougher as it may seem. Flash is a must - because of the video alone. Mediaplayer? Windows only. Realplayer? Displays too many ads for my taste and is too intrusive, too few people have it. Flash just released the first Beta of Flashplayer 9, so in 2007 Flash is going to be a great platform for the multimedia stuff. Still, I’m going to use HTML for the course with all the problems associated with it, because this is better for working together on such projects - many more people know HTML than Flash/Actionscript and (D)HTML components are far easier to integrate (oh yes, that so-called “Web 2.0″ stuff).
So future plans dictate (D)HTML/CSS, multimedia dictates Flash.
If only the major browsers would natively support SMIL…

Mörre Noseshine

The final pre-start homepage layout, i.e. the one used when the very first useful contents is brought online, is available now. There’s a big yellow warning… no links work yet, it’s really just that one single homepage. Design - for me - is trial and error a thousand times over, so I’m slooooowwwww… but steady, there is some progress every single day!

Mörre Noseshine

Hi,

This new website is a pet project I started back in 2005, but I’m going online only now - with no content at all yet (for a few more days), towards the end of 2006, after returning from a two-month trip to Odessa, Ukraine, for improving my Russian.

I started this blog as a logbook of changes made to the website, nothing more.

Regards,

Mörre Noseshine