Web design & FOSS
Front-end web technologies and Free Open Source Software.
Monday 23 June 2008, 3:29 PM
Blog, blog & away!
Thursday 19 June 2008, 4:32 PM
Teacamp
I went along to Teacamp today, a loose gathering of interested/ing folk who work with the UK government and online technologies (and a barcamp spin-off).
I spoke to a very well-informed chap from Tyne & Wear who talked at length about the workings and machinations of The Digital Challenge & Inclusion Network, which was a bit of an eye-opener into the amount of politicking involved in the process.
I also spoke to Glynn from the Open Rights Group (the UK version of the Electronic Frontier Foundation) about the shortcomings and pitfalls of electronic voting. I didn’t realise there were so many. Apparently the London mayoral elections used electronic vote counting, and there was an alarming lack of transparency and checks in the system — see the Open Rights Group web site for more information.
Thanks to Jeremy for the introduction ;)
Tuesday 17 June 2008, 12:52 PM
One True Piefecta
Meanwhile, back at The Ministry…
For Operation Cleanup on the intranet, I needed a 3 column CSS layout, and I opted for One True Layout to create the page layout — cross-browser, fixed width, any order columns, fairly simple to understand. All in all, rather a neat solution, thank you Alex Robinson.
As you can see, the CSS is clean and tidy:
/* Fixed pixel version */ body { text-align:center; } /* Necessary for centering #wrapper in IE5.5 */ #content { float:left; width:550px; margin-left:180px; } * html #content { display:inline; } #sidebar { float:left; width:254px; } #sidenav { float:left; width:180px; margin-left:-984px; } #wrapper { width:984px; margin:0 auto; text-align:left; } #footer { clear:both; } #header, #footer { width: 984px; }And the HTML is minimal as well:
<body> <div id="wrapper" class="clearfix"> <div id="header"></div> <div id="content"></div> <div id="sidebar"></div> <div id="sidenav"></div> <div id="footer" class="clearfix"></div> </div> </body>But when The Ministry saw the design, they wanted it changed to something more flexible, because a considerable percentage of their users have a maximum screen resolution of 800x600 pixels, poor buggers. (25% of their users still have Internet Explorer 5.5 :( ).
So, two fixed outer columns (also because I'm using fixed-width Mountaintop Corners as well). Plus a semi-liquid content centre column that has a max-width for legible line length and a min-width to maintain the structure of the page. “Gadzooks” I thought “where could I possibly find such a layout at such short notice?”.
Luckily I tripped over some Jello Piefecta, which is an eerily good fit for all of the above.
Piefecta is a three column CSS layout from way back in 2004, which I used on the UpMyStreet redesign in 2005. Jello is a technique for creating semi-liquid layouts that work in IE without JavaScript. Put the two together and you have a potent CSS layout cocktail which meets my needs perfectly.
The downside (there’s always a downside, no matter how good the news ;) is that the HTML structure is comparitively clunky, and the column order has to be 2-1-3 rather than 3-1-2:
<body> <div id="sizer"> <div id="expander"> <div id="header"></div> <div id="wrapper1"> <div id="outer"> <div id="float-wrap"> <div id="content"></div> <div id="sidenav"></div> </div> <div id="sidebar"></div> </div> </div> <div id="footer" class="clearfix"></div> </div> </div> </body>And the CSS is relatively convoluted, 70-plus lines long, with all the necessary comments.
I spent a few hours stripping out the unneccessaries, and trying to work out how get what I wanted (I used borders on the columns rather than margins to get around box model hacks for IE5.x), and to work out how adjust the column widths.
This has prompted me to consider publishing commonly used CSS/XHTML snippets of stripped-down code that can be used time over, by myself and also by others. The other candidates for such a repository would be lorem ipsum, XHTML templates, HTML entities, HTML color names etc.
Wednesday 11 June 2008, 5:07 PM
Free(Your)Mind
At The Ministry I've had the joyous task of creating a site audit of the whole intranet. I was toying with the idea of using OpenOffice.org Calc, though I wasn’t relishing the prospect. And then somebody suggested FreeMind mind mapping software that is ideal for creating site maps.
It’s very easy to use, and the keyboard shortcuts for moving around and creating child and sibling nodes makes it a brisk breeze to map a site. The bonus is that a development version is available for PortableApps, which I need because of the Security Lockdown at The Ministry.
There’s also been very few problems with the development version. The only problem I had was exporting to PDF with all the nodes expanded (500+ of ’em), and I found it easier to print to PDF. Otherwise, exporting is pretty darned straight-forward, and there’s a lovely feature whereby you can export to a javascript HTML version, with expandable nodes. Great for sharing with luddite colleagues who don’t share my enthusiasm for Free Software and PortableApps ;)
Tuesday 10 June 2008, 10:49 PM
Mark my words
A few weeks ago, I moved the majority of my worldly belongings to the Pink Cottage by the sea in The Village. For some reason I have been labelled The Writer (I might have mentioned this blog). Village life didn’t start off very smoothly though: I managed to reverse the hire van into my new next door neighbour’s car before I’d even set foot on the Devon soil. By reputation more Village Idiot than Writer methinks.
Meanwhile, back at The Ministry, I have been continuing to champion Free Open Source Software in my series of Brown Bag Seminars, which have been going down very well. The last one was about Markdown, a lightweight markup language designed to be easy-to-write and easy-to-read, and it’s created by John Gruber and Aaron. I have been writing all my documentation in it, and I think it’s the business for writing any large quantities of content. I’m pretty fluent in HTML but the problem with using it for writing is that the source code doesn’t read very coherently.
The markup for Markdown is based on email formatting (so underlines for headings, double asterisk for bold etc.). The home page is pretty detailed, and there’s an online conversion tool. However, I was searching for plugins for my favourite text editors (Notepad++, Notepad2 and Bluefish) but to no avail. Luckily, there is a fantastic JavaScript implementation called Showdown made by John Fraser. The whole package can be downloaded so that you can use it locally. There is also a built-in Syntax Guide. Magnificent :)
