EdTechDev

developing educational technology

Developing Interactive, Scalable HTML5 Apps on the Cheap: Serverless, Unhosted, No Backend, BAAS, PAAS, Oh My

I’ve written before how HTML5 is the platform of the future for developing interactive educational apps, and you can even develop (code) in your browser (or chromebook) now.  Well, the future is here, and HTML5 is still looking to be the best option, but there are some wrinkles.  One is the slow pace of multimedia support in HTML5, in particular audio (a counterexample is 3D, in the form of WebGL, which is coming along faster than I expected).  Two other things are actually good, but still challenging problems – 1) the explosion of HTML5 and Javascript frameworks: Meteor.js, AngularJS, Ember, Backbone, CanJS, Knockout, yadda yadda yadda (I’m particularly excited about Meteor, but none of these frameworks seem to have “ease of use” in their vocabulary, and accessibility is usually an afterthought, if considered at all – Dojo being one exception), and 2) the explosion of languages that compile to JavaScript: Coffeescript, Dart, TypeScript, yadda yadda yadda (Dart is one that interests me at the moment).

But one problem in particular has been my biggest hurdle, which I discuss more here: the cost of scalable hosting.  With “old-fashioned” desktop apps or single-user applets or web animations or games, you can fire and forget it.  Develop your app or site, slap it up on the web, and people download it or visit it and use it.  Static web hosting is practically free (like this WordPress blog).  However, if you want social features, persistence (database), or other things like that, you need to have a database or other backend at minimum, and it needs to be able to scale.  I’ve always had my hopes up for Drupal - it is still my favorite go-to solution for social but non-interactive web applications, and several folks are using Drupal as a backend for HTML5 or mobile apps, but it is not so easy or so cheap to scale up.  A lighter weight alternative to Drupal, perhaps built on node.js and MongoDB, has not yet emerged.

nobackend logo unhosted logo

The Serverless, Unhosted, No Backend Options

Anyway, so, one hurdle to developing interactive educational HTML5 applications on the web is the cost of scalability.  Web hosting is cheap (or even free) at the beginning, but can quickly spiral out of control and sometimes lock you into a proprietary platform (like google appengine).  I could get a grant, but what about when the funding runs out?  I could beg for money by posting my ugly mug at the top of every page like Jimmy Wales did on Wikipedia, but I’m not a sadist.  I’m not a venture capitalist/entrepreneur, and unfortunately, I’m not at a university that supports or provides web application hosting (I used to be able to just run apps off the computer under my desk as an undergrad, grad, and professor, or by running cheap virtual private servers for as little as $15/year when scaling up wasn’t much of a concern).

Here are some sites that describe lower-cost, open source, and scalable cloud hosting solutions, by either letting visitors host their own data (in their browser’s local cache, or on dropbox or google drive or another site), or by using a cheaper backend-as-a-service that your front-end connects to. [Really, none of these (except WebP2P) are completely "serverless", and many do not eliminate the costs, either, but it is progress.]  Various terms have been used for some of these concepts: serverless, no backend, unhosted, and there are also new and cheaper cloud hosting services that provide a backend-as-a-service (BAAS) or a platform-as-a-service (PAAS).

  • No Backend – “a new approach to build data driven apps without thinking backend.” See the solutions and examples listed.
    • Firebase and deployd, for example, while not removing cloud hosting costs, make it much easier to develop the backend for web and mobile apps.
  • Unhosted – “freedom from web 2.0′s monopoly platforms” – came before the “No Backend” movement and looks to be completely open source and not tied to one third-party platform. Their site also lists various tools and example apps that let users control their own data.
    • Nimbusbase is an interesting option that uses Google Drive or Dropbox to store your user’s data.
    • And here’s a sample PouchDB & CouchDB-based conference scheduling app that also works offline. (Just as some have stated a mantra that we should develop HTML5 applications “mobile first“, some have also stated that we should try to develop with “offline first” support, too, and to that I would also add “accessibility first“)
  • WebP2P (peer-to-peer) is an effort that builds on top of WebRTC (real-time communication) to allow for truly serverless web apps – apps that connect from browser to browser.  It is still very new, and only supported by bleeding edge versions of Chrome and Firefox (although there is a WebRTC datachannel polyfill to fill in some of the functionality for other browsers).  See the WebP2P mailing list and WebRCT Google+ page for more info and examples.
    • ShareIt, based on DirtyShare, is a proof of concept that allows you to share files from your browser
    • PeerJS wraps the WebRTC implementation to provide a complete, configurable, and easy-to-use peer-to-peer data API.
    • Open Peer is another WebRTC-based P2P Protocol & Specification
    • GrimWire is a RESTful Browser OS that does Peer-to-peer over WebRTC.  It is built on the Local framework, which allows you to securely run user applications on the page using Web Workers.
    • KadOH (Kademlia Over HTTP) is a framework to build P2P applications for browsers and node.js. By implementing the basis of the Kademlia DHT used for decentralized peer-to-peer networks.
    • hackview is a webRTC based multi-person video chat with a collaborative editor
    • There are several other WebRCT based video chat apps and demos: appRTC is a basic demo, veckon is more polished, conversat.io adds a lunar lander game for you to play while waiting for others to join you, and the folks at Mozilla have a widget to embed video chat into your own website.
    • There are various WebRCT SIP/VOIP gateways becoming available.
    • The AirTheremin uses WebRTC and the Web Audio API to let you control sounds using gestures in front of your webcam
  • Data URIs – New browsers support very long URLs, and you can actually store quite a bit of data in it, such as text or even an image.
    • Shortly is a serverless pastebin service that uses this technique
    • Jot is a note-taking app that also lets you encrypt your notes with a password through a client-side javascript encryption library
    • The webSemantics Data to URI Converter will convert your image to a data URL
    • DataURL will similarly convert files or images to data URLs for embedding in HTML or CSS files
  • Back toward more server-centered strategies, the Backend-as-a-Service (BAAS) and Platform-as-a-Service (PAAS) Wikipedia pages list several cloud hosting providers, none of which really solve the cost issue, because you still have to pay for scaling up, but they can be cheaper on the whole than prior solutions.
    • OpenShift by RedHat is an open source PAAS that I have found very interesting, and it appears to be very reasonably priced (and free for the entry level).  You can host anything with it, node.js, Drupal, Java, etc.
    • The BAAS market appears to be a very hot topic at the moment (see this BAAS ecosystem map), especially after one provider, Parse, was bought out by Facebook.  But Apstrata is one that looks interesting, because you only pay by the number of users you have (under 500 is free), and it is made to work with Dojo Toolkit (and other options), which as I mentioned is accessible and also incredibly full-featured.

