Friday, 9 August 2013

BT's closure of free email services

If you've ever had a BT internet service in the past, the chances are you have an email address on one of their free services - these are, & email addresses. But something you may have missed is that they are closing their free email services on the 16th September 2013, which means you don't have long to decide what to do. Yes, BT kindly sent out an email to everyone letting them know but the subject simply looked like yet another T&Cs change and, let's face it, few of us actually bother to read those emails - I certainly didn't! Thankfully I'm not the only one in the office who uses a BT account, and the question of 'what do I do now?' that was raised when this email arrived was brought this thorny issue to my attention.

So what are BT doing?

According to the email, and the BT website, they are making improvements to their mail service so that means that they are now closing all the BT Basic Mail services and any email services that have been left active once a customer left BT. But in reality what they appear to be doing is forcing their email users to either opt for their broadband service or pay a monthly email fee. If you're a BT broadband customer your email address will stay the same and you will be moved to their new service.

What are my options?

BT are offering three options:
  1. If you're a BT broadband customer you can keep your email address and link it to your broadband account
  2. If you're not a BT broadband customer you can sign up to their broadband service and link your email address to your new broadband account
  3. If you're not a BT broadband customer and you are happy with your current service you can keep your email address by signing up for their Premium Mail Service at a cost of £1.60 per month.
This is simply saying that you've got to pay for your BT email address now, one way or another. We won't be changing to BT broadband as we get a much faster service, and better all round package, from Virgin Media. Despite living close to the main exchange in our town we never achieved a good speed from BT and to match what we currently get would vastly increase our expenditure on broadband. And I suspect that this is the case for many.

But I don't want to change my broadband provider or pay for the email address, what do I do now?

This was the question raised in our office this week. We all have a number of email accounts these days, with our broadband provider, with our Android or iOS device, maybe a standard Yahoo! email or a Gmail account. You need to decide which of these you want to now use as your main account and start going through your subscriptions and all your contacts to update your details to your new account. I've decided to use my Gmail account that I got with my first Android phone, and so far have contacted friends and family to let them know my new email address and I've changed my Twitter account and updated my contact details on my account with my gym.

But there's a lot more to it than this, particularly if you have ever used your BT email account for business - or have an archive of emails and attachments that you want to keep. To keep all of this you're going to need to archive your emails, and since the changes a few months ago to the BT webmail service this isn't a quick and easy task.

Archiving your emails

Before you start archiving you need to log in to your BT email account through your web browser and allow your account to be accessed elsewhere. To do this hover over the cog in the top right of the screen and select 'Mail Settings' from the menu. Click on 'POP & Forwarding' in the advanced options and select the first option 'Access BT Yahoo! Mail via POP', make a selection from the dropdown regarding your Spam email folder, and then click on the 'Save' button.

To archive your emails you're going to need an email client, such as Outlook, Outlook Express/Windows Live Mail, Thunderbird or Mac Mail. Open your chosen email client and add a new account:
  • Outlook 2010 and above:

    Click on the File tab, click the 'Add Account' button, and use the Auto Account setup to connect to your BT email account.

    Once you have created the account click on the 'Account Settings' button on the File tab, double click on the new email address to change the account settings. Change the username in the Logon information block to your full BT email address.

    Click on the 'More Settings' button and select the 'Advanced' tab. Uncheck the 'Leave a copy of messages on the server' button as you will need to use your inbox as a transfer storage area while archiving. Click 'OK', 'Next' and 'Finish'

    Repeat for each BT email account you have
  • Windows Live Mail:

    Click on the first tab, select Options > Email accounts. Click 'Add' and select the 'Email account' type. Enter your email address and password.

    Once the account has been created select it in the accounts list and click on the 'Properties' button. Select the 'Servers' tab and change the Email username in the Incoming mail server section to your email address.

    Click on the 'Advanced' tab and uncheck the 'Leave a copy of messages on the server' button as you will need to use your inbox as a transfer storage area while archiving. Click 'OK' and 'Close'

    Repeat for each BT email account you have
  • For Thunderbird follow this tutorial:
  • For Mac Mail follow this tutorial:
Now that you're connected to your BT email address you need to replicate the file structure - you can add folders to your inbox by right-clicking on the inbox and selecting the add new folder, or new folder option (this may vary from client to client). We found it helpful to have the webmail access open in our browser on one side of the screen and the email client open on the other side of the screen.

