AngularJS

AngularJS is an open source, JavaScript based web application development framework. It can be added to an HTML page with a <script> tag. AngularJS extends HTML attributes with Directives, and binds data to HTML with Expressions. The AngularJS framework works by first reading the HTML page, which has embedded into it additional custom tag attributes. Angular interprets those attributes as directives to bind input or output parts of the page to a model that is represented by standard JavaScript variables. The values of those JavaScript variables can be manually set within the code, or retrieved from static or dynamic JSON resources.

Definition of AngularJS as put by its official documentation is as follows:
"AngularJS is a structural framework for dynamic web applications. It lets you use HTML as your template language and lets you extend HTML's syntax to express your application components clearly and succinctly. Its data binding and dependency injection eliminate much of the code you currently have to write. And it all happens within the browser, making it an ideal partner with any server technology."

Angular allows your application to have an expanded HTML library.

Features of AngularJS are:

• AngularJS is a efficient framework that can create Rich Internet Applications (RIA).
• AngularJS provides developers an options to write client side applications using JavaScript in a clean Model View Controller (MVC) way.
• Applications written in AngularJS are cross-browser compliant. AngularJS automatically handles JavaScript code suitable for each browser.
• AngularJS is open source, completely free, and used by thousands of developers around the world. It is licensed under the Apache license version 2.0.

HTML5 Canvas

Canvas element

The canvas element is part of HTML5 and allows for dynamic, scriptable rendering of 2D shapes and bitmap images. It is a low level, procedural model that updates a bitmap and does not have a built-in scene graph. Canvas was initially introduced by Apple for use inside their own Mac OS X WebKit component in 2004, powering applications like Dashboard widgets and the Safari browser. Later, in 2005 it was adopted in version 1.8 of Gecko browsers, and Opera in 2006, and standardized by the Web Hypertext Application Technology Working Group (WHATWG) on new proposed specifications for next generation web technologies.

Canvas consists of a drawable region defined in HTML code with height and width attributes. JavaScript code may access the area through a full set of drawing functions similar to those of other common 2D APIs, thus allowing for dynamically generated graphics. Some anticipated uses of canvas include building graphs, animations, games, and image composition.

What is HTML Canvas?

The HTML <canvas> element is used to draw graphics, on the fly, via scripting (usually JavaScript).

The <canvas> element is only a container for graphics, it has no drawing abilities of its own. User must use a script to actually draw the graphics.

The getContext() method returns an object that provides methods and properties for drawing on the canvas. Canvas has several methods for drawing paths, boxes, circles, text, and adding images. A canvas is a rectangular area on an HTML page. By default, a canvas has no border and no content.

Internet Explorer 9, Firefox, Opera, Chrome, and Safari support <canvas> and its properties and methods.

Canvas vs SVG (Scalable Vector Graphics)

SVG is an earlier standard for drawing shapes in browsers. However, unlike canvas, which is raster-based, SVG is vector-based, i.e., each drawn shape is remembered as an object in a scene graph or Document Object Model, which is subsequently rendered to a bitmap. This means that if attributes of an SVG object are changed, the browser can automatically re-render the scene.

How to use Canvas

The following code creates a Canvas element in an HTML page:

<canvas id="canvasSample" width="200" height="200">
This text is displayed if your browser does not support HTML5 Canvas.
</canvas>

Using JavaScript, we can draw on the canvas:

var element = document.getElementById('canvasSample');
var context = element.getContext('2d');
context.fillStyle = 'red';
context.fillRect(30, 30, 50, 50);

Microformats

tagline “humans first, machines second”

Microformats are a collection of vocabularies for extending HTML with additional machine-readable semantics. Designed for humans first and machines second, microformats are a set of simple, open data formats built upon existing and widely adopted standards. A microformat is a web-based approach to semantic markup which seeks to re-use existing HTML/XHTML tags to convey metadata and other attributes in web pages and other contexts that support (X)HTML, such as RSS. This approach allows software to process information intended for end-users (such as contact information, geographic coordinates, calendar events, and similar information) automatically.

Being machine readable means a robot or script that understands the microformat vocabulary being used can understand and process the marked-up data. Each microformat defines a specific type of data and is usually based on existing data formats — like vcard (address book data; RFC2426) and icalendar (calendar data; RFC 2445) — or common coding patterns. Microformats are extensions to HTML for marking up people, organizations, events, locations, blog posts, products, reviews, resumes, recipes etc. Sites use microformats to publish a standard API that is consumed and used by search engines, browsers, and other tools.

Microformats are:

• A way of thinking about data
• Design principles for formats
• Adapted to current behaviors and usage patterns (“Pave the cow paths.”)
• Highly correlated with semantic XHTML, AKA the real world semantics, AKA lowercase semantic web, AKA lossless XHTML
• A set of simple open data format standards that many are actively developing and implementing for more/better structured blogging and web microcontent publishing in general.
• “An evolutionary revolution”

Microformats are not:

• A new language
• Infinitely extensible and open-ended
• An attempt to get everyone to change their behavior and rewrite their tools
• A whole new approach that throws away what already works today
• A panacea for all taxonomies, ontologies, and other such abstractions
• Defining the whole world, or even just boiling the ocean

Microformats principles:

• Solve a specific problem
• Start as simple as possible
• Design for humans first, machines second
• Reuse building blocks from widely adopted standards
• Modularity / embeddability
• Enable and encourage decentralized development, content, services

Example:
The contact information using 'hCard' microformat markup as below:

<ul class="vcard">
  <li class="fn">Joe Doe</li>
  <li class="org">The Example Company</li>
  <li class="tel">604-555-1234</li>
  <li><a class="url" href="http://example.com/">http://example.com/</a></li>
</ul>

Here, the formatted name (fn), organisation (org), telephone number (tel) and web address (url) have been identified using specific class names and the whole thing is wrapped in class="vcard".

Website: http://microformats.org/
Wiki: http://en.wikipedia.org/wiki/Microformat 

Axure : Make Interactive HTML Prototypes

Axure RP is the standard in interactive wireframe software and gives you the power to quickly and easily deliver much more than typical mockup tools. Generate an interactive HTML website wireframe or UI mockup without coding.
Axure RP gives you the wireframing, prototyping and specification tools needed to make informed design choices, persuade any skeptics, get your design built to spec... and maybe win a few fans along the way. AxShare is an easy way to share Axure RP prototypes with your team and with clients. It allows user to create a free account to quickly share prototypes and have discussions in the prototype.

Features:

Sketch & Design
Quickly create wire-frames that evolve from sketch to ready-for-dev designs.
Interact
Experience and present prototypes that go beyond basic links.
Share
Share Axure RP prototypes with your team and with clients.
Document
Annotate your wireframes and automatically generate Word specifications.
Collaborate
Design together keeping a history of changes and keep track of  feedback.

You can explore more on the website. Link: http://www.axure.com/