RSS

Category Archives: HTML5

HTML5 Specification

namespace in HTML5 – Draft proposal

http://www.w3.org/TR/2011/WD-html5-20110113/namespaces.html

Advertisements
 
Comments Off on namespace in HTML5 – Draft proposal

Posted by on March 25, 2013 in HTML5

 

Mobile Proxies

Mobile Proxies
Proxying services will make it easier for developers to deliver a better experience for users. But as they become more popular and better-understood, they will also come with the privacy and security concerns that were ignited soon after Silk browser came out. It will be up to the ecosystem to find the right balance, and Google has so far done well to release this experimentally, and ensuring secure sites go direct to the browser.

Mobile Proxy

Mobile Proxy

SPDY is an experiment with protocols for the web.  Its goal is to reduce the latency of web pages.
http://www.chromium.org/spdy

 
Comments Off on Mobile Proxies

Posted by on March 13, 2013 in HTML5, Javascript

 

What WebSocket means for architects and developers

WebSocket itself is an independent TCP-based protocol, but it is designed to support any other protocol that would traditionally only run on top of a pure TCP connection. The best way to think of WebSocket is as a transport layer on top of which any other protocol can run. The WebSocket API supports the ability to define sub-protocols: protocol libraries that can interpret specific protocols. Examples of such protocols include XMPP, STOMP, and AMQP.

In this way, developers no longer have to think in terms of the HTTP request-response paradigm, but instead, they can select the most appropriate protocol for the type of applications they are writing. The only requirement on the browser-side is to run a JavaScript library that can interpret the WebSocket handshake, establish and maintain a WebSocket connection, and interpret specific protocols coming down the wire. On the server side, the industry standard is to use existing protocol libraries that run on top of TCP and leverage a WebSocket Gateway such as any of the Kaazing WebSocket Gateways supporting protocols like XMPP and AMQP, to translate TCP traffic into corresponding WebSocket traffic in a way that is both scalable and secure.

Start using WebSockets (with source files)

Another article about WebSocket use

W3C working draft on WebSockets

 
Comments Off on What WebSocket means for architects and developers

Posted by on March 8, 2013 in HTML5, Important links

 

HTML5 Web Storage in ASP.NET

Introduction

HTML5 Web Storage provides a streamlined data storage mechanism that allows developers to store data on the client as key-value pairs. This article explores what Web Storage is, its flavors and illustrates how Web Storage data can be transferred between client and server in ASP.NET websites.

Contents [hide]

Introduction

Most of the websites developed today deal with data in one or the other form. It follows that application data needs some storage mechanism. As far as server is concerned we have sophisticated storage mechanisms such as an RDBMS. However, storing data on the client side can be tricky. Traditionally developers used Cookies to persist data on the client side but with many limitations. To help developers get rid of these limitations and provide a streamlined data storage mechanism HTML5 has introduced what is called as Web Storage. This article explores what Web Storage is, its flavors and using Web Storage in ASP.NET websites.

What is Web Storage?

Web Storage allows you to persist data on the client side as key-value pairs. The W3C recommended storage limit for Web Storage is 5 MB per origin. Comparing this storage size with that of Cookies (4 KB), it can be clearly seen that Web Storage offers a reasonable space for client side storage.

There are differences, however, between Cookies and Web Storage in terms of how they work. Cookies are passed between client and server with each and every request of a given website. On the other hand, Web Storage is never passed to the server automatically. If you ever need to transmit data from Web Storage to the server side code, you must resort to some programmatic approach such as jQuery calling a Web Method or a WCF service. Additionally, unlike cookies you cannot set expiration time for Web Storage. You either need to clear it programmatically or through some user interface dialog offered by the browser.

The term Web Storage is used to indicate client side data storage mechanism of HTML5. Web Storage comes in two flavors viz. Session Storage and Local Storage. These two types are exposed as sessionStorage and localStorage attributes of the window object.

