ordaso.com

Pure Css Icon Sketcher

noreply@blogger.com (jon) — Fri, 14 Mar 2008 17:21:00 +0000

Here's an useless trick but I thought it'd be interesting to share. I am sure that you have seen online icon drawing applications. Looking at one of those recently I had an idea of how to draw old school pixelated shapes using only css. So I am presenting what might be a world's first pure css drawer :)

Take a look at the Pure Css Icon Sketcher

The Concept

So how to "draw" with nothing but css? There's not much to work with as you can imagine. My idea was to create a 32 x 32 grid made of elements. Each has random id and href attribute. By default links have "transparent" backgrounds. When link is clicked on, :visited pseudo class is applied. I have styled :visited links with dark grey background. So, marked as visited, link is no longer transparent.
That gives us a feeling that we're coloring boxes and - actually drawing.

IE users will not be able to use this tool repeatedly because when page loads, IE treats all anchors as visited.

Create Resizing Thumbnails Using Overflow Property

noreply@blogger.com (jon) — Fri, 14 Mar 2008 17:20:00 +0000

This tutorial is aimed at controlling the size of the thumbnails appearing on your page. Sometimes we don't have enough space to spare to fit in large thumbnails and yet we would like to avoid small and barely recognizable images. Using this trick we limit the default dimensions of the thumb, and show it in full size when user mouse-overs it.

Take a look at the demo | Download zip file

Overview

What we have here is not actual image resizing. It is a resizing of the thumb's visible area on mouse over. How do we do that? Using overflow property!
The overflow property defines the appearance of the content when it overflows the container area. If the container has limited size, for one reason or another, then we use overflow to define what happens. Possible values of overflow property are visible, hidden, scroll and auto. It's the combination of these values that we will use here and make this trick work. Basically, we will hide a part of the thumbnail when in default state, and show it entirely on mouse over.

The Concept

The idea behind this is, to place an image into a certain container. Since we're talking about thumbnails that container would be an tag. We set the size (width and height) of the container to desired values and we set the position property of the container to relative. Image inside has an absolute position. We use negative top and left values to offset the image. Container has overflow set to hidden so only a part of the image that is placed inside the container's actual area will be visible. The rest of it will be hidden. On a:hover we set the container's overflow to visible, and reveal entire image.

The Code

This trick can be used for thumbnail lists or single thumbnails, as shown on the demo page. For markup we use standard tags

Definition of the default state for thumbnails would be something like this:

	ul#thumbs a{

		display:block;

		float:left;

		width:100px;

		height:100px;

		line-height:100px;

		overflow:hidden;

		position:relative;

		z-index:1;		

	}

	ul#thumbs a img{

		float:left;

		position:absolute;

		top:-20px;

		left:-50px;	

	}

tag has defined width and height to whatever fits into our site's design. Also, overflow is set to hidden. We then play with negative top and left values to "crop" the image to a perfect fit. If you want to take this further, you can define cropping area for every single image you have in thumb list and target the area you would like to show.

 	

	ul#thumbs a img{

		float:left;

		position:absolute;

		top:-20px;

		left:-50px;	

	}

	ul#thumbs li#image1 a img{

		top:-28px;

		left:-55px;	

	}	

	ul#thumbs li#image2 a img{

		top:-18px;

		left:-48px;	

	}	

	ul#thumbs li#image3 a img{

		top:-21px;

		left:-30px;	

	}	

	.

	.

	.

Now, when user mouse-overs it we set the overflow to visible:

		ul#thumbs a:hover{

			overflow:visible;

			z-index:1000;

			border:none;		

		}

Note the z-index for both default and hovered container. This is very important because we want to place the hovered above it's siblings. Otherwise it would be placed below and the trick wouldn't be complete.

Soft Edge Technique Soft Edges and Opacity Gradients for Images

noreply@blogger.com (jon) — Fri, 14 Mar 2008 17:19:00 +0000

With this article CSSG continues to provide image manipulation techniques. The trick I am about to demonstrate creates soft edge for content images using lightweight and unobtrusive JavaScript and CSS interventions. With it you can create "cloudy" soft edges or one-side opacity gradients without any image editing software.

Take a look at the Demo | Download Soft Edge

Features

Opacity gradients can be turned on and off for all 4 sides of the image separately. With simple configuration you are able to control number of steps of the gradient, step's width in pixels and, as mentioned, what sides of the image you want to have gradients applied to.

How does this technique work

This is unobtrusive script so it means that no interventions in the html code are necessary, except for class naming to select specific images. If you decide to apply this to all content images then you don't even have to add class names. The script will collect all content images on your page and apply this script to them.
Based on the settings from configuration area in JavaScript file, script locates the images, creates a loop where it puts one image on top of the other. First image has opacity set to minimum value while last added image is not transparent. At the same time, using CSS clip property, images are clipped progressively, first image not being clipped at all, while last image (the one on the top) is the most clipped.

Usage

To use this trick, download the JavaScript file and link to it from your html page.

There is a configuration area in the JS file where you can edit settings and achieve various effects.

// css class of images that you want to apply this script to
// if you want to apply this script to all content images, leave this string blank

var imageClass = "";


// integer defining the soft edge depth
// the larger the number the softer the edges :)

var step = 20;


// define directions wher you want gradient to appear
// set top, right, bottom and left to true or false to turn it on or off
// setting all 4 directions to true will give you soft edge effect
// while setting one of the

var dirTop = false; 
var dirRight = true; 
var dirBottom = false; 
var dirLeft = true; 


// integer defining each step's width in pixels

var stepWidth = 1;

Enjoy! :)

Custom Double Solid Borders for Images

noreply@blogger.com (jon) — Fri, 14 Mar 2008 17:18:00 +0000

We are not going to use border-style:double; As we know these are not easy to control.
Imagine a situation where you want outer border on the image to be 3px thick and green and inner border 1px thick and yellow. How would you achieve this? And further more, how would you achieve this with no additional markup?

The Trick

What we'll do here is use css border property for outer image border and we'll fake the inner border using combination of background and padding properties.

First we add a border property to the image and set the values

img{
 border:2px solid #72a143;
}

If we set the padding to 1px and add a yellow background,

img{
 border:2px solid #72a143;
 padding:1px;
 background:#ffeda5;
}

the image will receive another "border" inside the real one.
That's it! :)

8 Premium One Line Css Tips

noreply@blogger.com (jon) — Fri, 14 Mar 2008 17:16:00 +0000

The best solutions are often the simplest. Here's a list of 8 tips that contain only one css property.

1. Vertical centering with line-height

line-height:24px;

When you have a container with fixed height you can use line-height property to vertically center the content.
Take a look at this demo.

2. Prevent oversized content to break fixed width floated layouts

#main{
 overflow:hidden;
}

When oversized content (i.e. wide image) is placed in fixed width floated container, it may break the layout. To prevent that use this trick. It will hide a part of the content but at least your layout structure will remain intact.
I wrote an article about it a while back.

3. Prevent line breaks in links

a{
 white-space:nowrap;
}

This little trick will prevent line breaks on your links. I recommend using this with long text to avoid having links break into 2 lines.

4. Always show Firefox scrollbar

html{
 overflow:-moz-scrollbars-vertical;
}

Firefox hides vertical scrollbar by default. So, when you browse a site that have different page heights you notice a horizontal shift. This code will always display a scrollbar and prevent shifting.

5. Centering block elements horizontally

margin:0 auto;

For all modern browser this line of css is enough to horizontally center a block level element.

6. Remove vertical textarea scrollbar in IE

textarea{
 overflow:auto;
}

Textareas in IE have vertical scrollbar visible by default. If you want those removed (I know I do) use this line.

7. Force page breaks when printing your document

h2{
 page-break-before:always;
}

With this line of code you can control places where you want your pages to break when printing a document.

8. Remove active link borders

a:active, a:focus{
 outline:none;
}

Originally found here, this will remove dotted outline from focused or active links.

3 Simple Steps in Coding a Rounded Corners Layout

noreply@blogger.com (jon) — Fri, 14 Mar 2008 17:14:00 +0000

What we should aim in coding is simplicity and try to avoid any unnecessary markup. Various rounded corners techniques often include several additional elements that are purely presentational.
When talking about fixed width, rounded corners layout, there's no need for complications.
Let me show you my approach to coding just that, fixed width, rounded corners layout in 3 simple steps.
As a special treat, PSD and XHTML/CSS files included in this brief tutorial :)

Take a look at the demo | Download zip file

Markup

Markup is pretty basic, and as you can see, there are no additional divs for top or bottom corners.

Step 1 - Header

In order to simplify things I often crop entire header as a single background image. The size of the image rarely exceeds 50kb and it also makes additional changes a lot easier to apply.
With this particular layout we'll add something extra to the header cropping. We'll not only crop entire header, but the top corners of the content area as well. That area is not meant to have any content, it's just for presentation. It really doesn't matter if we put it at the bottom of the header background image.

Note: if you use repeating gradient image for body background, like I do in my example, keep the height of the repeating image same or less than header height. That will make your life easier because you will not have adjust the body background in the content area.

Step 2 - Content

Unlike other sections, content area is expandable in height. Of course, we'll use 1px high gif that repeats vertically. We all know that :)

Step 3 - Footer

Similar as with header, we are avoiding additional markup for bottom corners of the content area. So, we'll "close" the content area with footer background image. So footer's background is used for end of the content and beginning of the footer.

That's it, view live example or download files (PSD included, yeah!)

Creating and Styling Resizable Buttons

noreply@blogger.com (jon) — Fri, 14 Mar 2008 17:12:00 +0000

When structuring your markup there are many paths you can choose to reach the same goal. Most of the times it's a matter of preferences which element you wish to apply on a specific spot. I have my own personal preferences. One of them is preferring BUTTON over INPUT type="submit" elements. Why? Well W3C says it "Buttons created with the BUTTON element function just like buttons created with the INPUT element, but they offer richer rendering possibilities".

It's the rendering that I am after. You can easily apply image replacement techniques to buttons and make your form look good. Most interesting feature is that BUTTON element may have content. I will use that possibility in this tutorial.

So, the goal is to create and style button that can handle variable length so there is no need for later interventions. We'll treat button element as a container and add some markup.

Take a look at the demo | Download zip file

HTML

Here it is:

This is a valid code, and it gives us a lot to work with.

Please note, I am using two child elements instead of only one because I couldn't get rid of some paddings that button preserved. If anyone succeeds in styling with one child element only, please let me know :)

Concept

This concept is probably familiar to you from various navigation tab styling techniques. We have one long background image:

This one is 550px wide. I believe that is more than sufficient for buttons :)
So, we apply this image as a background image of a top element (in this case SPAN), place it to top left and add some left padding. Nested element (in this case EM) have the same background image but placed to top right and with right padding. As the content text grows so will the button.

Height of the button is fixed in my example but you can use similar technique and some more markup and place the same background image to all 4 corners.
To make sure that the text is vertically centered I use line-height property.

CSS

button{
 border:none;
 background:none;
 padding:0;
 margin:0;
 width:auto;
 overflow:visible;     
 text-align:center; 
 white-space:nowrap; 
 height:40px;
 line-height:38px;   
 }

Resetting button's default styling.

button span, button em{
 display:block;
 height:40px;
 line-height:38px;   
 margin:0;
 color:#954b05;
 }

Setting child elements. Note that value of height property is different than line-height. That's because I have 2px shadow at the bottom. Line-height vertically centers the text within the button graphic, shadow is excluded.

button span{
 padding-left:20px;
 background:url(bg_button.gif) no-repeat 0 0;
 } 
button em{
 font-style:normal;
 padding-right:20px;
 background:url(bg_button.gif) no-repeat 100% 0;
 }

Setting backgrounds and paddings for both child elements.

As I mentioned earlier, it would be more elegant if I could use BUTTON and SPAN only, but I couldn' t get rid of BUTTON paddings. Is any find a solution that uses only one child element, please let me know.

Character Encoding Problem - Browser Cannot Auto-Detect Arabic Pages

noreply@blogger.com (jon) — Mon, 10 Mar 2008 16:39:00 +0000

Tamer Al-Khouli is facing a strange character encoding problem with Firefox 2 and IE 6.0 browser.

Both the web browsers are unable to detect local language webpages (Arabic in his case) and display junk unrecognizable characters instead.

Since the character set cannot be detected automatically, Tamer has to manually select the correct character encoding each time he visits a webpage written in Arabic. He further writes:

If I followed a link from that page to another Arabic page, I need to repeat the process and so on ! I tried to solve this by going to Advanced-General-languages in Firefox , and set the Arabic language to the top of of preferrable languages list , but this didn't work.

I tried setting the encoding in IE as Arabic ( not "Auto select" ) .. but this also didn't work .

Tamer, most likely the problem is not at your end but with the webpages that you are visiting. The site developers may have failed to include the correct character encoding information in the meta tags of the webpages [check the following line in the HTML source of the sites you visit]

Coming to the solution, since auto-detect is not working for you, try setting the browser to use Unicode ( UTF-8 ) encoding which is a form of universal character encoding and should display most characters.

If even that fails, set the character encoding as Universal in Firefox as the last resort. (see screenshot)

The above fixes may or may not work - the real solution would be to drop an email to the owners of your favorite websites an ask them to specify the character encoding information in their webpages.

Online Keyword Suggestion Tools

noreply@blogger.com (jon) — Mon, 10 Mar 2008 16:38:00 +0000

Pay-for-placement advertising has been called by some the most effective method of direct marketing today. Finding the most obvious keywords for your website pages requires simple logical thinking but to choose high-performing keywords, word combinations and phrases that people search for, you need the help of tools to build a more effective keyword list.

Search engines such as Google, Yahoo or MSN allow advertisers to bid against each other for the placement of ads tied to keywords. An account for your business can be opened for $5 to $50, and bids typically start at 5 cents or 10 cents per click. Paying one penny above another advertiser moves your listing above his. Beyond the account set-up fees, your credit card is charged only for the clicks on your listings. So, the more you pay, the more ad viewers are clicking through to your Web site.

How to Find more keywords relevant to your website? Here we discuss the best online keyword research tools that help your find the best keywords relevant to your blog or website. Try to choose popular and narrowly targeted keywords.

This keyword tools guide is split in two parts. In part 1, we discuss the more popular keyword tools like Wordtracker and Overture while in Part 2, we will mention about lesser known and even unexplored keyword research tools that are also free to use.

1. Overture Inventory Keyword Selector Tool # | #
How many searches can your business get? Enter a keyword to see how many searches have been conducted on that term in the last month.

The Overture keyword suggestion tool displays the most popular keyword combinations for a given keyword or phrase. The suggestions are based on the number of times similar phrases were searched on the Overture network the previous month. The Overture tool is very fast, displays related keywords and also the search statistics for that keyword.

2. Overture View Bids Tool #
To use the Overture Bidding Tool, enter your search keyword and it displays the Advertiser's Max Bid and listing of the ads. (A Max Bid is the highest amount an advertiser is willing to pay for each click.)

Though the OVBT displays what Overture adervtisers are bidding for keywords, it can be used in combination with the Overture Inventory tool to shortlist keywords that can attract higher bids.

3. WordTracker keyword research tool #

Wordtracker is the keyword search tool of choice for professionals worldwide. Wordtracker keyword research reports contains thousands of keywords being used across the major search engines. Using the online Wordtracker interface, you can cherry-pick keywords with high popularity and low competition.

This is how the trial verion of wordtracker works. Enter a keyword or phrase, WordTracker extracts keyword suggestions from 200 related web pages across the internet. Using search data from Dogpile and Metacrawler queries over the last 120 days, Wordtracker displays the search statistics for the top 15 related keyword searches. [Start WordTracker Trial]

If you want to test-drive Wordtracker to discover its true potential of the Wordtracker keyword system, buy a 24 hour pass (1 day account) for $4.20. Wordtracker is a decent resource and well worth paying for to get full access. Wordtracker sends a free weekly Wordtrack Top 500 frequently searched words on the Internet. You can view the top 30 search terms for various metacrawlers (Dogpile, Metacrawler) over the past 48 hours here

4. Google Suggest #
As you type into the Google search box, Google Suggest guesses what you're typing and offers suggestions in real time based on the overall popularity of various searches.

Though Google Search is built for suggesting more refined searches up front, SEO and web authors can use Google Suggest as a keyword suggestion tool to quickly discover related keywords and how many results will be returned for that query on Google. Google Suggest might offer suggestions that you will find novel or intriguing.