Once you've replicated your folder structure you can start downloading your emails. Start with your inbox. Click on the Send/Recieve button on your client and the full contents of your inbox will download to your computer and be deleted from your webmail. You'll need to sort these emails - or put them into a 'to be sorted' folder - otherwise you're going to be hunting through these to find your archived emails in the next step.

Once your inbox is clear on both your webmail and email client you can start transferring your archived emails from their folders. Sadly POP email doesn't allow you to automatically replicate your folders and simply pull their contents down, so you need to move everything from the folders back into your inbox. This is why it's so important to clear your inbox first. Take it one folder at a time and select all the emails in that folder - with the btinternet accounts this is quite easy, just scroll to the bottom of the email list and click on the select all checkbox at the top of the screen, with talk21 accounts you can only do this 25 messages at a time. With the messages all selected (checked) you can now use the 'Move' option at the top of the screen and select Inbox. Your emails will now disappear from the folder you are transferring and appear in your inbox. Once they're all there, go to your email client and click on the Send/Receive button. Wait for the emails to download and then select them all by single clicking on the first email then scrolling to the bottom of the inbox and pressing Shift while clicking on the last email. Now drag your emails to the duplicated folder in your email client and they will be moved en masse from your inbox to your archive folder. Repeat for every folder in your inbox, and then for your sent folder.

Repeat this for all your BT email accounts and you will now have a full archive of your emails and attachments. Once you have done this you should now stop using the webmail access for your BT email accounts and use your email client on your computer as it will automatically download all your emails and you can either delete them or archive them as you would through your browser. Once BT close these accounts your email will no longer work and you will need to disable the Send/Receive option for these accounts. There are tutorials online to show you how to do this, for example this one for Outlook, and this for Thunderbird.

Monday, 15 July 2013

Website Slideshows - Which is the best approach?

Image slideshows have been around for a long time on websites. You're probably so used to seeing them now that you don't even realise when you're looking at one. There are two main ways that they're used on websites: to create movement in a header graphic; to allow the site visitor to scroll through a selection of images in a gallery in an interactive and attractive manner. But how are these slideshows created? What technologies can we use to create them? What is the best approach?

A little history...

In the early days of the internet it was really hard to anything with moving images, and the only way to create any sort of animation was using animated gifs. These were great for vector art and cartoon style graphics, but if you wanted to create something like a high quality photographic header you were going to have to put up with a lot of quality loss. Although Java was around it wasn't widely used and being a full Object Oriented (OO) Programming language was aimed at providing web based applications for 'dumb terminals' to operate network based functions. Out of Java was born JavaScript, which was a lightweight complementary OO language that Netscape released in the mid-90s. With this it was possible to start using lightweight client-server programming to add functionality to web pages, and aimed at nonprofessional programmers was soon used to create web pages that would allow you to make calculations, verify that form fields had been filled etc. It wasn't long before people started to realise that you could manipulate pretty much every part of the web page using JavaScript and they started to write scripts that would allow a set of images to be cycled through, changing the photo at a set interval. At the same time a little known program called SmartSketch was allowing users to create cell animation and vector graphics - the developing company was bought by Macromedia and Flash was born. 

Now there were two alternatives to the standard animated gif. JavaScript became a natively supported language in all web browsers which meant that any scripts would be accessible without the installation of any additional programmes. Flash, however, required the installation of either the Flash player or the Shockwave player in order for the animations to be viewed. As Flash and Shockwave became synonymous with games this became less of an issue over the ensuing years and the easy ability to add controls to a Flash animation made it the go-to option for most developers wishing to create image slideshows of any type.

Where do we stand today?

Many developers started to phase out the use of Flash for slideshows over the last few years for a number of reasons - though the main one for me was the lack of compatibility with Screen Reader software and therefore the potential problems that using Flash could cause in terms of the Disability Discrimination Act (DDA) and an awareness that not all home users were confident enough to install the Flash player - many users being wary of installing add-ons to their browsers due to fear of hacking and malicious software.

Over time the HTML standards changed, CSS was introduced, and the options developers had available to them in terms of placement of items on a web page improved sufficiently that slideshow controls could easily be added to a page and the images could all be loaded when the page loaded but just shown or hidden on command - rather than having to load images when needed, which could be a slow process on a narrowband connection. With this in mind a lot of developers went back to JavaScript. 

Today there is a new kid on the block, JQuery. It's been around since 2006, but has really only become commonplace in the last 2 or 3 years. JQuery is a cross-browser JavaScript library that is designed to simplify client-side scripting on websites. It's free, it's open source and the developer can simply call the libraries from various repositories on the internet, freeing up space on their own servers and ensuring that any code updates are automatically applied, closing any bugs and loopholes that may appear over time and allowing quick access to the latest tools.

Most slideshows in use on the Internet today are now powered by JQuery. There is a huge resource of code samples, free downloads and help available online making it one of the quickest and easiest technologies to work with. Being a JavaScript library it uses common JavaScript technology and so is readily available to all browsers on all platforms, unlike Flash which is not available on any Apple mobile device - a move which further fueled the move away from Flash for many web developers. As a JavaScript library much of the implementation code is quick and easy to write, although it may be a little more complex to adapt a freely available JQuery script to your specific needs if it isn't a perfect match. 

Today we favour the JQuery approach as it allows us to quickly create attractive slideshows and be sure that they will work on all devices and all browsers. Working with JQuery also means that we can combine effects, for example adding a hover maginfier to a slideshow on a brochure websites.

Monday, 8 July 2013

Working with HTML5 video

HTML5 video has been around for a while now, but it can still be a problem to work with when trying to achieve cross-browser compatibility. In this blog post I hope to help you add HTML5 video to your sites with the minimum of effort.

There are a lot of different HTML5 video formats that are supported by the various browsers out there, and in some cases your users may still be working with older versions of Internet Explorer which doesn't support any HTML5. Despite this my findings have been that you don't need to provide all of those versions as many browsers will happily work with multiple HTML5 video formats.

In order to provide both HTML5 video and a fallback for older browsers to Flash you will need to create the following video files: mp4, webm and FLV or SWF. But, a word of warning before you start encoding. The mp4 video must be created in a very specific way in order to be compatible with Internet Explorer 9 and 10.

When I work with video I now use Free Studio Manager from DVDVideoSoft. This piece of free software will allow you to convert video into multiple formats suitable for all types of devices - DVD, Mobile, YouTube etc. I use the DVD & Video option to convert videos. For your webm video, which will play on Firefox, Opera and Chrome, make sure that you use the webm container with VP8 video and Vorbis audio options. For mp4 video, which will play on all browsers with the exception of Opera, you will need to be careful to make sure that you use the mp4 container with H.264 video and mp3 audio. You may find that you need to create a new preset for this format. It is important that you use these options only as any others will not play in Internet Explorer.

Once your video files have been created, including your Flash fallback, you can place them on your webpage. Again, you need to use a specific order for your HTML code - place the webm first, then the mp4 and finally the Flash.

Sample code:
<video controls width="510">
<source src="assets/videos/html5video.webm" type='video/webm; codecs="vp8, vorbis"' />
<!-- if Safari/Chrome--> 
<source src="assets/videos/html5video.mp4" type="video/mp4" />
<!-- If the browser doesn't understand the <video> element, then reference a Flash file. --> 
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="510" height="328" id="flashvideo" align="middle">
<param name="movie" value="flashvideo.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#000000" />
<param name="play" value="true" />
<param name="loop" value="true" />
<param name="wmode" value="window" />
<param name="scale" value="showall" />
<param name="menu" value="true" />
<param name="devicefont" value="false" />
<param name="salign" value="" />
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="true" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="flashvideo.swf" width="510" height="328">
<param name="movie" value="flashvideo.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#000000" />
<param name="play" value="true" />
<param name="loop" value="true" />
<param name="wmode" value="window" />
<param name="scale" value="showall" />
<param name="menu" value="true" />
<param name="devicefont" value="false" />
<param name="salign" value="" />
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="true" />
<a href="">
<img src="" alt="Get Adobe Flash player" />
<!--[if !IE]>-->
You should now have a fully functioning HTML5 video page that will automatically display the correct video format for the user's browser.

Monday, 1 July 2013

PrettyPhoto: How to make your captions use HTML formatting…

A PrettyPhoto gallery image using HTML styled caption

…without messing up the tooltips