For an older article that hinted on this “serverless” trend, see Why The Future Of Software And Apps Is Serverless, and a newer article explores the No Backend movement in more detail: NoBackend: Front-End First Web Development.

May 10, 2013 Posted by | drupal, html5, opensource, programming, software, technology | , | Leave a Comment

ContentNotEditable: What the “death” of the mouse and keyboard means for content creators

First let me start with some disclaimers to try to make sure this post is not misinterpreted: I am not arguing that the mouse and keyboard are really dead or that the lack of a mouse on tablets is a bad thing.  I am not arguing that the ipad or similar devices are awful for education or content creation.  I am just thinking about how to make them even better in these areas, and conceptual and technological roadblocks in the way.  Some of the criticisms of the ipad as a content consumption device (here, here), have been addressed with the ipad 2 and other new android tablets with their inclusion of cameras and input ports, and some tablets are even coming out with a stylus, like the HTC Flyer.

But imagine any creative person – creating a 3d character for a game, drawing a picture, composing a music score, creating a graphically rich document or presentation, etc.  They likely have something in their hand, or their hands are busy doing something.  When that involves interacting with a computer they are likely clicking the mouse to drag something around or edit text, for example, or using a stylus on a digitizer surface (like a wacom) for drawing, or typing away on a keyboard.

These input devices are all essentially gone on new tablets and smartphones.  You can still type (slower) on virtual keyboards, and you can click like a mouse with your finger (tap).

An example of the impact of this is rich text editing, like with a word or openoffice or google docs document.  Many browser-based wysiwyg editing tools, which are used virtually everywhere, such as in moodle (which uses the TinyMCE editor) or drupal, no longer work when you access them from an ipad or iphone or android device (or other mobile platforms like blackberry or palm webos).  Even the newest “HTML5″ editors, such as Aloha Editor, pop up an error message if you try to access them from a mobile device.  Other browser-based editing and drawing tools also no longer work on these new platforms, or you have to draw with your fingers.  Most of Google’s and others’ tools like Google Presentation do not work on mobile platforms.  Really, just imagine most any software people use on a desktop to create stuff – like office, or the flash ide, or gimp/photoshop, blender 3d, etc.  Even when programming, which really is just typing in plain text, we usually prefer to use IDEs that popup suggestions and corrections to help us out.  For many of our desktop apps its hard to even imagine them working on a tablet or phone.

The rich text editing tools in browsers like TinyMCE or CKEditor primarily rely on the contenteditable HTML attribute to support editing.  Add that attribute to an HTML element, and the contents of that element become editable inside the web browser.  It works in all browsers, including old Internet Explorer versions. It doesn’t really work well or even at all on mobile browsers though (see here, here, here, here).

Newer versions of android, webkit, and mobile firefox have been slowly improving their support for contenteditable, and maybe they will eventually “fix” the issue, but I’m not sure that this will be fixed through engineering alone.  Some code editors like codemirror 2 and the ace editor are trying out workarounds like using a hidden textfield that captures key presses.  Codemirror 2 works on an ipad somewhat, the ace editor does not.  It remains to be seen if a similar trick might work for a rich text editor (it’s tricky enough just to do it for plain text).  And like I said, the HTC Flyer and other tablets (esp. those being designed for medical and other professionals) are starting to include a stylus, and it remains to be seen if that will catch on (it didn’t before with older tablets).  Others are coming out with dual screen tablets, where the second touchscreen can work like a touchpad on a laptop or nintendo ds, but that also may not catch on.

Another more general alternative strategy to this issue of tablets having no mouse or other input devices other than the touchscreen and the camera (which can be used for gestural or other input), might be to conceptually rethink how to support multimedia creation on these mobile platforms.  Perhaps we should drop the notion of “documents” or “pages”.  After all, you don’t think of a flash widget as a page or document.  You don’t think of a game as a set of pages or documents.  And Apple and other developers have already created apps for some specialized types of content creation and creativity, such as musical instrument simulators and so forth.

So, this may be a pre-paradigmatic moment where we’ll see what catches on: will we try to perfectly “emulate” the mouse and stylus and its supported interactions via other means such as gestures, or will new and unique types of interactions continue to catch on (like multitouch stuff).  Probably a combination of both, but so far the camera is hardly being used at all for input, other than recording videos or taking pictures.  And some may dismiss the idea of a stylus ever catching on again, but Apple has occasionally made “mistakes” before (the first mac didn’t have a floppy drive, for example), and others have been successful in incorporating a stylus, like the Nintendo DS, which my little boy continually loses :)

March 3, 2011 Posted by | android, computers, development, edtech, html5, opensource, software | 2 Comments

A Snapshot of the HTML5/Javascript Universe

This is a follow-up to “What’s the Platform of the Future for Developing Interactive Graphical Educational Software?“, which I argued is HTML5, especially since java applets and flash don’t work or aren’t well supported on mobile and emerging tablet platforms (like the ipad and android tablets).  I’m lumping many things under the “HTML5″ moniker, including the HTML5 Canvas element, WebGL for 3D, and various Javascript and CSS frameworks and libraries, even though most of the latter weren’t designed for HTML5 in particular.

Here’s a taste of the current tools and frameworks out there for developers interested in learning more about this platform.  Probably the first thing you have to decide though, is are you more interested in running your HTML5 app on mobile phones and tablets (iPhone and iPad’s iOS, Android, and to some extent Blackberry and Palm), or in a regular desktop browser (Firefox, Chrome, Safari, IE…), or both?  Some tools for mobile web app development are listed below.

