As we all know Google has released some pretty nifty things in the past. Today, we’re going to look at one of its most delightful additions for web developers. Google AJAX API.
Google’s AJAX APIs let you implement rich, dynamic web sites entirely in JavaScript and HTML. You can add a map to your site, a dynamic search box, or download feeds with just a few lines of JavaScript. Read the rest of this entry »
BlueEarth is a XHTML / CSS template that utilizes various JavaScript effects using the jQuery framework.
The template is tailored towards a company providing a service such as hosting. The logo is raw text inside of an H1 tag and can be changed. The layout uses a fixed width of 950px, but the design can be adapted to any fixed width size. It was created to be fluid, however, the coda slider doesn’t support a CSS width percentage.
The theme comes with 2 HTML files
The index.html is the screenshot you see above, while examples.html has numerous predefined styles showcased. The predefined styles range from alerts, dialogs, lists, and emphasis blocks.
Other features:
Download BlueEarth 001 Free XHTML / CSS Template
Downloaded 161 times.
Don’t you love it when you’re browsing the internet and all of a sudden you come across the most slick website imaginable… and the one thing that stands out above everything is a kickass favicon?
What’s a favicon you ask? Click the “Faviwhat?” tab below.
You have a snazzy logo and want the icon next to the URL bar to match it. How you ask? Sit back, read, enjoy the ride. Oh, and I’ll throw in a couple snapshots too.
In this example, I’ll be using a quickly created logo for demonstrative purposes.
Open the image in Photoshop and select the crop tool.
Then, type “16px” in both the height and width fields in the top part of the screen. This will allow whatever you select with the crop tool in the next step, to automatically be adjusted and resized to 16×16. The reason why it’s 16×16 is because that is the standard Favicon size most widely accepted by all browsers.
Select the following area, this EXACT area will be your favicon upon accepting the changes.
Note: Make sure that at the top of your screen you have the ‘delete’ radio button clicked, and that after selecting the area you click the ‘Approve’ check mark on the top right part of Photoshop.
Now, export it into a web readable format. This is the important part. All favicon’s use a bit depth of 32 colors. Aka, if your cropped image has 60 colors, it’ll actually REMOVE any of those extra colors creating an undesirable effect. Let’s use a promised result by first clicking “Save for Web and Devices” or ALT+CTR+SHIFT+S for short.
Now, use the following settings and save the file as “favicon.gif”. After you have it saved, rename it to “favicon.ico” and that’s it! You officially created your own favicon using Photoshop from a logo. Not so bad, is it? What do you do with it you ask? Click the “Show it off!” tab above to see and grab the snippets of code that make this shining piece of work display next to the site’s URL.
So, we’ve got the icon, but what do we do with it? We insert it into the header of our HTML page.
First, using your favorite FTP Client (we recommend FileZilla) to upload the favicon to the ROOT of your site. Generally, this is the same place as your index.html is stored.
After the icon has been uploaded, we can now tell the webpage that when loaded, to look for this icon and display it in the browser. To do this, we need a snippet of code.
1 | <link rel="shortcut icon" href="/favicon.ico" /> |
What this does is allows the browser to say “Find this particular file starting at the root of the site, check its bit depth… and if all is well.. set this image to be the shortcut and default URL icon for the site”.
Add the snippet above inside the HEAD tag and your site will now use the Favorite Icon (Favicon).
One answer. Cache.
Most browsers (like FireFox) stores a website’s data, icons, etc in a caching system. When revisiting that site during the current session state it will try to use as many previous resources as possible. This includes CSS, JavaScript.. and as you guessed it.. images. Since your Favicon is indeed an image and your site didn’t have an image about ten minutes ago, it used a blank clear one instead and stored it for later use.
In order to see the updated version go to “Tools -> Clear Private Data” and ONLY check the “Cache” and “Offline Website Data” checkboxes. Then clear it and close FireFox. If it asks you to restore your previous session, start a new one.
Viola!
Enjoy adding that final touch to your already amazing website.
→ Download Source / Examples ←
Source ZIP Includes:
Favicon stands for “Favorites Icon”. It’s the little icon beside your site’s name in the favorites list, before the URL in the address bar, as a bookmarked website on the desktop, in the “Links” bar and on the windows taskbar.
If you don’t have one, this is because you have not specified in the HEAD element of your HTML pages to look for a favicon.
Still scratching at your head?
Here is Google’s favicon.
For the longest time, I’ve always had to search far and wide for a single small snippet of code that allows the following in a text input box:
This technique uses two simple html attributes. ‘onblur’ and ‘onfocus’. This is most commonly associated with a search box and adds that final spice to a website. Here is the code, free of charge.
1 2 3 4 5 6 7 8 | <form method="post" id="searchform" action="/"> <fieldset> <label>Search:</label> <input type="text" onblur="if (this.value == '') {this.value = 'Search...';}" onfocus="if (this.value == 'Search...') {this.value = '';}" value="Search..." name="s" /> </fieldset> </form> |
So what exactly IS onblur and onfocus? Javascript, default browser actions, and some super cool tricks. Let me explain…
The definition of “onblur” is “The onblur event occurs when an object loses focus”. An object is focused when you have it selected. For example, on the right hand of the screen near the top is our search box. If you click INSIDE of that box, your cursor is now placed inside and will have SELECTED that box. Upon SELECTING that box, it will activate the opposite of “onblur” which is “onfocus”. The event that is fired off when clicking or “focusing” in an object on the page is called “onfocus” and when clicking on any other object, which will deselect the currently selected object in favor for another is called “onblur”. Just think of a microscope zooming in and out of a 3-D page.
“I get how and why, but why is there a <fieldset> and <label> in there” you say? It’s for XHTML validation purposes. Always remember to have a Label for a form, and to wrap it in a fieldset if there are multiple forms on a page for maximum compatibility for different browsers and mobile devices.
Recent Comments