Year: 2006

Gewgaws can be accessible. Valid, too.

Post author By Shelley Powers
Post date July 7, 2006

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.

Photography

Picture This

Post author By Shelley Powers
Post date July 4, 2006

Recovered from the Wayback Machine.

I haven’t been out indulging in my photography as much. Both my contract and book have (had) the same set of deadlines so there were few days I could do more than take a quick walk in the park.

Now, I’m in the last stages of the contract, and the editing phase of the book, but the weather has been terribly hot and humid. I hope, knock on wood, to have some nice days later this week. I wouldn’t mind a longer road trip and some time just to be away from the computer.

What photos I have taken I’ve scattered about my other domains, primarily as filler until I can get the sites’ look all pulled together. Since much of my writing lately is in the web page development, I am experimenting with Ajax/DHTML effects. Using such intensive levels of JavaScript means they can’t go live until absolutely checked out. While that occurs, a plain page with a couple of photos is better than an empty directory.

(You can see a little of this with the Dojo tools fisheye effect I’ve used at ScriptTeaser. I need to add an accessible alternative for non-JavaScript users, but I am really fond of Dojo tool’s fisheye effect. I’ll have more on this in ScriptTeaser when it goes live.)

As for the photos, I did visit Johnson Shut-Ins after it opened, and put together a show of some of the photos. Eventually, I’ll pull all the photos into a long, multipage story on the Shut-Ins at MissouriGreen, but you can see what a billion gallons of water can do to a mountain at a temporary photo gallery here. I talked with a park employee and she mentioned how ecstatic the geologists in the region are, because they normally can’t ’see’ the layers of rock that make up the Ozarks. The flood cut a path down the mountain to the bedrock, and managed to scatter an amazing variety of rock all over.

Back to photos. Eventually, most of them, as well as my ’softer’ writing—stories, reflections, and so on—will go on to The Book of Colors site I’ve longed to put together. First, though, I have to figure out a format for the site, and how best to display both photos and stores. This has not been easy, as I’m having the devil of a time with site design. I’m tired of the same old looks, the centered pages, the conservative colors.

As if you can’t tell with my cockeyed, off-center look and sharp, pure colors. I must warn you, I’m in a mood for color. Bold vivid color. Odd shapes. Contrast. Rule breaking. It may get a little intense at times. Maybe even a little disconcerting. Perhaps I’ll design a special set of ‘rain mist’ glasses for my good friends to wear when viewing the sites.

Weblogging Writing

What it is

Post author By Shelley Powers
Post date July 3, 2006

Recovered from the Wayback Machine.

My philosophy as I begin this new journal can be found in the movie, “Six Days and Seven Nights”.

In the movie, the main character, Quinn (played by Harrison Ford), is a rough edged island society drop out who flies a beat up old plane between Tahiti and a tropical island getaway. He’s sitting at the bar when the requisite female lead, Robin (played by Anne Heche), walks up to get a drink. They end up talking about people who vacation in tropical islands, leading Quinn to scoff about those who, “…come here looking for the magic, hoping to find romance, when they can’t find it anywhere else.” Robin replies maybe people do find romance. Quinn then replies:

It’s an island, babe. If you didn’t bring it here, you won’t find it here.

There you go. What it is.

In the sidebar to your right are screenshots of various sites I’m in the process of putting together. I had planned on waiting until all were finished, and then doing a “Ta Da!” moment, but that just puts pressure on to finish and adds to stress. Must finish, must finish. Instead, I figured I’d just toss things out in various stages, and eventually something tangible will coalesce out of the mess. Or not.

Most of the sites are for general writing and/or photography. The only ‘weblog’ format sites will be this, the Bb Gun, and ScriptTeaser. Everything I publish will have an introductory entry here, at Just Shelley; the post then forming a discussion forum. The Bb Gun is for general web commentary and expressions of opinion of which I’ve never had a shortage. The ScriptTeaser site is pure tech, and includes sub-sites for book support.

I had planned on having comments at all three, but why create multiple points of vulnerability?

This site is my starting point to all things Shelley, and hence the name. This is my point of contact with those others who make up the ‘community’ in which we connect to each other. My warm appreciation for those who missed me. *PHPPTT!* to those who didn’t.

Technology Weblogging

Tipping the Apple cart

Post author By Shelley Powers
Post date July 3, 2006

Recovered from the Wayback Machine.

There are some high profile folk in the technology and weblgging communities who are quitting Apple products: Mark Pilgrim, Cory Doctorow, and even Tim Bray is giving it a thought. Jason Kottke asks whether Apple should be worried. He wonders whether these acts could be a foretaste of what is to come:

Nerds are a small demographic, but they can also be the canary in the coal mine with stuff like this.

Is Kottke right? Are these men the canaries in the mine: harbingers of deep and serious times ahead for Jobs and company?

I doubt the average Mac user has heard of Mark Pilgrim, or Cory Doctorow, or even Tim Bray. Kottke’s point, reiterated by Tim O’Reilly, isn’t so much that, “Look here at these famous people, they’re leaving Apple” or even, “look, these are famous people”, as much as these were longtime fans of the Apple/Mac environment. If they, stalwart and heavily invested champions, are considering leaving, will Bob and Alice, Ted and Carol be far behind?

Yes, and no.

These gentlemen are also heavily invested in open source and open standards, which has and will continue to influence their decision. The average Apple customer, though, most likely doesn’t care about source or standards; no, not even when it impacts them. Lock-in? What is lock-in. Lock-in is having to make a choice and living with the consequences. Heck, the average consumer is used to having to make that crucial choice: VHS or BetaMax; iTunes or MP3; marry Paul or hold out for John; Macy’s or Gimble’s; Pepsi or Coke.

To the average consumer, lock-in is equivalent to competition and isn’t competition supposed to be a good thing? As for the average tech, he or she doesn’t know how to communicate the awfulness of lock-in—well, other than acts such as switching to Ubuntu.

But then, a geek switching to Linux isn’t necessarily a new thing.

“Hey, I’ve switched to Ubuntu.”

“I find I like the Brazilian coffee beans, myself.”

“No, Ubuntu is a form of Linux.”

“Linux? Weren’t you already using Linux? I thought all you geeks used Linux. What were you working with before?”

“A Mac.”

“Mac? As in Apple? With all the aqua stuff?”

“Yup.”

“Wow. Well, aren’t you precious. Little wittle command line scare the big bad geek?”

“Hey! I’ll have you know that the Mac operating system is built on BSD, a hipper version of Unix.”

“Yeah, but that’s like driving a Barracuda with an automatic transmission.”

Geeks leaving Apple for Ubuntu isn’t a Sign. Even famous geeks leaving Apple famously isn’t a Sign. Geeks leaving Mac for Linux is just another example of someone making a choice.

Now if Uncle—the man who can’t figure out how to use his toaster without burning PopTarts—leaves his Mac for a Linux box, well….next thing you know, Microsoft will replace Steve Ballmer with a black woman, and Sony will decide that art demands to be free.

In the meantime, my own Why Switch ad. Just tap the apple, wake up the worm.

Or, if you have time and bandwidth, the best version. Warning: Quicktime mov file, huge sucker. And one for your little iPod, too.

Quicktime 7 required

Web

The new Hello World

Post author By Shelley Powers
Post date July 1, 2006

Recovered from the Wayback Machine.

Programmers have traditionally created as their first application in any language or environment the “Hello World” application. This is an application, small as possible, that outputs the words, “Hello World”. Wikipedia has a nice entry on Hello World, including the first known instance of using this now ubiquitous right of passage for programming.

The thing with “Hello World” is that it’s a small sentence, and thus isn’t the best of tests when trying out a content system, such as text editor, weblogging tool, and so on. Enter the Lorem Ipsum generator, the Hello World of writing. Wikipedia also has a nice entry on this.