As you might have guessed, Session Storage is persisted as long as the current browser (or its tab) instance is running. The moment you close the browser instance (or tab) the persisted data is removed. If you load the page again, it won’t be able to see any of the previously stored data. Session Storage is suitable for a single transaction. Local Storage, unlike Session Storage, persists data across multiple instances of the browser and that too beyond current session. Thus closing a browser window won’t remove the data. The data will be stored locally for future runs of the website.

Session Storage and Local Storage objects

As mentioned earlier sessionStorage and localStorage objects store data as key-value pairs. They have similar set of properties and methods. The following table lists them for your quick reference:

Table 1: Session Storage and Local Storage methods and properties

Property / Method Description
setItem() setItem() method stores a key-value pair in the respective Web Storage object.
getItem() getItem() method retrieves value of a specified key from the respective Web Storage object.
removeItem() removeItem() method removes a specified key-value pair from the Web Storage object under consideration.
clear() clear() method removes all the key-value pairs from the Web Storage object.
key() key() method takes a 0 based index and returns key name at that index.
length length property returns the total number of key-value pairs present in the Web Storage object.
remainingSpace remainingSpace property returns the amount of storage space in bytes still available for storing data. This property is specific to IE. Other browsers may implement similar property.

Now that you have some idea about session storage and local storage, let’s try out the above properties and methods in a sample web form. Though you can use plain HTML page to test these properties and methods, we will use an ASP.NET web form so that you can modify the same form when we develop a more realistic example in the later sections.

Begin by creating a new ASP.NET website and design the default web form as shown in Figure 1. The complete markup of the web form can be found in the code download associated with this article. You will be using jQuery to handle button click events and to store data in Web Store. So you need to refer jQuery library in your website. The examples discussed in this article use IE9 as the browser but you can use any other browser that supports Web Store feature of HTML5 (including the latest versions of FireFox, Safari, Opera and Chrome).

Figure 1: Storing and retrieving data in Web Storage

Storing and retrieving data in Web Storage

As you can see, the form consists of two textboxes to enter key name and value respectively. Clicking the Store Data button saves the key-value pair to the localStorage and clicking on the Clear Data button clears all the key-value pairs. The table below the buttons reflect the latest key-value pair and total number of items in the localStorage.

The following jQuery code shows how the above form works:

01.var storage = window.localStorage;
02.$(document).ready(function () {
03. $("#store").click(OnStoreClick);
04. $("#clear").click(OnClearClick);
05.});
06.function OnStoreClick(event) {
07. var key = $("#keyName").val();
08. var value = $("#keyValue").val();
09. storage.setItem(key, value);
10. $("#divKey").text(storage.key(storage.length - 1));
11. $("#divValue").text(storage.getItem(key));
12. $("#divLength").text(storage.length);
13.}
14.function OnClearClick(event) {
15. storage.clear();
16. $("#divKey").text("-- No key --");
17. $("#divValue").text("-- No value --");
18. $("#divLength").text(storage.length);
19.}

First, the code stores a reference to localStorage object in a variable – storage. This way you can easily test the code for sessionStorage also by changing just one line. The ready event handler of the document wires click event of the two buttons – Store Data and Clear Data – with event handler functions namely OnStoreClick() and OnClearClick().

The OnStoreClick() event handler function stores a key-value pair in the storage object using setItem() method. It then uses key() and getItem() methods are then used to retrieved the key just stored. The key-value pair along with the length of the storage is then displayed in respective DIV elements.

The OnClearClick() method removes all the items from the store using clear() method. This can be verified by outputting length of the storage again.

Session Storage and Local Storage Events

The sessionStorage and localStorage objects support storage event that is raised whenever the underlying storage area changes. You should be aware of two things while dealing with this event. Firstly, storage event is raised on the window object. Secondly, for most of the browsers except IE9, storage event is fired on every browser instance (or tab) except for the one that changed the storage object. In case of IE9 storage event is raised for all the instances of the browser. So, if Example1.aspx is loaded in three browser windows Window1, Window2 and Window3 and Window1 changes the web storage, Window2 and Window3 will receive the storage event. In IE9 all the windows receive the storage event.

The storage event handler receives event information as a StorageEvent object whose properties are shown in the following table:

Table 2: StorageEvent

