Archive for the ‘Web Development’ Category

September 7th, 2010Hayden Digital develop Bespoke Content Management System for Actuated Solutions Limited

Actuated Solutions LimitedHayden Digital are delighted to announce the launch of their latest project for Bognor Regis based Valve Automation Solutions provider Actuated Solutions Limited.

A full content and document management system was integrated with a bespoke design to allow their customers easy access to technical documentation, and make editing website content and promoting their latest products and services as painless as possible for all members of staff.

Here’s what Actuated Solutions had to say about their experience while working with Hayden Digital:

Working with Hayden Digital has been a breeze and we are really pleased with the final product. We now have a great looking site and a content management system that allows us to update whenever required.

- Chris Hickey, Actuated Solutions Limited

Visit the Actuated Solutions Limited website.

July 18th, 2010A simple PHP class to access the Google AJAX Language API for text translation

I recently wrote a quick PHP class to do some content translation via the Google AJAX Language API, and thought it may be useful for others.

It is by no means a complete class for the API, and in fact only uses one of its methods (language.translate).

The ‘AJAX’ part of the API name is also mis-leading in this case, as we will not be sending an AJAX request or even using and Client Side code – but rather using CURL on the server side to access the API and then dedode the JSON objects using PHP.

I would recommend extending it to include some kind of file or database driven caching system if you will be using it on a high traffic site or translating entire web pages rather than just snippets. Also be sure to abide by Google’s Terms of Use

Here it is:

<?php

/**
* Translate text via the google translate API
*
* @version 1.0
* @author Chris Wheeler <chris@haydendigital.com>
* @copyright Chris Wheeler
* @date: 2010-07-15
*
* Usage:
*
* $translator = new googletranslate();
* $translator->translate('en', 'fr', 'Hello World!');
*
* Full list of supported languages is at http://code.google.com/apis/ajaxlanguage/documentation/reference.html#LangNameArray
* GOOGLE_SEARCH_API key should be defined with a valid Google Search API key for the domain
*
*/
class googletranslate {

  /**
  * POSTs the text to be translated to the API
  *
  * @return String
  */
  private function postmessage($url, $text){
    set_time_limit(30);
    $curl = curl_init();
    curl_setopt($curl, CURLOPT_URL, $url);
    curl_setopt($curl, CURLOPT_HEADER, 0);
    curl_setopt($curl, CURLOPT_POST, 1);
    curl_setopt($curl, CURLOPT_POSTFIELDS, "q=" . urlencode($text));
    curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
    curl_setopt($curl, CURLOPT_TIMEOUT, 30);
    curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, FALSE);
    curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, 1);
    $response = preg_split('/' . chr(10) . '/', curl_exec($curl));
    if ($error = curl_error($curl)){
      throw new Exception('CURL Error: ' . $error);
    }
    curl_close ($curl);
    return implode($response);
  }

  /**
  * Translte
  *
  * @return String
  */
  public function translate($from, $to, $text) {
    try {
      if (strlen($text) == 0) {
        throw new Exception('Empty string.');
      }
      if (strlen($text) > 5000) {
        throw new Exception('Text to be translated is too long.');
      }
      $url = 'http://ajax.googleapis.com/ajax/services/language/translate?v=1.0&langpair=' . $from . '%7C' . $to . '&key=' . GOOGLE_SEARCH_APIKEY . '&userip=' . $_SERVER['REMOTE_ADDR'];
      $jsonresponse = $this->postmessage($url, $text);
      $response = json_decode($jsonresponse, true);
      if ($response['responseStatus'] == 200) {
        $responsedata = $response['responseData'];
        return $responsedata['translatedText'];
      }
    } catch (Exception $e) {
      // Handle errors if required
    }
    return false;
  }

}

?>

December 1st, 2009Mobi Washer launches in France

The team at Mobi have just launched their Mobi Washer product range in France, with the French version of the website available at www.mobiwasher.fr.

The site build and translation was carried out by Hayden Digital and was designed to maintain their brand image from the UK, while allowing order management to be carried out at their offices in France.

Nettoyeur portable a pression - Mobi Washer_1259678662933

November 21st, 2009Nine applications to improve productivity and increase profits

I’ve compiled a list of the nine most useful applications (both off-line and on-line) which are used almost every day at Hayden Digital. The list is in no particular order (although subconsciously I think I’ve put the ones I enjoy using the most nearer the top) and is of course my own opinion. If you’ve think I’ve missed any, or disagree with my choices, fell free to head to the comments and let me know.

