Web Programming

Alliteration and bad pun. Good start :)

One of the features the language app will need is some sort of module editor. Although the XML format of the scripts is straightforward to anyone used to hand editing HTML, a lot of other people will not have a clue. Therefore a WYSIWIG would be a cool addition. And lots of X’s may be the way to go.

Although XForm support in browsers isn’t exactly stellar, the fact that only script editors will require means that needing a plug-in or extension isn’t such a big thing. And I get brownie points for being Web 2.0 as well.

I’m going to assume you know what XForms and XSLT are. If you don’t, then go find out. I’ll probably explain in a future post, but for now just accept them as “cool” :P

Basically a module is included directly into the XHTML source of the page. The only change is the addition of a namespace declaration (which are normally absent from the modules). XSLT is then used to add some nice formatting to the conversation along with XForm stuff for editing (including adding/removing elements). This makes the server side code really easy since the whole XML of the module gets posted back to the server.

In theory the XSLT shouldn’t be needed since XForms can do repeating and stuff. The only problem is I don’t think it can handle recursion which is a bit of a limitation.

There is one bit of the XSL that I’m stuck on there. I have the XML fragment in the head of the XHTML document. I need to be able to transform a copy of it and place it in the document body, but keep the original intact in the head. Does anyone have an XSL snippet to do that?

The still unnamed language learning app is almost ready for a first public viewing. I’m just trying to get some audio of some other than myself. Firstly because I don’t like really hearing my own voice (and for this purpose my less than perfect pronunciation is too obvious) and secondly I need at least two people just for it not to be confusing.

In the meantime I thought I’d share an example of the script file I’m using: EntschuldigenSie.xml. It primarily contains English translations although one phrase is done in a few more languages. It does highlight one possible issue. I had to change the German ß to ss. Although Windows seems perfectly fine with Unicode file names (internally it uses Unicode for storage (either UCS2 or UTF-16 - not sure which)) PHP refuses to open them (fopen, file and file_exists for instance just don’t work) and Apache 2 seems to have issues as well. For German there are workarounds but for other languages it will get fiddly. This might not even be a problem on Linux where it will ultimately reside and it only affects file names which only have to give you a rough idea of what’s inside. But still, it’s annoying…

The most important bits of my cool language learning web app are done. Here’s quick overview of how it works.

Everything is split into modules which are XML script files and accompanying audio files. Currently one type of script is supported, a “conversation”. This contains a short (less than 10 sentences) conversation with sub elements all marked up in XML. Sub elements are phrases, terms and notes. At the moment phrases and terms are handled almost identically. Notes are little explanations or possible stumbling points (for example the test script I have alerts the listener to the difference in the ending between “Ich verstehe” and “Sie verstehe_n_” in German). Any element of a conversation that is to be repeated is named (literally - the XML tag is given a name attribute). The system keeps track of the number of times a name phrase/term is played to the user and when it was last played so the automatic repetition system can work.

A lesson is currently very simple. A module is loaded and the conversation is played straight through. Then the named phrases/terms are played* with translations. Then any phrases/terms scheduled for repetition are played*. The repetitions are actually determined before the conversation is played however so that if too many are required then no new conversation is played.

* Played in this case means a specific format. First the native version is played, then a pause, then the translation is played twice.

I’ve started writing the page to actually play the audio clips in my language learning app.

At the moment it loads the Windows Media Play plug in. This obviously won’t work on Linux so I have to ask, how do you play media files in a web browser when not on Windows? Flash would be the obvious answer I suppose but I have an uncommon requirement - I need to be able to access the object via Javascript. Specifically, I need to know when a track is finished and the next one begins (from a play list) and none of the freely available Flash media players do that.

Any advice from anyone?

Zend, the commercial endeavour of the people who brought you PHP have a produced a framework, cleverly called the “Zend Framework”.

It’s basically a lightweight MVC framework for PHP. Lightweight in this case is good. It doesn’t do as much as Rails does for Ruby (although it is significantly younger) - the most notable hole is a object-relational-mapping system. But it does provide URL rewriting for Rails-esque view/controller access. I started writing my clever language thingy in it.

The biggest problem I had was getting it to work with IIS. Which I couldn’t. I decided since I had IIS installed I’d give it a go. Unfortunately you require mod_rewrite which IIS doesn’t have. So I installed ISAPI_rewrite, a version for IIS. After an hour of trying to get it to work I went and downloaded Apache 2.2. Which was my second mistake You see it seems PHP doesn’t work with Apache 2.2. Not sure why but I found a vague mention of it on a forum after trying for another hour to get it to work. So I got Apache 2.0 and everything worked. Of course there are reasons not to use PHP 5 with Apache 2, but meh.

There is one little problem with the Zend Framework, I think. It seems to be printing a space somewhere before any other output. It wouldn’t be a problem except I need it to output XML and a space at the beginning makes Firefox (and probably Internet Explorer) explode.

After spending a couple of weeks dealing with foreign text and Unicode at work, my interest in foreign language learning with the aid of a computer has returned.

My main goal is a Pimsleur style system but with the repetition handled by computer - i.e. with just the individual phrases (and words and syllables for earlier lessons) as audio files, the program should generate complete conversations with sensible parts repeated and useful instructor comments in between. That sounds like it requires some sort of script in some sort of markup language. Since it needs to be highly structured I guess that only leaves XML as a sensible possibility. So I marked up a conversation from Pimsleur’s German I.

There was an unexpected result. It’s fairly straight forward to have multiple source languages in one script file. Although there are certain things that would not work best this way, a lot of things in German (for instance) would be taught the same regardless of what language you are learning from. Ultimately source-language-specific scripts would have to be supported though.

Jitsu is another AJAX toolkit.

Like Backbase and Atlas it supports an XML based declarative format that is parsed by JavaScript and converted into real HTML.

This one is open source and free.

It turns out that ASP.NET might not suck after all. Atlas for ASP.NET is a toolkit for doing AJAXy stuff.

Well in fact it is quite a bit more than that. It has many features of the Google Web Toolkit (except in ASP.NET instead of Java) including serializing server side objects for use client side use. Interesting it also has a lot in common with Backbase. It allows you to embed some nifty XML to define a user interface which is then interpreted by the Javascript to render real (X)HTML.

The final irony is that it’s pretty much free. Since it’s .NET, to really use it you need Visual Studio, but the Atlas part itself is free and should be perfectly usable with the Express version of the Visual Studio projects.

Cleverity? Something that is clever. If that word really exists I should get an award.

A lot of people love Firefox and seem to think that loving it is “obvious”. This is despite the fact that it just eats up memory. Not only that but it keeps it regardless (if you minimise most programs on Windows they free up most of their memory).

There are uses for it, most of them for developers. The DOM explorer and JavaScript debug consoles are absolute necessities. But another cool feature I’ve found is “View Selection Source”. Highlight part of a web page, right-click and you can view the source just for that bit. Yay :)

Using the canvas element with some clever JavaScript, someone has written a basic ray-traced 3D graphics engine that runs in Safari and Firefox.

Okay so “3D gaming” is overstating it slightly, but it’s clever. What’s double clever is that you can get a pure JavaScript implementation of canvas for Internet Explorer from Google Code. Which means technically you can now do 3D graphics using JavaScript and a browser.