Event data Description
key Represents the key of the item that is being changed.
oldValue The old value of the key (if any) being changed
newValue The new value being assigned to the key
url The url of the page that is changing the storage area
storageArea Reference to the storage area

Just to check how the storage event works, modify the previous code as shown below:

1.$(document).ready(function () {
2. window.addEventListener('storage', OnStorage, false);
3. ...
4.});
5.function OnStorage (event) {
6. alert("Storage event fired for key : " + event.key + " in page " + event.url);
7. alert("Old Value - New Value : " + event.oldValue + " - " + event.newValue);
8.}

Notice how storage event handler has been attached using addEventListener() method of the window object. The OnStorage() function uses various pieces of event parameter and displays them in a message box. The Figure 2 shows a sample run of the form when a new key is added:

Figure 2: Handling storage event

Handling storage event

Clearing Web Storage Manually

If you add some key-value pairs to the localStorage and then close the browser without clearing the storage area, the data is preserved on the disk. As mentioned earlier, unlike Cookies you cannot set any specific expiration date and time for local storage. One way to clear the localStorage data is programmatically calling the removeItem() method for each item or by calling the clear() method. Alternatively, you can manually delete the data using the browser dialogs. For example, have a look at Figure 3 that shows “Delete Browsing History” dialog of IE9.

Figure 3: Clearing localStorage manually

Clearing localStorage manually

There are two checkboxes you should be aware of – Cookies and Preserve Favorites website data. Un-checking the Cookies checkbox will clear all the storage areas for all domains that are not in your favorites folder. If you want to clear everything make sure to un-check Preserve Favorites website data checkbox.

Passing data from Web Storage to server

Unlike Cookies, Web Storage data is not passed between the client and server with each and every request. If you wish to send the Web Storage data to the server you must device a programmatic way to do so such as a hidden field or an AJAX call. As far as ASP.NET web forms are concerned one neat way is to call a Web Service or a WCF Service from the client script and pass the data to the server. The server can then examine and process the data and may store it into a database.

In the example discussed in the next section, you will use jQuery to call Web Methods. The Web Methods perform two functions – they fetch data from the server so that client can render it as required and they persist the Web Storage data in SQL Server database. While dissecting the example, our focus will be on Web Storage related functionality and we won’t go into the details of making AJAX calls using jQuery.

A more realistic example – Survey

Now that you know everything needed to make use of Web Store features of HTML5, let’s develop a more realistic example than the previous one that will put to use all the information we discussed so far. In this section you will develop a simple survey form that captures user feedback. As you might be aware, filling up a survey may not be a priority for the end user while he is using your website. Chances are that he may start filling it and navigate to some other part of the website that interests him more. He may even close the browser and come back to your website sometime later. In any such scenarios it would be nice to persist the survey data locally as the user is entering it. Later when user comes back, you can reload the persisted data and save him some time. Your survey form will look as shown in Figure 4:

Figure 4: Survey form developed using Local Storage

Survey form developed using Local Storage

To begin developing the survey form, create a new ASP.NET website and add a SQL Server database to its App_Data folder. You will need to design four tables viz. Questions, Choices, Users and Results. The schema of these tables is shown in Figure 5:

Figure 5: Tables required in Survey form

Tables required in Survey form

The Questions table stores survey questions and QuestionID is the primary key. The Choices table stores choices for questions and its primary key is ChoiceID. One question can have multiple choices. The Users table stores user information such as FirstName, LastName and Email and its primary key is UserID column. Finally, Results table stores user response to the survey questions.

To get the data in and out of these tables, you will use Entity Framework. So, add a new ADO.NET Entity Data Model to the website. Drag and drop all the four tables onto the surface of the designer so as to create data model classes as shown in Figure 6:

Figure 6: Entity Data Model for required tables

Entity Data Model for required tables

The communication between client and server will happen via jQuery and Web Methods. You will need to write three web methods in all viz. GetQuestions(), GetChoices() and SaveResults(). These methods are discussed next.

