Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

HTML5 Elements: Audio, SVG, Canvas, MathML and Webworkers

This article will discuss about html5 complex functionality elements: Audio, SVG, Canvas, MathML and Webworkers.

In this article we continue to explore the important and interesting new features in HTML5.

Audio Element:

It is actually a newly added feature that allows us to play audio file, without the need to use third party plug-ins or APIs.

This tag supports many mime-types to be displayed like:

mp3 audio/mpeg
m4a audio/mp4
Ogg audio/ogg
Oga audio/ogg
Webma audio/webm
Wav audio/wav

And you can add additional types by using: AddType Type/SUBTYPE Extension.

It can be written in html5 as following:

<audio>
        <source src=”” type=””>
</audio>

You may say that it is almost similar to video tag.

Another thing is you can add controls, autoplay, loop to audio tag like below:

Listing 1:Syntax Audio

<audio controls autoplay loop=”#ofloops”>
        <source src=”” type=””>
</audio>

So simple and easy to use.

SVG “Scalable Vector Graphics”

The dream of designers became reality, drawing on the web page without additional code or extra APIs.

The addition of SVG to HTML5 was real revolution for designing as it describes 2d-graphics ”3d not yet supported as we mentioned before” and it's mostly useful in charts and diagrams and simple 2d graphics.

Not only it's a tool, it's considered to be imaging system. it deals with graphics as if it's image defined in XML format and save upon any change.

So, how to write down SVG as HTML5 code.

Listing 2: svg syntax

  <svg xmls=”http://www.w3.org/2000/svg” version=”” height=””>
    //shapes goes here
 </svg>

What can be drawn inside the svg?

Circle <circle id="" cx="x-pos" cy="y-pos" r="radious" fill="color" />
Rectangle <rect id="" width="" height="" fill="color" />
Line <line x1="" y1="" x2="" y2=""/≶ we know that line is drawen by two points in graphics
Ellipse <ellipse cx="" cy="" rx="" ry="" fill="color" />
Polygon <polygon points="[,,,]" fill="color" />
Polyline <polyline points="[,,,]" fill="color" />
Gradient Make gradient color to one of the previous shapes

Figure for Listing 3

Figure 1: Figure for Listing 3.

Listing 3: Simple draw

<!DOCTYPE html>
<html>
    <head>
<title>Html5 Web Technology - MrBool Tutorial</title>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body >
        <svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
        <defs>
        <radialGradient cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
        <stop offset="0%" style="stop-color:rgb(200,200,200)"/>
        <stop offset="100%" style="stop-color:rgb(100,100,25); stop-opacity:1"/>
        </radialGradient>
        </defs>
        <ellipse cx="100" cy="50" rx="100" ry="50" style="fill:url(#gradient)" />
        <circle cx="100" cy="100" r="20" fill="red" />
        <circle  cx="40" cy="60" r="10" fill="blue" />
        <circle cx="150" cy="60" r="10" fill="blue" />
        </svg>

    </body>
</html>

Canvas:

SVG was an interesting, embedded feature which is exposed directly in HTML5 code.

We get another tool which is close to SVG but behave differently in HTML5,Canvas.

It has easy and powerful feature that allow us to draw on the webpage using Javascript.

But can canvas act alone like SVG?

Actually no, it's just a container, all it may do is to carry out objects, draw inside it from scripting language usually Javascript.

Fine, now I assume the difference between canvas and SVG is almost clear. So, how to create canvas?

By using <canvas> tag, which take two essential attributes, width and height. The id attribute is its name for calling and style attribute is used to style the canvas as a container, no relation to its contents. It can be styled by using css.

The simplest canvas can be like that:

 <canvas id=”can” width=”100” height=”100” ></canvas>

To fill canvas with objects, Javascript is involved, in the following we will see some steps to draw inside the canvas using JS.

  1. get the canvas element using traditional DOM technique like that: var canvas= document.getElementById('can');
  2. get the canvas context identifying that the painting will be 2d not 3d(”not supported yet”): var context=canvas.getContext(“2d”);

Now I have full object with many properties and methods that allow me to control my canvas.

Drawing circle in canvas:

Since I have context now I can use it to add circle to the canvas using arc(x,y,cx,cy,radious) method. Since circle is a path in canvas so some steps must be followed:

  • begin the path: context.beginPath();
  • draw the circle: context.arc(100,30,40,10,2*Math.PI);
  • bind the path with current style: context.stroke();

Drawing Fonts in canvas:

Also using the context:

context.font=”fontSizepx font-type”;
            context.fillText(“Text”,x,y);

