Firefox Extensions Part 5
Posted by jerothe in 
Jeeze, I am becoming a real freak about these. But like everything I am sure it will wear off, and last night may have been the high point as I downloaded about 20 new extensions from a list of about 300. There isn’t anywhere else to go from here I would guess.
miniT – Tab Organizer
Since I wrote about this in May, this has been bugging me. Here is the browser that I am attached at the hip to, and anytime I say, “Gee, I wish Firefox did this…” I go out and look for an extension that does exactly that. But there wasn’t an updated version of mimiT that worked with Firefox 1.0.4, or at least I thought.
Version 0.5 is now out, and has been out for a little while I think. You have to watch the extensions pages at Mozilla, sometimes you can come across the outdated versions and the only difference is the version number of the extension. Normally Mozilla keeps these updated for you once you install them, but that is the trick, installing them even if they aren’t compatible.
So, enough rambling. This extension lets me drag my browser windows! Finally. Easy to use, and helps manage my information when researching. I love it. Notice the screenshot below. It gives you a nice little purple arrow to show you where you are going to drop your tab in your new arrangement. Supposedly this should be in Firefox version 1.1, and you can test it out on the developer release entitled Deer Park.
Rating : 10 of 10
Like I said, works perfect, I love it. I hope it continues to work in future version of Firefox, or they do incorporate it into the main release.
Which should I use when laying out my CSS website, Classes or IDs?
Since I began learning about the intricate but rewarding in’s and out’s of CSS, I have been researching sites that have use it. I notice that there are many sites that use “ID” selectors to define a class for block level div element. I have wondered why that is, why they don’t use a “class” instead, but haven’t been able to say why one way would be more or less better than the other.
For example, you may have your main container, which is commonly called the “wrapper” defined either of these two ways;
<div class=”wrap”></div>
<div id=”wrap”></div>
But now I do have a good reason. I have recently figured out a good technique for testing a fully CSS layout. I will digress and admit that Dreamweaver does a decent job of rendering the complex CSS in the design view of the program. But it still is not very accurate, and when it comes down to it, you have to be able to analyze the problems on a website with only your knowledge at hand. Where, coming from a design background, this was much easier to see in Dreamweaver using a table layout.
I have found myself defining to styles in my style sheets, and although they are only used for testing and the real CSS loyalists say that keeping them in the stylesheet defeats the whole purpose of being concise, I leave them anyway for future use. This is usually what I define;
.border{
border:1px solid #000;
}
.background{
background-color:#000;
}
Basically these set classes for a solid 1 pixel black border, and a solid background color of black. That way, I am able to easily apply these styles as a double class to an existing class to help me test and visually see what is going on and where I need to fix my problem. Most of the time it is related to floats and clear issues. This is what the example with the wrapper would look like with my border class;
<div class=”wrap border”></div>
But, when you use an “ID” you cannot define a double class. I actually knew this, but had never really paid close attention until I tried to add a second class and everything messed up and I couldn’t figure out why. This is the big no no;
<div id=”wrap border”></div>
Now, granted, I learned this the middle of last month, and I have since found out about the “Web Developer” extension for Firefox, which I wrote about in my browser section. This allows you to draw borders around all block elements. But this doesn’t solve the same testing issue in IE, or Opera.
So, for that reason, I would recommend using “Classes”. If for nothing else, to make your life easier when testing out your beautiful CSS website.
New MSN Messenger 7.0 released and why you care
Whole new set of tools to make you that much more of a slug.
MSN Messenger came out with a new version late last month, jumping from 6.2 all the way to 7.0, and for good reason. There are a bunch of cool new things and the interface becomes more slick every day.
First off, when I started to write this article, I came across a site that has those flash animated smileys that have been all over the internet lately. If you haven’t seen them, check these smileys out, they are really cool and really free.
More options for file transfers.
You can now transfer all sorts of file formats via messenger, from the original jpgs up to a better resolution format in .pngs or even music .mp3 files.
Trick those you don’t want to know that you are online.
There is a new cloaking feature that allows you to hide yourself and your online presence from those annoying friends who you don’t want to piss off, but don’t really want to talk to either. All you have to do is right click on their name, and choose “block”. Like I said, you will show up offline on their computer, so they won’t really know that you are there.
Personalize your messages and get your friend’s attention
First conceived in Yahoo Messenger, now there are animated “winks”. These are little animations of people and objects that say and/or do certain default things such as a dancing pig! There are nudges, which gives the other users window a little shake and sound to get their attention if they are away in the other room. The nice thing about nudges is that you can only do them so often, a nice preventative measure of them becoming annoying. If all this wasn’t enough, now there is a pen tool for the message box, so you can actually write a message to your friend instead of type it. More of a novelty thing I think, unless you have a wacom tablet like I do, it may be quicker to write, who knows.
Easily personalize your away message
What I believe is a new feature, right under you own screen name is a small field for you to type your away message, before you set your status. No clicking through a couple of menu options to find it, no clicking through and saving different messages to set. Just one click, type, and you are there.
The slick interface
When I say this I mean, the fading in of the buddy icons, the fading in of the bios, and all of the user information at your fingertips right down to accessing their hotmail email address. When you are typing messages, you can now make a simple right click and do a search on a word that was used, either to find out a definition, or maybe to find out more information if you are talking about media, literature, or even animals.
I even learn about these things they call “muggins” which are dynamic .png files inside of a flash file that you can change to reflect your mood. I think I must be really old, because I don’t get the point, but I guess it would be to let your friends know how they should talk to you according to your “muggin”.
I even understand there is advanced video options for those of you who have internet cameras, with more of a real time response and options for communicating sans typing.
Conclusion
Most of this stuff makes MSN that much more of a toy then a really necessary communication tool, especially for teenagers who can’t get out of the house. But fun and inventive, it is fun to see this software evolve into some crazy tool you might see in some sort of futuristic movie.
Coolness Rating
MSN Messenger 7.0
Making Webpage Titles more accessible
Recently I did a small stretch on accessibility and screen readers and I came across an interesting tidbit of information. This was something I had noticed, but never really thought about and this was a good explanation.
As you notice in the screenshots below from three common browsers, I am trying something new with my webpages. When I seperate a section of my site in the title of the webpage, I use a horizontal bar “|”.
There are many different kind of characters that you can use from a design point that make things interesting, these are some common ones;
- ::
- ||
- –
- >>
However, when an inpaired user comes across any of these it reads them outloud. So, while you may want to have a site have that small detail to make it look cool, wouldn’t it make more sense to just give that idea up and make it less obxonious for all of those users?
I am using one “|” because it is simplest to be read, and that way, impaired users can actually skip parts of the title easier and move down to the main content of the page. When most browsers load a page, they put a “-” “browser name” at the end of the page title. By not using a “-” anywhere else in the title, this gives the user the ability to tell the reader to skip everything past the dash.
In this case, the reader would read the page title, and then go straight to the content or links, or whatever the user wants, without reading the name of the browser each time the page loads.
Not to be contradictory, for now, I am keeping the double ::, because I wanted a heiracrhy of seperation between the name of my website and the actual page structure.
Final Note
This information may be kind of trivial. I don’t know enough about screen readers to know if the users can sense a pattern in titles, or if they try to figure out a pattern, that they tell the reader to pick out certain title seperators and skip after them, anything from a dash to colons. I don’t really know, but for now, I think this is a helpful idea until I figure out otherwise, and from what I read online.
Firefox Extensions Part 4
I know you all tire of my reviews of all of the Firefox extensions, but here is another couple ones that may blow your mind.
Fangs – Firefox Screen Reader Emulator
The other day at work, we came across a site that had a browser (Fast Browser) that would give you a little animated helper dude that acted as a screen reader. But the guy didn’t seem to read things on a webpage with any sort of order or choice, so I figured, hey, Firefox has to have extensions for this. Sure enough,
they did.
Called Fangs in response to the wildly common and popular screen reader JAWS, this is a useful extension to understand a webpage
from a user who doesn’t have a common person’s luxuries. For those who are deaf or blind, screen readers can allow them to navigate a website by their choice of heading or links, as well as turn the text on the screen into understandable braille characters on a refreshable Braille device.
Rating : 9 of 10
I didn’t give this a perfect rating solely because I haven’t used it that extensively. But from what I can tell, for free it does a lot of the basic and advanced features that JAWS will do specifically for web pages. Fangs will highlight headers and lists in different colors, and basically it looks like one big page of text. It will also give you helpful information on how disabled users see the links and the headers in your page. It will list them out, giving you information on their choices of navigation, and how much that makes sense when it is just text.
FoxyVoice – Firefox Audible Screen Reader Extension
Read in a monotone voice, this will give you a true idea of what a webpage is like for those who do cannot see. Foxyvoice is a extension that is simple to use, with a small icon in the lower right toolbar, one click will turn the screen reader on at any point in time.
Rating : 9 of 10
Again, I haven’t used this extensively in development. My one questions is how accurate it is to audible readers. My understanding was that other readers will actually read the HTML code out loud as well, and Foxyvoice does not. I believe you can install an SDK voice kit into Windows to give you additional voices as well to break away from the computerized voice that is the default.
Duplicate Tab
This is a simple extension that will make a new tabbed browser window with the exact same address of a website that you are currently on.
Rating : 10 of 10
Does exactly what it says it is going to do, duplicates a tab. The only problem is when you use it in conjunction with the Web Developer Toolbar because the shortcut for a new duplicate tab is shift+ctrl+T and that is also the shortcut option for toggling the Developer Toolbar. So, all we need to do is set the options > keys in the Toolbar to something else.
Web Developer Toolbar
What an amazing tool! I love this thing. Here is a screenshot of just one section of the tools available;
So many options. You can use something as simple as a one click button to view a webpage’s source, to something as complicated as outlining all of your block elements in a red border color to see how they are reacting. This is so useful for developing CSS sites. You have validation options for CSS and XHTML as well as standards for other types of internet ready devices like palm pilots and phones with the WCAG standards checking built in.
There are one click options to clear the cache, one click options to view a webpage in a different resolution, and you have complete control over the settings with an options button as well. This will let you set shortcuts, the screen sizes you want to test, and even the testing colors for borders and stuff.
Rating : 10 of 10
I think this is my new favorite extension. I don’t see how much of a use it would be for a non web-developer, but I use this in developing and just everyday use for view source and clearing my cache. A must if you are seriously into saving time in testing.
IE View
Self explanitory, this is a option that will be added on install to your right click menu options. It is a one click to open the page you are currently viewing in an IE browser window.
Rating : 10 of 10
Simple and straight to the point, this is helpful when previewing a website during development.