Archive for March, 2007

HTML/CSS Template browser compatibility testing with Browsercam

10

Mar
19

One of the most common problems when considering the development of a website is how it looks and behaves in multiple browsers and operating systems across a multitude of platforms including Linux, PCs and Macs.

what is the problem?

Well the standard procedure for most devs would be to test in as many browsers as they can on their machine and if they’re lucky enough to own a Mac or can obtain one then test in that as well. 

Now this approach has many problems including:

  • It would be next to impossible to install and maintain all the browsers and operating systems required to fully test an HTML Template.  Therefore some browsers and operating systems would be missed.
  • The cost of running a viable testing environment may be too high.
  • It is very slow having to move from machine to machine testing on each one for bugs.
  • To provide documentation for proof of work would be time intensive and laborious.

So taking this into account I tasked myself with a project to find a better solutions.  There must be one right?

solutions

Well there is.  After hunting the Internet for a good while I came across three solutions; Browser Photo, SiteVista and Browsercam.  All three provide online website testing capabilities, however, the best of all these applications was clearly Browsercam and this is therefore the focus of this article.

browsercam

Browsercam provides “Cross-Browser Screen Captures and Instant Remote Access”, meaning developers can fully test a websites appearance and functionality across multiple web browsers (I.e. Internet Explorer 7, Firefox etc) and operating systems (I.e. Windows XP, Windows Vista etc) ensuring the quality of our sites are as high as possible.

This solution offers three main services:

  • Screen Capture Service
  • Remote Access Service
  • DeviceCam

screen capture service

Roughly explained the screen capture service allows users to take screen captures (shots) of their chosen page(s) across multiple platforms and browsers of

their choice and review the images of part of a project on completion of the capture. 

The capture service is further enhanced with features such as a choice of screen resolutions from which to take the screen captures, flash support on or off, browser size or full screen captures (past the fold), so many browsers you won’t no where to start ranging from Netscape 4.78 on Windows 2000 Professional to Safari 2.0 on Macintosh OSX 10.4.

remote access service

Remote access provides users with the ability to access machines within Browsercams server farm and not only fully test a sites appearance but also functionality as users have direct access to the browsers.

devicecam

DeviceCam screen captures project view Finally DeviceCam provides a very similar service to the Screen Capture service, with the only difference being the captures are rendered on PDAs. 

benefits

The benefits of this solution can be enormous and here are just a few:

  • Increase in the quality of website development through more thorough testing.
  • Possible increase in ROI by ensuring the site works as expected across browser.
  • Allows users to provide proof of work and higher quality documentation.
  • Allows sites to be fully tested online anywhere anytime.
  • At less than $1000 for an anual subscription to the premium package it is relatively cheap.  Please note this is the most expensive package and cheaper packages are available.

the future of browsercam

Well its looking pretty rosy for Browsercam with several more useful features to be released such as:

  • BC-Virtual Service – Just released providing users with their very own personal drive space, which allows them to load a wide variety of operating system images, creating personal virtual machines.
  • EmailCam Service – Currently in production this service will allow users to test their HTML Email Templates in a multitude of email clients.
  • Browsercam API – Browsercam have confirmed to me they are planning to release an API for their customer base allowing users to fully integrate into Browsercams services from their own site.

I personally recommend this service and have been using it for some time now.  You can have a look for yourself on the Browsercam website.

Google Maps API UK Postcode Geocoding

8

Mar
16

After recently delving in to the depths of the Google Maps API I found one real problem.  It appears that the API does not provide Geocoding for UK postcodes.  This is due to license issues, as The Post Office and Ordnance Survey own the copyright for this data and therefore a fee is required to obtain it.

In search of the solution

Having crawled the internet for a good while a came across the following article Emad Fanous.  This article details an API that has been developed to return geocoded addresses, postcodes etc.

This solution provided everything I required, does exactly what it says on the tin and is easy to implement to boot.  Now I did come across postcode lists like jibble for example, however, I felt that the API would provide a more complete solution (In the sense of data available) and was more interesting to use :-) .

the code

The code is very simple and is as follows:

function gmap_geocode_postcode(postcode){
  var s = document.createElement(‘script’);
  s.src = ‘http://geo.localsearchmaps.com/?cb=gmap_map_postcode&use=google2&country=uk&zip=’ + postcode;
  s.type = ‘text/javascript’;
  document.getElementsByTagName(‘head’)[0].appendChild(s);
}

function gmap_map_postcode(lon, lat){
  map.setCenter(new GLatLng(lon, lat), 13);
}

