Amfas Tech | Technology, Blogging & Internet Marketing: HTML5

Reading Mode Widget/Plugin for Blogger and WordPress

Blogging is not all about creating content. It is also about gaining loyal readers. Apart from the quality of the content you provide, the visibility and readability of the content also matters. To be specific, readability includes font styles, backgrounds and eye-friendly modifications to the text on the webpage.

It is however difficult to modify the styles according to individual reader’s choice. So, it is better to leave that option to the reader himself. We have developed a simple and useful snippet of HTML/JS that allows the users change the font styles and sizes according to their eye feasting taste.

Reading Mode widget for blogger wordpress from amfastech

Copy the follow snippet of code and install it on your Blogger/WordPress blog.
<script>
function myFunction() {
    var x = document.getElementById("Blog1");
    x.style.fontSize = "20px";          
    x.style.color = #5E5E5E;
    x.style.fontFamily="Open Sans";
}
function myFunction2() {
    var x = document.getElementById("Blog1");
    x.style.fontSize = "20px";          
    x.style.color = #5E5E5E;
    x.style.fontFamily="Roboto";
}
function myFunction3() {
    var x = document.getElementById("Blog1");
    x.style.fontSize = "20px";          
    x.style.color = #5E5E5E;
    x.style.fontFamily="Calibri";
}
function myFunction4() {
    var x = document.getElementById("Blog1");
    x.style.fontSize = "20px";          
    x.style.color = #5E5E5E;
    x.style.fontFamily="Calibri";
}
function myFunction5() {
    var x = document.getElementById("Blog1");
    x.style.fontSize = "20px";          
    x.style.color = #5E5E5E;
    x.style.fontFamily="PT Sans";
}
function myFunction6() {
    var x = document.getElementById("Blog1");
    x.style.fontSize = "20px";          
    x.style.color = #5E5E5E;
    x.style.fontFamily="Georgia";
}
</script>
<button type="button" onclick="myFunction()">Style 1</button>
<button type="button" onclick="myFunction2()">Style 2</button>
<button type="button" onclick="myFunction3()">Style 3</button>
<button type="button" onclick="myFunction4()">Style 4</button>
<button type="button" onclick="myFunction5()">Style 5</button>
<button type="button" onclick="myFunction6()">Style 6</button>

Customization

Change the ID “Blog1” with the blog post area of your blog. “Blog1” here is the blog post area of Blogger blog.

Change x.style.fontSize with the values of your choice.

Change x.style.color with the color of your choice.

Change x.style.fontFamily with the font family of your choice.

This is a basic script and needs to be tweaked. Any suggestions of the tweaks from your side are welcomed. You suggestions will be credited and updated in the article.
Continue Reading

Choosing the Right Codecs for you HTML5 Video Files

Using HTML 5 <video> tag we can make videos play on different devices and browsers without the need of extra plugins, we’ve seen it in the previous article. It is good, but still one video type can’t make it all on the browsers, even HTML <video> tag is used.

 

Different browsers uses different codecs even for HTML5 videos. When you are using the <video> tag, be sure it plays on every browser, or else there won’t be any benefit of using <video> tag over <embed> tag.

 

A video codec is basically an algorithm for a video compression format. Raw video files are too large to send them over the web and so some sort of compression is needed for them for quick delivery. For example, would you like to wait five minutes for a webpage to load? definitely no! I don’t wait either, probably no one else would wait either. People like to read, watch and listen the information on the webpages that load faster not from those which load slower than a snail.

 

Web browsers must support some sort of compression algorithms, also known as codecs. Each browser supports different type of codes on web and will be able to play the encoded video files. The saddest part is that today’s HTML browsers supports a subset of video codecs and unfortunately there is no such codec that can be used to play your video on every browser.

 

You have to work on encoding your video numerous times for different browsers. The good news is that you no need to write the <video> tag for every browser but the additional codec alone is enough. Let’s see how to choose right codec for the HTML5 <video>.

 

Before that, let’s take a look at the traditional <video> tag with source of the video file setting to src attribute.

 

<video width="320" height="240" autoplay="autoplay"
poster="examples/sanfran.jpg" src="examples/sanfran.m4v">
</video>

 

We’ve used the src attribute to handle the source video file in the preceding code. The same code can be written using <source> tag inside the <video> tag as following:

 

<video width="320" height="240" autoplay="autoplay"
poster="examples/sanfran.jpg">
<source src=examples/sanfran.ogv type=video/ogg>
<source src=examples/sanfran.mp4 type=video/mp4>
Your browser does not support the video tag.
</video>

 

The the above code, the <source> tag is nested inside the <video> tag. If you have noticed, we used two <source> tags inside one after another. Your browser will try to play the first video file from the list of sources and if it is not supported, it skips to next one until the playable format is found. When no video format is playable, it shows blank black video space on the webpage. The text showing “You browser does not support the video tag” is for non-HTML5 browsers.

 

Which Codecs Browser Support?

Figuring out which codec you need to support is the hard part. You won’t be able to distinguish them with browsers unless you get some experience working on them. Here are list of codecs HTML5 web browsers support:

 