Drawing Images in canvas:

  1. define image: var img=new Image();
  2. define image source: img.src=' img src goes here';
  3. draw image on the canvas using context: context.drawImage(img,x,y);

Animation in Canvas:

Animation can be applied to objects on canvas, the next demo will animate an image.

Listing 4: Canvas Animation

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">

var pattern= new Image();  

function animate(){   
   pattern.src = 'images.jpeg'; 
   setInterval(draw, 100);
} 
function draw(){
  var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');
    context.fillStyle = 'rgba(0,0,0,0.4)';   
    context.strokeStyle = 'rgba(0,153,255,0.4)';   
    context.save();   
    context.translate(150,150); 
    var time = new Date(); 
    context.rotate( ((2*Math.PI)/6)*time.getSeconds() +((2*Math.PI)/6000)*time.getMilliseconds() );   
    context.translate(0,28.5);   
    context.drawImage(pattern,-3.5,-3.5);   
    context.restore(); 
}
</script>
<title>Html5 Web Technology - MrBool Tutorial</title>
</head>
<body onload="animate();">
   <canvas id="canvas" width="400" height="400"></canvas>
</body>
</html>

MathML

Using math symbols was really catastrophe previously as it was not easy to put power or draw matrix without the help of outer tags.

With the help of MathML feature, that became very easy since it provided some tags that can be used with the parent tag <math></math> to do the job.

Assume we want to write down circle, in HTML5 MathML it can be written as following.

Listing 5: Math ML

  <html>
<head>
<title>Html5 Web Technology - MrBool Tutorial</title>
</head>
  <body>
    <math xmlns="http://www.w3.org/1998/Math/MathML">
      <mrow>
        <msup><mi>a</mi><mn>2</mn></msup>
        <mo>+</mo> // stands for math operator
        <msup><mi>b</mi><mn>2</mn></msup>
        <mo>=</mo> // stands for math operator
        <msup><mi>c</mi><mn>2</mn></msup>
      </mrow>
    </math>
  </body>
</html> 

The code above will be shown like that:

Math ML

Figure 2: Math ML

To write down something like 2x, it's can be written just like the listing 6:

Listing 6: Complex representation Math ML

  <html>
<head>
<title>Html5 Web Technology - MrBool Tutorial</title>
</head>

  <body>
    <math xmlns="http://www.w3.org/1998/Math/MathML">
       <mrow>
          <mrow>
             <msup>
                <mi>x</mi>
                <mn>2</mn>
             </msup>
             <mo>+</mo>
             <mrow>
                <mn>2</mn>
                <mo>⁢</mo>
                <mi>x</mi>
             </mrow>        
          </mrow>
             <mo>=</mo>
             <mn>0</mn>
        </mrow>
   </math>
</body>
</html>

Finally to write a matrix, you can follow the following syntax just like in the listing 7:

Listing 7: Writing a Matrix

<html>
<head>
<title>Html5 Web Technology - MrBool Tutorial</title>
</head>

  <body>
    <math xmlns="http://www.w3.org/1998/Math/MathML">
       <mrow>
          <mi>sum</mi>
          <mo>=</mo>
          <mfenced open="[" close="]">
             <mtable>
                <mtr>
                   <mtd><mi>1</mi></mtd>
                   <mtd><mi>6</mi></mtd>
                   <mtd><mi>2</mi></mtd>
                </mtr>
                <mtr>
                   <mtd><mi>3</mi></mtd>
                   <mtd><mi>4</mi></mtd>
                   <mtd><mi>6</mi></mtd>
                </mtr>
                <mtr>
                   <mtd><mi>5</mi></mtd>
                   <mtd><mi>6</mi></mtd>
                   <mtd><mi>6</mi></mtd>
                </mtr>
             </mtable>
         </mfenced>
      </mrow>
   </math>
</body>
</html> 

Web Workers:

Have you ever tried to do some work on the web page and you got stopped by a running script?

It's normal to happen while performing certain function in single thread code.

The traditional script is single threaded, that's why Web Workers is considered an important addition to web technology world since it gave the concept of Multi-threading to the web page, i.e. a script can run in the background while working in another script, that will make two or more scripts work in parallel on the page without affecting the performance or appearance.

It's something like you chat via web, writing comment and listening to media at the same time, now all those operations are non-blocking to each other.

In fact world of web technology is progressive, what we exposed is very small part of expanding world of HTML5. Some other features which are coming to life soon and will make great progress are WebSocket and Web SQL.

Hope you liked the article. See you in the next article.



My main area of specialization is Java and J2EE. I have worked on many international projects like Recorders,Websites,Crawlers etc.Also i am an Oracle Certified java professional as well as DB2 certified

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login