xero-logo

Xero

After spending several years using various accounting systems from a simple Excel spreadsheet and invoices created in Word, to the likes of QuickBooks and Sage, discovering Xero was revolutionary.

Not only is their web site beautiful and easy to use, it actually makes doing the accounts enjoyable. It handles VAT, invoicing and integrates with our bank account to automatically pull in bank transactions on a daily basis (no more importing statements manually!). We’ve even set up user access for our accountants, who can login and view all our financial information to provide, without the need to post paperwork back and fourth.

www.xero.com – £19 per month

dropbox

Drop Box

With drop box all out client files, company accounts and resources are kept in sync between all our computers. So we can access the latest version weather we are at the office, working from home, on the move or with a client via their incredible web interface. Even without and internet connection files are still accessible – they simply sync up next time you connect to the net.

What’s more – Drop Box maintains a history of your files – so if you flatten a PSD and then accidentally save over the original, you can login to the web interface and restore the original. It also keeps all deleted files, like a giant on-line ‘recycle bin’.

www.dropbox.com – $99 per year

apps_logo

Google Apps

Google offer a full range of office applications for free.

  • Google Mail has revolutionised the way we use email by providing an incredibly powerful and near instant search, as well as conversation view.
  • Google Docs allows us to work collaboratively on documents, spreadsheets and presentations with both our supplies and our clients. They also provide a quick way to view almost any attachment we receive via email.
  • Google Calendar makes it easy to schedule appointments and deadlines, and hard to forget them. Email and SMS reminders can be set to send out reminders of meetings to make sure we leave, and arrive, on time. It’s also handy for remembering Birthdays!

www.google.com/apps/ – Free

analytics_logo

Google Analytics

In terms of statitistics reporting and website usage analytics, you really can’t beat Google Analytics. It does everything from simple site usage reporting, to e-commerce conversion analysis and can even ‘intelligently’ alert you to any potential problems or traffic spikes.

www.google.com/analytics/ – Free

cs4_ste_web_pre_bxshot_3in_png

Adobe Creative Suite

We use Photoshop and Illustrator on a daily basis for creating websites, graphics, printed design and manipulating photographs for clients. While it’s a little on the expensive side, and by far the most expensive piece of software on this list, it’s well worth the initial outlay and reduced price upgrades are available when new versions are released.

The software is incredibly stable on both Mac and PC – we’re currently using the ‘Design Standard’ edition which comes with PhotoShop, Illustrator, InDesign and a few other tools.

www.adobe.com/products/creativesuite/ – from £1500

1258733464_eclipse

Eclipse PDT with RSE

The Eclipse Project provides one of the best PHP IDEs I have ever worked with, and best of all it’s open source and free for commercial use. The development community behind the project is huge and as well as the PHP Development Tools (PDT) module is the Remote Systems Explorer (RSE) which allows you to work on remote file systems, via a number of protocols including FTP.

Being able to edit a file on a remote server has saved hours of time, which would usually have been spent uploading and downloading files via an FTP client, so small changes can be carried out within seconds.

It of course has all the features one would expect from an IDE including code folding, code completion, debugging and much more. My only issue with Eclipse is that It can be temperamental on 64-buit editions of Windows Vista and 7 – This does not appear to be an issue on the Macs.

www.eclipse.org – Free

1258733555_firefox-3.0

Firefox with Firebug

Firefox, as well as being an excellent browser, provides and extensive array of add-ons and plug-ins to help developers. Firebug provides a range of tools which are invaluable when building standards compliant web sites, especially when developing AJAX applications as they allow you to view data transfers between the browser and web server in real time.

It also allows live editing of html and css to quickly track down and fix CSS and layout bugs. For tracking down those IE bugs a ‘Lite’ version of Firebug is available which will run on other browsers.

www.getfirefox.com – Free
getfirebug.com – Free

wordpress

WordPress

WordPress is an immensely popular blogging platform, and in fact powers the Hayden Digital blog. Development and integration is simple and the code structure is intuitive for the most part.

It’s well refined right through from the sleek installer to automatic upgrades and plug-in management, and is of course open source and free for commercial use.

www.wordperss.org – Free

spotify

Spotify Premium

While most people probably wouldn’t associate an application such as Spotify with productivity, personally I find music helps me concentrate while working, and Spotify provides access to a massive music library from the latest chart music to you’re favourite 80s classics. It’s well worth paying the £9.99 fee for the advert removal and higher bit-rate audio streams.

www.spotify.com – £9.99 per month