H.264(MP4)

This codec is supported by Apple Safari and Microsoft Internet Explorer web browsers. This codec was not available for free initially, but later it is made free for anyone but still some governing groups like Apple controls it.  This is the basis for reluctance among other browser makers to adopt support for this codec. From version 9, Google Chrome has also started to support this codec, which makes it even more viable as a web codec.

 

OGG/Theora

This is free and open standard codec but lacks the supporting tools. Since none of the big browser makers support it, this codec doesn’t have much supporting tools and therefore lost in existence.

 

WebM

Tis format is based on VP8 codec that is owned by Google. This uses high quality form of compression algorithm that is free and open source, which makes WebM the best web codec. This codec is supported by almost every browser and so making it a trending codec but Apple don’t support this codec in any form.

 

So, making it clear that no single codec is supported on different browsers. It is necessary to provide two codecs at least to support Apple browsers and the rest. To be compatible with Apple and Internet Explorer browsers, you must support H.264, and then either OGG or WebM can be used to cover the other browsers.

Continue Reading

Embedding Video Directly in the Application using HTML5 Video tag

Video is now mainstream in HTML5. Forget plug-ins, forget supporting video players, and welcome to the world of native video through HTML5. Want to know why it’s such a big deal to have video as its own page element? Read on.
 
What’s so special about HTML5 <video> tag when we’ve been playing videos on web for ages? The reason is that the web is changing. The web you have seen 6-7 years ago is not the same you are seeing now and it won’t be same the next year. Technology is changing so fast. People have got access to different kinds of devices. They browse the same web from the desktop, mobile or even from e-book readers.
 
If you are aware of what the users are using, you would have developed much support for the content on the web accordingly like you could use Flash or Silverlight or any other technology till you know the limitation. The web portability is expanding like universe, in that case, how many technologies can you afford to give support for a single video on the page? I’m not trying to scare you! I just want you smell the situation.
 
There is a need for standardization of the format of the media content that is placed on the web pages. The media content placed on the web should play on different platforms & devices without any lag. HTML5 serves the purpose. The videos embedded using <video> tag can play on any device without the further need of plug-ins. In this article, I'm going to show you how to embed a video in the application directly with HTML5 technology.
 

Embedding a video

HTML5 isn’t just flexible, but also easier for developers to implement. You can place a video on your webpage by using a simple tag. Take a look at the following example of implementation:

 

<video width="320" height="240" autoplay="autoplay"
poster="examples/sanfran.jpg" source="examples/sanfran.m4v">
</video>

 

The above code will make the video appear like as shown in the following screenshot:

image

Let’s take a look at the attributes we’ve used in the code.

 

width and height

You can set the size of the video directly in the tag itself using these attributes. The width and height attributes overrides the size of the original video.

 

controls

Though this attribute is not used in the above piece of code, I felt the need to take about it. This attribute allows you show/hide the native controls of the vide like play and pause. The controls are shown by default. If you wish to hide them, you can use this attribute.

 

autoplay

This attribute sets your video to start playing as soon as the source is ready. It
defaults to ‘Off’ . I suggest you to not use this parameter on your website’s home page as it annoy your visitors.

 

poster

This attribute is used to show an image as a video thumbnail. If you don’t use this attribute in the <video> tag, the first frame of the video is shown as a video thumbnail once the frame is loaded.

 

source

This attribute is used to specify the source of the video you want to play on the webpage.

 

There are other attributes that can be used while using HTML5 <video> tag. Let’s take a look at them too:

 

autobuffer

This is like autoplay attribute we have discussed earlier about. This doesn’t start playing video when set to ‘On’, instead starts buffering the video when loaded on to the web page. By default this would be set to ‘Off’.

 

loop

This attributes works as it sounds. The video will be keep on playing when set to ‘On’. By default this is also set to ‘Off’.

 

download

If the video is playing on the device for some reason, you can allow user to download the video at least by using download attribute.

 

Hope you have learnt how to embed a video using HTML5 <video> tag. Comment below if you have any doubts regarding this!

Continue Reading

Drawing shapes using HTML5 <canvas> tag

Flash became insanely popular because of the flexibility it brought to the browser. With Flash the Web was free from decorating DOM elements and became a platform for real drawing and animation. HTML5 brings this same type of flexibility and power directly to the DOM with the HTML5 <canvas> tag. This hack starts us off slow by walking through the creation of basic shapes on a canvas. The <canvas> tag provides you with a blank slate to create your imagery. In order to do this you first need to create a <canvas> tag in the DOM, and then identify the context. The <canvas> tag is created as a DOM element:

 

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

 

This basic <canvas> tag will be presented as a 200 × 200-px empty block on the page. To add to it, we need to identify the context:

 

var myCanvas = document.getElementById('myCanvas')
var myCtx = myCanvas.getContext('2d');

 

Notice that we identify the '2d' context which may seem to imply that there would also be a '3d' context, but don’t be fooled: “3d” isn’t really addressed by the <canvas> tag; it has only an x- and y-axis. Now that we have the context identified, we have a host of APIs at our fingertips.

 