I’ve been using PrettyPhoto for a while now, as it’s a nice and neat Lightbox effect for image galleries written in jQuery. It creates an overlay on the screen displaying the full size image from a thumbnail with navigation through related images. It’s always been possible to add captions to these large images, but with the last couple of versions there has been support for using HTML formatting tags to make the captions more attractive. Unfortunately the drawback of this is that the HTML is then displayed in plain text within the Tooltip when you hover over an image which is in a PrettyPhoto gallery. There is lots of information online about fixing this, but none of this is compatible with the current version of PrettyPhoto (v 3.1.5), so I decided to use the old fix as a basis for creating a way to pretty up the captions in the latest version.

Open the jquery.prettyPhoto.js file from your site and locate the line that contains the following code:
pp_descriptions=isSet?,function(t,n){if(e(t).attr(settings.hook).indexOf(theRel)!=-1)return e(t).attr("title")?e(t).attr("title"):""}):e.makeArray(e(this).attr("title"));
This tells the jQuery code to display the contents of the “title” tag of the image as the caption. This means that if you place HTML formatting code into the “title” tag of an image it will then appear fully formatted in the caption of the relevant PrettyPhoto gallery. However, the “title” tag is also used by browsers to display a description of the photo as a Tooltip when you hover over an image on the page. If you have added any HTML code here it will not be rendered by the browser as anything but text e.g.<h2>Heading</h2><p>Caption here.</p> will display formatted in the PrettyPhoto gallery, but exactly as written in the tooltip.

So, if we change the above line to use “alt” instead of “title” we can place plain text in the “title” attribute of our image to display as a tooltip, but place HTML formatted text in the “alt” attribute to allow PrettyPhoto to display a nicely formatted caption under our image in the gallery.

The new line will look like this:
pp_descriptions=isSet?,function(t,n){if(e(t).attr(settings.hook).indexOf(theRel)!=-1)return e(t).attr("alt")?e(t).attr("alt"):""}):e.makeArray(e(this).attr("alt"));
 And your image code will then look like this:
<ul class="gallery clearfix">
<a href="assets/large/photo-name.jpg" rel="prettyPhoto[galleryname]" title="This is a caption. This caption has no formatting for the title tag, used as a tooltip in the browser.” alt="<h2> This is a caption. </h2> This caption has no formatting for the title tag, used as a tooltip in the browser."><img src="assets/photo-name.jpg" alt="" /></a>

Monday, 24 June 2013

Hashtags: What? Where? Why?

The Hash or Pound symbol - used to indicate that the connected word is a hashtag
Now that Facebook has finally made support for hashtags live we thought it was high time we looked at what they are and how they work.

What is a hashtag?

A hashtag is a word, or phrase, prefixed with the hash (or pound for US readers) symbol.

Hashtags have been around for a long time now, originally being used in IRC in order to group conversations by topic or channel. They became popular thanks to the rise of Twitter, where they were first used back in 2007. Since 1st July 2009 Twitter has been automatically linking any hashtag to a search result for all Tweets flagged with that hashtagged word.

A hashtag allows people to quickly and easily find posts about a topic that they are interested in, no matter if they’re following the person posting the message or not.

Where are hashtags used?

Most social networking sites support hashtags now, they’re commonly seen on Twitter, Tumblr, Instagram, Flickr, Google+ and now Facebook.

So where do you put the hashtag? Well, that seems to vary from network to network, and person to person. Most users now tend to just hashtag the important word within their post, for example “Check out this great #architecture #photo of #CardiffBay” But there is also a trend to simply write your content and then stick all your relevant hashtags at the end of the post, e.g. “Check out this great photo #architecture #photo #CardiffBay”

Why are hashtags used?

An example of the hashtag as used in a Twitter post - in this case for Royal Ascot
Tapping into this way of engaging in conversations with social networkers all over the world, advertisers, TV programme makers, film makers and musicians are now promoting hashtags in many areas of our lives. When you’re watching a show on TV the presenter may prompt you to take part in the conversation using their hashtag, e.g. #BGT or #QuestionTime. Dramas often now include a hashtag in their title sequence, or may have one emblazoned on their ad break idents e.g. #Continuum or #Broadchurch.

Adverts often feature information on where to find their Facebook and Twitter feeds and will sometimes feature a hashtag to prompt viewers to go online and talk about their product. Of course the marketing use of hashtags has been known to backfire, and there have been some high profile incidents of customer complaints hijacking hashtags created to promote a positive view of a company. This has led to a term called ‘bashtags’ being generated.

Perhaps the most high profile of 'bashtag' incidents was the #McDStories hashtag created by McDonald’s to promote positive customer experiences about the chain. The effort was abandoned after just two hours after  McDonald’s received numerous complaints about the chain rather than the positive stories they were expecting! Qantas experienced a similar hashtag disaster when promoting a Qantas Luxury hashtag to share positive flight experiences with the airline.

An example of an Instagram search based on a hashtag - in this case for the Lake DistrictBut hashtags aren’t restricted just to those created by marketing teams, they were started by – and still used by – the ordinary folk of the Internet. Anyone can make up a hashtag. It might stick and others might pick up on it, it might be a one off. The important thing is that it is used to express what is important about the content of the post by the poster. However, don’t feel obliged to include a hashtag in every post. Just ones that you want to highlight particularly.

Instagrammers have a habit of using a mass of hashtags in order to try and gain followers and likes on their photos. Sometimes this has the effect of spamming hashtags just for clicks, but it’s become part of the way that Instagram works, and it does make it easier to find users with similar interests.

Why has Facebook now started supporting hashtags?

Although hashtags are used by everyone, it’s clear that they have become a big marketing tool and their lack of support on Facebook has pushed a lot of potential marketing revenue towards Twitter where companies can pay to promote their tweets. Supporting hashtags puts Facebook back on an even footing with Twitter, and allows them to angle for more ad revenue.

A lot of social network users are active on multiple networks and there is a growing trend to use apps that will cross-post to a number of social networks, so Facebook has become awash with hashtags thanks to people cross-posting their Tweets and using Instagram to share their photos with friends on Facebook. It seems logical then that Facebook would eventually develop a hashtag search which would support this.

An example of the new linked hashtag search in Facebook - in this case searching for posts about Lincolnshire
We’ve become used to seeking out new acquaintances online via hashtags on Twitter, so why not get involved in the conversation the same way on Facebook? There seems to be a constant battle between the two networks for superiority and perhaps this is one way of Facebook getting their members to use the service more. I know that I’m not alone in fluctuating between the Twitter and Facebook. When I’m watching something on TV that I want to talk to others about, I use Twitter and hashtags, and I’ve had some great conversations that way. Perhaps Facebook’s hashtag support will now get me, and many others, doing the same thing there.

Tuesday, 18 June 2013

Browser testing - why should I test my web site?

The Big Five Browsers
One of the more frustrating things about website development is the ever landscape of web browsers. Each browser, and each new version, brings it's own challenges and despite web standards there is no one single approach to code that is guaranteed to work on every browser. So unless you test on multiple versions of multiple browsers, and on different platforms, the chances are that your web site won't work as you intend for all your visitors.

Things have improved over the last couple of years, since the release of Internet Explorer Microsoft have been much more standards compliant, but even so there are still some design elements of coding that are supported in a unique way. With Internet Explorer 10 we have now discovered that many of our tricks to single out the various versions of Internet Explorer no longer work.

Firefox, Safari and Opera are all pretty similar in how they display web pages, and there usually isn't much difference in display using Google Chrome - although we recently discovered a slight quirk on one client site which made our navigation mysteriously drop a level on the final element. Generally it seems to be the case that if the site displays correctly in one version of Firefox, Safari, or Opera it will work correctly in the other versions - unless you are using a particularly old browser version.

The story is completely different with Internet Explorer. Internet Explorer 6 is very basic with it's support of various technologies, and can be one of the most difficult browsers to work with. Internet Explorer 7 is a slight improvement, but still retains some of the quirks of the older version. Internet Explorer 8 was the most standards compliant browser from Microsoft, but still had its quirks and now we have to accommodate the differences of Internet Explorer 9 and 10. As a web developer this makes life challenging, and there are tricks that we can use to target these browsers. The biggest difference between Internet Explorer and other browsers is well documented and known as 'The Box Model' and relates to the way that the browsers handle padding and margin. This seems to have improved with later versions, but can still be an issue.

Even with standards compliant browsers, not all elements of design and layout are described in the same manner in these browsers - if you are using CSS drop shadows, gradients, rounded corners and some text effects, you will have to write multiple versions of the code to cope with the different browser bases: One for Mozilla, one for webkit browsers, one for old versions of Internet Explorer, one for Internet Explorer 9, and one for Internet Explorer 10.

Take as an example a simple gradient background that goes from one shade of blue to another. To provide support for all browsers you need to use the following code:
background: #1e5799; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzFlNTc5OSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzI5ODlkOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iIzIwN2NjYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM3ZGI5ZTgiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* IE10+ */
background: linear-gradient(to bottom,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-8 */
To support Internet Explorer 9 we have to generate a dynamic SVG image on the fly, we have to add filter code for Internet Explorer 6-8, and various versions of gradient code for the different browser code types. And, of course, we have to provide a solid colour for any browser that doesn't support the gradient code. A lot of code, and a lot of work, for a simple background. And this complex code highlights why it is so very important to test your web site on as many browsers as you can.

So how do you test on multiple browsers? With Firefox, Chrome and Opera you can easily install different versions of the browser - just make sure that you install to a different folder on your hard drive. For Internet Explorer and Safari this is not possible, and my solution has been to install Oracle VirtualBox on a spare laptop and set up various Virtual Machines running Windows XP and various older versions of the main browsers. I also run the beta of Windows 8 with Internet Explorer 9 on a Virtual Machine on this laptop.

Browser testing doesn't end here though, not only do web sites need to be tested on the main browsers on Windows but also need testing on Mac, Linux and mobile devices. For our testing purposes we have an old eMac in the office, with a wide variety of browsers installed. We also use Firefox and Opera on our Ubuntu development server, and we have an HTC Android smartphone and an iPad.

As you can see, coding a web site is not just a simple case of writing some HTML, a bit of CSS and sticking in the content. After all that is done and working in your chosen development browser (we use Firefox as it may be the most standards compliant browser), a lot of time and effort must be put in to cross-browser, cross-platform testing. It's worthwhile having a pad and paper to hand as you test so you can note anything that doesn't quite sit correctly.

Check out our Useful Links page for cross-browser, cross-platform, development resources including a number of CSS generator tools.

Thursday, 6 June 2013

Browser Privacy - What's the fuss?

With Microsoft making a big deal on their current advertising about browsing privacy, I thought it would be a good opportunity to take a look at what Browser Privacy is and how you can use it.

What is Browser Privacy?

Whenever you do anything on the Internet you leave a trace of your actions behind. This can be in the form of cookies, cached files and images stored on your computer, or information passed to third parties and stored for advertising and statistical analysis purposes. And that's all great as it allows web site owners to gain valuable information about traffic to their sites, and can deliver advertising tailored to your interests. But sometimes this information trail can become an annoyance, or leave you open to unwanted malicious attacks - and on a shared computer can easily divulge your information to other users.

Browser Privacy is a term for a number of ways that you can safely browse the Internet without leaving an easy to find trail for other users on your computer. Most browser privacy modes do not hide your actions from your ISP, employer, or websites themselves.

How can I use the Internet in privacy?

Well the answer to this depends on your browser and how happy you are with using additional packages to fully clear the traces of your browsing activities on your computer. With older browsers you need to manually clear the stored history & temporary files from your computer using Cache clearing techniques - and even then you really need to use a package like CCleaner to totally clear the files from your system. Not only is this time consuming, but it can be all too easy to forget to do and the person you've been buying a gift for will suddenly come across it in the browsing history on your shared computer.

With the latest browsers there is another option, the Incognito or InPrivate browsing option.

Using your browser's Incognito mode

Internet Explorer

Internet Explorer 8 introduced the InPrivate Browsing mode to allow total privacy in your browsing. This mode stops the browser from storing cookies and other private data files to your hard drive. It also automatically clears browsing and search history when you close the browser window.

Activate InPrivate Browsing through the Safety menu or by pressing Ctrl+Shift+P. A new window should now open which informs you that you are using InPrivate Browsing and explaining how this works. You can now browse the Internet without any cookies or other data being stored on your hard drive.

While you are using the InPrivate Browsing mode you will find that browser extensions and toolbars will be deactivated.

Google Chrome

From the point of view of ease of use, and hiding your browsing history from anyone you share a computer with, Google Chrome is probably the stand-out browser, providing privacy for your browsing history and the websites you visit may still store information about your visit. 

To use the Google Chrome's Incognito Mode click the Chrome menu on the browser bar and select New Incognito Window or press Ctrl+Shift+N. You can also start Chrome in Incognito Mode from the Start menu if you have it in your Start List.

Once you have entered Incognito Mode you will see a new window with a message explaining what Incognito browsing is and to remind you that you are in Incognito Mode you will notice a shady spy cartoon character in the top left of the browser.

Mozilla Firefox

Mozilla Firefox uses Private Browsing mode to allow you to keep your browsing & searching history safe.

To use the Mozilla Firefox Private Browsing mode click on the Firefox menu on the browser bar and select New Private Window, or press Ctrl+Shift+P.

Once you have entered Private Browsing mode you will see a new window with a message explaining how Private Browsing works. You will also notice that the orange Firefox menu item is now purple and has a mask next to it.


Safari also offers an Icognito mode, called Private Browsing. As with other browsers this mode will keep your browsing history and auto-fill data safe by not storing the data to the computer's hard drive.

To enter Safari's Private Browsing mode click on the Gear icon (also known as the Action menu) in the menu bar and select Private Browsing. Unlike the previously discussed browsers, Safari does not offer a shortcut to enter Private Browsing mode, instructions on creating your own shortcut can be found at MacWorld.

Once you have selected Private Browsing you will see a dialog box asking if you want to turn on Private Browsing and explaining what it is. Clicking the OK button will switch on Private Browsing, but be careful - the only indication that you are in Private Browsing mode is the addition of the word PRIVATE to the end of the address bar.


Opera adds another choice to private browsing, allowing you to decide if you wish to enable it in a new window or a new tab.

To enable Opera's private browsing mode click on Menu or Opera in the top left corner of the browser and highlight Tabs and Windows. Select either New Private Tab or New Private Window. For a new window you can also use the shortcut of Ctrl+Shift+N.

Whichever option you choose a new tab or window will open displaying a message informing you that you are using a Private tab and explaining what that means.

What about my Smartphone or Tablet?

There's good news if you're a Smartphone or Tablet user, as there are browsers available which allow incognito browsing on these platforms too.


If you're an iPad user then you won't automatically be able to use any form of browser privacy while online. The iPad version of Safari does not off this as a built-in feature. There are other browsers available for iPad, which do contain a browser privacy function: Perfect Web Browser is very popular for private browsing, or alternatively you could use Atomic Web Browser. Both of these browsers are commercial applications, but if you share an iPad and are serious about retaining your browsing privacy £1.49 seems a small price to pay for peace of mind.


As with the iPad there is no built-in support for incognito browsing on the iPhone version of Safari. But again there are other browsers available with this feature: Aquari Browser automatically deletes your history, cache  and cookies whenever you exit the app, or Privately will delete your history as soon as you hit the home button on your iPhone and destroys cookies as soon as they arrive - additionally any search box entries in Google are not stored.


If you're an Android user you have a few options available too. You can use Google Chrome or Mozilla Firefox as your browser and use the menu options to enable their Incognito or Private Browsing mode as you would on a computer. Additionally there is a popular alternative browser app available for Android called InBrowser which allows full web functionality whilst not recording your browsing history.

Monday, 3 June 2013

Setting up a Web Server - Part Two: Installing & setting up a LAMP server

Following on from the previous post I'm now going to explain how to install and set up a LAMP server. Personally I recommend the Ubuntu version of Linux, it's Open Source (i.e. free) and well supported within the development community so there is a lot of support available.

Minimum Hardware Requirements

Current minimum hardware requirements for Ubuntu Desktop are:
  • 700Mhz processor (Intel Celeron or better)
  • 512MB RAM
  • 5GB of hard drive space
  • VGA capable of 1024x768 screen resolution
  • A CD/DVD drive or a USB port for installation
For up to date information on system requirements please check the Ubuntu website.

In terms of hard drive space for your Web Server, this will vary depending on how many sites you are going to develop and what type of resources you are going to be using - images, video, flash, audio, documents. I use a 150GB drive, which is also a networked document & multimedia server.

Installing the Operating System

There are two versions of Ubuntu available, the traditional 32-bit for older computers and 64-bit for newer computers. Download the latest version of Ubuntu. You can select either the Desktop version or the Server version of the Operating System. We use the Desktop version so that we can fully utilise the benefits of the Ubuntu Operating System, but if you simply need a Web Server then opt for the Server version.

Ubuntu comes as an ISO which you will need to either burn to CD/DVD or put onto a bootable USB stick. Once you have done this you can boot the computer you will be using as your Web Server from the newly created installation device (CD/DVD or USB). Select your language and follow the onscreen instructions to install Ubuntu - read the full installation guide for more details.

Now that the operating system is installed you need to make sure that it's up to date.

Click on the Ubuntu Dash icon at the top of the screen and type "terminal" into the search box. This will launch the command line interface (CLI) for Ubuntu. In the Terminal window type Sudo apt-get update

Explaining this command:
Typing sudo will ensure that the administrator user account is used for the following command - you may be prompted to enter the administrator password before the system will carry out your command.
apt-get is the default Ubuntu program for installing software, as you work with your LAMP server you will find that you use sudo apt-get sudo apt-get install a lot!

If you don't want to work with the Ubuntu CLI you can use the Ubuntu Software Centre to run updates and install software - but most advice you will come across for maintaining your Ubuntu server will reference CLI instructions, so it's not a bad idea to start using the CLI from the start.

Setting up the Web Service

Now that you've successfully installed Ubuntu and made sure that everything is up to date you need to install your Web Service. On LAMP servers, as mentioned in the previous article, you will be installing Apache. Installation of Apache in Ubuntu is straightforward as it is an option during the installation process or can be added later. 

To install Apache 2 on your Ubuntu box open Terminal and type sudo apt-get install apache 2. You shouldn't need to interact with the installation. Once completed you can open the installed web browser on your server and enter http://localhost in the address bar. You should see a simple web page with the message "It Works!" on the screen.

If you have an advanced set up using multiple hard drives, as I do, then you may need to make some modifications to the Apache server settings. The Ubuntu website has detailed information on configuring Apache 2.

Adding your databases - MySQL

The next step is to add MySQL so that you can run databases with your websites. If you're only ever going to be working with static page websites, all hard coded, then this step can be skipped but these days most of us are working with a combination of static sites, bespoke content management systems (CMS) and Open Source, or purchased, CMS packages such as WordPress & Joomla.

Open Terminal and type sudo apt-get install mysql-server. During the installation you will be prompted to enter a password for the MySQL root (administrator) user. Although you don't have to do this, if your server is going to be accessible from the outside workd it's best to create a password. If you are only ever going to use the web server as a development platform within the confines of your own network then you can leave this blank.

After installation the service should start automatically, however you can can check this by entering the following in Terminal: sudo netstat -tap | grep mysql

If everything is running correctly you should see a message something like this:
tcp   0      0     localhost:mysql    *:*     LISTEN      2556/mysqld

Adding scripting support - PHP

So far we've installed the L A & M parts of the LAMP server. So the final step is to install scripting support. By doing this we will be able to run PHP files on our web server and create pages that interact with our databases and are capable of getting information back from the server to generate dynamic pages.

Open Terminal and type sudo apt-get install php5. After installation Apache 2 will automatically restart. Apache 2 is automatically configured to run PHP scripts and the installation of the PHP5 module will automatically be enabled in Apache 2 once you've installed it. 

To make sure that everything will run correctly you can check that the php5.conf and php5.load files exist by using the CLI to change to the /etc/apache2/mods-enabled/ folder and viewing the files. In Terminal type cd /etc/apache2/mods-enabled/

If the files are missing you can enable the module by typing the following in Terminal: sudo a2enmod php5

You should now restart Apache 2, you may find that you have to do this on a fairly regular basis. To restart  type the following into Terminal: sudo /etc/init.d/apache2 restart


That's it. You've now installed, and set up, your LAMP server. Go ahead and play!

If you want to use friendly URL rewriting offered by many CMS packages - or write your own - then there is one last thing you'll need to do...

Adding the Apache mod_rewrite rule

Enable the mod_rewrite rule by entering the following in Terminal: sudo a2enmod rewrite

Change your directory to /etc/apache2/sites-available/default by using the cd command in the CLI and look for the section that starts with <Directory /var/www>

Modify the line containing AllowOverride None to read AllowOverride All. This instructs the web server to allow access to the .htaccess file on your webserver to over-ride previous instructions. You can find out all about .htaccess files and what they do here.

Restart Apache 2 for the changes to come into effect.