Aside from the software above, the biggest gain to productivity I’ve found comes from the use of multiple monitors. Almost all modern computers come with two display connectors, and LCD screens are becoming cheaper all the time, so there is no excuse not to!

November 6th, 2009Relative dates in PHP/Smarty

Our content management system uses ‘facebook style’ relative dates (e.g ’2 hours ago’) throughout to display information such as page edit history, or order times for our e-commerce customers. This is acheived by a custom modifier I wrote some time ago for smarty.

Here is the code – simply save it as modifier.relative_date.php and place it in the smarty ‘plugins’ directory.


<?php

/*
* Smarty plugin
* -------------------------------------------------------------
* Type:     modifier
* Name:     relative_date
* Version:  1.1
* Date:     November 28, 2008
* Author:   Chris Wheeler <chris@haydendigital.com>
* Purpose:  Output dates relative to the current time
* Input:    timestamp = UNIX timestamp or a date which can be converted by strtotime()
*           days = use date only and ignore the time
*           format = (optional) a php date format (for dates over 1 year)
* -------------------------------------------------------------
*/

function smarty_modifier_relative_date($timestamp, $days = false, $format = "M j, Y") {

  if (!is_numeric($timestamp)) {
    // It's not a time stamp, so try to convert it...
    $timestamp = strtotime($timestamp);
  }

  if (!is_numeric($timestamp)) {
    // If its still not numeric, the format is not valid
    return false;
  }

  // Calculate the difference in seconds
  $difference = time() - $timestamp;

  // Check if we only want to calculate based on the day
  if ($days && $difference < (60*60*24)) {
    return "Today";
  }
  if ($difference < 3) {
    return "Just now";
  }
  if ($difference < 60) {    
    return $difference . " seconds ago";
  }
  if ($difference < (60*2)) {    
    return "1 minute ago";
  }
  if ($difference < (60*60)) {
    return intval($difference / 60) . " minutes ago";
  }
  if ($difference < (60*60*2)) {
    return "1 hour ago";
  }
  if ($difference < (60*60*24)) {    
    return intval($difference / (60*60)) . " hours ago";
  }
  if ($difference < (60*60*24*2)) {
    return "1 day ago";
  }
  if ($difference < (60*60*24*7)) {
    return intval($difference / (60*60*24)) . " days ago";
  }
  if ($difference < (60*60*24*7*2)) {
    return "1 week ago";
  }
  if ($difference < (60*60*24*7*(52/12))) {
    return intval($difference / (60*60*24*7)) . " weeks ago";
  }
  if ($difference < (60*60*24*7*(52/12)*2)) {
    return "1 month ago";
  }
  if ($difference < (60*60*24*364)) {
    return intval($difference / (60*60*24*7*(52/12))) . " months ago";
  }

  // More than a year ago, just return the formatted date
  return @date($format, $timestamp);

}

?>

Invoke the modifier with {$date|relative_date}. All comments and suggestions welcome.

October 18th, 2009Validating UK VAT numbers with PHP

I recently had to write some code to validate UK VAT number for a client – so I thought I’d share it to save a bit of time for anyone else who needed to do the same thing.

<?php

/*
* Class: vatnumbervalidator
* Author: Chris Wheeler
* Version: 1.0
* Date: 2009-10-15
*
* Validates VAT numbers, returns 1 if valid or 0 if invalid
*
* Usage Examples:
*
* vatnumbervalidator::check(922577120);
* vatnumbervalidator::check('922 5771 20');
* vatnumbervalidator::check('VAT Number #922 5771 20  ');
*
*/

class vatnumbervalidator {

  public static function check($vatnumber) {

    // cleanup the vat number to remove spaces or non-numeric characters
    $v = vatnumbervalidator::clean($vatnumber);

    // check length
    if (strlen($v) < 9) {
      return 0;
    }

    // calculate the total of each of the first 7 digits, multiplied by 8 descending to 2
    $c = 0;
    $i = 0;
    for ($m=8; $m>=2; $m--) {
      $c += ($v[$i] * $m);
      $i++;
    }

    // subtrack 97 until the checksum is negative
    while ($c >= 0) {
      $c -= 97;
    }
    // inverse the checksum so it becomes positive
    $c = $c / -1;

    // if the checksum is equal to the last two digits of the number, return true
    return ($c == $v[7] . $v[8]);

  }

  public static function clean($vatnumber) {

    // remove all non numeric values
    $v = preg_replace('/[^0-9]/', '', $vatnumber);

    return $v;

  }

}