Drawing to a <canvas> tag is all about the '2d' context and finding the appropriate coordinates on the grid. Generally, one pixel on the screen correlates to one point in the canvas (this value can vary when you zoom in or out on a small screen such as on a mobile browser, or when your element is resized with CSS). The key point on our grid is (0,0) or the origin, which is the top-left-hand corner of our canvas. Our canvas is 200 × 200, which means it contains 200 points on the x-axis and 200 points on the y-axis. The following figure shows how our canvas would appear with grid lines on the x- and y axes over 10 points.

 

The 200 × 200 <canvas> tag with grid markers every tenth point on both the x- and y-axes

 

Drawing Rectangles

We’ll start with one of the simplest shapes: the rectangle. These are easy to draw into the context of our <canvas> tag. The '2d' context gives us access to the API to draw three basic types of rectangles:

 

fillRect

Draws a rectangle with a solid color fill

strokeRect

Draws a rectangle that has a border but no fill

clearRect

Clears a rectangle-shaped transparency that removes any imagery or fills in the defined area

 

Taking our sample canvas from before, let’s combine these three shapes onto our <canvas> tag:

var myCanvas = document.getElementById('myCanvas')
var myCtx = myCanvas.getContext('2d');
myCtx.strokeRect(10,10, 180, 180);
myCtx.clearRect(50,50, 100, 100);

 

The preceding code laid on top of our <canvas> tag looks like as follows:

 

The 200 × 200 canvas demonstrating the different rectangle APIs in the <canvas> tag

Each of the three APIs follows the same pattern. They are passed four parameters: the x and y coordinates, along with the width and height of the rectangle.

 

Drawing Paths

Rectangles are just the tip of the iceberg when it comes to drawing on a canvas. Most imagery is produced by combining a series of lines. Like all methods in the <canvas> tag, these drawing APIs are available on the '2d' context. Paths require a few steps to start and complete a drawing. To start a drawing (a single path or series of paths), we use this method:

 

myContext.beginPath();

 

This method takes no arguments; it simply initiates a drawing. Once the path has begun, we need to determine where we are going to start and end the path. To start the path, we will use the moveTo method. This is similar to determining where you would move your pencil on a piece of drawing paper. Think of it as picking up a pencil and putting it down directly on your starting point. From there, we will use the line To method to determine where our line will end. Here is the first line of our grid:

 

myContext.beginPath();
myContext.moveTo(0,0);
myContext.lineTo(200,0);

 

At this point our canvas will still be blank, as we have not yet closed our path. To close the path we use the following method:

 

myContext.closePath();

 

Now we have one line on our canvas. To create our grid, we want to draw multiple lines within our path. To accomplish this, we will begin the path, and then create a series of moveTo and lineTo methods. Once we have all our grid lines, we will write them to the canvas with our stroke method. Our code will look something like this:

 

var myCanvas = document.getElementById('myCanvas')
var myContext = myCanvas.getContext('2d');
var ctx = myContext;
myContext.beginPath();
for(i=0; i<201; i++){
myContext.moveTo(0,i);
myContext.lineTo(200,i);
i+=10;
}
for(i=0; i<201; i++){
myContext.moveTo(i,0);
myContext.lineTo(i, 200);
i+=10;
}
myContext.stroke();

 

Paths have a number of different JavaScript APIs that create different line effects. In many cases we may have a few lines that we want to connect and consequently fill the area. To accomplish this we can simply call the following method:

 

myContent.fill();

 

Drawing Arcs

We can get pretty far with straight lines in our drawings, but we can use the canvas to draw arcs as well. Remember, the <canvas> tag will always be a square, but we can draw any shape inside the square. To draw an arc on the canvas, call the following method off the canvas context:

 

arc(x, y, radius, startAngle, endAngle, anticlockwise);

 

As illustrated in the preceding code, a number of arguments are passed into the arc method. The first two are the coordinates for the arc’s center, followed by the arc radius. The startAngle and endAngle parameters declare the start and end points of the arc in radians, which are measured from the x-axis. The final optional anti clockwise parameter, when set to true, draws the arc in a counterclockwise direction. The default is false, which would draw the arc in a clockwise direction.

 

Looking back at the radius argument, we want to make a special note. In CSS, we are comfortable with declaring values in degrees, but in this case the arc radius is measured in radians. It’s quite common to see an inline conversion from radians to degrees using the JavaScript math equation for pi:

 

myRadians = (Math.PI/180)*degrees

 

Let’s put this to good use by creating something recognizable on the <canvas> tag. When I think of circles I think of two things: smiley faces and bombs. To keep the violence level down, we’ll work on the smiley face in this article. Using a similar 200 × 200 <canvas> tag let’s center our outer circle directly in the middle of our tag, and then draw our head:

 

smileCtx.beginPath();
smileCtx.arc(100,100,99,0,Math.PI*2);

 

We now have a canvas with a circle on it, as shown in following screenshot:

 

The <canvas> tag with a circle centered on the element

 

