Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles / HPC

Jotdown

0.00/5 (No votes)
3 May 2013CPOL2 min read 8.6K  
A HTML5 note taking app capable of capturing Video notes.

This article is an entry in our Windows Azure Developer Challenge. Articles in this sub-section are not required to be full articles so care should be taken when voting. Create your free Azure Trial Account to Enter the Challenge.

Introduction

The idea presented in this article emphasizes the need for a simple cross platform video note taking application. The cross platform compatibility is achieved by the way of HTML5 features such as Local Storage API, Video and  Audio tags and the contenteditable attribute. The app features single sign on using OAuth for ruling out the need to add yet another pair of credentials. I am planning to implement Skydrive Cloud Storage for storing the notes. The common set of features that are available in the other note taking apps are applicable such as Annotations, Tagging, Filtering by criteria, Sorting etc.

Background

Many off the shelf note taking apps available in the app stores today are affected by the multitude of platforms and device fragmentation. The write once run anywhere philosophy is obviously not implemented. Considering the Responsive Design, Webkit standardization, availability of JavaScript frameworks and accessing the native device capabilities, this could be the best time to rethink about web apps. Secondly, there aren't any notable video note taking apps available for all the devices. These type of apps are essentially good for classroom and conference room settings. 

How it Works

The application essentially works as a webpage that contains the images, audio and video. With Jotdown, you can create notes that contain text, images, video clips and sound clips. Conceptually, you are just creating a webpage that stores your text as <p>paragraph</p>, <img src="filename" alt="Image"> or uses getUserMedia JavaScript API for snapping a photo, and <audio><source src=""></audio> or getUserMedia API for recording an audio note using the device's microphone. The video note is saved similar to audio. When playing back the DOM is rewritten so that audio and video tags have control attribute enabled. i.e. <audio controls></audio> and <video controls></video> respectively. The synchronization is achieved by uploading the webpage to the online storage provider such as Skydrive. The Azure server hosts the key Jotdown webapp and the sync is achieved by using LocalStorage API which individually keeps a copy of the whole note in each of the devices. The push capability is achieved by either opening the webapp in the browser or handled by the Skydrive client on the device.

Using the code  

The code is being developed for the model and presentation layer using jQuery(for querying the DOM) and Knockout.js and Twitter Bootstrap for Responsive Design. The integration of Skydrive storage is underway.

Role of Windows Azure 

  1. Perfect for the integration of Skydrive storage API with the Azure Cloud Services 
  2. High performance computing coupled with unmatched Scalability for the need of near native app performance.

Points of Interest 

I'm completely new to Windows Azure, though I'd experience deploying some commendable projects  on Shared Servers and Staging Server. This should be the moment for me to fulfill the desire of deploying the webapp on Windows Azure.

History

  • 03/05/2013 - Submitted Article as an idea for the Windows Azure Developer Contest.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)