My first marathon

On Sunday I ran the Anglesey Marathon. We and some friends – my running partner Graeme and his family – rented a cottage and made a bit of a weekend of it. Jude and I used to visit Anglesey quite often around the time we got married, but I’d forgotten just what a beautiful island it is. On Saturday we all visited Newborough beach, and after eating a lunch of fish and chips by the sea we went swimming. It was a bit on the cold side, but it was such a warm sunny day we couldn’t resist the lure of the waves.

The marathon itself, on Sunday morning, was a really good experience. I had already heard that the course was quite hilly and that proved to be the case. Graeme and I had driven around the course on Saturday but what had seemed quite gentle inclines from the comfort of the car proved somewhat more daunting after 20 or so miles of running.

 I started much too quickly, clocking a sub-8 minute second mile, and paid dearly later on. My Garmin 305 began to play up – on this of all days – at around the 7 mile mark and from then on in I just had to keep going at what seemed a realistic pace. From about mile 12 I began to tire, and it became a real struggle as I hit the serious hills from mile 23 on. I was briefly reduced to a walk, but then fell in behind a girl who was relentlessly slogging up the hill and managed to keep going in an “if she can, I can” kind of way.

I finished with a chip time of 4 hours 21 mins and 6 seconds – slower than I’d hoped but pleasing nevertheless. Graeme and I hope to return next year to see if we can better our times and to enjoy another lovely weekend in the country.

Add a link to a .swf file

As part of my ongoing work for a client I sometimes update their home page using a Flash .swf file provided by their corporate marketing department. In order to improve user navigation I have been looking for way to add a link from the swf file to specific content within my client site. However, I don’t have access to the .fla source file, and can’t therefore simply update the actionscript within the Flash movie.

Initially I had simply hoped to add an <a href=”link.html”> style link around the swf object. However, searching in Google, the established view seems to be that it is impossible to add an html link to a .swf file without access to the source.

In web design and development, if not in other aspects of life, my mantra is always to find a way, so I started to think a little more laterally. My solution is to place a layer over the Flash file, containing a transparent image, linked to my target. I’ve tested this solution in IE7, 6, 5.5, Firefox 2 and Opera and I’m delighted to report that it seems to work.

The code which inspired my original implementation of this technique was found on a Hawaiian web design company website, and whilst I intended to add details of my exact implementation here, time has defeated me so far. Therefore I’ve added their code below until I get a chance to document my own.

1. First add the wmode parameter transparent to the flash object that is going to be embedded.

Like so…  <param name=”wmode” value=”transparent” />

(note:) If you are using the swfobject.js method to embed your flash files (recommended) you can add the transparent parameter by simply using the example below to append to your current setup:

<script type=”text/javascript”>
var so = new SWFObject(“movie.swf”, “movie”, “700”, “300”, “#ffffff”);
so.addParam(“wmode”, “transparent”);
so.write(“flashcontent”);
</script>

 

2. Now wrap the flash movie in its own div tag and and apply some css so that we can set the position to be below the header text and description div.
(See example below for xhtml and css code.)

<div id=”header”>

<div id=”flash”>flash file goes here.</div>

</div>
And the accompanying css for the above is:
(note the z-index and absolute position for #flash div)

#flash {
width: 700px;
height: 300px;
position: absolute;
z-index: 0;
}

#header {
height: 300px;
margin-bottom: 30px;
text-align: left;
}

3. Ok, now lets go ahead and set up the html layers that will be displayed displayed above our flash content. In this case it will be an h1 header and a description that is in its own div that is above the flash media.

(Two items to be positioned over the flash movie)

The h1 css is: (note: feel free to style it however you want or use a different tag, the important thing is the z-index and absolute position.

h1 {
padding-top: 15px;
padding-bottom: 15px;
margin-left: 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 24px;
color: #666666;
font-weight: bold;
position: absolute;
z-index: 1;
}
Now for the description css which is going to be in its own div tag containing text and will be positioned above the flash element as well: (note the z-index and the absolute position again)

.description {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
color: #FFFFFF;
margin-left: 15px;
margin-top: 35px;
padding: 5px;
font-weight: bold;
line-height: 14px;
position: absolute;
z-index: 1;
}

4. Thats it, the finished code in the body of a web page will look like this:
(note: Code is placed in the header div which has no z-index or absolute position necessary)

<div id=”header”>

<div id=”flash”>flash file goes here.</div>

<h1>Heading Text</h1>
<div class=”description”>Your description text</div>

</div>

And the final accompanying CSS is:
h1 {
padding-top: 15px;
padding-bottom: 15px;
margin-left: 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 24px;
color: #666666;
font-weight: bold;
position: absolute;
z-index: 1;
}

.description {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
color: #FFFFFF;
margin-left: 15px;
margin-top: 35px;
padding: 5px;
font-weight: bold;
line-height: 14px;
position: absolute;
z-index: 1;
}

#flash {
width: 700px;
height: 300px;
position: absolute;
z-index: 0;
}

