Benefits of HTML5 and CSS 3.0

March 7, 2013 Leave a comment

Most of the web programmer is familiar with hypertext markup language and css. These two language are use full to run layout in browser and easy for search and indexing. But the problem is html is not providing video streaming and rich interface like flash and flex. So HTML 5 has been launched to resolve this problem in html without using any flash or Silverlight component. By using of CSS3 web developer /designer can control web designing process and create attractive user interface.

Most of the web programmer is familiar with hypertext markup language and css. These two language are use full to run layout in browser and easy for search and indexing. But the problem is html is not providing video streaming and rich interface like flash and flex. So HTML 5 has been launched to resolve this problem in html without using any flash or Silverlight component. By using of CSS3 web developer /designer can control web designing process and create attractive user interface.

Below are the benefits of HTML5.

  • Video streaming
    • Newer days in a web application to show rich interface, animation, stream video, play musing are needed to use. So that can be possible via flash, Silverlight flex or any JavaScript plugin. But now with the help of HTML5 it is possible to embed video and audio, high quality drawings, charts and animation and many other rich content without using any plugins and third party programming as the functionality is built into the browser.
  • Cleaner markup / Improved Code
    • Web developer/designer can make html code to more clean by replacing general div tag with schematic html5 element.
    • By HTML5, developer can easily distingue html content as header, footer and menus etc by sing of below specific element.
    • <article>, <footer>, <header>, <nav>, <section>
  • Form Validation
    • HTML5 enables designer to use fancier forms. Even it makes form validation native to HTML, User interface enhancements and reduced need for JavaScript (only needed in browsers that don’t support form types). There will be different type of text inputs, search and different fields for different purpose.
  • Offline cache application
    • This is really great feature of html5 cache mechanism, where developer can specify whether this page would be set as cache or not, if developer will set page in cache then that page would be stored in cache. So as results when visitor open that page and then internet disconnected then also that page content would be loaded after refresh the page.
  • Client side database
    • 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. 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.
  • Provide drag and drop features.
    • Drag and drop is a very common feature. It is when you “grab” an object and drag it to a different location. In HTML5, drag and drop is part of the standard, and any element can be drag gable.
  • Canvas and SVG
    • This is very emphasized feature of HTML 5 to provide rich user interface. Web developer can draw 2d graphic in canvas on the fly. SVG is language for describing 2D graphics in XML. SVG is used for vector based graphics in web. SVG images are scalable, zoom able and can be printed in any of the high quality resolution.
  • Responsive design
    • This very good features by html5 as compare to current market’s demand. In newer day’s visitor is open web site from any of the device, i.e. mobile, notebook or laptop. So that is required to web site should be open in any of the browser by readable content.
  • Locate the User’s Position
    • The HTML5 Geo location API is used to get the geographical position of a user.
    • Since this can compromise user privacy, the position is not available unless the user approves it.

Below are the benefits of CSS 3.0

  • Border radios
    • Developer can set border radios so set any radios border no need to create round corner image.
  • Border Images
    • This feature will allow developers and designers to take their site to the next level. Developer can be as creative as you want and be able to apply it as a border without extra elements. Quite simple code really:
  • Box Shadow
    • CSS3 allows developer and designer to set shadow in web pages without creating any image.
  • Multiple background
    • CSS3 allows developer to set multiple backgrounds in one web page.
  • Embed font
    • This is really good features, where developer can use any of the font in a web page and embed that font so if font not available on client’s machine then automatically loaded from server.
  • Pages load faster:
    • In HTML design css3 will perform many things so minimize the usage of images in UI layout so it will increase the page load performance.

Thanks,
Amit Patel
Enjoy Programming

About these ads

Filed under .NET, CSS, HTML5, Java Script Tagged with , , , , ,

Responsive Web Design for all Devices

January 31, 2013 2 Comments

In current days visitors are accessing web site by multiple devices, so it is necessary to support web site for multiple device with different screen resolution. Let say web site should be accessible by normal desktop, mobile devices, and tabulates. All this have different screens resolution. Web site should be available with supported to all this devices with proper readable layout format.

HTML5 and CSS 3.0 are come up with resolution of this problem, where we can create one common web site and that will be loaded in different browser (Devices) with different format.

Below are the screens which we have opened in different devices with different format

  • Screen for general  desktop

Large screen

  •  Screen for tablets
Tablates Screen

Tablates Screen

 

  • Mobile Screen
Mobile Web site screen

Mobile Web site screen

 

We have created same web site which is loading with different style based on selected device’s screen.

To achieve this solution I have used media query listeners of CSS 3.0.

Actually there is one Viewport metadata tag controls the logical dimensions and scaling of the mobile browser’s (chrome-less) window. Setting the width equal to the device-width works around the problem:


<meta name="viewport" content="width=device-width, initial-scale=1.0">

And also in CSS style we have added media object with all screen resolution with font and width allocation based on specified screens.

 

Below are the styles for this example.

@media screen and (max-width: 478px) &nbsp;&nbsp;&nbsp; {
h1 { font-size: 30px; padding: 1px; }
h2 { font-size: 1xpx; padding: 1px; }
body { font-size: 13px; }
}

@media screen and (max-width: 740px) &nbsp;&nbsp;&nbsp; 
{
.left-col { width: 100%; }
.sidebar { width: 100%; }
}

@media screen and (max-width: 480px) {
}

In above code set different font size and padding based for screen 480px width and more than 740px as well as set sidebar width based on screen.
Other option about responsive design is define two separate css and load css based on screen size selection.

<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href=" media-queries_480.css" />

Now technology is moving ahead and users are increasing the use of mobile device to accessing internet thus mobile device are necessary to support for each webs site hence responsive design is very important and required for each new upcoming site.
Add as Comment your questions or feedbacks.

“Happy Programming”
Amit Patel

Filed under .NET, CSS, HTML5, Java Script, Responsive Design Tagged with , , , ,

Retrieve CheckboxList selected value by JAVASCRIPT

April 12, 2011 1 Comment

This code is help full to retrieve checkboxlist’s (asp.net server side control) selected value in JavaScript.

Below are the Java script function for that, if there are at least one of the value selected then its return true else that will return as false.

function CheckCheckBoxSelected() {

var options = document.getElementById('');

for (i = 0; i < options.cells.length; i++) {
var opt = options.cells[i];

if (opt.childNodes[0].checked) {
return true;
}
}
return false;
}

Here ChkActions is my Check box list ID. We can modify this function as per requirement but this is base concept of how to retrieve check box list controls value in JavaScript.

Thanks,
Amit Patel
“Happy Programming”

Filed under Java Script Tagged with , ,

Future date validation by javascript

February 23, 2011 Leave a comment

Hi Below is the code for future date check validation from java script.
This code will not depend on client machines date so if client change his/her machines date then also not affected.
Because curent date we are loading by server code.

Below are the function for that.

function FeatureDateCheck() {

var c_mon = parseInt('')
var c_dt = parseInt('')
var c_yr = parseInt('')
var strDate = "02-23-2011"; // Add any of the date from any control

var mon = parseInt(strDate.substring(0, 2), 10);
var dt = parseInt(strDate.substring(3, 5), 10);
var yr = parseInt(strDate.substring(6, 10), 10);

var Joindate = new Date(yr, mon-1, dt);

var Currentdate = new Date(c_yr, c_mon, c_dt);

if (Joindate < Currentdate) {
alert("Date should be current or future date");
}

}

Thanks,
Amit Patel

Filed under Java Script

Follow

Get every new post delivered to your Inbox.

Join 214 other followers