1
A Beginner’s Guide to HTML5 Elements
2
What’s new in HTML5.1?
3
5 Horrible Mistakes You’re Making With HTML5
4
An Advanced Guide to HTML 5 Features
5
HTML5 Form Best Practices
6
What You Should Know About HTML5 Drag and Drop
7
Top 10 HTML5 Frameworks for 2016
8
The Ultimate Cheat Sheet on HTML5
9
How to Detect User’s Location and Generate Coordinates Using HTML5 Geolocation
10
A Deep Dive into HTML5 Videos

A Beginner’s Guide to HTML5 Elements

CN_Blog_HTML5_29-06-16

The ultimate dream of every web developer is to develop compelling, responsive and beautiful websites. Historically, web developers have been using HTML, CSS, and JavaScript as the front end technologies to control the aesthetic features of a website. However, in recent years, HTML has undergone a transformational change to keep abreast with demands of modern websites.

HTML5 presents the next generation tools that any aspiring or veteran web developer should know to come up with modern, responsive and beautiful websites. You may be using CMS tools such as WordPress, Joomla or even Drupal to fast-track the development of your website. Even though you’re using these tools, it is paramount that you learn what HTML5 has to offer.

Besides promoting a cross-platform and cross-browser web development, HTML5 also helps to develop websites that are mobile-ready and have better SEO features. That’s why it is essential for you to learn HTML5. Now that you know why HTML5 is important, let’s jump in to explore what’s new in HTML5.

But first, let’s explore the structure of all HTML documents.

Structure of HTML contents

The basic structure of any HTML content is as follows…

<! DOCTYPE HTML>     

<HTML>

<HEAD>

<TITLE> Welcome to Capital Numbers</TITLE>

</HEAD>

<BODY>

<H1> this is a tag for Heading 1</H1>

</BODY>

</HTML>

Now, if you save you save the above file with the “.html” extension and open it in your favorite web browser, you’ll see a web page with the words:  “This is a tag for Heading 1.” Alright? This is familiar to you!—and is what informs HTML4 and previous versions.

The HTML5 structure is almost similar to the structure of HTML4 and previous version of HTML. However, all HTML5 documents should include the following information:

  • The DOCTYPE declaration. It specifies the type of document the web browser will be opening.
  • The character encoding or the charset declaration. It defines the character encoding scheme that should be used by the browser. The default scheme is UTF-8.

With that in mind, here is the basic structure of HTML5 content:

<! DOCTYPE HTML>

<HTML>

<HEAD>

<META charset= “UTF-32”>

TITLE> Welcome to Capital Numbers</TITLE>

</HEAD>

<BODY>

<H1> this is a tag for Heading 1</H1>

</BODY>

</HTML>
What are the new elements in HTML5?

Well, here are the interesting features that have been introduced in HTML5:

#1: Semantic elements

HTML5 has introduced new elements. Some of these elements are:

  • <mark>. It defines the highlighted text in HTML.
  • <menuitem>. It defines the menu item that user can invoke from the pop-up menu.
  • <meter>. It specifies the scalar measurement which is contained in known range values.
  • <nav>. It specifies navigation links on a web page.
  • <progress>. It specifies the progress for a given task.
#2: Form Control attributes

If you’re creating an HTML form to capture customer data, then new control attributes have been added to make the development of your web form interactive and enticing to the user. Here are some of the attributes that have been added:

  • Number. It defines a numeric input type.
  • Time. It defines the time when used on a form.
  • Date. It specifies the date.
  • Calendar. It displays the calendar.
#3: New Graphical HTML elements

If you like using graphs on your website, then HTML5 has the following elements to help you manipulate your graphics better:

  • <canvas>. It is used to draw graphics.
  • <svg>. It is an XML-based vector that’s used to format two-dimensional graphics to promote animation.
#4: Multimedia elements

HTML5 has introduced two built-in media support elements. These are:

  • <audio>. It is used to play audio files on web browsers.
  • <video>. It is used to play video files on web browsers.
#5: New API features

New API features have been introduced. Some of the API’s include:

  • HTML Geolocation. It displays the coordinates a web user.
  • HTML Drag and Drop. It is used for dragging and dropping off items on a web page.
  • HTML Local Storage. It allows web applications to store data locally on the user’s browser.
  • HTML Application Cache. It caches the web application so that the website can be accessed while offline.

What’s new in HTML5.1?

CN_Blog_HTML5_25-06-16

HTML5 buttresses interactive and responsive technologies that would have been very difficult to achieve when using either XHTML or earlier versions of HTML. With HTML5 specifications now considered “feature-complete,” the World Wide Web Consortium (W3C)—a body that standardized HTML5 and previous versions of HTML—has been pondering additions of new features to make the development of web applications even better.

