padlockEarlier in the week, I wrote about a new type of app and activity that I was working on. I wanted to develop something to help my students organize and structure their essays, so on a whim I built a basic browser based app that would let give kids the pieces of an essay and let them manipulate them and put them in order. Read more about the idea here and see the demo here.

Today I want to consider a very particular aspect about the design: the underlying technology.

The Power of HTML, CSS, and Javascript

This activity is fairly interactive, allowing students to drag and drop elements around the screen. They can physically manipulate stuff, and using inputs they can even type information. There is a fairly structured workspace for students, set up in a way to make the activity quite intuitive. At the same time, stylesheets allow for a completely different look when you want to print the final product.

This app demonstrates the power of some very simple web based technologies – HTML, CSS, and Javascript. Specifically, the Javascript is built on the JQuery framework. I had to do next to no coding at all; the heavy lifting is done by the Draggable plug in for the JQuery UI framework. I didn’t even really have to do much styling, since much of that was built in to the framework as well.

Is that all JQuery can do? Nope.

Imagine if you will a mathematical function. There are a number of coefficients that you can change, and each one will change the way the graph looks. You want to let kids play with these coefficients, and instantly see how they change the graph. JQuery offers a solution: sliders can instantaneously alter the value of the coefficients. Flot, a plug-in for JQuery, can then handle the graphing in real time. When you move a slider, you can instantly see how the graph changes. Check out a demo here [I made this a few years back, it’s on a deprecated site, maybe I’ll port it here at a later date].

And just for good measure, here’s a cool example of JQuery based animation. Check out Super Mario. He’s awesome.

That’s Nice. Why Do I Care?

Ok. So JQuery can do some cool stuff. I get it. But what makes HTML, CSS, and JQuery so great…?

They’re open source. And they’re cross platform.

Let’s start with the second characteristic. These things are cross platform. HTML, CSS, and Javascript work in a browser. The browser is based on standards, and it works independent of the platform on which it is run. Google Chrome is Google Chrome, whether you’re using Windows, Mac, Linux, a Chromebook, or a Tablet (although there are some differences for mobile versions).

As a developer, I can design an app (and interactive websites are definitely “web apps” and not simple websites) and trust that anyone can use it. I don’t have to worry about market share. Or how it changes. Today, people might be using PCs. Next week, they might be using Macs. In the future, maybe we’ll all be running Ubuntu. Unlikely, but it sure would be cool. And my app will work just fine in all of these situations.

As for open source, this is a tougher nut to crack.

On a philosophical level, I’m a huge proponent of open source. It’s free, so that’s cool. But more importantly, it’s an example of what people can accomplish by working together. Not competing, not at each other’s throats, not fighting for market share. Volunteering their time, coordinating their efforts, and developing something just for the hell of it. That’s just cool, and it gives you a glimmer of hope about human nature.

On a practical level, though, this also has implications. For years, iPads and iPhones haven’t been able to run anything built on Flash. This is a proprietary technology owned by Adobe, and Apple refused to integrate it onto their devices. In the last year, Adobe announced that it would no longer develop a mobile version of Flash, meaning that it won’t exist on Android devices either. The result? A whole generation of Flash based interactive websites are now utterly useless if your school is implementing some kind of tablet-based one-to-one initiative.

Proprietary technologies run a huge risk of being depracated and outdated as soon as their publisher decides they’re no longer commercially viable. Standards based, open source projects, on the other hand, will continue to be supported by a community that sees a need for it.

Sure, you can get some greater functionality out of Adobe Flash or another more robust development environment. If you’re trying to create a fully interactive game, then you’re better off using that.

But, as with students and placements, it would be awesome if developers used the least restrictive environment possible for their apps. Why use Flash, Silverlight, or something similar if basic Javascript, CSS, and HTML5 is sufficient? The end result will be compatible across more platforms and ultimately more accessible to users.

My mission? To create educational web apps, like the demo I started with, that rely on simple, cross-browser technology, and that aren’t hampered by proprietary technology. It’d be nice if some other developers did the same.

Image Credit: “Old padlock and chain” by Chahad at sxc.hu.