Talk in computer language.: HTML 5

Showing posts with label HTML 5. Show all posts

Friday, October 31, 2014

HTML5 got official seal; it is time to change Microsoft’s strategy on IE

Here is good news for UI developer and designer. HTML5 is at last promoted for official Recommendation by WWWC (World Wide Web Consortium) .You may think that , Hey! I am using HTML5 for last couple of years and working fine in major 3 browsers (chrome, Firefox and Opera) so, what is great in this news?

Yes to win in browser ware, browser companies started inject HTML5 compatibility on browser though HTML5 elements were not standard officially but Microsoft’s IE never join in race. I think it is time for Microsoft to adapt HTML5 parsing capability in Internet Explorer.

On October 27, 2014 W3C developer announce that “For a lot of people, it is important to have a stable version of the specification that’s ratified in some way by a standard organization”. They expect HTML5 to soon became an international Organization for Standardization (ISO) standard as well.

Here is key areas where HTML5 focused.

Less dependency on third part technology
Rich set of tags and elements
Perform validation in uniform way

The open web platform expects to focus on Security, streaming and push notification in HTML5.

Saturday, February 11, 2012

Geolocation in HTML 5

Display Geolocation using HTML 5

Using geolocation feature we can find our location in globe. As geolocation will show your current geographical position in world, so it’s very much perfect with mobile devices, say for

Mibile phone, ipod and other PDA devices. Copy and paste the below code to display your altitude and longitude.

Add below code in body tag of your web page

<p id="mybutton">Click button to get location </p>

var x=document.getElementById("demo");

function getLocation()

{

if (navigator.geolocation)

{

navigator.geolocation.getCurrentPosition(showPosition);

}

else{x.innerHTML="Geolocation is not supported by this browser.";}

}

function showPosition(position)

{

x.innerHTML="Latitude: " + position.coords.latitude +

"<br />Longitude: " + position.coords.longitude;

}

</script>

</body>

</html>

Ploting your location using google map.

<!DOCTYPE html>

<html>

<body>

<p id="demo">Click button to get position </p>

<button onclick="getLocation()">Click me</button>

var x=document.getElementById("demo");

function getLocation()

{

if (navigator.geolocation)

{

navigator.geolocation.getCurrentPosition(showPosition,showError);

}

else{x.innerHTML="Geolocation is not supported by this browser.";}

}

function showPosition(position)

{

var latlon=position.coords.latitude+","+position.coords.longitude;

var img_url="http://maps.googleapis.com/maps/api/staticmap?center="

+latlon+"&zoom=14&size=400x300&sensor=false";

document.getElementById("mapholder").innerHTML="<img src='"+img_url+"' />";

}

function showError(error)

