Developing Apps using HTML5

HTML5 is an umbrella term describing a set of HTML, CSS and JavaScript specifications designed to enable developers to build the next generation of Web sites and applications. What’s notable in that definition is its three parts: HTML, CSS and JavaScript. They define how developers use improved markup, richer style capabilities and new JavaScript APIs to make the most of new Web development features. 


ie, HTML5 = HTML + CSS + JavaScript

WebSockets:


The WebSocket specification defines an API establishing "socket" connections between a web browser and a server. In plain words: There is an persistent connection between the client and the server and both parties can start sending data at any time.

Defined in the Communications section of the HTML5 specification, HTML5 Web Sockets represents the next evolution of web communications - a full-duplex, bidirectional communications channel that operates through a single socket over the Web. HTML5 Web Sockets provides a true standard that you can use to build scalable, real-time web applications. In addition, since it provides a socket that is native to the browser, it eliminates many of the problems Comet solutions are prone to. Web Sockets removes the overhead and dramatically reduces complexity.


Adopting HTML5 in your Applications:


Adopting HTML5, rather than being a wholesale choice, is about making a technology-by technology evaluation and determining which technologies are right for your application. For each HTML5 technology you evaluate, look at (at least) the following factors when deciding whether that technology is ready for you to adopt:

1. How widely implemented across all major browsers is the technology?
2. How would you adopt this technology and “polyfill” support for browsers that don’t support a given feature?

The first factor is the most important, and when combined with an understanding of the browsers commonly used by visitors to your site, should give you a clear picture of which subset of the 100-plus specifications is worth evaluating further. That subset should consist of a set of stable specifications you can reliably adopt today for your users.

However, even with that stable set of HTML5 technologies, you shouldn’t ignore your users who haven’t moved to a newer browser. If you’re heavily involved in the day-to-day development for your site, you no doubt have some rough idea of the percentages of users visiting your site with a given browser. For most of us, it would be easy to look at the percentage of users visiting with an older browser and come to the conclusion that adopting any HTML5 technologies would negatively impact those users. Luckily there’s “polyfilling” to save us from waiting until some foggy date in the future to adopt HTML5.

Paul Irish (a developer on the jQuery and Modernizr projects) defines a polyfill as “… a shim that mimics a future API, providing fallback functionality to older browsers.” A polyfill is like spackle for your Web sites; it’s a way to determine if a given HTML5 feature is available to the user currently browsing your site, and to provide either a shim that “fills in” that support or a course of graceful degradation that enables your site to still function fully.

The most popular library associated with polyfilling is Modernizr, the JavaScript library I mentioned earlier. Modernizr provides some basic polyfills for semantic markup, feature detection for major HTML5 technologies and support for conditional CSS based on supported features. As noted, Modernizr will be the subject of an upcoming article; it will also feature prominently (along with many other polyfilling libraries) throughout this series. To learn more, download Modernizr at modernizr.com. 


Windows 8 Metro Style Apps:


Windows 8  Metro style apps have a brand new look and feel, run on a variety of devices, and you sell them on the Windows Store.Metro style apps can be developed using HTML5, Cascading Style Sheets, Level 3 (CSS3), and JavaScript.

Windows provides two sets of APIs for building Metro style apps: 

1. WinRT(Windows Runtime) 
2. Windows Library for JavaScript

Windows Runtime: These JavaScript, C#, Visual Basic, and C++ APIs provide access to all core platform features. The namespaces are exposed using API metadata format(Windows.winmd) similar to that used by the .NET framework (Ecma-335).

Windows Library for JavaScript: These JavaScript APIs provide controls, CSS styles, and helper functions that help you write object-oriented code. The WinJS namespace covers functionality that is similar to the Windows.UI.XAML namespaces in the Windows Runtime. When you reference these JavaScript files in your app, you must add base.js first, then ui.js

Metro style apps only: Windows Metro style app APIs that are expressed as HTML or XAML elements are supported only in Metro style apps, and are not supported in desktop apps or Metro style enabled desktop browsers.

ref:

Building HTML5 Applications - http://msdn.microsoft.com/en-us/magazine/ee532098.aspx?sdmr=Brandon%20Satrom&sdmi=authors


Creating Mobile Web Applications with HTML 5 - 
http://www.ibm.com/developerworks/xml/library/x-html5mobile1/index.html
http://www.ibm.com/developerworks/xml/library/x-html5mobile2/index.html
http://www.ibm.com/developerworks/xml/library/x-html5mobile3/index.html
http://www.ibm.com/developerworks/xml/library/x-html5mobile4/index.html
http://www.ibm.com/developerworks/xml/library/x-html5mobile5/index.html


Building Apps with HTML5: What You Need to Know - http://msdn.microsoft.com/en-us/magazine/hh335062.aspx

Creating Media Apps for Windows Phone - http://msdn.microsoft.com/en-us/magazine/hh975340.aspx

Develop HTML5 applications using Apache Cordova - http://msdn.microsoft.com/en-us/magazine/hh975345.aspx 


Why WebSockets - http://www.websocket.org/quantum.html


Modernizr: an open-source JavaScript library that helps you build the next generation of HTML5 and CSS3-powered websites - http://modernizr.com/

Microsoft ScriptJunikie Website for HTML5 sample code - http://msdn.microsoft.com/en-us/magazine/ee729207.aspx

Using HTML5 to Create Mobile Experiences - http://msdn.microsoft.com/en-us/magazine/hh975346.aspx

Developing an Advanced Windows Phone 7.5 App that Connects to the Cloud - http://msdn.microsoft.com/en-us/library/gg490765

Transforming a Android App into Windows Phone App - http://msdn.microsoft.com/en-us/magazine/hh965662.aspx

Develop Metro style apps using Visual Studio 2012 RC - http://msdn.microsoft.com/en-us/library/windows/apps/br211384.aspx

Apache Incubator -  http://en.wikipedia.org/wiki/Apache_Incubator