HTML5 – See How This Feature Rich New Technology Can Transform The Web

HTML5_LogoThe basics of HTML5 has been quite the talk for the last few years. With this new avatar of HTML, the future of the web looks very bright. HTML5 has a bunch of built in API functionality that will change the way how we use and see the web. Making the web faster and an all around better experience. Before going into the details, let’s see who is behind HTML5. Currently W3C works on HTML5 specifications focusing on single definitive standard. Once set of specifications are released by W3C, WHATWG group continue updating/improving it under the conecpt called as ‘Living Standard.’ W3C has proposed to release stable HTML5 recommendation by end of 2014.

HTML5 has reduced dependency of 3rd party libraries at many level. For an instance, now there is no need for Adobe Flash for streaming audio/video. It can be very much achieved using <audio> and <video> tags. Same way, graphics element like <svg> and <canvas> cut short the need of Flash, Silverlight, VML etc. Say bye-bye to third party APIs to trace the location of the user because Geolocation HTML5 API gives you all what you need. There is much more. Just go through this article stuffed with inline examples. Let’s look at HTML5 major features,

  1. HTML5 Media Elements
  2. HTML5 Graphics Elemetns
  3. New APIs
  4. HTML5 Forms
  5. New HTML5 Structural Elements
  6. Removed Elements

1 HTML5 Media Elements

The new media elements for HTML5 makes it very easy and convenient now to embed media into your pages. However, what has not been made a standard yet is what video format will be used amongst all browsers. Webkit browsers (Google’s Chrome, Apple’s Safari) support MP4 format with H.264 and Mozilla browsers (Firefox and Omni), Opera and I.E. support OGG format.

  • <audio> – Defines sound content
  • <video> – Defines a video or movie
  • <source> – Defines multiple media resources for <video> and <audio>
  • <embed> – Defines a container for an external application or interactive content (a plug-in)
  • <track> – Defines text tracks for <video> and <audio>

SOURCE:

  <video id="video1" width="320" height="240" controls="controls">
     <source src="movie.mp4" type="video/mp4" />
     <source src="movie.ogg" type="video/ogg" />
     Your browser does not support HTML5 video.
  </video>

OUTPUT:

Video Courtesy: w3schools.com

2 HTML5 Graphics Elemetns

2.1 Canvas Element

The <canvas> element is only a container for graphics. You must use a script to actually draw the graphics. Canvas has several methods for drawing paths, boxes, circles, text, and adding images. It is good for graphic-intensive games.

SAMPLE CODE

<script type="text/javascript">
var c=document.getElementById("myCanvas"); 
var ctx=c.getContext("2d"); 

// Create gradient 
var grd=ctx.createLinearGradient(0,0,250,0); 
grd.addColorStop(0,"red"); 
grd.addColorStop(1,"white"); 

// Fill with gradient 
ctx.fillStyle=grd; 
ctx.fillRect(10,10,230,80); 

//Put some text inside ctx.font = "30px Arial"; 
ctx.strokeText("GoosPoos.com",10,50);
</script>

OUTPUT

2.2 SVG Element

SVG is a language for describing 2D graphics in XML. Basically it is resolution independent and hence best suited for applications with large rendering areas (Google Maps.) On the other hand, it results into slow rendering if the graphics is complex and hence not suited for game applications.

SAMPLE CODE

<svg width="300" height="200">
   <polygon points="50,10 150,10 50,100 150,100"
   style="fill:gray;stroke:black;stroke-width:5;fill-rule:evenodd;" />
   <!-- Message to be shown when browser doesn't support SVG -->
   Sorry, your browser does not support inline SVG.
</svg>

OUTPUT
Sorry, your browser does not support inline SVG.

3 New APIs

3.1 Geolocation
Geolocation is a big help to find the geographical position of the user. To ensure the privacy of user, browser asks user for permission whether he/she wants to disclose his/her location. This API has more accuracy in GPS enabled devices. Let’s see example first,

OUTPUT

SOURCE

<script type="text/javascript">
var x=document.getElementById("mapStatus");
function getLocation()
{
  if(navigator.geolocation){
    <!-- getCurrentPosition function of Geolocation API fetches longitude and latitude of the user. First argument is for success call back. -->
    navigator.geolocation.getCurrentPosition(showPosition,showError);
  }
  else{
     x.innerHTML="Geolocation is not supported by this browser.";
  }
}
<!-- Below success callback function just make calls to Google Maps to fetch map for given longitude and latitude -->
function showPosition(position)
{
  var latlon=position.coords.latitude+","+position.coords.longitude;
  var img_url="http://maps.googleapis.com/maps/api/staticmap?center="+latlon+"&zoom=14&size=400x300&sensor=false";
  document.getElementById("mapHolder").innerHTML="<img src='"+img_url+"'>";
}
</script>