The web development industry is evolving very fast. Really fast! Therefore, a new version of HTML5—commonly known as HTML5.1—has been proposed to make the development of responsive and interactive websites faster. The development of HTML5.1 heralds the emergence of new frontiers for web developers to improve on video captioning, better forms, and spell checking.

It’s essential to note that HTML5.1 development is still work-in-progress and therefore, the standard is yet to be officialized. Having said that, let’s dive in and explore some of the new features in HTML5.1

New features introduced in HTML5.1

Here are the new features that have been introduced in HTML5.1:

#1: Improved video experience

The <video> element has been enhanced to capture all the required video and audio-related data. The src, preload, mediagroup, autoplay, loop and controls attributes have been incorporated in the element to capture all the characteristics of the video file being played on a browser. However, a new attribute: the “poster” has been added to HTML5.1.

The primary function of the poster attribute will be to provide the address of the image file which the user agent can show if no video data is displayed. If the attribute is available, then it must contain a valid non-empty URL which gives the address of the image file for the video file. Also, the video element in HTML5.1 can represent the text track cues where the text track cue can be set active while the track is being played.

#2: Improved capabilities of web forms

One thing’s for sure with the coming up of HTML5.1—improved capabilities and user experiences when working with web forms. New and fancier form attributes have been introduced in HTML5.1. Some of these attributes include:

  • URL. It specifies a URL input.
  • Tel. It specifies the telephone number input type.
  • Search. It specifies the search box on a web page.
  • Disabled. When used on a form, the content is grayed out and the browser prevents web users from focusing on the disabled form control.
  • Multiple. This attribute has been included to allow multiple controls such as email and file be used concurrently on a form.
#3: Spell checking

If you want a language specification that has improved capabilities for spelling and grammatical mistakes checking, then HTML5.1 is one of them. The spellcheck attribute has been enhanced in HTML5.1 to specify whether the HTML element should be checked for spelling and grammatical mistakes or not.

#4: Improved image accessibility features

With HTML5.1, you’ll no longer need CSS or even JavaScript code to handle images in responsive websites. As a result of this feature, you’ll benefit from the natively-optimized image loading if the internet bandwidth is low. HTML5.1 has introduced the following concerning image accessibility:

  • Art direction-based selection. This feature allows you to specify how you’d like your image to be viewed. You can load an image that’s optimized for specified screen dimensions in HTML5.1.
  • Device-pixel-ratio-based selection. The device-pixel-ratio based selection will allow you to specify whether you want to view the image on a high DPI display or not.
  • Image format-based selection. If the browser can’t support additional image file types that, then the image format-based selection will provide better and improved performances for smaller file sizes.

 

5 Horrible Mistakes You’re Making With HTML5

mistakes html5

It is two years since HTML5 was officialized by W3C as the next generation language for development of websites. It is a fact that this language was developed to solve problems that web developers were having with the initial versions of HTML such as XHTML and HTML4.

Truth be told—HTML5 has solved many of the web-related problems that initial versions of HTML couldn’t solve. It is true that many excellent HTML5-based applications and games are used by millions of users. Therefore, the success of HTML5 isn’t in doubt.

However, a majority of web developers continue to make mistakes when developing HTML5 based applications. This primer discusses some of the horrible mistakes web developer make while developing HTML5 based applications. Knowing some of the common mistakes made in HTML5 will help you to become an efficient HTML5 web developer.

Here are 5 horrible mistakes that you may be making with HTML5:

#1: Wrong MIME Type Declaration

MIME— Multipurpose Internet Mail Extension—was originally developed for the SMTP (Simple Mail Transfer Protocol) that describes the email content. However, modern browsers use the MIME type to determine the type of media file and plan on actions to do with the content. In other words, the MIME type declaration helps the browser to find out ways on how to display the files that are not compatible with HTML format.

Therefore, correctly declaring the MIME type is significant for getting rid of creepy characters on your web page. To declare the MIME type correctly, you type the below statement between the <head> and </head> elements:

<meta https-equiv= “Content-Type” content=”text/HTML; charset=utf-8″/>

#2: Improper specification of the title attribute for links

The primary function of the title attribute is to provide extra information to customers about the web page that’s being linked to. If used properly, the title attribute can promote usability of the website, its accessibility and the many SEO attributes.  This is because it can determine whether the link is bad or good.

If you want to improve the SEO capabilities, adhere to the following with regard to title attributes for links:

* Use the correct keywords that are related to the web page which you’re linking to.

* Always add the title which should link to the keywords that are related to the web page.

Here’s an example of using the title attribute incorrectly:

To learn more about our products, click <a href= “http://www.capitalnumbers.com/products”>here</a>.

Here’s the better way:

Visit

<a href= “http://www.capitalnumbers.com” title= “The Premier Web Development Company”>Capital Numbers</a>

to learn more about our products.

#3: Leaving out the image alt attribute

