Recommended Web Tools Archives

Getting started with ScribeFire Blog Posting Firefox Addon

ScribeFire is a Firefox Addon that let’s you blog right from the Firefox Browser.

Once installed, a little piece of paper with a pencil icon appears in the Firefox status bar. Double-clicking that icon gets ScribeFire started.

If it is the very first time you are using ScribeFire, it will startup in the Account Wizard. It is here that you will have to define the parameters of your blog such as URL, username, password, etc.

Once your credentials have been successfully entered, you can now see various administrative portions of your blog from the ScribeFire interface. You will be able to see all your current Posts, Pages, Categories and other options.

The most important part of ScribeFire is being able to write your blog entry from the ScribeFire editor. The editor contains a pretty standard tooolbar,

plus a similarly common editor interface

So, the $64,000 dollar question is why use a tool like ScribeFire when you could just log into WordPress, etc?

I have found it depends on the type of writing you are undertaking. How often do you flip back and forth between tabs when you are reading and then writing something. Imagine being able to read the material in the top pane of the browser and write in the bottom pane of your browser. All without switching tabs to windows. If you are a “reactive on the go” kind of blogger ScribeFire could be a boon to your blogging. Even for us slow, methodical, research types, ScribeFire makes it easy to blog about the product being review while viewing the product screen.

Remember, turn Firefox into more than a browser, turn it into a tool.

How to install Firefox addons

Firefox has the ability to be extended to perform numerous kinds of functions. These functions range from enhancements to the actual browsing experience to additional tools you can use to perform tasks. Some of these tools include code debugging tools for web developers to SEO tools for internet marketers.

In this post, I will demonstrate how to add plugins, or more correctly, addons.

In your browser address bar, navigate to http://addons.mozilla.org

You will see a page that looks like this:

You will various options for learning about addons. You can search. You can see Mozilla’s recommendations. You can choose to browse a category from the menu:

For this demo, I have searched and found a plugin I am interested in checking out called FoxTab. I found it by browsing the “Tab” category from the menu displayed above. I clicked on the link and landed on that addon’s page. Each addon has its own distinct page that provides various kinds of information for that addon. There is typically a description of the addon functionality along with some screenshots.

In the center of the page is a large green button.

The button reads: Add to Firefox.

Click this button.

A warning will typically popup asking if you really want to install the addon.

If you want proceed with the install, find the Allow button to the far right of the popup message.

Click the Allow button to proceed with the addon install or click the “X” to the right of the Allow button to cancel the install.

The Software Installation message box will appear. You notice that the button on the bottom that shows “Install Now” in my screenshot, will actually say “Install (5)” after it. It counts down from 5, before displaying the “Install Now” button.

Click the Install Button to install. You will see a typical install progress bar within the Software Installation message box. Most installs proceed rather quickly as most addons are small in size.

Once complete you will see a message appear within the Software Installation message box.

After any addon installation, Firefox needs to be restarted. Click the Restart Firefox button.

You will now see the Firefox Restart Dialogue Box.

Click Restart.

Firefox will now shutdown and then restart. It will open back up with the addon installed and will reopen any tabs to the webpage they previously had open. Sometimes, an additional tab will open. Some addons have a “more information” page or a “thank you for downloading page”. Our addon has a thank you page, as seen below.

Depending on the plugin, it will add either a menu item to the Firefox Tools menu or install in the status bar at the bottom of the browser. In our case, this plugin installed on icon within the main toolbar next to the address bar.

After installation, the Firefox Addons Message Box appears.

This box shows all the addons you have installed. It will display a message that an addon has been added. Any new addon will be highlighted in yellow.

This message box can be used to change any options for the addon (if available). It is also used to uninstall the addon if it is no longer needed or wanted.

You are now ready to play with you addon to see if meets your needs!

