<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" media="screen" href="/~d/styles/atom10full.xsl"?><?xml-stylesheet type="text/css" media="screen" href="http://feeds.feedburner.com/~d/styles/itemcontent.css"?><feed xmlns="http://www.w3.org/2005/Atom" xmlns:feedburner="http://rssnamespace.org/feedburner/ext/1.0">
  <title type="xhtml" xml:lang="en-US">
    <div xmlns="http://www.w3.org/1999/xhtml" lang="en-US" dir="ltr">JavaWoman considers…</div>
  </title>
  <subtitle type="xhtml" xml:lang="en-US">
    <div xmlns="http://www.w3.org/1999/xhtml" lang="en-US" dir="ltr">(perfectly ordinary adventures)</div>
  </subtitle>
  <link href="http://my.opera.com/JavaWoman/" />
  
  <author>
    <name>Marjolein Katsma    </name>
  </author>
  <id>http://my.opera.com/JavaWoman/blog/</id>
  <updated>2008-04-26T17:36:14Z</updated>
<atom10:link xmlns:atom10="http://www.w3.org/2005/Atom" rel="self" type="application/atom+xml" href="http://feeds.feedburner.com/JavawomanConsiders" /><feedburner:info uri="javawomanconsiders" /><atom10:link xmlns:atom10="http://www.w3.org/2005/Atom" rel="hub" href="http://pubsubhubbub.appspot.com/" /><feedburner:emailServiceId>JavawomanConsiders</feedburner:emailServiceId><feedburner:feedburnerHostname>http://feedburner.google.com</feedburner:feedburnerHostname><entry>
  <title type="xhtml" xml:lang="en-US">
    <div xmlns="http://www.w3.org/1999/xhtml" lang="en-US" dir="ltr">Nerd-on-a-stick to the rescue!</div>
  </title>
  <author>
    <name>Marjolein Katsma    </name>
  </author>
  <link href="http://feedproxy.google.com/~r/JavawomanConsiders/~3/tMspSlLyfDc/1979781" />
  <id>http://my.opera.com/JavaWoman/blog/1979781</id>
  <updated>2008-04-26T17:36:14Z</updated>
  <content xml:lang="en-US" type="xhtml"><div xmlns="http://www.w3.org/1999/xhtml" lang="en-US" dir="ltr"><p>Upon arriving half an hour early at the University building where I was going to present my <a href="http://marjoleinkatsma.com/talk/studentenhaverfestival" lang="nl" hreflang="nl">“Masterclass Web Accessibility”</a> during the <a href="http://studentenhaverfestival.nl">Studentenhaverfestival</a> yesterday, I turned to the doorman's office immediately on the left after the entrance. A young man and a young woman
were having a conversation with the doorman sitting behind his counter, so I waited on the doorstep.
“If she comes early…”, I overheard, and “laptop”. Then they noticed my presence and looked at me. Of course I immediately knew what the problem was, stepped forward, and said: “I'm Marjolein Katsma, were you talking about me?” They were.</p>

<h3>We don't do MacBooks</h3>
<p>The young woman, Ingeborg, led me to the room where the presentation was going to be held and explained that the projector would not work with a MacBook. In fact, none of the projectors in the whole building would work with a MacBook, they told me, which given the fact that quite a few students actually use a MacBook demonstrated brilliant planning on the part of the university. Just to be clear: not the fault of the organizers of the event!</p>

<p>Of course, we started by trying anyway (I had brought two different adapters, but only the miniDVI-VGA had any hope of making a connection). Isaac (that's my MacBook) proved its versatility by immediately recognizing the projector and adapting its screen resolution. The projector refused to budge and kept projecting its own logo image. Having researched “connecting a MacBook to a projector” two weeks earlier (which took me a whole weekend), and finding not only which adapter(s) might be needed but also that sometimes it wouldn't work anyway, I had not only requested beforehand that someone would be present half an hour early to see to connecting stuff, but brought my still-incomplete “nerd-on-a-stick” as well.</p>

<h3>“Nerd-on-a-stick”</h3>
<p>My “Nerd-on-a-stick” is a little project I'm working on on and off: the goal is to have a (fairly) complete set of <em>portable</em> software on a USB stick, for Windows as well as OS X, so I'll always have a decent “development platform” with me. And (if at all possible) all OSS or at the very least freeware. That not only includes things like a decent programmer's editor, source control clients, a bunch of browsers, IRC and IM clients, a web server and the like, but also email and a complete office application. The latter obviously must be OpenOffice.org (OO.o), for which there is a portable version for both Windows and the Mac (though the latter uses a rather old version of the code). It's nowhere near finished yet, but I had my whole presentation done with (Windows) Impress, all on my neat little white nerd-on-a-stick, dangling around my neck.</p>

<h3>Hand-eye coordination</h3>
<p>So someone ran off and fetched a university-issue laptop from the doorman. I only needed to insert my nerd-on-stick and was ready to do a presentation. Except, I also needed Firefox with a bunch of extensions to demonstrate ways to check accessibility: I had that on the Mac side but not yet on the Windows side of my n-o-a-s. So that needed to be installed. I was pleased to find the University-issue laptop not only had security software installed (n-o-a-s is still virus-free!), but also didn't allow installing software to be installed on it. No problem, I just installed it on my stick. Then we had to sort problems with presentation mode, spanning monitors, and all that. I ended up having to look over my shoulder all the time to keep track of the mouse. Hand-eye coordination soaring to new heights, and getting a kink in my back.</p>

<p>After all that we started some 20 minutes late, and because some people just <em>had</em> to leave for another lecture, had to cut it short before I was finished. Apart from all that, it went quite well. ;) A small group of genuinely interested people, and quite a bit of reactions and discussion from them. I opened some eyes, I think: they understand now that web accessibility is not just about making web sites accessible to the blind but to everyone, and learned some techniques for applying it in practice on their own websites.</p>

<h3>Long live standards</h3>
<p>Next time I'm going to do a presentation I'm going to specify someone be there an <strong>hour</strong> in advance to help getting things connected, <strong>and</strong> the availability of a Windows laptop in case it doesn't work anyway. Long live standards!</p>



<p class="tags hide">Tagged:
<a href="/JavaWoman/blog/index.dml/tag/accessibility" rel="tag">accessibility</a>,
<a href="/JavaWoman/blog/index.dml/tag/education" rel="tag">education</a>,
<a href="/JavaWoman/blog/index.dml/tag/technology" rel="tag">technology</a>,
<a href="/JavaWoman/blog/index.dml/tag/OSS" rel="tag">OSS</a>,
<a href="/JavaWoman/blog/index.dml/tag/standards" rel="tag">standards</a>
</p>
<!-- Start of StatCounter Code - since 20080226 -->
<div class="statcounter_image"><a class="statcounter" href="http://www.statcounter.com/free_hit_counter.html"><img src="http://c39.statcounter.com/3462595/0/8225e41f/1/" alt="" style="border:none;" /></a></div>
<!-- End of StatCounter Code --><xhtml:img xmlns:xhtml="http://www.w3.org/1999/xhtml" src="http://feeds.feedburner.com/~r/JavawomanConsiders/~4/tMspSlLyfDc" height="1" width="1" /></div></content>
<feedburner:origLink>http://my.opera.com/JavaWoman/blog/show.dml/1979781</feedburner:origLink></entry>
<entry>
  <title type="xhtml" xml:lang="en-US">
    <div xmlns="http://www.w3.org/1999/xhtml" lang="en-US" dir="ltr">plz do my homework for me!</div>
  </title>
  <author>
    <name>Marjolein Katsma    </name>
  </author>
  <link href="http://feedproxy.google.com/~r/JavawomanConsiders/~3/Ipsy_aHe8Bw/1933690" />
  <id>http://my.opera.com/JavaWoman/blog/1933690</id>
  <updated>2008-04-16T22:46:18Z</updated>
  <content xml:lang="en-US" type="xhtml"><div xmlns="http://www.w3.org/1999/xhtml" lang="en-US" dir="ltr"><p>If you have an informational website, and some way for people to contact you, you’re bound to get requests that can be summarized as: “Please do my homework for me!”
If I reply at all, it's along the lines of “this website can help you to do your own homework!”</p>

