Web design & FOSS
Front-end web technologies and Free Open Source Software.
Wednesday 2 July 2008, 12:28 PM
Problem with Notepad++
Well, to be more precise, this is probably my problem with Notepad++, the venerable open source Windows text editor.
I can’t open HTML files. As a web designer & builder, this is a bit troublesome. Luckily, Notepad++ will open SHTML files, which is what I’m working on currently.
I think it probably has something to do with The Registry, that great black hole/box which sits light years away from my Known Universe. As such, I have done little to tackle the issue…
Monday 23 June 2008, 3:29 PM
Blog, blog & away!
I spent the weekend down at The Village, and finally I have broadband! Alas this post is not from The Cottage but from The Ministry, as I have been too busy mowing the lawn and drying my washing to do anything computer-related! Now all I need is some work on which to work remotely…
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 ;)
Previous
