Category: Diversity

The importance of supporting diversity

Categories
Diversity JavaScript

Gewgaws can be accessible. Valid, too.

One of the DHTML (Dynamic HTML) effects not built into my own libraries is a fish-eye effect. Those of you who have a Mac will know the effect I’m talking about: when you move your mouse over a menu bar, the items expand but in a way that emulates a ‘fish-eye’ magnifier.

This isn’t a trivial effect to create. You not only have to capture the web page reader’s mouse movements, you also have to size objects in relation to each other and the mouse. Luckily, the popular Ajax library Dojo Toolkit, created by a consortium of interested developers has just such an effect.

Though Dojo has documentation, it’s coverage is like Wikipedia’s coverage: it’s added by interested parties, and as such, there are gaps in how to use some of the library objects–including the Fisheye Widget. However, there are plenty of demos, includin one for this object.

To use this functionality, according to the demo, you create a series of div elements: one outer, one that acts as control, and several inner (for each menu item). You then add Dojo class names, as well as element attributes providing information for the menu caption, source file for the icon, minimum and maximum image sizes and so on. The markup in the demo is as follows:


<div class="outerbar">

<div class="dojo-FisheyeList"
	dojo:itemWidth="50" dojo:itemHeight="50"
	dojo:itemMaxWidth="200" dojo:itemMaxHeight="200"
	dojo:orientation="horizontal"
	dojo:effectUnits="2"
	dojo:itemPadding="10"
	dojo:attachEdge="top"
	dojo:labelEdge="bottom"
	dojo:enableCrappySvgSupport="false"
>

	<div class="dojo-FisheyeListItem" onClick="load_app(1);" 
		dojo:iconsrc="images/icon_browser.png" caption="Web Browser">
	</div>

	<div class="dojo-FisheyeListItem" onClick="load_app(2);"
		dojo:iconsrc="images/icon_calendar.png" caption="Calendar">
	</div>

	<div class="dojo-FisheyeListItem" onClick="load_app(3);"
		dojo:iconsrc="images/icon_email.png" caption="Email">
	</div>

	<div class="dojo-FisheyeListItem" onClick="load_app(4);"
		dojo:iconsrc="images/icon_texteditor.png" caption="Text Editor">
	</div>

	<div class="dojo-FisheyeListItem" onClick="load_app(5);"
		dojo:iconsrc="images/icon_update.png" caption="Software Update">
	</div>

	<div class="dojo-FisheyeListItem" onClick="load_app(6);"
		dojo:iconsrc="images/icon_users.png" dojo:caption="Users" >
	</div>
</div>

</div>

It’s an interesting approach to take: embed the necessary information as tag attributes, so that the person doesn’t have to touch code. However it has two major drawbacks: it doesn’t validate, and it’s not accessible.

Dojo, like many other of the new Ajax libraries, make use of custom attributes on standard HTML and XHTML objects, which don’t validate as either HTML or XHTML. In addition, the menu is JS driven, so a person who doesn’t have JavaScript enabled won’t have access to the menu. Not only JavaScript driven, it’s also mouse driven menu, which makes it unusuable within text-to-speech browsers.

Modifying the code so that it validates is a bit tricky, but doable. What is required is removing the tag attributes for the elements, and adding these using the DOM, or Document Object Model, API.

I have six menu items, which means removing the custom attributes for one controller and the six menu item div elements:


<div class="dojo-FisheyeList" id="controller">

        <div id="menu1" class="dojo-FisheyeListItem">
        </div>
...
        <div id="menu6" class="dojo-FisheyeListItem">
        </div>

</div>

In JavaScript, I use the DOM setAttribute to re-set these custom attributes. The following code re-sets the attributes for the controller object:


  var cont = document.getElementById("controller");
  cont.setAttribute("itemWidth","60");
  cont.setAttribute("itemHeight","100");
  cont.setAttribute("itemMaxWidth", "200");
  cont.setAttribute("itemMaxHeight", "300");
  cont.setAttribute("orientation","horizontal");
  cont.setAttribute("effectUnits","2");
  cont.setAttribute("itemPadding","10");
  cont.setAttribute("attachEdige","top");
  cont.setAttribute("labelEdge","bottom");
  cont.setAttribute("enableCrappySvgSupport","false");

These attribute settings are exactly as they were found in the tag attributes, other than altering the image sizes to fit my own GIFs.

For each of the menu options, again the element is accessed by identifier, and attributes added with setAttribute. The following sets the attributes for the first menu item, but all other menu objects are modified using the exact same code (but different images and captions):


 var menu1 = document.getElementById("menu1");
  menu1.setAttribute("onClick","load_page('http://learningjavascript.info')");
  menu1.setAttribute("iconsrc","/dotty/dotty.gif");
  menu1.setAttribute("caption","Learning JavaScript");

Since Dojo requires these attribute settings before its functionality, and it processes the data on page load, the function that contains the attribute setting needs to be called right after the div elements are created in the page. One way is to embed a script block calling the function in the web page right after the div elements are created:


<script type="text/javascript">
//<![CDATA[

setMenuProps();

//]]>
</script>

(Notice the use of the CDATA section surrounding the script? This, also, is required in order for the page to validate as XHTML.)

Once the attributes are set, the Dojo fisheye menu loads cleanly, without having to use custom attributes. But something’s still missing: attributes that are required. Each img tag requires an alt attribute, which is a legitimate X(HTML) attribute, but one that’s not provided.

I explored the Dojo code and tried a couple of alternatives to add attributes for the images, but nothing worked. There’s also nothing in documentation. So, back again to my own custom code.

Unlike setting the initial attributes, the alt attribute needs to be added afterDojo has done its work and created the menu. Dojo captures the window.onload event, which I also needed to capture. However, I had to do so in such a way as to not ‘break’, or override Dojo’s event handler.

I needed to use the DOM again, but this time to attach an event handler on the window onload event, chaining it with the Dojo event handler. The following code does the trick:


function addWindowOnLoad(func) {
   // test for object model
   if (window.addEventListener) {
      window.addEventListener("load",finish,false);
   } else if (window.attachEvent) {
      window.attachEvent("onload", finish);
   }
}

addWindowOnLoad(finish);

The finish method then accesses each image in the page, checks for class name, and when it matches the Dojo class name, checks the source attribute on the image. Based on the text, the related alt tag value is set:


function finish() {
  for(var i = 0; i

The page now validates as XHTML transitional. Thought it takes more code, it’s preferable than just blowing off XHTML as ‘not useful’, or unimportant. We haven’t walked three steps forward in our use of web standards the last decade, only to take two steps back now for the sake of a little sizzle.

Even if we decide to blow off valid markup, we can’t justify blowing off accessibilty (of which valid markup is one component). A pretty or cool effect is not worth putting barriers around our pages. Unfortunately, though, accessibility is both easier and more difficult to implement.

The simplest accessibility option is to provide a NOSCRIPT block with content to display if JavaScript is disabled. In this case, a straight menu with hypertext links around images is all that’s needed:


<noscript>
<a href="http://scriptteaser.com/learningjavascript/"><img src="/dotty/dotty.gif"  
  alt="ScriptTeasing News" /></a>
...
</noscript>

Unfortunately, other accessibility issues aren’t as easy to resolve. A truly accessible menu needs to be keyboard sensitive for many text-to-speech browsers. Adding this into the Dojo menu is going to take additional thought. In addition, the behavior of the menu is off with Internet Explorer 6.x (the entire menu doesn’t display until you move your mouse over the bar).

Then there’s the issue of the size of the Dojo libraries. There’s a noticeable delay loading this page with Dojo’s large code base in addition to mine, just to create a visual effect.

Sometimes, though, you want both the sizzle and the steak. I’ll return later with more on whether I’ll keep the Dojo fisheye menu, and how I’ll resolve the last issue of accessibility if I do.

Categories
Diversity History

What a wonderful treat

Monthly I get a fresh batch of downloads at eMusic. I don’t have the largest plan–the most I can download is 20 at a time. Usually this is enough for an album with maybe a few experimental downloads from unfamiliar groups. I think it will be years before I manage all the jazz downloads I want.

Last weekend when I went looking, I found an incredible collection: the complete works for Ella Fitzgerald when she was recording with the Decca label. The British label JSP is re-releasing a mix, and it includes probably some of her finest singing.

I’m not sure which is my favorite; probably “Baby, it’s Cold Outside”, with Louie Jordan. No, perhaps it’s “Black Coffee”. I can’t tell — it’s one good song after another. And quality, too. No scratches, good faithful reproductions.

I listened to it last weekend while I walked, and lost myself in another era–my favorite era. I softshoed past the cardinal, the titmouse, and the robins, while they looked on in seeming interest. No one else was about, of course. I’m only insane when I’m alone.

I would give anything to have been born in the 1920’s. Yes, there was the Depression, but whether it was because of the Depression or despite it, this was a time rich with exploration and strength–even for women. Especially for women.

Back in the 1920’s, 30’s, 40’s, a strong woman was someone to be looked up to and admired. Jean Harlow, Joan Crawford, Katherine Hepburn, Virginia Woolf, Elizabeth Taylor, Eleanor Roosevelt. You could be a feminist without having to carefully explain to the guys around you that it really didn’t mean you wanted to emasculate them. These women were honorary man feminists according to Lenore Levine. I don’t particularly agree with this designation, but I do like her description of today’s Nicey-Poo feminism:

Nicey-Poo Feminists have taken the sensible idea that women should be supportive of other women, and distorted it almost out of recognition. That is, Nicey-Poo Feminists believe that feminism means never saying anything controversial (at least in their own circles), and never saying anything about another woman that isn’t nice.

Nicey-Poo Feminism has been promoted by the new new Ms. (post-1990). This magazine is afraid to print anything which any segment of their audience might find offensive. After all, if they actually said anything mischievous or funny, their circulation might increase. (A fate they seem determined to avoid at all costs.)

The clothing of that long ago time reflected the personalities of the women. Many of the suits were tailored, severe, with padded shoulders and angular lines. The women who wore them seemed unbending in their resolve–determined and capable. Yet the gowns were fragile and light, and flowed behind the woman as she glided with exquisite grace and femininity across the dance floor. And the hats–I can only wish for a hat with a net dropping down to teasingly cover half my face; me peeping out through the netting in a move both coy and bold–we just can’t do this today. Butt cracks peeking out from pants too low is not the same.

During this time, women fought for and won the vote, admission to college, and demanded entry in fields normally restricted to the men. These were not quiet women, willing to demurely wait for someone else to pave the way. But they weren’t all of a kind–they couldn’t be classified as ‘feminist’ and ‘mother’, because many were both. And more. What extraordinary set of events happened to make women into what we were during this time? And what can we do now, to re-capture it?

If I was born in the 1920’s, I would have been in my late teens and early 20’s during World War II. I would like to think I would have volunteered to serve–as a pilot, surveyor, or radio person. Who knows? Maybe I would have been Rosie the Riveter.

Anyway, these were my thoughts while listening to Ella. It’s a rare collection of songs that can completely repaint your world.

Categories
Diversity

Kicking was the operative word

Recovered from the Wayback Machine.

I hesitated to mention the “Whose Butt should we be kicking” panel at SxSW until I saw more detail on the session. Thankfully, Dru Blood provided a fairly detailed liveblogging of the event.

It was a mistake for SxSW to keep this session once the original panel broke up. There was a dynamic involved with the original participants that led to the subtitle: whose butt should we be kicking? I created the title of the panel, and saw this session to be controversial, provoking, and even a little confrontational. I, and I believe the original organizer of the panel, Dori Smith, saw this as a a true debate between strong willed women who disagree on the answer to the question: if we exist in equal numbers, why are we not seen?

It was never intended, at least from my viewpoint, to be a how-to. We have how-tos. We have them coming out of our asses and they aren’t making a difference. It was never about individuals, or how any one person could increase their visibility. Whose butt should we be kicking?–that’s not a how-to.

This is not a criticism of Blogher, because I got them involved in a replacement panel after the SxSW organizers expressed interest in it still continuing. The Blogher folks did a terrific job finding replacements, and the panel that was formed had a dynamic of its own–just not the same as that of the original group. This placed an unwelcome burden on the new panel members–ghosts of panel members past. Keeping the title was a mistake, because it implied debate, and the replacement panel didn’t have the dynamic for this particular debate.

Frankly, I’m not sure that this debate can ever happen. Not in weblogging. There isn’t enough marketing impetus to sustain a debate of this nature.

Categories
Diversity

Women in IT as compared to Women sorta associated by default with kindof IT

Julie Lerman points to a post and comment discussion related to a subject that’s been on my mind a lot this last week: Women in IT suprised by Women in IT; about a woman attending a Women in IT networking event where the weblog author found she was the only woman there who actually works with technology:

Me: So what do you do at XYZ?
She: I’m in sales and you?
Me: I’m a programmer.
She: O, the boring part of IT.

There’s also an associated iWeek article.

Though this conversation happened in South Africa, it could easily have happened here, in the States.

Categories
Diversity

One last SxSW post

I discovered that the SxSW panel on Increasing Women’s Visibility on the Web: Whose Butt Should We Be Kicking is still happening, under Blogher management. One of the original panel members, Virginia DeBolt, is still on the panel, and it looks like a goodly mix of people will be featured.

I am disappointed that the original panel fell through, though I’m glad that Blogher was able to salvage it. As reticent as I am of meetups, this was one of the few events I was anticipating keenly this year. The fact that it fell through, and how it fell through was a disheartening event for me. Such is life, the world still turns or some such thing. Perhaps I’ll do something other during this time frame: travel to the UK or the Antarctica or some such thing.

I am still going to write up what I planned on discussing on the panel, but I’ll do this closer to the event. In the meantime, Tara Hunt, one of the new panel members, has a post related to the topic.