Posts

Showing posts with the label HTML 5

ASP.NET SignalR

SignalR is an Async signaling library for ASP.NET to help build real-time, multi-user interactive web applications. ASP.NET SignalR is a library for ASP.NET developers that makes it incredibly simple to add real-time web functionality to your applications. What we mean to say "real-time web" functionality? Real-time web is the ability to have your server-side code push content to the connected clients as it happens, in real-time. HTML 5 introduces WebSockets which enables bi-directional communication between the browser and server. SignalR uses WebSockets under the cover when it is available and when WebSockets does not available, SignalR gracefully uses other techniques and technologies (i.e. Server-Sent Events, Forever Frame etc) while application code stays the same. SignalR provides a very simple, high-level API which calls JavaScript functions in your clients' browsers from server-side .NET code in your ASP.NET application using Remote Procedure Calls (RPC)...

HTML5 form attributes

Image
There are 14 new attributes that we’ll be looking at in this article. placeholder autofocus autocomplete required pattern list multiple novalidate formnovalidate form formaction formenctype formmethod formtarget placeholder First up is the placeholder attribute, which allows us to set placeholder text as we would currently do in HTML4 with the value attribute. It should only be used for short descriptions. For anything longer, use the title attribute. The difference from HTML4 is that the text is only displayed when the field is empty and hasn’t received focus. Once the field receives focus (e.g., you click or tab to the field), and you begin to type, the text simply disappears.  Let’s have a look at how to implement the placeholder attribute. <input type = "text" name = "user-name" id = "user-name"     placeholder = "at least 3 characters" >   But as control get focus, placeholde...

Semantic Elements in HTML5

Image
A semantic element clearly describes its meaning to both the browser and the developer. Examples of   non-semantic   elements: <div> and <span> - Tells nothing about its content. Examples of   semantic   elements: <form>, <table>, and <img> - Clearly defines its content. Many of existing web sites today contains HTML code like this: <div id="nav">, <div class="header">, or <div id="footer">, to indicate navigation links, header, and footer. HTML5 offers new semantic elements to clearly define different parts of a web page: <header> <nav> <section> <article> <aside> <figcaption> <figure> <footer> Semantic Elements in HTML5 Tag Description <article> Defines an article <aside> Defines content aside from the page content <figcaption> De...

Server-Sent Events in HTML5

The world wide web and the Internet started as a stateless content delivery mechanism, taking a step backwards compared to traditional desktop applications. Early Internet applications needed to explicitly request every piece of information, and the server sent only the requested data. Then came what we now call “Web 2.0 application development”: Dynamic HTML, heavy usage of JavaScript, AJAX, and various plugins (Adobe Flash and Microsoft Silverlight). These applications were dynamic and responsive, and they brought much of that rich interactive experience users enjoyed in desktop client/server applications to the Internet. However, due to the request and response architecture that these applications are based on, the latest Rich Internet Applications still cannot match the connectivity and the capability to get real-time data that client/server applications had more than a decade ago. The reason is that these applications still need to initiate the communication from the web...

Web Workers in HTML5

Image
What are Web Workers? Web Workers API is being developed currently. The Web Workers are background workers that run scripts in parallel to their main page. The Web Worker itself is independent of any user interface scripts. They allow thread-like operations on the client side that include message-passing mechanism for coordination or data retrieval. If you expected to have a long-lived process, to have a high start-up performance cost, and a high per-instance memory cost Web Workers can be a good solution. How to use Web Workers API? The specification for Web Workers specify two kinds of workers – Dedicated Workers and Shared Workers. The first kind wraps a given task and perform it. The second can have multiple connections and uses ports for posting messages. The first thing to do in order to use the Web Workers API is to create the worker and pass it an execution script URL. Here is an example for how to do that with Dedicated Workers: var   worker =  new   ...