Tuesday, July 8, 2014

So you want to HTML5

HTML5 has been around for a while now and if one is not aware of what HTML5 is then surely something not quite right, yes we have grown past Web 2.0 and HTML5 is the next big thing. 

HTLM5 is not just new specification that builds over HTML4, but a collection of specifications and technologies that fall under the HTML5 umbrella namely :
  • HTML5
  • CSS3 (Cascading Style Sheets Version 3)
  • JavaScript
  • Web Sockets
  • Web Storage/Local Storage
  • Geolocation
The Web Hypertext Application Technology Working Group works on number of these technology specifications under the HTML5 family. As per W3C The Core HTML5 specification will be made a recommendation by Q4 2014 and yes HTML5 is here to stay.

To understand and learn more about HTML5 please check out diveintohtml5 where Mark Pilgrim has done an amazing job introducing some of HTML5 core concepts.

The good news is that everything we know and have implemented using HTML4 will work in HTML5 and upgrading all your code to HTML5 is just matter of changing the doctype to a much simpler form

 <!DOCTYPE html>

and voila your old HTML code is now HTML5, but wait a minute are you not going to miss out on all the new goodies HTML5 has to offer, so to truly use HTML5 you would want to take a look at the new elements and features HTML5 has to offer. We will look at new updates in HTML5 in the blog post.

Simpler Meta Tags


We have already seen the doctype tag is so much simpler  - <!DOCTYPE html>
Compared to previous versions of the doctype, it gets even worst when using a wysiwyg html editor

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

Meta tags are simpler,  <meta charset="UTF-8"> compared to 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

Script tag does not need the type attribute,  <script src="jquery.js"></script> compared to 
<script type="text/javascript" src="jquery.js"></script>

 Link tag linking CSS file does not need type attribute, <link rel="stylesheet" href="html-my.css"> compared to <link rel="stylesheet" href="html-my.css" "type=text/css" >

New Input Types


 We are all too familiar with input form items for our web applications like text box, text area, button and checkbox etc., HTML5 offers new sets of input types that can be used in our forms to make for a better user experience.

 Search Boxes: <input type="search">
The search text box behaves very much like a regular text input but certain browsers can give it some stylistic characteristics like a cross mark (x) at the end of the field when clicking on the cross mark clears the field, other than that it is a regular text box.
  
Number Spinbox: <input type="number"> 
Number input field displays as a spinner which you have up and down arrow at the right of the textbox to increase or decrease the number value in the field.

 Range Slider:  <input type="range"> 
Range slider displays like a slider to select a value from a range list. 

 Color Picker: <input type="color"> 
Color Picker displays a pop up color palette from which a color can be selected, hex value of the selected color are returned for the chosen color.  

 Telephone Number:  <input type="tel"> 
The Telephone input type behaves very much like a regular text input, specific browsers may enforce specific validations and mobile browsers  may customize their onscreen keyboard to make it easier to type telephone addresses.

 Web Address: <input type="url"> 
The WebAddress input type checks for valid url format and checks for the presence of : . characters, specific browsers may enforce specific validations and mobile browsers  may customize their onscreen keyboard to make it easier to type web address addresses.

 Email Address : <input type="email"> 
The Email input type checks for valid email format and checks for the presence of @ character and valid email address rules, specific browsers may enforce specific validations and mobile browsers  may customize their onscreen keyboard to make it easier to type web address addresses.

 Calendar Date Picker : <input type="date"> 
The calendar date picker pop ups a Calendar object from which a date can be selected.

 Calendar Month Picker : <input type="month"> 
The calendar month picker pop ups a Calendar object from which a month can be selected.

 Calendar Week Picker: <input type="week">
The calendar week picker pop ups a Calendar object from which a week can be selected.

 Time Input Spinner : <input type="time"> 
Time input field displays as a spinner which you have up and down arrow at the right of the textbox to increase or decrease time.

 Calendar Date Time Picker: <input type="datetime"> 
The calendar date time picker pop ups a Calendar object and a Time Spinner from which absolute datetime can be selected.

