Couple of weeks back when I browsing through some website, I found Xrefresh, A software which will refresh the browser as you modify source file. And it will work on both Firefox and Internet Explorer. This software make it possible to do live page editing with your favorite HTML / CSS editor. It also supports mac.

If you have dual monitor, it makes you surprisingly easy to edit the files and see the results in real-time. And it not only useful for the HTML / CSS but also you can work with other programming language like PHP, Ruby, Perl, ASP , Java etc.

Installation

Installation is super easy.

• Install Firebug 1.4 or higher
• Install XRefresh Addon (you don’t need this step if you are going to use XRefresh with IE only).
• Download Windows Monitor and go through installation process. It will install XRefresh traybar application and IE plugin.

Usage

Launch XRefresh and check for it in the traybar.

After start the icon is gray and it means that there are no browsers connected to XRefresh.

Tell XRefresh where are located your files. XRefresh will watch for your modifications.
Tip: You can simply drag&drop interesting folders onto configuration dialog.

Let Firefox or Internet Explorer connect to Xrefresh.

Firefox

XRefresh has its own tab panel in Firebug window. You need to enable Firebug for particular site to enable XRefresh functionality.

Internet Explorer

In Internet Explorer 7 you can find XRefresh icon in the tools bar

The icon reflects the connection status. You may click it to open XRefresh Panel

