#basic web form html5 tutorials

[eduonix]

New Post has been published on www.eduonix.com - Application Cache Part - 2

Application Cache Part - 2

Today we are going to learn practically, how application cache works. For that we are going to use our “Blue Developer Directory” website project. Let’s understand what will be our task for today. We will create a hyperlink of “info” at the footer which when clicked on will open page “info.html”. We are going to cache and store our “homepage.html” and this new “info.html” page for the offline use. We will create some more files for the process which we will see in the course of time.

Let’s complete the task in a step by step manner.

As usual create a new folder on the desktop with name AppCache Practical.

Copy all the “Blue Developer Directory” project content from the previous folder and paste it in the newly created folder, AppCache Practical.

Now, next step is to open the “homepage.html” page from “AppCache Practical” folder with notepad++ editor.

Here we have to do the task of creating a hyperlink info at the footer of “homepage.html”. So, go to the code of footer in “homepage.html” and write the following code there to create a hyperlink.

<footer> Copyright 2014 Blue Developer Directory &nbsp; <a style="color:white;" href="info.html">Info</a> </footer>

Here, a hyperlink info is created with white fore-color.

It is shown in the figure below:

fig 1

In the fig 1 you can see the hyperlink info besides the copyright statement.

If you click on it, you will get the message “The page is not found”. This is because we don’t have “info.html” webpage yet.

Let’s create “info.html” page. We are going to have some information in this page, so its structure is same as “about.html” page.

Hence, copy the code of “about .html” page and close it.

Create a new notepad++ document and save it as “info.html”.

Now paste the copied code in this “info.html” page and save it.

Now delete all the content code i.e. the code written inside

<section>----</section>

tag, since we want to have some other information.

Write the following inside

<section>-----</section>

tag:

<h2>Welcome to Blue Developer Directory Info!</h2> <p>This page is cached</p>

We need to have some more information, so for practice let’s copy some dummy information from internet and paste it below the paragraph “This page is cached”.

After pasting the content in the page make small paragraphs of it by adding

<p>-----</p>

.

Now click on the info hyperlink at the footer of “homepage.html”, the page “info.html” will be shown. Its output is shown below:

fig 2

We finished adding a new page “info.html” in the website. Our website is ready. Now our further task is to cache the homepage.html and info.html pages for the offline use.

Now if we are working locally, our whole website is on our PC itself. Hence it is already available to us offline.

To really know how it works, put all the content of your project folder AppCache Practical on server.

Now access the website from the client PC when internet connection is ON.

You will be able to access the whole website with no problem.

Now, disconnect your internet connection. The website is now inaccessible from the client PC.

But even if the internet connection is turned off, you want the homepage.html and info.html pages to be accessed.

Here, comes the task to cache these pages.

To cache the 2 pages, we need .htaccess file and manifest file as studied in last session.

Creating .htaccess file:

To create a .htaccess file, open a new notepad++ document and write the following line in it:

AddType text/cache-manifest manifest

Now save this file as “.htaccess”. Don’t forget to put period(.) before htaccess. Keep “Save as type:” as simple “Normal text file(*.txt)”.

Put this file also on server.

Next we need manifest file. So let’s create manifest file.

To create manifest file open a new notepad++ document and save it as “developer.manifest”, where .manifest is the extension of developer.manifest file. Keep “Save as type:” as “Normal text file(*.txt)”.

Now, write the following code in it.

CACHE MANIFEST #2014-03-21 CACHE: homepage.html info.html CSS/style.css images/background.png #requires the user to be online. NETWORK: login.php #offline.html will be served in place of all other .html pages/files. FALLBACK: *.html offline.html

The lines starting with hash(#) in the above code are comments.

Here, in the code the files or resources included under CACHE header will be cached and stored for offline use.

In the above code if you would have not included style.css and background.png files, the homepage and info would have appeared without background image and styling.

The file included under NETWORK header will always require internet connection, this file login.php will never be cached.

Next, the header FALLBACK includes a line under it which indicates that for all .html files, if they are not accessible because of the disconnection of internet, a offline.html page will be shown instead of them.

You can update the manifest file by changing the date.

Put this “developer.manifest” file also on server.

Manifest file is ready. Now the next requirement is that, all the files that are to be cached must have the manifest attribute in their html tags.

So, open “homepage.html” file and add the following in its opening html tag.

<html manifest="developer.manifest">

Add the same thing to “info.html” file also.

We finished all important things for caching. But still we need to create an offline.html page as the FALLBACK page.

So, again open a new notepad++ document and save it as offline.html.

Write the following in this page:

<h1>THIS IS YOUR OFFLINE PAGE</h1>

Then again save the content.

This page will look like this:

fig 3

Here, we finished developing all our files. Now ensure that all the files are placed or uploaded on server.

Now with active internet connection try to open the Blue Developer Directory website on the client PC. All the pages are successfully accessed from the server.

To understand that the pages are being cached, go to the browser settings –> Tools –> Developer Tools. A window will open.

When you go to homepage or info webpages, some code is automatically generated in this opened “Developer Tools” window, because these pages are being cached.

But if you go to other webpages of the website, no code will be generated, because these pages are not been specified in manifest for caching.

Remember you will be able to see the code in “Developer Tools” window, only if you are accessing your website from a server.

Now disconnect the internet connection and try to browse the website.

The homepage and info webpages will still be available for you offline.

But if you try to open other webpages by clicking on links like “About Us”, ”Contact Us” and “Browse Developers”, you will get offline.html page shown in fig 3.

Since these pages are not cached, they require internet connection. And we are offline now, so due to lack of internet connection offline.html is shown as a FALLBACK page.

Here, we finished demonstrating an interesting feature of HTML5.

[eduonix]

New Post has been published on www.eduonix.com - WEB STORAGE Part - 2

WEB STORAGE Part - 2

Today we will learn how to use web storage practically. For this we will use our “Blue Developer Directory” website project. Let us get a short idea of the task that we are going to perform. We are going to have a small form at the left side of “homepage.html” page of “Blue Developer Directory” website project. This form will take name and email as an input. We are going to store the name and email-id entered by the user using localStorage(). This stored name and email-id will be retrieved and shown on the webpage. This is just an overview of the task. Now let’s start the task and understand it more deeply in a step by step manner.

So first, create a new folder on the desktop with name webstorage.

Copy all the content from the “Blue Developer Directory” project previous folder and paste it in the newly created webstorage folder.

Now open the “homepage.html” page with notepad++ and then run it. The output will be seen as shown below:

fig 1

Now next step is that we want to create a small “NewsLetter” form at the left side of homepage, below the vertical leftmenu. So write the following code below the un-ordered list of leftmenu, i.e. between

</ul> and </nav>

tags of leftmenu, so that the form appears below leftmenu.

<div>   <br><br>   <h3>NewsLetter</h3>   <p>Please enter youremail address</p>   <form id="news" onsubmit="initStorage()">     Name: <input type="text" id="name" name="name">     Email: <input type="email" id="email" and name="name">     <input type="submit" value="Send">   </form> </div>

This code will draw a small form containing input elements for taking name and email-id as input as shown below.

fig 2

We need to change the black fore-colour to white and provide some spacing between the elements. For this we have to open “style.css“ file and do some styling for the “id“ given to the form i.e. “news”.

We have the aside tag which is generally used to reference the side bars, so we will style the aside tag. So write the following styling code above the “menu” styling or anywhere you like.

aside   color:#fff;

The text in black colour will get white colour. The output is shown below.

fig 3

But we don’t have any spacing between the input elements. To provide spacing between the elements we will again apply styling.

Write the following code below the aside tag styling in “style.css”.

aside input      margin-bottom:10px;

This above written code will provide the bottom margin space of 10 pixels for all the input elements present inside the aside tag. The word “input” indicates all the input types.

The page after this code is shown below:

fig 4

In the above output, 10 pixel bottom margin is left for every input element. If we did not want the space to be left below the email input element, i.e. if we wanted to apply the styling to only a specific input element, we can do the same by specifying the input type.

For an example, if I want the space to be left only below the “text“ input type. I will specify it with the following code.

aside input[type="text"]   margin-bottom:10px;

Output of the code is shown below:

fig 5

Just observe figures 4 and 5 with respect to submit button. You will notice that, there is some space left above submit button in fig 4, but no space is left above submit button in fig 5. This is because in fig 4 styling is applied to all input elements, but in fig 5 styling is applied only to the “text” input element.

If we want the styling to be applied to “email” input field in fig 5 , we should modify the above code as follows:

aside input[type="text"],aside input[type="email"]   margin-bottom:10px;

By adding the “email” input type to the code, the styling will be applied to email input field also and we will get the same output as figure 4.

Note that, you can use any attribute, not just “type”. In this case “NewsLetter” form has a “name” attribute for “text” and “email” input field. You can use “name” attribute also.

Here we finished designing our form. Now we want to have some processing. After entering his/her name and email-id user will click on “Send” button. When he clicks on the button a message “Welcome Back xxx” (xxx is user’s name) should appear at the right top corner of the horizontal menu and “Subscribed email [email protected]” should appear in place of “Please enter your email address”.

All the above described working will be achieved using webstorage, by storing the values of name and email in the localStorage or sessionStorage. We will have to take help of javascript code for the following.

So let’s write the following code in

<script>-----</script>

tag inside the head section.

<script type="text/javascript">   function initStorage()        function saveName()            var name=document.getElementById('name');       localStorage.setItem('name',name.value);       alert(localStorage.getItem('name'));          function saveEmail()            var email=document.getElementById('email');       localStorage.setItem('email',email.value);       alert(localStorage.getItem('email'));          saveName();     saveEmail();    </script>

The above code is a javascript code, hence the type=”text/javascript” is specified in the script tag.

It contains a function initStorage() which indicates the storage initialization. This function is called at the onsubmit event of the NewsLetter form.

This function consists of 2 more functions inside it. saveName() and saveEmail().

saveName() function is used to store the name entered by user in the “text” input element in the localStorage.

The logic used is that, the “id” of the input element is retrieved and stored in a variable by the following statement:

var name=document.getElementById('name');

The “id” gets stored in the variable “name”. Now this key with its value is stored in the localStorage using setItem() method .The statement shows the operation:

localStorage.setItem('name',name.value);

Here, first paramenter of setItem() method, name is the key and name.value will retrieve the value in the particular input element whose “id” is stored in the variable “name”.

Then just to check if the value is stored, an alert message is shown by the following statement.

alert(localStorage.getItem('name'));

Here, getItem() method is used to retrieve the value of the particular key.

The saveEmail() function contains the same logic for storing email-id.

These functions cannot run without calling, so they are called in function initStorage().

After opening the page in a browser, if you enter the name and email-id in the NewsLetter input elements, and click on “Send” button, the initStorage() function will be called and we will see alerts containing name and email-id. Alert for name is shown in the figure below:

fig 6

Similarly, when you click on “OK” button of the alert box, you will get the alert showing email id.

Now after receiving alerts, we now know that values are stored in localStorage successfully. So we can comment the alert message statements.

Now our next task is to display the stored “name” on the horizontal menubar at top right corner.

For that let’s write another function displayName() in the script tag below initStorage() function.

function displayName()   if(localStorage.getItem('name')!=null)        document.write('Welcome Back, ' + localStorage.getItem('name'));   

In this function, we need to check first if the localStorage is empty or not and display the welcome message only if it is not empty/null.

So the condition for null is checked in “if” block.

If localStorage is not null, then the “Welcome Back, xxx” message (xxx indicates the name entered by the user, stored in localStorage) is displayed using the document.write() method of javascript where, “Welcome Back, ” is a string and the localStorage.getItem(‘name’) gets the name stored with the key name in localStorage. These two things are concatenated with “+” (concatenation operator).

But just writing this function won’t do, it should be called where it has to be processed.

We have to display it on the horizontal menu. So call this function below the un-ordered list of horizontal menu, i.e. between

</ul> and </nav>

tags of menu as shown below.

<div id="displayname">   <script>     displayName();   </script> </div>

This function calling is not an html statement, it is a javascript statement, hence written in

<script>---</script>

tag.

And a div tag with “id” as “displayname” is defined to style the welcome message, to give it a proper appearance.

The styling to the “id”, “displayname” is done in “style.css”. Write the following styling code below aside tag styling.

#displayname   color:#fff;   float:right;   font-weight:bold;   font-size:14px;   padding:30px ;

Since displayname is an id it is preceeded by an hash symbol(#).

The welcome statement is applied padding of 30 pixels to all sides with bold font. Font size is 14 pixels and the fore-color is white. It is shifted to right side using float:right.

The output is shown below:

fig 7

As the name entered in the NewsLetter is displayed at the top right corner, we need to display the email-id if entered as the Subscribed Email in the place where the statement “Please enter your email address” is displayed.

For this we will write a javascript function showText() below the function displayName() inside ---- tag and give it a call in the body section.

The code is given below:

function showText()   if(localStorage.getItem('email')==null)      document.write('<p>Please enter your email address</p>');      else      document.write('<p><strong>Subscribed Email : </strong>' + localStorage.getItem('email') + '</p>');   

Here, the logic of showText() function is shown. The purpose of the logic is that if the user had entered the email-id and had clicked on the “Send” button, his email-id will be shown as a Subscribed Email replacing the paragraph Please enter your email address whenever he opens or refreshes the browser, because it has been stored in the localStorage. But if the email has not been saved in localStorage, the Please enter your email address paragraph will only be shown instead of Subscribed Email.

So, if—else conditional statements are used in the above function.

It is checked in if statement whether the localStorage is null. If it is null then the paragraph Please enter your email address is displayed below the NewsLetter heading of Newsletter form.

In the else part, I mean if the localStorage is not null then the text Subscribed Email concatenated with the email-id of user stored in localStorage is displayed.

The output is shown below:

fig 8

You can use sessionStorage also, but it will store things till you close the browser. Once you close the browser, the stored data will be lost. In contradiction if you use localStorage, things will be stored even after you close the browser. Try closing the browser and then again opening it, the data you had stored will be displayed with the page load.

If you have entered name and email in the NewsLetter form and you want to clear it. You will just reload the page. But instead of that we will have some clearing mechanism on the NewsLetter form.

For this we will create a hyperlink named Clear, which will not take us to any other page but will clear the name and email input elements. This hyperlink is to be placed besides Send button of NewLetter form, so write the following code in NewsLetter form below the input tag of submit button “Send”.

<a href="#" onclick="clearAll()">Clear</a>

Here, the “Clear” hyperlink is created using anchor tag. The value of href attribute i.e. “#” will not allow to go to new page.

This link Clear defines an event onclick and calls a function clearAll() when the user clicks on the Clear link.

This function is not inbuilt, we have to write it yet.

Let’s write the logic for function clearAll() inside the

<script>----</script>

tag below showText() function.

function clearAll()   localStorage.clear();   window.location.reload();

When you click on the Clear link, this clearAll() function will be called.

I request you to do one thing to understand this code more precisely. Just comment the statement window.location.reload(); for some time.

Now only one active statement is present in your function i.e. localStorage.clear(); Its purpose is to clear all the data from localStorage. clear() is an inbuilt function used to clear the localStorage or sessionStorage.

We will first see the output after execution of the function clearAll() without window.location.reload(); statement.

fig 9

After observing the output in figure 9 we come to the point that if localStorage.clear(); statement clears all the data from localStorage, then why is it still displayed on the webpage.

This is just because the page is not refreshed.

Now it’s time to un-comment the statement window.location.reload(); This statement will reload the page in the browser thus refreshing it.

Now again repeat the process, I mean enter your name and email-id and click on Send button, this data will be displayed on the webpage. Now click on Clear link, you will see that the data displayed on the webpage has been vanished.

This indicates that the data is cleared from the localStorage and then the page is reloaded to show the updated page.

Here, in this tutorial we have seen the actual processing of webstorage as to how is the data stored, retrieved and used.

[eduonix]

New Post has been published on www.eduonix.com - Application Cache

Application Cache

Today we are going forward to learn a new feature of HTML5 called Application Cache. This feature allows a user to work offline, without an internet connection. So let’s understand some things related to Application Cache.

What is Application Cache?

Application Cache is a new feature introduced by HTML5 in which we can make a web application work offline without an internet connection.

This feature allows you to work on a web application offline because, it allows you to cache the web application and then makes it accessible without an internet connection, since it is stored locally on your computer.

All browsers can use Application Cache except IE. Internet Explorer browser supports application cache from version 10 onwards.

Application Cache is also called as appcache.

Advantages of Application Cache are:

Browse webpages offline – user’s can use the cached application when they are offline.

Pages load faster – cached resources load faster as they are stored locally on the computer.

Less load for Server – the browser will only download updated/changed resources from the server when the use is online.

What is the Manifest file?

Manifest file is required by the Application cache for its work.

Manifest file is a simple text file, which tells the browser what to cache and what never to cache.

Manifest file has 3 sections:

CACHE MANIFEST

NETWORK

FALLBACK

The files included under the first section CACHE MANIFEST header will be cached after they are downloaded for the first time.

The files included under the header NETWORK require a connection to the server and will never be cached.

Example of NETWORK:

NETWORK:             //header NETWORK is compulsory login.asp

Here, the example indicates that “login.asp” file should never be cached.

Another example:

NETWORK: *

Here, when asterisk(*) is specified instead of the resource file, it indicates that no file should be cached.

Files included under the section FALLBACK specifies fallback page if a resource is inaccessible.

Example of FALLBACK:

FALLBACK:              //header FALLBACK is compulsory /html/ /offline.html

Here, the example indicates that if in case connection to the server is not established, an “offline.html” page will be served in place of all files in /html/ catalog.

In the above example, /html/ is the resource file and /offline.html is the fallback.

So this is the manifest file. But we are more interested in the CACHE MANIFEST, since we want to learn how to cache resources to work offline with it.

CACHE MANIFEST:

CACHE MANIFEST is the header in the manifest file, which allows the resources listed under it to be cached by the browser and stored for offline use.

Let’s see an example of CACHE MANIFEST:

CACHE MANIFEST    // the header CACHE MANIFEST is compulsory index.html style.css images/logo.png scripts/myscript.js

Here, the files index.html, style.css, logo.png and myscript.js will be downloaded from the root directory of the website and cached (or stored), when the manifest file is loaded. Then these four files will be available anytime even though the user is offline.

But if the manifest file or a resource specified in it fails to download, the entire cache process fails.

The header CACHE MANIFEST shown in above example is compulsory.

How to reference a webpage to a manifest file?

To allow a webpage to be cached, the page path should be added to the manifest file, so that the page will be cached when the manifest file is loaded.

To reference a webpage to the manifest file, we need to just include manifest attribute to the html tag of the page to be cached.

Example of the attribute is shown below:

<html manifest=”example.appcache”> --- --- </html>

In the above example, the particular html file will be included in the “example.appcache” manifest file.

This attribute manifest should be present in all pages you want to cache.

The recommended file extension for manifest files is “.appcache”.

Serving the manifest:

The manifest file needs to be served with a content type header of text/cache=manifest;

Serving a manifest file is very simple with an .htaccess file.

.htaccess file is a directory-level configuration file supported by several web servers, that allows for decentralized management of web server configuration.

This will serve all files with an extension of “manifest” with the appropriate content-type header.

Cache Updating:

The application that was cached will remain unless,

The user clears it out.

The manifest has been modified.

The cache is updated.

Once you have cached the webpages using application cache, the same pages will be shown to you even if the webpages have been updated by the server later.

In order to get the updated cache, manifest file needs to be changed.

Browsers may have different size limits for cached data (some browsers have a 5MB limit per site).

Here we finished a short introduction of the Application Cache feature of HTML5. We will try it practically in next session.

[eduonix]

New Post has been published on www.eduonix.com - GEOLOCATION

GEOLOCATION

In this tutorial we are going to learn about a new concept, GEOLOCATION. We will have introduction to “Geolocation” and then try it practically. It is used to find out the position of a particular device.

Let’s have an introduction on it.

What is GEOLOCATION?

Geolocation is an HTML5 API that allows us to get the geographical location of a website user.

The user must approve before getting the users position. This usually happens via button and/or browser popup.

It may compromise with the privacy of user.

All of the latest versions of Chrome, Firefox, IE, Safari and Opera can use the geolocation feature of HTML5.

Some uses of GEOLOCATION

Geolocation can be used in transportation websites, travel agencies, etc.

Some of the great uses of geolocation are listed below:

Public transportation websites.

Taxi and other transportation websites.

Calculate shipping costs on an E-commerce site.

Travel agency websites.

Real estate websites.

Movie theater websites can find movies playing nearby.

Online gaming.

Local headlines and weather on their front page.

Job postings can automatically include commute times.

There are many such uses.

How Geolocation Works

Geolocation works by scanning common sources of location information.

These location sources are listed below:

Global Positioning System (GPS) – It gives more accurate information.

Network Signals – IP address, RFID, WiFi and Bluetooth MAC addresses.

GSM/CDMA cell IDs

User Input

Checking for Geolocation Support in Browsers

As we have already stated that all the new version browsers have a support for geolocation, but for those who still use old browsers can check if their browser supports geolocation by just a simple code.

The API offers a very handy function to detect for Geolocation support in browsers.

if(navigator.geolocation)          //do dtuff

You can also check for geolocation using the “Modernizr” script that we used in earlier sessions.

Method of geolocation : getCurrentPosition()

The getCurrentPosition API is the main method using geolocation.

It retrieves the current geographic location of the users device.

The location is expressed as a set of geographic coordinates together with information about heading and speed. It returns the longitude and longitude, accuracy properties etc.

The location information is returned in a position object.

The syntax of the getCurentPosition() method is :

getCurrentPosition(showLocation, ErrorHandler, options);

Parameters of getCurrentPosition() method: getCurrentPosition() method contains 3 parameters of which one is mandatory and the other 2 are optional.

The parameters are as follows:

showLocation: It defines the callback method that retrieves location information. It is the handler method that gets called if position is obtained successfully. It is specified by success callback parameter. This is a mandatory parameter.

ErrorHandler: It defines the callback method that is invoked when an error occurs in processing the asynchronous call. That means, it invokes if any kind of error occurs or any positioning fails. It is an optional parameter.

options: It defines the set of options for retrieving the location information. It is an optional parameter.

We have studied above that getCurrentPosition() method returns some values.

Some of the values are listed below:

coords.latitude The latitude as a decimal number. coords.longitude The longitude as a decimal number. coords.accuracy The accuracy of position. coords.altitude The altitude in meters above the mean sea level. coords.altitudeAccuracy The altitude accuracy of position. coords.heading The heading as degrees clockwise from North. coords.speed The speed in meters per second. timestamp The date/time of the response.

Presenting the location

Once we get the position of the device, the next step is to just present the location information.

This location information can be presented in two ways:

Geodetic

Civic

The geodetic way of describing position refers directly to latitude and longitude.

The civic representation of location data is a more human readable and understandable format.

Each attribute/parameter has both a geodetic representation and a civic representation.

Some of the attributes with their geodetic and civic representations are given below:

Attribute Geodetic Civic Position 59.3, 18.6 Stockholm Elevation 10 meters 4th floor Heading 234 degrees Total city center Speed 5 km/h Walking Orientation 45 degrees North-East

This is a short intro of “GEOLOCATION”. We will try and learn it more practically in next session.

[eduonix]

New Post has been published on www.eduonix.com - SVG in HTML5 - Part 2

SVG in HTML5 - Part 2

In this tutorial we are going to try drawing graphics in XML format. Certainly we are going to use XML format in SVG tags. After drawing graphics we will also try to animate some images. Let’s proceed further step by step.

Create a new folder on desktop with name “SVG”.

Open a new notepad++ document and save it as “index.html” in the newly created folder “SVG” on desktop. While saving select its “Save as type:” as “Hyper Text Markup Language file(*.html,*.htm)”.

Write the following html code in “index.html”.

<!DOCTYPE html> <html> <head> <title>SVG</title> <meta charset="UTF-8"/> </head> <body style="background:#000"> </body> </html>

Here, the above code is simple html code. You can see a line

<meta charset=”UTF-8”/>

This is a “meta” tag. meta tag provides metadata about the HTML document. Metadata is data about data. Metadata will not be displayed on the page, but it will be machine parsable. This tag is mostly used to specify page description, keywords, author of the document, last modified and other metadata. The attribute “charset” of meta tag specifies the character encoding for the HTML document.

Next, body of the page is styled with a black background colour.

The output of the code above is shown below:

fig 1

Now we will draw some figures like a square, circle, line and a polygon on the webpage in

<svg>--------</svg>

tags.

Write the following code in the

<body>---------</body>

tag.

<body style=”background:#000”> <svg height="100">   <rect id="redRect" x="20" y="10" width="100" height="100" fill="red"/> </svg> <svg height="100">   <rect id="redRect2" x="20" y="10" width="100" height="100" fill="red"/> </svg> <svg height="130">   <circle id="circle1" cx="70" cy="70" r="50" fill="blue"/> </svg> <svg height="100">   <line x1="0" y1="0" x2="200" y2="60" style="stroke:red; stroke-width:2;"/> </svg> <svg height="100">   <polygon points="20,10,300,20,170,50" fill="green"/> </svg> </body>

Explanation of the above code:

In the above code, we have drawn various figures in XML format inside — tag.

First a rectangle is drawn with id as redRect, width as 100 pixels with attribute width=”100”, height as 100 pixels with attribute height=”100”. Horizontal distance from left is given as 20 pixels with the attribute x=”20”. In the same way vertical distance from top is given as 10 pixels with the attribute y=”10”. This forms a square having red colour. The red colour is given with attribute fill=”red”.

Second square is also created using the same parameters with id as redRect2, but it is placed below the first square.

Third figure drawn is a circle with id as circle1 and radius as 50 pixels with attribute r=”50”. Horizontal distance from left is given as 70 pixels with the attribute cx=”70”. In the same way vertical distance from top i.e below the second square is given as 70 pixels with the attribute cy=”70”. This forms a circle having blue colour. The blue colour is given with attribute fill=”blue”.

Now after circle fourth figure is a line with (x1,y1) and (x2,y2) co-ordinates as (0,0) (200,60). Since SVG uses geometric formulas to draw any figure, these are the two end points of the line to be drawn. These points are given by attributes x1=”0” y1=”0” x2=”200” and y2=”60”. Next styling is applied to the line. stroke:red; gives red colour to the line and stroke-width:2; brightens/darkens the line with red colour.

Next a polygon with green colour is drawn. Points to draw a polygon are given by points=”20,10,300,20,170,50”. And green colour is given by fill=”green”. Any closed figure is given colour using “fill” attribute.

Let’s see the output of the above code:

fig 2

You can see a height is given to each and every svg tag. This height is compulsory for svg tag, no matter whatever the height. We will see, what will happen if we avoid giving height to svg tag through an example.

You just have to remove the height given to the first figure having id as redRect. Once you do this, the particular svg block of this square drawn will occupy the whole browser window, thus hiding all the other figures.

The output of removing the height=”100” from

<svg height=”100”>

is shown below:

fig 3

We have finished drawing figures in SVG tags. Now let’s try something more. We will try to animate these existing figures. So let’s continue.

Now write the following code in the

<svg>-----</svg>

tag, below the statement

<rect id=”redRect” x=”20” y=”10” height=”100” width=”100” fill=”red”/>

We will make this square move horizontally towards right.

The code is as follows:

<animate attributeName="x" xlink:href="#redRect" begin="0s" dur="5s" from="30" to="500" fill="freeze" />

Here, animate tag is used to apply animation to the figure.

Number of attributes are used in animate tag.

The attribute attributeName=”x”, specifies the particular attribute of rect tag that is to be changed from time to time in animation. Here, we want the square to be moved horizontally towards the right side of the browser, so horizontal distance should increase. Therefore, attrbuteName is given “x” as its value, so that, the value of “x” increases from time to time.

The attribute xlink:href=”#redRect” is given just for the sake of an id.

Next begin=”0s” is the starting time of movement of the square. It is zero seconds, (s = seconds).

The attribute dur=”5s” specifies the duration of the animation. Duration of movement of the square is five seconds.

The attribute from=”30” and to=”500” indicates that the square should start moving from the position of 30 pixels to the position of 500 pixels.

Here, there is another attribute, fill=”freeze”. This makes the square stop till it had reached. I mean, if the square has started moving from 30 pixels and its last position is 500 pixels, now when you apply fill=”freeze” to this square, it will move from 30 pixels till 500 pixels and then stop at 500 pixels position and stay there itself.

The output of fill=”freeze” is shown below:

fig 4

But if you don’t apply fill=”freeze”, your square will move till 500 pixels and come back to its original position.

There is another attribute that can be used instead of fill=”freeze”. This attribute is repeatCount, which allows the square to move to and fro continuously. This can be written as repeatCount=”indefinite”. You can give any number you want to repearCount attribute, the square will move that many times. Or else “indefinite” means repeating indefinite number of times.

We finished animating the first square, now let’s do something different to the second square. Write the following code inside

<svg>------</svg>

for the second square, below the code

<rect id="redRect" x="20" y="10" width="100" height="100" fill="red"/>

The code is given below:

<animate attributeName="width" xlink:href="#redRect2" begin="0s" dur="1s" from="30" to="500" repeatCount="indefinite"/>

You can write all the attributes horizontally also, but it is a good practice to write it one below the other to avoid a crowd of keywords.

The above code for second square is animated same as the first square, only difference is that its width is changed instead of horizontal distance and repeatCount=”indefinite” is used instead of fill=”freeze”.

The output is shown below:

fig 5

Now, next figure is circle to which animation is to be applied. For this we need to write code inside

<svg>------</svg>

for the circle, below the code

<circle id="circle1" cx="70" cy="70" r="50" fill="blue"/>

The code to be written is as follows:

<animate attributeName="cx" xlink:href="#circle1" attributeType="XML" begin="0s" dur="5s" from="30" to="500" fill=”freeze"/>

Here, in the above code we have applied the same animation as the first square to the circle. So the circle will move horizontally along the x-axis. For 5 seconds duration and then stop at 500 pixels.

The output is shown below:

fig 6

You can see in the above figure, the circle has moved from its original position.

Now how if the circle changes its colours automatically while moving? Isn’t it sound interesting. It is simple to do so.

Write the following code below the animate tag, we wrote just now.

<animateColor attributeName="fill" xlink:href="#circle1" begin="0s" dur="5s" values="blue;orange;yellow;green;red;indigo;violet" repeatCount:"indefinite"/>

For one figure you can have any number of animate tags.

Here, the second animate tag is to change the colour of the circle, hence its name is given animateColor. No matter if you keep it animate only.

Next attribute attributeName is given the value “fill”, because fill is the attribute that is responsible for giving colour to the figure.

Next xlink:href=”#circle1″ gives id to the tag.

The colours will change till 5 seconds.

The attribute values is used to specify as to which colours should be given to the circle while moving. In the above code the circle is given blue, orange, yellow, green, red, indigo and violet colours.

repeatCount=”indefinite” allows the colours to change indefinite number of times.

The output is shown below:

fig 7

Here, you can see that the blue coloured has changed to yellow colour. Try it and you will understand more properly.

Thus we finished practicing drawing and animating figures with SVG. Just try and enjoy it. We will be back in next session with another interesting topic.

[eduonix]

New Post has been published on www.eduonix.com - SVG in HTML5

SVG in HTML5

In this tutorial we are going to learn a new topic SVG. Today we will have some introduction on SVG and then try it practically in next tutorial.

What is SVG?

Full form of SVG is “Scalable Vector Graphics”.

SVG is used to define vector-based graphics on a web page.

Graphics in SVG are defined in XML(Extensive Markup Language).

Vector graphics do not lose any quality if zoomed in, stretched, scaled or resized.

Elements can be animated.

SVG is a w3c recommendation.

SVG is mostly used for vector type diagrams like Pie charts, two-dimensional graphs in an X, Y coordinate system etc. However, it can be used for other diagrams also.

Most of the web browsers can display SVG just like they can display PNG, GIF and JPG.

Embeding SVG in HTML5:

You can use SVG in HTML5.

HTML5 allows embeding SVG directly using

<svg>------</svg>

tag.

It has a simple syntax, which is shown below:

<svg xmlns=”http://www.w3.org/2000/svg”>         //content here </svg>

Difference between SVG and Canvas:

SVG is a language for describing 2D graphics in XML while Canvas draws 2d graphics on the fly using javascript.

Each shape in SVG is looked at as an object.

If its attributes are changed, the browser can automatically re-render the shape.

On the other hand, Canvas is pixel by pixel. Once the graphic is drawn, the browser forgets it. If its position is changed, the entire scene needs to be redrawn.

SVG has support for event handlers and Canvas does not have support for event handlers.

SVG is not for graphic – intensive games and applications. Canvas is well suited for intense graphics.

Advantages for Raster – Based Images:

Raster – based images are the standard images that when stretched or resized get distorted.

SVG graphics are created using mathematical formulas that need far less data to be stored in the source file because you don’t have to store the data for each individual pixel like standard images.

Vector images scale much better. Trying to scale a standard image up from its original size can result in distorted (or pixilated) images.

The source file for an SVG image is a text – based file, so it’s both accessible and search engine friendly.

This was a short intro about SVG. We will learn it practically in the next session.

[eduonix]

New Post has been published on www.eduonix.com - HTML5 Multimedia Part - 2

HTML5 Multimedia Part - 2

We are aware of including video and audio using HTML5 by the theory learned in last session. Today we are going to try it practically. Through the theory, we now know that same HTML tags are used for both video and audio. So, in this tutorial we will see how to include video practically. As, including audio is same as including video, it is your homework to try including audio in a webpage yourself. We will once again use our “Blue Developer Directory” website to demonstrate video. In this tutorial we are going to add a video to our “About Us” webpage in “Blue Developer Directory”. So, let’s start our job.

Create a new folder on the desktop and name it as “blue_developer_video”. We are creating a new folder just to keep our previous work untouched.

Now open the previous folder of “Blue Developer Directory” and copy all its content to the new created folder “blue_developer_video”.

Now create another folder “video” in the “blue_developer_video” folder. Get any Mp4 video and copy it in the “video” folder.

We have added a video file named as “ad.mp4” to our “video” folder. Now the contents of your “blue_developer_video” folder are as shown below.

fig 1

Now next step is to open the “about.html” webpage with notepad++.

You have to place a video in this page below the text written.

After opening the “about.html” page, you understand that the text seen on the “About Us” webpage in browser is written in the

<section>------</section>

tags. Just below the text written inside the section tags you need to place the video.

So, write the following code below the text inside the

<section>-------</section>

tags.

<video id="ad" width="420" height="290" controls> <source src="video/ad.mp4" type="video/mp4"> Please update your browser </video>

Explanation of the above code:

The above code is to include a video in your webpage, that uses only HTML5.

You have a video tag to include a video. Attributes of video tag are “id”, “width” and “height”. It is given an id as “ad”, width of 420 pixels and a height of 290 pixels.

You get to see “controls” written in the video tag, we will see it later.

To provide a source file that is a video file, source tag is used along with the video tag.

Attributes of source tag are “src” which provides the source file and “type” which specifies the type of file included as the source.

In our project, our source file is the “ad.mp4” which is in the “video“ folder in our “blue_developer_video” folder itself. And type of the file is “video.mp4”.

In the code the statement “Please update your browser” is written for the browsers that do not support the video/audio i.e. the low version browsers.

The “About Us” webpage after including video, looks as follows:

fig 2

We had talked about discussing “controls” in video tag later. This is the time to discuss it.

Can you see the play button, a fore-back slider, a volume button and a forescreen button below the video?

These buttons come by default with the video only if you include the attribute “controls” in the video tag.

If you don’t include “controls” attribute in video tag, all the buttons specified and shown above will not appear with the video and your video will be seen, but not work.

We finished including video, you see, it is so simple.

Now, I would like to do something more. I will add some buttons that will control the video. But this is something extra function that I want to implement. So, now I will require javascript with HTML5. So let’s add buttons using HTML5 and use javascript for working of the buttons.

Write the following code below the end of video tag in the

<section>--------</section>

tags to include buttons on our webpage.

<div style="width:400px">   <button onclick="playPause()">Play/Pause</button>   <button onclick="makeBig()">Big</button>   <button onclick="makeSmall()">Small</button>   <button onclick="makeNormal()">Normal</button> </div>

Explanation of the above code:

Here, we have defined a div block that contains 4 buttons.

button tag is used to create a button. We have created buttons for “Play/Pause”, “Big”, “Small” and “Normal”.

“onclick” in the button tag is the “event” that calls various functions written in javascript. This event occurs when we click the button. That means, when we click the button, the specified function will be executed.

The “About Us” webpage after including the buttons is shown below.

fig 3

We finished with the designing part. Now it is time to make the buttons work. For this we have to write functions that are called at the “onclick” event. We are going to write these functions in javascript. Let’s write the function in

<script>---------</script>

tags as we know, server side languages are to be written inside script tag in .html pages.

Write the following code below the div block for buttons in “about.html” page.

<script> var myvideo=document.getElementById('ad');          function playPause() {    if(myvideo.paused)    {      myvideo.play();    }    else    {      myvideo.pause();    } }          function makeBig() {    myvideo.width=560; }          function makeSmall() {    myvideo.width=320; }          function makeNormal() {    myvideo.width=420; } </script>

Explanation of the above code:

The above code contains the functions that should be executed when the “onclick” event of the buttons occur.

We will see the functions one by one.

Before the functions we have declared a variable “myvideo” and have assigned the video as an object to it.

This is done by the following line of code:

var myvideo=document.getElementById('ad');

When we use “myvideo” in our coding, we are actually referring to our video “ad.mp4”.

Now the functions.

playPause() function:

playPause() function is to be executed when “Play/Pause” button is clicked.

This function allows the user to play the video or to pause the video in between.

For this we need to know the current status of the video i.e. whether the video is in the play state or in the pause state.

To check this myvideo.paused condition is checked in the “if” statement.

If this is true; I mean if the video is in paused state, we call the inbuilt function play() to resume the video otherwise we call the inbuilt function pause() to pause the video.

makeBig() function:

makeBig() function is to be executed when “Big” button is clicked.

This function allows the user to increase the size of the video.

To increase its size, we just need to increase the width of the video. This is done by the following statement:

myvideo.width=560;

The width of the video will increase upto 560 pixels, making it bigger.

makeSmall() function:

makeSmall() function is to be executed when “Small” button is clicked.

This function allows the user to decrease the size of the video.

To decrease its size, we just need to decrease the width of the video. This is done by the following statement:

myvideo.width=320;

The width of the video will decrease upto 320 pixels, making it smaller.

makeNormal() function:

makeNormal() function is to be executed when “Normal” button is clicked.

This function allows the user to bring the video to its normal size.

To reset its size, we just need to reset the width of the video. This is done by the following statement:

myvideo.width=420;

The width of the video will reset upto 420 pixels, bringing it to its original size.

Our webpage is ready with the video and some functioning buttons that control the video. When you click on the buttons, you will see all the operations happening as stated above. Thus we finished with our video. Now its your turn to try audio in the same way.

[eduonix]

New Post has been published on www.eduonix.com - HTML5 Feature Detection and Drag and Drop - Part 2

HTML5 Feature Detection and Drag and Drop - Part 2

Last time we had an introduction to “Feature Detection” and “Drag and Drop”. Today we are going to try it practically. For “Feature Detection” we had learned about “Modernizr”. Let’s see the steps to download it.

Open your browser and type www.Modernizr.com in the address bar. The following page will open.

fig 1

You will see 2 versions of Modernizr, one “DEVELOPMENT” version and the other “PRODUCTION” version. Click on the “DEVELOPMENT” version. The following page will appear.

fig 2

Here, you will see various features selected by checkboxes. You may deselect whatever you don’t want, but it is good to keep everything ticked because when you generate it a javascript file will be generated which will contain the code to test all those festures.

Now click on “DOWNLOAD”. A javascript file will be downloaded, save it in a folder named “Drag and Drop” on desktop.

When you open the file with “notepad++” you will see a big javascript code. You don’t have to do anything with the file, just close and keep it in the folder.

Now we will start our drag and drop practical and then test if the browser supports drag and drop using Modernizr. We will try to drag an image of HTML5 and drop it in a box created using HTML and CSS code. So follow the steps:

First get any image you like and paste it in our “Drag and Drop” folder on desktop. Name of our image is “html5.jpg”.

Open a new document in “notepad++” and save it with the name “index.html” in “Drag and Drop” folder on desktop.

Your folder will contain these files as shown below.

fig 3

Write the following html code in “index.html” file.

<!DOCTYPE html> <html> <head>   <title>Drag and Drop</title> </head> <body>   <h1>Drag the HTML5 Logo into the box</h1>   <div id="div1"></div>   <br>   <img id="drag1" src="html5.jpg"> </body> </html>

The output of this code is shown below:

fig 4

Here simple HTML tags are used. h1 tag is used for the heading and img tag is used to show the image. Here the image and the .html file are in the same folder, so only the name of image file is used in “src” attribute of img tag.

“drag1” id is given to the image.

A div block is defined above img tag with id “div1”.

Now we need a box at the left side of the image where we want to drag and drop the image. So, to create the box we just have to apply styling to the div block defined above. This styling is done in

<style>-----</style>

tags in head section. The code is shown below.

<head>   <title>Drag and Drop</title>   <style>     #div1     {       width:240px;       height:240px;       padding:10px;       border:1px #aaaaaa solid;       float:left;     }   </style> </head>

• Here, we have applied a width and height of 240 pixels , padding of 10 pixels, a grey coloured solid border of 1 pixel to the div block and it is aligned to left using float:left; • The output is shown below:

fig 5

Now before applying drag and drop, we need to check whether this browser supports “drag and drop” feature. We can do this using Modernizr. For this we need to link the downloaded Modernizr file to “index.html” file. This can be done using script tag in head section. The code is as follows.

<head>   <title>Drag and Drop</title>   <style type="text/css" >     #div1     {       width:240px;       height:240px;       padding:10px;       border:1px #aaaaaa solid;       float:left;     }   </style>   <script type="text/javascript" src="modernizr.custom.66697.js"></script> </head>

We have just added a script tag to the head section below end of style tag.

script tag consists of the attributes “type” and “src”. “type” attribute indicates type of the file and “src” attribute gives the path of the file. Here, “index.html” and “modernizr.custom.66697.js” files are in the same folder, so “src” attribute contains only the name of modernizr file.

In order to check whether this file is linked to “index.html” just write the following code for alert message in “modernizr.custom.66697.js” file.

alert('Test if drag and drop is enabled on our browser.');

After writing this code, reload the index page in the browser, you will get the following output.

fig 6

The message box/ alert box indicates that the Modernizr file has successfully linked to the “index.html” file. When you click “OK”, you will again get your image and box on “index.html” page.

Now after we have checked for linking, remove the code for alert message from the “modernizr.custom.66697.js” file, save and close the file.

Now after we have checked for linking of file, we want to check whether our browser supports “drag and drop” feature. For this we have to write a small javascript code in head section. We know that any server side programming code should be written in

<script>--------</script>

tags in .html file. The code is as follows:

<script>   if(window.FileReader && Modernizr.draganddrop)   {     document.write('Your browser supports drag and drop.');   }   else   {     document.write('Sorry, your browser does not support drag and drop.');   } </script>

This code is written below the script tag used to link the Modernizr file to “index.html”.

Here, the “if“ condition is given as “window.FileReader && Modernizr.draganddrop”. In this Modernizr.draganddrop indicates that we want to check the feature of drag and drop. window.FileReader condition is used for some of the older browsers of internet explorer to be able to tell if drag and drop is enabled or not.

If both the conditions in “if” statement are true, the browser will show the following statement: “Your browser supports drag and drop.” Otherwise, it will show the following statement: “Sorry, your browser does not support drag and drop.”

Now if the browser supports drag and drop feature, write the following code for dragging and dropping the image in the box when the “if” condition is true. First comment/delete the statement

document.write(‘Your browser supports drag and drop.’);

.The code is shown below.

<script>   if(window.FileReader && Modernizr.draganddrop)   {     //document.write('Your browser supports drag and drop.');     function allowdrop(ev)     {       ev.preventDefault();     }            function drag(ev)     {       ev.dataTransfer.setData("Text",ev.target.id);     }            function drop(ev)     {       ev.preventDefault();       var data = ev.dataTransfer.getData("Text");       ev.target.appendChild(document.getElementById(data));     }   }   else   {     document.write('Sorry, your browser does not support drag and drop.');   } </script>

Explanation of the code:

Here, when the “if” condition is true i.e. if the browser supports drag and drop feature, certain functions are written to enable drag and drop operation.

First function, allowdrop(ev) is shown below:

function allowdrop(ev) {   ev.preventDefault(); }

This function contains a statement ev.preventDefault();. By default, no browser allows drag and drop function. To allow drag and drop feature to be enabled on the browser we have to disable its default settings. ev.preventDefault(); function does this work.

Second function is drag(ev). It is shown below:

function drag(ev) {   ev.dataTransfer.setData("Text",ev.target.id); }

The function drag(ev) is to get the data to be dragged from its place.

In the statement ev.dataTransfer.setData(“Text”,ev.target.id); “ev” is the event. “dataTransfer” is a class and “setData” is a method. setData function contains two parameters, first is the type of the data i.e. “Text” and second is the “id” of the dragged element which we get through ev.target.id.

• Now third function is drop(ev). It is shown below. function drop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData(“Text”); ev.target.appendChild(document.getElementById(data)); }

Here, first of all default settings are prevented using

ev.preventDefault();

Next the id of the dragged element is retrieved and stored in the variable “data” using the statement

var data=ev.dataTransfer.getData(“Text”);

Then the dragged element is dropped in the desired container, considering it as the parent element and dragged element as the child element using appendChild() function with the element in which we want to place the dragged element.

This is done using the statement

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

These functions execute only when they are called. Now from where they are called?…. They are called from the body of “index.html” file. The simple steps that we had seen in step 4 above are modified slightly. Let’s see.

Just make the changes in your previous code as shown below:

<body>      <h1>Drag the HTML5 Logo into the box</h1>      <div id="div1" ondrop="drop(event)" ondragover="allowdrop(event)"></div>      <br>      <img id="drag1" src="html5.jpg" draggable="true" ondragstart="drag(event)"> </body>

Here, we can see that some events are added to the div tag and the img tag.

First we will see the events of img tag:

An attribute of img tag “draggable” is made true, so that the image can be allowed to be dragged.

An event is added i.e. ondragstart which calls the drag(event) function. This means as soon as the event of dragging an element starts, it will call “drag(ev)” function explained above and get the “id” of the dragged element.

Next, events of div tag:

div tag defines the box in which the image is to be dragged.

In div tag you get two events “ondrop” and “ondragover”.

“ondrop” event calls “drop(event)” function which will place the dragged element i.e. image as a child element in the parent element i.e. box.

Next “ondragover” event calls “allowdrop(event)” function that prevents the default settings.

We have finished doing everything, now just reload your “index.html” page and try to drag the HTML5 image and drop it in the box next to it. You will see the output as shown.

At this moment your page looks like shown in figure 5.

After dragging and dropping the image in the box next to it, the page will look as shown below.

fig 7

You can reload the page and try the drag and drop as many times you want. Here we have finished with feature detection and drag and drop operation successfully.