?>

All feedback and comments appreciated!

September 5th, 2008Sending automated emails which don’t get blocked by ISPs

I’ve recently come across a problem where automated emails are getting blocked by a number of ISPs. I’ve tracked this down to the sender verification methods some ISPs use – If an email comes from an address which isn’t an active mailbox on the server, it is sometimes dropped without any notice to the sender or recipient.

A fair few web sites send automated emails from addresses such as no-reply@domain.com, do-not-reply@domain.com, forum@domain.com etc – if these accounts are not setup the mails will be discarded by some servers.

You should always use a real email account to send emails – even if it silently discards all incoming mail.

Another problem is that if PHP’s mail() function is being used, and php is running as the user ’nobody’, emails by default will be sent from nobody@hostname.isp.com – which in most cases does not exist.

The way around this is to specify the senders email address through the mail function. e.g.

mail($to, $subject, $body, $headers, '-f sales@domain.com')

Note: Even if you have set the ‘From: ‘ field in the email headers, the email envelope address may still be set to a different account, using the ‘-f email@address’ parameter will fix this, and your emails should reach your customers!

November 25th, 2007Changing font size with JavaScript

A lot of web sites feature an option to change the font size dynamically with javascript, without reloading the page. We recently had to implement this for a client, so I’ll explain briefly how they work, and how to set them up.

Setting up your pages

To be able to scale font sizes you must make sure all of your CSS ‘font-size’, ‘line-height’ and other font-related measurements are specified in ‘em’ units, and NOT in ‘px’ units.

Internet Explorer will not allow ‘px’ (pixel) based font sizes scaled, which actually makes sense – as pixel measurements are by definition an absolute measurement, set by the users screen resolution. ‘em’ measurements on the other hand, are relative – and can therefore be scaled.

The other feature of ‘em’ measurements which we will make use of, is that they are relative to the size of their parent element. This means that we only have to change the size of the font on the <body> element, and all child elements font sizes will change.

The HTML/JavaScript

<span class="fontsizes">
  <span class="fontsmall">
    <a href="#" onclick="body.style.fontSize='8px'">A</a>
  </span>
  <span class="fontmedium">
    <a href="#" onclick="body.style.fontSize='10px'">A</a>
  </span>
  <span class="fontlarge">
    <a href="#" onclick="body.style.fontSize='14px'">A</a>
  </span>
</span>

The HTML/JavaScript above shows the three ‘A’ characters, and triggers a slightly different onclick event for each, setting the size of the font on the body element to a different size for each. Most browsers use a default size of ’10px’ – which is the ‘medium’ font in this case. I’ve chosen 8px for the small font, and 14px for the large font, but you can use whatever suits your needs.

The CSS

.fontsizes {
  color: #ffffff;
  line-height: 34px;
  font-size: 10px;
}

.fontsmall {
  font-size: 12px;
}

.fontmedium {
  font-size: 20px;
}

.fontlarge {
  font-size: 28px;
}

The ‘line-height’ is set to 34px, which is equal to that of the large ‘A’.

You may be thinking – ‘Why are the font sizes specified in ‘px’ here?’ – well, we don’t want these characters to change size when the user changes the font size. An alternative would be to use images instead of text characters, to ensure that no browsers scale these characters.

If you want to, you could use JavaScript to write the HTML code to the page. That way, the user will only see the three ‘A’ links if they have JavaScript enabled.

July 16th, 2007Upgrading from phpBB2 to phpBB3 – with attachments!

I’ve just upgraded a forum for a client to the latest release candidate for phpBB3, and was pleasantly surprised by how easy it was to do, even with a few modifications to the phpBB2 powered forums.

The process is well documented on the phpBB website – but I’ll give a quick run down here.

  1. Install a clean copy of the latest version of phpBB3 (RC3 at the time of writing) to a new directory on the server – I used /phpbb3/ for this, as I planned to rename it back to /forums/ after the upgrade was complete.
  2. Verify everything is working with the new installation.
  3. Use the convert script to import all posts and settings from your existing phpBB2 installation (this does not make any changes to the phpBB2 installation or database, so if things go pear shaped, you can try again). The convert script is accessed via the new ACP (Administration Control Panel) in phpBB3.
  4. Check that everything is working, and remove the phpBB2 installation.

The most impressive part of the process is that all attachments which were added to the phpBB2 powered forums via attach mod were migrated to the new built in attachments system in phpBB3!

Copyright © 2009 Hayden Digital. Blog powered by WordPress