Letexa Blog

While it is true that nothing has happened under this URL I am still working on this project and will continue to do so. I realize my progress is painfully sloooooow. My priority right now is a German website that hosts some examples of multimedia content to support a small business that offers creating multimedia content. URL is here: http://euramer.com/ - but beware, the site may move any time (the domain  it’s under right now is a “leftover domain” for which I’ve no real purpose), and at the time of this blog entry only the homepage itself exists.

I was inspired by the new ibm.com design after my original proposal got the thumbs-down from some friends of mine whom I had shown it to…

I’m using Yahoo’s Javascript library, YUI, which I really like.

However, I think that homepage has some nice things that MANY sites, even large one, are missing:

- The page is a centered fixed-column width design. And yet, if you increase your browsers font size the pagewidth is going to increase too! Many sites with such design keep the original width, so that less words fit on one line. Bad for people like me with a 24 inch monitor who want to move away from it, e.g. to sit on a hometrainer while reading

- If the above page width increase happens the image or Flash object under the menu increases too! Now this is something that NO site I’ve seen so far does. If their font size increases i is for the HTML text only, but all images and Flash stays the same pixel size. This is not true for Internet Explorer (7)’s zoom feature which indeed increases the size of everything on the page - a nice feature of that browser (which in many other respects still is inferior to Firefox from a web programmers point of view), but if you use IEs “larger/smaller font size” menu setting it has the same issue. I dynamically increase the size of the image/Flash object when such a font resize occurs. I keep saying image/Flash because right now I have an animated GIF  under the menu, but this is only a placeholder for a Flash object. Inspired by ibm.com, as I said… I have little trouble with the “should I use Flash there” question since the entire site is about using Flash, the business is about creating multimedia content using mostly Flash after all, so anyone who doesn’t like Flash shouldn’t be there in the first place…

Mörre

http://letexa.com/courses/9/

If you program in Flash and are interested in building an image viewer or a print preview dialog, this courselet might be for you. It is the first example of interactivity in a Letexa course.

Mörre

http://letexa.com/courses/8/

It is the first version of this courselet. It is not complete, contains errors and problems, and still could be MUCH improved. It took a lot of effort to get even to this point…

Mörre

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.