This website stores cookies. Click here to accept them.cookie information page

Have you just installed Drupal and are wondering where the rich text editing capability is?

14th May 2013
Categories: drupal

In theory Drupal supports multiple WYSIWYG text editors via its WYSIWYG module, found at:

http://drupal.org/project/wysiwyg

Once you're on the website, download the latest compatible recommended version (see foot of page) - tar.gz format is fine.  You can then install this via your Drupal control panel (on the modules page in your drupal installation, click "+install new module", then once it's installed, follow the link to enable).

Now you have the WYSIWYG module, do you have any WYSIWYG editing?  Not yet!  First you need to configure the module, and upload any supporting editor you want.

In Drupal control panel, go to the modules page again.  Now click the link to configure the WYGIWYG module. This takes you to a list of supported editors (installed editors are shown n a different colour).

At time of writing, the current Drupal/WYSIWYG version is a little out of date, and does not integrate seamlessly with any of the following, or there are other problems as listed:

  • TinyMCE
  • JWysiwyg
  • OpenWYSIWYG (does not support chrome)

We are currently using nicEdit.  If you follow the download link from the WYSIWYG configuration page, you can download and then upload the nicEdit folder structure (NB. nicedit, no caps) to the folder path given.

Once done, you need to go to "configuration" - "content editing" again and enable nicEdit for filterd/full html editing (the user has a choice of these and plain text when editing; choosing "Full" for example, will only display what you've selected as the "Full" option).

FINALLY you need to go and configure the niceEdit tool and enable buttons - then they will appear on the editor toolbar and you have WYSIWYG editing, phew!

Basic Membership Area Functionality using the Drupal Taxonomy Module

7th November 2012
Categories: drupal

Setting up a private members' area using the "Taxonomy Access Control" module in Drupal

Note that the "Taxonomy" built in module is not the same as the "Taxonomy Access Control" contributed module.

The "Taxonomy" module in Drupal allows you to categorise content, and working with that and the "Taxonomy Access Control" module, allows you to set up a private "members-only" area of your Drupal website.

Before we begin, download the Taxonomy Access Control module from: https://drupal.org/project/taxonomy_access and install it into your Drupal installation by going to "Modules" and "+ Install new module". Upload your file that you downloaded from the Taxonomy Access Control web page, and when it's finished doing things, click to "enable module". This takes you to the modules list, where you need to tick a box and click "save" to enable it.

It worked fine for me, but if you do get error messages, please try the help on the https://drupal.org/project/taxonomy_access page.

Now let's start configuring the areas of the website.

Go to the modules menu and next to "Taxonomy", click "configure". 

We are going to be using the "Forums" Vocabulary", i.e a list of topics that can be used around the website, and we will link content to those topics, and finally add/remove users from topics, thus enabling them to see the content or not.

So next to the Forums Vocabulary (this is a special vocabulary which we can use with web pages), click "Add terms".

(If you've lost your place at this point, we're in "Modules" .. "Taxonomy" .. "Configure")

Add the term "private" (don't worry about a description; just click save at the foot of the page)

You could add the term "public", in the same way, and as many different "areas" as you wanted. 

Now we can configure Taxonomy Access Control. 

Go to "modules" and click "configure" next to Taxonomy Access Control.

- choose "authenticated user... edit access rules"
- under "New", click the dropdown to see your Areas, like "private".

- choose "private".

- under "view" in the main table, you will see "A I D" (allow, ignore, deny). choose "allow".

- now click add (or save if you've already added) and you will be taken back to the list of user roles

- choose "anonymous user... edit access rules".

- again, choose "private" but under "view" click "D" 

Next we have to make sure that basic pages can be linked to taxonomy!

Under "structure", "Content types" click "manage fields" next to "basic page".

Add an "existing field" called "Area" (or whatever you want) and make it type "taxonomy_forums". 

Now we're going to create some content and make it private.

So now at the top of the screen (the main Drupal menu), click "content", and then click "+ Add content".

Add a new "basic page" and under "area" link it to "private" (the term we set up earlier).

Finally, before we test this all out, you may already have seen a link saying:

"The content access permissions need to be rebuilt. Rebuild permissions.".

Click that link.

Now if you go to the home page as an anonymous user (try Chrome's incognito mode) you won't see your new page - but if you're logged in, Hey Presto! - you will.

Fixing order list problem in magento 1.7.0.2

9th September 2012
Categories: fixes, magento

Missing order and transaction list in Magento 1.7.0.2

Upgrading Magento to 1.7.0.2 we found an interesting issue. When we logged into the admin site and chose the Sales/Orders or the Sales/Transactions menu, an empty page appeared which contained the header and the footer but nothing else.

An empty page on the Sales/Orders or the Sales/Transactions menu

We looked over the database and the installation files, and everything looked like it was in its right place, so we started investigating the core code. The controller classes which are responsible for listing the orders and the transactions are located in the /app/code/core/Mage/Adminhtml/controllers/Sales/OrderController.php and /app/code/core/Mage/Adminhtml/controllers/Sales/TransactionsController.php.

Viewing into the files there is a function called indexAction() which runs when the page is opened.

Comparing the content of this function with the previous version it turned out that one line is missing from the new version which calls the view. The same problem can be found in the gridAction() function which is responsible for the pagination of these lists.

Copying the code from the old version, the two lists appear properly.

Summarizing the solution here are the changes that should be made in the given files.

OrderController.php:

Current(wrong):

public function indexAction()
{
$this->_title($this->__('Sales'))->_title($this->__('Orders'));
$this->_initAction()
->renderLayout();
}
public function gridAction()
{
$this->loadLayout(false);
$this->renderLayout();
}

Working:

public function indexAction()
{
$this->_title($this->__('Sales'))->_title($this->__('Orders'));
$this->_initAction()
->_addContent($this->getLayout()->createBlock('adminhtml/sales_order'))
->renderLayout();
}
public function gridAction()
{
$this->loadLayout();
$this->getResponse()->setBody(
$this->getLayout()->createBlock('adminhtml/sales_order_grid')->toHtml());
}

TransactionsController.php:

Current(wrong):

public function indexAction()
{
$this->_title($this->__('Sales'))
->_title($this->__('Transactions'));
$this->loadLayout()
->_setActiveMenu('sales/transactions')
->renderLayout();
}
public function gridAction()
{
$this->loadLayout(false);
$this->renderLayout();
}

Working:

public function indexAction()
{
$this->_title($this->__('Sales'))
->_title($this->__('Transactions'));
$this->loadLayout()
->_setActiveMenu('sales/transactions')
->_addContent($this->getLayout()->createBlock('adminhtml/sales_transactions'))
->renderLayout();
}
public function gridAction()
{
$this->loadLayout();
$this->getResponse()->setBody(
$this->getLayout()->createBlock('adminhtml/sales_transactions_grid')->toHtml());
}

1st January 1970
link to this post - ExecScalar called by unknown with SELECT COUNT(commentid) AS comments FROM oww_blogcomment WHERE approved = 1 AND articleid = AND repldeleted IS NULL and error is You have an error in your SQL syntax; check the manual that corresponds to your MariaDB server version for the right syntax to use near 'AND repldeleted IS NULL' at line 4.  |   Add your comment

How do you call one constructor from another?

22nd July 2012

You would think that this would be pretty straightfoward in c# to call one class constructor from another with a different function signature.. what about:

class Animaux
{
  public Animaux()
  {
    this("george");
  }

  public Animaux(string animalName)
  {
     //.... do some things
  }
}

Unfortunately c# won't allow that; you must have:

 

class Animaux
{
  public Animaux() :     this("george") {}
  }

  public Animaux(string animalName)
  {
     //.... do some things
  }
}

 

In PHP you can't have multiple function signatures, so you would just have:

class Animaux

{

  function Animaux($animalName='')
  {
    if($animalName=='') $animalName='george';
  } 

}

.. which at least makes a bit more sense....

File synchronisation using winscp

10th February 2012
Categories: backups, winscp

If you're responsible for maintaining a heap of files or databases and making sure you don't lose all trace of them when your server goes down, or you just want to make sure that your desktop PC is or laptop is backed up regularly, there are a few ways to go. 

If you need version control, there are applications like 'Subversion' which are designed for managing code, but can manage any type of file and give you a full version history.  You have to commit changes manually, but using "Tortoise SVN" gives you a red cross against any files you haven't yet committed.  If you don't want to set up your own Subversion server, companies like Codesion make it easy for you.

If what you really want is continuous backup, you should be looking at services like Dropbox or Mozy. These companies give you a small program to install on your computer which handles backups continuually; with dropbox it manages one folder; with other services you can specify multiple. Dropbox, however, gives you 2GB free to play with at the start.

However, if you have your own FTP or SFTP site and you don't need version control or continuous backup, WinSCP offers a little-known but free of charge solution.  

WinSCP is a file transfer program, but it comes with a powerful scripting language, including commands like synchronize (full list here).

You can run winscp on a command line and tell it to go and execute a script (which means that you can schedule said command using the Windows scheduler)

Your script can be as simple as this:

open serverBob
synchronize local C:\Backups\bob /home/bob/myfolder

(which opens a saved, named session (use the normal WinSCP window to set this up first), and copies remote files to your hard disk)

or this:

open serverBob
synchronize remote C:\Backups\bob /home/bob/myfolder

(which does the reverse).

Save your scripts as text files, and to call your scripts, just run winscp.exe /script=yourscript.txt (where yourscript.txt is the path to your script).

Happy copying!

[Edit, 14 May]

I just got caught out by the following: if you give your scheduled tasks your own user name and password, you may forget to change the scheduled tasks' login credentials when you change your own password.  Far better to give the scheduled tasks their own dedicated windows user and password!

More on jQuery

3rd February 2012
Categories: javascript, jquery

Javascript, the main language that enables dynamic websites, has been around for 15 years and, whilst powerful (it enables client-side form validation and dynamic pages, it is used for google analytics and various other trackers and is used by most modern websites for one thing or another) has generally been annoying to use. Every browser has had it's own implementation of javascript, with it's own idea's of how things should be done, this lead to lots of logical statements to handle all the different browser designs:

 

if (document.layers)

{

var container = document.layers[ID].open();

container.write(“some text”)

container.close();

}

else if (parseInt(navigator.appVersion) >=5 &&navigator.appName==”Netscape”)

{

document.getElementById(ID).innerHTML = “some text”);

}

else if (document.all)

{

document.all[ID].innerHTML = “some text”

}

 

All these codeblocks do the same thing, writing the text “some text” into a specified HTML element, the only difference is browser compatiblity. The first block works in Netscape4, the second block in Netscape 5+ and the last block works in Internet Explorer 4,5,6. If you wanted to look at this script in any other browser then you would just have to hope that it worked.

That's a lot of lines of code for something so simple, writing a more complex script would end up as a nightmare of if statements. Fortunately for the best part of the new millenium a number of javascript libraries have been released, one of the most prolific of these is JQuery. Released in 2006 it is now, according to wikipedia, used by over 52% of the 10,000 most visited sites and is the most popular library currently in use. Jquery is available from http://www.jquery.com

JQuery provides a number of useful functions that simplify interacting with the webpage and handle all the nasty cross-browser compatibility issues for you. All of Jquery's functionality is provided by the jQuery() object ( or it's alias “$()” ) and most JQuery scripts will start off with a document-ready block. This is a callback passed to the ready function of the document object that is called when the page has finished loading. So, let's rewrite our previous script using JQuery:

/blogresources/jquery-hello-world.html

 

So, this script (which also contains a method to trigger it, unlike the previous example) is only 3 lines of javascript (always nice to do more with less) and, although it can look a bit daunting at first, it is a relatively simple script. It starts off with the document-ready block that I mentioned earlier. This involves creating a JQuery object that contains the document ( $(document) ), which we then call the ready function on passing it a closure (an inline function). When this function is executed (after page load), we select the DOM element that has an id of 'click-me' and call the click method. This function allows us to bind a callback, a function that will be executed whenever the target is clicked, in this instance our function (with ONE line of code) sets the HTML contents of an element to “Hello World”. Easy.

Now I should probably take a minute to reveal the wonders of the JQuery constructor. A Jquery object can hold multiple DOM objects and there are three ways of constructing them:

  • The first (and in my experience, most common) is to use a CSS type selector ('# for id, . for class etc) passed in as a string (much like we did above with the “#click-me” and “#jquery_target” selectors.

  • The second is to pass in a DOM object (like we did with the “document” constructor above) .

  • The third is to pass in a string containing HTML (for instance $('<p class=”some-text”>some paragraph content</p>') ).

One important thing to remember is that functions that change the object(s) will generally be applied to every DOM element contained by the JQuery object, whilst functions that retrieve data will generally read the data from the first element in the JQuery object. This means that, for example, if we wished to stop any of the links in our page (or a part of our page) from working (or send an ajax notification or whatever) we could do something like the following:

 /blogresources/jquery-link-selection.html 

This script, again, is very simple. Once again we have our document-ready block, this time we are binding an on-click callback to a collection of DOM elements (every A tag within the element that has an id of “link-container”). This callback retrieves the href attribute of the clicked tag and displays it in the jquery_target box at the bottom of the page. It then returns false (this is to prevent the browser from then following the link)

So thats JQuery in a nutshell. A small, yet powerful library that enables developers to write stunning web-apps and add that little bit of shine to a website that makes visitors want to come back.  

1st January 1970
link to this post - ExecScalar called by unknown with SELECT COUNT(commentid) AS comments FROM oww_blogcomment WHERE approved = 1 AND articleid = AND repldeleted IS NULL and error is You have an error in your SQL syntax; check the manual that corresponds to your MariaDB server version for the right syntax to use near 'AND repldeleted IS NULL' at line 4.  |   Add your comment

A short introduction to Ajax

11th January 2012
Categories: ajax, basics, javascript

Web pages are old. HTTP (the protocol that browsers use to retrieve pages) has been around since the early 90's and was originally designed as a simple request/response mechanism. Unfortunately this means that any time a page needs updating, the whole thing has to be re-downloaded from the server which can be slow, tiresome and leads to annoying screen repaints. Enter AJAX (Asynchronous Javascript and XML), a methodology developed in the late 90's that allows javascript to request data from the server, this allows developer's to write cleaner, nicer and more helpful user interfaces.

Hello World

It's a tradition that your first steps in a new language should be a hello world type application/script. So without further ado here comes an Ajax Hello World Script (note, for this tutorial I'm going to be using JQuery, available from http://www.jquery.com).

If you want to skip to the result, click here.

 <!DOCTYPE html>
<html>
<head>
<META http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>AJAX Hello World</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">

$(document).ready(function()

{

  $('#ajaxButton').click(function()

  {

    $.get('http://www.oxford-web.co.uk/blogresources/ajax-hello-world.php', function(data)

    {

      $('#ajax_target').html(data);

    });

  });

});

</script>

</head>
<body>

<div>
<div style="background-color:#373639">

<img src="http://www.oxford-web.co.uk/app/images/structure2011/logobanner-transparent.png" title="Oxford Web">

</div>

<div style="padding:24px">

  This is part of a blog post from the <a href="http://www.oxford-web.co.uk"   target="_blank">www.oxford-web.co.uk</a> site.

   <button id="ajaxButton">Click Me</button>

  </div>

  <div id="ajax_target" style="background:#c0c0c0;padding:24px">

  </div>

 </div>

</body>

</html>

The first thing we do (outside of the basic HTML template) is to include JQuery (<script ... ”jquery.js”>). We can then move on to requesting data from the server. JQuery, by default, uses the $ symbol as a shortcut to the JQuery object. In this example we are using the 'get' function (there is also a 'post' function for HTTP POST requests which works in exactly the same way), to which we pass a url and a callback that gets executed when the request is complete.

Using Parameters

Now this is fairly nice stuff but obviously we want to be able to give the server a bit more information. Now we could manually build up a GET uri (append ?field=val&field=val...) but this can get tedious and untidy, not to mention it doesn't help us much with POST requests. Fortunately JQuery can handle the tedious parts for you, just pass it a JSON object (JSON, Javascript Object Notation) and the fields will be used as request parameters.

<!DOCTYPE html>

<html>

<head>

<META http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>AJAX Hello Name</title>

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">

$(document).ready(function()

{

  $('#ajaxButton').click(function()

  {

    $.get('http://www.oxford-web.co.uk/blogresources/ajax-hello-world.php',

    {

      name: $('#name').val()

    },

   function(data)

   {

   $('#ajax_target').html(data);

   });

  });

});

</script>

</head>

<body>

<div>

<div style="background-color:#373639">

<img src="http://www.oxford-web.co.uk/app/images/structure2011/logobanner-transparent.png" title="Oxford Web">

</div>

 

<div style="padding:24px">

<p>This is part of a blog post from the <a href="http://www.oxford-web.co.uk" target="_blank">www.oxford-web.co.uk</a> site.</p>

<p>type something in the box and click go to refresh just the shaded part of the screen...</p>

<input type="text" id="name" /><br/>

<button id="ajaxButton">Click Me</button>

</div>

<div id="ajax_target" style="background:#c0c0c0;padding:24px">

</div>

</div>

</body>

</html>

 

The above returns the same as typing http://www.oxford-web.co.uk/blogresources/ajax-hello-world.php?name=danny.

Conclusion

So there we have it - a simple, basic introduction to the wonders of Ajax that allows web pages to become dynamic, auto-completing, auto-updating web applications.

What are bugs?

4th January 2012
Categories: basics, programming

Software bugs are errors in the instructions written by programmers for computers. Rather than errors in syntax, which are usually weeded out before instructions are executed, bugs tend to be logic errors that cannot be discovered by a computer.

Take for example these instructions in English:

  1. Turn hob on.
  2. Prepare mug with teabag.
  3. Pour 1 pint of water into the kettle.
  4. Put kettle on hob.
  5. When kettle boils, pour water into mug.

When tested, these instructions may be seen to work, but when carried out 'in  the field', it may be seen that the hob is still on at the end of the process, and if left, may cause a fire.

Bugs can occur in any kind of software, including markup and stylesheets, object-oriented programming languages, and higher-level tools like flowchart-driven programming - and the only way to ensure that programs are 100% bug-free is to test every part of the software for all cases.  

So for example a program which simply multiplies numbers by 2 is not fully testable - because there are an infinite number of numbers. But more complex programs are infinitely more untestable as there are a bigger range of 'input variables'.

So how do you make sure programs are bug-free enough to be put to safe use?

One way is to test 'edge cases' - for example if your program which multiplies numbers only has to deal with integers, and the integers need to be between 1 and 100, then it makes sense to test 1, 1000, and a few numbers in between to make sure.

It also helps to use automated testing - using tools like selenium for firefox, which allows you to browse a web application recording your process, and to play that process back any time you want.

Another tool is 'test driven development', where you write the tests first, and then the software to make the program work. So at first your tests will fail, which is expected, and then as you write more code, new tests begin to pass - but if you introduce any rogure code which affects other parts of the system, you can re-run the tests and see that others begin to fail - which helps you to indentify the problem.

"Dry-running" and stepping through programs is also a very useful way to pre-empt bugs. Dry running is where a human being reads the program code and tries to work out how the computer would execute it; stepping through means running the program at a speed controlled by you - so that you can see variable values and the path of the execution as it happens.

all about caching

31st December 2011
Categories: caching, php, programming

Caching is when the web server, the browser, or even an intermediate server store a copy of an image, javascript file, css file, or html page, in order to prevent the browser from putting too big a load on the web server by requesting the same page multiple times - for example if you're browsing around a site and frequently return to the home page, or if all of the pages use the same css stylesheet.

So that's a good thing, right?

Unfortunately caching can inconvenience the web developer quite a bit. Take for instance, a website with a little "your basket" sign in the top right corner, informing the user that the basket contains 1 item. When the user hits the home page again, they won't particulalry understand if the sign now says "nothing in your basket". Or take the developer who's designed a makeover for a website, changing the css. They don't want users who are frequent visitors to come back to the site and get a mishmash of content and styles because the css won't update automatically.

Fortunately there are ways around caching problems, and ways to give developers control over caching important elements of a page without caching everything.

Within the page HTML, if you don't want the browser to cache the page, you can add a meta-tag in the page header:

 <META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">

While the browser understands this, however, an additional HTTP header is required in order to make sure that intermediate servers understand the requirement not to cache. In PHP:

<?php

header("Cache-Control: no-cache, no-store");
header("Pragma: no-cache");

?>

In Classic ASP:

<%

Response.Expires= -1
Response.AddHeader "pragma", "no-cache"
Response.AddHeader "cache-control", "no-cache"

%>

This doesn't solve the problem of cached css. Luckily, there is a very simple solution when you've just made changes to the css:

<link rel="stylesheet" href="style.css?version=2" type="text/css">

This stylesheet reference says "style.css?version=2" instead of just "style.css".  The browser has to assume that these two files are different, although if you haven't done anything fancy with intercepting calls to css files, they are in fact exactly the same file.  Once the browser has grabbed the latest file off the server by requesting style.css?version=2 then it has that file, and won't need a new one until you change the version number in your html reference to it.

But what about the benefits of caching?

We seem to have overturned the point of caching, at least with PHP pages, so how do we make up for it? My answer is to cache specific portions of the page, i.e. the ones that don't have to be up-to-the-second, and may involve a complicated set of SQL queries to get the information out. You can turn to a commercial caching solution for this, or create a cached content table which you manage yourself. Bear in mind that this will grow and need to be tidied regularly. The code below doesn't supply the housekeeping solution.

First, write the function that gets all the content. Then, when you want to write out the content, instead of calling that function, see if a cache exists. Use some unique code for your content, and call this function:

static function GetCache($UniqueRef, $MinsToCache=3000)

{

$sql='select cachevalue,lastcached from cachetable where   uniqueref='.MySQuote($UniqueRef);

$rs=mysql_query($sql);

$aRow=mysql_fetch_assoc($rs);

if($aRow==false)

return false;

else

{

$unixcachetime=strtotime($aRow['lastcached']);

if((time()-$unixcachetime)>(60*$MinsToCache))

return false;

else

return $aRow['cachevalue'];

 }

}

 

If the function returns nothing, call the content-generator function to get the content, and before outputting, cache it - something like:

 

static function DoSomeCaching($UniqueRef, $CacheValue)

{

 

$sql='UPDATE cachetable ';

$setsql=' SET uniqueref='.MySQuote($UniqueRef);

$setsql.=',cachevalue='.MySQuote($CacheValue);

$setsql.=',lastcached='.MySQuote(date('Y-m-d H:i'));

$sql.=$setsql.' WHERE uniqueref='.MySQuote($UniqueRef);

 

mysql_query($sql);

if(mysql_affected_rows()==0)

{

$sql=' INSERT INTO cachetable '.$setsql;

mysql_query($sql);

}


}

The MySQuote() function is a mysql single quote escaping function - replace calls to this with your preferred method.

Images and the web

30th December 2011
Categories: basics, images

When adding an image to a web page, you'd be forgiven for thinking that you simply fire up your favourite content management system and upload the image, or add an image element to your HTML like so:

<img src="sunflowers.jpg">

Apart from design considerations, which we won't cover in this article, there are various practical considerations to be taken into account, including format, quality, and size.

Image format and quality

Web images come in a variety of formats for the web, but there are three popular ones: GIF, JPG (or JPEG), and PNG.

Both GIF and JPG are 'lossy', that is, from an original photo, saving as a gif or a jpg will lose some information.

GIFs take out image information by reducing the number of colours to 255.  So for example in a photograph with gradients (see below), the GIF version will cut out certain colours, losing the gradient effect (see inset).

png image of ship with inset to show gif gradient

GIFs are most useful for cartoons and other images with low colour resolution.  Here they come into their own, offering the best compression from original images, which means faster downloading on a web page.

JPGS offer a good compression ratio for photos and detailed images.  When saving a jpg using most software you are offered a quality option, 0-100%, which also determines how much the image is compressed.  JPG compression is lossy, but at 100% it is not noticeable.  At 50%, however, you get some odd 'jitter' effects such as shown below (jpg inset):

ship png with jpg inset

PNGs are not lossy, but may not always offer the best overall compression, although it is worth experimenting with a given photo.  Generally speaking, slightly low quality JPGs are best if you want photos on your website but want to reduce loading times.

Image size

It is best to size images to the exact pixels specification before inserting into a web page.  For example, if  you add a 100px wide image to your web page and then ask the web page to size, using the following code:

<img src="sunflower.jpg" width="250px">

Then the browser is downloading the whole image (which could be 1MB or more in disk size) before resizing when it gets shown.

In addition to increasing download size, if you don't resize images yourself, you're not in control of the resizing process.  Generally, photo resizing programs give you a couple of options: cubic and linear.  If you're resizing down, linear is often best, but again it's good to experiment with the specific image. Resizing up isn't generally a great idea, but we've found that cubic resizing, in small increments up to your chosen size, generally gives the best results.

 

 

www and non-www

28th December 2011
Categories: php, seo

While most websites serve up exactly the same web pages on the www and non www versions (http://www.yoursite.com and http://yoursite.com) it is good practice to have one 'canonical' version of your website and divert the other version to it, as search engines have traditionally viewed the two versions as duplicates (which isn't good) and having one route to a 'resource' narrows down the margin of error if there are changes to the way you serve up web pages.

In php you can divert one to the other using the following code:

// redirect to www if not there already
if(strpos($_SERVER['HTTP_HOST'],'www')===false)
  && (strpos($_SERVER['HTTP_HOST'],'yourwebsite.com')!==false)
{
  Header( "HTTP/1.1 301 Moved Permanently" );
  Header('Location: http://www.yourwebsite.com');
  exit;
}


If you have access to the DNS for your website you may wish to point the non-www site at a different location altogether, with just one index.php file containing the following code:

Header( "HTTP/1.1 301 Moved Permanently" );
Header('Location: http://www.thisismysite.com/');
exit;

Note that the header containing the 301 code is important for search engines; in almost all cases you should use a 301 (permanent) redirect as it tells search engine spiders that the old url is redundant and the new url should be credited with any 'kudos' that the old url ever had.

A slightly neater way of doing the redirect is to do it outside of PHP code, in your .htaccess file if you are running on apache and you have permissions (via the apache config) to do it:

# rewrite rules.
<IfModule mod_rewrite.c>
RewriteEngine on
RewriteBase /
# non www to www
RewriteCond %{HTTP_HOST} !^www\.mygreatwebsite\.org$
RewriteRule (.*) http://www.mygreatwebsite.org/$1 [R=301,L]
</IfModule>

On IIS you can do it using the website properties within IIS manager.  Just add another website for the non-www version, and once added, in the website properties, instead of serving web pages from a folder on your computer, choose to make it a 'redirection to another URL'.  Remember to take the non-www version off the host headers accepted by the www version (website... advanced button).

What is jQuery?

21st December 2011
Categories: basics, javascript

I'm building a shed in my garden. What I need is to put bikes, a lawnmower, a few tins of paint, a toolbox and some random junk under cover. That's the primary aim of the project.  The seconday aim is that it mustn't look too shabby.  And finally it mustn't be a lot of work to put up.

Now I know that the raw materials for building a shed are wood and nails, and maybe some glue. But it would be great if some of the pieces of wood came stuck together already, so that I didn't have to do so much hard work to achieve my goals.

Enter the pre-fabricated shed, and ta-da!  It takes less than half the time.

jQuery is basically a pre-fab shed for Javascript. Someone has spent a lot of time and energy building commonly-used routines and functions to do things like showing and hiding bits of web page, calendar controls, and that kind of thing, and once you have jQuery and some simple documentation you can access them very easily without all the hard work.

Take 'lightboxes' for example. They are a popup window in the middle of your web page to show an image. They can be part of a gallery and include 'previous' and 'next buttons'.

If you google 'jQuery lightbox' you'll get an example of this javascript at work, and a download link which gives you the jQuery core library and the lightbox library, and some sample code to get you started with your very own lightbox code.

The way a lot of jQuery works is by modifying attributes of existing HTML.  Say you have some HTML which looks like this:

<div class="someclass">
<ul>
   <li>
     <a title="Some random picture" href="pic.jpg">
        <img src="thumb.jpg">
      </a>
    </li>
</ul>
</div> 

The jQuery code for turning your thumbnail picture into a link to a lightbox happens in the Javascript at the top of the page, where you call a function to modify the action of the anchor tag.  Most of the work that's done is hidden from you (the coder), you simply call a jQuery function to turn  the div into a lightbox gallery.

What is Javascript?

14th December 2011

Not to be confused with Java, Javascript is a computer language intended mainly for use on web pages. Unlike, for instance, PHP, ASP and server-side Java, which give the web server computer instructions and produce web pages, Javascript gives the client's computer instructions, which are only processed when you're viewing the web page in a browser.

To put it simply, a PHP script may connect to a database, create a web page and send it to the browser; Javascript runs on the browser and is mainly used for visual effects.

Here is a sample web page with some Javascript in it - you can save it as an .html file and run it and it should work in any browser:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">

function doThings()
{
document.getElementById('btn_things').style.color="yellow";
document.getElementById('btn_things').style.backgroundColor="blue";
}

</script>

</head>

<body>

<button id="btn_things" onclick="doThings();">click here</button>

</body>
</html>

First of all, the page loads into your browser and you see a button saying "click here".  The button has an attribute (which is not visible ot the user) called "onclick".  This is the name of an event, and you can see a complete reference of html events on the w3schools website.

When the event is triggered (by clicking the button), the browser looks up the value of the onclick attribute and finds that it's "doThings();".  This tells it to look for the "doThings" function in any script on the page.

function doThings()
{
    document.getElementById('btn_things').style.color="yellow";
    document.getElementById('btn_things').style.backgroundColor="blue";
}

The first instruction in the doThings() function is an assignment... assigning the value "yellow" to something called "document.getElementById('btn_things').style.color".  The document.getElementById is an instruction to find the object in the HTML of that name, and when this is found, the instruction references the style property of the object and the "color" property of "style".  Properties of elements in an HTML document can be looked up again on the w3schools website.

That very short demonstration is an introduction to inserting Javascript code into an HTML page. We will come back to Javascript in future posts to discuss how to make it work harder!

How do you save data to a database?

10th December 2011
Categories: basics, databases

Databases are a tool for data storage and retrieval.  They tend to be more useful than data files (i.e. simple text files) because they can be queried very quickly, due to the use of indexes. But it's worth noting that databases really are glorified data files, with some housekeeping processes and query tools to make them easier to use and maintain.

Let's stop for a moment to talk about indexes.

If you've ever read a reference book you'll know roughly how an index works: you can find an important word quickly in the index because the index is small. The index points to a page in the larger body of the book. But once you've found your word in the index, you can find it quickly in the book because you can quickly thumb to the right page. 

This is exactly how database indexes work, and why from billions of web pages, search engines can find what you're looking for before you've finished typing it. It is why any web developer worth his salt (and given a decent server) can make a website go fast... but I digress.

How will a database help me?

Databases not only do the indexing and lookups for you, a relational database will let you query by linking tables -- for example customers and orders. If you have a customer table with all the relevant information about a customer - email, contact details and so on, you may not want to replicate this inside every order. So you have two data files (or 'tables', as they're known in the business) and you can join them both in a query, like this:

SELECT customer.firstname, customer.lastname, order.orderid FROM
customer INNER JOIN order on customer.customerid=order.customerid 
WHERE customer.lastname='Smith' 

The lines above are called a 'query', and this is sent to the database system by whatever programming language you use, from one program to another on the same computer, or over the internet.  The database server then interprets the query (at lightning speed) and sends the results back to the software.

So instead of writing software specifically to query each table and to match up the results, you simply phrase the query for the database server to understand.  And instead of goint through each line in the data file checking against your search criteria, you leave the job to the database server and its lightning-fast indexes.

What are the choices?

There are too many choices of database server to mention here, but I will name a few:

MySQL is an open-source product and the world's most popular web db, supporting the vast majority of the world's data-driven websites.

MS SQL is Microsoft's database server, very robust and full-featured.

MS Access is a desktop database, not suitable for large or web-based applications.

Oracle is the traditional choice for big corporate finance systems.

Where do I go from here?

For a first time web developer I'd recommend getting started with MySQL - whether using PHP or ASP. Most web server installations come with MySQL installed, and for ASP you can download "connectors" from the MySQL.com website.  For windows desktop use, WAMP (Windows, Apache, MySQL, PHP) is a real life-saver and installs all of the main components for getting a dynamic website up and running.

What's a Content Management System?

9th December 2011
Categories: basics, cms

A content management system (CMS) is a way of adding pages to your website without editing HTML.

CMS's have several advantages over HTML editors such as Dreamweaver:

- They allow the separation of design and content. When you have designed your website, you don't want content authors to make constant design changes. Design should come about through a completely different (and well thought out) process.

- They (typically) organise the navigation for you. As a very simple example, when you add a news item to your website, it should exist as a link on the home page , and as a story page.

- They allow your content to exist in more than one place. For instance a product could exist in more than one category page without you having to re-type the details, or your testimonials could appear on every page of the website without any extra work.

One of the simplest CMSs, but a reliable and well-supported one, is Wordpress. Wordpress has become almost synonymous with blogging, despite some search engine compatibility flaws such as allowing search engines to index duplicate content, and the limit of one blog per site. 

Joomla, Drupal, and Concrete5 are also well known CMSs, but there are hundreds of CMSs on the market, each with its own strengths and weaknesses.

Oxford Web's CMS, Oxebiz, is feature rich, in that it combines CMS, blogging, and customer relationship management in one control panel, and uses industry standard features such as the TinyMCE rich text editor.

As a developer, whichever CMS you choose, it takes time to get to know its quirks and the best methods of adding functionality, but once you have done that, you have a very powerful tool not just for editing websites but also for creating them, as CMSs normally provide a framework for getting up and running with a website, to which you add your header/footer HTML, CSS etc.

What is a web server?

4th December 2011
Categories: basics, web servers

If you've taken the journey through our technical blog from the beginning, you'll have an understanding of what HTML is and how to use it to build websites. We haven't yet covered how web pages get from A to B on the internet, so that's our next topic.

If you try out some of the HTML and CSS we've discussed and save it in a text file called webpage.html (make sure it's a text-only file, so use notepad or dreamweaver, or your favourite equivalent) then you will be able to double-click that file on your desktop (or wherever you've saved it) to see the resulting web page.

At this stage in the life of your HTML file, nobody but you can access it. It's a web page, therefore, but it's not part of the internet.

In order for this web page to become part of the internet, it doesn't just need to be on a computer connected to the internet. It also needs a web server, a computer whose purpose is to serve web pages to other computers. Web servers are usually Linux or Windows machines (there aren't very many Mac ones) with a program running all the time (also called a web server, confusingly) which listens for new requests and decides what to do with them.

For the web server software to be able to receive any requests on a domain name like oxford-web.co.uk, it doesn't just need to be connected to the internet; your browser needs to associate it with that domain name. This job cannot be completed on the server itself; you need to add entries to something called the DNS system. You can do this via a domain name registrar (in other words, the people who sell domain names, 123-reg and sitelutions being examples).

Once you've hooked up the doman name with the address of the web server (the so-called "IP" address), a process with which the domain name registrars will help you, your web server will start receiving requests - now it just needs to process them.

Web servers need to know where the web pages live (they won't look all over the computer; they need to start from a particular folder - that's called the web root), and they also need to know a bit about how you want to process different file types. For example, your HTML file might just be sent as-is to the user requesting it, for their browser to display. Other files, like PHP, may include instructions (lines of code) for the web server to process first - including receiving input, calculating, and fetching content from different places.

The web server processes whatever it needs to process, calling on other software (like the PHP interpreter) in the process, and finally serves up your web page. If your web page refers to other files (like a css file or image files, for example), the browser will make another request to the web server, and the web server will go through the request processing again and serve up another file. 

What are PHP, ASP and Java?

1st December 2011
Categories: basics, php

What are PHP, ASP and Java?

Having read the previous posts, you'd be forgiven for thinking that the world wide web is just a collection of interlinking documents.

That's how it started, of course, but now we have much more than that.

What links the static documents stage to a more interesting world wide web, where people can send and receive information, buy products, and generally interact with the web pages they visit, is software especially developed for building web pages.

There are three main contenders in this area:

- PHP (An open source system which stands, confusingly, for PHP Hypertext Preprocessor)

- ASP (Microsoft's 'Active Server Pages', which support various languages, including C# and Visual Basic)

- Server-side Java (another open source system originally developed by Sun) 

I'm calling them "systems" rather than "languages" because getting them working is a bit more complicated than writing software and sticking it in a compiler... but that's too much jargon already, please bear with me...

My aim in this article is to explain what these systems do that HTML doesn't, so rather than delve into the individual languages, I'll write some pseudo-code (pretend software code) to explain.

Say, for example, that you wanted the user to tell you their name. In HTML you can ask for their name - the code would look something like this:

<form> What's your name? <input type="text" name="namebox"> ... </form>

But HTML has no way of capturing the name once the user has typed it in, so we need a programming language so do something like this:

User_name = Get_the_user_input("namebox")
Print "Hello " + User_name

User_name is what's called a variable, in other words a placeholder for a value that can be changed at any time.

Get_the_user_input is pseudocode (pretend software code) for however you would retrieve some user input in your language of choice.

Of course, PHP, ASP and Java can do a lot more that retrieve input. They can store information, manipulate information, and output information. And like most computer languages they can make decisions and go around loops. This gives them the ability to do pretty much anything you want a website to do, given careful planning and the time to code.

All three also have the ability to create and manipulate "objects", a special kind of variable designed to mimic objects in the real world, which can have multiple properties and functions, and so can speed up the process of programming... but more on that in another post!

What is Dreamweaver?

25th November 2011
Categories: basics, dreamweaver

In the last couple of posts on HTML I've mentioned that you can easily edit it in a text editor. You'd be forgiven for thinking that I don't want to spend money on fancy WYSIWYG tools and that's why I'm so excited about being able to edit HTML in notepad. 

In fact what I like about HTML being written in plain text (unlike, for example, the formatting of Word documents) is that it's easy to debug (in other words, to look behind the scenes and figure out what's going on).

Dreamweaver combines HTML and CSS plain text editing with a WYSIWYG tool which lets you check progress as you go or edit WYSIWYG on the fly. It's the industry standard tool for this sort of thing, although there are many, many programs which do more-or-less the same thing.

So if like us you're hooked up with the entire Adobe product family, you'll already have it - do try it out. You can also get a taster by downloading a 30 day trial.

What we normally do when we create HTML and CSS from a design, though, is split it up into different parts of the page and hand-code those parts to a high standard in terms of HTML and CSS best practice and accessibility, something Dreamweaver doesn't always encourage, and then feed those bits and pieces of HTML into the template side of a content management system (CMS).

To find out more about CMS's you'll need to wait for my blog post on that subject - coming soon!

What is CSS?

22nd November 2011
Categories: basics, css

CSS (or cascading style sheets) is a language that enables you to tell a web browser how a webpage should look. Whilst HTML is a language describing the structure and content of a page, CSS describes how that content should look.

The syntax of CSS is extremely simple, you declare which element/elements you wish to affect and then declare the styles that you want to apply to them contained within curly braces (“{}”)

The selector (the part of the block which defines WHAT to affect) can be a HTML tag, a HTML class attribute prefixed with a “.” or a HTML id attribute prefixed with a “#” (there are others but these are the most common)

Example:

a
{
color: red;
}

.title
{
background-color: green;
} 

#branding
{
font-weight: bold;
color: blue;
}

In this example we have three blocks, each with a single selector (a, .title and #branding). The “a” selector will affect all “<a ” tags on the page (also known as anchors or links). The “.title” selector will affect all tags on the page that have “title” as one of their classes (i.e. “class=title”) whilst the “#branding” selector will affect the element that has an id of branding (i.e. “id=branding”).

As you can see above, the style declarations themselves are extremely simple: what you want to change, a colon, what you want to change it to and then a semi-colon.

The cascading part of CSS refers to the fact that all the elements will inherit the styles of their parents, for instance say you had the following markup:

<div id=”branding”>

<span class=”title”>My Company</span>

<span class=”subtitle”><a href=”/about”>about us</a></span>

</div>

using the styles above the text “My Company” would be bold and green (it gets the 'bold' part from the branding div that contains it) whilst the “about us” link would be bold and red.

You aren't limited to just using one selector in CSS, you can chain them together as a set of rules that allow you more control over what to apply the styles to. For instance you can declare a style for any anchor tag that has an element with the 'menu' class as an ancestor (doesn't have to be a direct ancestor)

.menu a

{
color: orange;
text-decoration: none;
}

To limit the rule to only apply to direct parentage you use “>”

 

.menu > a
{
color: yellow;
}

This would mean that the parent of the anchor would have to have a class of “menu” for the style to be applied.

One last thing to cover is pseudo-classes. These are used for special effects and refer to a specific circumstance, for instance, hover-effects.

A:hover
{
text-decoration: underline;
}

This would cause all anchor tags to become underlined when the mouse is hovered over them.

What is HTML? - Part 2

21st November 2011
Categories: basics, html

I mentioned in my last tech blog post that HTML had taken a back step from telling browsers how to display content, and that this job had been taken over by CSS (Cascading Style Sheets). But wait! Not so fast! What does HTML do now, and what's good and bad about it?

First then, what does it do?

In the new way of things, HTML allows you to specify and mark up content, leaving CSS to define how the content is displayed.  So for example if I have a menu and some body text, those parts of the page might look like this in HTML:

<div class="menu">
<div class="menuitem"><a href="/">home</a></div>
<div class="menuitem"><a href="/about">about us</a></div>
</div>
<div class="bodytext">
We are a fabulous company selling t-shirts of all sizes
</div>

Note that nowhere does it say where the menu should go or what it should look like - the HTML just provides content and defines the purpose of the content - e.g. "menuitem", for the CSS to get to work on.

HTML is good because it provides a simple, text-editable way of getting content online, readable, and linking with other content.

The bad part is that there are so many legitimate ways of expressing the same thing, and despite attempts to tidy up everyone's usage, because of the number of websites out there that use antiquated methods of displaying information, it's difficult to break away from the old.

So for example, <i> means italic, but so does <em>, and so does <span style="font-style:italic">. Or if I want to organise something into a list, I could use a list tag, a table, or just div tags one on top of the other.

To write good HTML I'd recommend packing Dreamweaver back into its box and buying a book specifically aimed at HTML 5 and CSS (at time of writing HTML 5 is the most up-to-date version). This will help you on your way to write standards-driven (and therefore future-proof) web pages.

What is HTML?

14th November 2011
Categories: basics, html

There are many huge and cumbersome problems with the internet; one of them is HTML.

Allow me to explain. In the beginning, the internet was not synonymous with the world wide web. The internet was a network of computers, as you might have in any office. The communication between those computers was typically related to transfer of files, or instructions, or people running text-based programs on a remote computer.

Independently of the internet, a system called 'Hypertext' was developed, which allowed you to create a document with 'forks' or 'links' to other parts of the document. Interestingly enough, Jorge Louis Borges is credited with developing the first 'hypertext novel', The garden of forking paths.

Tim Berners-Lee is the genius who put hypertext, the internet, and other elements together to create the world wide web. Using the web you could connect to a remote computer to look at scientific documents and browse around them following the links.

Web page creators needed nothing more than a text editor to create hypertext markup language (HTML) documents ('Markup' refers to the way that ordinary text is 'marked' or 'tagged'):

“<b>” means bold, while “</b>” means end bold. so in a web page, the markup:

come to my <b>party</b>

would look like:

come to my party

<i>is for italic, <u>for underline,

So the following HTML:

<p>Visit the <a href="http://www.oxford-web.co.uk/">oxford web website </a>for more <i>info</i>

would look like this on a web page:

Visit the oxford web website for more info

As HTML evolved, though, the markup became less about how things should look than about what sort of things they were. So as a simple example,

<h1>this is a header</h1>

but it's something else, a stylesheet, that tells the browser how to display “h1” headers. And we'll visit CSS in another blog post.

© Alberon Ltd 2017

8 Standingford House
26 Cave Street
Oxford
OX4 1BA

01865 596 144

Oxford Web is a trading name of Alberon Ltd, registered company no. 5765707 (England & Wales).