Keeping Up with the HTML5/Javascript/CSS Universe

First, here are some places to keep up with this rapidly evolving field:

General Javascript Application Frameworks & UI Toolkits

  • JQuery – most popular and almost universal javascript framework.  It lets you ‘select’ elements in the DOM to operate on, in a very functional way. See numerous jquery tutorials, books and plugins and jquery.ui.  Has a little mobile support (touch/swipe).
  • YUI – very java-like user interface toolkit from Yahoo, very complete and accessible.  They have started adding mobile support (touch/swipe/etc).
  • See this comparison of javascript frameworks for others such as Sproutcore, Dojo, qooxdoo, mootools, etc.  Some other frameworks listed on that page actually involve coding in Java (or another language) which is converted to javascript, such as GWT and pyjamas.
  • JS Optimizers – to compress/obfuscate and combine into one file your js code see Google Closure Compiler, YUI Compressor, JSMIN
  • Mobile application frameworks – these frameworks are specifically for creating mobile applications (iphone/ipad/android) using javascript/html5, although usually that doesn’t include the canvas yet, and also unfortunately most of their demos work ONLY on mobile platforms, not on the desktop.  The main problem is that on the desktop with a mouse you can click and drag and drop, whereas on mobile/tablets with no mouse you touch and swipe and so forth instead. One decision you also need to make is, do you want to access native elements of the mobile platform (like camera, tilt sensor, etc.).  If so, see the first two options (PhoneGap and Appcelerator).  The latter options often work with PhoneGap, too.
    • PhoneGap – has an open source permissive license. They support Blackberry and Palm and Symbian and so forth, as well as iOS and Android.  They create a native webview wrapper for your HTML5 app, so that you can access native things such as the camera or sensors.
    • Titanium from Appcelerator – also has an open source permissive license, for fast, native mobile apps developed with javascript/html5 that can access native sensors and so forth, too.  See their kitchen sink demo and other demos.
    • Sencha Touch – built off of ExtJS and JQTouch – any app you develop with it either needs to be GPL or else you have to pay for a commercial license from them.  Can work with PhoneGap, they have some nice demos, esp. for the iPad.
    • Ansca Mobile – Corona SDK, better for game development, commercial license.
    • appMobi – commercial, too, I believe
    • Rhomobile – you actually develop in Ruby and it converts it to a javascript/html5 mobile app

HTML5 Canvas & Javascript Drawing / SVG Libraries

There are hundreds of html5 canvas demos out there if you search around.  Again, unfortunately many canvas demos do not work as well on mobile or tablet platforms, or lack interaction support (drag or swipe or whatever).  The harmony demo listed below is one exception.  Android 2.2 will incorporate a much faster v8 javascript engine from google, and future versions of the webkit browser used by most mobile/tablet devices will hopefully add support for 3D with webgl, too.  See the WebGL / game development stuff in a later section below.

Alternate Languages/Parsers/Class systems for Javascript/CSS/HTML

As I mentioned in the previous post, one potential downside of the HTML5 platform (at least from a beginner’s perspective), is that you are stuck with the javascript language (as well as HTML and CSS).  Well, that’s not always the case now.  There are alternate languages that compile to javascript (like coffeescript) or css (like Sass and Compass) or even HTML (like HAML).  Javascript, in a sense, is the new C.  Many of the types of tools we used to mainly see in Java-land are also now available in javascript, such as parser generators.

  • Coffeescript – alternate language that compiles to javascript.  It is still mostly like javascript, but adds some things that make your code much more concise.
  • Sass and Compass – alternative to CSS – adds some smarter features to CSS like variables and so forth
  • HAML – alternate to HTML, not as popular perhaps, or as needed as the above two, since there are 2000 HTML WYSIWYG editors out there.
  • Javascript parser generators – if you want to create your own DSL or language:
    • jison – used by coffeescript
    • PEG.js
    • canopy – ties you to his ruby-like JS.Class library
    • ANTLR‘s javascript target – not so lightweight, but has a lot of advanced functionality and features, such as being able to create better error messages
  • Actionscript to javascript – see Jangaroo and Gordon
  • If you want a more ruby or java-like class system (inheritance, traits, mixins, design by contract,etc.) to use rather than javascript’s built-in prototype object system, see:

Server-Side Javascript

Javascript is no longer a language that only runs in the browser.  It has become a first class language for the server / desktop, too.   Just run “node myscript.js” for example like you would any other kind of script on a server or linux box.  Coffeescript works with node.js on the server or desktop, too.

  • node.js – Uses Google’s fast V8 javascript runtime.
  • narwhal – an alternative to node.js
  • CommonJS – a standard library for javascript, mainly meant for the server-side at this point.  node.js and narwhal implement commonjs.
  • npm – a package manager for node.js, similar to gem for ruby
  • I’m still waiting to see a drupal-like content management system built all in javascript.
  • Jake – a build tool for javascript (like make, rake, etc.)
  • WebSockets – a new HTML5 feature that allows for better persistent server-client connections.  You’ll find some demos around of multiplayer games and web pages that use websockets, and on github there are node.js websocket server examples.  You need the Chrome browser or Safari or  Firefox 4 beta.
  • ExpressJS – server-side web application framework

Javascript Game Development, 3D & Physics Engines

Further evidence that javascript is the real deal, you can do 3D and interactive games with it.  To run the WebGL stuff you’ll need a recent build of the Chrome (or Chromium) browser or Firefox, see the Learning WebGL FAQ section.

Browser-based Development Environments

  • See my earlier post Browser-Based IDEs, but also these:
  • jsdo.it – Has built-in support for javascript libraries such as processing, jquery, etc., and you can share/fork/rate code.  jsFiddle is a similar tool.
  • http://sketchpad.cc/ along with hascanvas and others work with processingjs for creating animations
  • I mentioned it in the previous post, but the bespin editor continues to evolve and improve.  It now supports code completion using jsctags.
  • GUI Designers – really nothing out there that is finished and free and open source (see Ext Designer for a commercial option), other than of course free WYSIWYG HTML designers, but see these rough demos:
    • Opus-js – see the composer demo
    • Blok – rough demo for Joose, runs on google app engine