<p>Now I'm preparing for a workshop (about accessibility). My Windows laptop is slowly dying, so I don't dare to use that.
My MacBook is brand new, and I've never done a presentation with it. And I hate Powerpoint and prefer Open Source Software (OSS) whenever possible
anyway, so I'm thinking of using OpenOffice.org <a href="http://www.openoffice.org/product/impress.html">Impress</a>. OK, so I do a little research - adapters to connect
the MacBook to a projector (all sorted now), collect some tutorials for Impress to get up to speed quickly (there's an incredible number of those).</p>

<p>And I find the superlative of the do-my-homework-for-me syndrome in the comments on one (otherwise not very useful to me) <a href="http://www.petefreitag.com/item/122.cfm">tutorial</a>;
this one doesn't look like homework — more like a business meeting:</p>
<blockquote>plz send me ppt presentation for open office in which presentation on writer,clac,ect</blockquote>
Err… “ppt”? A <em>Powerpoint</em> presentation on Open Office??



<p class="tags hide">Tagged:
<a href="/JavaWoman/blog/index.dml/tag/education" rel="tag">education</a>,
<a href="/JavaWoman/blog/index.dml/tag/presenting" rel="tag">presenting</a>,
<a href="/JavaWoman/blog/index.dml/tag/OSS" rel="tag">OSS</a>,
<a href="/JavaWoman/blog/index.dml/tag/OpenOffice.org" rel="tag">OpenOffice.org</a>,
<a href="/JavaWoman/blog/index.dml/tag/MacBook" rel="tag">MacBook</a>
</p>
<!-- Start of StatCounter Code - since 20080226 -->
<div class="statcounter_image"><a class="statcounter" href="http://www.statcounter.com/free_hit_counter.html"><img src="http://c39.statcounter.com/3462595/0/8225e41f/1/" alt="" style="border:none;" /></a></div>
<!-- End of StatCounter Code --><xhtml:img xmlns:xhtml="http://www.w3.org/1999/xhtml" src="http://feeds.feedburner.com/~r/JavawomanConsiders/~4/Ipsy_aHe8Bw" height="1" width="1" /></div></content>
<feedburner:origLink>http://my.opera.com/JavaWoman/blog/show.dml/1933690</feedburner:origLink></entry>
<entry>
  <title type="xhtml" xml:lang="en-US">
    <div xmlns="http://www.w3.org/1999/xhtml" lang="en-US" dir="ltr">The Peanut Award</div>
  </title>
  <author>
    <name>Marjolein Katsma    </name>
  </author>
  <link href="http://feedproxy.google.com/~r/JavawomanConsiders/~3/oQ30B-6W7VE/1877858" />
  <id>http://my.opera.com/JavaWoman/blog/1877858</id>
  <updated>2008-04-05T16:50:45Z</updated>
  <content xml:lang="en-US" type="xhtml"><div xmlns="http://www.w3.org/1999/xhtml" lang="en-US" dir="ltr"><p>I've decided to create a new award, for things I come across that I think are really nuts. Companies, websites, whatever. Even people, but I'll try not to get personal. ;) </p>

<p>So whenever I blog about something worthy of this unique award, I'll add this nice little peanut to the post: <img src="http://files.myopera.com/JavaWoman/files/icons/peanut.png" alt="peanut" /></p>

<p>The first winner is the company <a href="http://my.opera.com/JavaWoman/blog/2008/04/05/dont-link-to-us-or-else">I blogged about earlier today</a>!</p>



<p class="tags hide">Tagged:
<a href="/JavaWoman/blog/index.dml/tag/peanut+award" rel="tag">peanut award</a>,
<a href="/JavaWoman/blog/index.dml/tag/nuts" rel="tag">nuts</a>
</p>
<!-- Start of StatCounter Code - since 20080226 -->
<div class="statcounter_image"><a class="statcounter" href="http://www.statcounter.com/free_hit_counter.html"><img src="http://c39.statcounter.com/3462595/0/8225e41f/1/" alt="" style="border:none;" /></a></div>
<!-- End of StatCounter Code --><xhtml:img xmlns:xhtml="http://www.w3.org/1999/xhtml" src="http://feeds.feedburner.com/~r/JavawomanConsiders/~4/oQ30B-6W7VE" height="1" width="1" /></div></content>
<feedburner:origLink>http://my.opera.com/JavaWoman/blog/show.dml/1877858</feedburner:origLink></entry>
<entry>
  <title type="xhtml" xml:lang="en-US">
    <div xmlns="http://www.w3.org/1999/xhtml" lang="en-US" dir="ltr">Don’t link to us, or else…</div>
  </title>
  <author>
    <name>Marjolein Katsma    </name>
  </author>
  <link href="http://feedproxy.google.com/~r/JavawomanConsiders/~3/_eSner9iS2I/1873592" />
  <id>http://my.opera.com/JavaWoman/blog/1873592</id>
  <updated>2008-04-05T07:05:36Z</updated>
  <content xml:lang="en-US" type="xhtml"><div xmlns="http://www.w3.org/1999/xhtml" lang="en-US" dir="ltr"><p>I just came across a really interesting product/service. Clients available for both Windows and Mac OS X even. It's still in beta, and it's free though it isn't clear whether it will remain free when out of beta. Anyway, I downloaded the clients (didn't install anything yet), and went on to read their user license, privacy policy, and terms of use (TOS). Yes, I am one of those idjits who actually reads such boring documents.</p>

<p>Well… boring? In their TOS I came across a not-so-boring section “Linking to Website”, which starts out like this:</p>
<blockquote>(a) You may create a link from your own website to the Website provided that you obtain our prior written consent (…)</blockquote>
<p>They go on to state a number of conditions: for instance that you DO NOT “link from a website that is not owned by you”. Which, of course, implies that I cannot link to them from <strong>here</strong> (I don't own My Opera after all), even if I wanted to point out this really interesting (beta) product they have (which I wanted, before I read this), never mind linking to their TOS.</p>

<p>Just to rub it in, the second paragraph of “Linking to Website” states:</p>
<blockquote>(b) We expressly reserve the right to revoke any right we grant to you to link to our Website should you breach any of these terms of use. By linking to the Website, you indemnify us for any losses, damages, liabilities, costs or expenses that we, or any of our group companies, may suffer or incur due to your breach of any of the terms set out in paragraph 4(a) above.</blockquote>
<p>God forbid. Linking to them might actually cause bandwidth consumption, which could cause expenses! Even <em>with</em> permission, linking to them may not be such a good idea… you might end up having to pay for their bandwidth costs.</p>

<p>I've never seen such a thing. <strong>Are they nuts?</strong> *) (Or their lawyers?) Can they even legally enforce this (under UK law)? I don't think I'll try that really interesting beta product after all. In case you're interested and you are not able to find out who they are from the clues above, you can PM me and I'll tell you their company name — just don't link to them: you've been warned!</p>

<p>*) <em>Update:</em> This company is the very first winner of the <strong><a href="http://my.opera.com/JavaWoman/blog/2008/04/05/the-peanut-award">Peanut Award</a></strong>! <img src="http://files.myopera.com/JavaWoman/files/icons/peanut.png" alt="peanut" /></p>



<p class="tags hide">Tagged:
<a href="/JavaWoman/blog/index.dml/tag/rants" rel="tag">rants</a>,
<a href="/JavaWoman/blog/index.dml/tag/peanut+award" rel="tag">peanut award</a>,
<a href="/JavaWoman/blog/index.dml/tag/nuts" rel="tag">nuts</a>
</p>
<!-- Start of StatCounter Code - since 20080226 -->
<div class="statcounter_image"><a class="statcounter" href="http://www.statcounter.com/free_hit_counter.html"><img src="http://c39.statcounter.com/3462595/0/8225e41f/1/" alt="" style="border:none;" /></a></div>
<!-- End of StatCounter Code --><xhtml:img xmlns:xhtml="http://www.w3.org/1999/xhtml" src="http://feeds.feedburner.com/~r/JavawomanConsiders/~4/_eSner9iS2I" height="1" width="1" /></div></content>
<feedburner:origLink>http://my.opera.com/JavaWoman/blog/show.dml/1873592</feedburner:origLink></entry>
<entry>
  <title type="xhtml" xml:lang="en-US">
    <div xmlns="http://www.w3.org/1999/xhtml" lang="en-US" dir="ltr">Selectoracle: a nifty little tool</div>
  </title>
  <author>
    <name>Marjolein Katsma    </name>
  </author>
  <link href="http://feedproxy.google.com/~r/JavawomanConsiders/~3/bvgWkD8_8qQ/1868943" />
  <id>http://my.opera.com/JavaWoman/blog/1868943</id>
  <updated>2008-04-03T13:35:57Z</updated>
  <content xml:lang="en-US" type="xhtml"><div xmlns="http://www.w3.org/1999/xhtml" lang="en-US" dir="ltr"><p>I came across a handy little online tool today, useful for those who are learning CSS, or just curious.</p>

<p>Trying to tweak your My Opera theme (or otherwise creating a custom stylesheet) and wondering what a complicated selector in the existing stylesheet(s) actually <strong>selects</strong>? Then the <strong><a href="http://penguin.theopalgroup.com/cgi-bin/css3explainer/selectoracle.py">Selectoracle</a></strong> may help. Just paste in one or more selectors (separated by semicolons), or existing whole rulesets, and the Selectoracle will translate that into plain English or Spanish. It even understands CSS3 selectors!</p>

<p>For instance the selector:</p>
<pre><code>ul#tagnav li.first:before,
div.alttagcloud li.first:before</code></pre>
<p>is translated into:</p>
<div class="output">Selects  <span class="pseudo">any content placed before</span>  <strong>a <tt>li</tt> element</strong> with a <tt>class</tt> attribute that contains the word <tt>first</tt>  <em>that is a descendant of</em> <strong>an <tt>ul</tt> element</strong> with an <tt>id</tt> attribute that equals <tt>tagnav</tt> <span class="or-clause">or</span> <span class="pseudo">any content placed before</span>  <strong>a <tt>li</tt> element</strong> with a <tt>class</tt> attribute that contains the word <tt>first</tt>  <em>that is a descendant of</em> <strong>a <tt>div</tt> element</strong> with a <tt>class</tt> attribute that contains the word <tt>alttagcloud</tt>.</div>

<p>The various styles (shown here much like on the Selectoracle page) help in “parsing” the well-formed sentences. Nifty!</p>



