Skip to main content

Posts

Showing posts with the label HTML5

Kiss My App: Collaborating using HTML5 Canvas and WebSockets

The Canvas element introduced in HTML5 is the most talked about feature in HTML5. It allows a developer to draw on a rectangular area and the ability to control each pixel in it. I'm not a very big fan of powerful graphics and animation on the web, however I wanted to try Canvas in conjunction with another popular feature - Web Sockets. The idea is to use the mouse events to draw on the Canvas and then send the coordinates to remote clients using Web Sockets. I have used the pusherapp Web Socket library in my example and this video shows how two clients can play a Tic-Tac-Toe game: Unable to display content. Adobe Flash is required. As you can see in this video, the mouse movements made on the canvas will draw lines on it and also cause lines to be drawn on another browser window.

Custom validation messages for HTML5 Input elements using the constraint validation API

HTML5 has introduced several input types such as EMAIL, URL, RANGE, SEARCH, DATE, TIME, etc,. Most of the modern browsers have implemented them and are ready to be used in a HTML document. Another exciting feature introduced in HTML5 is the form validation. Instead of writing JavaScript to validate users input, browsers can now validate it and show an appropriate message if the validation fails. The validation message is shown in line with the field for which the validation has failed. The default error message is shown when the validation fails. In this post I'll explain how these error messages can be changed.

Submitting Form using FormData object in HTML5 using XmlHttpRequest Level 2

The other day I had posted on uploading a file using XmlHttpRequest 2 and tracking the progress of the file upload process using the progress event on XHR2 object and the progress tag. Another enhancement added to the XHR2 specification is the introduction of FormData object. Using the FormData object, one can create a set of key-value pairs and send them as form data in a XHR request. The FormData object is passed in the send() method of the XHR object:

Getting notifications of Network Status changes using online and offline events introduced in HTML5

I was working on an online\offline application, wherein I wanted to display a set of records stored in the local database to the user when he goes offline. The only way to determine the network status is to send a XHR request to the server at particular time intervals (polling). If the server responds back with some data it is understood that the user is online. However, I came across two event listeners 'ononline' and 'onoffline' which are triggered when the network status changes.

ColdFusion's CFDIV tag can be used to output HTML5's semantic tags

HTML5 has introduced several semantic tags such as HEADER, FOOTER, SECTION, ARTICLE, ASIDE, NAV etc,. The rationale behind creating these structural tags is to divide the web pages into logical parts with tags that are descriptive of the type of content they contain. Before HTML5 the div tags were used in creating blocks of content in a HTML document. Recently, I was having a conversation with one of my team members from whom I learnt that the CFDIV tag can be used to output these semantic tags. The CFDIV tag has an attribute  'tagname' . This attribute can be used to specify the HTML container tag i.e. one can specify tagname="header" to output the header tag. Similarly the tagname attribute can be used to specify other HTML5 semantic tags. Why should I use CFDIV tag to output the semantic tags? Well, this is an obvious question you are likely to ask yourself before you write the CFDIV tag. It is not so obvious to one who uses CFDIV tag in their day to day de

Drawing paths on Google Maps, the Indiana Jones way

I was looking into the Google Maps API the other day and came across some APIs which are really cool. I came up with a use case to show path from the current location to a particular destination entered by the user. I was also trying to achieve that Indiana Jones like effect on the map i.e. to show an animation of the path being drawn on the map. The idea here is to show the moving path until the destination is reached and also to pan the map accordingly. Unable to display content. Adobe Flash is required. As seen in the video, a marker is added to the map specifying my current location (Bangalore, India). The current location data is retrieved using the HTML5’s Geolocation API. Once the latitude and longitude information are available, a marker can be added to the map. You can now enter one of your favorite destinations in the text box provided and click the Submit button to see a path drawn from your current location to the destination. The path is drawn using the Google map

JavaScript debugging with Chrome Developer Tools and some tips\tricks

Last Friday I was having a conversation with Ben Nadel and Jonothan Joyce on Twitter about examining the content of a JavaScript object. While the firebug add-on for Firefox comes in very handy in examining the request\response header and for various other internals, I can’t really debug the JavaScript code by adding breakpoints. I use Google’s Chrome browser for my day to day web application development. Both Chrome and Safari provide ‘Developer tools’ which help the user not only in debugging the JavaScript code but also in examining the content of an object at any point in time by providing watch expressions. What I like about debugging in Chrome is that it is very much similar to how I debug my server-side code using ColdFusion Builder or Eclipse. This certainly reduces the learning curve to understand debugging in a browser. However, Chrome has more to give when it comes to debugging web applications. In this post I’ll explain how Google Chrome can help you debug web applic

File upload and Progress events with HTML5 XmlHttpRequest Level 2

The XmlHttpRequest Level 2 specification adds several enhancements to the XmlHttpRequest object. Last week I had blogged about cross-origin-requests and how it is different from Flash\Silverlight's approach .  With Level 2 specification one can upload the file to the server by passing the file object to the send method. In this post I'll try to explore uploading file using XmlHttpRequest 2 in conjunction with the progress events. I'll also provide a description on the new HTML5 tag -  progress which can be updated while the file is being uploaded to the server. And of course, some ColdFusion code that will show how the file is accepted and stored on the server directory.

HTML5 XmlHttpRequest 2 v/s Flash\Silverlight approach to cross-origin requests

A few days back I had posted on XmlHttpRequest Level 2 , describing how cross-origin requests can be achieved. A few folks on my team asked me how different it is from Flash\Silverlight's approach to achieve cross domain request\response with crossdomain.xml . The approach that these plugins take to send a request and receive a response is completely different from that of XmlHttpRequest's approach.

HTML5 XmlHttpRequest 2 - Cross origin request

HTML5 specification has introduced a few enhancements for XmlHttpRequest object and one of them is the ability to make cross-origin request. That is, a host can send a XmlHttpRequest request to another host and receive a response in return. On the server-side, a check can be made to see whether the request can be accepted from the given origin. In this post I'll try to explain how this can be done using ColdFusion. Client side: On the client side, a XmlHttpRequest object is created and then a GET request is made to the remote server. var client = new XMLHttpRequest(); client.onreadystatechange = readyStateChangeHandler; client.open("GET","http://{remote-address}/{path-to-file}.cfm",true); client.send(); For example, say example.com wants to get a response from another domain say abc.com , then as observed from the above code the request would look like: client.open("GET","http://abc.com/dir1/foo.cfm",true); Serve

Server sent events with HTML5 and ColdFusion

There are several ways to interact with the server apart from the traditional request\response and refresh all protocol. They are polling, long polling, Ajax and Websockets ( pusherapp ). Of all these Ajax and Websockets have been very popular. There is another way to interact with the server such that the server can send notifications to the client using Server Sent Events (SSE) . SSE is a part of HTML5 spec:  http://dev.w3.org/html5/eventsource/

Audio in HTML5

I have been looking into HTML5 and it's capabilities to play audio and video content on the web without requiring any browser plug-in. In this post I will be explaining how one can embed an audio file into a web page and add controls to perform various operations on it.

Showing Notifications with HTML5/Webkit

Most of us use popular twitter clients such as TweetDeck, Seesmic which are developed using Adobe AIR. One thing  I like about these clients is that they show notifications when the application is in the minimized mode. Now with browsers implementing webkit such as Google chrome one can use the notification API to send notification to the browser. In this blog post I will be explaining how one can implement webkit notifications in their web application.