Beyond Web 2.0: HTML5 for Creating Engaging Experiences

An information professional (IP) has to ask of oneself, of Social Media (SM), “How can I take advantage of what this medium has to offer, in tailoring my message?” After all, all SM platforms afford, but do not guarantee, user engagement. The message is critical as it has to provide a sense of value and motivate the user to add/interact with it. The format of a message, I argue, is even more critical, as it controls how engaging a message can be. HTML5 allows us to build responsive, animated, audio-visual, visually-rich interactive content, with following examples in catalogue data visualisation, whiteboard thought-process sharing, and YouTube interactive videos.

Catalogue Data Visualisation

How does one break the tabular presentation of an AV catalogue, and build discussion on its records? One can certainly attach SM capabilities to each entry (Share, Tweet, Disqus etc.). But how does one engage the user in exploring a huge catalogue? One can use HTML5 to create an interactive exploration environment (see http://cinema-series.orange.fr/evenement/universeries/en/), and use SM to market this, and as aforementioned.

Mind-mapping with thought process

There are a plethora of (collaborative) online whiteboards which an IP can use to present ideas, e.g. proposed floor plans for a new learning commons. However, the majority of these platforms only allow a link to the final image. What if the IP wanted to share this image, but 1) show the thought process, and 2) allow SM audience to edit and re-share the result? Emerging solutions, such as skecthtoy.com, allow this enhanced presentation and interaction (see http://sketchtoy.com/22699287). Reader discussion – this would benefit VoiceThread, yay or nay?

YouTube Interactive Video

A new feature to this format is annotating, which can be creatively used to build interactive videos, such as learning objects, where one can “choose” examples to see within a video (see http://mashable.com/2011/01/30/interactive-youtube-videos/).

 

My message to SM users here is, think outside the box on how you can use the online medium, to create more engaging messages, to spark interest and build your community.

 

References

Adobe Systems Inc. HTML5 and CSS3 – Welcome to the Expressive Web Beta. http://beta.theexpressiveweb.com/ (accessed 10 February 2013).

Amy-Mae Elliott. 10 Incredible Interactive YouTube Videos. http://mashable.com/2011/01/30/interactive-youtube-videos/ (accessed 14 February 2013).

Giustini, D. Class Notes: Technotopia and Trends. In: (eds.) Module IV: Creation. 1st ed. Vancouver: Giustini; 2013. p8-9

Hakim El Hattab. Reveal Editor. http://www.rvl.io/ (accessed 9 February 2012).

Hakim El Hattab. Sketch Toy. http://www.sketchtoy.com (accessed 10 February 2013).

OCS. Universeries. http://cinema-series.orange.fr/evenement/universeries/en/ (accessed 15 February 2012).

Rean. Top 3rd Party Commenting Systems – Reviewed. http://www.hongkiat.com/blog/3rdparty-comment-discuss-systems-reviewed/ (accessed 11 February 2013).

 

Further Inspiration

SM Tools

3rd Party Commenting – insta-discussion to attach to the above objects

http://disqus.com

http://intensedebate.com

http://www.livefyre.com

 

HTML5 Presentations (some HTML knowledge necessary)

http://www.rvl.io, demo http://lab.hakim.se/reveal-js/#/

impress.js – demo http://bartaz.github.com/impress.js/#/bored

Google Slides – https://code.google.com/p/html5slides/, demo http://io-2012-slides.googlecode.com/git/template.html

 

Sketching!

Sktechtoy.com

 

Learning Objects

Adobe Captivate (v6), http://www.adobe.com/products/captivate.html

–          Version 6 has moved to HTML5, mobile and cross platform friendliness

One response to “Beyond Web 2.0: HTML5 for Creating Engaging Experiences

Leave a Reply

Your email address will not be published. Required fields are marked *

Spam prevention powered by Akismet