Like Us Like Us Facebook Subscribe Subscribe us YouTube Whatsapp Share us Whatsapp Query Send your queries

Web Developer extension and the choice of Best Web Browser

Web Developer extension and the choice of Best Web Browser

If you are a web developer then the question is quite common which is the best web browser for web development . In this tech arena every browser want to take the number one tag. In this blog I am going to share my favorite browser and why it became number one .
Mozilla Firefox is my favorite, I accept chrome has taken the market share for being light and fast, internet explorer 10 is also doing well but still I die for firefox. Right now I use Firefox 18 , in speed its par with chrome and IE 10 in some cases faster, but right now we use modern computer that has atleast 2GB of RAM and dual core CPU so you can’t see the speed difference only benchmarks can tell the difference. Firefox uses more memory around 400-700MB but its not a problem. Firefox offers net and clean interface, always welcome new technologies, devoted towards open source and also stable and secure. Its extension arena has everything you need and it makes you special , chrome also supports extension and has decent store where you can download and install extension with no restart feature but firefox interface is awesome as firefox is feature rich compared to chrome. IE is by greedy microsoft the company is not listening to its old customer as the support of IE10 is limited to Windows 8 still now does not supports multi platform so it was omitted from my list.

Firefox and the extension we die for :

If we are a web developer or SEO Expert then Firefox makes you job easy, I am going to share a partial list of my favorite extension.

1. ADBLOCK PLUS

Web Designer has to surf a lot to get new ideas or inspiration but the annoying ads and pop ups make the job hard, adblock plus not only block all these but gives you interface to control it.

2. Colorzilla

If you are a web designer or UI designer then you can’t stop yourselves playing with colors. This is not a color picker tool but has eyedropper and other cool option.

3. Firebug

HTML , HTML5 , CSS , javascript wonder which kind of scripting is using this firebug is the only solution, it give not only to view source of website but with advance option. This is Web Designer no. one app.

4. Webrankstat

This is a SEO tool provides alexa rank, google rank,page index,backlinks and other information while surfing.list is going to updated soon.

HTML5 Audio Tag

HTML5 Audio Tag

HTML 5 natively support audio tag . Now your HTML 5 enable
browser supports .ogg ,.mp3 format. So you can implement audio streaming on your HTML5 based website with a little bit of coding and its fairly simple.
Browser Compatibility :
IE 9, Firefox, Opera, Chrome, and Safari support the <audio> element.

 

HTML5 Audio Tag Coding Structure

<audio controls=”corols”>
<source src=”openplus.ogg” type=”audio/ogg” />
<source src=”openplus.mp3″ type=”audio/mp3″ />
Your browser does not support the audio tag.
</audio>

For more info visit
w3schools.com/html5/tag_audio.asp

HTML FORM tutorial with CSS based Example

HTML FORM tutorial with CSS based Example

FORMS are used to pass data to a server and contain input elements like
text, check box, radio, button, submit, reset, password.

A form is incomplete with out input box . Data sent to server through forms using input elements  and executed on the server.Lets have a example of a form

<form action=”name.php” method=”post”>
<input type=”text” name=”name” />
<input type=”submit” name=”submit” value=”Go”/>
</form>

Output

Explanation:
action- pointed to page where programming codes will be there.
type- we have to define type of input box whether it is text, password,submit or so on..
method- we have to define which method we are using GET or POST , remember POST is secure compare to GET.

Lets have Complete example –
In this example used PHP as Programming language, CSS for making the form look good and html5.

Complete Script –

 <!DOCTYPE html>

