HTML5

HTML5 doctype declaration

August 21, 2019 by ashish Leave a Comment

The <!DOCTYPE> is a declaration which must appear before any other html markup.This is an instruction to the browser about interpreting the html markup by specifying the version of the markup.The doctype declaration specifies the DTD to be used for HTML document.

In the case of previous versions of html the dtd to use needs to be specified in the doctype declaration.In the case of html 5 only following should be specified:

<!DOCTYPE html>

Contrast this with previous versions of html in which you need to specify dtd along in the doctype declaration:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

DTD is Document Type Definition.It specifies the elements and attributes of a document.It is often used in different documents based on SGML such as xml.SGL is meta language on which other languages such as XML and HTML are based.For example you can specify valid elements in xml as:

<!DOCTYPE valid elements>

This was the case in earlier versions of html but in html5 there is no dtd.This is becasue html 5 is not based on SGML.Since browsers have rendering engine for correctly displaying html the support for dtd has been dropped in html5.

ashish

Follow on:

Features of Progressive Web Apps

November 14, 2017 by ashish Leave a Comment

Progressive web apps (PWA) are web applications or websites that have the best features of both the web and native apps.For example native apps have more richness than web applications ,similarly Progressive web apps have the same richness as native apps.So Progressive web apps feels like native apps to the end user.Similar to web applications Progressive web apps can be accessed using the browser.

Progressive web apps uses the existing set of technologies to create a more rich and engaging experience for the end user.

Important features of Progressive Web Apps

Progressive web apps have the following features:

Progressive

as the name suggests Progressive web apps(PWA) enhance progressively over a period of time.Basic fucntionality should work from the starting but makes use of the device API over a period of time.

Responsive

PWAis responsive.It will fit on any device such as mobile or tablet.

Feels like Native App

feels like native app .Features such as navigation in the app feels same as the native app.

Offline

can even work offline or on a weak network.

Re-engageable

using the features such as the host OS and push notifications.

Discoverable

Progressive web apps are discoverable using browsers.

Fresh

Always up to data through background syncing using service workers.

Safe

because of HTTPS.

Installable

Can be added to home screen

So Progressive web app has the features of both the web applications and the apps.

Web features

PWA is accessed using only HTTPS
PWA is responsive.

Native features

Can add to home screen
App works even offline
Feels like native app

Background Syncing and Push Notifications are used in Progressive Web Applications:

Background syncing

Background syncing when you are offline you perform some action such as sending chat message on messenger.When the network is available the action is completed and the chat message is actually sent.

Push notification

Push notification is used for sending information to a device.Browsers have good support for push notifications.It is of 2 types:

persistent notifications interaction happens using service worker.
non persistent service workers are not used.notifications are sent without using service workers.Implemented through notification API.

Users are explicitly asked for permission to show notifications.

Web app manifest file

This is a manifest file which allows the web app to have capabilities such as:

Allows to run web app in full-screen mode and as a standalone application
Defines theme and background color of the app.

A web app manifest file is a JSON file.Web app manifest file defines things such as:

short_name is the name of the application
name this defines how the application will be listed
description general description of the web application.
icons defines an array of images

ashish

Follow on:

Upload File in MVC using Ajax

January 5, 2016 by ashish Leave a Comment

Most of the applications today works with files such as word documents or pdfs.So one of the common requirements in most applications is uploading files.In the case of windows applications uploading files could be very fast as the user is working with files stored locally on his machine.

Uploading files in web applications could be a time consuming process since the file is on the local machine of the user and it is required to be sent with the HTTP request to the server.Since this process could take significant time ,implementing file upload functionality using ajax improves the user experience while file is being uploaded on the server.

We need to follow the below steps when implementing file upload functionality using ajax

Declare a file input type

<input type="file" id="fileinput" />

2. Create an instance of FormData

FormData is used for passing key value pairs to the server in an HTTP Request.We create an object of FormData and add the file in it.

var formData = new FormData();
formData.append('file', file);

3. Pass the formdata object in the request

We pass this formdata object to the server using $.ajax() method of jQuery

function uploadFile(file)
{
var formData = new FormData();
formData .append('file', file);

$.ajax({
url: "InsertFile/",
type:"POST",
data: formData ,
cache: false,
contentType: false,
enctype: 'multipart/form-data',
processData: false,
success: function (data) {

},
error: function (xhr, status, error) {

}
});
}

