Category Archives: HTML5

FEATURES OF HTML5

Features of HTML5

If you are a HTML developer, it is necessary for you to keep yourself upgraded with the new features introduced by HTML5. In this article, we have explained the top features of HTML5 that will help you to develop dynamic websites for multiple platforms or devices.

1.SIMPLE DOCTYPE

Are you still using the infuriating and baffling XHTML DOCTYPE? Then, it’s high-time to swap it with the new HTML5 DOCTYPE.

The fifth version of HTML comes with a simple DOCTYPE. In order to indicate that your HTML content utilizes HTML5, the user just needs to write:

<!DOCTYPE html>

The HTML5 DOCTYPE is an appreciated standard and is suitable for all new type of documents. It is generally used for both older and modern browsers which needs a specified DOCTYPE. However, browsers that don’t understand this DOCTYPE will directly submit the contained mark-up in standard mode. Thus, one can freely use the new and simple HTML5 DOCTYPE.

2.FLEXIBILITY WITH “QUOTATION MARKS”

If you are writing HTML5 attributes, the user does not need to utilize quotation marks to define the values. It completely depends on the user whether the user wants to close the elements with quotes or not.

<p class=myClass id=someId> Start the reactor.

However, the user cannot always eliminate quotes from attribute values. For instance, if the user wants to use some more structured documents, the user needs to use the quotes.

3.CAN EDIT TEXT CONTENT HTML5

Most of the new browsers assimilated with a new attribute called content editable which enables the user to edit any of the text included within the element.

With the use of this attribute, the user can instruct the browser to enable the users to add, delete, and edit the text. There are many uses for this technique, such as enabling users to customize the way how pages crop out each time when they visit the website. If the user wants to edit the text contained in the element, the user just need to add:

<ul contenteditable=true>

4.NEW AND EASY SEMANTIC ELEMENTS

Most of the websites use the HTML code with an objective to symbolize header, navigation, and footer. However, this is quite a complicated technique.

HTML5 offers new and easy-to-memorize semantic elements that can help the developers to define different sections of a web page. Below are the following Semantic Elements:

<header>

<footer>

<nav>

<section>

<article>

LATEST APIs IN HTML5

Latest APIs in HTML5

Latest APIs in HTML5

The web is deriving at a fast pace. Every day a new framework, tools, and libraries are releasing with the ambition to become next jQuery. Here are some of the interesting HTML5 APIs, such as Navigation Timing API and Battery Status API. So, let’s dive deep in and know what are these about.

What is Navigation Timing API?

The Navigation Timing API provides data that can be used to measure the performance of a website. This API exposes several properties which offer information about the time at which certain events happen.

Navigation Timing API is W3C recommendation which means that its specifications will not be changed unless a new version is released. Unlike other JavaScript-based mechanisms that have been used for the same purpose, Navigation Timing API can provide end-to-end latency data that can be more useful and accurate.

Let us see an example of how you can measure perceived loading time:

function onLoad() {
var now = new Date().getTime();
var page_load_time = now – performance.timing.navigationStart;
console.log(“User-perceived page loading time: ” + page_load_time);
}

There are many measured events given in milliseconds that can be accessed through the Performance Timing interface. The list of events in order of occur rence is given below.

navigationStart: Is the time immediately after the browser finishes prompting to unload the previous document. If there is no previous document, then navigationStart is equal to fetchStart. This is the beginning of the page load time as perceived by the user.

unloadEventStart: unloadEventStart is the time immediately before the previous document’s unload event is fired. If there are no previous document, or if the previous document is from different origin then the value would be zero.

unloadEventEnd: If there are any redirects that point to a different origin then unloadEventStart and unloadEventEnd are both zero.

redirectStart: “redirectStart” represents the start time of the URL fetch that initiates a redirect.

redirectEnd: If there are any redirects then “redirectEnd” represents the time after the last byte of the last redirect response received.

requestStart: requestStart is the time before the browser sends a request for the URL.

responseStart: The time immediately after the browser receives the first byte of response.

responseEnd: The time immediately after the browser receives the last byte of the response.

In addition to the above set of properties, the Navigation Timing API also defines another object to determine how a user landed on a particular page. The object is called navigation and it belongs to windows.performance. It contains two properties i.e., “type” and “redirectCount”.

Type : This property provides the method by which the user navigated to the current page. The following are the list of values that “type” can hold.

⦁ If the user navigates to a page by typing the URL, clicking a link, submitting a form, or through a script operation, then the value of “type” is zero.
⦁ If the page is reloaded/refreshed, then the “type” is equal to one.
⦁ If the user navigates to a page by clicking back or forward buttons, then “type” is equal to two.
⦁ For other circumstances, “type” is equal to 255.