August 1, 2010 Posted by | android, development, html5, opensource, programming, software, Uncategorized | 4 Comments

Setting Up and Maintaining Netbooks/Laptops with K-12 Students

I currently have a small set of netbooks with Ubuntu Netbook Remix (download) installed that I use for various projects.  If I were to set up a classroom netbook/laptop cart for a K-12 class or a school-wide 1-to-1 netbook/laptop program, I would follow what Jim Klein did as part of the SWATTEC program at the Saugus Union School District.  They also used Ubuntu Netbook Remix, but with nice extras like a nice 10 second recovery system (by keeping system files in a read-only partition using UnionFS) and battery-life optimizations.  The philosophy is, instead of locking down the machine, make it easy to recover from any mistakes (even the teacher can recover a netbook without needing tech support).

See Jim’s Linux on Netbooks instructions on how to setup such a netbook program for your school.  Jim also has shared various presentations and other resources related to the program.

Karl Fisch blogged about how he implemented a variation on Jim’s program.

By the way, if you are in the market for school netbooks, or suffering from iPad envy, you might check out the $500 Eee PC T101MT touchscreen netbook, described in this liliputing post.  It’s been reported to work perfectly fine with the latest version of Ubuntu (10.04, Lucid Lynx, due out later this April).  Students can draw notes and pictures on the device (with a stylus), plus it has USB ports and a webcam, unlike the iPad.

April 3, 2010 Posted by | computers, opensource, software, technology, ubuntu | Comments Off

Browser-Based IDEs (programming environments)

As I wrote about earlier, HTML5 (Javascript, Canvas, WebGL, etc.) is allowing people to create rich, interactive applications that run in your browser and don’t require flash or java. Cloud computing (such as Google App Engine and others) and AJAX are also allowing us to run things in our browser that before were typically run on the desktop because they require quickly saving and retrieving a bunch of info. Google docs, gmail, etc.

So it’s not so surprising that there are now even some programming environments starting to emerge that you can run and develop from inside your browser. These are websites where you can edit code, run your application, and sometimes even instantly share your application for others to try. This is much more convenient than the typical process of downloading and installing a huge IDE such as Eclipse or Netbeans, and then compiling and packaging and distributing/hosting an application on your own.  Browser-based environments are also nice for students at schools, because they typically are not given permission to download and install software on their own, but can run these tools in the browser, as long as they aren’t blocked by IT.  I imagine it won’t be too long before we start seeing kid-friendly browser-based IDEs start to appear.

UPDATED LIST (December, 2011)

This mostly lists browser-based development tools, but also a few desktop applications that help you create HTML5 applications or animations/games:

OLD NOTES:

Here are some browser-based coding environments I know about. All are free and most are open source.

  • [Some updates in July 2011, over a year since this was originally posted:]
    • Cloud9 IDE – create server-side node.js javascript apps in this browser-based development environment
    • Erbix - another Javascript App editor
    • Akshell – and another Javascript application editor
    • Kodingen – edit php/html/css/etc. files on the server via the browser (I used this in my web development class)
    • Maqetta – visual HTML5 editor, builds on the dojo toolkit
    • SketchPad.cc – etherpad + processing.js (I used this in my html5 class)
    • Zeon.js – still early in development, not open source – analyzes javascript source code for issues
    • other javascript/html/css online editors: jsFiddle, jsdo.it, jsbin
    • browser-based game development sites: Pixie (coffeescript), Play My Code (uses a ruby-like language called quby)
    • Alternative languages that compile to javascript - a huge list, some of which let you edit and compile scripts in the browser.
  • HasCanvas – an IDE for Processing.js. Processing is a very popular java-based development environment, with a free IDE you can download. Processing.js is a port of that to javascript. With either one, you can create animations and artwork and so forth. HasCanvas has a weird interface – hover over the arrows on the left side to show the source code for any animation, and use your mouse wheel to scroll. Click Browse to see other scripts.
  • Bespin – [replaced by Ace editor, used in cloud9 IDE listed above] an editor from Mozilla that you can use either on their site, or embed into your own site.
  • CodeRun – Develop ASP.NET, php and Ajax applications in your browser. Not open source.
  • App Inventor for Android – This is unique in that it has a visual designer, along with a visual blocks-based language for creating applications (similar to that in Lego Mindstorms and Scratch). From this description it does appear to be web-based, although you use it to develop applications that run on an Android cell phone, not the browser. Here’s a course that used the tool last fall, along with the beginnings of a textbook. Unfortunately, it’s still only in private testing and not available to the public. I’ve signed up to use it with students in my multimedia development course this fall. If that works out I’ll post all the resources and videos online, just like all my courses.
  • There are also many programming command line interpreters (repls – read-eval-print loop) that work in the browser, such as Lord of the REPLs (lotrepls), which lets you try many different languages out.
  • Some other browser-based IDEs: Ares (Palm WebOS development), Zembly (discontinued when Sun was bought out by Oracle), Yahoo Application Platform and Yahoo Pipes, Glowday Google widget designer…

March 19, 2010 Posted by | android, development, html5, java, programming, software | 6 Comments

Need Much Much More “D” in Education R & D