4. Read the file in the action method

Finally we read the posted file in the action method.The uploaded file will be available as a parameter of type HttpPostedFileBase.We can read the file using this object.We can perform different operations using this object such as saving file in the database.

[HttpPost]
public ActionResult InsertFile(HttpPostedFileBase file)
{
BinaryReader binaryReader = new BinaryReader(file.InputStream);
byte[] binaryData = binaryReader.ReadBytes((int)file.InputStream.Length);
string result = System.Text.Encoding.UTF8.GetString(binaryData);
// Logic to insert the file in database
return View();
}

ashish

Follow on:

HTML5 new input types

June 11, 2015 by ashish shukla Leave a Comment

One of the main design goals of HTML 5 is to reduce the dependency on third party libraries and plugins.HTML 5 includes many of the features which are commonly required by the client so that instead of relying on the client side frameworks and libraries we can directly use the HTML 5 native features.

One common requirement is to perform data validation at the client.Validation at the client side ensures that wrong data is not submitted to the web server.Since there is a round trip involved when the data is submitted to the web server so it is better to perform the validation at the client or browser.In the previous versions of HTML as there was no inbuilt validation support so we had to rely on third party libraries or we had to write custom logic for validation.

Since validation is such a common requirement HTML 5 supports validation by providing many new input type controls for different types of data such as email and date.Not only the new input type controls validate the user entered data they also render the appropriate html for the input controls.For example when the date input type is rendered it displays a calendar from which the user can select the date.

Following are some of the main input types introduced in HTML 5

New input types

HTML 5 includes many new input types.As we know the “input” element in HTML can be used for creating different type of input elements such textbox , checkbox ,radiobutton.

For example to render a textbox we use the following

<input type="text">

While for rendering a checkbox we write

<input type="checkbox">

Though textbox allows the user to freely enter any data but it also makes it necessary to perform validation of the user entered data.For example if the textbox expects the date value and user entered a string then our application logic will not work as expected or we would get an error.To prevent such problems it is better to perform the data validation at the client so that the user is immediately informed about the error.

HTML 5 introduces several input types for different types of data.Using these input types is relatively easy.We just need to set the type attribute of the input element.Some of the main input types introduced in HTML 5 are:

email
number
date
search
range
url
tel

Email

One of the common requirements in web pages is to allow the user to enter his email address.As the email addresses has a well defined format so we were required to write regular expressions for performing the validation of email address or rely on some third party plugins .With the email input type we can easily validate if the entered text is a valid email address or not.Uer is informed immediately if he enters invalid email address.

To add the email field we set the type attribute to “email”

<input type="email" name="emailAddress">

If we enter non email value the email type will automatically display an error message and will not allow us to submit the form.In the above email field I have entered a string value so the form will not be submitted until email address is entered in the above field.

Number

Often we have the requirement to validate the numeric data.We can easily implement the numeric data validation in our web page using the number input type without writing any Javascript or jQuery code.

<input type="number" name="age">

We can also set the range for the numeric data by setting the min and max attributes.For example age should be between a particular range and cannot be a negative number .So we can set the min and max attributes as:

<input type="number" min="0" max="150" name="age">

Following field is rendered for the above html in chrome.

Date

Many times we want to restrict the user to enter only date values in a field.The “date” type can be used in such a scenario

<input type="date" name="birthdate">

date input type is specially useful as it displays a datepicker by default.This allows the user to select the date in proper format.

Their are other date time types as well :

datetime Allows user to select date and time ,including the timezone.
datetime-local Allows the user to select date and time ,without the timezone.
time Allows the user to enter time.

More recent versions of the browsers support date time types and as higher versions of the browsers will be released most of the browsers will be supporting these types in future.

Search

Many times we need to allow the user to enter search keywords in a field.Search type is used in such a scenario.
To add the search field we set the type attribute to “search“.In Chrome and Safari a cross appears at the end of the searchbox to clear the input

<input type="search" name="search">

Range

Like the “number” type this is also a numeric type.We can give the option of visually selecting the numeric values using the “range” type which displays a slider which the user can drag to select a numeric value.

<input type="range" name="volume" min="0" max="10">

This is similar to volume control of a media player.

Url
Allows the user to enter the urls such as www.google.com

<input type="url" name="mainPage">

Tel

This is meant to hold a telephone number.

