Accidental Javascript programming

This post was written 13 years ago.
Wed, 31 Aug 2011

After doing some programming, starting a book about how to think like a Computer Scientist, and reading Javascript the Good Parts, 1.5 times so far (more iterations will follow), I now have a far better understanding of Javascript than say a year ago. Still, there is much more to learn.

I have had a go at programming something in Javascript though (not jQuery). This was for a w3c course in mobile web development - blog post on that to follow. Javascript had not really been the focus, but rather making things work on desktop and mobile. Anyway, it is a little hangman app - there's simply not enough of them yet ;) . I know I could have found code for this on the web, but I just tried myself. Better not to look at the source code!

I'd quite like to make some changes, allow to choose words from different languages for example. But I think the most important would probably be to improve the user experience of the main interaction in this game: Entering and checking a lettter. Another thing that is bugging me is that the SVG does not work on most phones. There should be a fallback if SVG cannot be displayed.

Anyway, it works reasonably well on a desktop environment - including local storage which means you can close and open the browser and pick up from where you left the game. The list of words is at a sub-teen child's level at the moment, and my children actually like playing it! So here's the little Hangman game.


This post was written 13 years ago, which in internet time is really, really old. This means that what is written above, and the links contained within, may now be obsolete, inaccurate or wildly out of context, so please bear that in mind :)

Workshop: Developing for the Mobile Web

This post was written 14 years ago.
Fri, 29 Oct 2010

Web developers flocked in their hoardes to two big events in Bristol last Wednesday: the Web Developers Conference and the Plone Conference, the latter of which is still going on as I write. Both are/were for sure excellent events and I had planned to attend WDC2010. However, I eventually chose to go to a third event that was also being held in Bristol and I did not regret it one bit.

The event in question took place at the ILRT premises in Bristol, and was called "Developing for the Mobile Web". It was mainly directed at developers in higher education - being part of the DevCSI project - but was open to other developers, too.

A large part of this one-day workshop consisted of accounts, sometimes quite in-depth, of the speakers' day-to-day work with the mobile web. That, together with a very informative talk by Phil Archer from the W3C about Mobile Web Best Practices, and a CSS-session at the end, made for a very successful mixture.

Topics covered included mobile university web sites, the geolocation API, HTML5, native apps versus web apps, mobile development frameworks  - a topic that was completely new to me - as well as best practices (mobile web, css, accessibility).

How have Mobile Best Practices changed since 2006?

I won't go into all the talks in detail but rather pick a few that impressed me. After short introductions by Mike Jones and Mahendra Mahey, who had conceived and organised the event, Phil Archer kicked off with the question of what has changed since the creation of the W3C's Mobile web best practices document.

This document was put together in 2006. But shortly after most of the substantial work had been done, the iPhone hit the scene. So what has changed since then with regards to best practices? The answer is - suprisingly little. In fact, details of the document have not changed at all. And while the reality of the mobile web has changed a lot through the arrival of the iPhone and Android, the principles of designing for the mobile web have not.

Take media queries, which get talked about a lot these days, and seem to be the essence of how to code for the mobile web, but have in fact been around since 2001. One kind of sad thing is that the different media types (screen, handheld and so on) cannot be used in the way they were intended. Because people tended to write pretty bad stylesheets for handheld devices, a number of manufacturers decided not to support this media type. To me, that seems like a wasted opportunity. These days to target handhelds with css alone, you have to write a combination of media types and media queries.

It's also worth remembering that developing for the mobile web does not mean developing for the iPhone, and also the idea of "one web". If you have one website, to render very different versions for mobile and desktop is not really the idea.

If you want more information about the talk, the slides are online.

Geolocation API and HTML5

I was also very impressed with the second talk, although admittedly I understood a lot less about it. And yet, given the topic, I found it at places surprisingly easy to follow. The talk was given by Ben Butchart of EDINA, which is part of the University of Edinburgh. His group is investigating ways of delivering maps to mobile using the geolocation API and HTML5 techniques. While the group is specifically targeting SmartPhones, they do not want to develop native apps for specific providers. I hope I got that right, but, if not, quite a good summary can be found on the Wiki of the GeoMobile project .

A good source of information is also their blog, The slides of the talk contained quite a bit of code, mainly showing how the geolocation API was used, and also HTML5. The HTML5 techniques used were Canvas, Local Storage and Cache. It became clear, for example, that it is quite important to be able to store data locally as well. HTML5 Canvas has great potential because it allows to get inside the image itself and use an array of pixels that can then be processed.

What I found quite interesting was the fact that the Ordnance Survey had to make their data publicly available and there is an API that can be used for that. (They also have a 'web-map builder' that might be a nice alternative to embedding google maps - I have tried it out for outlining the itineray of an up-coming lantern walk)

There were quite a few interesting technical details -- take a look, for example, at this blog post about touchMap, which examines using a different framework from OpenLayers. But although I found them interesting, I have to admit I don't really know anything about them, so it does not make so much sense if I just list them here. I am waiting for the slides to become available!

Ben Butchart concluded that it was a really interesting time to be in web app development, because of the competition between browsers in terms of performance and implementation of new standards, and it would be interesting to see how the translation from desktop to mobile browser will work out. Some emerging technologies were mentioned as well, as Canvas 3d and Augmented Reality.

Oxford and the open-source mobile framework

And so on to my third highlight -- three presentations about mobile university projects targeted at students at the universities of Liverpool, Bristol and Oxford. Each was clearly at three different stages of development. Anthony Doherty from the University of Liverpool gave an overview of his project, which was still in a planning phase - or, one could say, in a review phase, after initial trials (one done by themselves, a mobile web app, and one by an outside provider, a native web app). But there was no clear result yet and no live site was demonstrated.

The Bristol University project, in contrast, mymobilebristol, already has a beta site up and running, with quite a few features. This project was presented by Mike Jones. It displays the content of the university website in a way suitable for mobile (although not yet for all mobiles!, as Phil Archer observed), but the most striking bit is certainly the maps. And I was not alone in thinking that live bus departures was a very useful and cool feature, as were wifi hotspots and free computer places. It is worth mentioning that the workshop was done in conjunction with the mymobilebristol project.

The Oxford mobile site, however, was better than the other two by quite a margin. They seem to have got an awful lot right. I have to admit not having properly checked the site out yet, so I could be blinded by the good looks. But the list of features is equally impressive.

After the talk I got the chance to briefly talk to Tim Fernando who gave the presentation, and who was also one of the (few) people working on it. Naively, I had thought there must have been loads of people developing it. Fernando said this was a "testament to the Django framework". Oxford University has also released the project as an open-source framework now (a framework using a framework then..), which is certainly worth checking out:

One neat thing about it is that it is not device-specific. Towards the end of the day, the discussion native app versus web app came up again, and Fernando conceded that it was much quicker to develop a native app, and that there was the benefit that local storage could be used much more, thus reducing both band-width and processing power. But he did think and hope that developments would converge on using the mobile web. The Oxford site is certainly a good example of this.

This blog post is getting very long. I would have liked to lose a few words about the virtual CSS session with "Big John" Gallant of which was also very good although he was not specifically targeting CSS for mobile. Some great lightning talks (check out the programme). And the nice lunch-time chat with Phil Archer and Gicela Morales where I learned that we were in quite a historic building (FoaF started here). But I have to go..

Anyway, thanks everybody who organised this and the speakers! It was a great day and I learned a lot (and hope I can make use of it soon).

  • Thanks, Katja, for your report, very interesting!

    Posted by Frances de Waal, 01/11/2010 10:30am

This post was written 14 years ago, which in internet time is really, really old. This means that what is written above, and the links contained within, may now be obsolete, inaccurate or wildly out of context, so please bear that in mind :)