<p class="tags hide">Tagged:
<a href="/JavaWoman/blog/index.dml/tag/CSS" rel="tag">CSS</a>
</p>
<!-- Start of StatCounter Code - since 20080226 -->
<div class="statcounter_image"><a class="statcounter" href="http://www.statcounter.com/free_hit_counter.html"><img src="http://c39.statcounter.com/3462595/0/8225e41f/1/" alt="" style="border:none;" /></a></div>
<!-- End of StatCounter Code --><xhtml:img xmlns:xhtml="http://www.w3.org/1999/xhtml" src="http://feeds.feedburner.com/~r/JavawomanConsiders/~4/bvgWkD8_8qQ" height="1" width="1" /></div></content>
<feedburner:origLink>http://my.opera.com/JavaWoman/blog/show.dml/1868943</feedburner:origLink></entry>
<entry>
  <title type="xhtml" xml:lang="en-US">
    <div xmlns="http://www.w3.org/1999/xhtml" lang="en-US" dir="ltr">Opera Dragonfly: is Opera abandoning accessibility?</div>
  </title>
  <author>
    <name>Marjolein Katsma    </name>
  </author>
  <link href="http://feedproxy.google.com/~r/JavawomanConsiders/~3/cPVNg5ouTy4/1847124" />
  <id>http://my.opera.com/JavaWoman/blog/1847124</id>
  <updated>2008-03-28T06:55:25Z</updated>
  <content xml:lang="en-US" type="xhtml"><div xmlns="http://www.w3.org/1999/xhtml" lang="en-US" dir="ltr"><blockquote class="pull">A fast-flying long-bodied predatory insect of the order Odonata, suborder Anisoptera. Valued by humans for their ability to spot and hunt down harmful bugs from great distances</blockquote>
<p><img class="left" alt="accessibility" src="http://files.myopera.com/JavaWoman/files/icons/access_x22.png" />For a while now, Opera has had a teaser page up for <a href="http://www.opera.com/dragonfly/">Opera Dragonfly</a>. Last I looked, it had nothing but a nice image, and a dictionary definition for Dragonfly that is obviously intended to create some buzz — successfully so, since it triggered a <a href="http://my.opera.com/community/forums/topic.dml?id=224737">thread</a> on the My Opera Community forums, with a lot of speculation, and Opera Watch asking <a href="http://operawatch.com/news/2008/02/what-is-opera-dragonfly.html">What is Opera Dragonfly?</a> referring to an equally teasing <a href="http://my.opera.com/dstorey/blog/opera-dragonfly">blog post</a> by David Storey. Opera, meanwhile, still ain't telling.</p>

<p>Now I'm not the type to check such a teaser page every day, but this morning I discovered the <a href="http://www.opera.com/dragonfly/">Opera Dragonfly</a> page has acquired a form where you can subscribe for an e-mail list to receive news about Dragonfly and other upcoming Opera products — <em>if you don't have any visual impairments that is</em>.</p>

<p>What really <strong>bugs</strong> me is that this sign-up form is <strong>totally inaccessible</strong>:</p>
<ul>
<li>no label tags for any of the input fields</li>
<li>JavaScript-controlled "prompts" inside the fields, that confusingly stay as part of the content on focus when JavaScript is not active; even when JavaScript is enabled, that text is <strong>not</strong> a substitute for label tags</li>
<li>text/prompt color inside the entry fields has way too little contrast with the background</li>
<li>text in all text fields is confusingly right-aligned</li>
<li>a visual (image) Captcha to reliably keep out anyone who needs a screen reader, without any alternative</li>
<li>the image used for the submit button doesn't have an alt attribute (required)</li>
</ul>
<div class="imgwide" id="bug1"><img src="http://www.imageox.com/image/210209-hsnap00990.png" class="screenshot" alt="WAVE: many accessibility problems in a small form" /><br />The <a href="http://my.opera.com/JavaWoman/blog/2008/03/09/wave-toolbar-released">WAVE toolbar</a> flags many of the problems in the form</div>

<p>That's really shocking. Are new Opera products not intended to be accessible? If they are, why are they excluding a good part of their target audience?</p>

<p>Generally Opera is quite standards-savvy and My Opera provides a framework that is close to completely accessible (just a few minor things to fix, really) - one of the major reasons why I chose to set up a photo album and blog <em>here</em>. For anonymous comments we even get <em>textual</em> Captchas that are accessible. So <strong>some</strong> people within Opera at least know how to do accessibility.</p>

<p>This subscription form may look "cool" to those of us who are blindless but it isn't cool to be inaccessible!
Whoever designed <em>this</em> form is apparently totally ignorant of even the basics of accessibility, or plain doesn't care.</p>

<p>Let's see... there's a comment at the end of the page:</p>
<pre><code>&lt;!--
  -* Generated by mod-xslt 1.3.9; <a href="http://www.mod-xslt2.com/" target="_blank">http://www.mod-xslt2.com/</a>
  -* Copyright (C) 2002,2003 Carlo Contavalli - &lt;ccontavalli at masobit.net&gt;
  -* derived from work by Philipp Dunkel and others (<a href="http://www.mod-xslt2.com/main/credits.xml" target="_blank">http://www.mod-xslt2.com/main/credits.xml</a>)
  -* Thanks to <a href="http://www.masobit.net/" target="_blank">http://www.masobit.net/</a> for paying me while working on mod-xslt
  -* and for providing resources to the project. --&gt;</code></pre>
<p>
That would mean that either the XML source Opera uses is missing the necessary accessibility features to be translated into an accessible form by mod-xslt2, or the module itself isn't capable of producing accessible forms - or both.</p>

<p>There really is <a href="http://my.opera.com/JavaWoman/blog/2008/03/08/secure-and-accessible-contact-form">no need for a secure form to be inaccessible</a>, and Opera knows it, as evidenced by the blog comment forms. So how did this one get past QA at Opera??</p>


<p class="tags hide">Tagged:
<a href="/JavaWoman/blog/index.dml/tag/accessibility" rel="tag">accessibility</a>,
<a href="/JavaWoman/blog/index.dml/tag/Opera" rel="tag">Opera</a>,
<a href="/JavaWoman/blog/index.dml/tag/Dragonfly" rel="tag">Dragonfly</a>
</p>
<!-- Start of StatCounter Code - since 20080226 -->
<div class="statcounter_image"><a class="statcounter" href="http://www.statcounter.com/free_hit_counter.html"><img src="http://c39.statcounter.com/3462595/0/8225e41f/1/" alt="" style="border:none;" /></a></div>
<!-- End of StatCounter Code -->
<xhtml:img xmlns:xhtml="http://www.w3.org/1999/xhtml" src="http://feeds.feedburner.com/~r/JavawomanConsiders/~4/cPVNg5ouTy4" height="1" width="1" /></div></content>
<feedburner:origLink>http://my.opera.com/JavaWoman/blog/show.dml/1847124</feedburner:origLink></entry>
<entry>
  <title type="xhtml" xml:lang="en-US">
    <div xmlns="http://www.w3.org/1999/xhtml" lang="en-US" dir="ltr">Coolest license agreement ever</div>
  </title>
  <author>
    <name>Marjolein Katsma    </name>
  </author>
  <link href="http://feedproxy.google.com/~r/JavawomanConsiders/~3/zHE9wz-ZBJQ/1840941" />
  <id>http://my.opera.com/JavaWoman/blog/1840941</id>
  <updated>2008-03-25T17:41:53Z</updated>
  <content xml:lang="en-US" type="xhtml"><div xmlns="http://www.w3.org/1999/xhtml" lang="en-US" dir="ltr"><p>I'm downloading and testing a lot of software for my “Nerd-on-a-stick” project (more about that later), and seeing all those MD5 checksums quoted I was reminded again I still did not have a handy hash utility to check those — and I should, of course. I found several freeware ones, a couple that are portable (good for my “Nerd-on-a-stick”), and a shell extension called HashTab. When installing HashTab I had to agree with its license agreement:</p>
<div class="imgwide" id="license"><img src="http://www.imageox.com/image/207761-hsnap00986.png" class="screenshot" alt="License Agreement: “HashTab is the coolest thing ever.”" /></div>

<p>That brought a big smile, so I could hardly disagree! And <a href="http://beeblebrox.org/hashtab/">HashTab</a> is indeed very cool. Read all about it on <a href="http://beeblebrox.org/">Beeblebrox.org</a>, <q>The site that more or less exactly fails to please the senses.</q></p>



<p class="tags hide">Tagged:
<a href="/JavaWoman/blog/index.dml/tag/security" rel="tag">security</a>,
<a href="/JavaWoman/blog/index.dml/tag/freeware" rel="tag">freeware</a>,
</p>
<!-- Start of StatCounter Code - since 20080226 -->
<div class="statcounter_image"><a class="statcounter" href="http://www.statcounter.com/free_hit_counter.html"><img src="http://c39.statcounter.com/3462595/0/8225e41f/1/" alt="" style="border:none;" /></a></div>
<!-- End of StatCounter Code --><xhtml:img xmlns:xhtml="http://www.w3.org/1999/xhtml" src="http://feeds.feedburner.com/~r/JavawomanConsiders/~4/zHE9wz-ZBJQ" height="1" width="1" /></div></content>
<feedburner:origLink>http://my.opera.com/JavaWoman/blog/show.dml/1840941</feedburner:origLink></entry>
<entry>
  <title type="xhtml" xml:lang="en-US">
    <div xmlns="http://www.w3.org/1999/xhtml" lang="en-US" dir="ltr">A first (I think): snow on my birthday!</div>
  </title>
  <author>
    <name>Marjolein Katsma    </name>
  </author>
  <link href="http://feedproxy.google.com/~r/JavawomanConsiders/~3/a29oura2Q0M/1840295" />
  <id>http://my.opera.com/JavaWoman/blog/1840295</id>
  <updated>2008-03-25T12:46:06Z</updated>
  <content xml:lang="en-US" type="xhtml"><div xmlns="http://www.w3.org/1999/xhtml" lang="en-US" dir="ltr"><p>I remember the weather on one birthday quite well, though I was just a child at the time and it's a long time ago: when we came home from school, we quickly dumped our coats inside, and went to play outside in the sun, in just our t-shirts and blouses. That was an exception: it isn't often that warm on this date.</p>

<div class="imgdivr"><a href="http://www.imageox.com/share/207604-100_6362_w.jpeg"><img src="http://www.imageox.com/image/207603-100_6362_w.jpeg" alt="Snow on my birthday" /></a><br />Snow on my birthday<br />(links to larger version)</div><p>Today is an exception, too: not only did we have a White Easter, but the weather stays the same with wintery showers. This morning there was more snow on the ground than I've seen it this winter. And now it's snowing again. I can't remember any birthday with snow — so I just had to take a picture. This is the view from my window (with three very Dutch bikes), taken at around 11:30; earlier this morning it was a lot whiter.</p>

<p>Brrrt!</p>



<p class="tags hide">Tagged:
<a href="/JavaWoman/blog/index.dml/tag/2008" rel="tag">2008</a>,
<a href="/JavaWoman/blog/index.dml/tag/spring" rel="tag">spring</a>,
<a href="/JavaWoman/blog/index.dml/tag/Netherlands" rel="tag">Netherlands</a>,
</p>
<!-- Start of StatCounter Code - since 20080226 -->
<div class="statcounter_image"><a class="statcounter" href="http://www.statcounter.com/free_hit_counter.html"><img src="http://c39.statcounter.com/3462595/0/8225e41f/1/" alt="" style="border:none;" /></a></div>
<!-- End of StatCounter Code --><xhtml:img xmlns:xhtml="http://www.w3.org/1999/xhtml" src="http://feeds.feedburner.com/~r/JavawomanConsiders/~4/a29oura2Q0M" height="1" width="1" /></div></content>
<feedburner:origLink>http://my.opera.com/JavaWoman/blog/show.dml/1840295</feedburner:origLink></entry>
<entry>
  <title type="xhtml" xml:lang="en-US">
    <div xmlns="http://www.w3.org/1999/xhtml" lang="en-US" dir="ltr">Skipping along</div>
  </title>
  <author>
    <name>Marjolein Katsma    </name>
  </author>
  <link href="http://feedproxy.google.com/~r/JavawomanConsiders/~3/ENPyQNdEUy4/1828251" />
  <id>http://my.opera.com/JavaWoman/blog/1828251</id>
  <updated>2008-03-21T22:28:31Z</updated>
  <content xml:lang="en-US" type="xhtml"><div xmlns="http://www.w3.org/1999/xhtml" lang="en-US" dir="ltr"><h2>Coded for accessibility - almost</h2>
<p><img class="accessibility" alt="accessibility" src="http://files.myopera.com/JavaWoman/files/icons/access_x128.png" />One major reason I chose My Opera as a platform for a photo album, and then also as a blogging platform, was its clean, lean, and valid code (<em>well, almost valid</em>). Looking at the source code, I noticed there was even code to enhance the accessibility of the site, such as a “Skip navigation” link - a good thing with all of the navigation links at the top of every page. Unfortunately there is a problem with this link: while the link is present in the XHTML code, the accompanying CSS code makes it disappear completely, so it won't actually <em>be there</em> anywhere except in browsers that do not support CSS. Luckily, My Opera also provides a way for us to use or add our own stylesheet, and we can use that to repair this problem.</p><xhtml:img xmlns:xhtml="http://www.w3.org/1999/xhtml" src="http://feeds.feedburner.com/~r/JavawomanConsiders/~4/ENPyQNdEUy4" height="1" width="1" /></div></content>
<feedburner:origLink>http://my.opera.com/JavaWoman/blog/show.dml/1828251</feedburner:origLink></entry>
<entry>
  <title type="xhtml" xml:lang="en-US">
    <div xmlns="http://www.w3.org/1999/xhtml" lang="en-US" dir="ltr">FAE: More toolbar goodness</div>
  </title>
  <author>
    <name>Marjolein Katsma    </name>
  </author>
  <link href="http://feedproxy.google.com/~r/JavawomanConsiders/~3/jbK9HVCOiP4/1799188" />
  <id>http://my.opera.com/JavaWoman/blog/1799188</id>
  <updated>2008-03-10T22:49:40Z</updated>
  <content xml:lang="en-US" type="xhtml"><div xmlns="http://www.w3.org/1999/xhtml" lang="en-US" dir="ltr"><p><img class="left" alt="accessibility" src="http://files.myopera.com/JavaWoman/files/icons/access_x22.png" />A follow-up to <a href="http://my.opera.com/JavaWoman/blog/2008/03/09/wave-toolbar-released">yesterday's post</a> about the new <a href="http://wave.webaim.org/toolbar">WAVE toolbar</a>: This morning I checked whether there had been any mention of it yet on the <a href="http://www.w3.org/WAI/IG/">WAI IG</a> mailing list — a mailing list for everyone who's interested in accessibility and the <a href="http://www.w3.org/">W3C</a>'s <a href="http://www.w3.org/WAI/">Web Accessibility Initiative</a>. Somewhat to my surprise, there wasn't.</p>

<p>So, I made a quick post to the mailing list to spread the news. Among the reactions was a post from Jon Gunderson of the University of Illinois: not to be outdone by the news about the WAVE toolbar he reported that the new version of the <a href="http://firefox.cita.uiuc.edu/">Firefox Accessibility Extension 1.3</a> also has a built-in accessibility reporting feature.</p>

<p>Now yesterday I did mention using the Accessibility Extension, so why didn't I mention this? Guess what … what I have calls itself the <em>Mozilla</em> Accessibility Extension (and it's version 1.01). I've been using this for ages, actually using it with Mozilla for a long time before I switched to Firefox as my main browser. I regularly check for new versions of my testing tools, but Firefox tells me there's <strong>no update</strong> for this! As a result I had never received notification there <em>was</em> a new version! So I'm thankful for Jon Gunderson's heads up.</p>

<p>He writes:</p><blockquote>The accessibility extension can also create DHTML reports (includes content generated through Javascripting) with the <a href="http://fae.cita.uiuc.edu/">Functional Accessibility Evaluator (FAE)</a> Reporting mechanism.
</blockquote>
<p>My version 1.01 has a link for testing the current page with the <a href="http://fae.cita.uiuc.edu/">online FAE</a>, so if the new version can do that for the <strong>currently rendered</strong> document (including content created or changed with JavaScript), that will be a welcome extension, and an even better companion to the Web Developer extension and the WAVE toolbar.</p>



<p class="tags hide">Tagged:
<a href="/JavaWoman/blog/index.dml/tag/accessibility" rel="tag">accessibility</a>,
<a href="/JavaWoman/blog/index.dml/tag/testing" rel="tag">testing</a>
</p>
<!-- Start of StatCounter Code - since 20080226 -->
<div class="statcounter_image"><a class="statcounter" href="http://www.statcounter.com/free_hit_counter.html"><img src="http://c39.statcounter.com/3462595/0/8225e41f/1/" alt="" style="border:none;" /></a></div>
<!-- End of StatCounter Code --><xhtml:img xmlns:xhtml="http://www.w3.org/1999/xhtml" src="http://feeds.feedburner.com/~r/JavawomanConsiders/~4/jbK9HVCOiP4" height="1" width="1" /></div></content>
<feedburner:origLink>http://my.opera.com/JavaWoman/blog/show.dml/1799188</feedburner:origLink></entry>
<entry>
  <title type="xhtml" xml:lang="en-US">
    <div xmlns="http://www.w3.org/1999/xhtml" lang="en-US" dir="ltr">WAVE toolbar released</div>
  </title>
  <author>
    <name>Marjolein Katsma    </name>
  </author>
  <link href="http://feedproxy.google.com/~r/JavawomanConsiders/~3/d17293Obofc/1796728" />
  <id>http://my.opera.com/JavaWoman/blog/1796728</id>
  <updated>2008-03-09T22:32:56Z</updated>
  <content xml:lang="en-US" type="xhtml"><div xmlns="http://www.w3.org/1999/xhtml" lang="en-US" dir="ltr"><p><img class="left" alt="accessibility" src="http://files.myopera.com/JavaWoman/files/icons/access_x22.png" />I was doing some research for upcoming posts, involving validating pages for syntax and accessibility. I use Firefox for that, where I have installed both the <a href="http://chrispederick.com/work/webdeveloper/">Web Developer Extension</a> and the <a href="https://addons.mozilla.org/mozilla/1891/">Accessibility Extension</a>. Both give handy access to a variety of online testing tools, and while there's some overlap, each has tools the other doesn't so I use both. I was having some temporary problems with <a href="http://www.hisoftware.com/">HiSoftware</a>'s <a href="http://www.cynthiasays.com/">Cynthia Says™</a> so I switched to <a href="http://webaim.org/">WebAIM</a>'s <a href="http://wave.webaim.org/">WAVE</a> for a bit.</p>

<p><img class="imghigh right" src="http://www.imageox.com/image/199295-hsnap878.png" alt="WAVE report icons" />I really like WAVE. It's a free web accessibility evaluation tool, and it's a bit quirky. Its “reports” take some getting used to because they're not really reports: instead, they plaster little icons all over the page … red icons for errors, yellow icons for alerts, green icons for accessibility features, and light blue icons for information and structural elements. It can look a real mess at first, but each icon has a tooltip with a detailed explanation and once you get used to it it's actually very useful: you don't need to go backwards and forwards between a page and a report: the page <strong>is</strong> the report. I went through all my pages here on My Opera (some warnings I have to fix, and some errors Opera should fix, but that's for a later post), and then noticed they now have a <a href="http://wave.webaim.org/blog/">blog</a>, so I went and had a look.</p>

<blockquote class="pull">This allows secure evaluation of password protected, intranet, dynamically generated, or sensitive web pages.</blockquote>
<p>Well, the paint isn't even dry on that yet! The first post was last Thursday, announcing the blog, and then there's yesterday's post, announcing the release of the WAVE toolbar. That's great news, because unlike the <strong>online</strong> testing tools the Web Developer and Accessibility toolbars give access to, this actually works on the page as it's rendered inside Firefox. The advantage of that is that what it tests is the result of the (X)HTML code plus all stylesheets and even JavaScript applied to it … something the online tools can't do. So if your stylesheets and JavaScript are selectively hiding and unhiding page elements, you can now test the <strong>result</strong> of that. That's a really exciting feature!</p>

<p>Even though this toolbar is officially still in beta, I would say this is already <strong>essential kit for web developers</strong>, just like the Web Developer extension and the Accessibility extension. It's certainly a welcome new member of my testing team since I immediately downloaded and installed it. I also have a wish list already:</p>
<ol>
	<li>I'd like an option to show icons only, no text: the toolbar is just a bit too wide to fit on a 800px-wide browser window</li>
	<li>And while looking for such an option I naturally gravitated to the “Options” button which provides a number of <strong>functions</strong> (like testing the page with the online version of WAVE), but no <strong>options</strong>! So call that “Extra” or something, and provide a button to specify some options, like icons without text!</li>
</ol>
<p>But both of those are cosmetic, really. My first run-through did not show anything amiss. Welcome to my toolbox!</p>



<p class="tags hide">Tagged:
<a href="/JavaWoman/blog/index.dml/tag/accessibility" rel="tag">accessibility</a>,
<a href="/JavaWoman/blog/index.dml/tag/testing" rel="tag">testing</a>
</p>
<!-- Start of StatCounter Code - since 20080226 -->
<div class="statcounter_image"><a class="statcounter" href="http://www.statcounter.com/free_hit_counter.html"><img src="http://c39.statcounter.com/3462595/0/8225e41f/1/" alt="" style="border:none;" /></a></div>
<!-- End of StatCounter Code --><xhtml:img xmlns:xhtml="http://www.w3.org/1999/xhtml" src="http://feeds.feedburner.com/~r/JavawomanConsiders/~4/d17293Obofc" height="1" width="1" /></div></content>
<feedburner:origLink>http://my.opera.com/JavaWoman/blog/show.dml/1796728</feedburner:origLink></entry>
<entry>
  <title type="xhtml" xml:lang="en-US">
    <div xmlns="http://www.w3.org/1999/xhtml" lang="en-US" dir="ltr">Secure and accessible contact form</div>
  </title>
  <author>
    <name>Marjolein Katsma    </name>
  </author>
  <link href="http://feedproxy.google.com/~r/JavawomanConsiders/~3/6mrNMf5ip6A/1794342" />
  <id>http://my.opera.com/JavaWoman/blog/1794342</id>
  <updated>2008-03-08T22:54:08Z</updated>
  <content xml:lang="en-US" type="xhtml"><div xmlns="http://www.w3.org/1999/xhtml" lang="en-US" dir="ltr"><p><img class="left" alt="accessibility" src="http://files.myopera.com/JavaWoman/files/icons/access_x22.png" />I just stumbled upon this <a href="http://green-beast.com/gbcf-v3/">contact form script</a> — written in PHP by <a href="http://green-beast.com/">Mike Cherim</a>, with lots and lots of options, secure (anti-spam measures) and at the same time <strong>accessible</strong>: look at that long list of features, and try it out in the <a href="http://green-beast.com/gbcf-v3/test-form.php">demo</a>.</p>

<p>This version 3 is very new (11 February) and doesn't exist in plugin form yet, but version two (<a href="http://green-beast.com/gbcf/gbcf_form.php">demo</a>) is also available as a <a href="http://green-beast.com/blog/?page_id=136">Wordpress plugin</a>.</p>

<p>I can use this on some of my sites! Downloading as I write…</p>



<p class="tags hide">Tagged:
<a href="/JavaWoman/blog/index.dml/tag/accessibility" rel="tag">accessibility</a>,
<a href="/JavaWoman/blog/index.dml/tag/security" rel="tag">security</a>,
<a href="/JavaWoman/blog/index.dml/tag/development" rel="tag">development</a>,
<a href="/JavaWoman/blog/index.dml/tag/PHP" rel="tag">PHP</a>
</p>
<!-- Start of StatCounter Code - since 20080226 -->
<div class="statcounter_image"><a class="statcounter" href="http://www.statcounter.com/free_hit_counter.html"><img src="http://c39.statcounter.com/3462595/0/8225e41f/1/" alt="" style="border:none;" /></a></div>
<!-- End of StatCounter Code --><xhtml:img xmlns:xhtml="http://www.w3.org/1999/xhtml" src="http://feeds.feedburner.com/~r/JavawomanConsiders/~4/6mrNMf5ip6A" height="1" width="1" /></div></content>
<feedburner:origLink>http://my.opera.com/JavaWoman/blog/show.dml/1794342</feedburner:origLink></entry>
<entry>
  <title type="xhtml" xml:lang="en-US">
    <div xmlns="http://www.w3.org/1999/xhtml" lang="en-US" dir="ltr">My Opera does image links</div>
  </title>
  <author>
    <name>Marjolein Katsma    </name>
  </author>
  <link href="http://feedproxy.google.com/~r/JavawomanConsiders/~3/6MZWlgAybQc/1791737" />
  <id>http://my.opera.com/JavaWoman/blog/1791737</id>
  <updated>2008-03-07T22:05:36Z</updated>
  <content xml:lang="en-US" type="xhtml"><div xmlns="http://www.w3.org/1999/xhtml" lang="en-US" dir="ltr"><h2>Really?</h2>
<p><img class="tweaking" alt="tweaking" src="http://files.myopera.com/JavaWoman/files/icons/kcontrol_x128.png" />An image link generally is simply an image (<tt>img</tt>) tag, with a link (<tt>a</tt>) tag wrapped around it. As long as you take care to give the image a meaningful alt text, people who cannot see the image will get the equivalent of a textual link: just consider what link text you would have used if it were a text link, and use that text as the alt text for the image: that will make your image link accessible.</p>
<p>In My Opera, you can certainly use image links like that in your blog posts, since you can use (almost) whatever XHTML code you like. So what am I on about? Well, in most blogs around the web you can use bits of (X)HTML for sidebar blocks, too, so for various lists of links you often see nice “link buttons” or even collections of so-called “micro buttons” there. But when you go and define some links here on My Opera, to put on your Links page, or in the sidebar, you see a form like this:</p>

<div class="imgwide" id="bug1"><img src="http://www.imageox.com/image/199286-hsnap870a.png" class="screenshot" alt="links form" /></div>
<div><p style="margin: 0 10%"><img src="http://files.myopera.com/JavaWoman/files/icons/bug_x22.png" alt="bug" class="left" />
Actually, that big bad “DELETE CATEGORY” button at the top left of the form is a bug. It’s not even a button, but an image link ;) but apart from that, on a form to create a <em>new</em> category, there’s no category to delete — it shouldn’t be there at all!
</p></div>

<img class="imghigh left" src="http://www.imageox.com/image/199287-hsnap844.png" alt="simple links" /><p>I was a bit confused by that form at first, since there is no explanation for how to use it to build links. Now “URL” is clear enough, that will be the URL we want to link to; but “Name”? I guessed that would be the content of the link element, and for my first link I wanted to create I wanted to make it an image link; since we can use XHTML in our blog posts, I simply typed in an image tag there, and then added a bit of a description.</p>

<p>Well, that image link turned out to have the <strong>XHTML code</strong> for the image as the link <strong>text</strong>. So, we can’t simply make image links for our Links page or side bar. I also saw that (on the links page) the actual URL was added as text as well - only any longish URL gets truncated, which makes printing that text pretty useless; that was quickly solved by simply hiding the URL with my stylesheet.
With some further tweaking for link color, my first links then looked like the sample screen shot you see here.</p>

<h2 class="clear">Yes, really!</h2>
<p>I’ve already hinted at it: while we can’t use XHTML everywhere, we <em>can</em> use CSS - either to override our chosen theme’s styling, or even to completely style it ourselves. I chose a simple theme (the red “Opera” theme, ID “103”), and started tweaking.
The good news is: using CSS, we can turn an ordinary text link into a nice (and still pretty accessible) image link.
The trick is basically a simple form of “image replacement”: we select the link, shift the text way off the browser window, and then use the image we want as the link’s <strong>background</strong> image. I wanted a “add to Technorati favorites” link, and <a href="http://technorati.com">Technorati</a> provides a number of nice link images for that, so let’s use that as our example:</p>

<div class="imgwide"><img src="http://www.imageox.com/image/199288-hsnap846.png" class="screenshot" alt="CSS for image link - step 1" /></div>
<p>Our first task is to select the particular link we want. To do this, we use so-called attribute selector that selects an element based on (the value of) one of its attributes. The most handy format (actually CSS3, not a standard yet) is to use a “substring matching attribute selector” to pick out a link with a URL that <strong>contains</strong> a particular value:</p>
<pre><code>a[href*="technorati.com"] {}
</code></pre>
<p>The “<tt>*=</tt>” bit in there means “contains”, and “technorati.com” is in this case sufficient to locate a link to Technorati. But we don’t want any link in any blog post to become an image link, so we add a bit of context to that by specifying only links that occur on the Links page (inside a div with class “linkinfo”) or in the sidebar (inside a div with class “sidelinx”); the latter also applies to any links marked as “Favorites”, appearing on the About page.</p>
<pre><code>div.linkinfo a[href*="technorati.com"],
div.sidelinx a[href*="technorati.com"]
{}
</code></pre>
<p>we then set the properties: a left padding of 2500 pixels keeps the link in place but shifts the link text way to the right; then we give it the Technorati favorite image as background image, and make sure it’s not repeated. The basics for our image link is done.</p>

<div class="imgwide"><img src="http://www.imageox.com/image/199289-hsnap848a.png" class="screenshot" alt="CSS for image link - step 2" /></div>
<p>Now to refine it a bit: our background image may actually be higher than the link text, and if we don’t tweak that, it will be cut off.  This particular image is 25 pixels high, and to match that we apply a matching line height as well as a height to the link. Since an <tt>a</tt> element is really an inline element, we can’t directly give it a height, so to make that stick we also need to override its normal display and state it should be treated as a block, which <em>can</em> have a height specified. That’s it!</p>

<div class="imgwide"><img src="http://www.imageox.com/image/199290-hsnap849a.png" class="screenshot" alt="CSS for image link - step 3" /></div>
<p>Well, almost. It turns out our image includes a bit of a white border, which makes it look indented with respect to the description below it. That is fixed by shifting it 4 pixels to the left: using background-position we can specify the horizontal (x) and vertical (y) position of the background image, starting from the top left of the element:</p>
<pre><code>background-position: -4px 0px;
</code></pre>
<p>Negative values are allowed here, so the -4px shifts the image 4 pixels to the left. The complete code for this “image link” is now:</p>
<pre><code>div.linkinfo a[href*="technorati.com"],
div.sidelinx a[href*="technorati.com"]
{
  display: block;
  padding-left: 2500px;
  height: 25px;
  line-height: 25px;
  background-image: url(<a href="http://static.technorati.com/pix/fave/tech-fav-1.png" target="_blank">http://static.technorati.com/pix/fave/tech-fav-1.png</a>);
  background-repeat: no-repeat;
  background-position: -4px 0px;
}
</code></pre>
<p>That’s the basic model for using a background image for creating an image link out of an ordinary text link. I did the same for a link to <a href="http://www.iconbuffet.com/people/new?ref=iamback">Icon Buffet</a>, only this time with an image I uploaded to the My Opera server. The whole block of CSS now looks like this:</p>
<div class="imgwide"><img src="http://www.imageox.com/image/199291-hsnap845.png" class="screenshot" alt="CSS for two image links" /></div>

<h2>Good news and bad news</h2>
<img class="imghigh right" src="http://www.imageox.com/image/199292-hsnap843.png" alt="image links!" /><p>The result: The last screen shot shows how these image links currently look in the side bar (have a look!). Isn’t that cool? Note the icons next to the section headings? Those are background images, too (I’ll be tweaking those a bit more). The good news is that this will work in all <strong>modern</strong> graphical browsers. Yes, even in Internet Explorer 7. It actually works in Gecko-based browsers (Firefox and its sisters), Safari, Konqueror, Opera9 and IE7.</p>

<p>Unfortunately, there’s bad news, too: Internet Explorer 6 does not support attribute selectors. <strong>At all</strong>. Not even good old CSS2 attribute selectors. And according to <a href="http://os.hitslink.com/report.aspx?qprid=125&amp;qpmr=15&amp;qpdt=1&amp;qpct=3&amp;qptimeframe=M&amp;qpsp=109">hitslink.com</a>, in February 2008 IE6 still had a market share of 30%; if you browse back in time a bit though, you can see that this market share is gradually decreasing. And actually, the news is not really terrible: in IE6 our “image links” will simply continue to look like ordinary text links, because the links to apply it to are never selected: nothing broken, just not as pretty.</p>

<h2>References</h2>
<p>Finally, for the technically-minded,a few references:</p>
<ul>
<li><a href="http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(CSS)">Comparison of layout engines (CSS)</a> on Wikipedia</li>
<li>attribute substrings in <a href="http://www.w3.org/TR/css3-selectors/#attribute-substrings">Selectors</a> from the W3C working draft for CSS3</li>
<li><a href="http://codylindley.com/Webdev/298/ie-7-supports-more-css-selectors-whip-e-dee-doo-da">IE 7 Supports More CSS Selectors, Whip-e-dee-doo-da</a> by Cody Lindley</li>
</ul>

<p>In a following My Opera tweaks article (yes, there will be more) I’ll be exploring background images for a completely different purpose! Stay tuned.</p>



<p class="tags hide">Tagged:
<a href="/JavaWoman/blog/index.dml/tag/My%20Opera" rel="tag">My Opera</a>,
<a href="/JavaWoman/blog/index.dml/tag/tweaks" rel="tag">tweaks</a>,
<a href="/JavaWoman/blog/index.dml/tag/CSS" rel="tag">CSS</a>
</p>
<!-- Start of StatCounter Code - since 20080226 -->
<div class="statcounter_image"><a class="statcounter" href="http://www.statcounter.com/free_hit_counter.html"><img src="http://c39.statcounter.com/3462595/0/8225e41f/1/" alt="" style="border:none;" /></a></div>
<!-- End of StatCounter Code --><xhtml:img xmlns:xhtml="http://www.w3.org/1999/xhtml" src="http://feeds.feedburner.com/~r/JavawomanConsiders/~4/6MZWlgAybQc" height="1" width="1" /></div></content>
<feedburner:origLink>http://my.opera.com/JavaWoman/blog/show.dml/1791737</feedburner:origLink></entry>
<entry>
  <title type="xhtml" xml:lang="en-US">
    <div xmlns="http://www.w3.org/1999/xhtml" lang="en-US" dir="ltr">Kyrgyz cheese spread “Olga”</div>
  </title>
  <author>
    <name>Marjolein Katsma    </name>
  </author>
  <link href="http://feedproxy.google.com/~r/JavawomanConsiders/~3/bWw2g1qkHGo/1786364" />
  <id>http://my.opera.com/JavaWoman/blog/1786364</id>
  <updated>2008-03-05T17:37:35Z</updated>
  <content xml:lang="en-US" type="xhtml"><div xmlns="http://www.w3.org/1999/xhtml" lang="en-US" dir="ltr"><div class="imgdivr"><a href="http://my.opera.com/JavaWoman/albums/showpic.dml?album=484780&amp;picture=6692598"><img src="http://files.myopera.com/JavaWoman/blog/100_6314_w200.jpg" alt="Kyrgyz cheese spread" /></a><br />Cheese spread just done, with some freshly grated pepper</div>
<p>On my first trip in Kyrgyzstan, our cook was Olga, a spontaneous ethnic Russian Kyrgyz girl with a mass of black curls and a lovely voice … she loved to sing and would forever ask us to sing Dutch songs which was embarrassing since we hardly have a “song” culture any more.</p>

<p>Kyrgyzstan, being scarcely populated by a largely nomadic population, has a lot of dairy products, and Olga made good use of it. We were supposed to help out with cooking, and one of the first days she had us all grating cheese, and peeling garlic and putting the cloves through a garlic press. When she judged we'd made enough, she disappeared with it, and the next morning, with our breakfast, bowls with what I can only call “cheese spread” appeared on the table, to be put on our bread. Everyone loved it, so we begged Olga again and again to have more of it.</p>

<p>We never found out exactly what went in it (apart from our grated cheese and garlic … goat cream? mare's milk cream?), but at home I experimented until I had something that came very close. Here's what you need:</p>

<ul>
<li>125 or 200ml Sour cream (creme fraiche)</li>
<li>125-220g Finely grated “strong” cheese, like old Gouda or a tasty Italian cheese</li>
<li>A few cloves of garlic</li>
<li>Some freshly-ground pepper to taste</li>
</ul>

<p>You can make as much as you like, but the proportion works like this: you need about an equal number of grams of cheese (or a little bit more) as you have milliliters of sour cream. The cheese should really be finely grated; if it comes as long slivers, try making it finer first: the finer it is, the better it mixes with the cream. Then you need (at least) one big clove of garlic for every 100ml of cream.</p>

<p>First put your sour cream in a bowl or deep dish. Then peel your garlic cloves, and put them through the press above the cream, and mix it through. Then gradually add your grated cheese, in batches, stirring in each batch until it is evenly mixed, until you have enough cheese mixed in that the cream is no longer fluid but forms a firm mass with the cheese. If you like, grate a little pepper on it … I like using “four season pepper”, a mixture of four types of peppercorns.</p>

<div class="imgdivl"><a href="http://my.opera.com/JavaWoman/albums/showpic.dml?album=484780&amp;picture=6692599"><img src="http://files.myopera.com/JavaWoman/blog/100_6315_w200.jpg" alt="Kyrgyz cheese spread on dark bread" /></a><br />Kyrgyz cheese spread on dark whole wheat bread</div>
<p>This batch was made with a 200ml cup of sour cream and a little over 200g of grated cheese, a mixture of mostly Gouda and a bit left-over Italian. Very good on black rye bread or a coarse whole-wheat bread — and don't spread it too thinly!</p>

<p><em>Images link to the full-size version in the <a href="http://my.opera.com/JavaWoman/albums/show.dml?id=484780">Concoctions</a> album.</em></p>



<p class="tags hide">Tagged:
<a href="/JavaWoman/blog/index.dml/tag/recipes" rel="tag">recipes</a>,
<a href="/JavaWoman/blog/index.dml/tag/cheese" rel="tag">cheese</a>,
<a href="/JavaWoman/blog/index.dml/tag/sour%20cream" rel="tag">sour cream</a>,
<a href="/JavaWoman/blog/index.dml/tag/Kyrgyzstan" rel="tag">Kyrgyzstan</a>
</p>
<!-- Start of StatCounter Code - since 20080226 -->
<div class="statcounter_image"><a class="statcounter" href="http://www.statcounter.com/free_hit_counter.html"><img src="http://c39.statcounter.com/3462595/0/8225e41f/1/" alt="" style="border:none;" /></a></div>
<!-- End of StatCounter Code --><xhtml:img xmlns:xhtml="http://www.w3.org/1999/xhtml" src="http://feeds.feedburner.com/~r/JavawomanConsiders/~4/bWw2g1qkHGo" height="1" width="1" /></div></content>
<feedburner:origLink>http://my.opera.com/JavaWoman/blog/show.dml/1786364</feedburner:origLink></entry>
<entry>
  <title type="xhtml" xml:lang="en-US">
    <div xmlns="http://www.w3.org/1999/xhtml" lang="en-US" dir="ltr">Signing up for Technorati</div>
  </title>
  <author>
    <name>Marjolein Katsma    </name>
  </author>
  <link href="http://feedproxy.google.com/~r/JavawomanConsiders/~3/ByHhB_IqnCE/1765193" />
  <id>http://my.opera.com/JavaWoman/blog/1765193</id>
  <updated>2008-02-25T20:31:10Z</updated>
  <content xml:lang="en-US" type="xhtml"><div xmlns="http://www.w3.org/1999/xhtml" lang="en-US" dir="ltr"><p>Now that I'm more or less settled in here, I'm looking to promoting this little blog. One obvious first stop is <a href="http://technorati.com/">Technorati</a>, and I was curious whether I would be able to register this blog with them, given that one does not have access to a web root (to create a “signature” file) and no JavaScript can be embedded anywhere.</p>

<p>I'm half-way through the process now — I needn't have worried. All that they require to “claim” your blog, is to give them the URL (of course) and then create a post on it with a special link to your <a href="http://technorati.com/claim/ejid7jy489" rel="me">Technorati Profile</a>. &lt;= That's the link!</p>

<p>Once the post is live, I need tell them about it, so I'll do that now. You can always delete the post later, they say, but I don't intend to do that: rather, I'd like to record how I'm setting up this blog and tweaking it, and this is obviously part of that process.</p>
<div class="imgwide"><img src="http://www.imageox.com/image/198955-hsnap738a.png" class="screenshot" alt="blog claim successfully configured" /></div>



<p class="tags hide">Tagged:
<a href="/JavaWoman/blog/index.dml/tag/claim" rel="tag">claim</a>,
<a href="/JavaWoman/blog/index.dml/tag/Technorati" rel="tag">Technorati</a>,
<a href="/JavaWoman/blog/index.dml/tag/blog" rel="tag">blog</a>
</p>
<!-- Start of StatCounter Code - since 20080226 -->
<div class="statcounter_image"><a class="statcounter" href="http://www.statcounter.com/free_hit_counter.html"><img src="http://c39.statcounter.com/3462595/0/8225e41f/1/" alt="" style="border:none;" /></a></div>
<!-- End of StatCounter Code -->
<xhtml:img xmlns:xhtml="http://www.w3.org/1999/xhtml" src="http://feeds.feedburner.com/~r/JavawomanConsiders/~4/ByHhB_IqnCE" height="1" width="1" /></div></content>
<feedburner:origLink>http://my.opera.com/JavaWoman/blog/show.dml/1765193</feedburner:origLink></entry>
<entry>
  <title type="xhtml" xml:lang="en-US">
    <div xmlns="http://www.w3.org/1999/xhtml" lang="en-US" dir="ltr">Storms and catkins III</div>
  </title>
  <author>
    <name>Marjolein Katsma    </name>
  </author>
  <link href="http://feedproxy.google.com/~r/JavawomanConsiders/~3/jVXex6Wj3D8/1762964" />
  <id>http://my.opera.com/JavaWoman/blog/1762964</id>
  <updated>2008-02-24T22:37:23Z</updated>
  <content xml:lang="en-US" type="xhtml"><div xmlns="http://www.w3.org/1999/xhtml" lang="en-US" dir="ltr"><div class="imgdivr"><a href="http://my.opera.com/JavaWoman/albums/showpic.dml?album=477119&amp;picture=6607228"><img src="http://files.myopera.com/JavaWoman/blog/100_6249_w200.jpg" alt="fallen catkin" /></a><br />In this fallen catkin the delicate details can be clearly seen</div><p>I took my catkins out for new photographs again this morning to get the best light. It proved a fiddly undertaking: there was a blustery wind, and because the catkins have grown so much, they catch a lot more wind, too. Almost the first thing that happened was that my little jar was blown over — luckily it didn't drop onto the balcony floor.</p>

<p>One catkin had broken off as a result and I took some close-ups of it; this one is the best: you can not only see the delicate white petals (or sepals?) with their frilly edges, but also that the stamens (I think that's what they are) are darkening and shrinking at the end while the yellow pollen is coming out. At the top the rolled-up leaves that originally covered the whole bud: these would fall off, except that they are so sticky that most stay “glued” to the catkin.</p>

<div class="imgdivr"><a href="http://my.opera.com/JavaWoman/albums/showpic.dml?album=477119&amp;picture=6607227"><img src="http://files.myopera.com/JavaWoman/blog/100_6263_200x267.jpg" alt="wind-blown catkin" /></a><br />Blowing in the wind…</div><p>I tried to take a picture of the longest one — all of 11cm long now, but with the gusty wind that was almost impossible. Alas, by now they are all shriveling and darkening: maybe it's too warm for them inside or they don't soak up water. So this will be the last of the catkins adventure.</p>

<p><em>Click on an image to see the larger album version; the album also has a few more pictures not shown in these blog posts!</em></p>



<p class="tags hide">Tagged:
<a href="/JavaWoman/blog/index.dml/tag/spring" rel="tag">spring</a>,
<a href="/JavaWoman/blog/index.dml/tag/Netherlands" rel="tag">Netherlands</a>,
<a href="/JavaWoman/blog/index.dml/tag/2008" rel="tag">2008</a>
</p>
<!-- Start of StatCounter Code - since 20080226 -->
<div class="statcounter_image"><a class="statcounter" href="http://www.statcounter.com/free_hit_counter.html"><img src="http://c39.statcounter.com/3462595/0/8225e41f/1/" alt="" style="border:none;" /></a></div>
<!-- End of StatCounter Code --><xhtml:img xmlns:xhtml="http://www.w3.org/1999/xhtml" src="http://feeds.feedburner.com/~r/JavawomanConsiders/~4/jVXex6Wj3D8" height="1" width="1" /></div></content>
<feedburner:origLink>http://my.opera.com/JavaWoman/blog/show.dml/1762964</feedburner:origLink></entry>
<entry>
  <title type="xhtml" xml:lang="en-US">
    <div xmlns="http://www.w3.org/1999/xhtml" lang="en-US" dir="ltr">Storms and catkins II</div>
  </title>
  <author>
    <name>Marjolein Katsma    </name>
  </author>
  <link href="http://feedproxy.google.com/~r/JavawomanConsiders/~3/vn5KsVEJfBU/1759231" />
  <id>http://my.opera.com/JavaWoman/blog/1759231</id>
  <updated>2008-02-23T09:56:51Z</updated>
  <content xml:lang="en-US" type="xhtml"><div xmlns="http://www.w3.org/1999/xhtml" lang="en-US" dir="ltr"><div class="imgdivr"><a href="http://my.opera.com/JavaWoman/albums/showpic.dml?album=477119&amp;picture=6596375"><img src="http://files.myopera.com/JavaWoman/blog/100_6246_w200.jpg" alt="catkins" /></a></div><p>One day later... I took a few more pictures of the <a href="http://my.opera.com/JavaWoman/blog/2008/02/22/storms-and-catkins">rescued catkins</a> to record how they are growing.</p>

<div class="imgdivl"><a href="http://my.opera.com/JavaWoman/albums/showpic.dml?album=477119&amp;picture=6596374"><img src="http://files.myopera.com/JavaWoman/blog/100_6244_200x267.jpg" alt="fastest growing catkin" /></a></div><p>I am quite struck by the speed difference: some seem to be growing much faster than others. Maybe some branches were just farther along anyway, but it's also possible some were blown off the tree earlier than others and had become dried out a bit. I'll give them some fresh water and crush the lower end of the stems a bit more, so they can take advantage of it.</p>



<p class="tags hide">Tagged:
<a href="/JavaWoman/blog/index.dml/tag/spring" rel="tag">spring</a>,
<a href="/JavaWoman/blog/index.dml/tag/Netherlands" rel="tag">Netherlands</a>,
<a href="/JavaWoman/blog/index.dml/tag/2008" rel="tag">2008</a>
</p>
<!-- Start of StatCounter Code - since 20080226 -->
<div class="statcounter_image"><a class="statcounter" href="http://www.statcounter.com/free_hit_counter.html"><img src="http://c39.statcounter.com/3462595/0/8225e41f/1/" alt="" style="border:none;" /></a></div>
<!-- End of StatCounter Code --><xhtml:img xmlns:xhtml="http://www.w3.org/1999/xhtml" src="http://feeds.feedburner.com/~r/JavawomanConsiders/~4/vn5KsVEJfBU" height="1" width="1" /></div></content>
<feedburner:origLink>http://my.opera.com/JavaWoman/blog/show.dml/1759231</feedburner:origLink></entry>
<entry>
  <title type="xhtml" xml:lang="en-US">
    <div xmlns="http://www.w3.org/1999/xhtml" lang="en-US" dir="ltr">Storms and catkins</div>
  </title>
  <author>
    <name>Marjolein Katsma    </name>
  </author>
  <link href="http://feedproxy.google.com/~r/JavawomanConsiders/~3/SU-tKHdOlWE/1758258" />
  <id>http://my.opera.com/JavaWoman/blog/1758258</id>
  <updated>2008-02-22T21:15:00Z</updated>
  <content xml:lang="en-US" type="xhtml"><div xmlns="http://www.w3.org/1999/xhtml" lang="en-US" dir="ltr"><div class="imgdivl"><a href="http://my.opera.com/JavaWoman/albums/showpic.dml?album=477119&amp;picture=6593314"><img src="http://files.myopera.com/JavaWoman/blog/100_6239_w200.jpg" alt="branches with catkins in a jar" /></a></div><div class="imgdivl"><a href="http://my.opera.com/JavaWoman/albums/showpic.dml?album=477119&amp;picture=6593313"><img src="http://files.myopera.com/JavaWoman/blog/100_6240_w200.jpg" alt="catkins (closeup)" /></a></div><div class="imgdivl"><a href="http://my.opera.com/JavaWoman/albums/showpic.dml?album=477119&amp;picture=6593315"><img src="http://files.myopera.com/JavaWoman/blog/100_6238_w200.jpg" alt="catkins" /></a></div>
<p>Spring seems to come ever earlier here. It's only Februari, but birds are singing as if it's March, and many daffodils seem to be blooming a week early. Some trees are budding, too, also seemingly earlier than normal. But Februari is also still the storm season, and we've been having some strong wind lately.</p>

<p>Yesterday, when I was walking home, I passed below a few tall trees. A lot of small branches had been blown off in the strong wind and when I took a closer look, they had sprouting buds - it looked as if they would become some kind of catkins. I have no idea what type of tree this was, and normally the branches are much too high to see details like this. On a whim, I picked up a few of the budding branches, and took them home where I put them in a little jar.</p>

<p>When I woke up this morning, most of the buds were already twice the size they were yesterday! I took a few pictures - I think they are quite beautiful. And now, when I'm writing this, they have already grown even more. I'll try to take a few more pictures tomorrow.</p>

<p>Does anyone know what kind of tree this is?</p>



<p class="tags hide">Tagged:
<a href="/JavaWoman/blog/index.dml/tag/spring" rel="tag">spring</a>,
<a href="/JavaWoman/blog/index.dml/tag/Netherlands" rel="tag">Netherlands</a>,
<a href="/JavaWoman/blog/index.dml/tag/2008" rel="tag">2008</a>
</p>
<!-- Start of StatCounter Code - since 20080226 -->
<div class="statcounter_image"><a class="statcounter" href="http://www.statcounter.com/free_hit_counter.html"><img src="http://c39.statcounter.com/3462595/0/8225e41f/1/" alt="" style="border:none;" /></a></div>
<!-- End of StatCounter Code --><xhtml:img xmlns:xhtml="http://www.w3.org/1999/xhtml" src="http://feeds.feedburner.com/~r/JavawomanConsiders/~4/SU-tKHdOlWE" height="1" width="1" /></div></content>
<feedburner:origLink>http://my.opera.com/JavaWoman/blog/show.dml/1758258</feedburner:origLink></entry>
<entry>
  <title type="xhtml" xml:lang="en-US">
    <div xmlns="http://www.w3.org/1999/xhtml" lang="en-US" dir="ltr">Friends died?</div>
  </title>
  <author>
    <name>Marjolein Katsma    </name>
  </author>
  <link href="http://feedproxy.google.com/~r/JavawomanConsiders/~3/M8M9CriU5FI/1757431" />
  <id>http://my.opera.com/JavaWoman/blog/1757431</id>
  <updated>2008-02-22T14:25:09Z</updated>
  <content xml:lang="en-US" type="xhtml"><div xmlns="http://www.w3.org/1999/xhtml" lang="en-US" dir="ltr"><div class="imgwide"><img src="http://www.imageox.com/image/198947-hsnap668.png" alt="XWA::User::Friends died.." /></div><p>I just tried to reload my <a href="http://my.opera.com/JavaWoman/blog/show.dml/1754768">last blog post</a> and was treated to this somewhat alarming error message - Friends died? I surely hope not! :yikes:</p>

<p>Could Opera come up with a somewhat more user-<em>friendly</em> message? ;)</p>

<p>Oh, and Opera: a <em>period</em>, ending a sentence, is just <strong>one</strong> dot; an <em>ellipsis</em>, indicating something removed, or more to follow, is <strong>three</strong> dots, or more appropriately and typographically correct, the <strong>ellipsis character</strong>: … (that's <code>…</code> as a character entity reference).</p>



<p class="tags hide">Tagged:
<a href="/JavaWoman/blog/index.dml/tag/blog" rel="tag">blog</a>,
<a href="/JavaWoman/blog/index.dml/tag/server%20error" rel="tag">server error</a>,
<a href="/JavaWoman/blog/index.dml/tag/My%20Opera" rel="tag">My Opera</a>
</p>
<!-- Start of StatCounter Code - since 20080226 -->
<div class="statcounter_image"><a class="statcounter" href="http://www.statcounter.com/free_hit_counter.html"><img src="http://c39.statcounter.com/3462595/0/8225e41f/1/" alt="" style="border:none;" /></a></div>
<!-- End of StatCounter Code -->
<xhtml:img xmlns:xhtml="http://www.w3.org/1999/xhtml" src="http://feeds.feedburner.com/~r/JavawomanConsiders/~4/M8M9CriU5FI" height="1" width="1" /></div></content>
<feedburner:origLink>http://my.opera.com/JavaWoman/blog/show.dml/1757431</feedburner:origLink></entry>
<entry>
  <title type="xhtml" xml:lang="en-US">
    <div xmlns="http://www.w3.org/1999/xhtml" lang="en-US" dir="ltr">Mail from my phone</div>
  </title>
  <author>
    <name>Marjolein Katsma    </name>
  </author>
  <link href="http://feedproxy.google.com/~r/JavawomanConsiders/~3/-8d_CV-jWn0/1754768" />
  <id>http://my.opera.com/JavaWoman/blog/1754768</id>
  <updated>2008-02-21T11:36:09Z</updated>
  <content xml:lang="en-US" type="xhtml"><div xmlns="http://www.w3.org/1999/xhtml" lang="en-US" dir="ltr">Since MMS photo blogging from my didn't work, let's see whether sending an email from my phone works...<br />
<br />
------<br />
JavaWoman



<p class="tags hide">Tagged:
<a href="/JavaWoman/blog/index.dml/tag/email" rel="tag">email</a>,
<a href="/JavaWoman/blog/index.dml/tag/phone" rel="tag">phone</a>,
<a href="/JavaWoman/blog/index.dml/tag/My%20Opera" rel="tag">My Opera</a>,
<a href="/JavaWoman/blog/index.dml/tag/blog" rel="tag">blog</a>
</p>
<!-- Start of StatCounter Code - since 20080226 -->
<div class="statcounter_image"><a class="statcounter" href="http://www.statcounter.com/free_hit_counter.html"><img src="http://c39.statcounter.com/3462595/0/8225e41f/1/" alt="" style="border:none;" /></a></div>
<!-- End of StatCounter Code --><xhtml:img xmlns:xhtml="http://www.w3.org/1999/xhtml" src="http://feeds.feedburner.com/~r/JavawomanConsiders/~4/-8d_CV-jWn0" height="1" width="1" /></div></content>
<feedburner:origLink>http://my.opera.com/JavaWoman/blog/show.dml/1754768</feedburner:origLink></entry>
</feed>