{

switch(error.code)

{

case error.PERMISSION_DENIED:

x.innerHTML="User denied the request for Geolocation."

break;

case error.POSITION_UNAVAILABLE:

x.innerHTML="Location information is unavailable."

break;

case error.TIMEOUT:

x.innerHTML="The request to get user location timed out."

break;

case error.UNKNOWN_ERROR:

x.innerHTML="An unknown error occurred."

break;

}

</script>

</body>

</html>

Here displaying map according to location is very simple. I have use google’s map API to spot location onto map.

Drawing picture in canvas

What is Canvas?

It is possible to draw picture using canvas element. The HTML5 canvas element uses JavaScript to draw graphics on a web page. A canvas is a rectangular area, and you control every pixel of it. The canvas element has several methods for drawing paths, boxes, circles, characters, and adding images.

Insert the code below into body tag of your page.

Update your browser

</canvas>

var ca=document.getElementById("myCanvas");

var ct=ca.getContext("2d");

ct.fillStyle="#FF00FF";

ct.fillRect(0,0,150,100);

</script>

If it works fine in your browser then one rectangular window will come within canvas window .

· Canvas element create a canvas in browser’s window.

· Java script is used to draw something in canvas.

· You can use ct.arc(70,18,15,0,Math.PI*2,true); to generate a circle in canvas window.

Drag and drop in HTML 5

Drag and drop element

Drag and drop is very much necessary when we want to drag some element and drop into other element. The below code will not work in opera browser.

<!DOCTYPE HTML>

<html>

<head>

#mydiv {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}

</style>

function allowDrop(ev)

{

ev.preventDefault();

}

function drag(ev)

{

ev.dataTransfer.setData("Text",ev.target.id);

}

function drop(ev)

{

var data=ev.dataTransfer.getData("Text");

ev.target.appendChild(document.getElementById(data));

ev.preventDefault();

}

</script>

</head>

<body>

<p>Drag the image into the rectangle:</p>

<br />

</body>

</html>

Here one rectangular box will come and try to drag your picture within rectangular window. It may not work if your browser do not support HTML 5 fully.

The draggable=”true” make the image draggable.

Play audio in HTML 5

Play audio in HTML 5

Until now, there has not standard for playing audio files on a web page. Today, most audio files are played through a plug-in (like flash). However, different browsers may have different plug-ins. And it’s a great problem.
HTML5 defines a new element which specifies a standard way to embed an audio file on a web the <audio> element. Till now there are three types of audio file( MP3, Wav, and Ogg) that can able to play in web.

<audio controls="controls" height="200" width="500">
<source src="abc.ogg" type="audio/ogg" />
<source src="xyz.mp3" type="audio/mpeg" />
</audio>

Audio tag takes one attribute that is “controls” and display some audio control(like volume control etc)

The height width control specify height and width of audio frame.

Video play in HTML 5

Video play

Up to now there is no straight solution to play video in web pages. We need to take help of third party tool(Flash , Microsoft silverlight )to play video. To enjoy the service user need to install those plug-in in there system. This has so disadvantages , because different browser need different plug-ins. But using HTML 5 we can smartly solve this problem.

Code to play video in HTML 5 is.

The controls attribute represent video control (like play ,pause ,mute etc)

Video tag is used to play video.

Src attribute of source tag specify the path of video.

N.B:-Currently, there are 3 supported video formats for the <video> element: MP4, WebM, and Ogg:

Controlling video with play pause and resize method.

1)Cppy and paste below code . It will display four buttons and one video frame.

<button onclick="play()">Play/Pause</button>

<button onclick="small()">Small</button>

<button onclick="normal()">Normal</button>

<br />

</video>

</div>

2)Now write following JavaScript function to control your video element. Put this code in head section to your page.

var myVideo=document.getElementById("myvideo");

function play ()

{

if (myVideo.paused)

myVideo.play();

else

myVideo.pause();

}

function big()

{

myVideo.height=(myVideo.videoHeight*2);

}

function small()

{

myVideo.height=(myVideo.videoHeight/2);

}

function normal()

{

myVideo.height=(myVideo.videoHeight);

}

</script>

Advantage and disadvantage of HTML 5

Introduction to HTML 5

HTML 5 is the latest version of HTML It is the combination of HTML and XHTML. We can say that it is enhance version of HTML. It has developed to reduce development time and cost and also make web development a simple thing. The dependency over coding will reduce by using HTML 5. And dependency over plugin (Flash , Silverlight) will reduce by using some new tags of HTML 5(Audio, Video, Canvas etc).

Some of the new features in HTML5 are functions for embedding audio, video, graphics, client-side data storage, and interactive documents. HTML5 also contains new elements like <nav>, <header>, <footer>, and <figure>.

The HTML 5 group has constructed with some technology giant company like Google, Aol, IBM, Apple etc.

Advantages of HTML 5

There are so many advantages of HTML 5 .Some of them are

Less dependency over External Plugin:-

There are many new multimedia handeling tags are incorporated in HTML 5. So the dependency over third party plugin has reduced. Using HTML tag we can play a high quality audio or video in our web page.

Cleaner markup / Improved Code

HTML 5 will enable web designers to use cleaner, neater code, we can remove most div tags and replace them with semantic HTML 5 elements.

Better semantics

HTML 5 is example of semantic HTML. Tags are more meaningful ,and also they represent meaningful data. Now it is easy to see which parts of the page are headers, nav, footers, aside, etc as the tags are specific for these all and most importantly know what their meaning and purpose is in whole the format. By using HTML5 elements we can increase the semantic value of the web page as the codes are very standardized.

Form element

The form elements set are robust in HTML 5. So dependency over JavaScript and other validation function has reduced. Using HTML 5 we can validate user’s form natively, No need to JavaScript function. But java script is necessary for those browser which do not support HTML 5 widely.

Consistency

