WHAT'S NEW?
Loading...

Discover HTML5 and CSS3 (JavaScript come too) - Part 4

The multimedia content is very important in web, you can use several plugins like Adobe Flash or Microsoft Silverlight to draw what you want, but these are proprietary components and the idea in HTML5 is to bring enough tools to the developer to be able to do it native in the browser. In this post we are going to talk about the Canvas element. This new tag provided by HTML5 allows you to add a region in your website to draw whatever you want. We need to add the canvas tag inside the <body> part and define the dimensions an id because we will use JS to. We can write a text between the open and close tags to show it when the browser can’t render our drawing. If you don't add the dimensions attributes then a canvas 300x150 will be created. Here an example:


     Alternative content to canvas element.




Once we have declared the element in our html file we need to draw something using JS. Here I enlcose some code to draw a line inside the canvas.

    
function draw() {
        var canvas = document.getElementById("board");
        if (canvas.getContext) {
            var context = canvas.getContext("2d");
            context.beginPath();
            context.moveTo(10, 10);
            context.lineTo(100, 100);
            context.stroke();
        }
    }
    window.onload = draw;

Discover HTML5 and CSS3 (JavaScript come too) - Part 3

In this new post I want to focus on forms made by HTML5 and the new native functions provided to validate them. This does not mean that we don't need to validate the input written by the user in the server, but is a first filter. HTML5 provides you the way to create forms in an easier way: you can declare required fileds, specific data types like dates or emails and new components like date time pickers, progress bars, color selectors and everything without using javascript.

For your input tags you can declare several new "type" property like:
  • type = "search": specific text field for searchs. Actually is more an aestetic improvement rather than a new feature.
  • type = "tel": is a text box for phone numbers. Indeed, HTML allows you to write numbers and letters but some browsers show a numeric interface for phone numbers.
  • type = "email": specific control for email addresses.
  • type = "color": customized control for color selection.
  • type = "url": it allows you to write just URL addresses. It works in the same way as the "email" type.
  • type = "number": specific just for numbers, no letters. You can declare a "min" and "max" value to create a range for the user. The "step" attribute declare the increment or decrement each time.
  • type = "date" "time" "datetime" "datetime-local" "month" "local": all are prepare to control inputs related with dates and times. Just by showing a calendar.
  • type= "range": it's a flow control that represents a numeric value.