Nov 21 2008

Web Development Essentials – Tools (Part 2) – Eclipse

When starting out in development, most people end up hopping from one editor or IDE to another, always finding one which serves their purposes that little bit better or has that killer feature you can’t live without. Typically this ends up in increased development times as you reconfigure your software setup, migrate your project(s) across and do all the other little things which get you up to speed with your new choice.

It doesn’t always have to be this way though! There are people out there who are happy coding their PHP, Ruby or Python in a text editor, and that is all well and good. The one thing these don’t usually have though, is the ease of integrating with a variety of other elements of the toolchain. This is where Eclipse comes in.

Eclipse is not really an IDE, its a cross-platform… platform. Essentially, you can run a variety of IDEs within one all-encompassing framework, everything from a Java IDE (the default option) to a Python IDE with lots in-between. The best thing about this is that all of these can run peacefully side-by-side in the same running version of Eclipse in your machine – that means, like me, you could be hopping from the Web Site Tools IDE to the PHP Development Tools IDE in a flash, before dropping into any of the numerous addon apps which also integrate with the IDE easily!

For instance, I myself use a few on a regular basis – the RegEx Util, which is a nice little applet for testing your regular expressions, the Subversive SVN client for accessing and utilising source control and the Data Tools Platform for managing databases from a variety of vendors.

This is just the start though. Not only do free tools exist to help you get the job done, more and more commercial IDE products are turning to Eclipse as their platform of choice. Adobe’s Flex Builder can run in its own stand-alone version of Eclipse or a pre-existing installation, while Zend Studio, Aptana, Borland JBuilder and a whole raft of IBM software also run inside Eclipse. This proves its long-term credentials, and you will find yourself smiling when you can hop between developing your Flex-based applet and the site you intend to integrate it with with a single click of the mouse.

Eclipse running the PHP Developer Tools

Eclipse running the PHP Developer Tools

It doesn’t matter how much I go on about how great it is though, go try it out now! I assure you, you will get a pleasant surprise!

Links

Eclipse

List of Eclipse-based software on Wikipedia

PHP Developer Tools (PDT)

Zend Studio

Adobe Flex Builder

Geoff Adams
Programmer, Research and Development

Nov 20 2008

Hijacking Pages with 302 Redirects

There is a lot of confusion about the difference between 301 redirects and 302 redirects. There is almost no reason to use a 302 redirect. They can be especially dangerous when they are they used to hijack another persons page.

The 302 redirect allows the an existing page to be redirected to a new page but keep the search engine spider coming back to see if the original page has been reinstated.

There should be no reason why you would want to do this and if you want to redirect a page you should use a 301 redirect. Occasionally, it might be necessary to have a 302 redirect to redirect pages to a mirror server if there is excessive load on the server. The 302 redirect for a page hijack is shown schematically in the figure below:

A 302 redirect Page Hijack

An evil webmaster has implemented a  page on their site (Site A)  to redirect Googlebot to temporarily redirect the page to a new page 1 on site B. This makes it possible for the content of site A to appear but the description of site B to be displayed. For a human visitor the page redirects to a different page on the same site A.

According to Matt Cutts, the URL that is shown in the Google index will be the destination url 99.5% of the time. On rare occasions, the URL displayed in the SERPs will be the source (i.e. if the URL of the destination is long and unwieldy).

A variation of the problem comes if the evil webmaster decides to scrape the content from your site and adds it to their 302 redirecting page. In this case, there will be a duplicate content issue and the victim’s site will drop from the index, if it is stronger than the competitor’s site due to content duplication.

Fortunately this no longer works, as Google has changed the way that it deals with 302 redirects. 302 redirects that go to another domain are treated as 301 redirects and the new page is indexed.

Or so we thought, but it seems that Google has once again changed the way that it handles 302 redirects and now there is at least one case of a 302 redirect causing a page hijacking. Could we be seeing page hijacking returning?

Sir Pumpkin Longshanks
Programmer, Research and Development

Nov 19 2008

Wordpress design checklist, don’t leave anything out

Developing a new theme is exciting. And exciting is good because it keeps your brain in the zone. But sometimes excitement means also rush, and rush leads to mistakes.

So when you’ve finished you theme, check those points to see if you haven’t forgotten anything:

Files

  • 404.php for custom 404 page template
  • single.php for single post template
  • page.php for default page template
  • archives.php for archives display (optional). If not present the index template will be used
  • search.php for search results display (optional). If not present the index template will be used

If you’ve started from the default template you should have all those file already created.

Navigation

  • Next and previous post links styled up and pointing to the right page
  • Menu links showing all the pages, in the right order
  • Menu links pointing to the right pages.
  • Link in the header linking to the home page

Content

  • titles line-height is enough to read ok when more than one line
  • unordered list display bullet points
  • ordered list display numbers
  • nested list correctly indented
  • blockquotes
  • Image alignment left, right and center
  • text alignment left, right and center
  • code snippet
  • Test long and short content
  • special markup like <sup> and <sub> displayed correctly

Meta informations

  • Correct date format
  • Author correctly displayed
  • Number of comments counter
  • Tags

Comment

  • Comment form is correct and display correctly
  • Show ‘No comments’ when there is not comment to display
  • Comments are styled up correctly including avatar, author name, link to author website, date
  • blockquotes are displayed correctly in comment list
  • Follow or nofollow link rules

Sidebar

  • Widgets are displayed correctly
  • Nested list of categories or pages are indented correctly
  • Widgets don’t overlap each other
  • Test ordering the widgets differently, the layout shouldn’t break

This is of course a non exhaustive list and I might add a few elements in the future.

Benoit Gilloz
Programmer, Research and Development

Nov 17 2008

The Work Triangle And Web Shopping Cart Usability

The "work triangle" is an idea used in kitchen design that helps to increase the efficiency of how you work.  The three most important (i.e. most visited) items in any kitchen are the oven, the sink and the fridge.  Linking these three items together forms a triangle, and the distance between the three corners is important.  In a poorly designed kitchen the distance between these three points is large and you would therefore have to do a lot of walking about in order to cook.  Alternatively, you can also have a work triangle that is too small, causing cramped working conditions, which can lead to accidents.

Here is an example of a well optimised kitchen design consisting of an (almost) equlatteral triangle.

Kitchen Work Triangle

Kitchen Work Triangle

The same thing can be applied to the product page of an online shopping cart, but here the three most important items are the product image, the price, and the buy button.  If you spread these three essential elements out then users will spend a long time hunting around your pages to find them.  This is the last thing you want to do as it will increase the frustration level of your site and therefore increase your bounce rate.
Read the rest of this entry »

Philip Norton
Lead Developer, Research and Development