Just hit a snag with a jQuery dialog overlay which was supposed to display over an embedded Flash file — whatever the z-index of the dialog, it always appeared behind the movie (and flickered insanely which was doubly annoying). Thankfully, it’s easy to fix this problem with the addition of an extra parameter in your embed code:

Posted via email from What’s this for?

Traditionally one might use dialog boxes to ask the user a question to which she must respond (e.g. with an “Ok” or “Cancel”) but their use can extend beyond this. For instance I’ve used a dialog to show a mega drop-down menu; i.e. clicking a link opens a dialog box with a list of categorised links.

JQuery’s default behaviour for closing dialog boxes is not unreasonable: the user must click on the “Close” button (e.g. in the form of text or an “x”) or hit the escape key. However it’s possible you may want to provide more options for your users to close a box by simply clicking outside it.

I puzzled over this and didn’t get very far with Googling but came up with the following solution which seems to work.

When your dialog is created, a div with the class “ui-widget-overlay” is also created which “greys out” the background allowing the user to fully focus on the dialog. You can use this as a hook to add your dialog closing code, e.g.


$(".ui-widget-overlay").live("click", function() {  $("#quick-links-modal").dialog("close"); } );


In this case my dialog has the ID “quick-links-modal”. NB you need to use the “live” event (rather than “click” etc.)  in order to bind the event to your dialog before the dialog has been initiated.

Veda Williams‘ Plone 3 Theming (Packt, 2009) [Amazon UK | Amazon US | Packt] is a useful reference for anyone involved in customising the look and feel of their Plone-based website. Used alongside the various online resources on the plone.org website, particularly the Plone Theme Reference,  it should ease  most of the pain that Plone themers experience. Unfortunately (and this is not a criticism of the author), the book is let down by some poor copy-editing. It also contains a number of errata, which the author is gathering on the plone.org website.

The book is broken down into fifteen chapters, the most useful of which I found were chapters seven to twelve which deal with the day-to-day business of Plone theming.  These chapters cover customising viewlets and portlets, an overview of the Zope templating language ( ZPT), the creation and installation of a Plone theme, template changes, custom page views and theming tips. Although I’ve done a fair amount of Plone theming, I still find it quite esoteric and complex so it’s certainly very useful to have these chapters to refer back to.

Chapter fifteen, written by Alex Limi, gives an overview of the future of Plone theming using products such as collective.xdv and Deliverance. These seem an ultimately saner way to proceed and should allow non-Plone specialists to theme a site without getting too bogged down in Plone specifics. This article is also freely available on the Plone website where it will be updated as the project develops.

I did wonder if the second chapter was really necessary — this provides an overview of the main graphic design, browser and text editing tools. I imagine that most web designers and developers already know about these and the complete beginner would be encouraged to to stay away from Plone until they are a little more experienced.

That aside, the only real complaint I have about the book is the quality of the copy-editing. I think the text would in places benefit from a little slimming down or rephrasing. I occasionally struggled with some of the explanations , although it must be borne in mind that Plone 3 theming is complex so is by its very nature difficult to explain in simple terms. Some other examples: it’s probably not necessary to have sentences like, “now what, you ask?” in a tutorial book and I’m not sure why there is a lengthy code sample from Plone 2 on pages 129-30 which is really only produced to show how things were done the “old way”.

Anyone who has been involved in Plone theming will know how hard Veda Williams has worked on it: in addition to this book, she coordinated the Out of the Box Plone Themes project. For her work I’m sure she has the gratitude of every Plone themer. Hopefully subsequent editions of the book will address the editorial issues and errata.

I really like the design — there’s a lot going on on the home page but it’s all clearly differentiated and the design elements are large and bold. Your eye is immediately drawn to the features “spotlight” banner highlighting four main stories. The controls underneath the banner image have a clear affordance and relationship to the featured stories.

The “Find a programme” navigation to the right of the image provides a quick way in to finding a radio programme to find out more about it or to stream it — you can either browse by genre or programme title.

Below this is a carousel feature highlighting one programme per day over the last week. It’s easy to use with obvious previous/next controls. I like the use of images too — I never imagined Rabbi Lionel Blue looked like that!

The content keeps on coming below the carousel: popular shows / podcasts and links to leave feedback and get tickets.

One of the interesting things about the design is that its producers were clearly not worried about the “fold” — if you shrink your browser down to 1024 by 800 (or if this is your default screen size) you get cut off around about the programme description in the carousel. See the images below — the first is the full page design and the second the page “folded”. Despite the content run-on, most of the key calls to action are still shown and as a user, I certainly don’t object to a little scrolling over clicking a number of links to get to what I want.

Incidentally another thing I like about the design is the number of images: I really feel that these complement the radio shows and make the site more than just a listings device.

Nice site.

See and download the full gallery on posterous

Posted via email from What’s this for?

So, Google have changed the font size on their home page for the search box and buttons. At first I thought this was some setting in Firefox going awry (I'd been doing a fair amount of zooming on a design I was working on), but no. This is the way it's supposed to look.

Posted via email from What’s this for?

Posted via email from What’s this for?

I ordered a cycling map from Transport for London today. I think the “personal details” section of their form could do with a little work. All the fields are mandatory, including title (Mr, Ms etc.) and phone number. If you don’t fill these in then you get an error message, although you’re not dropped back to the relevant section in the form to correct your “mistake”.

I’m struggling to work out why your phone number and title could be in any way relevant for the delivery of a free cycle map by post.

Posted via email from What’s this for?

I would have preferred to have had some way of navigating through the information on the splash image — for instance, some carousel-style controls or something along the lines of the BBC home page:

On the BBC home page, there are clear controls to change the splash image — they even tell you what you’ll expect to see.

The problem with the Tate approach is that each image displays for about five seconds. I counted six images, so that’s thirty seconds you need to wait if you want to take another look at something that caught your eye. One sure way to frustrate your users.

But, this one quickly had me tearing my hair out due to its completely counter-intuitive controls: if you click and drag to the left, the map moves to the right, drag it down and it moves up. I double-checked with Google Maps just to make sure I hadn’t totally lost it, and yes, sure enough, this is a reversal of standard controls, as much as they exist. Take a look at these videos and compare and contrast:

1. South Downs Way interactive map behaviour (I’m not sure who produced this software)

2. Google Maps behaviour

But, the first one isn’t actually as daft as you might first think, it just uses a different metaphor. Google Maps (and Yahoo, and just about every other online map tool I’ve used) use something like a concept of a standard map on a table top that you stick your hand on and drag: drag it down, and it moves down. On Google Maps, the pointer turns to the image of a hand when you click which emphasises this metaphor. The South Downs map however, puts the mouse in the role of the walker. Hence if you go forward, the landscape moves behind you; go left and it moves right (kind of).

Clever as this is, I can’t see it catching on. Not only does it break with the convention of other online maps, it also contravenes the standard direct manipulation controls of just about every other software package I can think of.

Incidentally, I looked at Yahoo Maps for comparison, and to be different they reverse the zoom in / zoom out control compared to Google Maps. Just to be different I guess, but this is still very annoying and for me, counter-intuitive. In fact I find Yahoo Maps in general a little clunky — I’m sticking with Google for this one I think.

Yahoo maps: reverses the position of zoom-in / zoom-out. The scale indicators (”Country”, “Region”, “City”, “Street”), although in principle useful, just got in my way.

Maybe one day, we’ll get standard map controls?

 

What I write about on my blog apparently, originally uploaded by reynard.

I generated this from Wordle.net — a tag cloud of what I write about on my blog apparently. As you can see, my vocabulary is impressive and varied, with words such as “things” and “good” appearing prominently.

Look out though, because “possibly, Norman’s took mobile”.