Here’s an example of the Geocoding for UK postcodes in action.

scalability

Now I wouldn’t say this solution will be massively scaleable, however, if you just require a simple address search and you do not believe it will be heavily used then this would be a good solution for you.

update

I have recently stumbled upon a payed for service called iShareMaps on Demand.  The service (for a small fee of around £423 a year) offers a scalable UK Geocoding service that may be usefull if anyone wishes to use geocoding on a high traffic site.

Get Hash/Anchor with JavaScript – Part One

None

Mar
05

I’ve been searching for sometime now for a piece of code that will accurately return the hash value in the URL. I originally started by using location.hash, however, this had its faults particularly in the cross browser compatibility department so I thought I would build myself a little function to do the trick.

The returnHash function below simply receives a string input, uses a regular expression on the string to match the last hash and then returns the hash value.

Now for this example there are two small points worth making. I have also used a isNumeric function as I only want to return numeric hashes and I have also removed one from the hash. This is due to the fact that the original purpose of this function was to set the initial start value for a JavaScript Accordion using moo.fx or script.aculo.us for example.

// Returns anchor from link string
function returnHash(a_sLink){
   // Check for anchor and select active image from nav
   var hash = 0;
   if((a_sLink.match(/#(\w.*)/) != null)){
     if((isNumeric(a_sLink.match(/#(\w.*)/)[1]) == true)){
       hash = a_sLink.match(/#(\w.*)/)[1] – 1;
     }
  }
  return hash;
}

Below is the code used to check if the hash retruned is numeric.

function isNumeric(sText)
{
  var validChars = "0123456789";
  var isNumber=true;
  var char;
  for (i = 0; i < sText.length && isNumber == true; i++)
  {
    char = sText.charAt(i);
    if (validChars.indexOf(char) == -1)
    {
      isNumber = false;
    }
  }
  return isNumber;
}

In part two I will show how I integrated this code into a JavaScript Accordian. It’s not ground breaking code but it’s still handy to have.

A CSS Framework?

1

Mar
05

Having read an article on Content With Style about the idea of a CSS framework I became intrigued.  Is this a good idea or simply a dream that would never work in the real world.

The whole concept is to use a generic code base with "a set of naming conventions and a flexible base template".  This in theory would allow for rapid application development.  The article entitled "A CSS Framework" by Mike Stenhouse goes on to display several generic templates with different layouts using name conventions that could be reused across different templates.

Now I have to say my immediate reaction to this article was one of joy.  It would be a real help to any developer to have a "framework" from which they can develop their site templates, but then I got thinking, what about creativity and flair?

the death of creativity?

Now I don’t mean this literally but think about it.  If you use a standard template base and rely on this base code to build future sites where will the creativity come from.  We could end up going back to the days where all websites looked the same and there was a general lack of inspiration.   Now I totally understand what Mike is saying in his article and in my senses agree that we could do a lot more to create a code library from which we can quickly "rip off" old code to ruse with in a new site, however, I do feel that we should be constantly looking to progress and go forwards and therefore reusing the same code restricts this.

on the up side

Perhaps theres a case to use such a framework when considering small projects where the aim is not to develop something mind blowing but to simply provide a client with an online presence (Much as this site does for me).  There would also be a case that the more people that submit their code to such a framework the more creative people will be able to be with their coding or at least with the end product.  Take moo.fx or script.aculo.us for example, these are two libraries that have made it amazingly easy to create some breath taking affects and they have added a great deal of interaction to the end user.  Now that cannot be a bad thing.

maybe

So maybe it’s just the case then that a happy median should always be deployed to allow for fast development whilst also promoting the need for creative flair.  I guess only time will tell though…

Dreamhost Hosting and get $30 off

None

Mar
05

DreamHost HostingI have just started using DreamHost and I have to say I am very impressed.  The deal they offer almost seems too good to be true but I can tell you this it is totally real.  Having needed a new host for sometime I asked around some of my friends and colleagues as to who knew of a good hosting provider.  After sifting through many WebPages of recommendations I finally came across DreamHost as recommended by one of my workmates.  The deal was extraordinary, especially as I was given a promotion code to sign up with.

That was it decision made and I haven’t looked back since.  With a ridiculous amount of storage and bandwidth provided, as many sites hosted as you wish and some many amazing one click installs its untrue, you can pretty much do what ever you want with this package.

Don’t just take my word for it visit DreamHost using this promotional code SELLICK30 on the two year package and you will receive $30 off your bill.  It’s as easy as that!!!

« Previous Entries
Next Entries »