This isn’t very exciting. So next we will add the mouth. For this we will use the move To method, and then draw a half circle (notice that the radius will be PI instead of PI*2 as it was for the full circle):

 

smileCtx.moveTo(170,100);
smileCtx.arc(100,100,70,0,Math.PI); // Mouth

 

The last two components are the eyes. Since we want our eyes to be solid fills, we need to make separate strokes for each of them so that we can apply the fill. The first step to accomplish this is to close the current stroke. We will then start a new stroke, move to a new start point, draw a new circle, and call our fill parameter for each eye:

 

smileCtx.stroke();
smileCtx.beginPath();
smileCtx.moveTo(60, 65);
smileCtx.arc(60,65,12,0,Math.PI*2); // Left eye
smileCtx.fill();

 

Let’s put all this code together, and see our masterpiece:

 

var mySmile = document.getElementById('mySmile')
var smileCtx = mySmile.getContext('2d');
smileCtx.beginPath();
smileCtx.arc(100,100,99,0,Math.PI*2); // head
smileCtx.moveTo(170,100);
smileCtx.arc(100,100,70,0,Math.PI); // Mouth
smileCtx.stroke();
smileCtx.beginPath();
smileCtx.moveTo(60, 65);
smileCtx.arc(60,65,12,0,Math.PI*2); // Left eye
smileCtx.fill();
smileCtx.beginPath();
smileCtx.moveTo(140,65);
smileCtx.arc(140,65,12,0,Math.PI*2); // Right eye
smileCtx.fill();

 

Our canvas now holds all three strokes to form the face, as shown in the following screenshot:

 

The 200 × 200 <canvas> tag with the smiley face

 

Advanced Drawing

We’ve plowed right through lines and arcs, but many illustrations call for lines that can’t be accomplished by either of these shapes. The Canvas specification includes two additional tools for creating custom shapes:

 

quadraticCurveTo(cp1x, cp1y, x, y);
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);

 

Each of these methods has control points and an ending x,y point. The control points determine the curvature of the path. The bezierCurveTo method has a second control point for an uneven curvature. Additional information about the implementation of each method is available in the W3C spec.

Continue Reading

Validating HTML5 forms without using JavaScript

Form validation is a process where you write code for forms and validate them using another piece of custom code. It is to make sure all inputs are filled with content they are supposed to be filled with. Validation is done in two ways: on the server side and the client side. The server side validation code runs on server to check all the fields and if the requirements are not met, the page will be reloaded with errors. The client side validation works the pretty same way. But the only difference is server side validation runs after the form submission where as client side validation runs before the form is submitted. The best kind of validation is when you do both. The client side validation gives the user an immediate response and the server side validation makes sure response wasn’t being hacked.

Generally, JavaScript is preferred technology for form validations on client side. Writing form in HTML and validating forms using JavaScript really sucks. We’ll have to check two piece of codes when any run-time errors are found. Swapping between the codes would kill your patience. HTML5 doesn’t need JavaScript for validations on client side as the new input types are introduced for validations with it.

In HTML5 the <input> tag has the ability to validate the information in the form. If it validates, proceeds to the submission and if it doesn’t, shows errors.

Let’s see the form validation in both conventional(HTML+JavaScript) and new(HTML5) ways.

Validating forms with HTML+JavaScript:

HTML Form:
<!DOCTYPE html>
<html>
<body>
<form name="myForm">Quantity (between 1 and 5):
<input max="5" min="1" value="11" name="quantity">
<input type="submit" value="Submit Query"></form>
</body>
</html>
JavaScript:
<script>
if(document.myForm.quantity.checkValidity() === false){ alert('fail'); } </script>

The above script will check the ‘quantity’ field and validates the input given in it. When the value is greater than 5, the trigger will be fired. This type of validation is a good practice if only some fields are to be validated in a form. Let us suppose we have 30 fields to be validated. Writing 30 validation lines of code isn’t necessary and it is a worst practice of coding.

You can simply write the following script that does validation of all form fields:
<script>
if(document.myForm.checkValidity() === false){ alert('fail'); }
</script>

‘myForm’ is the name of the form and it is enough to validate the fields.

Validating forms in HTML5:

Validation criteria in HTML5 is quite different and simpler than before. There is no need to use JavaScript for every small validation of the input fields. Some new ‘input’ tag attributes were introduced with HTML5. They take care of input field validations very well.

The required attribute:

The required attribute can be simply added to the input tag at the end. When the form filler misses out the field, a pop up notifies about that mandatory field to be filled.

For e.g.,
<input type="number" name="quantity" min="1" max="5" required/>

The ‘min’ and ‘max’ attributes see if the value entered is with in the range. If the out of range value is entered, it shows validation error.

The pattern attribute:

The pattern attribute is pretty slick, and is for people who write regular expressions. If you write a regular expression to the pattern attribute, your input will validate against the pattern in order to have the return value true.

For e.g.,
<input type="text" name="quantity" pattern="[0-5]{1}" />

Notice that the type was changed to text in order for the pattern to make the input invalid; we need to remove the number type, as that will supersede the validation criteria. If the type and pattern conflict (by requiring results that exclude each other), the validation criteria will never be met, and the form will never validate.

The measurable attributes:

Some input types have comparative criteria such as email, which require a strict input pattern. Other input types have attributes such as min and max that must be satisfied before the input can be considered valid. Let’s look at our first input example again:
<form name="myForm">
Quantity (between 1 and 5): <input type="number" name="quantity" min="1"
max="5" />
<input type="submit" />
</form>

In this case the number that is input must meet the min and max criteria in order to be considered valid. For example, the number 11 would not validate but the number 4 would validate. In a similar manner we have the email type:
<form name="myForm">
Enter Your Email: <input type="email" name="myEmail" />
<input type="submit" />
</form>

The email type looks for a value that meets traditional email criteria that would match a regular expression such as this:

var emailTest = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;

If the value of the input doesn’t have a username, an at sign (@), and a domain, it’s considered invalid.

That's all for now! till next time! keep visiting amfastech.com
Continue Reading

How better can you do with the new <input> tag in HTML5

HTML5 was introduced with a lot of new features and modifications to its previous version. It is compatible with the different technologies and used in mobile application development effectively.

HTML5 was introduced with new types for <input> tag. These new types allow better input control & eases the code validation without writing regular expressions every time.

Let's peek into the new <input> types along with the quick demo codes that show how better can you do with them.

Input Type: color

The ‘color’ type is used for input fields that should contain color.
For e.g.,
<!DOCTYPE html>
<html>
<body>
<form>
  Select your favourite color: <input type="color" name="favcolor"><br>
  <input type="submit">
</form>
</body>
</html>

Executing the above code would result the following:

Select your favorite color:

Input Type: date

The ‘date’ type allows user to select a date. You can select the date from the scroll down calendar that pops up when clicked on the field.

For e.g.,
<!DOCTYPE html>
<html>
<body>
<form>
Select your Birthday: <input type="date" name="bday">
  <input type="submit">
</form>
</body>
</html>

Executing the above code with date type will result the following:


Birthday:


Input Type: datetime

The ‘datetime’ type allows you to select a date and time along with the time zone.

For e.g.,
<!DOCTYPE html>
<html>
<body>
<form>
When is the party? (date and time): <input type="datetime" name="partytime">
  <input type="submit">
</form>
</body>
</html>

The above code after execution shows as follows:


When is the party? (date and time):


Input Type: datetime-local

This input type allows you to choose date and time but no time zone. If no time zone is to be displayed, it is better to use ‘datetime-local’ type in the input form.

For e.g.,
<!DOCTYPE html>
<html>
<body>
<form>
  Birthday (date and time): <input type="datetime-local" name="bdaytime">
  <input type="submit">
</form>
</body>
</html>

Google Chrome can differentiate the both ‘datetime’ and ‘datetime-local’ types but Firefox and IE 11 cannot render the difference between these two input types.

Executing the above code results:


Birthday (date and time):

Input Type: email

The ‘email’ input type accepts email format of text into the field. The format other than user@example.com will not pass the validation.

It is easy to validate an email format with this type rather than writing regular expression.

For e.g.,
<!DOCTYPE html>
<html>
<body>
<form>
  E-mail: <input type="email" name="email">
  <input type="submit">
</form>
<p><b>Note:</b> type="email" is not supported in Internet Explorer 9 and earlier versions.</p>
</body>
</html>


This input type is not compatible with the IE.

The above code looks like as follows when executed:

E-mail:
Note: type="email" is not supported in Internet Explorer 9 and earlier versions.

Input Type: month

The ‘month’ type allows users to select month and year from the drop down calendar.

For e.g.,
<!DOCTYPE html>
<html>
<body>
<form>
  When is your birthday? (month and year): <input type="month" name="bdaymonth">
  <input type="submit">
</form>
</body>
</html>

The above give the following result:


When is your birthday? (month and year):


Input Type: number

The ‘number’ input type is used where the fields should contain numbers. The range of numbers between which the user should opt one can be defined by using ‘min’ and ‘max’ attributes.

The following are the attributes that can be used to specify restrictions:
min – To specify a minimum value in the range.
max – To specify a maximum value in the range.
step – To specify the jump interval of numbers.
value – To specify a default value.

For e.g.,
<!DOCTYPE html>
<html>
<body>
<form>
  Work experience (between 1 and 5): <input type="number" name="quantity" min="1" max="5">
  <input type="submit">
</form>
<p><b>Note:</b> type="number" is not supported in Internet Explorer 9 and earlier versions.</p>
</body>
</html>
This type is not compatible with IE 9 or later versions.

When executed, it shows the result as follows:

Work experience (between 1 and 5):
Note: type="number" is not supported in Internet Explorer 9 and earlier versions.

Input Type: range

The ‘range’ input type allows to choose the range of numbers between the specified end points.

The difference between setting a range with ‘number’ type and ‘range’ type is that you are allowed to choose the range with a slider when using ‘range’ type where as you are allowed to choose a number from the dropdown list of range when using ‘number’ type.

For e.g.,
<!DOCTYPE html>
<html>
<body>
<form>
Rate amfastech: 0<input type="range" name="points" min="1" max="10">10
<input type="submit">
</form>
<p><b>Note:</b> type="range" is not supported in Internet Explorer 9 and earlier versions.</p>
</body>
</html>

Result for above code:

Rate amfastech: 010
Note: type="range" is not supported in Internet Explorer 9 and earlier versions.

Input Type: search

The ‘search’ field can be used to create custom search engines for your website.

For e.g.,
<!DOCTYPE html>
<html>
<body>
<form action="http://www.amfastech.com/?q">
  Search amfastech: <input type="search" name="googlesearch"><br>
  <input type="submit">
</form>
</body>
</html>

Result:

Search amfastech:


Input Type: tel

The ‘tel’ type accepts telephone number format into its field. This input type is not supported with most of the browsers including Google Chrome. We may expect it working in the future versions of web browsers.

For e.g.,
<!DOCTYPE html>
<html>
<body>
<form>
  Telephone: <input type="tel" name="usrtel"><br>
  <input type="submit">
</form>
</body>
</html>

Result:

Telephone:

Input Type: url

The ‘url’ type allows input in URL format.

For e.g.,
<!DOCTYPE html>
<html>
<body>
<form>
  Add your blog's URL here: <input type="url" name="blog"><br>
  <input type="submit">
</form>
</body>
</html>

Result:

Add your blog's URL here:


Input Type: week

You can select the number of the week from the dropdown calendar menu by using ‘week’ input type. The week number along with the year is displayed when selected a date.

For e.g.,
<!DOCTYPE html>
<html>
<body>
<form>
  Week number(week number with year): <input type="week" name="year_week">
  <input type="submit">
</form>
</body>
</html>

Result:


Week number(week number with year):

Most of the major browser are upgrading to newer versions to avail full benefits of HTML5. Google Chrome, Mozilla Firefox, Safari and Opera are doing better when compared to Internet Explorer. Internet Explorer 11, so claimed better browser than ever, even can’t render HTML5 properly.

Besides all of these, HTML5 is fluid that supports rich content without any further usage of external plugins. That’s the beauty of it! What do you say? Is HTML5 really good? Comment your thoughts and opinions below!
Continue Reading

Most Funniest HTML5 Games that You Can Play on Your Browser

After HTML5 was introduced, people started working out on its fluidity for gaming. These games may not satisfy a gamer in you but would definitely help you from boredom. These games can be played on any browser that supports HTML5 on it. Any modern browser can now display HTML5 content. Update your browsers if you are still hanging out with old ones.

I have found some interesting games developed using HTML5 on the internet. Here are those for you.

1. Shiba Jump


Shiba Jump game is an inspired version of most famous and one of my favorite games, doodle jump. Arrow keys are the only controls used to play this game. When the doggy falls down, pressing 'P' would start the game again.

Play Shiba Jump

2. Dragon Dash


Dragon dash is a flying adventure game. This need mouse only to control the dragon flying. Holding your mouse click would take the dragon to higher altitudes and clicking gently would hold up dragon from dying falling down.


3. Cosmics


Cosmics is a alien invasion game in which you play the hero role with your battleship. There can be only one hero at a time. If there are more aspirants they have to queue up as spectators.Each spectator can help with balloons to fight the invaders (or irritate the hero) and must try to stay alive. A dying spectator means to fall back to the taillight of the next hero queue.


4. Sudoku Island


Sudoku is a timeless classic, and Sudoku Island brings the inimitable charms of the game right at your screens, in an HTML5 avatar. The good old Sudoku board will keep you busy for hours, and the timer running alongside will keep you on your toes. The fact that you can set eh level of difficulty in the game makes it all the more enjoyable; so that you can be sure that you’ll never feel the dearth of a challenge. Get your gaming gloves on, and see if you can crack this puzzle.


5. Contre Jour


Contre jour is fluid graphical game with a Gastly(pokemon) like life form to be rolled over to reach the target wasp. Only can be used to play the game and it is really funny.


Had fun? share your feedback in comments!
Continue Reading

HTML5 Assists Developers in Developing Mobile Applications

HTML5 is going to continue to used for Internet based Site and Mobile, and it possibly will well modify the features of mobile app development perpetually. HTML5 strictly has a lot of potential for development to make in the web, but one has to understand the patterns of the markup language before structuring or presenting content with it.

Firstly, it is very significant to recognize the notion of HTML5 in order to productively executing the same for mobile application development.

html5 in  mobile apps

Understanding HTML5

HTML5 is the most significant technology of the internet as it is consisting of over 100 prerequisites that utilize the newest web technologies for the developing of mobile applications.

HTML5 includes condition of chief programming languages such as JavaScript, HTML, and CSS, offering designers with the entire pack of properties needed to generate next generation websites and mobile applications.

HTML5 comes with a better-off method, enhanced markup, superior potential, and newest JavaScript APIs, supporting in the designing of novel apps. Consequently, HTML5 referred to as an amalgamation of the features of HTML, JavaScript, and CSS.

It is significant to select the accurate technology under the shade of HTML5 to guarantee the achievement of mobile application development.

