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:
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)