Calendar Date Time Local Picker:  <input type="datetime-local"> 
The calendar date time picker pop ups a Calendar object and a Time Spinner from which absolute datetime in local format can be selected.

Canvas Element

<canvas id="myCanvas" width="200" height="225"/>

 The canvas element is used for rendering images on the dynamically on the fly.  A Canvas by itself is basically a drawing area with defined height and width, just a container for graphics, JavaScript will be used to actually draw images on the canvas.  

Canvas allow for drawing paths, boxes, circles, text, gradients, and adding images by obtaining the Canvas context and calling appropriate methods on the context obtained from the Canvas element.

- fillStyle - Fill style for canvas area.
- fillRect, - Fill rectangle canvas area. 
- moveTo - Move to given coordinates. 
- lineTo - Line to given coordinates.  
- strokeStyle - Style of stroke when drawing on canvas. 
- stroke - Stroke area on canvas.
- createLinearGradiant - Linear Gradient between two points. 
- createRadialGradient - Radial Gradient between two circles.

 More details on Canvas element is covered here. 

Video Element

<video width="220" height="140" controls>
  <source src="m1.mp4"  type="video/mp4; codecs=mp4a.40.2">

</video>
The video element provides for a standard way to embed video files without the need of depending or third party plug-ins like adobe flash, quick time player, media player. However the playback of these video files will depend on how the browser and the browser chooses to play these video files based on browser capabilities and supported video codecs. The browser will choose the first video file it can play if more than one are available in the video element. 

 More details on Video element is covered here. 

HTML5 Element Examples: 


The following is a small example displaying the various HTML5 elements, code and display.  


HTLM5 Elements

HTML5 Overview

HTML5 has been around for a while now and if one is not aware of what HTML5 is then surely something not quite right, yes we have grown past Web 2.0 and HTML5 is the next big thing.
HTLM5 is not just new specification that builds over HTML4, but a collection of specifications and technologies that fall under the HTML5 umbrella namely :
  • HTML5
  • CSS3 (Cascading Style Sheets Version 3)
  • JavaScript
  • Web Sockets
  • Web Storage/Local Storage
  • Geolocation
Click on the navigation links to explore new HTML5 tags and features.

DOCTYPE

HTML5 Document type takes aways most of the huba-hub of what needs to go in the doctype tag, with a significantly simpler declaration, namely just <!DOCTYPE html> 
<!DOCTYPE html>
<html>
  <head>
 <title>HTML5 Elements</title>
  </head>
  <body>
  <h1>HTML5 Doctype</h1>
 </body>
</html>
Display:

HTML5 Doctype

Canvas Element

The canvas element is used for rendering images on the dynamically on the fly. A Canvas by itself is basically a drawing area with defined height and width, just a container for graphics, JavaScript will be used to actually draw images on the canvas. 
<script>
var drawFlag = true;
var allDone  = false;
function drawOnCanvas(){
var myCanvas   = document.getElementById("myCanvasId"); 
var myCanvasContext = myCanvas.getContext("2d");
if(drawFlag){
 drawFlag = false;
 var xtime    = 0;
 for (var i = 1; i < 35; i++) {
  xtime += 500;
     setTimeout(function(j) {
         return function() {
         var xVal = 10 * j;
         myCanvasContext.beginPath();
         myCanvasContext.moveTo(xVal, 10);
      myCanvasContext.lineTo(xVal, 240);
      myCanvasContext.strokeStyle = "#0088CC";
      myCanvasContext.stroke();
      if(j == 34){
          document.getElementById("myCanvasButton").innerHTML = "Reset";
          allDone  = true;
      } 
         }
   }(i), xtime);
  }
  var ytime    = 0;
  for (var j = 1; j < 25; j++) {
   ytime += 500;
   setTimeout(function(k) {
   return function() {
       var yVal = 10 * k;
       myCanvasContext.beginPath();
       myCanvasContext.moveTo(10, yVal);
       myCanvasContext.lineTo(340, yVal);
       myCanvasContext.strokeStyle = "#0088CC";
       myCanvasContext.stroke();
         }
   }(j), ytime); 
  }
 }else{
  if(allDone){
   myCanvasContext.clearRect(1, 1, 500, 500);
   allDone = false;
   drawFlag = true;
   document.getElementById("myCanvasButton").innerHTML = "Click";
  } 
 }  
} 
</script>
<canvas id="myCanvasId" width="350" height="250" style="border:solid 1px #000000;background-color: #333333;">
</canvas>
<div><button id="myCanvasButton" onclick="drawOnCanvas();">Click</button></div>
Display:

Audio Element

The Audio element provides for a standard way to embed audio files without the need of depending or third party plug-ins.
Code:
<audio controls="true" loop="true" autoplay="true">
 <source  src="audiosrc1.mp3" type="audio/mpeg"/>
   <source src="audiosrc1.ogg" type="audio/ogg"/>
</audio>
Display:

Video Element

The video element provides for a standard way to embed video files without the need of depending or third party plug-ins like adobe flash, quick time player, media player. However the playback of these video files will depend on how the browser and the browser chooses to play these video files based on browser capabilities and supported video codecs. The browser will choose the first video file it can play if more than one are available in the video element.
Code:
<video controls width="400" height="300">
  <source src="media/videformat1.mp4"  type='video/mp4; codecs="mp4a.40.2,avc1.42E01E"'/>
  <source src="media/videformat2.webm" type='video/ogg; codecs="vorbis,vp8"'/>
  <source src="media/videformat3.ogv" type='video/webm; codecs="vorbis,theora"'/>
</video>
Display:

Search Box Element

The search text box behaves very much like a regular text input but certain browsers can give it some stylistic characteristics like a cross mark (x) at the end of the field when clicking on the cross mark clears the field, other than that it is a regular text box.
Code:
<input type="search">
Display:

Spin Box

Number input field displays as a spinner which you have up and down arrow at the right of the textbox to increase or decrease the number value in the field. 
<input type="number">
Display:

Range Slider

Range slider displays like a slider to select a value from a range list.
Code:
<input type="range">
Display:

Color Picker

Color Picker displays a pop up color palette from which a color can be selected, hex value of the selected color are returned for the chosen color.
Code:
<input type="color">
Display:

Telephone Number

The Telephone input type behaves very much like a regular text input, specific browsers may enforce specific validations and mobile browsers may customize their onscreen keyboard to make it easier to type telephone addresses.
Code:
<input type="tel">
Display:

Web Address

The WebAddress input type checks for valid url format and checks for the presence of : . characters, specific browsers may enforce specific validations and mobile browsers may customize their onscreen keyboard to make it easier to type web address addresses.
Code:
<input type="url">
Display:

Email Address

The Email input type checks for valid email format and checks for the presence of @ character and valid email address rules, specific browsers may enforce specific validations and mobile browsers may customize their onscreen keyboard to make it easier to type web address addresses.
Code:
<input type="email">
Display:

Calendar Date

The calendar date picker pop ups a Calendar object from which a date can be selected.
Code:
<input type="date">
Display:

Calendar Month

The calendar month picker pop ups a Calendar object from which a month can be selected.
Code:
<input type="month">
Display:

Calendar Week

The calendar week picker pop ups a Calendar object from which a week can be selected.
Code:
<input type="week">
Display:

Calendar Date Time

The calendar date time picker pop ups a Calendar object and a Time Spinner from which absolute datetime can be selected.
Code:
<input type="datetime">
Display:

Calendar Date Time Local

The calendar date time picker pop ups a Calendar object and a Time Spinner from which absolute datetime in local format can be selected.
Code:
<input type="datetime-local">
Display:

Time Spinner

Time input field displays as a spinner which you have up and down arrow at the right of the textbox to increase or decrease time.
Code:
<input type="time">
Display:

Until next time,
Malcolm

Back to HTML5/Mobile Thoughts


















Posted by at No comments:
Subscribe to: Posts (Atom)