I already blogged about this matter 3 years ago in a post entitled “The State of Educational Research & Development.” But a few recent things made me think of it again:

  • @newsweek tweeted for us to tell them our thoughts on the American education system in 6 words or less. My first thought was that “education needs more r&d”, because as my previous post mentioned – medicine and engineering and related areas spend 5-10% on research, whereas in education that percentage is closer to 0.01%. And most of that miniscule amount is spent on basic research, not development. NSF doesn’t even fund much K-12 or higher education curriculum or software development anymore.
  • The U.S. department of education recently released its National Educational Technology Plan for 2010, authored by many researchers with whom I am familiar. I’ve only scanned it so far, but I haven’t seen much emphasis on development, just research. The only development ideas I’ve seen so far are very top-driven solutions, the “Grand Challenges” described in the end section on R&D: for example a huge tutoring system, a system for delivering assessments, a school data sharing and mining system, etc. I’m not seeing any bottom-driven or domain-specific ideas or more specific solutions. I posted a comment on that page similar to this post.
  • Tony Bates blogged about “the state of e-learning in 2009” and noted:

    My biggest disappointment this year…has been with open educational resources…what are we getting? Digitally recorded 50 minute classroom lectures and digital textbooks. What we are not getting are materials designed from scratch for multiple use…And there is still so little of it. What I would like to see are many thousands of short modules

  • Also as I wrote in another earlier post on “50 examples of the need to improve college teaching,” software is key. The National Center for Academic Transformation (NCAT) has helped people redesign their college courses to be much more effective and efficient and cost less. The key to that is the use of interactive software: “successful course redesign that improves student learning while reducing instructional costs is heavily dependent upon high-quality, interactive learning materials” (ref). That may work well for common, large enrollment courses for which there is already a bunch of software available, but what about the rest of the courses? What about all of K-12, too?
  • I recently wrote a chapter titled “Toward a Nation of Educoders” about how if we could make it easier for students and teachers to develop interactive software (such as animations and games and interactive websites), perhaps this would help alleviate this problem, make it less formidable and daunting, financially and timewise. This is related to the “computational thinking” (pdf) and “computational literacy” push seen in computer science. We should look at programming as the new 4th “R”, a new literacy that students and teachers need in today’s world. A couple years ago I blogged about this and an article by Marc Prensky: “Programming: The New Literacy.”

March 17, 2010 Posted by | development, edtech, education, learning sciences, programming, research, software, teaching, technology, Uncategorized | 2 Comments

What’s the Platform of the Future for Developing Interactive Graphical Educational Software?

So, what is the platform of choice for folks who want to create interactive graphical educational software (see for example all the stuff at PHET and NLVM). Currently, there are two primary options: Flash and Java Applets. I’m not covering in this post web applications, which can still use just about anything you want: PHP, Java, Ruby, Python, .NET, etc., or business/office/administrative software which can either be web apps or desktop apps coded in C++/Java/.NET/Python, etc., or 3D desktop games, usually coded in C++/Java/.NET/Python. I’m centered on interactive, graphical educational software like you see all over the web now.

The PHET project, for example, uses both java and flash. These haven’t always been the main options, however, and I suspect it will change again in the near future. Here’s a short history of some of the development tools I’ve leaned on for educational software development over the past 15 years:

  • early 90s – hypercard / supercard, Perl/CGI for web apps
  • late 90s – java, visual basic, real basic, PHP emerges for web apps, javascript in the browser
  • early 00s – by this time, commercial options no longer cut it for me, too many bugs, ignored feature requests, too expensive, vendor lock-in – free and open source is king: python, java (later open sourced), C#/vb.net (esp. the Mono open source clone). Unfortunately there is no alternative to the commercial, proprietary flash, which becomes king of RIAs (rich internet applications) instead of java applets.
  • late 00s – by this time, desktop apps no longer cut it. RIA is king for creating interactive graphical educational apps – java and JVM languages like scala, and still no real alternative to flash (there is javafx, but it hasn’t largely caught on yet, and just about all the demos so far require you to download the app (JNLP) rather than run in the browser, despite support for JNLP applets). The move to RIA means no more Mono/.NET since it doesn’t run in the browser – support for silverlight is weak/non-existent on many browsers/platforms. And no python, although perhaps one day browsers will support it as an alternative language to javascript. I’m not holding my breath on that though. Mono/.NET is emerging again now in 3D virtual world space, however, because it is the basis for Second Life / OpenSim, and its only open source competitor, the java-based Project Wonderland is no longer supported by Oracle, who bought out Sun. The project is continuing outside of Oracle, but it’s future is unclear.
  • early and late 10s? – This is the question of this post. Mobile platforms can no longer be ignored, and that means no java. Actually android is essentially java (dalvik), but standard java applets do not work. Flash is only just now being ported to work on android, and it may become available for the iphone as well, although Apple is hostile to it (as well as java). Since google doesn’t support browser applets (even android applets), and Apple wants total control of their platform, Flash is only increasing its dominance and importance.

HTML5

Since Oracle bought out Sun, and there is no support nor any planned support for java on the android and iphone platforms, it appears the only open source alternative for the future of RIA apps may be HTML5. But that cannot be used for creating the kind of highly interactive graphical educational software that you can create in java and flash. For this to work in HTML5, it would require WebGL, a 3D (OpenGL ES) canvas for HTML5. WebGL still does not work out of the box on any mobile platform, but it has been or is being ported to work on WebKit (the browser engine for Palm’s WebOS and the iphone web browser) as well as android. Currently, to run WebGL you need to grab a nightly build of Firefox, WebKit, or Google Chrome (I’m trying out the last one). Official builds will have likely have built-in support for WebGL come November 2010 or so perhaps (Firefox 4). Here are some more resources on WebGL:

The main drawback to the HTML5 platform is that javascript is the only language supported. That’s not a problem for me, personally, I’ve been using javascript since when it was called livescript. But my interest also is in programming languages/tools that make it easier for students, teachers, and other non-CS types to develop interactive educational software, as discussed in this chapter (pdf). A workaround for now would be to create a to-javascript compiler for alternate languages, as has already been done for java with the GWT project (which has various WebGL controls in development: WGT, GWT-G3D, GWTGL, GWT-WebGL), but in the long run it would be best if a common runtime were developed for WebKit and Firefox to support other languages than javascript, but then we are just re-inventing java and the JVM. So I don’t dismiss the java platform at all just yet, but it’s definitely not having a good year so far :)

February 7, 2010 Posted by | android, development, html5, java, opensource, programming, scala, software | 14 Comments

Misconceptions about Design