One last note. If you are using a PC that is shared by multiple users and has multiple logins, an addon will ONLY BE INSTALLED FOR THE PROFILE UNDER WHICH IT IS INSTALLED. If everyone on that PC wants the same plugin, everyone will have to login and install it individually. Firefox stores addon information in an individuals profile and thus is not shared by all users. There are some tricky ways around this, but for the beginner, I would not recommend them.

Have fun with Firefox!

Visit our list of recommended addons or visit our Firefox collections page. See all of this in action with the How to Install Firefox Addons video:

Created New Collection of Firefox Addons on Mozilla.org

In preparation for a series of blog posts on turning Firefox from a browser into a tool, I created a collection of those addons over on Mozzila.org

Take a sneak peek, subscribe to the collection, provide your own recommendations!

If you subscribe you can easily add those addons to Firefox from your addons menu. I will create a post on how to do that!

Firefox is more than a browser it is a tool

Firefox has been my favorite browser for quite some time now. While I do use a few other browsers for specific purposes, Firefox remains my mainstay. The reason is fairly simple: Firefox is not just a browser, it is a tool. With the wide array of add-ons available, Firefox has become indispensable. The add-ons add a richnes and depth to the browsing experience that supersedes that of any other browser out there.

What can I do right from Firefox that I find so helpful?

- post to my blog
- shorten urls
- tweet
- analyze websites for SEO purposes
- bookmark and categorize sites I visit
- analyze the speed of my website
- debug html and css issues
- create basic graphics
- read my news and feeds
- ftp
- manage downloads extremely effectively
- perform a gazillion web development tasks
- measure images
- validate web pages
- determine which fonts a site is using
- plus a myriad of other things

Firefox is my multi-purpose tool for accomplishing tasks from ONE application.

No other browser has yet to come close.

Over the next few weeks I will be writing about my favorite addons. Some are rather simple. Some a little more complex. But all, I am sure, you will find helpful.

Semantic Text Analysis with Clear Forest Gnosis

When choosing keywords it is important to also consider other semantically relatied terms that can be coupled with your chosen keyword.

One way to study you competition’s efforts (or your own) in this manner is to use a tool such as Clear Forest Gnosis.

Clear Forest Gnosis (CFG) examines a web page and categorizes the terms that it finds. It categorizes by city, country, company, industry terms, product, technology, organization, state, region and several others. The intent of CFG is to organize the terms on a page in order to understand its underlying semantic atmosphere.

It is this semantic atmosphere, especially when it consists of what CFG calls
“industry terms”, that is of use to you and me.

This kind of semantic text analysis is part of the next big focus for seo and keyword analysis. It is already happening actually.

CFC can be used for more than semantic analysis. It can be used to enhance any kind of website reading. In particular, it can help dissect news sites in order to see at a glance key terms, people and places.

What do you see when you use Clear Forest Gnosis?

When CFG is applied to an open web page, a side bar is opened within Firefox. Rainbow bands appear listing the categories. Terms appear in tree fashion below each category heading. The parentheses after each term indicates the number of times the term appears on the page. All found terms are highlighted on the page. Clicking on an individual term on the tree highlights only that term and scrolls the page to the first occurence of the term.

Let me use my home page as an example. Below is a screen shot of my home page after I have run Clear Forest Gnosis.

This second screenshot shows a closeup of CFG with the industry terms expanded.

As you look down the list you can see there is a good mix of web tool related terms. It is this kind of mix that you want to try to accomplish for your pages.

While CFG is not perfect in finding all the semantically related terms on a page, it is a great start. As the topic of web page semantic domains begins to grow look for more and more of these kinds of tools.

Test your website loading speed with LORI Firefox Extension

How long does it take your web page to load?

LORI (Life of Request Info) can help you understand how long it takes your pages to load within a Firefox browser.

I do have to qualify the above sentence with “within a Firefox browser”, since each browser renders and handles the code differently. It at least will help you pinpoint any problems within your web page that maybe slowing it down.

LORI installs on the bottom status bar and provides 4 statistics.

From left to right:

• Time to First Byte – this is the time it takes from the initial click to your website to the time it takes the first byte to load
• Time to completion – this is the total time it takes the entire webpage to load from initial click to complete display
• Page Size – the actual page size in kilobytes
• Number of requests made by your web page

Overall the faster your page loads the better. I will write another post sometime about standards in this area. Basically, try to make your web pages load in under 8 seconds and limit the amount of requests it makes. The latter is affected by number of images, etc. on the web page.

Uncover fonts used by websites with FontFinder Firefox Extension

I am always trying to find the font, size and line spacing that makes for the most readable website text. I will come across websites who have a very readable text and will mess around trying to decipher their CSS code. Often it is just a waste of my time.

This problem is solved with the Font Finder Firefox extension.

Highlight any text on a web page.

Select Font Finder from the right click context menu.

Font Finder will display the CSS used to style the text. It is just that simple!

What a time saver!

Below is a screenshot of the display returned by Font Finder:

Split your tab window in Firefox

One of the most irritating tasks is opening two separate browser windows to compare two web pages.

One either has to flip back and forth between windows which is inefficient at best. Or one can resize both windows so they are side by side on your desktop. This latter method becomes cumbersome if you have to minimize one of the windows or you open up another application. Restoring your resized windows takes at least two clicks instead of one.

Now there is a better way: the Split Pannel Firefox extension (yes panel is spelled with two N’s…dont ask…I dont know why)

Open a tab or window within Firefox. Select “Split” from the context menu. The current opened page will now be split. A static panel to the left and a normal tabbable window to the right. Static may not be the right word for you can still browse; the left panel simply cannot have multiple tabs. The left panel does have forward, backward, home and refresh capability. The right panel maintains all Firefox functionality .

All other extensions work soley on the right “normal” panel. They do not work on the split left panel.

This could come in handy with blogging as well. Keep you blog admin screen open to the left and the site(s) you are writing about open in tabs to the left.

Below is a screenshot showing a split window. To the left I have Google open and to the right is Yahoo.

Performancing for Firefox Blog Editor

Tired of logging into your blog website every time you want to make a post?

Doesn’t it suck to flip back and forth between the site your writing about and your blog editor?

With Performancing for Firefox (soon to be ScribeFire) you can have a built-in blog editor directly into your Firefox web browser.

Here is a screenshot. It is easier to show you then to describe it with words.

The top half of my browser window displays the ScribeFire website.  I have PFF open and it is displayed in the bottom half of the screen. You can see that I have begun writing this post.

Setting up PFF for you blog is easy.  Settings included the type of blog (WordPress, MT, etc.), the URL for your blog’s API and your username and password.  Once setup, PFF will display all available categories from your blog as well as a history of your prior posts.  The editor window is similar to most blogging platforms. You have the choice of either WYSIWYG or source code mode. All the typical formatting buttons are included as well.

Publishing to you blog occurs at the push of a button. You can set publishing options to either publish live or publish as draft.

It really is as simple as it sounds.

Why use PFF?

First, is efficiency. Because of the nature of my topic, I am always looking at a browser window when I write. I either have to flip back and forth between a website and my blog admin screen or arrange my text editor in such a way so that I can see browser window alongside it. With PFF, I can easily view both the browser and the editor.

Second, easier to write spur of the moment posts. A lot of times I put off writing something off the cuff because I don’t want to login to my site. Open PFF with a click and you can be writing the very next second. Even if you are not comfortable posting live from PFF you can always post to draft and login later to do more editing.

The Future of PFF

While PFF is supposed to become ScribeFire, I do have to wonder what will eventually happen. Performancing was recently bought by SplashMedia and that purchase only includes the assets of the Performancing website and community as well as Performancing Metrics. I do hope that PFF (ScribeFire) continues to have a lifeline.

Free Download Manager for Firefox

I’ve been recently frustrated by the lack of a good download manager for Firefox.  The download manager within Firefox is fine for single file downloads, though it has no resume or pause capability nor ability to capture multiple downloads at once. The download manager I currently use works only with IE and not Firefox (which is a separate issue).  So I went searching through the catalog of Firefox Add-ons and discovered DownThemAll!

