Introduction
There are currently several options for producing either drawings directly onto web pages, or for creating collages of images. The most recent option comes in the form on the HTML5 Canvas tag.
HTML5 Canvas
HTML5, the successor to HTML 4.01, offers new semantic elements, direct support for video and audio, built-in form validation and the canvas tag (<canvas><canvas/>), amongst other features.
The Canvas element is used to add a blank canvas to a web page. Using JavaScript it’s then possible to add all manner of interactivity to this canvas, canvas having no drawing abilities of its own. It can also be used, for example, to draw graphs, make photo compositions or create animations.
Free Drawing with Canvas
I was already aware of this having been done by "Mr. Doob", who has produced an example where a range of brushes can be used to create some very impressive effects:
Canvas drawing with multiple brush options
This was then turned into a web application version which supports multitouch. for use on mobile devices which use webkit based browsers, eg, iPhone, iPad, Android, here:
Canvas web app example
Another example can be found on the Opera Developer website:
Opera Canvas Drawing and Shapes Example
and the accompanying tutorial:
Opera Canvas Tutorial
It is possible to save work to a local machine from Canvas, so in this respect it is feasible for use in schools.
The Possibilities of Canvas & Websockets
Websockets allow bi-directional communication between web-browsers and servers, deprecating the use of technologies such as AJAX.
When used in conjunction with Canvas, the effect is the ability to allow multiple users to draw at the same time as other users, all of whom can see one another’s work.
Canvas and Websockets example
Note: I believe the UWE proxy may be preventing connection to this service.
In future, websockets could be used to create collaborative works for groups of students to work on something simultaneously. This would certainly be fun, but is currently very open to abuse.
An exmple of a task that could be undertaken simultaneously by a group is to have an image of a basic robot outline, which students can customise all together. Perhaps provide a time limit and judge whose is the most innovative.
The issue with using websockets for this purpose currently is that refreshing the browser blanks the screen, although many browsers to communicate synchronously, it does not necessarily provide backups of work being done. This is not so much of an issue as it may at first seem, however. In a group scenario, it wouldn't be an insurmountable problem if one computer crashed, because the same work would still exist on the other users' machines.
Collages and Canvas
An excellent example of using collages with Canvas can be found here:
Collages and Canvas Example
This example appears to cover most of the functionality a school would require to produce image collages for assignments or class work.
It would be advantageous if the user could add images directly off their computers, however in most cases a Google search would be used to source images, in which case the built in search feature would prove incredibly useful.
Browser support for Canvas
'The <canvas> element isn't supported in some older browsers, but is supported in Firefox 1.5 and later, Opera 9 and later, newer versions of Safari, Chrome, and Internet Explorer 9.'—Mozilla
It would be necessary for all school computers to be running the latest versions of web browsers.
Conclusion
In order to produce the applications for use in schools, someone who was familiar with the technology would likely need to be employed, unless there was a teacher who could pick it up. This would represent a considerable investment of time and money, but would result in a truly interactive and fun feature for the children's use. An accompanying module could be run in their IT lessons where they can learn how it's done for themselves.
No comments:
Post a Comment