1.[WebMethod]
2.public static IQueryable<Question> GetQuestions()
3.{
4. DatabaseEntities db=new DatabaseEntities();
5. var data = from item in db.Questions
6. select item;
7. return data;
8.}

The GetQuestions() Web Method is intended to return all the survey questions from the Questions table. As you can see, it simply returns all the Question instances to the caller.

1.[WebMethod]
2.public static IQueryable<Choice> GetChoices()
3.{
4. DatabaseEntities db = new DatabaseEntities();
5. var data = from item in db.Choices
6. select item;
7. return data;
8.}

The GetChoices() Web Method is similar to GetQuestions() method but returns all the choices from Choices table.

01.[WebMethod]
02.public static void SaveResults(Dictionary<string, string> data)
03.{
04. DatabaseEntities db = new DatabaseEntities();
05. User usr = new User();
06. usr.FirstName = data["FirstName"];
07. usr.LastName = data["LastName"];
08. usr.Email = data["Email"];
09. db.Users.AddObject(usr);
10. db.SaveChanges();
11. string userEmail = data["Email"];
12. int usrId = (from item in db.Users
13. where item.Email == userEmail
14. select item.UserID).SingleOrDefault();
15. data.Remove("FirstName");
16. data.Remove("LastName");
17. data.Remove("Email");
18. foreach(string str in data.Keys)
19. {
20. int choiceId = int.Parse(str);
21. int questionId = int.Parse(data[str]);
22. Result result = new Result();
23. result.QuestionID = questionId;
24. result.ChoiceID = choiceId;
25. result.UserID = usrId;
26. db.Results.AddObject(result);
27. }
28. db.SaveChanges();
29.}

The SaveResults() Web Method saves user response to the survey in the database. In order to understand the SaveResults() method you need to understand how you will be storing data in the localStorage. The following table lists the keys used to store data in the localStorage.

Table 3: Local Storage keys to store data

Key Value
FirstName A string value indicating first name of the user.
LastName A string value indicating last name of the user.
Email A string indicating Email address of the user.
<choice_id> <question_id> – An integer indicating QuestionID of the choice. E.g localStorage[“3”] = 1 where 3 is a ChoiceID and 1 is a QuestionID

Notice that localStorage is a key-value collection and each key needs to be unique. That is why we make ChoiceID as key and QuestionID as value. If you do other way round, you will not be able to store multiple choices for a question because latest ChoiceID will overwrite the previously stored ChoiceID since QuestionID for both will be the same.

The SaveResults() method accepts a Dictionary that will contain all the key-value pairs from the localStorage. Inside it inserts a record in the Users table and fetches back its UserID. It then removes FirstName, LastName and Email keys from the dictionary so that you can iterate through the remaining keys and with each iteration inserts a record in the Results table.

The web methods just discussed are called from the client side jQuery code. Let’s see how.

01.$(document).ready(function () {
02. // wire event handlers
03. $("#submit").click(SubmitData);
04. $("#firstName").change(function () { window.localStorage["FirstName"] = $(event.target).val(); });
05. $("#lastName").change(function () { window.localStorage["LastName"] = $(event.target).val(); });
06. $("#email").change(function () { window.localStorage["Email"] = $(event.target).val(); });
07. // load data stored previously
08. $("#firstName").val(window.localStorage["FirstName"]);
09. $("#lastName").val(window.localStorage["LastName"]);
10. $("#email").val(window.localStorage["Email"]);
11. GetQuestions();
12.})

The ready event handler wires click event of the “Submit Answers” button to SubmitData function (discussed later). It also wires change event of three textboxes – firstName, lastName and email – to a function. The change event handler function essentially stores value of the respective textbox in the localStorage. This way even if user navigates away by filling the survey form half way, you still have the data with you. Just in case data is already there in the localStorage you load it in the textboxes. Survey questions are dynamically fetched from the database and displayed to the user. This is done inside the GetQuestions() function.

