Letexa Blog

Today I added a new item I worked on the last two weeks. It’s a commercial product presentation, but the product is an open source product and can be downloaded from the company freely. Also, by paying me they allowed me to improve my course interface flash actionscript code - I used the same framework for their presentation which I’m using for Letexa courses.

Right now I’m working on more Mozilla Thunderbird course content, I just started developing a n interactive multimedia help for the options dialog. You’ll be able to use the simulation of that dialog as if it was within Thunderbird and get explanations for all items.

Mörre

a) Some website updates.

b) The player technology has changed (improved slightly) but there is no new content today. I spent the last two weeks on a for-money-project for Open Xchange, producing a 15-min multimedia product demo. I used the opportunity to improve some aspects of the Flash player code for Letexa projects. Now it’s time to produce some more content for THIS site.

Mörre

Small changes in the Flash of the “About Email” courselet posted yesterday for more operational consistency, no change in contents. Used the same courselet framework for also extracting About News and About RSS from the ill-fated large Thunderbird course. This road looks promising, I’ll keep riding it… i.e. I’ll release such small pieces and stop working on the large one - the amount of course contents I am going to create will be the same but it will be much more shareable, manageable, viewable etc.

Mörre

I added some text to the About section.

I asked on the Mozilla Thunderbird forum what they thought about course #1, about Thunderbird. I got the promise to get a link to this site once the course is ready.

Also, the responses and writing the additional About text got me thinking - my mega-package of a course (once ready it would/will be quite big) is not exactly what I’m propagating. Shouldn’t I create lots of small pieces and make them available, and then create a course out of the pieces, rather than one giant Flash file, hard reuse?

So I’ve started taking the course apart, and the first result is a new “courselet” (also a new word, I use it for something that’s too small to be a called a course) “About Email”.

From now on I’ll create many small pieces, and only when all pieces are ready I assemble them into a full course - which can be done via HTML - or in a giant Flash file, as I started doing. Also, the pieces can be used for anything else, for other courses for example. A courselet about RSS in general (another part of that big Thunderbird course), for example, can be used in more courses than one about Thunderbird!

Mörre

Today I uploaded an updated version of course #1 for Mozilla Thunderbird. Now section “Basic Setup” has been updated and now has contents in section Background Information “About News”, not just in “About Email”. All others are still empty. Please note that navigation within these two audio-supported parts still does not work. You may scroll within the audio, but the screenplay won’t be in sync then, unless you get to the next audio “cue point event” when the screen will be synchronized with what’s playing again. Working on it - only a simple matter…

Update 8 July: Small design updates to this first course (e.g. to the nav buttons, make them simpler); volume bar works now.

Update 9 July: Play controls work (seeking, forward, back); Added a “return” button to the still empty menu points (only “Installation” and “Basic Setup” of the Thunderbird course have contents thus far), until now you where stuck if you navigated there.

Update 10 July (very late 9 July, really): Added “Basic Configuration” -> “Background Information” -> “About RSS” section. I found navigation does not work relliably - because I use gotoAndPlay (Actionscript 2.0 code). With gotoAndStop it would work. This is because I have a frame-by-frame setup, with stepping forward triggered by the video/audio file (”cuepoints”). I found if I add one more (non-key)frame for each of those frames it works, have to do that or find another workaround. Flash is full of surprises and unexpected behavior…

Update 10 July: Now navigation should *really* work.

Although it seems nothing has been going on since January, that’s not true! I kept silent on the website only because I switched to a different technology - all Flash - and had to start from scratch programming a player framework to put the course into.

Yesterday I put the first course online. It is still under development, but this is the first time I have something more than this blog to show!

Under http://letexa.com/courses/1/ you can find this course. As of posting time, only the first two items “Installation” and “Basic Configuration” have contents. The more interesting one - with sound already - is under “Basic Configuration” -> “Background Information”. The playback controls (forward/back/seek) don’t fully work yet, but you can use the seekbar to go to the end of the audio to go to the end if you don’t want to wait the full 6 minutes!
Development is progressing much faster now, since I finally have the framework in place. I decided to go all-Flash - for many reasons. In a much later stage I would like to have course contents and course behavior separated (as I said in previous posts here, read there), and then any player could be programmed to show the actual course. This way we’d be independent of Flash, but for know that’s the only really viable x-platform multimedia technology.

Mörre

Not much - i.e. nothing - seems to have happened - true on the surface. What is going on: First, private, I found a new girlfriend and we are both convinced it’s for live, so I was - am! - pretty busy (just moved into her apmt. 1/1/07). Second, I decided to do some research for a month or two on the currents state of web application development, buzzwords J2EE and the entire huge Java-based solution stack, EJB, XML, SOAP, etc., tools like Eclipse (I actually was a founding member of Eclipse, in it for SuSE, but I wasn’t really interested and was chosen only because I was closer and able to praticipate in the Eclipse board meetings) or Netbeans. I also want to look at some Javascript frameworks (GUI+AJAX) - although I want my core site to remain simple and Ajax-free. However, given the nature of Letexa, it shall be possible to provide different interfaces, since Letexa is not a website at the core but much more.

Right now I’m looking at Ruby on Rails and the REST issues/discussions (see the Rails homepage and Rails 1.2 notes for an entry point). I decided to try Rails after getting through some of the discussion - I must say all this W3C generated stuff like XML schemas and the entire collection of buzzwords indeed is a huge turnoff and pure useless complexity.

Mörre

PS: Nice links. Keynote - long:
http://www.scribemedia.org/2006/07/09/dhh/

Slides for the keynote:
http://www.loudthinking.com/lt-files/worldofresources.pdf

Also see http://www.loudthinking.com/arc/000593.html - only as entry point to many more blogs and URLs.