Design is the process of going from function to structure.  There is some purpose, or goal, or effect on the environment desired (a function), and structures are created or organized to achieve that function. See more about structure-behavior-function models of systems in this post and more about design generally on this What is Design? page from the Design in the Classroom site.  There has been much written about the process, method, or steps of design, including various models and design cycles.

There are of course numerous forms and types of design – engineering design, web design, software design, architectural design, instructional design, visual design, interaction design, and so on.  Design Studies is a journal that covers design broadly, and there are numerous journals devoted to domain-specific areas and forms of design, such as Instructional Science and Educational Technology, Research & Development (instructional design), Artificial Intelligence for Engineering Design, Analysis & Manufacturing (engineering design), …  There’s even a kids’ show called Design Squad that covers design more broadly as well.

What has not been well researched in virtually all areas of design are the misconceptions or preconceptions and conceptual hurdles people have when designing or learning to design (especially beginners and students, but also experienced designers as well, as will be illustrated below).  Misconceptions have been well researched in areas such as science education (see this book for example) and history education (see this book), but not in design areas such as engineering, web design, or even instructional design.  Why is this important?  The book How People Learn highlights 3 key findings that we’ve learned from research on learning and teaching, and #1 is the need to identify and confront students’ initial knowledge and misconceptions they have when learning a new subject or skill:

“Students come to the classroom with preconceptions about how the world works. If their initial understanding is not engaged, they may fail to grasp the new concepts and information that are taught, or they may learn them for purposes of a test but revert to their preconceptions outside the classroom”

“Teachers need to pay attention to the incomplete understandings, the false beliefs, and the naive renditions of concepts that learners bring with them to a given subject.”

So, with all that in mind, below are just a few examples of misconceptions about design in various domain areas that I’ve found.  Like I said, there is not much actual research or data out there, just some anecdotal resources – I welcome any comments with other examples of misconceptions about design, and perhaps it is an area you or I or others will explore further in the future.

Software Design – Anti-Patterns

Actually this is one design area in which there is a huge amount of anecdotal evidence for misconceptions.  See this list of anti-patterns, for example. Whereas computer science design patterns are common solutions to problems that occur in software design, an anti-pattern is a commonly used yet often ineffective or counter-productive design pattern.  Anti-patterns aren’t all really ‘misconceptions’, but just as noted in the How People Learn quotes above, it makes sense to be aware of anti-patterns so that you don’t repeat the same mistakes many other designers have made.

It would be interesting to see how many of these software design anti-patterns may apply to other forms of design as well.  I’m not a computer science teacher nor was I a CS student, but I do not get the sense that anti-patterns (nor design patterns, for that matter) are covered or addressed in software engineering courses.  Perhaps they should.

Engineering Design

“Engineering design is the process of devising a system, component, or process to meet desired needs. It is a decision-making process (often iterative), in which the basic sciences, mathematics, and the engineering sciences are applied to convert resources optimally to meet these stated needs” (from p. 3 of ABET criteria).

So far I’ve mainly only found one short paper about misconceptions in engineering design.  Wendy Newstetter and others surveyed freshmen in an engineering design course (the ACM paper is not publicly accessible), and listed 5 main misconceptions about design:

  1. Ideation without substance – Students believe that design is coming up with good ideas.  And that’s it.  They forget about the rest of it – how to realize these ideas and evaluate them.
  2. Design arrogance – Students forget the constraints of the environment in which the design will reside.  They “arrogantly” ignore the constraints of the user.
  3. Design fixation – (perhaps related to the idea of “functional fixedness” as well) Students tend to focus on the first solution that comes to mind.  They stop considering alternatives.
  4. Extreme design -Students focus only on the very high level (function) or the very low level (structure), without moving between them in a formal manner and considering the giant gulf between the two levels.
  5. Design serialization – Students belief that design is a serial/linear process, ignoring iterative cycles, revisiting past decisions, and evaluating alternatives.

Instructional Design – ISD

People in the instructional technology/design field will recognize some of the above misconceptions.  The first thing I teach in my advanced instructional design course is misconceptions about ADDIE (a popular formal instructional design model).  Even the author of the most popular textbook that teaches ADDIE (Walter Dick), stated that students shouldn’t view ADDIE as a linear recipe to be followed (I don’t have the quote with me).

Rieber quotes Michael Streibel (1991, p. 12) about the difference between instructional design models (such as ADDIE) taught in the classroom and instructional design as it is actually practiced:

I first encountered the problematic relationship between plans and situated actions when, after years of trying to follow Gagné’s theory of instructional design, I repeatedly found myself, as an instructional designer, making ad hoc decisions throughout the design and development process. At first, I attributed this discrepancy to my own inexperience as an instructional designer. Later, when I became more experienced, I attributed it to the incompleteness of instructional design theories. Theories were, after all, only robust and mature at the end of a long developmental process, and instructional design theories had a very short history. Lately, however, I have begun to believe that the discrepancy between instructional design theories and instructional design practice will never be resolved because instructional design practice will always be a form of situated activity (i.e., depend on the specific, concrete, and unique circumstances of the project I am working on).