How Does HTML5 helps in Mobile Application Development

HTML5 is not a single entity and so applying this platform for mobile app development involves an assessment of one technology after as until the developer comes upon that technology which will ensemble his/her requirement for developing an application.
Usage of HTML5

HTML5 offers numerous benefits to an app developer and this is the cause of why the platform has achieved extensive recognition in the world of application development for mobile devices. Numbers of these are as follows:

A lesser amount of reliance – HTML5 guarantees with a reduction of reliance on third party components needed for designing a novel mobile app. This in turn guides to a substantial diminution in the software licensing expenditure.

Lucrative and affordable – The outlook of an app development company offering HTML5 has presented about roughly 30 percent cost decline when evaluated to earlier platforms for building the functionalities of a mobile application.

Fewer skills set needed – An app developer having knowledge of HTML5 can stream videos and create them native to a browser without reliance on Adobe Flash. Consequently, it will be right to say that a developer can connect in app developing even if he is not acquainted with Adobe Flash and have access to HTML5. The development skill set need for designers is at the present stumpy with the dawn of HTML5.

Timely work out and less attempt needed – Less but best quality time and endeavor needed to work out on mobile app development by applying HTML5.

For example, if an app developer were developing an app for a Windows Phone and an iPhone without applying HTML5, developing of different apps for the devices, depending on geo-location services for recognizing a user's location, also same utilizing and varying user interface possessions to generate rich animations would be essential.

Using HTML5 web development, all the components is obtainable via one browser and only one version of apps should build up for diverse mobile devices.

End Words:
Contemporary mobile app developers have understood the budding demand of HTML5 as a development tool. HTML5 certainly assists to create richer mobile applications that can work across all major OS platforms.

Author Bio:

Kinjal Adeshara is a web enthusiastic and blogger who interested in writing on software, mobile and web application development. She works with RightwaySolution.Com, a web apps development company. She loved to write articles and shares new, exciting and informative content with users.

Also Read Other Articles by Kinjal Adeshara:

The 5 Step Guide for Choosing the Right Custom Application Development CompanyThe Benefits of a Mobile App for a Small Business
Continue Reading

How The Totally Different Technologies, HTML5 & JavaScript Hooked Up

HTML and JavaScript are from different planets for sure. The proof? HTML’s DNA is made of declarative markup that allows you to describe a set of nested elements that make up your pages. JavaScript, on the other hand, is made of pure algorithmic genetic material, meant for describing computations.

Are they so far apart they can’t even communicate? Of course not, because they have something in common: the DOM. Through the DOM, JavaScript can communicate with your page, and vice versa. There are a few ways to make this happen, but for now lets concentrate on one. It’s a little wormhole of sorts that allows JavaScript to get access to any element, and it’s called getElementById. Let’s see how it works...

Let’s start with a DOM. Here’s a simple DOM; it’s got a few HTML paragraphs, each with an id identifying it as the green, red or blue planet. Each paragraph has some text as well. Of course there’s a <head> element too, but we’ve left the details out to keep things simpler.

image
Now let’s use JavaScript to make things more interesting. Let’s say we want to change the greenplanet’s text from “All is well” to “Red Alert: hit by phaser fire!’ Down the road you might want to do something like this based on a user’s actions or even based on data from a web service. But we’ll get to all that; for now let’s just get the greenplanet text updated. To do that we need the element with an id of greenplanet. Here’s some code that does that:

document.getElementById("greenplanet");

-Remember the ‘document’ represents the entire page in your browser and contains the complete DOM, so we can ask it to do things like find an element with a specific id.

-getElementById: Here we’re asking the ‘document’ to get us an ‘element’ by finding the element that matches the given ‘id’.

-From the above simple code, getElementById(“greenplanet”) returns the paragraph element corresponding to “greenplanet”...

...and then the JavaScript code can do all sorts of interesting things with it..

Once getElementById gives you an element, you’re ready do something with it (like change its text to “Red Alert: hit by phaser fire!”). To do that, we typically assign the element to a variable so we can refer to the element thoughout our code; let’s do that and then change the text:

var planet = document.getElementById("greenplanet");
-We’re assigning the element to a variable named ‘planet’.
-Here’s our call to getElementById, which seeks out the “greenplanet” element and returns it.

And in our code we can now just use the variable planet to refer to our element.

planet.innerHTML = "Red Alert: hit by phaser fire!";
-We can use the innerHTML property of our planet element to change the content of the element.
-We change the content of the greenplanet element to our new text... which results in the DOM (and your page) being updated with the new text.

image

Any changes to the DOM are reflected in the browser’s rendering of the page, so you’ll see the paragraph change to contain the new content!

[Sources: Head first HTML5 programming]
Continue Reading

HTML 5 is a Recipe made of family of Technologies

HTML 5 is the now-a-day trending technology used in the building WebPages and website as well. HTML 5 is a combination of family of technologies that are being used as conventional technologies in making websites. What can HTML 5 do that others previous technologies cannot? I know this is is the question stood tall when I started talking about HTML 5.