The Alt attribute provides an alternative information to users who have disabled the images in their browsers. It’s also relevant for user agents that can’t view images on their browsers. Forgetting to associate each image with the alt attribute results in decreased accessibility for such a website. If you use the alt attribute correctly with your images, you not only make the images easier to read and interpret, but also search engine optimization for such a website.

Here’s an example of a wrongly specified alt attribute:

<img src= “http://www.capitalnumbers.com/images/ourlogo.jpeg” alt= “Our Logo”/>

In the above example, the alt attribute doesn’t provide explanations what the image is about. The image description should include a tooltip or any short information that’s displayed in the browser. Here’s an example:

<img src= “http://www.capitalnumbers.com/images/ourlogo.jpeg” alt= “Our Logo” title= “The Ultimate Web Developer”/>

Hovering the mouse over the image when you use the above code displays the title attribute of the image in your browser.

#4: Forgetting to close HTML tags that requires closing in HTML5

While you can easily get away with <br> instead of the <br/>, it is not advisable to leave the tags open in HTML5. For instance, if you leave the <head> tag open to the <body> tag, the code in <body> section will be rendered useless since the browser will assume that the entire HTML code melds together. Therefore, always ensure that you’ve closed the tag appropriately.

#5: Using the Inline CSS or including JavaScript file in the HTML code

Using the inline CSS or including JavaScript file in your HTML5 code will create a code that’s not only difficult to debug—in case there are problems with it—or make it very difficult to scale up the website. Thus, the best practice is to always import the CSS and JavaScript files through the link tags in the <head> element.

An Advanced Guide to HTML 5 Features

CN_Blog_HTML5_18-06-16 (1)

The fact that HTML5 is powerful with a wider set of technologies that allows development of more diverse and powerful websites and applications isn’t in doubt. Therefore, knowing how to use these features is the first step towards becoming an efficient web developer. This blog post walks you through a comprehensive list of new features in HTML5 that are necessary to make you an efficient web developer.

Are you set to go?

#1: New semantics

New elements have been added to HTML5. Knowing how to use the semantics—with the new HTML5 elements—will provide you with the knowledge that describes with precision how your content should look like. Some of these elements are:

* <mark>. It’s used to show highlighted text. For instance, the code below demonstrates how you can use this element:

<p><strong>the mark element is used to <mark>highlight</mark> text</strong></p>

* <figure>. It shows a self-contained content. This element is frequently used with the caption (<figcaption>) element, where it’s referenced as a single unit. Here’s an example:

<figure>
<img src= “https://www.capitalnumbers.com/media/ourlogo-sm.jpeg” alt="Capital Numbers”>
<figcaption>Capital Number Logo</figcaption>
</figure>

* <data>. The data element in HTML5. It’s used to link a given HTML content with a machine-readable translation system. When the HTML content is time or even date-related, then the <time> element is used. Here’s an example:

<ul>
<li><data value= “67400”>Mombasa</data></li>
<li><data value= “67401">Nairobi</data></li>
</ul>

* <output>. It displays the result of a calculation or a user’s action. Here’s an example when used in a form:

<form oninput= “answer. Value=parseInt (m.value) +parseInt (n.value)”>
<input type= “number” name= “m” value= “100” /> +
<input type= “number” name= “n” value= “250” /> =
<output name= “answer”>350</output>
</form>

In the above example 350 is a value shown as an example which will basically vary depending on the calculations or functions implemented.

* <progress>. It’s used to display the completion progress of a given task. Here’s how you can use this element:

<progress value= “60” max= “100”>85</progress>

Apart from other attributes <progress> has two specific attributes “max” and “value”.
Max indicates how much task needs to be done before it is considered as complete
Value indicates the current status of the progress bar.

* <meter>. It represents a scalar number that’s contained within a known range of values. Here’s how you can use this element:

<p> you can heat your oven to <meter min= “150” max= “230” value= “200”>200 degrees</meter>.</p>

#2: Adjustments to the iframe

The HTML Inline Frame Element—the <iframe> element—represents a nested browsing content that can be used to embed another HTML page onto the current page. Here are the attributes that you can use with the iframe element to improve the level of security in HTML5:

* Sandbox. When specified as an empty string, the sandbox attribute will allow extra restrictions on the content which will appear in the inline frame.
Below example we have given the frame all the capabilities it requires, and the browser will helpfully deny its access to any of the privileges that we didn’t explicitly grant it via the sandbox attribute’s value.
* Srcdoc. The srcdoc attribute is used in conjunction with the sandbox and seamless attributes. However, when a browser supports the srcdoc attribute, it will automatically override the content that’s specified in the src attribute.
* Src. It specifies the URL of the web page that you’d to embed.

Here’s an example of HTML5 code demonstrating the use of the above-mentioned attributes:

<iframe id= Another_Demonstration” sandbox="allow-same-origin allow-scripts allow-popups allow-forms"> name= “Another_Demonstration” title= “Another_Demonstration” width= “500” height= “450” scrolling="no" marginheight="0" marginwidth="0" src= https://www.capitalnumbers.com/media/file.php> srcdoc=https://www.capitalnumbers.com/media/file2.php> </iframe>
#3: Adjustments to multimedia elements