DownThemAll! will find every link on a webpage and attempt to download the file that is associated with each link.  While it grabs links to HTML, ASP, and PHP pages, I find its main use is for downloading PDFs, MP3s and other large files (including executables).

I can grab the files I want in one of two ways.  DownThemAll! will find all possible files to be downloaded and I can select from the list which files I want.  I can also set up filters that will only find the files I am interested in.  For example, if I only want to download PDF and MP3 files off a website, I can set up a filter to do so.  The filters can be created very simply by telling DTA what file extensions to look for. Advanced users can setup regular expressions to create a filter. 

The other way I can download files is with DTA OneClick.   With  one click, DTA  recalls the last setting it used and will try to download the files on the current page with those settings. This is useful for tasks which require lots of downloading off of multiple pages/sites. 

One of the great things about a download manager is the ability to pause and resume downloads. I can pause a download, exit from Firefox, even shutdown my machine, and return later to the DTA Manager and resume the download.  This is especially helpful with very large files. There are times when I need the bandwidth to perform a certain task. I can pause the downloads, do the task, then pick up the downloads where they left off.

DTA has definitely made the “downloading” portion of my life much easier.

The screenshot below shows the file selection screen. I have my PDF filter on to capture only PDF files.

This screenshot demonstrates the download screen. It shows what files are downloading, how much of that file has been downloaded, estimated time left in the download and shows all files in queue.

Easy Competition Research with SEO for Firefox

One of the first tasks for search engine optimization is understanding the nature of the competition. The SEO for Firefox extension offered by SEObook offers an easy way to analyze competing websites. It is, in several ways, a more user friendly version of Golexa.

The cool thing about this extension is the way it adds its results directly to the webpage of Google and Yahoo results. Here’s how it works:

1. Once installed, a little SEO icon appears in the lower right status bar of Firefox. It should be gray at this point.
2. Click on the icon and it should turn to a color version. SEO for Firefox is now on. Note per SEOBook: Only use this extension when doing market research. Having it on during general surfing will slow down your surfing plus unnecessarily ping a number of websites.
3. Go to Google or Yahoo.
4. Conduct a search for a keyword phrase. Choose phrases you have identified in previous keyword analysis. Using SEO for Firefox helps address the competitiveness of those keyword phrases.
5. Once the results of the search have been returned you will notice something different. Below the listing of each result is a line of various names and numbers. The tool is going out and querying various websites to assess the strength of each listing in a variety of categories.
6. What SEO for Firefox assesses:
   • PageRank – what is the page’s Google Page Rank.
   • Age – how old is the domain name. Older domain names tend to rank better.
   • Links – how many backlinks to main domain of this site. Greater backlinks means more competitive.
   • edu links – how many links from .edu sites point to the main domain. It is to a sites advangtage to have .edu links.
   • edu page links – similar to above, but instead of the main domain, it assess how many .edu sites point to this specific page.
   • gov links – links from .gov sites.
   • page links – how many links to this specific page.
   • de.icio.us – how many people have added this site to their de.icio.us bookmarks.
   • technorati – how many links from blogs
   • alexa – rank based on website traffic
   • cached – how many pages are indexed by google.
   • dmoz – the total number of pages listed in DMOZ
   • bloglines – how many people are subscribed to the site via Bloglines.
   • dir.yahoo.com – whether the site is in the yahoo directory.
   • whois – easy link to view whois data

All of this data can be used to assess the general competiveness of keyword phrases.

Other items I would like to see included/excluded:

• Instead of Google PageRank, integrate with the new PageStrength tool from SEOmoz. No one really knows what goes into PageRank. However, SEOmoz provides the formula behind PageStrength.
• The number of allinanchor keyword phrases that actually point to this page on this site.
• Some form of exporting data. A little export button by each link. Ideally, export to a CSV file that could be included into a master spreadsheet.
• Data from other social bookmarking sites. Maybe an aggregate from several. Others to include: Digg, StumbleUpon.

Web Developers Need the Firefox Web Developer Extension

At first I was underwhelmed. What is all the buzz about the Web Developer Firefox Extension? I installed it, looked at it with a look of sheer “So What?” and did something else.

I returned to it several days later. I opened my site in the browser and clicked the “display div order” function. There, displayed in my browser window, was my site with the div tags displayed around the content. If only I had this when I developed the site! What a great debugging tool! What a help this would be to figuring out various CSS code! So, here I am, humbling recommending the Web Developer Extension.

For beginners, the tools available in this extension will help make web development a little bit easier. The tool installs as an additional toolbar within Firefox. All functionality is accessible via a series of dropdowns. Here is a list of the main menus and functionality:

• Disable
• Cache
• Java
• Javascript
• meta redirects
• minimum font size
• page colors
• popup blocker
• referrers
• Cookies
• Disable
• clear session cookie
• delete domain cookies
• delete path cookies
• view cookie information
• add cookie
• CSS
• Disable by type
• disply by media type
• view css
• view style information
• edit css
• use border box model
• Forms
• display form details
• show passwords
• view form information
• convert form methods
• convert select elements to text inputs
• enable auto complete
• enable form fields
• clear radio buttons
• make form fields writable
• populate form fields
• remove maximum lengths
• Images
• disable
• display alt attributes
• display image dimensions
• display image file sizes
• display image paths
• find broken images
• outline images
• view image information
• hide background images
• hide images
• make images full size
• make images invisible
• replace images with alt attributes
• Information
• display access keys
• display anchor
• display block size
• display div order
• display element information
• display id and class details
• display link details
• display object information
• display stack levels
• display tab index
• display table depth
• display table information
• display title attributes
• display topographic information
• view anchor information
• view color information
• view document outline
• view document size
• view javascript
• view link information
• view meta tag information
• view page information
• view response headers
• Miscellaneous
• Clear private data
• display line guides
• display ruler
• show comments
• show hidden elements
• show window chrome
• edit html
• linearize page
• make frames resizable
• small screen rendering
• visited links
• Outline
• outline frames
• outline headings
• outline table cells
• outline tables
• outline block level elements
• outline deprecated elements
• outline positioned elements
• outline external links
• outline links without title attributes
• outline current element
• outline custom elements
• show element names when outlining
• Resize
• display window size
• display window size in title
• resize window
• 800×600
• zoom
• Tools
• validate css
• validate feed
• validate html
• validate links
• validate section 508
• validate wai
• view speed report
• dom inspector
• java console
• javascript console
• validate local css
• validate local html
• View source
• view source
• view generated source
• options
• persist styles
• reset page
• option
• help
• about

While some of this functionality is already available from the browser itself (like view source), a great deal of it is not. The Web Developer Extension should belong in every beginning web developers toolkit.

[tags]firefox, web_+developer[/tags]

Screen Captures in Firefox with Snapper

Pressing the PrtScn button on a keyboard captures the whole screen via Windows. It is easy and convienent. But capturing the whole screen is less than ideal especially in terms of clarity and resolutin. A lot of times it is handy to capture only a portion of the screen. There are several tools which do this, but they are not free. The Snapper extension for Firefox is free and does an excellent job of doing screen captures.

Of course, one needs to be using Firefox. If you are not, I highly recommend you at least try it out.

After installing the extension, a little red fish will appear in the lower right status bar. (If the fish doesn’t appear, restart the browser after installation.)

Using Snapper:

1. Click on the fish. The mouth opens. Snapper is ready to snap!
2. Using you mouse, click and drag a red box around the piece of the screen you would like to capture.
3. Release the mouse button.
4. A Save Box appears. Snapper saves files in PNG format.
5. Save.

Snapper can be set to automatically save images in a specified directory.

There is one major con to using Snapper. It can only capture what resides within the Firefox browsing window. Thus, no desktop captures. You will need a more robust tool to accomplish that. However, if your main screen capture needs are off the Net, then Snapper will prove to be a handy tool.

[tags]firefox, snapper[/tags]

MeasureIt Firefox Addon measures pixel length of page objects

Ever try to figure out what size image will fit inside an empty box?

Or wonder how large photographs/clipart/icons were on stock image sites?

The MeasureIt Firefox extension will help with those tasks and any other task where it is required to measure the length and height of a page object.

Directions for use:

1. click the MeasureIt button MeasureIt icon in the status bar or toolbar to turn it on/off. It is the little icon that looks like a small ruler.

2. Once clicked it turns a shade of orange. Plus your screen with dim/grey/become transparent.

3. click and drag out a ruler box

4. click and hold to move the ruler box

5. CTRL + Arrow Keys to nudge ruler by 1 pixel
6. CTRL + SHIFT + Arrow Keys to nudge ruler by 5 pixels
7. click the “X” to close that ruler or click outside of it to begin drawing another ruler
8. ESC key to turn off MeasureIt (or click icon in toolbar again)

This little tool enables designers to eliminate guesswork and make it easier to discover image size. No need to save an image to the hard drive and open it up in an image program. Just measure it right on the screen!

HTML Validation Extensions for Firefox

Maintaining web standards can become a chore. However, a couple of Firefox extensions make life a little easier when trying to validate the HTML of a website.

First is HTML Validator. This extension is based on HTML Tidy. I have read some articles that suggest HTML Tidy does not always interpret the rules of the W3C correctly. While, it may not be perfect, HTML Tidy and this little extension do help.

When installed, HTML Validator puts a small icon in the status bar on the lower right side. Navigate to a web page. Once it is loaded, the icon will display a green check mark (meaning there are no errors and no warnings within the HTML on that page), an exclamation point within a yellow triangle (there are warnings on this page), or a red circle with a white “X” (there are errors on this page).

Double clicking on the icon will open up a window containing the source code for the web page. The errors and warning will be highlighted.

Right clicking the icon pops up the settings menu as well as the “Cleanup” function. Cleanup will run HTML TIDY and produce clean code (of course if the web site has dynamic content, cutting and pasting the new code over the old code won’t work).

All in all its at least a handy warning signal when self-navigating one’s own website.

The second extension is Total Validator. Total Validator is a web service that provides HTML Validation, Acessibillity Standards, Broken Link Checker, Spellcheck and a browser screenshot service. I am going to write a separate post on Total Validator later, but suffice it to say that I have been looking for a site like this for a long time (excellent validation services at a LOW price). While the plugin only checks one page at a time it is still a handy tool. (The website itself can look at up to 20 pages at a time and a desktop version of the tool is available that will scan complete websites. The desktop tool is reasonably priced.)

Anyway, the extension works similarly to HTML Validator in that it places a small icon in the status bar. Right clicking the icon pops up the the setup menu. Left clicking runs Total Validator on the page being viewed. A new tab is opened up and the results are displayed. Awesome stuff. Where can you find a service that will provide all FIVE of those functions for free? Total indeed!

Using both of these firefox extensions will help save time and energy in keeping a website clean and up to standards.

[tags]firefox, validation[/tags]

Colorful Tabs – Firefox Extension

Colorful tabs adds a little color to Firefox tabs. Once installed, and Firefox is restarted, each tab will have its own color. This helps in easy identification of each tab. It simply just helps the eye differentiate each tab. For some having the extra visual clue helps! The favicon (if a site has one) is still maintained on the tab as well.

Adding Extensions to Firefox: One at a Time

When adding extensions to Firefox, simply add one at a time, browse a while, test the extension, make sure it works before adding more extensions. I added a WHOLE bunch at once. Firefox then kept crashing after a minute of use. I had no idea what extension was causing the problem. By following the above advice trouble shooting is a lot easier.

For more information visit the Firefox extension webpage.