Ok, seems like you have checked out what can HTML 5 do! Let’s  take a look at the technologies used in HTML 5 and where you need them..

CSS3

Using CSS3, you can draw right on your web page. With CSS3, you can  draw text, images, lines, circles, rectangles, patterns and gradients. It’ll bring out your inner artist.

Web Workers

You might have used this technology in HTML 4 to enter information, but It’s even better in HTML5. It can require that you fill out fields, and It can more easily verify that you’ve typed an email, URL or phone number where you’re supposed to.

Forms

You used to need a plug-in for forms, but now these are first class members of the HTML family of elements. Wanna watch or listen to something? You need them.

Offline Web Apps

We’re here to help with the structure and semantic meaning  of your page, including new ways of making sections, headers, footers and navigation in your pages.

Audio & Video

This is the the most stylish one in the family. You’ve probably used this before, but did you know it can now animate your elements, give them great rounded corners and even drop shadows?

New Markup

Use this as a bit of local storage in every user’s browser. Need to store a few preferences, some shopping cart items, or maybe even stash a huge cache for efficiency? This is your API.

Local Storage

Need applications that work even when you aren’t connected to the network? This can help.

Canvas

This is the API that can tell you where you are, and it plays nice with Google maps.

Geolocation

You’ll want this whenever you need several scripts running concurrently and in the background, so your user interface remains responsive.
Continue Reading

Most Frequently Asked Questions about HTML5 | Here are the Best Answers

HTML has been on a wild ride. Sure, HTML started as a mere markup language, but more recently HTML’s put on some major muscle. Now we’ve got a language tuned for building true web applications with local storage, 2D drawing, offline support, sockets and threads, and more. The story of HTML wasn’t always pretty, and it’s full of drama. It has evolved time to time in its existence. Its time of HTML5. If you’ve never had exposure to HTML5 before, these questions might have been tickling your mind.


Q1. How does this work on the old browsers? Like the new doctype, meta, and so on... somehow the older browsers work with this new syntax?

Ans: Yes, through a bit of cleverness and luck. Take the type attributes on the link and script tags; now, it makes sense to get rid of this attribute with HTML5 because CSS and JavaScript are now the standards (and certainly are the default technologies for style and scripting). But as it turns out, the browsers already assumed the defaults of CSS and JavaScript. So the stars aligned and the new markup standard just happens to have been supported in the browser for years. The same is true of the doctype and the meta tag.

Q2. What about the new doctype, it seems too simple now; it doesn’t even have a version or DTD?
Ans: Yes, it does seem a little magical that after years of using complex doctypes we can now just simplify it to “we’re using HTML.” Here’s what happened: HTML used to be based on a standard called SGML, and that standard required both the complex form of the doctype and the DTD. The new standard has moved away from SGML as a way to simplify HTML language and make it more flexible. So, we don’t need the complex form anymore. Further, as we said above, there is some luck here in that almost all browsers just look for HTML in the doctype to ensure they are parsing an HTML document.

Q3. Were you joking about it never changing again? I thought the versioning was really important for browsers. Why not use <!doctype html5>? It’s not like there isn’t going to be an HTML6 too. Right?

Ans:  The use of the doctype evolved with browser makers using the doctype to tell their browsers to render things in their own “standards mode.” Now that we have much more of a true standard, the HTML5 doctype tells any browser that this document is standard HTML, be that version 5, 6 or whatever.

Q4.  Well, I assume different browsers are going to have different capabilities at any one time. How do I handle that?

Ans:  True, especially until HTML5 is 100 percent supported.

Q5. Why does this even matter? I just typed a page in without a doctype and meta tag and it worked just fine. Why do I need to worry if this stuff is totally correct?

Ans:  Yes, browsers are great at overlooking small errors in HTML files. But by including the correct doctype and meta tags, you’ll make sure browsers know exactly what you want, rather than having to guess. Plus, for people using older browsers, the new doctype means they’ll use standards mode, which is what you want. Remember, standards mode is a mode where the browser assumes you’re writing HTML that conforms to a standard, so it uses those rules to interpret your page. If you don’t specify a doctype, some browsers may go into “quirks mode” and assume your web page is written for older browsers, when the standard wasn’t quite up to snuff, and may interpret your page incorrectly (or assume it’s just written incorrectly).

Q6.  Whatever happened to XHTML? It seems like a few years ago that was the future?

Ans:  Yeah it was. Then flexibility won out over strict syntax, and in the process XHTML (XHTML 2, to be precise) died and HTML5 was born to be more accepting of the way people write web pages (and the way browsers render them). That said, don’t worry, because knowing about XHTML is only going to make you a stronger author of HTML5 content (and you’re going to appreciate HTML5 a whole lot more). And by the way, if you really love XML, there’s still a wayto write your HTML5 in strict form. More on that later...

Q7. What is UTF-8?

Ans:  UTF-8 is a character coding that has support for many alphabets, including non-western ones. You’ve probably seen other character sets used in the past, but UTF-8 is being promoted as the new standard. And it’s way shorter and easier to remember than previous character encodings.
Continue Reading