Google, someone who really knows how people search, has compiled a comprehensive database of keywords or search phrases that people search for. Google also has indirect access to reports of what people are searching for on other search engines through Google Analytics.

If you are an Adwords advertiser, Google provides you full access to this keyword database.

5. Google AdWords Keyword Tool #

Type in keyword(s) or website URL into the keyword tool to view additional related keywords. The google keywords tool generates a list of the most popular synonyms and related phrases based on searches performed by user on Google search. Keyword results can be limited to countries and languages.

Google AdWords Keyword Tool shows three kinds of related keywords:
More Specific Keywords - Broadly matched keywords are replaced
Shows relevant, more specific alternatives to your general keywords

Similar Keywords - Expanded Broad Matches
Shows related search queries

Similar Keywords - Additional Keywords
Users who searched for your keyword(s) also searched for these terms.

Microsoft Attorneys Knock the Door of Windows AutoPatcher

noreply@blogger.com (jon) — Mon, 10 Mar 2008 16:37:00 +0000

Windows Autopatcher, that made life so simple for Windows XP users, is officially no more.

A little Autopatcher background - Microsoft announced XP SP2 in August 2004 and have have released hundreds of security updates and hotfixes since then.

If you install Windows XP on a new computer, you either have to download numerous updates from Windows Update website or you could install the latest version of AutoPatcher XP which includes each and every fix released by MSFT.

The Autopatcher installer is maintained by Windows enthusiasts - it saved bandwidth for thousand of XP users and the software was even distributed with some popular Computer Magazines.

Today, Microsoft Legal called up the AutoPatcher team asking them to discontinue the project and remove the download links. Microsoft is concerned that malicious software could be redistributed with Microsoft Update via Autopatcher. Microsoft will only allow updates to be downloaded from its own servers.

It's strange that Microsoft legal team acted now though the project has been in existence for the past four years.

Now that AutoPatcher is history, Microsoft should work towards releasing the XP SP3 final package real soon else offline Windows XP users will have no way to keep their computer updated with recent Microsoft patches except slipstreaming with nLite.

Earlier, Microsoft had warned users against downloading the XP SP3 Preview package that surfaced on Google groups.

Outlook 2007 File Attachment Previewers - Great Feature

noreply@blogger.com (jon) — Mon, 10 Mar 2008 16:36:00 +0000

Microsoft Office Outlook 2007 has this very useful feature where you can quickly view file attachments without having to open them in external applications.

For instance, if your colleague sends you a Powerpoint presentation, you can view the slides right inside Outlook 2007. And you don't have to install Microsoft Powerpoint on the computer, not even the free Powerpoint viewer.

Attachment Previewers for most common Office Applications, text documents and image files are pre-installed with Office 2007 while additional file previewers may be downloaded from the Office Online website. And like Outlook 2003, you can always double click the email attachment to open it inside the associated application.

If there are multiple attachments in an email message, say a HTML webpage and jpeg image, they will display in separate preview pane but in the same message window. Outlook file previewers also let you navigate inside documents and presentations that extend to more than one page.

Will save lot of time since you no longer have to wait for bulky Adobe Reader to load before you can view the contents of that 10 Kb PDF attachment.

Related: Create, Edit & Save Office 2007 Documents in Office 2003

Quick Note: These file previewers also allow you to preview files in Windows Explorer on Microsoft Windows Vista. If you are not using Office 2007, you may enjoy similar feature with X1 Desktop Search tool - X1 comes with even more file previewers like Adobe

Cheap International Phone Calls

noreply@blogger.com (jon) — Mon, 10 Mar 2008 16:36:00 +0000

Talk anywhere across the world at local call rates, All you need is a Internet line to get started - Steve writes about making a crystal-clear Internet call using Skype's slick software in PCWorld.com:

With all the talk about Internet calling services like Vonage and AT&T's CallVantage, you might have overlooked my favorite option, Skype, which has been around for a couple of years. Using Skype is much like using instant messaging. (In fact, IM features are built in.) Click a name in your contact list, and your PC rings your contact's phone. Once that person picks up, start blabbing. It's free to call anybody, anywhere, who has Skype installed. You and your friend will need a broadband connection for Skype to work well.

Skype has lots more going for it, too: The program is incredibly easy to set up and use, the sound quality is great, and unlike with Vonage there are no monthly fees. In fact, in the United States, you avoid all taxes and pesky regulatory fees. And for a small charge, you can obtain various landline-like features from Skype. For example, SkypeOut allows you to call any landline or cell phone. You pay only about 2.5 cents a minute for SkypeOut calls. I spent 12 cents using SkypeOut to arrange for a hotel reservation in Buenos Aires. SkypeOut's rates are on a par with those of other VoIP and landline services.

There are some cool things to do with Skype. Another service called Skypeout lets you make calls to old-fashioned phone numbers all around the world. Landlines, mobile phones... it works with almost all of them. SkypeOut is not free but it is pretty cheap, actually. Or link up to five folks in a conference call. (Click Tools, Create a Conference.) To add more, have participants invite people. Did you know that you can use Skype with the same telephone you use for regular telephone calls? For more tips, see Michael Gough's Skype Tips page. Download Skype and start calling for free all over the world.

Determine Microsoft Office 2003 Service Pack version

noreply@blogger.com (jon) — Mon, 10 Mar 2008 16:35:00 +0000

This is a simple reference table to determine which version of Microsoft Office 2003 service pack is installed on your computer.

Microsoft Office 2003 has the following version numbers for the original release and for the service pack releases:

Just locate the executable file in Office 2003 installation directory and verify the version of your Office program. Default location for these files in Office 2003 is : Program files\Microsoft Office\Office11

You do not have to install office 2003 sp2 if you have a later version of the files that are listed in the table.

Google Instant Messenger Screenshot

noreply@blogger.com (jon) — Mon, 10 Mar 2008 16:34:00 +0000

Is Google building a IM ? Speculation is that in addition to leveraging its existing assets and expertise in search technologies, IM would allow Google to complete a communication platform that includes Gmail (its Web mail system) and Orkut (its community networking portal).

The Google IM screenshot mentions the name of the Google IM application as "Google instant messenger jabber alpha 0.068". Reports also indicate that Google's IM platform and client would be based on the open source Jabber protocol.

GMail settings carry a link to download google talk (full size). Outside of speculation, there is a currently little known reality about Google's current IM capabilities. It actually already has an IM tool and it's publically avaialbale — it's not even a Google Beta or a Google Labs project. Google though its acquisition of Blogger last year also acquired a company called Picassa, which also offer an instant messaging service. The IM technology is called Hello and is currently focused on instant messaging between people to share pictures and now to post pictures to a blog. Hello is currently available only for Windows and uses a proprietary protocol.

See a full screen preview of the old screenshot of Google Instant Messenger

Update: Threadwatch points to an article in NYTimes - Where to Spend $4 Billion? Google Has Plenty of Projects in Mind.

Google executives say they plan to unveil on Wednesday a "communications tool" that is potentially a clear step beyond the company's search-related business focus.

While executives would not disclose what the new software tool might be, Google has long been expected to introduce an instant messaging service to compete with services offered by America Online, Yahoo and MSN from Microsoft.

Wikipedia Must Rollback the Rel=NoFollow Change

noreply@blogger.com (jon) — Mon, 10 Mar 2008 16:33:00 +0000

Wikipedia doesn't want to become the playground of spammers so they implemented a major change today that makes their website less interesting to spammers.

Any URL on Wikipedia website that points to a location other than en.wikipedia.org is now stuffed with rel=nofollow tag meaning Wikipedia won't help bring any Google juice for your site.

So whether it's the CNN website or a PayPal phishing site or an illegal Viagra store, Wikipedia will have the same policy for all - we don't trust you so you get the rel=nofollow tag..

Now that's a worrying development. The search engines would believe that Wikipedia is the actual owner of the content and will rank their pages higher in organic listings even when the content was sourced from other "credible" sites like CNN, Engadget or even your mom's blog.

Let's illustrate with an example:

Say you discover a cool feature in the iPod (called Stylus) and blog about it. Tomorrow, the Wikipedia contributors append the details of iPod Stylus (your discovery) to the Wikipedia page on iPod. They do attribute your blog but search engines will never see that attribution (or read your blog via Wikipedia) because of the rel=nofollow tag.

Now that Wikipedia enjoys higher credibility and trust (read PageRank), the search algorithms will rank the Wikipedia iPod page higher than yours (for queries like iPod Stylus) because the search engine bots are not aware that Wikipedia's content is actually based on your blog page.

Result, your site appears after Wikipedia in the "iPod Stylus" search results and you get less or no traffic while Wikipedia gets to enjoy all the fruits of your labor..

Penalizing everyone for the spammy actions of few individuals is just not right. They should rollback this change immediately.

Firefox Search Bar Hacks

noreply@blogger.com (jon) — Mon, 10 Mar 2008 16:32:00 +0000

the Firefox Search Bar in the upper-right corner, sitting next to the address bar, is one of the most frequently used feature inside Firefox.

You can do a lot of tweaking to the Firefox search bar like Add new search engines, delete unused search engines, change the order of search engines, delete autocomplete, change the default search engine or even resize the width of the search bar. We discuss each tip in detail here (also applicable to Flock):

How to add a new search engine to Firefox search bar ?

The Firefox Search bar comes pre-loaded with Google, Yahoo, Amazon, eBay, Answers.com, and Creative Commons search. If you'd like to add more search engines to the search bar, click on a search engine name here or browse the full directory of search engine plug-ins at mycroft. Alternatively, click the down arrow next to the G in the search box, and choose Add Engines.

How do I remove a search engine from Firefox search bar ?

To Uninstall a Firefox search plugin, open the searchplugins folder situated in the Mozilla Firefox 1.5 installation directory (C:\Program Files\Mozilla Firefox\). Sort the entire folder by name so that files selected with any search engine stay together at one place.

Delete both .src and .gif or .png search plugin files for the search engine you want to remove. For example, to remove the eBay search engine, you would delete the files "ebay.src" and "ebay.gif". Restart Firefox and the search engine will be deleted forever. Any custom search engines may be located in the Firefox Profile folder inside Windows Application Data folder.

There's even a Firefox extension for uninstalling Firefox search plugins - just right click on a search plugin and choose Delete.

How do I rearrange the order of search engines in Firefox ?

Search engines are added to Firefox search bar at the bottom. As your list of search engine grows, you may want to sort the order and place the maximum used search engine at the top. Here's how change the order in which the engines are shown in the Firefox search bar.

Type about:config in the Firefox location bar.
Type browser.search.order in the filter.
Now change the values as you wish to reorder.

For example, to make Yahoo as the top engine and Google just next, make the following changes:
browser.search.order.1 = Yahoo
browser.search.order.2 = Google

The other easy option to change the order is download Search Plugin Manager that lets you re-sort the search plugin list in the Mozilla Firefox browser as well as rename, edit, delete or hide search plugins.

Search Engine Ordering is another related search bar plugin that lets you even create new firefox search plugins beside installing, deleting or arranging existing ones. Just Drag-n-Drop to change the order as you want or right click somewhere in the menu to sort them alphabetically.

How do I resize the Firefox Search Bar ?

firefox extension or do it To change the width of the Firefox Search bar, you can either download the resize search boxmanually. Add the following lines of code to userChrome.css file located inside the chrome folder of Firefox profile directory.

/* Make the Firefox Search box flex wider */

#search-container, #searchbar {
width: 400px !important;
}

This is much easier if you get the chromEdit extension, which allows you to edit userChrome.css, userContent.css or user.js, without the hassle of finding your profile.

How do I delete autocomplete entries (history) inside the Search Bar ?

The Firefox search bar and some form fields on web pages have autocomplete dropdowns that appear with a list of previously-entered data. To delete individual entries, Click on the text area, press down to activate autocomplete, highlight the entry you want deleted, and press Shift + Delete.

You can clear the previous searches from the Search Bar. Just right-click it and select "Clear Search History".

You can disable the display of autocomplete entries by adding the following lines to userChrome.css
/* Remove autocomplete dropdown */
#PopupAutoComplete > .autocomplete-tree { display: none !important; }

How do I customize a search engine plugin in 30 seconds ?
Say you have already installed a search plugin that uses www.google.com. You want to change the default behaviour so that the same plugin now searches using www.google.co.in or google.es if you are in Spain.

Open the searchplugins folder located inside the Firefox installation directory. Open the file google.src with a text editor like notepad and make a simple change in the following line
action="http://www.google.com/search"
change this to..
action="http://www.google.co.in/search" or
action="http://www.google.es/search"

Save the file, quite notepad and restart Firefox.

Using the Firefox Search Bar - Keyboard Shortcuts

To search, click in the Search Bar (or press "Ctrl+K") and start typing. Hit "Enter" and your search will be run. You can use "Alt+Enter" to open search results in a new tab.

The Search Bar supports more than one search engine. To see the list of available engines click the icon at the left of the bar, and a list showing the choices will appear. You can also use "Ctrl+Up"/"Ctrl+Down" to cycle between the available choices.

How do I auto-resize the Firefox search bar as I type

The Searchbar Autosizer Firefox Extension makes the searchbar fit its contents. It auto expands the searchbar if needed, and shrinks it if you don't have anything typed in you'd probably want to read.

This is especially useful, when the URL- and Searchbar share the same toolbar, so that both can be as wide as possible - but it works in every toolbar.

How do I create my own search engine plugin for Firefox search bar ?

Technically, a search plug-in is a text file that describes the information to send to a search engine and how to interpret the results. A small icon completes the plug-in so that search plug-ins are easily recognized. If you want to know more, read the documentation.

Even O'Reilly has detailed tutorial on creating a Firefox search plugin from scratch. They create a search plugin to search inside the Whitehouse website. More instructions here.

Though the Google Toolbar for Firefox provides a similar search box, it is not as versatile or customizable as the native Firefox search engine toolbar. If the drop down search engine bar in firefox is not working, try clearing the Firefox searchplugins folder and add your favorite search engines again from mycroft search plugins database.

Adobe Acrobat 7.0 Review

noreply@blogger.com (jon) — Mon, 10 Mar 2008 16:31:00 +0000

With one of its fastest updates to the product family yet, Adobe this week announced the Acrobat 7 family of products, which includes Standard, Professional, and Reader versions.

You can convert your Adobe PDF file into Microsoft Word (.doc, .txt, or .rtf) using Adobe Acrobat 7.0.

Document Reviewing and Markup

This is probably the boldest change for Adobe Acrobat 7.0 and Adobe Reader 7.0, and appears likely to make a major long-term impact on both how PDF is used, and the number of people involved in the document review process.

Acrobat 7.0 (Professional only) now enables you to give Adobe Reader users permission to use all the commenting and review tools that were previously only available to Acrobat Professional and Standard users - basically it was restricted to users who paid for the functionality. This should mean a far more widespread use of PDF-based document review and, over time, Adobe will no doubt hope that it moves more Reader users towards buying a version of Acrobat that allows them to also send PDFs to colleagues and clients for review.

Download patches for Adobe Acrobat 7.0 and Adobe Reader 7.0 - The Adobe Reader 7.0.2 and Adobe Acrobat 7.02 update addresses several known issues in Adobe PDF software. This update provides improved security. It also addresses known issues associated with forms and viewing PDF files using a Weblink plug-in.

Daily Interesting News Roundup

noreply@blogger.com (jon) — Mon, 10 Mar 2008 16:31:00 +0000

Manhattan parking rates rival rents in other places
In Manhattan, where three out of four families don't have a car, the other 25 percent now pay as much for parking as many people in other parts of the U.S. spend on rent. Most Manhattan residents manage without a car, relying on subways, buses and taxis to get around and renting a vehicle when they need to for a weekend getaway. Those who say they must have a car sometimes find bargain parking by heading up to Harlem.

Cure Me with Sex
Woman takes out full page ad in newspaper seeking men to have sex with to cure her cancer. "The ideal candidate would need to have sex with me every two days for at least a year"

Getting Undressed Reveals Your Personality
If you throw your clothes all over the place, you are a friendly, life-of-the-party type. If you remove each piece of clothing and put it away carefully, you are a serious person who likes her life to be very calm. If you take off the shirt, and ten minutes later get around to the pants, you are an extremely self-confident person. If you take off your rings, earrings, necklace, watch, etcetera before anything else, you are a warm and sensitive person.

