HTML5

21. February 2012

 

Going to start using HTML5 as much as possible.  Partially supported by IE9 browser (IE9 doesn’t support HTML5 animation) .  Well supported on Firefox and Chrome.

 

I like how it is done in javascript; however, javascript does not hide your IP.

 

How to enable HTML5 on your webpage

To use HTML5 on a webpage, just add the following tag at the top of the page:

<!DOCTYPE html>

This replaces the tag for a version of HTML4 such as:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

Note for BlogEngine.NET 

Change the DOCTYPE tag in the theme site.master file and rebuild/re-deploy the website.

 

Example of HTML5

Here's an example of drawing a red rectangle in a canvas tag:

<script type="text/javascript">

    window.onload = function ()
    {
        drawRectangle();
    }

    function drawRectangle()
    {
        var canvas = document.getElementById('drawingCanvas');
        if (canvas.getContext)
        {
            var context = canvas.getContext('2d');
            // draw rectangle normally            
            //context.fillStyle = "rgb(255,0,0)";
            //context.fillRect(2, 2, 250, 200);
            // draw rectangle with shadow
            context.rect(2, 2, 250, 200);
            context.fillStyle = "#FF0000";
            context.shadowColor = "#BBBBBB";
            context.shadowOffsetX = 20;
            context.shadowOffsetY = 10;
            context.fill();
        } else
        {
            alert("Your browser does not support HTML5!");
        }
    }
</script>
<canvas id="drawingCanvas" width="260" height="210"></canvas>


 

If you don't see the rectangle and you get a alert message, your browser does not support HTML5.

 


More to follow...

 

 

  By John Dorsey  IT Brigade Inc.           

HTML5 ,