#header {
height: 300px;
margin-bottom: 30px;
text-align: left;
}

HTML Layers and Flash Position Summary:

How to layer a Flash movie below another html div tag or layer.

To position a flash movie under another html element basically you just need to give the flash move a parameter of wmode transparent and position it absolutely with a z-index of 0. Do this by putting the flash object in its own div and using css. (see examples above)

For the items that you would like positioned above the flash movie set their z-index to 1 and position them absolutely as well. After that it’s just a matter of putting it all in the div or container that you would like applying the css and adjusting the margin and padding to your specific needs.

Domain junkie?

As much for my own reference as anything else I feel I should compile a list of my current domain portfolio, both in development, and  published. Hopefully this might act as a reminder not to buy any more until I’ve progressed some of these as projects. Well, maybe just one more…

www.designcheshire.co.uk – Project: Web Design Cheshire

www.designmidlands.co.uk

www.designshropshire.co.uk

www.ellesmere.me.uk

www.genealogybookshop.co.uk

www.generationx.it

www.generationxcomputers.co.uk

www.generationxcomputers.com

www.generationxhosting.co.uk

www.generationxinternet.com

www.hibbott.com

www.inventiveinnovations.com

www.languagetolife.com

www.mummycool.co.uk

www.mummycool.com

www.mummywear.co.uk

www.mummywearmaternity.co.uk

www.mummywearmaternity.com

www.myonlineguide.co.uk

www.shropshireholidaycottage.co.uk

www.specialistbookshop.co.uk

www.specialistbookshop.com

www.thestartupbusiness.co.uk

www.ukpta.co.uk

www.ukpta.com

www.ukpta.org

p.s. Like all addictions I needed just one more fix, and www.languagetolife.com is it.

I’ll blog seperately and in more depth on my plans for the development of the names above soon. In the meantime if you want to make me an offer…

Ellesmere Triathlon Results

Ellesmere Triathlon 2008In spite of my somewhat sporadic training, the triathlon went rather better than I had realistically expected or hoped. My total time was just over 3 hours, with my split times as follows:

Swim, including T1 35:49

Cycle, including T2 1:25:50

Run 59:25

Total 3:00:04

It was a fantastic day, with ideal weather conditions, and I really enjoyed the race. My intention now is to concentrate on my running for the remainder of this year with a view to entering a sprint (probably Oswestry) and another Olympic triathlon (hopefully Ellesmere) next year. I’m planning to keep up my cycle and swim fitness with one session of each every week and hope be able to shave (at least) the extra 5 seconds off to complete my next Olympic under the 3 hour mark!

Full results can be viewed at http://www.tri247.com/results_5225.html

Under Fire

Generation X Hosting is currently experiencing what we believe to be a distributed denial-of-service attack, also known as a DDoS attack.  A distributed denial of service attack occurs when multiple compromised systems flood the bandwidth or resources of a targeted system in an attempt to make a computer resource unavailable to it’s intended users. Our network providers are working to blackhole the attack higher in the system.

Black hole filtering works by forwarding malicious traffic to an imaginary interface known as Null0 – similar to /dev/null on Unix machines. As an invalid interface, traffic routed to Null0 is essentially dropped. This technique also minimises performance impact during the DDoS investigation so that the rest of the network remains stable under the increased load. 

I am pleased to report that most mail and web services have now been restored and that in spite of the attack our web monitoring service is currently showing an uptime report of 99.96% across the Generation X network.

Ellesmere Triathlon 2008

Ellesmere Triathlon 2007My mid-life crisis had been progressing quite nicely.

I’ve started running, but amongst my friends that seems almost obligatory. Turn 40, start running, sustain a rather nasty knee injury. Rather like parenthood, taking up running feels like joining a secret club that you didn’t know existed until you became a member.

I’ve even completed a couple of 10k races over the past year and the Lake Vyrnwy half-marathon.

However, this week I’ve considerably raised the stakes. In just over 12 weeks, on June 1st, I will be competing in the Tri-UK Shropshire Triathlon. This is an Olympic (or standard) distance triathlon, comprising an open-water 1.5 km swim, a 40 km bike ride, followed by a 10 km run.

My stated aim is simply to complete it. Secretly I’d like to achieve a time of between three and three-and-a-half hours. I suspect this might prove a little ambitious, but everyone needs a goal. As things stand at the outset I have run a 10k race, pretty much on the flat, in 54 minutes. I practised swimming 1.5 kms in our pool on holiday last year three or four times in just under an hour. And I once cycled from Cambridge to Colchester on a 3-speed bike, with a terrible hangover, in just under a day. By accident…but thats another story. Training begins in earnest with a swimming session tonight.

In the words of my dad, “If you win you’re a hero, if you lose you’re a fool”. Time – in this case just 86 days – will tell!

Technorati

To quote the Technorati website:

Technorati currently track 112.8 million blogs and over 250 million pieces of tagged social media. They search, surface, and organize blogs and the other forms of independent, user-generated content (photos, videos, voting, etc.). They index the live web within minutes, providing their users with up-to-date information about the topics and authors they care about. Technorati is the authority on what is happening right now on the live web including the blogosphere. They can help bloggers by driving targeted traffic to their sites, and allowing them to connect to the millions of other individuals in the blogger community.

Lets see if it works.

Simon.Hibbott.com is currently ranked 8,911,336. It currently has no authority.

Here’s what that means and how it’s calculated:

Continue reading Technorati

Web 2.0 Online Operating System

I openly declare myself as a zealot when it comes to Open Source software and applications. To me it defines the spirit of the internet in terms of open free access to information through global collaboration.

Online Operating SystemToday I came across a cool Web Operating System called Online Operating System (OOS) which provides users with an online desktop and set of applications they can access from anywhere with internet access. It comes with a file manager, a system control panel, several utility programs (text editor, image viewer, games, etc.) and a comprehensive groupware suite.

The user interface seems at first glance to be fairly intuitive. I was able to create and save a document, set up a basic web page and send and receive mail from my new oos.cc account – all within minutes of signing up. In addition to the applications themselves they offer all users 1GB of free storage for files, photos and an OSS homepage.

User surveys in the forum show an age range of 17-38 (now 42!) and that most use the system for a combination of file sharing, desktop portability, free webspace and in a surprising number of cases playing Lemmings. But as one forum user states “This is the future of application delivery!”

The OOS project aim “is to create a common platform for and a comprehensive set of modern web applications, freely available and easily accessible on the internet” which fits in nicely with my utopian ideals. It is published under the GNU General Public License (GPL) and offers a Develop Suite which gives view and edit access to the source code of all available applications. Documentation for the Developer Suite is promised soon.

Development of the OOS applications is based on the commercial reBOX JavaScript API (Application Programming Interface) developed by an Austrian company, iCUBE Network Solutions. Whilst not forming part of the Online Operating System they promise to make a site-wide license of the reBOX API freely available to potential developers within the OOS. 

The system claims to introduce a new architecture, or paradigm, for web applications based on AJAX, DHTML and what it describes as “novel approached to http pushing”. Web 2.0 applications like this combine standardised technologies such as XHTML, CSS and AJAX with user-oriented design aiming to redefine web applications. For the user this means the ability to perform functions such as drag and drop and to be notified of changes and updates in real time.

All of the big web players have an interest in this thin client technology, but the OSS feel that their open architecture and strong focus on usability and extensibility put them ahead of the competition. I hope they’re right.

WordPress Stats

As a new WordPress user one of the first things I did was install the WordPress.com stats plugin. However, I was disappointed at the depth of information that it provides. I was fortunate enough to discover Statcounter.com when I first started designing sites almost 4 years ago, and continue to be impressed by the free service they offer. I’ve now installed the Statcounter WordPress plugin on this blog and found it straightforward and simple.

I have investigated Google Analytics and am currently using it on a couple of sites. If you are contemplating running an Adwords advertisement and marketing campaign I would highly recommend it. There are currently over 80 distinct reports, each customizable to some degree, and users can see ad group and keyword performance as part of their reports. The ability it offers users to define and track conversions, or goals, such as sales, lead generation, viewing a specific page, or downloading a particular file undoubtably prove invaluable under certain circumstances, particularly for e-Commerce applications.

For my purposes however, and at this time, Statcounter seems to provide the better solution.

Linked into LinkedIn

LinkedIn is a business orientated social networking site which uses a “gated-access” approach to build trust and credibility amongst users. Registered users can maintain a list of contact details of people they know and trust in business (called Connections). Users can invite anyone (whether a site user or not) to become a connection.

I’d already registered with LinkedIn back in December 2007. Today, prompted by LinkedIn Profile Extreme Makeover by Guy Kawasaki, I updated my Profile and invited some existing user friends to become connections. I’ve also added a link to my LinkedIn profile from this blog. Guy Kawasaki’s article is actually more common sense than extreme. Essentially he advocates putting some effort into making your profile as complete as possible in order to make it an effective networking tool.

The Unofficial LinkedIn User’s Guide for Executives and Professionals is a more  comprehensive guide to LinkedIn and a call to action for senior executives and professionals to increase their understanding of LinkedIn’s incredible potential as a collaborative networking tool.