In this article we continue to explore the important and interesting new features in HTML5.
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:
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 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>
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.
But can canvas act alone like SVG?
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>
- get the canvas element using traditional DOM technique like that: var canvas= document.getElementById('can');
- 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:
- define image: var img=new Image();
- define image source: img.src=' img src goes here';
- 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
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:
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>
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.