First, the pointer demo/testing ground I talked about in the last two posts has moved to the second “dummy course item” on the homepage. The first one now is being used for development of a “real course” - which in this case is the overview over this very infrastructure itself, which is being developed simultaneously!

The video/audio still does not play any part in the “presentation”, neither does the navigatin work, the contents just plays (it’s not much). It is going to come last. Then I can switch the functions controlling the presentation from Javascript “setTimeout()” to being triggered by cue points in the flash video - i.e. it will cost me a minute at most. So of course I’ll do the video last and develop the presentation itself, i.e. contents, text and “flow”.

I am using a function that dynamically resizes all text components of the presentation to the maximum possible - you can try it out by using a very small or a very large window. You will be able to see that the text will always use all space, because it is resized.
I do that by increasing the text size until clientHeight is less than scrollHeight, and if that is so I stop and go back one step (the very last size increase caused page contents to overflow).

Next: Finishing the presentation and with it the infrastructure it explains. Implement navigation. Create a video - the texts and images are supposed to HELP the presentation but not BE it, after all. Then switch to cue point control, et voila - first course is ready. This is still going to take some time… and of course, it’s never really finished since it is going to continue to be developed, both the infrastructure (code) and the course showing how it works and how to use it.
Mörre

I started publically explaining in greater detail what the purpose of this web based project actually is. For this purpose I began updating the “About Letexa” pages. A side effect is that I hope to get better organized (inside my big head ) when I have to write a detailed explanation.

I just tested MS IE 6 and it does not work at all. I have no plans to add support for this browser anytime soon.

One thing that was very nice to see in IE6 was the problem described for IE7 too, the resizing issue, only that one has more time to see it. When opening a drop from the menu button by clicking on it, as long as the mouse does not actually enter the dropdown menu both menus have one line that initially is displayed on two lines. As soon as the mouse enters the dropdown menu it is made wider and the two lines fit on one line. Same as with IE 7 - only IE7 seems to work better from a users point of view because the resizing happens so fast it’s almost unnoticeable. So users think IE 7 is a much improved browser while in fact it has many of the same problems IE 6 had!

This is the resizing issue:

Another issue in IE 6 (at least on Win98, which I’ve running in VMware to be able to test IE 6 at all) is that some characters are not available. The triangles in the menus, indicating there’s a dropdown menu when you click there, are not available in the fonts used by IE6. Maybe it’s a Win98 issue. I use special characters farther “down” in UTF-8, like arrows or filled triangles, in order to avoid images. Full UTF-8 support in all browsers would remove the need for quite some overhead in HTML pages, where special characters need to be inserted using image objects… inline text saves bandwidth, is more consistent (resizes with the text!), and overall better. Well, maybe I have to exchange my UTF-8 special characters for images now… but I’m pretty sure I don’t want to develop for IE 6, it’s complicated enough already!

The main web pages, of course, will work with IE 6. Just not the courses. I think that is acceptable, a) because the course is “software” and if people want to see the course there are perfectly working free browsers available, b) IE 7 will within a year or two replace most of IE 6 browsers out there, and c) that additional time until the vast majority can view our pages using a more modern browser is not really a problem since this project is going to take that long anyway before it is going to have any significant amount of content. On Linux we have to wait for a final Flashplayer 9 version anyway (FP8 is the minimum required because of the video codec I use, first made available in FP8, but there never was an FP 8 for Linux). The current FP9-beta for Linux doesn’t play a video to the end.
Also, the pointers now support DIV based (resizable rectangular) pointers too, see yesterdays changelog entry.

Mörre

Example (valid only today I guess, since I continually edit that page to test whatever aspect I’m working on that day): See the homepage and there the first link to the test course. A static image of how the page looks like is here (184K, GIF).

What I did was this: During a running presentation one needs to point at certain areas occasionally. I created 6 image pointers, 2 basic types: one arrow pointer in four variations (directions) and one circular pointer in two variations. It is possible to show and move those pointers around on top of the presentation area. It is possible to use relative coordinates, relative to any given HTML object (as long as it has an ‘id’). I tested it all with FF 2.0 in Linux and Win XP and with MS IE 7 - the same browsers I test everything with. The current test page animates 4 pointers (in sequence, not all simultaneously). The video object events that later are going to control animation and the presentation have not yet been fully enabled, that is the next step after the basic animation functions are done. TODO with pointers: DIV based pointers to enable rectangles. There advantage: the size can be controlled by Javascript, e.g. to be the same (maybe plus some padding) as the object that is to be pointed out by that pointer. Image based pointers are fixed size, shape and color, obviously.

By now I’ve seen the MS IE 7 behavior described below more often, where it suddenly and without any reason changes the layout of an object although nothing on the page has changed. Below I saw it in a window UL-based drop menu object (for a millisecond it displays one LI on two lines and then immediately resizes it to a wider width and one line), but the above demo page showed the same behavior while the (absolute positioned and with higher z-index - i.e. not influencing the layout!) pointers where moving to the left of the left text box, the text box moved a little. Ergo: MS IE 7 still is significantly worse as a browser than Firefox. Even though users won’t notice, web designers looking for standard (compliant) behavior do!

Mörre

Minor UI updates, for example the menu. Looked horrible on IE, works now. Also, I found IE(7) re-sizes a drop menu as soon as it is displayed - WTF??? And, worse, when I add a div.onresize event handler function to recalculate the shadow (for 3d effect) size I put below that menu IE7 freezes! Two bugs at once - I dropped the shadow. Not that this is important. I also found with IE(7) I have to set z-index not just for position:absolute, but also for position:relative, or the drop menu background is transparent (i.e. the contents of the drop menu is above the page, but the background is not, causing havoc). So nothing important happened today.

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