<input type="tel" name="usertel">

Below is the list of the browser and their support for the HTML 5 input types

	Firefox	Safari	Chrome	Opera	Internet Explorer
Email	4+	5+	6+/10+	10.6+	10+
Tel	4+	5+	6+	10.6+	10+
Url	4+	5+	6+/10+	10.6+	10+
Number	29+	5+	7+	9+	10+
Date & Time	38	8	43	29	11
Range	38	8	43	29	11

ashish shukla

Follow on:

HTML5 History API

April 30, 2015 by ashish shukla Leave a Comment

The browser toolbar is one of the most important UI element in any web application.One of the most common ways to navigate between the different pages is through the back and forward buttons on the toolbar.

What the back and forward buttons actually do is that they help to navigate between the pages already visited by us.The pages which we have visited are stored in the browser history.So clicking the back button instructs the browser to go back in the list of history entries while clicking the forward button instructs the browser to go forward in the history.

In the previous versions versions of HTML we can easily navigate between the browser history using the back(), forward(), and go() methods.

To move backward through history we can use the back() method as:

window.history.back();

The above method works as if the user clicked the Back button on their browser toolbar.

To move forward we can use the forward() method as:

window.history.forward();

Though we can easily navigate the browser history using the above methods , in the previous versions of HTML there was no easy way to manipulate the browser history.One questions you may ask is what is the need for manipulating the browser history ?.To answer this question just think about how we make requests to the web server in our applications.

Frequently we directly type the URL in the browser address bar
The different pages in our applications can also request a resource at a different URL by providing hyperlinks which the user can click for navigating to the specific page
We partially update a page using the AJAX

Suppose we do a partial page update using AJAX and update our page.Now if we click the back button we may not navigate to the previous state of the page but rather to the previous URL which can even be a URL outside our application.

It is the last point ,making ajax requests,which can benefit most by using the HTML5 History API .We often have faced this problem in the past when we had implemented some ajax functionality in our application and after updating the page contents the back and forward buttons no longer works as expected.

If we implement the History API in a application which uses AJAX for updating the page contents then from the end users perspective the experience will be similar to visiting a new URL.

Following will happen now

User clicks on a button which requires to fetch some content from the server
Browser makes an ajax request to the server for fetching the content
Server responds with the content,browser updates the page with the new content from the server

Once the above steps completes if the user clicks the forward and back buttons the page will get updated with the correct content,If the user clicks the back button he will be able to view the previous content while if the user clicks the forward button the page will be updated with the updated new content.Also the browser URL will be updated as we click the back and forward buttons.

Let’s see how we can achieve the above functionality using the HTML5 History API.

To manipulate the history entries in the browser two new methods are provided by the History API

pushState Adds a new history entry
replaceState Replaces an existing history entry

Both the pushState and replaceState methods have the same arguments but they differ in their usage.

Apart from the above methods there is an event onpopstate which is useful for working with the browser history.

We use the pushState method as:

history.pushState(state,title,url)

state : object represents the state of the page.This object is passed to the onpopstate event.We can use this object to change the state of the page depending on the history entry selected.It is important to note that we need to explicitly set the state of the page on selection of history entry ,for which we can use this state object.

We pass a javascript object in this parameter.We can define the values in this object which we want to retrieve when the user navigates back to this history entry.Suppose page is displaying data for an employee named John having employee id “1” so we can save this information in the state parameter as:

var state = { name: "John" };
history.pushState(state, "title", "employees/1");

We have provided relative URL above.So if the full URL of our application is www.organization.com so our new URL will be www.organization.com/employees/1

title :represents the title of the page.As currently browsers don’t support this so we can ignore it as of now.

url : the URL for the history entry.This can be relative url to the current url or it can be absolute url.If we don’t specify URL then this is set equal to the current url.

Calling the pushState method will add an item in the list of history entries and we can navigate through the history entries using the back and forward buttons.But though clicking the back and forward buttons will navigate to the corresponding entry in the list of history entries but state of the page will not be automatically updated.To update the state of the page for the history entry we use the popstate event.

The popstate event is called whenever the user navigates to a history item.We can attach the popstate event to the window as:

window.addEventListener('popstate', function(event) {
// event.state contains the state information 
});

replaceState method is similar to the pushState method and expects the same parameters but instead of making a new entry in the list of history items it updates the current history entry.

ashish shukla

Follow on: