Saturday 15 March 2014

Research Project: HTML5 Canvas and new technologies



From my findings in artefact 3, the results show that some people are more engaged by the website because of the V.E. These environments exist in the form of interactive or non interactive animated flash or canvas applications.

My findings from reading "HTML Design Essentials" by "Creative Masterclass" makers of .net magazine:



Flash versus HTML5

HTML is winning hands down. canvas: web graphic trends



Adobe edge HTML5 Canvas

"The danger of adobe edge faces is, ironically from something we call 'flash' effect'. Animation and interactivity used for pointless purposes; sites that showcase splash screens and progress bars. What we fear is the second coming of 'skip intro'."

"It seems to me that we're simply jumping on the animation bandwagon because we can, and are in serious risk of backtracking on all the great advances in usability we've had over the last few years. Every new portfolio site is now going to spin, shake"



VML and SVG Javascript



Vector Mark-up language: supported by IE6 - IE9 only
Scalable Vector graphics: supported on all browsers

"Both SVG and VML work by adding special DOM nodes to the document which represent shapes, like circles, lines, and polygons. Like any other DOM element, these shapes can be styled, positioned, and interacted with using native JavaScript or your favorite JavaScript library like jQuery, YUI, etc."

" First, since SVG and VML require us to add DOM elements for each shape to the document, the document model can quickly become overloaded for complex drawings, and the application could slow down or even crash. HTML5 Canvas is much more efficient and performant."



HTML5 Canvas 



"Second, unlike SVG, which can have events bound to shapes via native JavaScript or a JavaScript library, HTML5 Canvas does not provide an event binding API, which is a real bummer. And if you try to implement something yourself, you’ll quickly realize that it’s ridiculously difficult to create an easy to use mouse / touch event system that’s performant. 

Fortunately, there are several HTML5 canvas libraries out there that address this problem, including KineticJS, EaselJS, Paper.js, Fabric.js, and Processing.js."


Janvas 


SVG drawing program. Quite new at the moment: http://www.janvas.com/illustrators_designers_developers/projects/janvas2D_web/index_EN.php