3.2 Drag and Drop
These new built in API’s can real change the functionality of your page. With help of Drag and Drop for example, browse for file no longer. Just drag your file or attachment from your desktop to the web page. Very convenient and very easy.
Let’s see one example where Bunny is very hungry and wants you to drag the carrot and drop onto him. Just try!

OUTPUT

bunny-needs-carrot
carrot

SOURCE

<html>
<head>
...
<script type="text/javascript">
function allowDrop(ev)
{
  ev.preventDefault();
}
function drop(ev)
{
  ev.preventDefault();
  document.getElementById("carrotOnly").remove();
  document.getElementById("bunnyLooking").remove();
  var happyBunnyImg = document.createElement("img");
  happyBunnyImg.src="bunny-thanking.jpg";
  happyBunnyImg.width="320";
  happyBunnyImg.height="238";
  document.getElementById("carrotTarget").appendChild(happyBunnyImg);
}
</script>
</head>
<body>
...
...
  <div id="carrotTarget">
    <!-- Allow draggable stuff to be dropped on below target. Call 'drop' function when draggable item is being dropped. -->
    <img id="bunnyLooking" src="bunny-needs-carrot.jpg" ondrop="drop(event)" ondragover="allowDrop(event)"/>
  </div>
  <!-- Allow below image to be draggable -->
  <img id="carrotOnly" src="carrot.gif" draggable="true"/>
...
</body>
</html>

3.3 Web Workers

Have you ever noticed unresponsive pages? One of the reasons for that is, page remains unresponsive until script execution finishes. The problem with javascript is, it is single threaded. Multiple scripts cannot run in parallel. Here, HTML5 web workers give you much needed concurrency. Web workers allow to run multiple scripts in parallel. It has some limitations though, like web workers cannot access global variables, DOM and objects like window, document etc.


OUTPUT

Worker1 Counter:

Worker2 Counter:

SOURCE

<script type="text/javascript">
var w1, w2;
function startWorker(w, workerId)
{
  if(typeof(Worker)!=="undefined")
  {
	  if(typeof(w)=="undefined")
	  {
          // sample.js contains the code which needs to be executed by web-worker
          // sample.js code is shown at the bottom of this snippet
		  w = new Worker("sample.js");
	  }
	  if(workerId==1){
	  	w1=w;
	  }
	  if(workerId==2){
	  	w2=w;
	  }
      // Here is the worker call-back that instructs what to do when worker receives some message
	  w.onmessage = function (event) {
		document.getElementById("result"+workerId).innerHTML=event.data;
	  };
	  w.postMessage();
  }
  else
  {
  	  document.getElementById("result"+workerId).innerHTML="Sorry, your browser does not support Web Workers...";
  }
}
function stopWorker(w)
{
   w.terminate();
}
function startWorker1()
{
   startWorker(w1,1);
}
function stopWorker1()
{
   stopWorker(w1);
}
function startWorker2()
{
   startWorker(w2,2);
}
function stopWorker2()
{
   stopWorker(w2);
}
</script>

*** sample.js ***
function myFunc(counter){
    // postMessage invokes that particular worker's onMessage call back
    postMessage(counter);
    setTimeout(function(){
       myFunc(++counter)},1000);
    }
    myFunc(0);
}

3.4 Local Storage
Earlier if one wants to save data locally on user’s browser, the only resort was Cookies. Now, HTML5 comes with local storage that allows one to store upto 5MB of data on the browser. Good thing about this concept is, it is more safer, secure and efficient because data needs not to be included with each server request.

4 HTML5 Forms

Not many people get excited about forms, but HTML5 brings some big improvements,both for the developers creating them and for the users filling them out. New form elements, attributes, input types, browser-based validation, CSS3 styling techniques, and the FormData object make it easier and hopefully more enjoyable to create forms.

4.1 New Form Inputs Types

  • tel – For entering a telephone number.
  • search -To prompt users to enter text that they want to search for.
  • url – For entering a single URL.
  • email – For entering either a single email address or a list of email addresses.
  • datetime – For entering a date and time with the time zone set to UTC.
  • month – For entering a date with no time zone.
  • week – For entering a date with a year and a month, but no time zone.
  • time – For entering a time value with hour, minute, seconds, and fractional seconds, but no time zone.
  • datetime-local – For entering a date and time with no time zone.
  • number – For numerical input.
  • range – For numerical input, but unlike number,number, the actual is not important.
  • color – For choosing color through a color well control.

SAMPLE CODE