Some other misconceptions I’ve seen:

  • Online courses are worse than face to face learning.  Some students are adamant about this belief.  Obviously there are going to be bad online courses and bad face to face courses, it depends on contextual factors (the teaching, the students, the environment, etc.).  But a recent meta-analysis from the U.S. Department of Education actually found that students learned more online than face to face, and the Open Learning Initiative is another example where students learn better and faster with their online statistics course.
  • Simulations worse than the real thing.  Again, of course there are some things you can only learn from doing the real thing (like some aspects of flying an airplane or fighting in combat).  But study after study shows that you learn more and faster from a simulation than the real thing.  I don’t have some of the references handy (but see this book chapter on how people learn with simulations I wrote), but it’s obvious why in most cases.  A frog dissection simulation shows labels next to the body parts, for example.  A flight simulator lets you rapidly re-practice tough techniques and challenging flying conditions.  It’s not an either/or choice of course.  You don’t want an airplane pilot who has only used a simulation, nor would you want an airplane pilot (unless very experienced) who’s never used a simulation.
  • Lecture before simulation/experience.  This is the belief that we should lecture students before letting them use a simulation or work on an open-ended problem, because they aren’t ready for the messy experience yet.  This is counter-intuitive to most students as well, but the research shows that if you let students explore first, even if they make mistakes, and then lecture on the concepts (rather than the other way around), students will learn much more.  Again, if you think about it, it’s not so counter-intuitive.  If you get the lecture first, you more likely just tune it out like most lectures.  If you get the messy experience first, you’ll start to formulate your own questions and ideas and so forth, and you are more ready and prepared to learn from the lecture that comes afterward.
  • Topics should be broken into pieces linearly sequenced, with the learning objectives stated first, and going from simpler to more complex.  This is related to the last one and there are numerous writings about this.  Putting the learning objectives first isn’t bad, but it isn’t written in stone, either, nor are there learning objectives out there in the real world we are preparing students for.  Almost 30 years ago Hermann Härtel wrote about why we still teach physics and so forth in a linear, piece-meal fashion, and problems with that approach.  For example, often no connection is made between an electrostatics physics course and an electrical circuits engineering course, even though there are connections between the two.  Chabay & Sherwood addressed this issue and Härtel’s philosophy with their Matter & Interactions curriculum and supporting software.
  • If I tell it or have them read it, they should know it. This is the way most undergraduate courses still work.  Weed out classes.  If you didn’t memorize enough things, too bad, you fail.  See below for 2 examples of where often times students didn’t even perceive or understand what you presented right in front of their eyes.
  • Books and lectures are enough to learn anything – technology is not important, only teaching.  As I wrote about in an earlier post on 50 Examples of the Need to Improve College Teaching, the National Center for Academic Transformation found that “Successful course redesign that improves student learning while reducing instructional costs is heavily dependent upon high-quality, interactive learning materials.”  That means software.  It can help teaching and learning.  See the Open Learning Initiative I linked to earlier – one key to their success was the use of interactive statistics software.  More and more modern topics are not so easily conveyed in textual or verbal form.  And no that doesn’t mean ignoring teachers or teaching.  Teaching IS a technology itself, as are books and lecturing and whiteboards.

Web design and instructional design (and other forms of design) appear to be unrelated, but the misconceptions of all them seem to largely stem from not understanding the context of design, which in many cases is the users or people, which means better understanding how people learn and how they think and perceive.

Web Design

I know of countless ‘mistakes’ or ‘errors’ students make when learning web design and HTML and CSS and so forth (forgetting that closing tag, etc.), but I’ll just mention one possible misconception (or popular myth) I see referred to on even professional web design blogs and sites, although I think there are hundreds of misconceptions, including a whole class of misconceptions about Web 2.0 versus Web 1.0 (web sites aren’t merely “electronic brochures” anymore, for example):

  1. “Click here” is bad – Yes, having a link that simply says click here is bad.  The link needs to include context – what is at the linked site?  But the blogs giving web design advice (such as this one) go too far in saying that “click here” should be completely avoided in favor of more abstract terms like “read more”.  Using action verbs (like “click”) that tell people what to do IN ADDITION to providing some context leads to greater actual clickthrough rates.  There is some research to support that, although I don’t have the reference at hand, but it shouldn’t be surprising – action verbs that tell people what to physically do result in (surprise) them more likely doing it.

Improving Design by Better Understanding How People Learn, Think and Perceive

The above was another example where some basic understanding of research on human learning, cognition, and perception can enhance your design (when the context of that design involves people as it commonly does in most areas).  Of course, misconceptions about learning, cognition, and perception is a whole other topic that has not been well researched, but see this previous post on “Powerful Demonstrations about the Nature of Perceiving, Learning and Understanding” for some examples, such as change blindness (where something happens right in front of your eyes but you don’t see it).  Just because you put that fact on your powerpoint or you stated something out loud to your students or you put some message on that web page or online course, doesn’t mean the students or your users or audience even perceived it, yet alone understood it or memorized it.  We only pay attention to what we think is important, nobody notices the details, nobody reads the instructions.

Understanding misconceptions about design can reciprocally facilitate our understanding of teaching and learning, too, since instructional design is fundamental to education.  Despite 30 years of overwhelming research on misconceptions in science education, for example, physics and sciences class teachers still often depend on classroom demonstrations to convey principles.  See the article Why may students fail to learn from demonstrations? by Wolff-Michael Roth for an example of why that may not be such an effective instructional design technique.  There is a gap (some have called the “valley of death“) between the research and the practice (of the designers, the innovators, the teachers,…), partly due perhaps to our misconceptions about design and implementation, such as “design arrogance” and “ideation without substance.”

January 2, 2010 Posted by | development, learning sciences, research, software, teaching, technology, Uncategorized | Comments Off

Some Android Applications

Just a run down on some android apps in case I lose my phone and have to re-install.  These are all free.  I can’t find many educational apps unfortunately:

News

  • NYTimes – more up to date
  • USA Today – more graphical
  • 1Cast News – video news stories
  • Sports Tap

Social Networking Tools

  • Twidroid – there are too many twitter apps out there
  • Facebook – comes with Android 2.0 on the droid
  • WpToGo – wordpress client
  • NewsRob – google reader client

Utilities

  • Barcode Scanner – to read QR codes
  • DockRunner – for the droid if you don’t have a multimedia dock – activates the multimedia interface
  • Advanced Task Killer – android apps don’t have a quit/exit button
  • Astro – file manager – read your SD card, etc. – very nice
  • Digital Clock – smaller clock widget
  • Gmote – run the gmote server app on your computer and you can remotely control it
  • Locale – change android settings based on location or other triggers
  • The Weather Channel – there are some other weather apps & widgets too
  • Teradesk – store files on the cloud – DropBox app in the works too

Productivity

  • AK Notepad – there are numerous sticky note / notepad apps
  • Astrid – there are also numerous todo list apps
  • Documents To Go – read word, ppt etc.
  • Evernote has a web-accessible site, too, with a forthcoming android client app
  • Voice Recorder – app & widget for quick voice notes

Google Apps

  • Voice – essential – use for voicemail, forwarding calls, etc.
  • Listen – podcasts
  • GDocs
  • Maps – navigation in android 2.0
  • Market – of course to find other software
  • Talk – built-in for instant messaging

Educational

  • Aldiko – incredibly nice e-book reader application
  • Google Sky Map – incredible app, point it at sky and it shows the stars & planets

Games

  • Labyrinth Lite – tilt game to get ball through maze
  • AirAttack – click on planes and helicopters flying overhead to shoot at them
  • Air Hockey Demo
  • Craigs Race – tilt to race a little car on a track
  • Speed Forge 3D – very nice 3D tilt racing game, see this video
  • PapiJump – tilt game to bounce a ball upwards
  • Robo Defense
  • Bubbles – blow on microphone to create bubbles

Music / Video / Photos

  • Music – built-in app, plays videos too
  • Youtube – built-in app, plays youtube videos embedded on webpages too.
  • Qik, Ustream – broadcast live video, and record it
  • TV.com – app for watching CBS and related videos.  NBC has a mobile-accessible website: m.nbc.com
  • Pandora – listen to music online
  • Photoshop has an android app now, see also PicSay and others
  • Picasa photo album support is built-in to android now

Development

  • ConnectBot – ssh

Miscellaneous

  • Amazon, Amazon MP3
  • Bubble – bubble level app
  • Compass
  • ShopSavvy

I’m also keeping an eye out for note taking / handwriting recognition apps for a research project:

November 12, 2009 Posted by | android, software, technology | Comments Off

Getting Off the Ground with Drupal: Part 1

Here are just some notes and tips for folks looking to try out Drupal and get past the first steps of installing and configuring the software.

  • What is Drupal? Drupal is a free, open source php-based content management system. See this video for more about what Drupal is, who is using it, and an example of how one site (edutopia) is using it. Many universities and libraries are using Drupal for their web presence.
  • Drupal Version and Modules. At the moment, Drupal 6 has been released. However, Drupal has hundreds of modules (or extensions) you can install to add more functionality to your site, and most of these have not yet been updated for Drupal 6 yet. By this summer that may change, but for now you might want to stick with Drupal 5.7.
  • Installing Drupal and Basic Configuration. For installing and configuring the basics of your Drupal site, use this getting started guide (there is a pdf version) to help get your site configured. Make sure you enable clean URLs (admin/settings/clean-urls), set the site to use your timezone (admin/settings/date-time), and so forth. I also made the administration theme (admin/settings/admin) different from the main site theme.
  • Installing Modules. There are only 2 modules that you need to install manually (download, untar, move to the sites/all/modules/ folder). These are update status (included by default with Drupal 6 but not Drupal 5) and drush. Once you install and setup drush, you can use drush on the command line to easily install and update any other modules.

    After you download and untar the drush.tar.gz file and move the folder into your sites/all/modules/ folder, create a symbolic link so that you can simply run “drush” in the future:

    sudo ln -s /var/www/sites/all/modules/drush/drush.php /usr/bin/drush

    Run “drush help” to see if it is working. The command to install a new module is
    drush pm install (modulename)
    The command to update all your modules is
    drush pm update

    • UPDATE: In Drupal 6 with the new drush version, the command is now this instead of pm install:

    drush dl (modulename)

    I don’t know what the update command is now (used to be ‘drush pm update’). Right now drush is in heavy re-development.

  • Choosing Modules. See this list of top 40 projects for some of the more popular modules. Just some of these useful modules include: pathauto, organic groups, views, cck, user_import, userprotect, ldap_integration, printer friendly pages, password_strength, simplemenu, htmlcorrector, event, date, diff, calendar, audio, video, panels, tagadelic…
  • WYSIWYG rich text editor. There are multiple options for a rich text editor that plugs into Drupal. My recommendation is FCKEditor. It was much nicer than TinyMCE when I compared the two. You need to manually download some extra components when installing the FCKEditor module, hence the drush command alone is not sufficient. You may also wish to install IMCE to add image uploading/embedding support to FCKEditor (or TinyMCE). You’ll need to add some more allowed HTML tags under input formats (admin/settings/filters/1/configure), including these: <a> <p> <span> <div> <h1> <h2> <h3> <h4> <h5> <h6> <img> <map> <area> <hr> <br> <br /> <ul> <ol> <li> <dl> <dt> <dd> <table> <tr> <td> <em> <b> <u> <i> <strong> <font> <del> <ins> <sub> <sup> <quote> <blockquote> <pre> <address> <code> <cite> <embed> <object> <strike> <caption>
  • Javascript Calendar. I’d recommend the jstools module so that you can have a popup calendar for selecting dates instead of having to manually type in dates. jstools also adds some nice options like ajax-based search forms – the page doesn’t have to reload when you do a search.
  • Organic Groups. Once you install the organic groups module (og), configuring it is a bit tricky. Follow the readme file included in the module folder closely. One thing missing from the readme is that after you’ve followed all the steps including creating a new content type called ‘group’, to actually create an actual group, go to ‘create content’ and choose the ‘group’ content type to create the group.
  • Nicer Blog URLs. To enable nicer URLs for blog posts, like this: http://mysite/blogs/username/2008/Feb/08/blog-title
    install the pathauto module. Go to the pathauto settings (admin/settings/pathauto) and set the ‘blog path settings’. For example the ‘pattern for blog page paths’ you can put: blogs/[user-raw]
    Then go to ‘node path settings’ to set what the URLs for individual blog posts look like, under ‘pattern for all blog entry paths’, I have set: blogs/[author-name-raw]/[yyyy]/[mon]/[dd]/[title-raw]
    For the ‘default path setting’ I have something like: [ogname-raw]/[type-name]/[title-raw] (this says use the organic group name when publishing something to a group)
  • At this point to build your actual site you’ll want to search for tutorials and videos on creating themes and using the views, panels, & CCK modules.

March 5, 2008 Posted by | drupal, opensource, software | Comments Off

« Previous Entries    

Follow

Get every new post delivered to your Inbox.

Join 2,597 other followers