Software I use: Dashcode - writing eLearning and mLearning websites

Way back in 2010 I predicted that 2011 would see "The rise of mobile learning" (see 10 eLearning Predictions for 2011 (now with an extra 10% for free)). Well, I have been doing my bit to help the prediction come true and one of the tools I have been using to do this is Dashcode from Apple.

You can see a simple site I put together using Dashcode for students to test their knowledge of amino acids at http://www.staff.ncl.ac.uk/n.j.morris/amino/. The site will work on web browsers on desktop machines, and on mobile devices such as the iPhone. Using the site students can take a test in which they are asked a series of questions about amino acids. In the desktop version of the site the students get 10 random questions, which can then be marked by the click of a button, and on the mobile version of the site students get one random question at a time.

What should be noted is the site, http://www.staff.ncl.ac.uk/n.j.morris/amino/, is not a static webpage, but is dynamic, and can be thought of as a mini-computer program running in your web browser or on your mobile device.

The Amino Acid Test website running on an iPhone

Dashcode is produced by Apple and can be used to develop widgets that run on the Apple Dashboard (part of the Mac OS X system), and for the production of websites that work on desktop and mobile devices.

The power of Dashcode as a development environment is that it can produce websites quickly by using drag and drop to add and position specific web page elements, e.g. buttons, lists, text etc., and then allows the elements to be 'wired' to the data which can be either stored as part of the web site, or 'pulled' from an external source such as an RSS feed (see Do you speak my language: R is for RSS, Router, Root, Ruby) or a web services (see Do you speak my language: W is for Web services, Wiki, W3C, Webserver, WWW, Wordpress).

The net result is that by using Dashcode you can rapidly develop a site, and also test your site using Dashcode both in desktop and iPhone (mobile) mode.

All Dashcode is really doing when you use drag and drop to develop an eLearning and mLearning website is generating the code in Javascript (see Do you speak my language: J is for Javascript, Java), HTML (see Do you speak my language: H is for htaccess, hacker, host, http, https, html, hardware), and CSS to control how the website looks, and how it runs and interacts with the user.

Now, depending on the type of eLearning and mLearning site you wish to develop you are going to need varying degrees of skill and understanding of how a web page works, and what HTML (hyper text markup language - this contains the data (text, buttons etc.) that is displayed on a web page), CSS (Cascading Style Sheets - this determines how the page is displayed, that is, the location of the page elements), Javascript (this controls and responds to the users interaction with the web page), and the DOM (Document Object Model - this links the HTML, CSS and Javascript together as it determines how the web page is displayed, and how the Javascript can interact with the page elements), can do.

If you are producing a site that just takes a data-feed and displays it, and all the user can do is flick between sections containing the information, then Dashcode will pretty much do all the work and produce a site through your use of drag and drop and 'wiring' features of the program. However, if you are developing a site with which a user can interact, such as the simple amino acid test site mentioned above, then you will need some understanding of HTML, CSS, DOM and Javascript to produce the appropriate responses to user actions.

One MAJOR problem with all of the above are the web browsers.

Even though there are international standards for the way web browsers handle and interpret web code (i.e. the DOM, the CSS, the HTML, and the Javascript; see W3C, and there are even tests which can be used to assess how well a web browser processes the code that makes up a web page (see the Acid Tests at http://acidtests.org/, in particular try the Acid3 test) and how closely the browser complies with the international standard, only a few of the web browsers available will fully pass the test. For example, the latest versions of Safari (v. 5.0.5) and Chrome (v. 11.0.696.57) on the Mac both score 100% on the Acid3 test; Firefox (v. 4.0.1) on the Mac scores 96%. On Windows Firefox typically scores 97% (Mythbusting: Why Firefox 4 won’t score 100 on Acid3 - our local v. 3.0.13 install scores 72%), and our local install of Internet Explorer (v. 7.0.6002) can't even get it to run the test (however, according to the Acid3 entry on wikipedia Internet Explorer v9 and v10 should score 95% on Acid3).

So, the different browsers implement things differently, and the result is that even through something will work correctly on one browser, it may not work on another. For example, the amino acid test site mentioned above initially worked great on the iPhone, the iPad and Safari, Firefox and Chrome on the Mac, but did not display correctly on the versions of Firefox and Internet Explorer that are used by the students on campus. To overcome this problem I had to 'hack-back' the site so that it used some old HTML/CSS layout tricks, and so it now no longer uses the latest HTML/CSS standards. That is, I had to stick to real basics of DOM and CSS handling.

Bottom line, you have to check, test, and make sure your site works on all the different web browsers out there!

Disclaimer: I do not work for the company that sells and/or produces the Dashcode, and I have not received a 'kick-back' from Apple for writing this article. I do, however, routinely use Dashcode in my teaching, I do find it extremely useful, and so I thought I would share my experience.

Sorry, I don't know if there is a Windows version of this sort of program (surely there must be?). If you do know of one, please feel free to add a comment below.