As websites adopt the new HTML5 elements we will see more greater consistency in terms of the HTML used to code a web page on one site compared to another. This will make it more easier for designers and developers to immediately understand how a web page is structured. And it will helpful to farther maintenance.

Basic need of web application

Many new features and standards have emerged as part of HTML 5. Once you detect the available features in today’s browsers, you can take advantage of those features in your application. Main focus of HTML5 is to make easier application with easy front-ends, drag and drop tools, discussion boards, wikis and other useful elements.

Offline cache

Browser has some capability of offline cacheing. When you visit website and press browser’s back button then the page may not open if the internet connection has terminated. So internet connection is very much needed to visit website.

But beauty of HTML 5 is that you can visit the webpage even in offline if is developed in HTML 5. HTML 5, thankfully, provides the smarter solution. While building the site, the developer can specify the files that the browser should cache. So, even if you refresh the page when you are offline, the page will still load correctly. This sort of caching has several advantages like offline browsing, files load much faster and reduced load on server and it will save bandwidth also.

Client side storage.

Basically we know client side temporary storage means cookie and session. While cookies have been used to track unique user data for years, they have serious disadvantages. The largest flaw is that all of your cookie data is added to every HTTP request header. And when a new HTTP request has generate it send the cookie information too to server, This can end up having a measurable impact on response time. So a best practice is to reduce cookie size. With HTML5 we can do better by using sessionStorage and localStorage(two different storage in HTML5) in place of cookies. It is not a permanent database, but enables you to store structured data, temporarily.

Great for Mobile Devices and PDA
HTML5 could be the solution to faster applications that will be accessible universally across all mobile phones. And other PDA device is going to support HTML 5

Support of Geolocation

With help of Geolocation any one can find out where you are in the world and sharing that information with people. There is different ways to figure out where you are — your IP address, your wireless network connection, which cell tower your phone is talking to, or dedicated GPS hardware that calculates latitude and longitude from information sent by satellites in the sky. But The new HTML5 geolocation APIs make location, whether generated via GPS or other methods, directly available to any HTML5-compatible browser-based application.

These are some advantages of HTML 5 among many more. As HTML 5 is in development phase ,so more advantage may come out. It is assuming that it will complete within 2022, and the web developer are very hopeful with it.

Disadvantage of HTML

Browser Support

HTML 5 is the latest version of HTML The predecessor of HTML was HTMLàHTML 2.0àHTML 3.2 àHTML 4.01à HTML 5.

It is the combination of HTML and XHTML. We can say that it is enhance version of HTML. It has developed to reduce development time and cost and also make web development a simple thing. The dependency over coding will reduce by using HTML 5. And dependency over plugin (Flash , Silverlight) will reduce by using some new tags of HTML 5(Audio, Video, Canvas etc).

The HTML 5 group has constructed with some technology giant company like Google, Aol, IBM, Apple etc.

Advantages of HTML 5

There are so many advantages of HTML 5 .Some of them are

Less dependency over External Plugin:-

Cleaner markup / Improved Code

HTML 5 will enable web designers to use cleaner, neater code, we can remove most div tags and replace them with semantic HTML 5 elements.

Better semantics

Form element

Consistency

Basic need of web application

Offline cache

Client side storage.

Great for Mobile Devices and PDA
HTML5 could be the solution to faster applications that will be accessible universally across all mobile phones. And other PDA device is going to support HTML 5

Support of Geolocation

Disadvantage of HTML

Browser Support

HTML5 is not yet an official standard,as it is in development phase so no browsers have full HTML5 support.
But all major browsers (Safari, Chrome, Firefox, Opera, Internet Explorer) continue to add new HTML5 features to their latest versions. So to view web page developed with HTML 5 user need to update their browser.

HTML browsers are incapable of scaling (zooming or resizing) pages – except for the Opera browser, which is only one we know of capable of scaling pages.

When using smaller monitors and lower resolution, one of the most important disadvantages of HTML will fully apply: browsers cannot scale HTML pages that means a zooming, a proportional changing of the presented size of a page is technically impossible. That means that a page can only be shown in one original format and that any change of the page size impossible. Here, browsers are clearly inferior to any word processing or DTP software. This is (not the only) important disadvantage of HTML, of which most people are not even aware when using internet browser on the daily basis.

I think it is only disadvantage of HTML 5