<html lang=”en”>
<head>
<title>Form Tutorial</title>
<meta charset=”utf-8″ />
<style type=”text/css”>
.input{
background:#fff;
border: 1px solid #999;
box-shadow:inset 0 0 2px #000000;
color: #222;
}
.input:hover{
background:#f6f6f6;
border: 1px solid #999;
color: #222;
}
</style>
</head><body>
<?php
if(isset($_POST[‘submit’)){
$name=$_POST[‘name’];
echo “Hello “. $name. ” its Working naa”;
}
?>
<form action=”” method=”post”>
<input type=”text” name=”name”  class=”input”/>
<input type=”submit” name=”submit” value=”Go” class=”input”/>
</form>
</body>
</html>

If you have any question then please comment .

Creating Stunning Pure CSS Navigation Menu with Simple Coding

Creating Stunning Pure CSS Navigation Menu with Simple Coding

I am not going to teach you each step as you see the code , you will be able to understand it with out any problem. If you have any problem then please comment I will help you.

Screenshot:

 Pure CSS Navigation Menu with Simple Coding

Coding:

<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Sanjay’ HTML5 World</title>
<meta charset=”utf-8″ />
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
background:#FFD700;
border: 1px solid #f80;
padding:5px 5px 5px 15px;
}
li
{
display:inline;
}
li a:link{
color:#222;
text-decoration:none;
}
li a:active{
color:#222;
text-decoration:none;
}
li a:visited{
color:#222;
text-decoration:none;
}
li a:hover{
color:#f30;
text-decoration:underline;
}
</style>
</head>
<body>
<ul>
<li><a href=”home.htm”>Home</a></li>
<li><a href=”service.htm”>Services</a></li>
<li><a href=”contact.htm”>Contact</a></li>
<li><a href=”about.htm”>About</a></li>
</ul>
</body>
</html>

 

HTML5 Video Tag

HTML5 Video Tag

HTML 5 natively support Video tag , so no more lengthy coding  or dependence on .flv format for streaming Video. Now your HTML 5 enable browser supports .ogv, .ogg , .mp4  format.

Browser Compatibility :
IE 9, Firefox, Opera, Chrome, and Safari support the <video> element.Coding Structure

<video width=”480″ height=”320″ controls=”controls”>
<source src=”intro.mp4″ type=”video/mp4″ />
<source src=”intro.ogv” type=”video/ogv” />

Your browser does not support the video tag.
</video>

Its very simple to implement on your web page.

HTML5 <video> – Methods, Properties, and Events

The table below lists the video methods, properties, and events supported by most browsers:

Methods Properties Events
play() currentSrc play
pause() currentTime pause
load() videoWidth progress
canPlayType videoHeight error
duration timeupdate
ended ended
error abort
paused empty
muted emptied
seeking waiting
volume loadedmetadata
height
width

To Know more  visit W3SCHOOLs

HTML 5 introduction

HTML 5 introduction

According to Wikipedia
HTML5 is a markup language for structuring and presenting content for the World Wide Web, and is a core technology of the Internet originally proposed by Opera Software. It is the fifth revision of the HTML standard (created in 1990 and standardized as HTML4 as of 1997) and, as of July 2012,
is still under development. Its core aims have been to improve the
language with support for the latest multimedia while keeping it easily
readable by humans and consistently understood by computers and devices .Why HTML5?
It is future’s technology, already adopted by Adobe,Google…. . HTML5 enable to write less for web designers , has built in support for audio, video, Drag-and-drop and others uncountable features. It combines with CSS3 to give a stunning web experience that you can’t imagine.

Coding Structure of HTML 5 :

<!DOCTYPE html>
<html lang="en">
<head>
<title>Sanjay' HTML5 World</title>
<meta charset="utf-8" />

</head>
<body>
<h2>Join me on Google+</h2>

</body>
</html>

Do You not think its great for web designers who work harder than a programmer when comes to differentbrowser compatibility.

HTML 5 TEXTAREA TUTORIAL WITH WORKING EXAMPLE

HTML 5 TEXTAREA TUTORIAL WITH WORKING EXAMPLE

If you want to use unlimited number of characters in your form then <textarea> is going to easy your life. According to w3school The <textarea> tag defines a multi-line text input control and hold unlimited number of characters.A simple example :

<textarea  rows=”14″ cols=”30″ ></textarea>

How to use in language like PHP?
Its simple just check out the example below…

<?php
$msg=(isset($_POST[‘msg’]))?trim($_POST[‘msg’]):”;if(isset($_POST[‘submit’])){
echo $msg;
}
?>
<form action=”” method=”post”>
Message<br/>
<textarea name=”msg” rows=”14″ cols=”30″ ></textarea>
<br/>
<input type=”submit” name=”submit” value=”Go”  />

Whats new in HTML 5
autofocus – Specifies that a text area should automatically get focus when the page
loads.
placeholder-Specifies a short hint that describes the expected value of a text area.
required-Specifies that a text area is required/must be filled out.

If you have any suggestion or something to add please comment  so I can implement in my blog.

Do you have any Query / Suggestion