A final thank you (not really belated, I found them after the previous post) to cocoate.com
A flaw in my HTML mark-up was causing some screen elements to misalign on a few devices. Nothing really serious, it was just that the third column on the people page dropped on some of the less popular browsers.
cocoate's explanation of the 960-grid mechanisms was wonderfully clear.
Thank you folks. Or should I say "Merci bien mes amis"?
Once upon a time (1966 was the first time), I'd learn a programming language and then apply this knowledge to whatever problems were chucked my way. As I've got older, I decide what I want, then go online for help in doing it. Okay, it doesn't make me a professional coder but I learn plenty along the way and end up with a website that I'm in charge of and can change at the drop of a hat.
Without Google and the World Wide Web, Lord knows what I'd have done. But, thanks to them and all the places they led me to, I have a site which, while falling short of elegant, does what I want. More importantly, I hope it gives its visitors an enjoyable and useful experience.
This post isn't about the website, although you may need to know that it's epocselet.com in order to understand some of the comments below. This post is about recognition of all those people and places I discovered on my journey. Without their help, I would still be trying to learn JavaScript or PHP from scratch.
Here they are, in order of the number of hits I recorded in my Firefox History file. First the top ten (the first three were on tap continuously):
Hits
??? Microsoft ExpressionWeb4 was an invaluable website development environment.
??? W3C's Markup Validation Service. As the name suggests, it checks the validity of web pages.
??? Firefox Web Developer tools – especially Web console and Debugger.
230 stackoverflow A marvellous forum which covered pretty much everything, including PHP, JavaScript, HTML5 canvas and colour drop-down menus.
131 w3schools.com An online reference manual which I referred to for JavaScript, HTML5 Canvas, HTML colours, JS programming tips/demos and string parsing.
101 JQuery Radar Plus Mehdi Tazi adapted Ryan Allred's Radar Chart. I adapted Mehdi's. Figuring out how it worked was like solving a giant puzzle.
55 The PHP Manual and source of everything.
51 Radar Chart JQuery Plugin Ryan Allred's original code.
29 Plusnet's 'friendly' area. I used it for CGI and PHP hosting stuff.
28 SitePoint is a great source of web-building help. I used it for Canvas, HTML5. PHP, JavaScript, Radio button array and 960 grid stuff.
Now for the rest of the top 20. They may be lower in hit count but they were no less valuable – a single hit would often point me in the right direction:
19 Mario Lurig's PHP code checker came in handy when the PHP would stall.
7 Maths Is Fun took me back to schooldays to remind me about radians, sines and cosine. I could remember 'sohcahtoa' but couldn't remember what practical use to put it to.
6 tuts+ explained the 960 grid system, but also explained other things, including HTML Forms.
5 The jquery learning center does what it says on the tin. I used it as a reference for scopes, arrays and operators.
5 960 grid system. I found the 960 24 grid system perfect for laying out the web pages (and, often, changing them quickly.)
4 A simple guide to HTML came in handy for checking how to include JavaScript in HTML.
4 Six Revisions is a website hints and tips site. I used it to read about the 960-grid-system and HTML5's canvas (on which the charts appear).
4 Chris Pietschmann kindly explained how to colour dropdown items in an HTML form.
3 Chris Wiegman showed how to dig out the correct IP address for a visitor. (If you're with a hosting organisation, you're still fairly anonymous though.)
2 Home & Learn helped me a lot with understanding how to work with the HTML5 canvas.
Other honourable mentions should go to:
Google Analytics – which keeps an eye on visitor behaviour.
The many people who looked and commented as we went through. I guess some would prefer not to be named, but you'll know if you were one of them. A big thank you to you. I learnt something new from every single discussion.
Finally, my partners in crime Dr. Bill Nichols and Martin Banks.
It's been a blast. It made me remember why I loved programming. But also taught me that I could never make a living at it these days.
Thank you all for five very interesting months.
Call me mad, but I've been learning the Python programming language.I needed a quick way to modernise masses of old HTML documents.
In the end, I decided it was quicker to use TextPad's powerful facilities to do that job, rather than learn a new language to do it. However, by then I had seen that Python would be a great way to write a pilot of a new program.
Thinking that I should get the newest and shiniest version, I installed 3.4 and, with the help of the online Python Tutorial and Michael Dawson's Python Programming book, started to crank out some useful little programs.
All very well, but then I realised that I could shortcut a lot of tedious work by using some cloud-based information but discovered from programmers and the cloud host's technical info' that they still prefer Python version 2. Grrrr.
Moral: do a bit more digging before taking the plunge. Version 3 may be the future, but version 2 is definitely the present as far as integration is concerned.
I'm now mugging up on the differences between 3 and 2. Oh well.
Phew! That was hard work. I've tarted up the HTML of 263 of my columns and features written in the pre-web days (1979 to 1995). They should all be readable in any browser on any device.
The archive is searchable, so if you're into nostalgia or research, you can check out my take on just about anything personal computer (including Mac) related from those years. It's a mix of opinion, reviews and feature articles written for a mix of consumer and business publications.
I must have been doing something right because my writing was put up for eight awards, I was a finalist for all eight and won the Times/Hewlett Packard Technology Columnist of the Year three years running. (I was then banned from re-entry.)
Apologies for any remaining typos. The articles were scanned and some words got mangled. I've fixed them where I've spotted them.
Have fun (or not).
I've lost count of how many years I've been dipping my toe into the collaboration waters. Certainly, it goes back at least to Computer Supported Cooperative Work (CSCW) thirty years ago. By 1988 this was formalised into a time/space grid, so that you had remote/colocated on one axis and synchronous/asynchronous on the other. Not a bad way to characterise many of the collaboration and social tools that abound today.
I mention all this because Agile Elephant's David Terrar invited me to a Future of Collaboration Conference triggered, in part, by the opportunities created by the convergence of cloud, social and mobile technologies. (To my mind, this equates to a transformation in reach and convenience.) Each speaker had ten minutes or so to share their vision. This was followed by a Q&A session and networking. The audience was also made up of industry people, so I expected the bullshit factor to be low. And it was.
Given my background, I wondered what I would learn. Let me list the participants and their roles, and then I'll tell you what I ended up thinking. I'll spare you the blow-by-blow details.
David Terrar chaired the event.
Speakers:
Jon Mell, Social Leader, IBM UK
Alan Patrick, Agile Elephant
David Moore, SAP
Simon Levene, Jive
Janet Parkinson, Agile Elephant
Chris Boorman, Huddle
Questioners (apart from David Terrar and me):
Phil Wainewright, Diginomica
Lucinda Carney, AdvanceChange
Baker Tilly, chartered accountants and business advisers, provided the accommodation and refreshments. (Lovely, thank you).
The first thing I noticed was the lack of evangelism, thank goodness. Quite often you turn up at these events and they're more like a religious revival meeting than a pragmatic look at business needs and applications. Okay – one chap said work should be fun, but he got a slight ribbing for that from some of the others. Work could become pleasant, fulfilling or rewarding maybe, but not fun. God forbid. (Mind you I quite often have fun when running training workshops, so I have some sympathy with his point of view.)
While 'email' and 'social' can be good in the right context, neither is much cop as a sole collaboration strategy. In fact two people branded email 'the enemy' of collaboration and another branded social on its own as 'a waste of time'.
Previous events have banged on about the need to change a company's culture or boasted of coming 'disruption'. Utterly unhelpful. This isn't how stuff gets done. Far better to introduce collaboration tools which fit business needs and, if possible, integrate it with what exists. Do this in a few key areas (with board level support, of course) and things start to catch on as others see (or are told about) the business benefits of these new ways of working.
Social – people communicating openly and freely (with business intent, of course) – isn't going to happen without trust and that doesn't come without knowing each other (usually through at least one face-to-face meeting, but relationships can form through voice, video and even, dare I say, email).
As collaboration, then social, activity spreads vertically and horizontally through an organisation, culture change will follow. When it extends beyond the company boundaries to partners and customers, it will alter the way the organisation listens, responds and collaborates. Silos will be breached and individuals will become more aligned and harmonised with business drivers.
Everyone – the company, the workforce, partners, customers and prospects will benefit. That's the promise. And it sounds good to me.
And now I'd better go, before I'm accused of being an evangelist.
Thanks to Dick Pountain for reminding me that the bleedin' obvious isn't always.
I was groping around for a desktop search program that could look into any file, not just some standard list of extensions such as those handled by Microsoft's search. I looked at loads of programs and even downloaded a few but none did what I really wanted: to index a bunch of largely text files with the .brn suffix. In fact I didn't even need them indexed as long as I could search inside them reasonably quickly.
As a web developer and occasional programmer of many years' standing, I'd been using TextPad as my editor of choice. And, when I wanted to do global edits, I'd use its 'find in files' function. It just never occurred to me to use it to look inside other files. Until Dick suggested it.
Now, I set the file type to *.brn, the root of the search to 'desktop', tell it to look in sub-folders and the search to whatever I'm looking for. With regular expressions if I'm feeling flashy. Bingo.
As a paid-up user, why didn't I think of it before? So simple, so quick. Thanks Dick.
Being away from here has given me a chance to focus intensely on launching a new magazine without too many distractions. We now have five issues under our belt and I have reaquainted myself with the rhythms of conventional publishing. I know where the peaks and troughs of effort lie and I can get back to a more normal and less distorted life in the troughs.
Creating, editing and writing for Blue & Green Tomorrow has been a lot of fun and a lot of hard work. And it couldn't have happened without Simon, Lori and Dominic (publisher, sub-editor and designer respectively) and, of course, our marvellous contributors. Other people take care of 'webifying' the magazine at blueandgreentomorrow.com. You can register (free) which gives you an account tab and access to digital copies of the magazine. Otherwise much of the content is publicly available under the various themed tabs.
Even through the mayhem of the launch, I've continued to do the occasional course on how to handle the media, often with my long-time partner in crime, Martin Banks. We used to call ourselves 'Press Here' but, when we both deviated out into analysis work, we sold the domain and renamed ourselves greybeards. One look at our photos will tell you why. I also run the odd writing skills workshop for business people.
And, now, here I am blogging again. Given the nature of the magazine, I suspect that I'll be blogging more about sustainability (could a word possibly sound more boring?) than about IT. But it's hard to keep me away from software. Talking of which, I now have an HTC Desire smartphone running Android, and jolly pleased I am too. That could be another running theme.
We'll see. But, as you can see from the title, I think that a deliberate spread of activities, providing I can do all of them well, will makes for a more balanced and fulfilling life than having all my eggs in one basket.
So, the last post turned out not to be The Last Post after all, just a pause while I gathered my wits.
See you again soon.
David
To my (slight) shame, I periodically purge the list of people I follow on Twitter. I simply don't have the time to read the minutiae of some of their lives, despite the fact they occasionally come up with worthwhile gems.
Now, I've discovered a way of getting the best of both worlds: I can keep up with the more interesting/useful Tweets from whoever I like while keeping down the number of people I follow in Twitter itself.
So, three cheers for paper.li – a free service that builds online daily newspapers: from a Twitter user and the people they follow; from a twitter list; or from a hashtag. It looks for Tweets that contain links and publishes an extract from the destination, crediting the Tweeter at the foot of the piece. You can click the headline to go to the original article/site
Paper.li earns its money from small display ads dropped into your newspaper.
'envirolist' is my Twitter list of people who specialise in environmental and ethical stuff.
You probably can't see the detail in the above picture, but it has a 'trending topics' cloud and a live Tweet stream from the people in the list over on the right.
I currently have two papers running and I can create a further eight. My two are paper.li/tebbo and the one above, paper.li/tebbo/envirolist.
As a quick way to catch up on what's going on, paper.li is a corker. It requires minimal effort to set up a paper and it will even announce each new edition to your Twitter followers if you want, complete with the inclusion of some contributors' names.
[Update Sept 7: I switched the notification off two days ago. While no-one had complained to me, paper.li updates were beginning to annoy some Twitter users. This could only get worse as the service became more popular. Today, the company has changed the notification to top story only and it has dropped name plugs. It helps, but if anyone wants to follow my papers, the links are in my Twitter bio. I'm not switching notification back on.]
With paper.li's simplicity comes a lack of flexibility but, once you start complicating things, you have to start learning stuff. This turns (some) people off.
As it stands, paper.li reminds me of my first encounter with Google – it was a shock to just see a text box and a search button. And look what that led to…
Although I was delighted with the infographic I ended up with in the last post, I knew it could be improved. If only I could figure out how to use just a single .gif, sliding the overlay elements into view as the finger or mouse hovered over them.
If you've not read the post, I used over 20 separate transparent .gif files, laying each one over the top of the background image in response to the mouse/finger hover position.
My CSS skills (or lack of them) meant I was spending days wrestling with the single .gif problem. And the work I'd already done was doing a good job anyway. The total size of all the files involved was about 180k and I figured I'd be unlikely to save more than a third of that. But, the elegance of a two-file solution (HTML/CSS in one, all the images in the other) appealed to the erstwhile programmer in me.
At the point of giving up, I thought I'd throw out a plea for a CSS wizard and, blow me down, one Ben Summers responded. I'd written a piece about his Information Systems company, OneIS, in 2008.
I explained pretty much what I said in the previous post and within the hour, he sent me an email outlining how he would tackle the problem. He broke the log jam. I'd already prepared the new graphic in anticipation, slightly jazzing up the images as I went along, so all that was left was to replace bits of my code with bits of Ben's and insert the coordinates of the various bits of the new image.
This is a shrunken version of the new image with a ghastly yellow to show up the transparent areas:
The layout looks a bit peculiar because each overlay element needed to occupy its own rectangular area.
Ben's CSS used the z-index attribute to make sure that the hover layer was nearest the user, the overlay layer was next and the background layer (taken from the top part of the gif) was at the bottom. In my fumbled attempts to achieve a result, I got the hover and overlay layers the wrong way round, which meant that the hotspots were often hidden by the overlay element. Ben's code did it right, of course.
The hover layer was the bit that was giving me the most grief because I wanted to associate multiple hover areas with one overlay element. Here's the blended Ben/David answer for the transition element (the loopy thing about halfway down the image on the right):
#tr .p1 {left:168px; top:301px; width:74px; height:70px; }
#tr .p2 {left:243px; top:330px; width:46px; height:35px; }
#diagram #tr a:hover span.img
{
left: 172px; top: 307px;
width: 407px; height: 124px;
background-position: -553px -1222px;
}
The first two lines define the hotspots and the third determines the hover action which is to display the overlay element defined in the lower curly braces. The first two lines in these braces determine where the overlay should be placed and the third shows where it can be found in the .gif image.
The HTML part for this same element looks like this:
#tr stands for the transition element. The 'a href=' anchor goes nowhere on click (but it could take you off somewhere else). The first two spans deal with the hotspots while the third slides the overlay in between the hotspot layer and the background.
If you want to explore the CSS/HTML and .gif in detail, they're at http://www.tebbo.com/howtohandlethemedia/index.html and http://www.tebbo.com/howtohandlethemedia/newarch.gif
Of course, it didn't end there. I offered to give Ben a hand with something he's doing. And, who knows, that may end up the subject of another blog.
Cheers Ben. Cheers Twitter. And good luck to you if you plan to go down the interactive infographics route. I've quite got the taste for it and I'm already planning my next one.
In my last blog, I said I’d share the experience of creating an interactive infographic which needed only CSS/HTML and some .gif image files. I used mainly low cost or free PC software.
Two bits took up a lot of time. One was figuring out how to deal with nested (and curved) shapes. The other was capturing all the coordinates for the hotspots. As I mentioned to a pal this morning, “It was mind-bending stuff. A bit like cleaning the windows of a skyscraper with a sponge and a bucket while learning to abseil.” Not one of my most eloquent analogies, perhaps, but it was off the cuff.
The start point was an image of the basic architecture for handling the media plus a header line. The image is quite old, but I’m pretty sure I created it using the GIMP. I typed the elements of the header line into Word, then took a screen shot, pasted it into IrfanView, cut out the bit I wanted and dropped it into the GIMP. This was the base, or background, image for all that followed.
I thought about tarting up the architecture illustration – making the lines three-dimensional, for example, but it was beyond my competence. Having said that, the interactive infographic is intended to mirror my business card and the ‘greybeards’ slide deck. (That’s my post-hoc justification, anyway.)
So, to the task at hand:
I used CSS to recognise and display the three layers: background image, hotspots and replacement image. I’d done it before, but in different ways. (I Googled ‘CSS HTML hover hotspot map’ or similar and found the interesting work of Stu Nicholls.) I liked his idea of redefining the <i> element in CSS to display each replacement image.
If you want to see the actual code, just ‘view source’ of the web page. The CSS and the HTML are all in there together. (You’ll notice some ‘z-index’ references: these determine the stack level of each element: cursor, hotspot, replacement image and background image. The higher the number, the nearer the user.)
I used the GIMP to create separate .gif files for the background and each of the replacement images. I felt it was cheating (compared with other image-switching work I’ve done before where I kept all the elements in a single file and shuffled them around, such as the grid here and the photo here.) Doing it with separate files was fairly quick and straightforward and the files are tiny – less than 50k each.
UPDATE 27 JULY: They’re over five times tinier now. Only the changes to the background image are stored in transparent .gif files.
I created the text boxes and drop shadows in PowerPoint for speed. I scaled the presentation pages to match the iPad-sized ‘architecture’ graphic, then took screen shots of eight boxes at a time and pasted them into IrfanView.
From there I cut and pasted each box in turn into the appropriate GIMP image. (Each lives in its own layer and they can be selectively merged, so they all start off transparent, apart from the background which shows through the whole lot.) Because the cut images were rectangular and the text boxes had curved corners, I had to use the GIMP’s tools to effect a repair when the underlying graphics were obliterated.
To create each .gif, I saved the visible image (the highlighted area and text box on a transparent background with the base, or background, image showing through).
The HTML simply bolted together the hotspots for each image. I used the TextPad text editor for the HTML and the CSS (which I embedded in the HTML header) so it’s all just one file.
The hotspots could only be determined in rectangles, which was okay for the triangles side but a nightmare for the circles side. (I admit I did try to figure out if I could nest HTML’s ‘circle’, ‘rectangle’ and ‘polygon’ image maps to achieve the desired effects – a long story, but I gave up.) The hotspots also needed to be ‘finger aware’ for iPad users, so I made some of them bigger than the underlying image element.
I worked out the hotspot coordinates by cursoring over the GIMP image and taking the top/left height/width readings. To keep myself on track, I temporarily gave the hotspots a light grey background colour and used TextPad’s ‘View/In Web Browser’ option to check progress.
Elegant it is not. But it works well enough.
And that, my friends, is it. No JavaScript, no Flash, no dependencies on anything except an HTML file (with embedded CSS) and a deck of .gif images.
David Tebbutt 
You must be logged in to post a comment.