redirectCount: It is the number of redirects taken to the current page. If there are no redirects occurred or if any of the redirects are from a different origin, then the value is zero.

Browser Support: Browser support for this API is very good for both desktop and mobile. On a desktop, the Navigation Timing API can be implemented in Chrome, Firefox, Internet Explorer, and Opera. The only desktop browser that currently does not support this API is Safari. On mobile, the API can be implemented in iOS safari, UC browser, and Blackberry browser. Opera Mini is the only browser that does not support this API.

Battery Status API
What is Battery API?

The Battery Status API also referred as the Battery API, is an API that provides information about systems battery level. It also defines events that are fired when changes of the battery level or status take place. This can be used to adjust user’s applications resource usage to minimise battery drain when the battery is low or to save changes before the battery runs out in order to prevent data loss.

The Battery Status API exposes four read-only properties on the window.navigator.battery object, they are as follows:

strong>Charging: A Boolean value that specifies whether the battery is charging or not. If the device doesn’t have a battery or the value cannot be determined, then the value of this property is set to be true.

ChargingTime: A value that specifies the number of seconds remaining until the battery is fully charged. If the battery is already charged or the device doesn’t have a battery, then the property is set to be “0”. If the device is not getting charged or if it is unable to determine the remaining time, then the value is Infinity.

DischargeTime: The value that represents the number of seconds re maining until the battery is completely discharged. If the discharge time cannot be determined or the battery is currently charging, then the value is set to Infinity. If the device doesn’t have a battery, then the discharging Time is also set to Infinity.

Level: A value that specifies the current level of the battery. The value is returned as float ranging from 0 (discharged) to 1 (fully charged). If the level of the battery cannot be determined, the battery is fully charged, or the device does not have a battery, then the value of level is equal to 1.

Battery Status Events:
There are four events that can be fired by the battery object.

Chargingchange: The device has been changed to being charged to being discharged.

Levelchange: The level of the battery will be changed.

Chargingtimechange: It is the time until the battery is fully charged has changed.

strong>Dischargingtimechange: It is the time until the battery is fully discharged has changed.

Browser support

Browser support for the Battery Status API is pretty poor. Firefox is the only browser that provides support for the API without the use of vendor prefix.

WHICH WAY TO GO: NATIVE, HTML5, OR HYBRID?

Which way to go: Native, Html5, or Hybrid?

In a world that is progressively social and open, portable applications play a key role, and have changed the emphasis from what’s on the Web, to the applications on our smartphone. Versatile applications are no more an alternative, they’re a basic. You require a versatile application, yet where do you begin? Many elements have influence in your versatile technique, for example, your group’s improvement abilities, required gadget usefulness, the significance of security, logged off capacity, interoperability, and so on, that must be considered.

html

There are mainly 3 options of mobile application development:

mobile application developement
Native Mobile Applications

More or less, local applications give the best ease of use, the best elements, and the best general versatile experience. There are a few things you just get with local applications:

Multi touch – Twofold taps, squeeze spread, and other compound UI motions.

Graphics API – The local stage gives you the speediest design, which may not be a major ordeal in case you’re demonstrating a static screen with just a couple of components, or a major ordeal in case you’re utilizing a great deal of information and require a quick invigorate.

Fluid animation – Identified with the quick representation API is the capacity to have fluid liveliness. This is particularly vital in gaming, exceedingly intelligent reporting, or strong computational calculations for changing photographs and sounds.

Built-in components – The camera, location book, geolocation, and different elements local to the gadget can be consistently incorporated into versatile applications. Another imperative implicit parts is scrambled capacity, yet more about that later.

Usability – The local stage is the thing that individuals are acclimated to, thus when you include that recognition with the local’s majority highlights they expect, you have an application that is out and out simpler to utilize.

Documentation – There are more than 2500 books alone for iOS and Android advancement, with numerous more articles, blog entries, and nitty gritty specialized strings on destinations like StackOverflow.

HTML5 Web Apps

HTML5 is a dialect that empowers designers to make rich online applications that keep running on any gadget by means of the web program; engineers can “compose once, run all over”. A versatile venture may need to make a substantial number of distinctive applications to bolster a horde of differing offices and useful undertakings, which makes HTML5 more alluring financially.

Defenders of HTML5 trust that the quality is practically identical to that of a local application. Likewise, it is less demanding to adapt and roll out improvements to your application in light of the fact that you are not experiencing an application store.

Contentions against HTML5 incorporate execution, hindrance of heading off to a URL rather than downloading an application, and absence of program similarity (not all portable programs bolster the same subset of components).

Hybrid App

