HTML5 – Page 3 – AzureDays

HTML5 Tutorial – Web Workers

February 28, 2014

Web Workers allow running scripts in the background without blocking or freezing the user interface. By using Web Workers to run non-UI scripts in the background, your application can take advantage of multiple cores on your machine to execute scripts concurrently.

Workers allows you to spawn background workers running scripts in parallel to your main page. This allows for thread-like operation with message-passing as the coordination mechanism. Web Workers are also described as “Workers”.

This means that a long running computation no longer needs to block your user interface. HTML5 Web Workers typically run on separate threads so you can take advantage of multicore CPUs.

Continue reading “HTML5 Tutorial – Web Workers”

WebSocket Using SignalR

February 27, 2014

SignalR offers a simple and clean API to write real time web applications where the server needs to continuously push data to clients. Common applications are chat, news feed, notifications, multiplayer games.

SignalR will use WebSockets under the covers when it’s available, and gracefully fallback to other techniques and technologies when it isn’t, while your application code stays the same.

Continue reading “WebSocket Using SignalR”

HTML5 Tutorial – WebSocket Server (on ASP.NET)

February 26, 2014

WebSocket, introduced of as part of HTML5, defines a full-duplex single socket connection over which messages can be sent between client and server.

WebSocket is not just another enhancement to HTTP. The WebSocket standard simplifies much of the complexity around bi-directional web communication and connection management.

While the client side coding is fairly straight forward, implementing WebSockets on some development platforms involves writing a large amount of code just to provide basic functionality. A lot of the functionality could and should be provided by the framework, leaving you to focus on your application.

There are several WebSocket server implementations. Here are are few that may help meet your needs.

Microsoft has implemented WebSocket on different places in Windows 8 and .NET 4.5 Stack. These include an implementation for WCF and one for ASP.NET and another with SignalR.

Each has trade-offs.

In this post, you’ll get an overall understanding on how you can get started on several platforms. I’ll provide an overview where you can get started should you want to build your own framework in WCF and ASP.NET.

And I’ll implement the echo service that will work with the client in my previous post using Microsoft.WebSockets.

Continue reading “HTML5 Tutorial – WebSocket Server (on ASP.NET)”

HTML5 Tutorial – WebSocket Client

February 25, 2014

WebSocket, introduced of as part of HTML5, defines a full-duplex single socket connection over which messages can be sent between client and server.

WebSocket is not just another enhancement to HTTP. The WebSocket standard simplifies much of the complexity around bi-directional web communication and connection management.

In fact, it reduces a lot of unnecessary network traffic and provides such a dramatic improvement that it makes all the old Comet and Ajaz polling, long-polling, and streaming solutions obsolete.

It scales.

Continue reading “HTML5 Tutorial – WebSocket Client”

HTML5 Tutorial – HTML Forms Tags

February 10, 2014

One of the cool features of HTML5 is the support offered in forms. You’ve probably worked with HTML form tag, which is how you collect customer responses and add interactivity to your website. HTML forms interact with scripts to collect data, record information, or simply involve your readers with your web page.

You’ve used input types like text, password, file, hidden, checkbox, radio, submit and button.

But with only those input types, you had to write you own controls for things like a data picker. Your date picker has been a combination of JavaScript and HTML for the user to select a date and insert it into a text.

Continue reading “HTML5 Tutorial – HTML Forms Tags”

HTML5 Tutorial – Drawing on Canvas

February 6, 2014

The <canvas> element can be used to draw graphics via scripting in JavaScript. For example, it can be used to draw graphs, make photo compositions, create animations or even do real-time video processing or rendering. Canvas provicdes resolution-dependent bitmap canvas, which can be used for rendering images on the fly.

Because not all browsers support Canvas, I’ll use Modernizr to help out. Modernizr will let me know if Canvas is supported, and if not it will allow me to call a polyfill.

Continue reading “HTML5 Tutorial – Drawing on Canvas”

Using Modernizr, Polyfills, YepNope

February 4, 2014

image_thumb_7F533839 Modernizr is a small JavaScript library that you can use for feature detection, browser compatibility using polyfills, and quick JavaScript loading. I’ll take each one in turn.

It detects the availability of native implementations for next-generation web technologies, i.e. features that stem from the HTML5 and CSS3 specifications. Many of these features are already implemented in at least one major browser (most of them in two or more), and what Modernizr does is, very simply, tell you whether the current browser has this feature natively implemented or not.

Once you do the feature detection for your browser, you can then do polyfill.

Continue reading “Using Modernizr, Polyfills, YepNope”

HTML5, CSS3 Tip – Boilerplates

January 28, 2014

As you have seen in our introductory posts on HTML5, you will want to start with some sort of boilerplate. Boilerplates help you remember all of the items you need to be successful.

HTML5Boilerplate helps you start your project with a lean, mobile-friendly HTML template; optimized Google Analytics snippet; placeholder touch-device icon; and docs covering dozens of extra tips and tricks.

Continue reading “HTML5, CSS3 Tip – Boilerplates”

HTML5 Tutorial – Getting Started With Semantic Tags

January 17, 2014

So what is this HTML5 all about? And if I already knew HTML4, what is new?

In this series of posts, I’ll describe what you need to know to build a line of business application. I’ll provide code samples, and I’ll post my example code so you can have a starting point with each features.

HTML5 doctype

Let’s start at the top of the page.

Continue reading “HTML5 Tutorial – Getting Started With Semantic Tags”

HTML5 Tutorial – Changes in HTML4 to HTML5

January 16, 2014

“The HTML syntax”, that is mostly compatible with HTML4 and XHTML1 documents published on the Web

HTML5 brings you 30 new elements to mark up documents and applications, and some tags are obsolete.

There was a concerted effort to separate the idea of what the element tag was for from its presentation. Some elements were removed, some had their meaning redefined, and some are new.

This post shows you what tags you can use and best practices in their use.

Continue reading “HTML5 Tutorial – Changes in HTML4 to HTML5”