Mac installation is available here (http://xrefresh.binaryage.com/#osx)

Also it is available on google code http://code.google.com/p/xrefresh/

I recommend you get this software and try it out for yourself and don’t forget to comment on it.

Alternatively you can check this video
Xrefresh – The automated refresh tool for web developers

The use of JavaScript can be listed like this

1. Checking and correcting the form data in the user side
2. Dynamically change the web page without reload it.
3. Create applications like calculator, simple applications and games.
4. Add effects to a web page which will attract more visitors

These are the important use of JavaScript. Some of them are very important, some of them not that much. Here I am showcasing some important JavaScript tools which commonly using in website.

JavaScript form validation

The most important and common functionality of a JavaScript is form validation. Most of the people using different JavaScript libraries such as Jquery, Moo tools, etc etc. As I am a fan of Jquery, I personally use bassistance JavaScript validation. It is simple to use and giving lot of options

Showcase image / video gallery

There are a lot of JavaScript libraries are available for showcasing images and videos even web pages. Here is the very popular JavaScript which used to overlay images / video / web page.

Lighbox

Lightbox is a simple, unobtrusive script used to overlay images on the current page. It’s a snap to setup and works on all modern browsers.

Thickbox

ThickBox is a webpage UI dialog widget written in JavaScript on top of the jQuery library. Its function is to show a single image, multiple images, inline content, iframed content, or content served through AJAX in a hybrid modal.

Greybox

GreyBox can be used to display websites, images and other content in a beautiful way.

shadow box

Shadowbox is an online media viewer application that supports all of the web’s most popular media publishing formats.

Highslide

Highslide JS is an open source image, media and gallery viewer written in JavaScript.

jcarousel

jCarousel is a jQuery plugin for controlling a list of items in horizontal or vertical order. The items, which can be static HTML content or loaded with (or without) AJAX, can be scrolled back and forth (with or without animation).

SWFobject

SWFObject is an easy-to-use and standards-friendly method to embed Flash content, which utilizes one small JavaScript file

Miscellaneous scripts

• Drop down menus
• Tab styles
• Pushup JavaScript

For integrating all these scripts, person requires only knowledge of basic html and JavaScript. If you are using some other tools please share with me through the comment form.

Today I am going to discuss about collapsing and expanding footers. Most of the site doesn’t have collapsing and expanding footer. But It would be nice if you have one like that. Because it is easy for the user. If he wants to see that he can otherwise not. It avoids the unnecessary scroll.

Demo

Source

Here is some code snippet that you can try for your site. It uses Jquery as javascript framework. Download jquery from here. It is very easy to integrate.

First I am creating one HTML file. I showed here between to tag only.

Toggle footer


links are going here

In the main footer div I added a link named toggle button. This is our action link.

Now we need to include jquery in the header.

You can simply include like this inside the of your html

If you have doubt please check different ways to include Jquery?

Now our simple javascript to do the functionality. Just paste this after the inclusion of jquery

I had been using Adobe softwares for web development. These softwares are very professional but very costly. After I switched over to Ubuntu I never touched these software and through out from my PC.

Webserver

For a web developer we usually need a webserver. For PHP developers it is easy to find a webserver without any cost. You can try the LAMP and can install in your local machine. Lamp is the abbreviation of Linux Apache MySQL and PHP / PERL / PYTHON. If you want to install these as a package you can try XAMPP or WAMP. These softwares are completely free and it is available for both windows and Linux machines.

Graphics

Next is your Graphic requirement. It is a truth that I couldn’t find any good alternate for Adobe’s Photoshop. May be I had been using Photoshop for a long time. But you can try GIMP (will work for windows, Linux and MAC OS) or Pixlr (an online free image editor).

IDE (Integrated Development Environment)

Selecting an IDE is very important. There are a lot of softwares available for that. Personally I would suggest NetBeans IDE. Another one is Eclipse. Here is the list of some great IDEs for PHP Developers

1. NetBeans
2. Eclipse
3. Aptana

There is one another simple light weight editor is available , Called Intype. But it works only in Windows. But I like it very much.

FTP Software

Filezilla is one of the Free FTP software. Otherwise you can use FireFTP that can be add on to Firefox. In Ubuntu I am using gFTP.

Guys try these free tools. Give me your comments, follow me on Twitter

Firebug

In firebug, under the net tab, each element will display via category . All, HTML, CSS, JS, XHR, Images, Flash etc. And check the each element. If any resource referring from your HTML page and if it is not available it will show as 404. Install firebug from here

Yslow and PageSpeed is coming inside the firebug. So first you need to install firebug first and then the following tools.

Yslow

Yslow is another great tool from yahoo to optimize your website. In yslow, you can find missed elements through components tab. It will looks like this

Download Yslow

PageSpeed

Page Speed is an open-source Firefox/Firebug Add-on from Google. It helps to optimize the website and making it fast. You can identify 404 elements from show resources tab in pagespeed.

Download page speed

Please share your comments about this. Follow me on Twitter

Things changed in the beginning of 2005. I have joined a new company. Yes! I have fall in love with Firefox.

What makes me love Firefox browser?

• Plugins: Yes. It attracts me a lot. Plugins helps to develop a better a site or giving us some additional capabilities more than a browser like download managers, feeds management etc etc.
• We never get bored while browsing the site. Because we can change the look and feel using firefox themes or firefox personas.
• Safe and support.

In brief it is more safe, customizable and faster.

Microsoft now released their latest Internet Explorer 8. It is hard to the developers to maintain these different versions with in a short period of time. But it is happy to hear that Microsoft trying to follow the web standards!

But how the developers can manage with these versions? Either they can completely ignore the previous versions and go with the newer versions. Because newer version has better support. Otherwise, programmers have to use a lot of filters.

There is some javascripts which advice the users to upgrade their browser. But will the user upgrade their browser? Still lot of people using IE because it is shipped along with Windows operating system. I could not find any other reason for the popularity of IE.

But now people start digging the grave of Internet Explorer 6.

If you are still support the older version of IE? You can use these sources

1. IE fixer. It will help to fix the IE6 related style issues.
2. Push up javascript: Which will advice your visitors to upgrade their browser
3. IETester: Great software which will render the older / latest version of IE.
4. Expression Web SuperPreview for Internet Explorer

You can include jQuery in different ways. 

1.Download it from jQuery site and include it into your webpage

2.Include it from Google server

or

3.Include it from Jquery’s site 

These are the different methods to include jQuery. Each of them have there own advantages and disadvantages.

First one has better control. Because this is your server and if u needs to modify the code, you can. Other method depends on other server, so, it may break the connection if that server is down.

Second method is, including it from Googles server. In that first one supports https connection. Second one supports normal http connection. You can pass the jquery version depends upon your choice. If you want to update you need to include appropriate jquery versions.

Third method is including it directly from jQuery server. And it is linking directly to latest jQuery. So you need not bother about the jQuery updation.

Hope I have covered different methods include jQuery. What do you think? Is there any other method to include jQuery?

If you have any questions or alternate solutions please let me know.

The code:

123
1234
123456789
12345

Download the source

Here I am trying to make simple navigation, which uses the html tag unordered list (ul li). It would be nice if we are using unordered lists for navigation menus. We can easily manage the navigation though DOM and it may help a little bit on SEO (Search Engine Optimisation).

Before creating this navigation, I am expecting that you may have some simple idea about HTML and CSS. 

First, we have to create one simple html like the following on your favorite html or text editor. I am using intype editor for creating the document and I personally like to code it by hand. I am not using any other user interface software for creating the html elements.

So the html code will be like the following

Home
About Us
Contact Us
Site map

 
So, our html is ready!

Next, we need to create the CSS.

Since we are not creating any other pages, I am only covering the styles required for the current page. Before that, we need to add the style sheet path to the document like this inside the head tag.

Now I am creating the style sheet required for the page

I wrote the following code on the style sheet style.css file

body{
margin:0;
padding:0;
font-family:verdana, arial;
font-size:12px;
}
ul.nav{
margin:0;
padding:0;
list-style:none;
}

ul.nav li a{
text-decoration:none;
}

Now the vertical navigation is ready. You can add color for the anchor tag as you wishes like this

ul.nav li a{
text-decoration:none;
color:red;
}

If you want to add some color on the mouse over, you simply need to add the color for the element

ul.nav li a:hover{
color:green;
}

So the mouse over is also ready. You need to add proper padding, margin to the ul li tags, and then it will look nice.

Now I am changing this to horizontal navigation. For that we need to float the li selector. So it will looks like this

ul.nav li{
float:left;
padding-right:15px;
}

 
Padding-right used for the space required after the each menu. So the basic menu is ready.

Download sample file Less than 1 KB.

This is the very basic navigation style that can be creating with XHTML CSS. We can enrich the menu by adding background colors, background images or roll over effects. That all things I will explain another time.

Hope this tutorial will be interesting to you. If you have any doubt, suggestions or questions please post comment.

Google is always coming with innovations that make the people life easy. Hope you have remembered my post in google category. That was about “Language translation ajax api for Indian languages from Google”. Like that couple of weeks back Google has announced Google maps ajax api. If you are a web developer you can simply use the Google Chart API to create charts (dynamically) for your web applications. It was using by Google for their Google Finance, Google Video etc. It looks nice and tones of options.

Different types of charts available with Google chart API

• Line charts
• Bar charts
• Pie charts Updated!
• Venn diagrams
• Scatter plots
• Radar charts
• Maps
• Google-o-meters
• QR codes

How to generate the chart?

We can simply generate the chart by calling the url like this


http://chart.apis.google.com/chart?<parameter 1>&<parameter 2>&<parameter n>

eg: 

http://chart.apis.google.com/chart?

chs=250×100
&chd=t:60,40
&cht=p3
&chl=Hello|World

Where:

http://chart.apis.google.com/chart? is the Chart API’s location.

& separates parameters.

chs=250×100 is the chart’s size in pixels.

chd=t:60,40 is the chart’s data.

cht=p3 is the chart’s type.

chl=Hello|World is the chart’s label.

I am not able to describe all the options. Please have a look at the Google chart API documentation.