01.function GetQuestions() {
02. var url = "Example2.aspx/GetQuestions";
03. successHandler = function (results) {
04. for (var i = 0; i < results.d.length; i++) {
05. $("#container").append("<div data-questions-questionid='" + results.d[i].QuestionID + "'>" + results.d[i].QuestionText + "</div>");
06. $("div[data-questions-questionid]").addClass("paddedDiv");
07. }
08. GetChoices();
09. }
10. $.ajax({
11. type: "POST",
12. url: url,
13. contentType: "application/json; charset=utf-8",
14. dataType: "json",
15. success: successHandler,
16. error: function (err) {
17. alert(err.status + " - " + err.statusText);
18. }
19. })
20.}

The GetQuestions() function calls GetQuestions() Web Method you wrote previously. To call the GetQuestions() Web Method you use jQuery .ajax() function. Notice how the URL is specified in the .ajax() call. Make sure to change it as per the web form URL at your end.

The successHandler function is called upon successful completion of the Web Method and receives all the Question instances as an array. You then iterate through the questions and with each iteration append a <DIV> element to the container. Notice how the code uses data-* attributes of HTML5 to store QuestionID. This way you can easily find out the QuestionID for a particular question in later code. Markup of a sample <DIV> element added by the above code is shown below:

1.<div data-questions-questionid='1'> Which programming languages do you use? </div>

Once all the questions are loaded, you need to load all the choices. This is done by calling another function – GetChoices(). The GetChoices() function is shown below:

01.function GetChoices() {
02. var url = "Example2.aspx/GetChoices";
03. successHandler = function (results) {
04. for (var i = 0; i < results.d.length; i++) {
05. $("div[data-questions-questionid='" + results.d[i].QuestionID + "']").append("<br /><input type='checkbox' data-choices-questionid='" + results.d[i].QuestionID + "' data-choices-choiceid='" + results.d[i].ChoiceID + "'/><span>" + results.d[i].ChoiceText + "</span>");
06. if (window.localStorage[results.d[i].ChoiceID] != null) {
07. var choiceId = results.d[i].ChoiceID;
08. $("input[data-choices-choiceid='" + choiceId + "']").attr('checked', 'checked');
09. }
10. }
11. $("input[data-choices-questionid]").change(function (event) {
12. var key = $(event.target).attr("data-choices-choiceid");
13. if ($(event.target).is(':checked') == true) {
14. window.localStorage[key] = $(event.target).attr("data-choices-questionid");
15. }
16. else {
17. window.localStorage.removeItem(key);
18. }
19. });
20. }
21. $.ajax({
22. type: "POST",
23. url: url,
24. contentType: "application/json; charset=utf-8",
25. dataType: "json",
26. success: successHandler,
27. error: function (err) {
28. alert(err.status + " - " + err.statusText);
29. }
30. })
31.}

The GetChoices() function is similar to GetQuestions() function in that it calls a Web Method using jQuery .ajax() call. This time, however, it calls GetChoices() Web Method. You need to append all the choices belonging to a question inside that question’s <DIV> element. This is done by finding a <DIV> element whose data-questions-questionid attribute matches with the QuestionID of the current choice. An <INPUT> checkbox element and a <SPAN> element is then added to that <DIV>. Notice how the code sets data-choices-questionid and data-choices-choiceid attributes of the <INPUT> element for later use. These two attributes represent QuestionID and ChoiceID of a choice respectively.

Whenever user toggles a checkbox, you need to either store the user choice in the localStorage (checked) or remove it from the localStorage (unchecked). This is done by handling change event of the checkboxes. The change event handler essentially checks whether a checkbox is being checked or unchecked. Accordingly it adds or removes an entry to the localStorage.

When a user fills out the survey form and clicks on the “Submit Answers” button, SubmitData() function is called. This function in turn calls SaveResults() Web Method. The following code shows how this is done.

01.function SubmitData(event) {
02. var url = "Example2.aspx/SaveResults";
03. successHandler = function (results) {
04. alert('Results saved!');
05. window.localStorage.clear();
06. }
07. var data='';
08. for (var i = 0; i < window.localStorage.length; i++) {
09. var key = window.localStorage.key(i);
10. var value = window.localStorage[key];
11. var pair = '"' + key + '":"' + value + '"';
12. data = data + pair + ",";
13. }
14. if (data.charAt(data.length - 1) == ',') {
15. data = data.substring(0, data.length - 1)
16. }
17. data = '{"data":{' + data + '}}';
18. $.ajax({
19. type: "POST",
20. url: url,
21. contentType: "application/json; charset=utf-8",
22. data: data,
23. dataType: "json",
24. success: successHandler,
25. error: function (err) {
26. alert(err.status + " - " + err.statusText);
27. }
28. })
29.}

