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

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

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.

iPad

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.

iPhone

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.

Android

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

Congratulations!

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.