HTML5 has introduced two built-in media support elements namely: the <audio> and the <video> elements. These elements provides users with capabilities to easily embed both audio and video into HTML documents. Here’s an example of how the video element can be specified in HTML5:

<video src= “https://www.capitalnumbers.com/promotionalvideo.ogg” controls>
<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

Here is an example for embedding audio into your HTML document
Here’s an example of how the audio element can be specified in HTML5:

<audio src= “httpS://www.capitalnumbers.com/promotionalaudio.ogg”> <source src="audio.ogg" type="audio/ogg"> <source src="audio.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio>
#4: Adjustments to 3D Graphics and their Effects

The <canvas> element can be used to draw graphics, create animations, etc. using JavaScript, now there are many JS frameworks available to make your life easire.. Here’s the basic illustration of using the canvas element:

<canvas id= “Demonstration of Canvas Element” width= “300” height= “250”>
</canvas>

For instance, if you want to provide text descriptions of the canvas content—by providing a static image of the dynamic content—here’s is how you can do it in HTML5:

<canvas id= “Demonstrations2” width= “300” height= “250”>
The current price of the stock is: $300+200
</canvas>

That’s not everything, there’s more to learn in HTML5. Get in contact with us for more detailed information.

HTML5 Form Best Practices

CN_Blog_HTML5_15-06-16

A modern and responsive website is no longer just a portal that acts as a communication channel—for sharing information— between the organizations with its clients. For you to be successful with your website strategy—attracting visitors and converting them into leads and customers—you have to design a web form that establishes an affable relationship with the clients.

This article discusses some of the best practices that you can use in HTML5 to create a sensational and an affable website for your firm’s bottom line. Let’s get started.

A typical Web form can have the following components:

* Labels – Explains about the corresponding input fields
* Input Fields – Enables users to provide details.
* Actions – this attribute defines the action to be performed when the form is submitted.
* Message – Gives information about the form submission.
* Validation – It ensures that the data submitted by the user comply with rules provided.

Apart from layout, functionality and purpose, all forms have 3 main aspects which needs to be handled to make a form usable:

Relationship

It is important to know your user for the establishment of a good business relationship. To do this following steps can be followed:

1. Trust can be built by using logo, imagery, color, typography and wording.
2. Name the form according to its purpose which will inform users what the form is about.
3. Always try to be in scope of the form. Don’t ask any questions beyond that.

Conversation

A form is the communication platform between the user and the organization. So this needs to be logical and to the point. The below mentioned points are advisable:

1. Labels needs to be ordered logically.
2. All the Related information are advised to be grouped.

Appearance

1. Label

a. Position – Label above an input field works better for maximum readability.
b. Alignment – Placing labels above input fields is preferable, but make them right aligned if you place them to the left of input fields.
c. Bold labels—Bold labels is bit difficult to read, so it is preferable to use plain text labels.

2. Input Fields

a. Type – Provide the appropriate type based on the requirements.
b. Required – Clearly mention which fields cannot be left blank.
c. Placeholder – Do not use this attribute alone.
d. Autocomplete – Activate this to get faster user input.

3. Actions

a. Naming conventions – Descriptive words for buttons are preferred. Because it will ensure the purpose of the button clearly.

4. Message

a. Success – Notify the users for successful form submission.
b. Error – Notify the users for errors in form submission.

5. Validation

a. Restrict validation to the key points because excessive validation will frustrate users.
b. Use both client side and server side validation. It will ensure the validation in spite of having JavaScript turned off in user’s browser and we can get better user experience with fast response and more secure validation.
c. Use captcha to protect the human-generated spam.
d. You can use Honeypot Technique as well over captcha because no user interaction is required.

Accessibility & Mark-up

1. Use <label> tags to link labels with inputs.

a. Properly read by screen readers.
b. Most browsers treat text with <label> tags as clickable: larger actions.

2. Use the tabindex attribute.

a. Provides control over tabbing order.
b. Enables forms to be navigated by keyboard.

3. Consider the accesskey attribute for additional keyboard support.

a. Direct access to associated input fields.
b. Consider to group related form fields.

#1: Always use smart defaults

Typing can be tiresome for your customers. You can promote your firm’s bottom line by doing the hard work of typing for your customers. For instance, you can pre-populate the information—such as e-mail addresses and the country of origin—on your web form if you already know about your visitor. I know you’re thinking, “How is this possible?”

Well, you can use the visitor’s IP address to geographically locate his/her country of origin so that such a customer doesn’t have to scroll down through a long list of countries to select his/her country. You can also make sensible guesses the options that your customers will be picking.

#2: The inline form validation is always the King!

