Noty – HTML5 Notes Widget

Noty is the name of the HTML5 application I developed for the recent HTML5 competition hosted at Nettuts. Unfortunately I did not win, but I did learn a lot about HTML5 and related technologies.

It is available for purchase at CodeCanyon.

Noty is a simple widget for taking notes about the current page. A potential use is taking notes on a blog post for commenting later.

Noty uses several HTML5 and related technologies, using the browser’s native functionality wherever possible. It is designed to work in modern browsers.

• Drag-and-Drop support via the browser’s native API . You can save excerpts from the page simply by highlighting text and dragging to the widget.
• Persistent storage of notes for browsers that support it. Notes are saved in the user’s borwser for future visits.
• Sharing of notes with link via Email or Twitter
• Automatic URL shortening for sharing via bit.ly
• Ability to scroll directly to the source of a note on the page (not available in Internet Explorer)
• Fancy CSS3 effects (box-shadow, gradients and transitions)
• Fully semantic HTML5 markup
• Collapsable widget, remembering the state for the next page. This is useful in case the widget covers part of the page.
• Tested to work in current versions of Chrome, Firefox, Internet Explorer and Safari