$70 million penthouse in New York
This penthouse located at Fifth Avenue in New York got to be one of the most extreme apartments out there. The 16 room apartment is located within one of the world's best hotel, the Pierre Hotel, and the top three floors can be yours. 5 bedrooms, 7 bathrooms, 5 fireplaces, a grand terrace and a spectacular 360 New York view can be yours for a measly $70 000 000.

TV in the bedroom halves your sex life
A study by an Italian sexologist has found that couples who have a TV set in their bedroom have sex half as often as those who don't. The study found certain programmes are far more likely to impede passion than others. Violent films will put a stop to sexual relations for half of all couples, while reality shows stem passion for a third of couples.

39 MegaPixels digital camera pricey than a BMW
The medium-format H2D-39 features a 2.2-inch OLED display, on which you can view your 78MB shots. If you're wondering about pricing, the H2D will run you about $31,000. The CF-39MS will make an even bigger dent in your wallet, priced at about $40,000. So, get yourself the world's premier medium-format 39-megapixel DSLR… or buy a Bimmer

client=firefox-a » The Magical Firefox String That Brings Millions for Mozilla Foundation

noreply@blogger.com (jon) — Mon, 10 Mar 2008 16:30:00 +0000

There's huge money in free and open source software as Mozilla proves it yet again.

