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.
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.
Yesterday, the 40th anniversary of the mouse was celebrated. I don’t recall there being similar hysteria over the anniversary of the invention of the steering wheel. Perhaps it’s because that didn’t have such a clearly defined starting point. For the mouse this came about, in public at least, at its demonstration in 1968 by Douglas C Engelbart in San Francisco.
The demonstration was a technical tour de force. A showing off of all sorts of technologies which, at the time, were futuristic in the extreme. But, curiously, none of them are celebrated with the same fervour as the mouse. And, what’s worse, the point of the demonstration, the driving force behind all the inventions barely got a look in.
I once asked Engelbart how he felt following the demonstration. His answer: “I was actually disappointed.”
Before explaining his disappointment, let’s look at some of the things he demonstrated: teleconferencing with his lab in Palo Alto, on-screen graphics (screens were rare in those days, let alone graphics), shared whiteboarding, word processing, outline processing, hypertext links and much more besides. People were dazzled by the technologies, the visible manifestations of Engelbart’s story. Had he been an evangelist instead of an engineer, he might have been more successful at getting his real messages across.
But the delegates had every right to be dazzled. This was pioneering technology, all of which has found its way into the ICT products, devices and services we use today. But, had they listened and been able to keep up, they might have been even more dazzled by the underlying story.
Engelbart and his team invented all this stuff in order to help augment human intellect. Ever since 1950 he had wanted to create things that would “give mankind the means to tackle its growing problems.” Specifically, those brought about by ever-accelerating change and increasing complexity.
He spent much of the intervening eighteen years working on a system to amplify the collective intellect of people working towards common goals, creating or adapting software and hardware tools as needed. When we spoke, in 1999, I asked him how far along the journey we’d come. Using a scale of San Jose to San Francisco, he responded “Santa Clara”. That’s about one twelfth of the distance.
He likened organisations to “vehicles that are moving faster and faster, through rought and rougher, stranger and stranger, terrain.” And, to paraphrase, “with dim headlights.” He wanted to make the lights brighter, so that threats and opportunities could be spotted earlier and provide systems that would enable the intellectual capital of the organisation to be brought to bear on plans and reactions. His main application, called NLS (for oNLine System), was all about capturing, hyperlinking, manipulating and accessing relevant information in context. (My poor paraphrase. I’ll add some links at the end of this post if you want to dig deeper.) For a while, Tymshare owned it and renamed it AUGMENT.
At the demo’, 40 years ago, he thought he’d demonstrated how NLS was used within the laboratory for planning, documenting, source code development, business management and document retrieval.
Yesterday, a friend told me that he’d seemed somewhat bemused during the mouse celebration event.
Now you know why.
Here are some background links.
David Tebbutt 