It’s disheartening to fill out a form and hit the send button only to get an error message that the form hasn’t been filled correctly. You can avoid this scenario by ensuring that you’ve implemented the inline form validation. The in-line validation ensures that errors are captured immediately a user moves from one field to another.

Even though this task may be quite daunting, you can implement HTML5 validation checks to ensure that your forms have the correct in-line validation.

#3: Always top or right-align form labels

Knowing the right alignment for the form labels helps your customer to have an easy time while navigating on the web form. If the form labels are aligned improperly, your visitors or customer may want to postpone the filling out process to a later time—which may not promote your bottom line. So, which alignment is the best?

Ideally, top or right-alignment for the form labels are usually regarded as the best form of form alignment. This is because they provide a closer proximity to the form label thereby reducing the distance that the eye has to move in order to fill out the detail.

#4: Inform your visitors why you’re asking for the information

Always explain to your visitors why you’re asking for that data. For instance, some customers will not be willing to share their data such as telephone numbers if they know they will be blasted with several unsolicited calls. The same applies to e-mail addresses. However, if you explain to such customers why you’re interested in such data, then they will fill out the form on your website.

#5: Always ensure your CAPTCHAS are working fine

There’s no doubt about the power of CAPTCHAS in helping to differentiate between human beings and the machines. However, CAPTCHAS can cause problems on your forms and affect the submission rates. To remedy this problem, always ensure your CAPTCHAS—whether they are letters, logical questions or even image recognitions—are easy to read by the customer.

#6: Make the CTAs clear to the customer

Always check to ensure that the call-to-action text is clear to the website visitor. For instance, if you’re designing a multi-stage checkout system, you should ensure that your customers know the stage they are proceeding to. You can use words such as “Proceed to Payment” or “Complete the Order” instead of “Proceed” and “Complete.”

#7: Don’t make your customers create unnecessary usernames

Human beings are prone to forget usernames and passwords. Asking your visitors to formulate usernames may cause problems for them when they try to remember such names in future. You can use their e-mail addresses since the e-mail address is already unique and the customers can easily remember it.

What You Should Know About HTML5 Drag and Drop

HTML5 Drag and Drop (1)

The drag and drop feature is one of the interactions that can promote usability of your website. There are numerous frameworks that can be used to develop the drag and drop interfaces. However, what most web developers don’t understand is that all the modern web browsers—that supports HTML5— have native supports that can implement drag and drop.

In “What You Should Know about HTML5 Drag and Drop” we explore how to make use of HTML5 drag and drop during web development. Let’s get started.

How to make HTML5 elements draggable

To make HTML5 elements draggable, we use the draggable attribute. When the draggable attribute set to true value, the browser will automatically tell that the element is draggable. Here’s an example:

<div draggable=“true”>
this is an instance of draggable Division</div>

The above HTML5 code tells the browser that whatever element is placed between the <DIV> and </DIV> tags can be dragged and dropped.

Some HTML elements such as the <A> and <IMG> are draggable by default in most browsers. However, it’s a good practice to explicitly specify whether the element is draggable or not.

Which events are started during the drag and drop interactions?

Well, a couple of events will be initiated by the browser during a drag interaction. Some of the events will be initiated on the HTML element that is being dragged while others will be fired on HTML elements that on the web page that serves as the drop targets. Below are examples of events that are fired up during the dragging process:

* dragstart. it’s started on an HTML element by the user. It can’t be initiated when dragging a file into the browser.
* drag. It is continuously started on the element that’s being dragged during the interaction.
* dragenter. It’s fired the moment the dragged element enters the target element.
* dragleave. It’s fired the moment the dragged element leaves the target element.
* drop. It is fired when the dragged HTML element or file is dropped.
* dragend. It’s started when the moment the drag interaction has been completed.

Properties of the Data Transfer Object

The drag interaction generates a data transfer object that’s used to store all the information about the drag interaction. Here’s what you should know concerning properties of the data transfer object:

* DropEffect. This property is used to determine which cursor the browser should display when dragging. Its possible values are: copy, move and link.
dataTransfer.dropEffect [ = value ] * EffectAllowed. It assumes the following values: copy, move, link and copyLink. It indicates which types are allowed for the drag interaction.
dataTransfer.effectAllowed [ = value ] * Files. It defines the file objects that are associated with the dragging process.
dataTransfer.files
* Types. It defines the format types for the data which is stored in the DataTransfer object.
dataTransfer.types

Now that we’ve learnt the basic requirements for drag and drop interaction in HTML5, let’s see a quick process in action.

Copy and paste the HTML5 code below in your favorite editor. Save as “.html” file and open it in your browser.

<! DOCTYPE html>

<html>

<head>

<title></title>

<style>

      #source, #source1, #source2 {color: blue;}
      #target {border: 1px solid black; padding: 2em;}

</style>

<script>

function dragstart_handler(ev) {

 ev.dataTransfer.setData("text", ev.target.id);
 ev.dataTransfer.effectAllowed = "move";

}

function drop_handler(ev) {

 ev.preventDefault();
 var data = ev.dataTransfer.getData("text");
 ev.target.appendChild(document.getElementById(data));

}

function dragover_handler(ev) {

 ev.preventDefault();
 ev.dataTransfer.dropEffect = "move"

}

</script>

</head>

<body>

<div id="source" ondragstart="dragstart_handler(event);" draggable="true">Fruits</div>
<div id="source1" ondragstart="dragstart_handler(event);" draggable="auto">Alcohol</div>
<div id="source2" ondragstart="dragstart_handler(event);" draggable="false">Foods</div>

<div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">Drop all your elements here</div>

</body>

</html>

Try to drag and drop the elements. What do you see?

By putting into practice all that we’ve learnt today, you should be in a position to develop your own drag and drop in HTML5.

 

Top 10 HTML5 Frameworks for 2016

Top 10 HTML5 Frameworks for 2016

I can’t predict with certainty what the future holds of HTML5 technologies. However, one thing’s for sure: knowing which HTML5 framework to use for web development can help differentiate an excellent and successful web developer from a good web developer.

It’s no secret that today’s fast-paced, ever-evolving and complex web development industry demands web developers to find appropriate tools that can help them leverage the competition. One such tool is HTML5 framework. I know you’re thinking, “What is HTML5 framework?” Good question.

Well, HTML5 frameworks are simply abstraction tools that can be used by web developers to create websites easily within a short time. In other words, HTML5 frameworks can be seen as software tools that alleviate the overhead which are associated with the common activities that are performed during web development.

The advantages of using HTML5 frameworks are multi-fold. First, they help web developers to create efficient websites since development of websites becomes a lot easier compared to developing from scratch. Second, HTML5 frameworks improve the security of the website to be developed—an attribute that customers want in a website—since vulnerabilities can easily be detected.

Third and finally, using HTML5 framework can help you to reduce the cost of web development since most of these tools are open source and therefore freely available. Now that you understand the merits of HTML5 frameworks, it’s vital that you also learn how to use them when developing your website.


But first, which are the top-rated HTML5 frameworks in 2016?

Well, here are the top 10 HTML5 frameworks that you should look out for in 2016:

#1: Twitter Bootstrap

The Twitter Bootstrap is one of the most popular and modern HTML5 development frameworks that can help fast-track the development of your website. Here are some of the tools that come with this HTML5 framework:
● Bootswatch. It contains the free Twitter Bootstrap themes.
● Bootstrap Browser Compatibility. It shows which browsers the Bootstrap supports
● WP-Bootstrap. It’s an open source WordPress starter theme that’s built on top of the Bootstrap framework.

#2: HTML5 BoilerPlate

If you’re looking for an HTML5 framework that’s easy to set up and has a lot of optimizations, then look no further than HTML5 Boilerplate. This framework has the following g features:
● It has a built-in scripts for image optimization, html optimization and server configurations.
● It provides users with custom installation set ups.
● It can print the style sheets that are ready to use

#3: Sprites.js

If your client wants a website with animations, then Sprite.js will not only provide you with a simple integration for canvas and HTML animations, but it will also provide maximum performance fro your website.

#4: Foundation

Foundation is a responsive front-end HTML5 framework that has rapid prototyping capabilities. Besides the prototyping capabilities, it also boasts of a responsive grid system that can help you develop a modern website that’s responsive.

#5: HTML KickStart

HTML5 KickStart is a lean and mean package for development of websites using CSS, and JavaScript. If you’re pondering to develop a website that demands stylish buttons and navigation bars, then KickStart will provide that functionality.

#6: Montage

This is an open source HTML5 framework that has incorporated JavaScript files to promote development of websites where the application data and the UI are kept in sync. The Blueprints feature incorporated in this framework helps to bind all the application data with the dynamic web page elements.

#7:Lime.js

Among the features of this HTML5 framework include:
● Optional install. You can just bookmark your game and you’ll be done.
● It has KeyFrame animations
● It provides full support for sprite sheets
● It has good documentations therefore easy to learn.

#8: Modernizr

It can help you to implement HTML5 and CSS3 in browsers that don’t natively support it. This framework can detect your browser’s features and it then add its classes to HTML, so that you switch to a valid fallback.

#9: SproutCore

It is a front-end HTML5 framework that builds HTML5 websites rapidly. It provides web developers with capabilities to develop native-like applications which run on the web.

#10: Zebra

It’s a rich UI open source HTML5 framework that leverages the HTML5 canvas as the backbone for rapid development of web applications.

 

The Ultimate Cheat Sheet on HTML5

HTML5 _The Ultimate Cheat Sheet on HTML5
Developing modern, usable and more responsive websites can quite a jungle because of numerous and confusing web development technologies. Of course the original HTML—which was based on SGML—has become obsolete. Therefore, you can’t rely on it to develop a modern website.

That HTML5 is the next generation language for web development is no longer in doubt. Besides eliminating the need for installation of several plug-in in most browsers, HTML5 has also helped to create an interactive platform that has allowed web developers to design and create responsive websites using minimal effort.

However, there’s a caveat whenever you’re using HTML5: it’s confusing to differentiate older versions of HTML and HTML5— it’s not easy to learn a new programming language. That’s why it’s important to master new elements in HTML5 to be at the forefront when it comes to developing usable and responsive websites.

So, what’s new in HTML5?

Below is a list of all the tags that in HTML5:

● <article>. Defines an article.
● <aside>. Defines content outside the main flow of the narrative.
● <datagrid>. References dynamic data in a tree or tabular data form.
● <datalist>. Defines a list of dropdown pre-defined options surrounding <input> tag.
● <footer>. Defines a footer section of web document.
● <header>. Defines a header for section or document.
● <hgroup>. Defines a group of headings tags (<h1> to <h6>).
● <section>. Defines a section in document.
● <dialog>. It is used to define a dialog box on a web page.
● <figcaption>. It is used to specify the caption for the figure element on a web page.
● <main>. It defines the main HTML content of.
● <mark>. It specifies marked or highlighted text on a web page.
● <menuitem>. It specifies a menu item that a web user can invoke from the pop-up menu on a web page.
● <meter>. It indicates a scalar measurement which is contained in a specific known range.
● <nav>. It specifies the navigation links on a web page.
● <progress>. It defines the progress of a given task on a web page.
● <time>. It defines the date and time on a web page.
● <AUDIO>. It defines the sound content on a web page.
● <VIDEO>. It defines the video content on a web page.
● <BUTTON>. It defines the button for autofocus, disabled and forms on a web page.
● <CODE>. It defines the computer code in a HTML document.
● <IFRAME>. It defines the height, the name and sandbox for HTML5 documents.
● <INPUT>. It’s used to specify formnovalidate, formtarget, height, required, size, src and step attributes of HTML documents.
● <OPTION>. It defines an option group in a drop-down list.
● <SOURCE>. It defines media resources for content on a web page.
● <SPAN>. It defines a section of a document on a web page.
● <MAP>. It defines an image map on a web page.

What about existing tags?

The existing tags are those tags that are found in both HTML4 and HTML5. Here’s a list of those tags:

● <DOCTYPE>. It specifies the HTML5 document type.
● <A>. It species an anchor tag that can be used with href, hreflang and media attributes.
● <ABBR>. It defines an abbreviations used on a web page.
● <ADDRESS>. It defines an address.
● <AREA>. It defines the area that’s inside the image map on a web page.
● <article>.It’s used to describe an article
● <bdo> It’s used to override text direction
● <blockquote> It’s used to define a section that is quoted from other sources
● <canvas> It is used for drawing canvas
● <cite> It specifies the title of table or image.
● <code> It specifies a computer code
● <div> It’s used to segment a given section in HTML document
● <em> It’s used to emphasize the HTML text
● <Embed>. Describes the container for an external applications
● <fieldset>. It defines groups that occur for related HTML elements.
● <form> . It defines the HTML form
● <hr> It defines the horizontal rule
● <iframe>.It define an inline frame on a web page
● <img>. It adds images in web pages
● <input> It’s used for adding an input control

How to Detect User’s Location and Generate Coordinates Using HTML5 Geolocation

HTML5 Geolocation

There are instances when you’d like web users to provide their locations to applications that they are using. This is because of privacy reasons. For instance, you may want to seek the user’s permission to report his/her location information to an application that you’re using.

The Geolocation feature in HTML5 is an API that can help you get user’s location data, but only if with their permissions. In this blog post, we explore this HTML5 API feature. Let’s dive in.

Checking browser compatibility for HTML5 Geolocation API

Of course, the first thing that you should do even before you think of implementing this feature on your website is checking whether your current browser is compatible with Geolocation feature. Here’s the code that can help you check for compatibility:

if (navigator.geolocation) {
}
else {
alert (“The Geolocation API is not compatible with your browser. Update your browser”);
}

 If your browser isn’t compatible, then download and install the latest version that supports HTML5. Most modern and latest browsers should support the Geolocation feature.

How can you get the current location of the user?

You’ll use the “getCurrentPosition” function of the “navigator.geolocation” object. The getCurrentPosition function accepts three arguments as its parameters. These are the Success callback, Error callback and position options. If the location data of the user has been fetched successfully, then the success callback is invoked with the obtained position object as the input parameter.

Otherwise, the error callback function is invoked with the error object as the input parameter. Here’s the code that can get the current location of user:

if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition, showError);
}
else {
alert (“The Geolocation API is not compatible with your browser. Update your browser”);
}

Let’s dive deeper and learn more about the three functions

#1: Success Callback function

