Letexa Blog

Another small step. The page Homepage -> Multimedia Courses is now generated dynamically. This far it was a static page.

No change at all from a users point of view - although it looks a bit different and now shows view statistics right there. However, it is another step towards a “real” community website, where posting content is possible for web users.

Should I announce every tiny step? Well, why not? This is the Change-(B)log!!!

Next: Ability to  upload “items” and create “courses”. To create a new course one has to create a course AND upload items. Items are any kind of content, Flash files, video files, images, text files, PDFs, etc. etc. Other content websites allow only videos, like the German commercial project learn2use.de I just joined. That makes management soooo much easier. This project aims higher. A course needs more than just video! One needs PDFs to print, tests, still pictures, HTML content (I have a content type “multimedia enhanced dynamic HTML”, where video/audio can be attached to an HTML page and it controls its dynamic behavior, the page does not need to be static but can employ dyn. HTML effects controlled by the audio/video, to make stuff move/appear/disappear/etc.). When you create a “course” you put the “items” - yours and those of other people! (if they allow it - compatible license types are checked and enforced automatically, i.e. in the future) - so you put the “items” into the course. The course itself has a “glue file” that can be HTML, or Flash. From there you link to the “items”. The course file only “glues” them together, i.e. it uses those reusable files (by you and/or others) and adds content specific to only that course. Sounds complicated? No, why, you do that any time you write a webpage and use a CMS (content management system).

Mörre

It turned out I could not use the Google Groups service to archive the mailinglist list@letexa.com. The technical reason does not matter, I found a service that is a MUCH better match for Letexa! The Mail Archive is a free but professional quality (it seems) service with a spirit very similar to the one of this project.

On the private side,  I am going to join a German startup learn2use.de, and take over responsibility for all the technology (i.e. “CTO”, but that title sounds a little grand for the current early but very promising state). I hope to be able to “leverage some synergies” between Letexa and that business, which means I’ll continue working on Letexa. It’s just a fun project, and I don’t care at all that right now I get only 5 visitors per day :-)  That’s because I know that if I tried I could get more, but I take my time. Besides, I use the site to experiment with designs and technology. Design: current Letexa design is supposed to be (remain) simple, with few images (none! except for some buttons and the logo) - and in black&white. Adding some AJAX recently, e.g. for the login, sure wasn’t a high priority from a project point of view (to say the least), but it sure showed me A LOT of things hard about AJAX. That’s not the technology itself, but managing a website and many different possible states that can happen when people with or without Javascript use the site, login using AJAX within a page and then press “Back” in the browser (which navigates to a page that had been created server-side in “logged out” state), and many other potential pitfalls.

Even though I’ve VERY few readers, I’ll keep adding to the change-blog, this is a documentary for later!

Mörre

PS: This latest entry also serves to test the new mailinglist archive, because this blog post is sent out via that list too

The “Contributors” section has changed. There is no underlying functionality yet, but the main contributor landing page now reflects what is intended. Next step is to implement backend functionality to enable uploading content, and to manage the content one uploaded. The framework for how this could look like has been set…

As usual, please report any issues. There are lots of things to consider - even more when one uses AJAX, as I do. For example, if someone logs in using the AJAX method within every page and then uses the browser’s BACK button one gets to a page where the user wasn’t logged in. So I had to implement code that changes the appearance of that page to reflect the now logged-in state too, even if it didn’t the last time the user was there… and that requires Javascript. There are even more issues when considering the various states of elements on a page (e.g. buttons: enabled or not) when you do it in PHP and/or in Javascript after loading…

Mörre

Yesterday I enabled site-wide user registration, login and logout. Today I enabled AJAX for the login.

This is a minor step, but important, since this is the very basis for enabling user content. By enabling AJAX-ified login I created a basis for a modern interface. The Javascript-disabled browsers still get all the functionality, but IMHO AJAX is not just a hype but really is a great technology for faster browsing.

I’m using SMF forum on my site. The new site-login uses the user data collected by SMF forum. However - and I’m quite proud of this - only during the login procedure itself I use SMF and its database. I avoid any additional calls to SMF, not even via the relatively lightweight smf_api.php API file they provide (compared to the native SMF routines in SSI.php)! After SMF user authentication I rely on the PHP session mechanism only. True, SMF does more sanity checks to ensure security, but when the only issue is to display to the user the fact they are logged in, and not a security critical action like withdrawing money or deleting uploaded content, it makes little sense to have all this overhead for a simple status message!

A few days ago I switched to swfobject 2.0 for Flash detection, and to having just one site-wide PHP template file for displaying the Flash multimedia content. One of the differences now: This new version of swfobject does not require Javascript to function. This is for the very few people who disable Javascript (the Firefox “noscript” plugin is quite popular…), but forgot to remove Flash…

Mörre

PS: If anyone finds a bug in this new login code send me an email, please! (webmaster@letexa.com)

Not much, I just added an asynchronous AJAX call to all course HTML pages to call a script on the server that increases the view count for that course by 1.

Interesting: In Firefox when I reload the course’s description page I see the updated view count immediately, on MS IE (7) I see the update only after two minutes - which is correct, since the script that loads the data incl. the view count for a course asynchronously (AJAX) sends an Expires: header two minutes in the future, to prevent repeat calls when a user does simple back/forth navigation.

Mörre

I made some changes “under the hood” that shall help me managing more courses. So far everything was each course with its own files in its own directory. So changes had to be done in ALL those many files. I now have just one top-level PHP file, and the courses utilize that file and only the text description for each course page is an individual file in that courses´ directory.

I also started utilizing mySQL. The “statistics” panel on the right on each course page is loaded AFTER the page has loaded using async. communication. I didn’t want to delay page load by waiting for those mySQL server data before being able to send the page, when that statistics data  is of only marginal interest to most viewers.

Everything works as before now, but internally I have amuch better foundation for addinng more courses now, and to add more features. So far that statistics data isn’tcreated, I don’t count “Viewed” yet, for example. I need to improve the Flash part of my infrastructure in order to do that first, because I don’t want to cound a page view as “course has been viewed”, but wait for a message from inside the Flash course to be sure people really DID view the contents.

Anyway, I’m slow, but this is a hobby project - even though a serious one! - and I’ll keep updating and adding over time! My own benefit: a field for experiments, a showcase, and a way to keep up with modern web technologies not just passively. Oh, and I still want to make this a community project, I already checked the feedback some time ago, but I still have some work to do. Of course, anyone is free to come into the project right now, but before I can actively seek contributors I need to provide a better base and better instructions and explanations.

Mörre

I’ve started converting the site to the YUI from Yahoo. The library doesn’t just provide a Javascript library but also a CSS library, and especially the grid part of that library is what I’m using. Also, for future AJAX functionality I prefer the YUI too over other JS libraries.  Since the parallel (German) website I’m developing for multimedia service offerings (with examples mostly, nothing sold there directly) uses YUI and since the HTML/CSS codebase for letexa.com needed cleaning up anyway (before adding more pages/stuff) it made sense to convert now.

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

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

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

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