Mozilla, developers of Firefox browser, generated a revenue of $53 million in the year 2005 mostly from "search engine relationships". [Jason Calacanis' estimates were close enough.]

Now it doesn't take rocket science to assume that most of this money flew in from Google as it is the default search engine in Firefox.

So how does Mozilla generates those millions of dollars from that 200 x 22 Google search box sitting on the top right corner of Firefox ? The answer lies in "client=firefox-a"

Type in any query in that box and hit enter [make sure Google is selected as the default search engine] - Now take a close look at the Google URL that appears in the Firefox address bar - you'll see a substring saying client=firefox-a.

http://www.google.com/search?q=fountain+pens&client=firefox-a

That is sort of a hidden instruction from Mozilla to Google search engine saying the search originated from Firefox search box and if the user clicks on a sponsored link (Google Ads) displayed in search results, give us a commission.

There are millions of Firefox users worldwide searching Google several times a day and that keeps the cash registers at Mozilla ringing.

To clear any confusion - Google doesn't pay Mozilla when somebody downloads a copy of Firefox from Mozilla servers. It's only when users perform a search from Mozilla products and clicks on the Google ad.

Update: Mozilla gets revenue from other browsers as well including Microsoft IE and Opera which is free now. Only the reference string changes in that case.

Firefox - http://www.google.com/search?q=test&client=firefox-a

Opera - http://www.google.com/search?q=test&sourceid=opera

IE 7 - http://www.google.com/search?q=test&sourceid=ie7

Update: If you are curious to know how Firefox passes that parameter to Google, follow these steps:

» Open the Firefox installation folder [generally c:\program files\mozilla firefox]
» Open the google.xml file in notepad [located in searchplugins folder]
» You will see the firefox-a string in the file.

Yahoo, Google Going Different Directions

noreply@blogger.com (jon) — Mon, 10 Mar 2008 16:29:00 +0000

Google Answers is shutting down forever. While Google and Yahoo may be competing in the web search domain, internally these companies have different visions of the future as suggested by some of the recent developments outlined here:

§ Blog Search Engine: Yahoo earlier integrated Blogs Search with Yahoo! News but for some reason, they quickly removed this feature without offering any reasons. On the other hand, Google is heavily promoting their own blog search search engine in the form of Google Blog Alerts and occasionally highlighting Blog Search results in the main organic search results page. Google also displays blog posts in their Finance portal.

§ Q & A Properties: from the Yahoo! Answers page to their main web search page. Google too has an equivalent paid service called Yahoo! is heavily betting on the success of Yahoo! Answers which some analyst believe could prove to be a turning point for Yahoo. They are also pushing search resultsGoogle Answers which is not so popular as the one from Yahoo. And today, the news is out that Google Answers is closing shop after a period of 4+ years.

The existing Qs and As will be available for reference but the site won't accept new Answers to questions by the end of the year.

As search engines keep getting better and better, people are probably not willing to pay for queries as they can find relevant information for free without much effort. Plus there are better places like Google Groups, Internet Forums and Yahoo Answers where your question is exposed to a diversified group of experts and replies are almost guaranteed.

Virtual Keyboards: Start Typing Anywhere Sans Keyboard

noreply@blogger.com (jon) — Mon, 10 Mar 2008 16:28:00 +0000

Hate the cramped key layout of your cellphone ? Looking for a more ergonomic replacement of your desktop keyboard that makes typing as comfortable as laying hand on a flat table surface ? You'll probably love the magical yet affordable Bluetooth Laser Virtual Keyboard shown above. [the screenshots are real]

Virtual Keyboards project a full size QWERTY keyboard with 63 keys on any flat surface - you can then type away accompanied by simulated key click sounds. The device occupies no desk space and you can easily carry it in your side pockets since it's just the size of a matchbox.

If not a replacement of standard 101-key keyboards, these virtual laser keyboards can be a useful add-on for mobile phone or PDA users who frequently type long SMS or email messages using the minuscule keyboards of the handheld device.

And if you don't find them very useful yet, they could be a great gadget to impress your girlfriend atleast. [Works with PC, Mac, Treo and almost all Smartphones]

I-Tech Virtual Laser Keyboard | Think Geek [Available for ~$180]

ASCII Art Made Easy!

noreply@blogger.com (jon) — Mon, 10 Mar 2008 16:27:00 +0000

If you don't want to save the image as an HTML file, you can use a program like Paint Shop Pro (free evaluation available) to take a screenshot of your browser showing the text-image, and save it as a normal image. Don't forget to use the tools to cut the text-image out of the rest of the screenshot.

Magic ASCII Picture has a lot of output modes for you to create your own ASCII Art Photo, such as Custom Text, Random Letters, Binary Numbers, Hex Numbers, MAP Gray Chars and so on. So you can make some web photos with this application. The image that you choose to have converted, along with your own personal message, can be exported into three major formats, HTML, Rich Text Format (for emailing and word) and BMP. The software is backwards compatible with all major web authoring software and graphics programs.

Now it is so easy to convert your pictures to text - Just point your GIF image and this amazing script (http://www.degraeve.com/gif2txt.php) converts the GIF file into ASCII text or colored HTML. You will be surprised to see the conversion. It is so accurate and looks beautiful.

If your image is in other format like jpg or bmp, try a free converter likr Irfanview.

Toogle is a Text version of Googles Image Search. Currently it creates images out of the very term that was used to fetch those images, later we will endeavour to create images out of the search terms entered by users past and present.

Sharing PowerPoint Presentations on the Web: Can Zoho Show Take on Slideshare ?

noreply@blogger.com (jon) — Mon, 10 Mar 2008 16:27:00 +0000

Zoho Show, the online version of Microsoft PowerPoint, recently added a new feature that lets you embed PowerPoint presentations as Flash slideshows in your blog or website.

Slideshare [detailed review] is another popular product in the "PowerPoint to Flash" domain that's specifically designed for embedding slideshow in the blog. Now which one do you choose for your PPT slides ? Let's do a quick comparison between Zoho Show and Slideshare. [all points are out of 5]

Zoho Show lets you create new Powerpoint style presentation from scratch or you can import presentations from your hard drive into Zoho and edit them online. Slideshare can only import presentations and once upload, slides cannot be edited. [Zoho 4, Slideshare 2, Weight 20%]

It took few seconds to upload our 150kb PPT file on Zoho and Slideshare though only Zoho sent a confirmation email once the document was uploaded on their servers. [Zoho 5, Slideshare 5, Weight 10%]

Privacy remains a concern on Slideshare as all presentations are public by default. In Zoho you can set presentations as Private but can still embed them inside blogs. [Zoho 4, Slideshare 2, Weight 10%]

When it comes to converting PPT files to Flash, Slideshare beat Zoho by a large margin. Our first presentation had a logo only on the first slide but Zoho replicated that to all other slides during the conversion. Some of text in our second presentation was cut/invisible inside Zoho though both the files were rendered flawlessly by Slideshare. [Zoho 1, Slideshare 4, Weight 40%]

Zoho Show lets you resize the presentation to fit your blog layout but the Slideshare player has a more polished look-n-feel. Secondly, Slideshare supports tags, user comments and slide transcripts something which we missed in Zoho Show [Zoho 2, Slideshare 4, Weight 20%]

As you would have guessed from the scores, the competition was very close.

The editing features offered by Zoho Show are unmatched and a big time saver if you have to update a presentation that's already streamed by 100 other blogs. In Slideshare, you have no option but to delete the existing presentation and reupload it which breaks the code of existing sites that are linking to the original presentation.

Apart from the editing capabilities, if you just want to share powerpoint slides in Flash format, Slideshare is a much better product than Zoho Show both in ease-of-use and conversion features. Final Scores: Zoho Show 2.5, Slideshare 3.5

Riya Photosearch Private Invitation link

noreply@blogger.com (jon) — Mon, 10 Mar 2008 16:26:00 +0000

I have received an invitiation to try Riya search based on face recognition technology. If you are willing to try Riya, drop a comment here and I'll send you the link.

The Riya image uploader is PC only. Once you upload the pictures, you have to train the software just like you train Microsoft Office for speech recognition.

Here's how a image recognized in Riya looks like (the flickr-like notes appear when you move the mouse over the face)

Applying for a Broadband Internet Connection ? Read This

noreply@blogger.com (jon) — Mon, 10 Mar 2008 16:25:00 +0000

Before you order a braodband connection (ADSL) through the standard phone line, pay very close attention to the Internet connection speed numbers that are promised by the service provider.

The Internet connection speed is measured in Megabits (Mb) or Kilobits (Kb) which is not the same as Megabytes (MB) or Kilobytes (KB) that are typically used to measure file sizes on a hard disk.

1 Mbps connection = 1,000 Kbps ~= 125 KBps [1 Byte = 8 Bits]

Therefore if you ask for a 1Mbps broadband connection, it will take minimum 8 seconds to download a 1 MB file from the internet.

» We say that "minimum 8 seconds" because it's very unlikely that you'll ever receive the full download speed promised by the broadband company [unless it's late in the night when the entire city is sleeping and you are the only person who's connected to the internet]

» Most broadband companies define 1K as 1,000 and not as 1,024 which is the standard in computing. So 1KB is 1,024 Bytes but in broadband jargon, 1Kb is equivalent to 1,000 bits and not 1,024 bits as you would expect.

» Broadband connections are generally asymmetric meaning the download and upload speed will be different [generally the upload speeds are lower than the average download speed]

» The download speed can also vary depending on the quality of your telephone line wiring.

» Finally, if you use the internet even for a few hours daily, try to opt for a plan that has no "download limits" (or unlimited bandwidth) - that helps you browse and download music, videos and other large files with complete peace of mind.

Else those rising bandwidth meter graphs will spoil your browsing mood especially when you are about to exhaust your monthly quota.