May 2008 - Posts
I am working on my presentation for the open house at Microsoft's, and I'm looking for a promotional video for MOSS 2007, to open my lecture with.
I didn't find anything of what I was looking for, but I did, how ever, found that:
MS-DOS 5.0 and Windows 386 Promo Videos
These are hilarious!!! 
A must see!
I still remember upgrading to Dos 5.0 (and later to 6..) and besides being funny those bring back some memories :)
Enjoy!
P.S. If someone know on a MOSS 2007 promotional video, do tell... please...
Last week my computer finally decided to give-in and crashed.
I have a very solid IBM ThinkPad T43, which I like a lot; Its been thru quite a lot with me (including one time it climbed down the stairs all by it self, and survived). It wasn't a hardware problem, it was pure software chaos. After a year of abuse, my Windows installation had so many errors, I just had to re-format the machine.
I've decided to give my self a bit of an easier life, so I used nLite to create an unattended installation of Windows XP with SP3 slipstreamed, some drivers, etc.
After a very quick installation (really, it took something like 20 minutes!), the computer was up, and ready to receive my usual bunch of software I'm installing.
I've started by installing some updates, and anti-virus, and moved to a nice IBM application called "Access Connections" which is a nice network profiles' switcher, that switches automatically between my network places (home, office, wireless home, etc.).
Then I saw the problem. AC (Access Connections) didn't work. It didn't control my wireless card, etc.
I started digging into the problem, read some, checked Lenovo's support site, but I couldn't find nothing.
I've tried different drivers and versions. Reinstalling parts. Removing and reinstalling AC, and so on and so forth.
After a couple of days like that, I even reinstalled XP from scratch, using my neat slipstreamed CD.
Nothing had worked.
I was so frustrated by that, so I thought of restoring IBM's original installation (ThinkPads has this cool feature).
And then an idea popped to thru my head: I was using a slipstreamed XP CD, which had SP3 slipstreamed.
SP3, not SP2 as I used to.
So before reverting back, I started reading what ever I can about SP3, and I've found this great article:
Windows XP SP3, What You Can Expect
And from that to this one:
Windows Vista Security and Data Protection Improvements
After reading these, I've checked SP3's new services on my machine. I saw that most of them are related to one another in some way, and I've noticed that they were all set to "Manual" operation.
I've started to play with them, and switch these two on:
- Extensible Authentication Protocol Service
- Network Access Protection Agent
I also set them to run automatically.
And here we go, everything works. The wireless is working, AC is working, all is back to normal.
Short conclusion
I read a bit about those services, and I think that what happened is that the new AC version, took over Wireless Zero Configuration (WCZ) and were using that. WCZ, in its turn was failing due to the fact that the above services were off.
I think that WCZ was trying to validate the network using NAP (Network Access Protection Agent) and failed.
But why were the services off (or set to manual operation)?
This one is an nLite problem. I was using a version that weren't yet familiar with SP3, and there for set those automatically to manual, to save on system's resources.
Update November 2008
I've got quite a bunch of comments to my mail, saying that this procedure didn't work for them. It got me curious thinking that I probably did something else, which I didn't mention here.
So I went through it again - formatted me machine (it needed formatting anyway) and used the same installation, and so on.
When I got to the wireless part, I noticed that there's a chance for another error:
My T43, has an Intel 2200BG card. It appears, that with SP3, XP looses the ability to turn the card on or off. The reason for that, I think (didn't manage to create a test scenario yet), is the enhanced security.
To resolve this thing, you can install Intel's software. The application adds a small icon to your task bar, and a wireless manager that looks something like that:
(Image taken from Intel's site)
After installing that, and doing the above changes, Access Connections will start working again.
Now, if you are like me, you wouldn't want the extra application. So, to shut it off, you should remove the following items from your registry:
Go to "HKLM\SOFTWARE\Microsoft\Windows\CurrentVersion\Run" and remove the following two entries:
- IntelZeroConfig
- IntelWireless
Reboot, and you're done.
Hope it helps, I'll be happy to know if it did (or didn't...). Thanks or all the comments so far 
Save the date, hope it's not to late (it rhymes!): June 2nd, 2008, Accessibility open house in Microsoft Israel.
'Opening Doors' - Accessibility on web sites
This will be my first time, lecturing in an open house, or at Microsoft's, and naturally I'm quite excited and looking forward for this.
What will I talk about?
- Moss 2007 accessibility features
- The "More Accessible" feature in MOSS 2007
- HI Software Accessibility Kit for MOSS 2007
- Q & A if there's be some time
I'm not going to talk about installing, maintenance, standard lists, etc.
I'm currently researching MOSS in terms of accessibility and design issues. This is such a great product, with so many features and so, I think it'll take forever to master 
If you have some tips, or some issues you would like me to discuss, I'll be happy to hear them, use the comments below, or the "Contact Me" option. I'm not promising to cover everything, but I will try.
It finally happened and I'm now, officially, an uncle!!!
Today, at 1:30AM my sister gave birth to a beautiful little baby, called, currently, Mili.
We're all very excited and happy here (Happy? Thrilled!), my face looks like that: 
since this morning, and I'm having troubles sitting in the same place more then few minutes :)
Happy birthday 
When writing an accessible page, you have to pay attention to some rules, and some guidelines, etc.
If you're doing that, you probably read a bit about that, about how to do that, and so on.
But still, no matter how long you're writing accessible pages, you need a way to check it.
A complete toolbox for accessibility checks contains several tools that will check as many aspects as possible, you will probably have a screen reader of some type, a contrast checker, and so on and so forth.
As a basic toolbox, or for a start, you can use "AIS - Web Accessibility Toolbar".
This is sort of a Swiss-army-knife for accessibility checks. It contains many of the check you want or should do on your page. I will describe it, and its functions.
Toolbar's versions
I've started to write this post a couple of weeks ago. Back then there were only one version of the toolbar, which I knew of. But last week I've found a newer version, which carries some interesting new features.
The functionality for both versions is quite the same, the difference is with the way each version dose the same.
In version 1.2 which is the one I knew, most of the things are using JavaScript on top of your page, or some external web page (i.e. for HTML validation). In the new version (2.0) many of the scripts are in side the toolbar and doesn't require Internet access.
I'm working a lot with Banks, and in a secured network, and the ability to use the toolbar without the Internet is a very good thing.
The downside is that's version 2 is still a beta, and wouldn't work in Firefox. However, version 1.2 also never worked quite good on Firefox for me.
Installing and running the toolbar
First you should download the toolbar:
Download version 1.2 from here; download version 2.0 from here.
The installation is as easy as "next-next-next". You have to note two things:
- IE should be closed. The installation will succeed even if it wasn't, but from my experience it works better when the installation is done on a closed IE.
- If you have a previous version (if you're installing version 2.0 after 1.2) you should remove the older version first.
After the installation is done, you will have a new toolbar inside IE, that looks like that:
Version 1.2
Version 2.0
On the right side here, there are two more buttons: "Firefox" and "Opera" (discussed later).
If you don't see the toolbar, right click
some where in the toolbars area and
choose "Accessibility Toolbar" to enable it.
A note I have to mention here, is that only version 1.2 gave me this error (the toolbar doesn't appear automatically).
When I've installed the 2.0 version, it opened IE when it finished, showed the toolbar and an "About" screen.
For me, that is one point in favor of the new version.
Functionality
The basic functionality is the same with both versions. There are some improvements, but most of it is in the way it works (with or without Internet connection, as mentioned). I'll discuss in general the different buttons, and give some examples of what to do with some key features. Options, or differences will be title as "Version 2 Only".
I'm going over the buttons from left to right, as they appear on the toolbar.
About button
The first button will take you to an about page of the developer. It works the same in both versions, only taking to different pages. In the menu that opens from that button, you can also go to WAI guidelines page, and some more information pages.
Validate (1.2) / Check (2.0)
This item presents you with a list of online tools that can check several things on your page. Starting with your HTML validity and well formation, thru accessibility issues and ending with page weight and load time.
All of those tests are online. Meaning that you have to be connected to the Internet to run them.
There's no doubt that you could have found those tests by yourself and just run them, but the toolbar simplify it by sending the current page directly and, of course, with the fact it already collected those for you.
Resize
I think this is a great tool. Even if you don't use this toolbar for accessibility.
This tool will resize your IE window to simulate a smaller screen.
This is great to check how your page looks like on a 640 X 480 display, which none of my developers use anymore.
CSS
The CSS menu controls, naturally, CSS instructions. From this menu you can disable the CSS from the page, both the inline and from external files.
In version 2.0 there's a bit more flexibility in these options (i.e. canceling just inline styles but not CSS, etc.).
Why is that important?
One of the WCAG guidelines requires the page to be readable even without CSS.
The point is, that a screen reader doesn't use the CSS. If your page looses the logical reading order, when CSS isn't being used, a blind person will have troubles understanding it.
Images
Everything to do with images: hiding, counting, etc.
A few items here worth mentioning:
The "Toggle Image/Alt" (or "Remove Images" in version 2.0), will show you all the alternative texts for all the images on the page. A small alert will pop-up, alerting of the number of images which doesn't has no alternate text.
The "Image List" option will give you a list off all the images on the page, with it's sizes, and other properties.
In version 2.0, the images list opens INSTEAD of the current page. This is a bit of annoying feature. However, that came to avoid popup-blockers which prevents this feature from running properly in version 1.2.
Here's a sample of an image item from the image list:
Colour
To my opinion, this is less useful. I'm using external tools to test colors.
Having said that, I have to mention the last option in this menu "Vischeck colour blindness simulation" this is a nice tool, that I'm using to. It is external as I mentioned, but it is nice to have it here.
the contrast analyzer here is nice, but I've seen better.
The option to see the page in gray scale is good. It can give you and indication if you're using color to present data, and some idea of the contrasts you're using.
Structure (and Tables and Frames in version 2.0)
This is a very useful item. In version 2.0 they've separated it to 3 menu items, and I'm not quite sure if they've added or removed items, but still, the content is quite the same.
Inside structure, you'd find anything that has to do anything with you're page's layout and what building it.
You can high light tables' border, to see where you're using it. Also, you can investigate your tables, to see if they're well formed with headers, scope indicators, etc.
You should really use this feature, to check your data tables. Many developers forget to use table headers, or scope indicators, and it's a shame.
You can high light frames' borders. Check if they have titles and descriptions as they should.
The same goes for div elements, and so on and so forth.
For some reason, in version 1.2 there is also an option to high light links to a new window here. I'm not sure it is quite structure related, and it is definitely not trivial to search for that item here. But it exists so it's a good thing. Links to a new window, or to a popup, should be described in their titles, so a user wouldn't be surprised.
Tools (version 1.2 only)
The tools menu, in version 1.2, gather some online tools to perform extra tests.
All of the tools (or at least most of them) needs Internet connection. It makes it less useable,but still convenient to have them all in the same place.
This button doesn't exist in version 2.0, however some of those tools are accessible from the first button (see above).
Doc Info
The doc info menu gather everything you'd want to know about your page (document). Some of the elements here are duplicates. As an example - the "List Frames" exist in the "Structure" menu as well. And so on.
Still, there're some items here which are very important, like the "DOCTYPE" presenter. With the DOCTYPE declaration missing, a screen reader might not read the page correctly.
Source
The source menu is very much like the one in IE Developer Toolbar, and gives similar functionality. Besides the "View Source" option, which is every bit similar to the one inside your browser, there're a few other options which are quite good:
Source Highlighter, is a cool function - it will high light specific HTML elements so you'll find them easily in the code. You can high light tables, forms, etc.
Another cool feature is the "Generated Source" which present all the source code, including the parts that were populated using script.
Again, these functions are well known, but nice to have in one place.
IE Options (IE in version 2.0)
This is a shortcut menu to IE accessibility functions.
Everything here, are things that can be set within IE, using standard dialogs.
Remove CSS, disable JavaScript, etc.
You have to note here, that canceling CSS of JavaScript here, will cancel them until you re-enable them using this menu, or IE options. Unlike the CSS remover mentioned before, which will be canceled (hence the CSS will be restored) with a simple refresh.
Refs (version 1.2 only)
This menu, which exists only in version 1.2, gives you links to references on the web. There's a partial list in version 2.0 on the about menu (mentioned above).
I tend to think that who ever is using this toolbar, probably already know these links, but it is never harmful to have them handy.
Magnify (version 1.2 only)
The 1.2 version of the toolbar, was created before IE 7 released. In IE 7 this functionality is embed in the browser, so this button was removed from version 2.0 which is IE 7 oriented.
This is simply a screen magnifier, nothing more, nothing less.
Log (version 2.0 only)
Toggles a small log window. In version 1.2 all the messages popped out as alerts. Here they chose to put this log as an option, you be the judge of which is nicer.
Opera/Firefox (version 2.0 only)
I don't know how useable those buttons are, but they are their...
It opens the current page in one of those browsers, if they are installed.
Summary
If you're looking into making your page accessible, or even if you're just working on your HTML, this toolbar can help you. It does some of the things other toolbars do, but also much more.
Every now and than I get an application I want to check, but I'm worried that it might harm other processes on my machine, or block my memory if they suffers from a memory leaks.
Sometimes I get files from people which contains viruses, but still I need to have a look at them (what if the RAR file, with all the pictures from that trip, also has a virus in it?).
For all of the above (and maybe some others) the perfect solution is some kind of a sandbox.
For quite a while I was using a virtual PC, running the same OS as the host machine, as a sandbox.
I copied the files there, checked them for viruses, cleaned them, and/or just had a look at them, ignoring all the virus alerts, and then coping a fresh copy of that VPC.
A few weeks ago I found Sandboxie (www.sandboxie.com). An application that creates a sandbox on your operating system and allowing you to run anything you want in a controlled environment, separated then the OS it self.
It runs in an isolated memory range, and controls all the interaction to you hard drive, memory, etc.
Installation is fast and easy, it is a "next-next-next" installation.
Besides the application itself, the installation installs a system level driver, which controls the memory and hard-disk access.
After installation, you'll have a small icon in the system tray, and on your desktop.
The desktop icon runs Internet Explorer in a sandbox (very good for checking sites that you don't know or don't trust).
The window's title changes, and is surrounded by "[#]" to indicate that the browser is in sandbox mode now:
The load time doesn't seem to be effected, nor does any other browser functionality. The page looks the same with, and without the sandbox control (On the left - IE with sandbox, on the right, without sandbox. Click to enlarge) :
The tray icon allows to see the currently active sandboxes, to monitor them, etc.
The application add a context menu entry, allows you to start every application inside a sandbox. This is how it looks like when you right click a folder:
And this is the folder, when it opened within a sandbox:
Note the "[#]" signs in the window's title, same as in IE. The folder content looks just the same and work the same as before. And here's the cool thing: if I'll open one of the images in my image viewer, the image viewer application will start inside the sandbox just as well!
The Sandboxie window, displays all the processes that currently runs inside a specific sandbox. You can have as many sandboxes as your memory allows.
Dragging an application executable or even a shortcut to that window, will open the application inside the sandbox it was dropped on.
This is how Sandboxie window looks like, with all the processes I've run for this post opened:
Summarizing everything said, this is a very nice application no matter what you'd use it for. You don't have to keep it in memory, you can just start it when you need it. If you're just checking unknown web sites, or un-trusted ones, every now and then. If you have to check applications here and there. Or even if you just want to run your own code in an isolated environment, Sandboxie will suit you.
It is free to try and to run, but it will show you some nag screens after 30 days, which you can avoid if you buy a license (30$). Buying the application will give you a life time license including future releases.
My dog just die. It happened yesterday noon. We had to put him to sleep.
After a long sickness, he'd started to suffer the past few days, and we couldn't see him suffer like that. We choose the human solution, and took him to the vet.
I never thought it might be that hard to loose a dog. I had my share of friend who passed away, and somewhere in your mind, you tend to think that you know the drill. That you get over that soon, the way you did in the past.
But here it's different. You can't really say goodbye to a dog. He doesn't answer back. He doesn't say that it's alright.
I remember, when he was three months old, he was seriously ill. The vet thought he wouldn't survive. My brother and I held him all night long, night after night for a week or so. Gave him fluids IV, fed him with a syringe, and he survived. He made it.
It's been 11 years since that, and I wish so much I could save him again.
That's the course of nature, I guess.
Bigger
Goodbye, my friend...
Tooltips are a convenient way to present some extra information about tools on our web page, i.e. some details about a link or an image. However, those tooltips, by default, are not very pretty, to say the least, and only rarely aligned with the page's design in aspects of color and/or font.
If you want to have a tool tip with special colors, special fonts, etc. you're in a bit of a problem. And I haven't even talked about adding images to your tooltip, yet.
One of the popular solutions to the above mentioned problems, is to create a floating div element, add some content to it programmatically and make it appear/disappear using some client side code - JavaScript usually.
While this solves some of the problems (design, adding images), it adds a couple of its own:
- Client side code, it always has some place it doesn't work.
- You now have to worry about IE/FF compatibility.
After tossing and turning about this a bit, I did some try and error rounds, here are my conclusions.
First try, creating a tooltip for an anchor.
A while back I read about the :hover pseudo class and IE. In IE7, for the first time, any element can get the :hover class (in Firefox is was always like that, as far as I remember).
So my first try was to go on that side. It's not something new, a bit of common sense and maybe some reading and you can find this solution.
An anchor is a container, that will hold everything inside (almost). So instead of just text, I added a span to hold my tooltip. Some CSS to design my tool tip, and I'm good to go.
Here is the HTML:
<a href="http://www.cnn.com">
<span><img src="http://tinyurl.com/5g4js8" alt="CNN logo" width="150" />
<br />
Link to CNN's online site</span>CNN.Com
</a>
Here is the CSS to go with it:
a span
{
display: none;
}
a:hover span
{
border: solid 1px black;
background-color: white;
width: 200px;
color: Black;
display: block;
}
Here is how it looks:
Link to CNN's online siteCNN.Com
Oh my God! It looks bad! The span pushes the link down, and it isn't in place. Bad!
Couple of minutes of thinking, and I figured it out. I've added the "position" attribute to both classes, where the anchor is relative, and the span is absolute.
The reason to do that is as follows: the anchor should remain in his place, which is relative to the page, text etc. But the span itself, has to have an absolute position, in relation to it's container, which is the anchor.
Therefor, the new CSS looks like that:
a
{
position: relative;
}
a span
{
display: none;
}
a:hover span
{
border: solid 1px black;
background-color: white;
width: 200px;
color: Black;
display: block;
position: absolute;
top: 50%;
left: 20%;
}
Note that I've added a new declaration for the anchor it self. I have to do that, to define the position. Also, note that I've added the "top" and "left" attributes. I'm doing that, to prevent the tooltip from covering my link.
The new result is here:
Link to CNN's online siteCNN.Com
Much better! Isn't it? 
Let's move on!
Tooltips for other objects, in IE7 or Firefox
Having fun with the first step, I naturally moved to something else. What if you want to have the tool tip for an image and not for a link?
The image it self (the "img" tag) is not a container. What would you do?
the solution is actually quite simple: as I said before, almost any tag has the :hover pseudo class support now, just use a different container, with a generic class.
I've changed my CSS to be as follows:
.ToolTipContainer,
.ToolTipContainer *
{
position: relative;
}
.ToolTipContainer span
{
display: none;
}
.ToolTipContainer:hover span
{
border: solid 1px black;
background-color: white;
width: 200px;
color: Black;
display: block;
position: absolute;
top: 50%;
left: 20%;
}
Note this declaration: ".ToolTipContainer *". This is done to have anything inside the container relative to the page (same as the anchor, before).
The HTML look like that:
<div class="ToolTipContainer" style="width: 200px;">
<img src="http://tinyurl.com/65zs7g" alt="" style="width: 200px;" />
<span>Image in courtesy of:<br />
<img src="http://tinyurl.com/6lnbpq" alt="Getty Images logo" /></span>
</div>
And the result is:
(Image was taken from Getty Images)
Doing all that, didn't result anything at first (on my browser). After a bit of reading, I realized that the problem is very simple. IE7 demands a <!DOCTYPE> declaration. I've added:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
And everything worked just fine. Is that a bug, or a feature? I think it's a feature. You should add this declaration, it's a good thing IE require you to do that.
IE6 Problems
IE6 (and all of its predecessors) is quite a party crasher in this post. Nothing from what I wrote above works in IE 6.
Since many of my clients still support IE6 and below, I had to think of a method that will make it work.
The easiest thing to do, is to use JavaScript just for that. Here is a very good one I've found: An IE6-compatible solution for :hover
But I wanted something without JavaScript, just CSS and HTML. So I went to check a "what-if" scenario. "What if I'll use the link again, as a container, with an image inside?".
I've tried the following HTML with the same CSS as before:
<a href="BLOCKED SCRIPTreturn false;">
<img src="http://tinyurl.com/65zs7g" alt="" style="width: 200px;" />
<span>Image in courtesy of:<br />
<img src="http://tinyurl.com/6lnbpq" alt="Getty Images logo" /></span>
</a>
But it didn't quite worked.
I remembered that with IE6 there were always problems with setting the "top" and "left" attributes in percentages, so I've change it to pixels. But still no go.
I've started to try all kinds of stuff, when eventually it worked(!). I went back on my steps to figure out what I did to make it work, and here is what I've discovered:
In my original CSS (the first one) I've assigned values to the anchor object, but not to the "a:hover" pseudo class. This caused all the properties to default their values (in IE6). Still in my original CSS, I have a class for "a:hover span" only.
The lake of "a:hover" class caused IE6 to NOT trigger this "CSS event".
The first try was that:
a:hover
{
text-decoration: none;
}
But it didn't work... Still checking my footsteps, I've figured that you have to add something to the class that haven't been defined before. As I mentioned before, the CSS attributes defaults. I had to change something that DIDN'T appear first. The attribute that worked for me was: "display: inline;" but you can also try something like: "list-style-type: disc;" or what ever attribute that doesn't belong to an anchor.
The final CSS looks like that:
a
{
position: relative;
}
a span
{
display: none;
}
a img
{
border: 0px;
cursor: default;
}
a:hover
{
list-style-type: disc;
text-decoration: none;
}
a:hover span
{
border: solid 1px black;
background-color: white;
width: 200px;
color: Black;
display: block;
position: absolute;
top: 30px;
left: 30px;
}
And works just fine!
Note that I've added some attributes to an image inside an anchor to prevent the border and the cursor. You can avoid that if you want, and/or put you styles inline.