This function will only be invoked when the web user accepts to share his/her current location information. In this case, the location information will be available as the position object where the function will be called using the position object as the input parameter. The position object will indicate the timestamp which denotes the time at which the location data was retrieved and coordinates of the object.

The coords object has the following characteristics:

●  Latitude and longitude. These are the geographical coordinates expressed in decimal degrees.
●  Accuracy. It specifies the accuracy levels of the latitude and longitude coordinates in meters.
●  Altitude. It’s the height of the current user’s position above the sea level expressed in meters.
●  AltitudeAccuracy. It specifies the how far off the altitude position could be from the actual attitude value
●  Heading. It indicates the 360-degree heading information.
●  Speed. It provides the relative speed of the web user in meters per second.

#2: Error callback function

The Error callback function is an optional callback function which takes the Position Error object as its input argument. It is invoked under the following conditions:

●  When an unknown error has occurred
●  When the request has timed out
●  When the user has denied sharing his/her current location information.
●  The location information isn’t available.

#3: Position Options

It indicates the options that are available for use while retrieving the web user’s location. These options are:

●  EnableHighAccuracy. It’s a Boolean. If its value is true, then user agent will try to provide the most accurate     position. Otherwise, if its value is false, then a less accurate position is obtained.
●  Timeout. It indicates the maximum time which a user agent can take to respond to the location data request.
●  MaximumAge. It specifies how long the user can keep using the cached location data before getting the new location information.

A Deep Dive into HTML5 Videos

HTML5 _A Deep Dive into HTML5 Videos

It’s a fact that web developers have been fraught with browser compatibility when it comes to embedding videos in their content. Besides knowing the right HTML5 syntax, you have to determine how legacy browsers implement HTML5 video web standards.

However, the fact that you’ve known the right syntax and which legacy browsers supports and implements HTML5 doesn’t make you a better web developer. For you to develop a modern, responsive and usable website which contains videos, you’ve to understand not only the right syntax but also best practices of embedding videos in web pages in HTML5.

In “A Deep Dive into HTML5 Videos” we explore how video content streaming works, how to prepare videos to be embedded in HTML content and the procedures of adding video content to HTML documents. So, let’s get started

 What is video streaming?

The video content that you watch on the internet whether from YouTube or any video streaming website comes in a smaller portion of videos. However, when you’re watching this content, what you don’t know is that the video being displayed has been encoded using different bitrates and resolutions produces the smaller chunks of data that you see on your browser, a process known as video streaming.

Modern web browsers such as Google Chrome, Firefox, and Microsoft Edge can play the videos directly. However, the video content has to be presented in standards that are accepted in HTML5. Some of these standards that are supported are: .mp4, .ogv, and .webm.

How to prepare video content for streaming in HTML5?

Before you can embed any video content into a web page, you must first, convert the video content that you want to add to your website into a file format which is supported on most devices and browsers. Some of the common formats include: .mp4, .ogv, and the .webm.

There are a number of applications that can help you convert video content into file formats supported on most modern browsers. For instance, you can use the JW Player.

How to add video streaming content to HTML page

Now that you’ve prepared your video for streaming, it’s now time to add that content to your web pages. In HTML5, you’ll use the HTML tag: <VIDEO>. The basic <VIDEO> tag has a number of attributes that can help you to specify other characteristics of the video which you want to stream. Below are examples of these attributes:

The “src” attribute specifies the URL of the video. Here’s an example:

<video width=”as per need” height=”as per need” controls> <source src=”XYZ.mp4″ type=”video/mp4″> <source src=”XYZ.ogg” type=”video/ogg”> <source src=”XYZ.webm” type=”video/webm”>

Your browser does not support the video tag.

</video>

autoplay. It notifies the browser to start downloading the video and play whenever a web page is loaded in a browser.

preload. It notifies the web browser whether the optimistic downloading of the video’s metadata is important or not.

poster. It indicates the image that should be displayed before the video is loaded on a web browser.

controls. They are used to display the default video controls such as the play and the pause buttons.

height. It specifies the height of the video in pixels.

width. It specifies the width of the video in pixels.

loop. It is used to automatically loop the video, the moment the video has finished playing.

muted. It is used to mute the video initially.

Want to see a quick process in action? Copy and paste the HTML5 code below into your favorite HTML editor and save it as “.html.” Next, open the web page in your favorite browser.

<! DOCTYPE html>

<html>

<head>

<title></title>

</head>

<body>

<video width="as per need" height="as per need" controls>

<source src="XYZ.mp4" type="video/mp4">

<source src="XYZ.ogg" type="video/ogg">

<source src="XYZ.webm" type="video/webm">

Your browser does not support the video tag.

</video>

</body>

</html>

There you have it. Feel free to contact us in case you have any query.

Copyright © 2012 - 2017 CapitalNumbers Infotech Pvt Ltd. All Rights Reserved.