The last choice is to make a half and half endeavor portable application, which is composed in HTML5 however wrapped in a local “compartment”, and made by means of cross-stage advancement devices, for example, PhoneGap and Sencha. It would seem that a local application, can be downloaded from an endeavor application store, and can even access on-gadget highlights, however doesn’t contain an ounce of Objective-C or Java code. The engineer ordinarily needs to utilize HTML5, CSS, and JavaScript inside of the stage environment, abilities which are less demanding and less expensive to discover than Objective-C or Java.

One downside to this methodology is timing: there may be issues while sitting tight for your stage to actualize new usefulness discharged by a working framework. This methodology is picking up in prominence: Gartner predicts that by 2016, more than half of all applications conveyed will be crossover.

At last, if your endeavor portable applications oblige access to gadget particular components or predominant response time required for amusements rate advanced applications (video), then local is your most logical option.

On the off chance that you are expense obliged and need to create numerous applications for some stages, or need to do quick prototyping preceding building up the full-highlighted application (run of the mill with a commercial organization), pick HTML5.

In the event that you are some place between the two, well then go half and half.

Strict vs. quirks modes – How to trigger each and why this matters?

Strict vs. quirks modes – How to trigger each and why this matters?

Quirks mode and strict mode are the two ’modes’ modern browsers can use to interpret your CSS.

Anything before the DOCTYPE, like a comment or an XML declaration will trigger quirks mode in Internet Explorer 9 and older versions.

In HTML5, the only purpose of the DOCTYPE is to activate full standards mode. Older versions of the HTML standard gave additional meaning to the DOCTYPE, but no browser has ever used the DOCTYPE for anything other than switching between quirks mode and standards mode.

How to Change an input’s HTML5 placeholder color with CSS?

How to Change an input’s HTML5 placeholder color with CSS?

A placeholder in input field looks like this:
By default the color of the placeholder is black (with some opacity).

In order to change the default color of a placeholder in input field, we can use pseudo-elements and pseduo-classes.
Mozilla Firefox
/* Mozilla Firefox 4 to 18 */
[one colon]
:-moz-placeholder {
color: #909;
opacity: 1;
}
/* Mozilla Firefox 19 & above */
::-moz-placeholder {
color: #909;
}
Webkit Browsers
/*Chrome,Safari,etc*/
::-webkit-input-placeholder {
color: #909;
}
Internet Explorer
/* IE 10+ */
:-ms-input-placeholder {
color: #909;
}
Points to Note:
IE 9 & Below and Opera 12 & below do not support any CSS selector for placeholders.
Firefox’s placeholder needs to use opacity: 1 to avoid any default contrasts.
It is highly recommended to use em’s for input elements’ dimensions to avoid any cutoff in placeholder’s text.

HTML5 Vibrate APIS for Web and Mobile App Development

HTML5 Vibrate APIS for Web and Mobile App Development

Today all modern web applications are utilizing HTML5 APIs to create interactive websites and powerful gaming apps on mobiles. Up until now, vibration feature have been used only in mobile native apps to send some notifications. We’re going beyond that with vibration for the mobile-web application that can provide you feedback with tactile vibrations. Let’s check out this API in a little detail.

HTML5 Vibrate API, one of the exciting APIs that helps to programmatically access the hardware component of a mobile devices allowing it’s vibration capabilities to work. Imagine you came across a product that you would love to buy it for lesser price. Imagine you could be trying to do some online banking. As a developer, you can create a tactile vinration and let the user know that their session is going to timeout in a minute, and offer the user a quick and easy way to keep their session going without having to log in again.

Use ful Scenarios:

  • When a user tries to submit the form while the required field is left empty or the entered text does not match the requirement.
  • For creating the Notifications, alerts in Video games etc.
  • To engage mobile shoppers by prompting new offers

Usage:

This api is simply a method in the navigator object. Below is the simple code sample that uses vibrate() method which you can tell the device to vibrate for a given duration.

// Vibrate once for 1 second
navigator.vibrate(1000);
Vibration pattern can be customized by passing an array of numbers. In the below example the devices will vibrate for 1000 ms, wait 300 ms and vibrate again for 1000 ms.
// device will vibrate wait vibrate
navigator.vibrate([1000, 300, 1000]);

This alerts the device how long to vibrate pointing out how long the pauses between the vibrations should be. You can even halt the device from vibrating by just passing an integer value 0 or an empty array to the navigator.vibrate() method

Browser support:

Recent versions of Firefox and chrome browser supports this Vibration API property, but it supports other standard browsers by using moz and webkit prefixes respectively.

Vendor prefixes would be handy for compatibility:
// enable vibration support
navigator.vibrate = navigator.vibrate || navigator.webkitVibrate || navigator.mozVibrate || navigator.msVibrate;
if (navigator.vibrate) {
// vibration API supported
}