The SubmitData() function forms a JSON representation of all the key-value pairs from the localStorage by iterating through all the keys. The following JSON string represents a sample set of key-value pairs from the localStorage.

01.{"data":
02. {
03. "FirstName":"Tom",
04. "LastName":"Jerry",
05. "Email":"tom@somedomain.com",
06. "5":"2",
07. "7":"3",
08. "1":"1",
09. "9":"3"
10. }
11.}

Notice how each key and value is enclosed in double quotes. Also note that “data” is the parameter name of the SaveResults() Web Method. This way ASP.NET maps the incoming JSON data with a particular parameter of a Web Method.

Once the SaveResults() Web Method returns successfully, all the data from the localStorage is removed using clear() method.

You can now run the web form and test the functionality by entering some data. Also verify that the data gets stored in the localStorage even if the browser is closed and is loaded back when the survey form is visited again.

Summary

Web Storage features offered by HTML5 allow you to store data on the client machine. The two objects – sessionStorage and localStorage – store key-value pairs of data. The sessionStorage can persist data only for the current session whereas localStorage can persist data across sessions. Web Storage is not transmitted to the server automatically. You need to device some programmatic approach such as AJAX calls to a web service or WCF service, to send the Web Storage data to the server.

Source : http://dotnetslackers.com/articles/aspnet/Using-HTML5-Web-Storage-in-ASP-NET.aspx
Download Sample Code

 
Comments Off on HTML5 Web Storage in ASP.NET

Posted by on February 6, 2012 in HTML5

 

Summary of Canvas and SVG in HTML5

These technologies can be used to address a range of graphic scenarios on the modern Web. With a lot of excitement around Canvas, there has been a tendency to ignore SVG, which, in many cases, is the better choice. Here I offer some thoughts on when to choose Canvas, SVG, or a combination of the two.

The following is a high-level summary of Canvas and SVG meant to frame a discussion of when to use one particular vector graphic technology over the other.

A Comparison of Canvas and SVG
Canvas SVG
Pixel-based (canvas is essentially an image element with a drawing API) Object Model-based (SVG elements are similar to HTML elements)
Single HTML element similar to in behavior Multiple graphical elements which become part of the Document Object Model (DOM)
Visual presentation created and modified programmatically through script Visual presentation created with markup and modified by CSS or programmatically through script
Event model/user interaction is coarse—at the canvas element only; interactions must be manually programmed from mouse coordinates Event model/user interaction is object-based at the level of primitive graphic elements—lines, rectangles, paths
API does not support accessibility; markup-based techniques must be used in addition to canvas SVG markup and object model directly supports accessibility

SVG is known as a retained mode graphics model persisting in an in-memory model. Analogous to HTML, SVG builds an object model of elements, attributes, and styles. When the element appears in an HTML5 document, it behaves like an inline block and is part of the HTML document tree.

Canvas is a bitmap with an immediate mode graphics application programming interface (API) for drawing on it. Canvas is a “fire and forget” model that renders its graphics directly to its bitmap and then subsequently has no sense of the shapes that were drawn; only the resulting bitmap stays around.

One way to think of these is that Canvas resembles the Windows GDI API, where you programmatically draw graphics to a window, and SVG resembles HTML markup with elements, styles, events, and DOM-based programmability. Canvas is procedural whereas SVG is declarative.

Article Source

HTML5 Overview and Resources

HTML5 Experiments

Another Experiment

HTML Device Management

Html 5 File Drag and Drop

 
Comments Off on Summary of Canvas and SVG in HTML5

Posted by on January 22, 2012 in HTML5

 

Tags:

 
%d bloggers like this: