This is a contingent design, based on the theme I use on francesdath.info, with much stripped out and some other things thrown in (it also is not finished, so expect broken pieces). It’s far more minimal than I originally intended, but somehow this is enough for me.

I’m also not sure how I’ll use the news section anymore, as I don’t really have the time to do everything in my life and write about code and design — especially when supernaut has been alive for over seven years. Perhaps just to use it to mention more briefly whatever it is I happen to be doing in design.

After my moderate success with adding new custom buttons, I decided for something a little more ambitious. What I wanted turned out to be unnecessarily difficult and I still don’t have an ideal solution: I simply wanted to columnise text content. I thought I had the answer with CSS3 columns, which are in principle brilliant, but in use turned out to have all kinds of limitations and weirdnesses (and I’m not talking about lack of Internet Explorer support, which can anyway be worked around with columnizer.js or other methods). So … how about a custom button that will wrap text in something like <div class=”column-left”>?

Cleaning up and ordering the Visual Editor buttons

First things first. The visual editor has quite a few buttons that are either never going to get used, or shouldn’t get used. How about cleaning up that and arranging everything so that the buttons match the available text formatting options in a somewhat intuitive way? This is the simplest thing and goes in functions.php

On a sidenote, I have started splitting off everything from functions.php and putting code for specific tasks into separate files in a folder called ‘functions’, and then use PHP’s ‘include’, in the functions.php, like so:

The standard TinyMCE editor can have several rows for buttons, but really two is more than enough. To arrange the order of the buttons and choose which ones you want, this is what’s necessary:

I prefix the function name with the website name to keep everything coherent, so instead of my_tinymce_row_1, I would have, e.g. fangxishi_tinymce_row_1

The important stuff is in returning the array of buttons. There is a list of standard buttons, but also you can use the inspector and select any button in the Visual Editor to find its name, e.g:

For the character map, looking in there is ‘mce_charmap’. Just get rid of ‘mce_’ and that’s the buttons’ name.

I also added the ‘add media’ buttons, which I thought would be useful when I was trying the idea to use two visual editors to split content into two columns.

You can also do the same for the Format dropdown menu.

Then I wanted to add a button for ‘cite’ and ‘ins’, both of which are in TinyMCE Advanced, but I didn’t want a whole plugin for this. Unlike most of WordPress stuff, this is getting into seriously poorly documented territory, and it took quite a while to find something close to useful that I could then hack into shape.

Basic Styles dropdown menu formatting

Why not use the Styles dropdown menu, which is simple and well-documented? Well, yes. For things when you just need <span class=”foo”>, this works fine. To make a drop-caps style:

The name in the styles dropdown menu will be ‘Drop Caps’ and the class added to the span will be “drop-caps”, then style with CSS.

For anything more complicated (i.e. not in a <span>) …

Adding a custom button

The code for this gets split into two parts; first that in functions.php, which then calls a js file.

Without going into too much depth (because I just wanted to get things working), firstly this checks to see if a user has permissions to edit. If yes, then add the custom button only to the Visual Editor. Then register a new button, here called ‘cite’, and following that, load the custom code for that button, the ‘cite_editor_plugin.js’. Then force TinyMCE to clear its cache before adding everything.

Then we move over to the js.

Whereas the code in functions.php is generic and will simply initiate the adding of a new button, the button itself needs to be made. In this case it wraps the selected text in the <cite> tags. A custom button image is used (which I took from TInyMCE). Here, clicking the ‘cite’ button will wrap any selected text in <cite> tags. This is done with ‘ed.selection.setContent’. Other options are possible, for example opening a popup for adding data for shortcodes, depending on the function used here.

As with any other buttons, this can be added and arranged in the Visual Editor with the previous code.

Advanced Styles dropdown menu items

Having successfully added the missing styles, and cleaned up the menu, I started to think about how I could implement a user-based two-column option. I tried some shortcodes and other plugins that were meant to do this, but with how the website I’ve been working on was built, these didn’t work. Anyway, I like to have my own code.

To really make the Styles menu useful, we can build arrays that works with the buttons themselves.

Make an array, give the Styles menu item a title element (e.g. div), a class name and add it to the Styles menu. (Make sure the styles menu has also been added to the first code’s array of menu items) There are quite a few other options that can be used with this also, alisothegeek covers it very well.

Unfortunately, while this works brilliantly for a lot of things, for making columns it fails simply because this doesn’t work across paragraphs, that is to say it wraps only complete paragraphs in the div and won’t allow for half the text of a single paragraph in each column.

Styling the HTML quicktags

In the end I opted for the not-quite ideal method of jumping into the HTML editor for columnising. This, unlike adding new menu items or most other things associated with the Visual Editor, is simple and quick (found on scribu).

It barely needs explaining. Load a new button from a .js file after the quicktags menu has loaded. In the .js file, it’s one line per button:

This makes two buttons which wrap any content in a div with class ‘left’ or ‘right’, which can then be styled in CSS into columns. It’s also a bit rough, and can mess with paragraph formatting when swapping back and forth between editors, but is as close as I’ve found yet to a workable multi-column option.

Multiple columns using multiple visual editors?

This was my last thought, and in practice, if the post editor page is built appropriately, it’s probably the most controllable option.

I use WPalchemy for building all my metaboxes, and won’t go through the whole process for this here. WPAlchemy is very simple to set up and get working (even in some of the unorthodox situations I’m using it in), and Dimas has made a quick addition to the code which allows for multiple Visual Editors. All the above code also works with these, and outputting the content into two separate left and right column divs in the template is trivial.

Ending

If all this is done, it’s also worthwhile adding a stylesheet to the Visual Editor that reflects the site’s styles. or otherwise helps with visualising all this.

in functions.php and then a stylesheet called ‘editor-style.css’ is all it takes.

Also, while all this was for some specific tasks (namely cleaning up the visual editor menu, adding two new buttons, and finding a way to add a div for columns), the methods apply to pretty much anything that could require additional markup of some kind. And while there are plugins that do some of this, it’s much more fun to write my own code.

This is not so straightforward, as her site exists all on one page, sliding around like a giant map seen through the small window of a browser. Also there are many technical issues: multiple menu structures, back buttons, URL paths that don’t function very well at the moment; and things she’d like to have more control over: drag-to-rearrange page order, easy adding of different kinds of content (video, images, texts), easy multilingual possibilities …

One of the main issues was how to have a per-page specific navigation menu. This is not so difficult if the content exists on separate pages; there’s a lot of option, from wp nav_menu to using Wigets and dynamic sidebars. For some sections I used the former, building specific menus for the index and sub-indexs, but for individual pages, all sitting on a single vast page and requiring all their links to be anchors going to somewhere else on the overall site, there wasn’t a simple method.

I thought about making unique nav_menu menus and then calling them using a custom field which would add the menu name to the function that displays the menus, but there were some obvious problems with this. First, she would have to leave the page she was writing in to make the menu, then go back to that page and add the menu name. Second, with pages and menus being separate, it would be difficult to keep track of what went where and the possibility of a hundred orphan menus that should be deleted if only you could be sure they weren’t in use … mess.

So I decided on a method that’s not quite elegant (I really wanted to integrate nav_menus directly into a page as a custom field, and have the created menu only appear on that page in wp_admin), but works quite well, using WPAlchemy again and some rather effective PHP.

The idea is simple:

1. Have a custom field on every page
2. Have checkboxes for all the main navigation sections (Index, Videos, Texts and so on)
3. Have a single checkbox called ‘Weiter’ with an additional text field to which an anchor link can be entered for going to a specific next page
4. Have a checkbox called ‘Zurück’ which will go to the previously viewed page/area/Seite (a simple back button)
5. Be able to drag-drop rearrange them in wp_admin and have that reflected on the site
6. For nav items that are unchecked, they simply don’t appear
7. Call it from its own template part (e.g. loop-nav.menu.php) to keep the index.php clean
8. Have it work on any page or custom post type

Setting Up WPAlchemy and the Meta Boxes

This is very straightforward, using the standard WPAlchemy method in functions.php:

This has a slightly different install path and filename than standard, and I’m using the wpalchemy_media_access class for making adding video and images easy’; it’s not necessary for the nav menus, but otherwise nothing special here.

The nav-menu Custom Field

This is where everything happens. Most of this is fairly straightforward also, but I’ll go through it a bit.

1. First I make an array of all the menu items I want
2. Then I output them as checkboxes
3. I make them drag-reorderable by wrapping them in a div class=”nav-menu-item” and use jQuery .sortable to act on the class “nav-menu” that they are all contained in
4. I add a bit of CSS to make it obvious they can be dragged
5. Then I want to deal with a specific instance, the ‘Weiter’ checkbox, to which I want to add a text field, and then treat everything else. I do this with a simple if/else statement.

In general, this is the standard checkbox setup code from WPAlchemy; only the addition of the if/else statement, and css/js is different.

That’s it, and it looks like this in wp_admin:

One thing that still needs to be sorted out is that while drag-dropping works, and updates correctly on the site, in wp_admin it only shows the default structure once the page is saved. Also a possibility to add new menu items would be nice, though for Dasniya’s site it’s unnecessary.

The template code

Then all this needs to be outputted into the template. I’m using

in the index.php template (or wherever else) and keeping the templates themselves a bit more orderly.

Here the process is somewhat more complex, and took me quite a while to get it all working.

1. First set everything up using ‘global’
2. Making a direct call to the meta in the second line seems necessary with query_posts() and setup_postdata()
3. See if there’s any data, and if so continue
4. Begin outputting everything into a list, using foreach
5. Split off ‘Weiter’ again, and treat it differently before outputting the rest
6. For Weiter, use the contents of the textarea for the link anchor
7. Split off ‘Zurück, and make the href only ‘#’ instead of the menu item name
8. To use the nav-item titles as anchor links and classes, use PHP strtolower and preg_replace to convert them to lowercase, replace spaces with a dash, and replace umlauts with the two-letter variants
9. Use some jQuery to treat ‘Zurück’ as a back button.

The back button

For the ‘Zurück’ button, once it’s had its link anchor replaced with just a ‘#’, when clicked it should go to the previous page/section/Seite on the index page. I’m aware of the limitations of this as a ‘back button’ method, but really felt that unless I made ‘Zurück’ in wp_admin the same as ‘Weiter’ there isn’t another useful option (and even that would cause different problems). So:

Finishing

It feels a little unorthodox, and there were some difficulties getting it working properly. My php regex is probably atrocious, but I’ve never done such stuff before. I’m very happy with how unproblematic it was to get WPAlchemy to do this, perhaps less happy with how WordPress can be somewhat opaque in how it handles data under various circumstances, and my having to brute-force solve some issues with getting the data to show properly.

Overall it works very well according to what I needed, and works very well for Dasniya, though I’d still love to have found a way to do this with wp_nav_menu. I’d also love to be able to incorporate the WordPress link button into the ‘Weiter’ Field. It looks like this (with all nav-items checked):

The idea is very simple: Macs come with Apache web server installed, as well as PHP. SQL needs to be manually installed, but is simple, using a package and including a System Preferences prefpane for activation. Getting all of this running is not so complicated. Getting it working together, from a more friendly directory than somewhere buried in /Library or elsewhere, along with useable URLs instead of localhost/~myname, and running WordPress is a bit of a tussle.

So, first I downloaded everything: MySQL 5, PHP, as well as two other useful tools I’ll come back to: VirtualHostX, phpMyAdmin, and Sequel Pro.

One thing I didn’t download was MAMP. This is a self-contained environment for running websites locally on a Mac. It includes a whole pile of stuff including Apache, PHP and MySQL. Which is why I didn’t want to use it. For those who just need a simple, click-it-works method, MAMP is probably fine. But when Apache and PHP are already installed, it seems to me a curious way to go about it. It also comes in at several hundred MB, with all its additional libraries, which I don’t like.

I have tried it before and got it working with one site, but found it quite limited compared to the method I’m going to attempt to describe below.

MySQL

MySQL installs with a package to /usr/local/mysql-(version-OS-processor e.g. 5.5.13-osx10.6-x86_64), with an additional folder also appearing in the same location called just mysql, which is an alias (or symlink) to the above installed version.

Along with this in /var/mysql/ is mysql.sock. This file can be elsewhere for a standard install of OS X (in /tmp), and the location in /var is I think default for OS X Server, but I found in my setting up of all this, the /var location worked.

This filepath may also need to be set in php.ini which is found in /etc/. If it’s not it will use the default system location. This is in several places in php.ini, and is simply like this:

in the [MySQL] section.

Installing the prefpane and clicking to start MySQL Server should now give the message, “The MySQL Server Instance is running“.

PHP

PHP is already installed, but updating to the latest version is a good idea – especially if you’re running PHP4 instead of PHP5. Unlike MySQL, there’s no package installer, so it means messing around with Terminal and hand-editing files. The INSTALL file in the download gives all the information one could need.

I did this on a previous attempt to get all this running, so have forgotten the details, but some important things are in /etc/apache2/httpd.conf:

needs to be unchecked, as well as the AddType for PHP so .php is treated as such (and not as html).

Restarting Apache (in System Preferences > Sharing > Web Sharing) now should have all this working.

A simple test is to drop a file info.php into the default website directory (this can be either ~/Sites, or /Library/WebServer/Documents or whatever might have been set in httpd.conf) with the following:

Going to http://localhost in your browser should then throw up your php settings. If yes!, then excitement and on to installing other things. If no! then gnashing of teeth and messing around with lots of annoying things.

It’s not working

I had this so many times. On at least two previous occasions, I gave up because nothing would work. Of course this is in part because I’ve messed around with my system so much things are not … quite … right. But there are certain things which are problems with setting this up on OS X.

In short these problems (for me at least) related to one of the following:

• things pointing to incorrect file paths
• incorrect permissions on files or file paths
• incoherent weirdness

The first thing to remember is if in System Preferences both Apache and MySQL say they are running, then it’s likely they are.

It took me a while to work out that if  ’Can’t connect to Server’ is what I get in your browser, then it’s probably because what I’m trying to open is not the site – this is still so when I click on the links in Sharing that are supposed to point to my website.

One of the most useful pieces of help comes from Apple itself, Web Sharing – “Forbidden 403″ message appears instead of website content, which advises making a file in apache2/users/ called ‘shortname.conf’ (where shortname is your User shortname) and adding the following:

Which seemed to fix my 403 issues. For me it seems there are permissions issues with having sites in my Home folder outside of ~/Sites, so I left them there and made an alias to that folder which goes somewhere useful, as well as in the Sidebar.

VirtualHostX

Once I’d gotten all this nominally working, fun could occur.

The problem with having all this is that it is limited to running one website unless you want to drown in further configuration. I have a few sites at the moment I want to be able to access without the turgidity of having to work on a site hosted half a world away – not just for the slowness; it’s also an issue of poor use of resources.

VirtualHostX is disconcertingly simple to use. This simple even:

1. Add a Domain Name. I use the real site name prefixed with dev. for all this.
2. Set the Local Path. For me a specific folder in ~/Sites for each website
3. Check ‘Enable this Virtual Host’
4. Click ‘Apply Changes’
5. Restart Apache
6. Double-click the Domain name in the left column
7. Happiness.

This is of course predicated on everything else already working, but once I’d got the issue of pointing to the correct directory and the 403 problem fixed, this worked first time.

(The developer also has an interesting post on piracy and how he tried to make a difference given that over 80% of this app was running pirated or cracked serials. I was wondering myself about this, the price of the app – around €17,- – versus what it does (i.e. can I do it myself by editing the particular files needed to run different domains?). I would certainly purchase it if it was a) €10 or b) I actually had an income at the moment …)

Back to SQL

The usual way I deal with SQL is with phpMyAdmin. It’s ugly, unintuitive, obviously written by people who took offense at having to leave the command line in 1984, and does what it’s supposed to. Somewhere in all this last night I discovered Sequel Pro. It looks like a Mac app, is simple to use, can create new databases and users locally or connect to remote ones, is currently free.

Connecting to SQL was as simple as entering the Host as 127.0.0.1 and user as root. From there making new databases (ones with identical names as the various WordPress sites I wished to make local versions of), and duplicating users and their passwords who could connect to those databases was about as simple as using VirtualHostX.

WordPress

The obvious way to do this seemed to be to export the database from the live site and import it into my local install via Sequel Pro. At the same time, just copy over the entire site from remote to local. Actually this works, with several caveats.

Having tried this twice now, in my situation it seems best to set everything up and then import in the remote site:

1. Create a new database with the same settings as the remote site (Host can be localhost, 127.0.0.1, or the VirtualHostX-assigned Domain Name
2. Drag a fresh install of WordPress into the site directory
3. Run the install, setting the database Host as ‘localhost’
4. I have to copy-paste the resulting settings as WordPress can’t seem to write to wp-config.php
5. If everything works, a fresh version of WordPress should be running.

From here I copied over the remote site database and files

1. In Sequel Pro, import the remote database over the top of the existing one you’ve just made
2. Some lines in the database table ‘options’ will need to be edited so that the Site URL and WordPress URL point to the local site and not the remote:

   1 2	option_name: siteurl: set to VirtualHostX Domain Name option_name: home: set to VirtualHostX Domain Name

3. In the site folder, add the site-specific template and check this is working
4. In the site folder, add the site-specific plugins and check they are working
5. If permalinks don’t work or more ’403 Forbidden’ occurs, add this to the .htaccess file in the site root folder on the first line:

   1	Options +FollowSymLinks

6. Clean up resulting mess

Finishing Up

There are still some small weirdnesses, and I’m not sure how easy it would be to go the other way, i.e. once finished in the dev site to transfer it back without too many hassles. Also certain things I do on all live sites, e.g. .htaccess stuff, ssh, various security things, caching and database plugins and so on are not really necessary on a local site, so there needs to be a slightly considered process in moving from local to remote.

The time saved though, from each page refresh by working locally, as well as the small environmental goodness of not using the internet half way around the world to a shared server somewhere for what should in fact always be done locally is a good reason to spend half a day getting this working.

Using the WordPress code to output top-level pages into a single page doesn’t seem to want to also include the page with the news, or more accurately, its content. (ok, I probably could have used another Template page for this, but anyway …)

Shortcode? Yes!

Finding some code that would output the pages as a list was easy. Finding something a little more flexible took a little longer. Adding in the extra get_whatever, was 5 minutes. Making a loop in the shortcode function took a bit of thinking as to where exactly the loop was looping and how to get it to do so.

After a an hour or so testing and generally messing about, I have this in my functions.php:

Which I can then add to any page I want with, setting the number of pages with ‘limit’:

I also began thinking about making the site multilingual, as I’ve worked in China for some projects and now live in Berlin. The latter being of certain importance to me because I hold a somewhat traditional idea that it’s important to learn the language of the country I live in, and that one can never really be part of a place until able to converse.

Having done a couple of sites using qTranslate, I felt uncomplicated about adding this into my site. Despite some shortcomings in both WordPress and qTranslate, it’s really the best plugin for what should be native in WordPress, and anyway, none of the shortcomings I’ve fell over can’t be fixed with something in either the template or functions.php.

It all took about 15 minutes to install and set up. Being a fan of the two-letter language codes, and wanting to keep the usual minimalism of the site, I copy-pasted the following into my functions.php, which I also used on sumiyang.com (I’m not sure where I found this originally, i think maybe here):

Then in the header.php, I just added:

Followed by some very minimal css.

And then I ran into a problem.

I was using the pseudoclass :after with content=”blah” to add some text in the menu – all the white background text after the links. It was an appropriate solution at the time, but oh did it mess with my 15 minutes site multilingualising, because while you can throw qTranslate shortcodes around pretty much anywhere, they don’t work in a style sheet.

I tried – of course – jQuery. Find some text, replace it with some extra text, some spans and a bit of CSS and identicalness would ensue. It didn’t. I think it might be because of how I have WordPress set up to add useful classes to the wp_nav_menu, but in any case, the changes weren’t made no matter what I tried.

So I started wondering I could use media queries to target different style sheets for different languages – fully aware of the pain of that path (multiple stylesheets to maintain), as well as the overkill, just needing a few lines in multiple languages. While media queries is very powerful and brilliant for so many reasons, it doesn’t do languages.

And then…

This is the most brilliant thing I’ve found in CSS in ages:

Styling using language attributes

I couldn’t believe it. You can style elements in CSS based on the html language declaration. Even better, there’s a pseudoclass, :lang(). Brilliant! I had to run around for a bit until I calmed down.

Then there was the anxious moment, would it work with concatenating pseudoclasses?

Yes!

Nice!

You can see this on francesdath.info, using the language buttons in the top right.

In immediate hindsight, it’s obvious there would be something like this. It can solve a lot of problems simply: different fonts for different languages (with @font-face!) is the first that comes to mind. Also, lack of support in certain nameless browsers will ruin it for the rest of us. But I’m just completely thrilled at what an elegant and smart method this is. (Now I just have to translate sixteen pages into two new languages.)

I’ve been using Flowplayer for a couple of years now. It’s powerful, configurable, plays video really well, can do all sorts of fancy pseudostreaming and bandwidth detection (if your server is set up for it), and it runs on Flash. Even still, it will work on iPhone and iPad if you use the correct plugin. Why change? Well partly because of a curiosity about HTML5 video, and partly because of Flowplayer’s limitations.

I’d done a bit of research before, and decided to use VideoJS, as it has some nice features, and for older browsers falls back to Flash using Flowplayer, so I could just wrap the fallback code around my existing video code and happiness should ensue.

And happiness did, for a moment.

But then …

This is more-or-less several paragraphs about my frustration with the rubbish state of video in browsers. When I made my first website (in Flash) just before going to China the first time, there was no video in Flash and little beyond QuickTime-embedded . A hacky/brilliant workaround using JavaScript to strip the chrome off a QuickTime movie, overlay it in the page, and communicate with it from the Flash controls was as good as it got. And really, eight years later, it’s not much better.

Think about putting an image into a web page. Use the img tag. Almost any file format will work without a second thought in all browsers, so then you can get onto the fun stuff, galleries, animation … but having to spend most of your effort just on dealing with shoddy browser support for a picture does not play a part.

So why is video so difficult?

Once I’d got my head around the setup of the video tag, and understood generally how it worked, tested in a few browsers and felt quite good, I started coming up against multiple problems. Broadly these are in three areas: dealing with the different handling of different browsers, dealing with getting the video ready for different browsers, and having a workflow that doesn’t make me cry.

The last one is crucial. I use WordPress because I want to be able to hand over the entering of content to the person whose website it is. I don’t want to tell her, “download ffmpeg, install via command line, and then to compress your video, enter (string of gibberish)”. If I have to stop to understand how something works, what’s it going to be like for people who just want to get their video up?

Unlike getting video ready for Flowplayer, which is simply encoding to h264 and can be done with minimal hassle with something like Handbrake or even QuickTime 7, HTML5 video needs it in three different formats, the latter two – WebM and OGG – unless you want to get into aforementioned command line, have few options on a Mac.

I tried installing the two codecs for Quicktime (WebM and Xiph) and found the results to be poor. Blocky video, mediocre colour fidelity, softness and more (or rather less), all which point to the most significant problem with HTML5 video: WebM and OGG are nowhere near good enough for web video.

I also tried Miro Video Converter, which unlike all the others (bar Permute) does all the necessary formats. Using ffmpeg in the back, its drag-drop efficiency is commendable, and were it not for the inability to adjust the defaults would be one to consider using, but again, the quality simply wasn’t good enough. (I should mention, the video source for the tests was a variety including at best HD and at worst f4v.) I settled on Permute, which is one step up, and gives a modicum of configuration, but still the poor rendering of WebM and OGG can’t be ignored.

If this wasn’t bad enough, and it was admittedly workable – I could see how to put together a workflow for people that wouldn’t horrify them, that got them from edited video to the three files, uploaded and into WordPress using metaboxes, all not beyond an average internet user’s capabilities – it could have at least been offset by the browsers doing something useful like respecting the ‘preload’ attribute.

preload is the killer for HTML5 video and the single fundamental reason why it’s unworkable and will remain so until browser vendors stop pretending it’s “1998 browser war!”

There are three possible preload options: none, metadata (loads the first frame and makes sure it can play whatever it is), and auto – which (seems to) loads the video in the background once a page is finished loading. The latter is useful for a page in which all there is is a video to watch, but for a site with say five videos on one page, each of around 80-100mb, with browsers who think preload=”none” is something to ignore, it’s horrific.

The only workaround I saw was a truly ugly JavaScript hack, replacing the splash image with the video element when clicked. I cringed. Even thinking along the same lines, using jQuery to load an external file with the video code is just stupid.

Other things that annoyed me in no particular order: when clicking another video or link, the current video keeps playing; no easy possibility for html over the video or splash image; no simple support for bandwidth detection or SD/HD options … I could go on, but I really did cry with frustration at what should be so simple.

It’s so disappointing that in 2011 browsers are still pathetic at handling video. It makes it horrible for people making websites as well as people who just want to add video to their own sites and don’t want to be hobbled by the limitations of YouTube or Vimeo. And it’s insulting for all of us with Chrome and Firefox pretending WebM and OGG are acceptable and pulling the ‘open’ and ‘free’ trope against h.264.

I want video to work just like img. If it doesn’t, there is no point in using anything other than Flash.

For the moment, I stay with Flowplayer and h.264 with Flash. It’s not perfect, and has its own frustrations, but at least it works.

I had an idea for a question mark in the bottom right corner, unobtrusive, yet also noticeable, matching the formatting for links throughout the site, that when hovered over would show a box with details of performance, performers in the photograph, and photographer’s name.

I tried a couple of options, first looking at tooltips, but the formatting, even with jQuery, wasn’t so simple. I also didn’t really want to go to jQuery anyway. What I wanted was to create a metabox with the three fields, which would spit the content into whatever markup could be most agreeable to being styled.

The metabox part was easy, about 30 minutes sticking it all together and testing. The styling though…

Once I’d discarded the tooltips approach, the next method seemed to be the the Eric Meyer pure CSS popups method, sticking a span inside a link and display: none until hover and then showing it. Ok for single lines of text that don’t need additional styling, but for what I wanted, each item on a separate line, it didn’t work.

Perhaps I should have read around more, but it occurred to me that a div can handle the :hover pseudo element just as well as a link can, so then I could have one div that I’d attach that to, and another div inside that which would be displayed or not, opening up all manner of possibilities, like this:

Besides the miscellaneous styling, what’s important is the #credits styling to fix it in the bottom right corner, and the display: none of .details, as well as the display: block and styling with #credits:hover. the cursor: pointer helps in that it changes the default arrow to a standard link pointer; a slight visual cue. I’m sure I could have written it more concisely and neatly, and additionally I could add a CSS3 fadein transition, but I had to get to rehearsal.

The festival last year was in Berlin, and this year moves to Cardona, Spain, near Barcelona. I wanted to keep aspects of the design, as well as much of the structure, as it is not so small, with over a hundred pages. In the last year also, I’ve spent so much time in WordPress that organising all the templates with conditional tags, shortcodes and functions.php was a fairly simple process. Coming straight from Brussels though – and not having a laptop for last week as the deadline came up, gave me a few 5am finishes.

So, first in Photoshop, keeping the splattery title, and creating a much simpler background – it’s not often I do sites with light typography on a dark background. The background images themselves are of the venue, currently being renovated, with the architectural plans laid over the top. Keeping the content areas legible then was very important.

Some of the code I’ve been writing in the previous weeks and months turned up here, including the shortcode for adding Flowplayer video, the very simple PHP background image rotator, other bits and pieces including the use of tags on pages for different workshop types, coupled with a conditional statement to only show the tags section on workshops with tags.

Still little things to fix up, but nice for all of us to see it alive on a sunny Spring Equinox in Berlin.

The original was in Flash, when people were all making beautiful sites using this, and miniml was the choice of font. Then, when the split occurred, and supernaut.info went off on her own (first into Movable Type, then not so long ago into WordPress), or some time after, I became frustrated with how difficult it was to add new content, and so threw together a static HTML design in an afternoon.

That one lasted for a long time with few changes, though the last year I was always thinking of replacing the monospaced font with Anonymous Pro and sticking it all into WordPress.

WordPress did seem a little excessive for what is a mostly unchanging website, several pages with little content and one with (I always planned but never added) a lot of video. Then there was the issue of recreating the video playlist in a WordPress page. Some pondering, and I solved that, and all the other stuff, menus, background images, typography, proper semantic-ish structure, all the usual plugins I add that give a modicum of functionality, all fell together.

The 404 page is rather special too.