<form>
  Type Range: 0<input type="range" min="1" max="1000">1000
  Type Month: <input type="month">
  Type Week: <input type="week">
  Type Date: <input type="date">
  Type Color: <input type="color">
  Type Email: <input type="email">
  Type Number: <input type="number" min="1" max="5"> (between 1 and 5) 
  Type URL: <input type="url"> (E.g. http://goospoos.com)
  <input type="submit">
</form>

OUTPUT

Type Range:01000
Type Month:
Type Week:
Type Date:
Type Color:
Type Email:
Type Number: (between 1 and 5)
Type URL: (E.g. http://goospoos.com)




4.2 New Form Attributes

  • autofocus – Focuses the input on the element when the page is loaded.
  • placeholder – Gives the user a hint about what sort of data they should enter.
  • form – Specifies one or more forms to which the input element belongs.
  • required – A boolean attribute that means the element is required.
  • autocomplete – For specifying that a field should not autocomplete or be pre-filled by the browser based on a user’s past entries.
  • pattern – For validating an element’s value against a regular expression.
  • dirname – For submitting the directionality of the control with the form.
  • novalidate – For disabling form submission validation when specified on a form element.
  • formaction – For overriding the action attribute on the form element.
  • formenctype – For overriding the enctype attribute on the form element.
  • formmethod – For overriding the method attribute on the form element.
  • formovalidate – For overriding the novalidate attribute on the form element.
  • formtarget – For overriding the target attribute on the form element.
  • formtarget – It allows to enter more than one value in the element. Currently it works with email and file input types.

SAMPLE CODE

<form>
  Placeholder attribute:<input type="text" placeholder="First name"/>
  Multiple attribute:<input type="file" multiple>
  Required attribute:<input type="text" name="usrname" required>
  Pattern attribute: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">
</form>

OUTPUT

Placeholder attribute:
Multiple attribute:
Required attribute:
Pattern attribute:



4.3 New Form Elements:

  • <datalist> – Specifies a list of pre-defined options for input controls
  • <keygen> – Defines a key-pair generator field (for forms)
  • <output> – Defines the result of a calculation

5 New HTML5 Structural Elements

HTML5 has a new way to structure pages, instead of structuring a page with only div tags we now have elements that are more page specific, like, header (the heading of your page), nav (the navigation of a page), aside (a side bar) and footer (the footing of a page). Things that most developers already did but now it is built in HTML5.

  • <article> – Defines an article
  • <aside> – Defines content aside from the page content
  • <bdi> – Isolates a part of text that might be formatted in a different direction from other text outside it
  • <command> – Defines a command button that a user can invoke
  • <details> – Defines additional details that the user can view or hide
  • <summary> – Defines a visible heading for a <details> element
  • <figure> – Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.
  • <footer> – Defines a footer for a document or section
  • <header> – Defines a header for a document or section
  • <hgroup> – Groups a set of <h1> to <h6> elements when a heading has multiple levels
  • <meter> - Defines a scalar measurement within range
  • <nav> – Defines navigation links
  • <progress> – Represents the progress of a task
  • <section> – Defines a section in a document
  • <time> – Defines a date/time
  • <wbr> – Defines a possible line-break

SOURCE

<!-- Usage of details/summary tag -->
<details open=""> 
<summary>GoosPoos: The Technology Blog</summary>
 We write about latest technologies, software reviews, Android and iOS App Reviews and much more. All content and graphics on this web site are the property of the GoosPoos.
</details>

OUTPUT

GoosPoos: The Technology Blog

We write about latest technologies, software reviews, Android and iOS App Reviews and much more. All content and graphics on this web site are the property of the GoosPoos.



6 Removed Elements

  • <acronym>
  • <applet>
  • <basefont>
  • <big>
  • <center>
  • <dir>
  • <font>
  • <frame>
  • <frameset>
  • <noframes>
  • <strike>
  • <tt>

I would like to leave you with a couple links to really show what HTML5, CSS3 and a little JavaScript can do. (Yes, CSS3 is equally powerful technology. And very soon, I will come up with CSS3 walkthrough article.) With just those languages combined, alone can be pretty mind blowing and exciting. Therefore, when viewing the following links please be seated, thank you!

  • http://beta.theexpressiveweb.com/
  • http://agent8ball.com/
  • http://benthebodyguard.com/index.php
  • http://www.zippergaleria.com.br/en/
  • http://ishothim.com/

Related Posts

HTML5_Text_Editor

Here Comes The HTML5 Based Rich Text Editor – WYSIHTML5

10 Incredible HTML5 Demos That Will Blow Your Mind!

Joyride jQuery plugin

Rolling Out New Website Features? Create Slick Feature Tour With Joyride jQuery Plugin

css3-logo

CSS3 – It Does Much More Than Just Styling the Page. See How!

1 Comment

  1. Jeff Marlon

    04.16.2014

    HTML5 is a great and powerful language. It has many useful features that the previous versions of HTML hadn’t before. I developed many great websites on HTML5 and recommend all the others to use this version of HTML.

Leave a Reply









Ad

Like Us!