Skip to content →

flowing motion Posts

How to make a Slideshow in Drupal 7

How to make a slideshow in Drupal

The concept behind a slideshow

A slideshow in Drupal is actually a View.   A View is a query that will search through your pile of nodes, pick out any that match the criteria you set, and display them in a format you set.  Slideshow simply extends Views to layout your content in a slideshow with our without a carousel.

This post will describe how to get the slideshow working without a carousel.

Before you start

Before you start, you will obviously need a working Drupal website with some content, such as a collection of images.  You can also use a slideshow to display ordinary posts as I do on the front page of Rooi.  We will use images here because that is the more common use.

Additionally, you need to have View downloaded and enabled and you will also have to enable its sub-module View_UI.

You also need to know, at least roughly what the following mean:

  • Page and block
  • Content-type, node and field

Modules & Plugin

To set up Slideshow, you will need the modules: Libraries, Views _Slideshow, Views_Slideshow_JCarousel and Libraries.  When you enable Views Slideshow, also enable Views_Slideshow_Cycle.

Additionally, you will need the jCycle plugin which you download from https://github.com/malsup/cycle (get the .zip file on the right).

Unpack the file into your Libraries folder. If you don’t have a Libraries folder, make one under /sites/all/.  Rename the folder that the .zip file creates as jquery.cycle.

Make a View Slideshow

You will recall that to make a View, you go to Structure/Views and make a new view.

Screen 1

  1. Add a name and a description
  2. Choose your content.   Notice that everything on the list is a content-type. If you have a separate content-type for images, choose it. Otherwise choose a content-type that has a field for images. The default content-type Article has a default field for images and I chose Article.
  3. Decide whether you want to display your slideshow on a page or a block.
  4. If you chose page, check the path.
  5. At format, choose slideshow.
  6. Set the number of images to show before pagination kicks in.
  7. Decide whether you want a direct link to show on a menu.
  8. Continue & edit but beware, your work has not been saved at this point.

Screen 2

  1. The second screen has a baffling array of controls.  Look over them carefully and ignore Advanced Options in column three for the moment.
  2. The middle column controls the path, the links to menus, the permissions, and pagination.
  3. Most of the controls that you want for a slideshow are in column one.
  4. Starting at the top, you see Display Name and Title. Display name is the name used to when Views are listed. Title is the name displayed as part of the view – that is, above the slide show.  So make sure the Display Name speaks to administrators and developers and Title speaks to users and visitors.
  5. The next four blocks cover FORMAT, FIELDS, FILTER CRITERIA and SORT CRITERIA.
  6. Starting from the bottom — as those are easiest to understand – Sort Criteria telsl you the order in which slides will be displayed.  If you want to change the order, this will be the block where you will find the controls.
  7. Filter Criteria is also fairly self-explanatory:  with the default settings, the slideshow will only display published content that is an Article.
  8. The FIELDS block, if you followed the instructions for Screen 1, will be blank.
  9. FORMAT refers in the first line to Slideshow|Settings and Content|Teaser.  We will begin with Content and you will see that varying the Content changes your Field options in the Fields block below.
  10. Click on Content and choose Fields.  Now you see Content:Title come up below.  You can also Add a field.
  11. Add a field and you will see many choices.  Think a little – you are looking for Content: Image.  Add that, and it will come up in the Fields block.

Inspect Preview

Scroll down to the bottom of your screen.  You should see a slideshow of all the images that you have uploaded into Articles with the title of the Article above the Image.

Save and go to the menu where you linked the slideshow or type in the url to see your work on your website.

Advanced Option

You might also note that you are also seeing the title to every Article, whether it contains an Image or not.

To add a another Filter to choose only the Articles that contain an image, you can look first at the list of Filters.  I don’t think we will find a suitable filter because we are displaying nodes of content-type Article and we want a logic that would go something like “contains an image” rather than “is an image”. But look anyway.

(Remember to edit a View, go to Structure/Views.)

I went instead to Advanced Options and chose the Relationships. On that list I could find Content:Image (field). I added it and checked required.

Now my slideshow only contains Articles which contain an image.  And it is cycling nicely.  Save if you wish.

Slideshow Settings

What if I want to speed up my slideshow or add previous and next buttons?

Go back to the View and go to Slideshow | Settings in column one.  (Btw, if you have not downloaded jcycle correctly, on the following screen you will get a big warning message in red. So if something is not running correctly and you want to eliminate jcycle as being the cause look here.)

To get some basic settings, scroll down to the bottom and check the options under Bottom of the page.  Be patient as when you check the options, more options are revealed.

Oddly, the controls aren’t working as I expected them to.  I checked all three and checked the option to stop when hovering.  Only the counter is showing at the bottom for me.

Summary

So far, we have downloaded the correct modules and plugin and set up the basic slideshow view.

You know how to reveal fields and to add fields.  You know how to filter on the content-type (column 1) and on the fields (under Relationships in column three).  And you know where to find the settings to control the slide show.

You can also decide where your slideshow will go on you site – onto a page or block and if it is page, attached to a menu or not.

The next post will describe how to get the carousel working.

 

 

 

 

 

One Comment

How to install WYSIWYG and CKEditor on Drupal 7

To install WYSIWYG successfully, it is helpful to understand that works at three levels: text filters, WYSIWYG and Editor.

Text filters

Drupal 7 arrives with pre-installed text filters.  If you have a fresh install (and even if you don’t), got to the admin bar at the top of screen and select Configuration.  On the left hand side, close to the top, you will see Text Filters.  Have a look at these.  You will see Filtered HTML, Full HTML and Plain Text.

The filters give you control over three things:

1.  Who can use Full HTML, or Filtered HTML and who must use plain text.

When you are new to Drupal, leave everything on default.  You can see that with the default settings only administrators can use Full HTML.  Later on, you might want to limit anonymous users to plain text as Drupal attracts spam.

2. Which Filter is used by default

Also, note that Filtered HTML is at the top. That means that is acts as the default, even for administrators. If changing the filter manually becomes annoying when you need Full HTML, change the order.  You can change the order back again later, if you wish.

3.  The exact functions of the filter and the order in which they work

As a general rule, do not play with the settings. There are several of them and when you fiddle, you are fiddling with relationships to the underlying code and to the effect of combinations of settings.  When in doubt, don’t touch!

There are three settings that you will probably want to change though.

  1. When you add the Media module, you must check the box for “Convert Media tags to markup” (and Save).  The Media module will remind you if you forget. You must check this box in both Filtered and Full HTML.
  2. When you add the WYWIWYG module, you are recommended to uncheck “Convert line breaks into HTML (i.e. <br> and <p>)”.  Uncheck this box in both Filtered and Full HTML.
  3. Additionally, when you add the WYSIWYG module, go to “Limit allowed HTML tags” under Filter Settings near the bottom of the page, and add <p> and <br>.  You only need to add these tags in Filtered HTML.

Text Filters is the first level of setting up WYSIWYG.

WYSIWYG module

You can install and enable the WYSIWYG module in the usual ways.

  • Either, use drush (drush dl wysiwyg) and (drush en –y wysiwyg)
  • Or, go to the admin bar/modules and insert the url that you retrieved from the WYSIWYG page. When prompted, enable the module.

WSYIWYG should now show up on the Configuration page under Text Filters. If it does not, then clear your caches.

  • Either, use drush (drush cc, followed by 1 when prompted)
  • Or, go to the admin bar/configuration and performance where you can clear all caches.

Go to WYSIWYG at the Configuration page and you will see the three Text Filters you saw in the first stage above, with a drop-down box that says “No Editor”.

Your next task, is to go to the “third level” and install an editor. Then we will configure a combination of WYSYWYG and the editor you have installed.

CKEditor

Drupal will prompt you with a list of editors and highlight one in particular, CKEditor, in pink.  CKEditor is very well established but I must begin with two warnings.

  • Do not install the CKEditor for Drupal.  Install the normal CKEditor.
  • Do not install the most recent CK Editor, because Drupal/WYSIWYG will insist that it cannot see it.   You can install the latest development version of WYSIWYG (by downloading it manually into the WYSIWYG folder), but it does not play nicely with DRUPAL and destroys the Edit layout and does not render a tool bar.  Install an older version, say 3.5.
  • Do not fuss about all the instructions about where to put the CKEditor. Download the zip file and unzip it into /www/yourwesbite/sites/all/libraries. If this is the first library that you are installing, then you must create the library folder.  CKEditor will unpack itself neatly.

Once you have an (old) version of CKEditor, when you go to WYSIWYG on the configuration page, you should now see CKEditor in the drop-down box where you once saw No Editor. If it doesn’t show up, try cleaning your caches before you panic.

Now you can configure your WYSIWYG/CKEditor.  You only have one task to do but you must do it for Filtered HTML and Full HTML. And remember to save each time.

Click on Configure and go to Buttons and Plugins. Check all the buttons that you want on your tool bar. Be mean, rather than extravagant but remember to check “HTML Block Format” which give you a drop down list for headers and “Media Browser” if you are going to add the Media Module (near the bottom).  This may feel like a tedious chore, but enjoy – when you are done with this you will have working WYSIWYG.

Summary

WYSIWYG requires you to think at three levels.

  1. Set up your text filters and prepare for the addition of WYSIWYG and Media as I described in the first section above.
  2. Install WYSIWYG and go to the configuration page where you are prompted to get an editor.
  3. Get an old version of CKEditor and set up the buttons for your tool bar with the configure button.

 

 

 

One Comment

8 scenarios to think clearly about mobile first

What is mobile first?

Mobile first.  This is the new mantra for web design.

We design the smallest screen first and design the larger screens later.

Does mobile first help me position my service?

As the owner of a service, I like mobile first.

Mobile first constrains me to think clearly about the main purpose of my website.

The small screen prompts me to edit, edit and edit again until I am saying what I need to say, simply and completely.

Where can I get good examples of mobile first?

Though the mobile first mantra has become a mantra, when I google mobile design, I have found very little advice about how to think about mobile design.

Oddly, blog posts promising 50 best responsive sites, for example, immediately contradict the mobile first mantra and show the desktop layout first.

In short, much to my frustration, I haven’t found a good catalogue of examples of responsive design that is mobile first.

What advice on mobile first is out there?

The advice out there is either very generic (think about what the customer wants) or very technical about media queries, for example, or very sophisticated, such as have dummy actions to make the user think your website is more responsive than it is.

To get started on using mobile first, I am going to have to think through the principles for myself.

How does mobile first clarify my service design?

The scenario

Mobile users are probably on the go somewhere.  They are unlikely to be at their desk.  They don’t have a keyboard.

Not only are they away from the conveniences of their own desk, at any time their signal might fail.  They are very likely to be interrupted by something going on around them, or by having to break off a task and ‘move on’, get off a train,  say.

They not even all that likely to be sitting down.  They may be on public transport with their bags and worldly possessions between their feet, with one hand hanging onto the overhead strap, and only one hand and a thumb to work their mobile phone.

What mobile users want and need

Clearly, the interaction between mobile users and myself must

  • Obvious at a glance
  • Not disturbed by noise and activity around the user
  • Manageable one handed with a thumb
  • Complete in itself in a very small window (a few seconds).

This list feels dull and pedestrian.  It is certainly “micro”.  Can I really conceptualise my interaction with a user as a matter of seconds?

Mobile interactions are small

The smallness, if not meanness, of mobile engagements, stopped me in my tracks.  Has life come down to a few seconds?

Alternatively, I can ask was life ever about more than a few seconds?

What did we do before we had mobile?

If we arrived at the supermarket without a shopping list, for example, what did we do?  Instead of calling home to get oyur list, we had to guess?

Before we had mobile, when we were sitting on a train, we made a plan in our head for what we would do when we left the train.

After all, we still do this when we are driving, or when we don’t have a signal.

Plus ca change – has mobile changed anything?

I am not totally convinced that mobile has changed anything.

To continue the supermarket example, we might be able to call home to get our shopping list and rectify our own confusion, but our relationship with the supermarket does not change.

The supermarket doesn’t have our goods waiting for us when we arrive.  Nor, do they send us scooting around their warehouse with an efficient map like an Amazon worker.  Nor, does a robot fetch our goods for us.

Our relationships with our users persist even with mobile

The relationship between user and supplier, at least in the case of the supermarket, has not changed.  All that has changed is that the user can be a little more efficient.

I am going to use this insight as a heuristic and generate all the relationships we might have with a user and look where our offering of a mobile experience might allow them to be more efficient.

What do we do when we are mobile and don’t have a signal?

When we are driving or sitting on a plane without a signal, how do we think about lives and our relationships with the various people on whom we depend?

What do we want to know and what decision have are we thinking about making?

What will make us happy and feel we have achieved what we set out to achieve?

Scenario 1

I am whiling away the time and hoping for something to do to pass the time.  If I don’t have an internet connection, I might pick up a free newspaper or an inflight magazine.

Scenario 2

I might feel at a loss in the setting and not want other people to see that I feel at a loose end.  If I don’t have a mobile connection, I might scribble on a notepad or pretend to look seriously at the artwork on the walls.

Scenario 3

I might want to catch up with news, international or purely social, and be taking this moment because my movements precluded doing it earlier.  Without a mobile connection, I might look at a newspaper for news or glance at my email or social media messages.

Scenario 4

Particularly at the beginning of the day, I might be looking for amusement and entertainment as a mood-maker to start the day with a smile.  In days gone by, I would have looked for the daily cartoon.

 

Scenario 5

Particularly at the end of the day, I might be hoping for some inspiration or distraction to contradict a disheartening day, or recent encounter.   Anything, which allows me to jump the tracks of despair, and to creatively restore hope, will do.  Without rich resources, I would have depended on my imagination and memory.

Scenario 6

I might have a specific problem to solve and I am hoping that someone has put a clear solution online. For example, how do I check my foot size before buying shoes?  Or, how do I think economically about mobile design?  Is there someone out there who is sufficiently expert to lay out the issues clearly?  Without a connection, I might be thinking about how to find out and whom to ask when I am connected to the world again.

Scenario 7

I might be looking out for a specific message from someone – on my email, twitter account, or even on a broadcast service.   I am looking for something specific and I want to go to a url, log in if necessary, and get an answer to my question.  Has the message come and can I relax or move to the next stage of a task?

Scenario 8

I might be hoping to make a specific action.  To take a simple example, I might want to bookmark ten useful sources that I can follow up at home.  At this stage, we might be tempted to mimic a website set up for desktops.  It might be more helpful to think through the basic actions first.  What actions? What information do I need to act and what will the action be?  How do I know when I am done (or when I am half-done)?  How will I remember how far I got?

Using the scenarios to gain insights

Working through the scenarios, I was struck that the first scenario and possibly, the fifth, fall into window shopping.   These services might be important to regular customers of mine but probably of limited value to someone looking desultorily for distraction.

Scenarios 2, 3 and 4 provide services to clients that used to be served by mainstream media and newsletters.  To the extent that we have anything useful to contribute, clients might like this service.

Scenario 6 offered a specific insight for my kind of business.  Design my layout to show the questions, provide sufficient information for the user to judge whether they have found their answer, and make provision to bookmark the link in some way.

Scenario 8 turns out to be the most insightful for me.  So often when we start a new task, the steps aren’t clear to us.  Thinking in the micro terms of mobile helps us communicate the structure of tasks more clearly to our clients.

Scenario 7 seems to be more a matter of general services but will include messages from us.

Moving forward

I am going to begin from here.  Do these insights help me visualize the small screen of mobile and what my clients would like to receive as they, for example, hang from a strap on a jolting train, and attempt to look something up one handed with only a thump free?

 

 

One Comment

12 steps to rebuild your WAMP server without losing your data

Like many people, I have a WAMP server on my laptop where I mock up new websites and run private websites as internal Wikipedia.

I am currently running WAMP 2.2 and it fails – a lot – three times in six months.  I have no idea why and each time the symptoms are different.

But I do know what the solution looks like. I need to restore long enough to be able to gain access to my database and back up anything that is not backed up and to set any unusual settings to defaults so I can think about an alternative.  But first I must restore WAMP without losing my website files (www) and the databases which are stored in bin.

Here are the steps.

Step 1 Backup your WAMP folder

Simply copy your WAMP folder into C:/ .  Windows will keep it as Wamp – Copy.

Have a break and calm down. This might take an hour or so depending on how much is in your database bin and www folders.

Step 2 Print out your passwords and permissions

Try to recall your user, host, password table.  If you can log in to phpmyadmin, you will find it there under users.  If your can access your mysql console, open it; ignore the password; and type

Select user, host from mysql.user;

The table will show you your usernames and hosts but not your passwords.

Note well that if you are an organized person, this is a table that you might want to keep on hand for emergency purposes.  But right now we will proceed assuming that we cannot quite recall what we did when we set up WAMP.

Write down what you can remember and do it now before you start guessing and create chaos later.

Step 3 Print out all the files that you might have edited when you set up WAMP

  1.  wamp/apps/phpmyadminVerNo/config.inc.php (this is where you put your user name and password and where you might have set up authentication and ports)
  2. /wamp/wampmanager.tpl (you might have changed http://localhost to http://localhost:81 if you have changed the port for apache from 80 to 81  three places)
  3. /wamp/bin/apache/apacheVerNo/conf/httpd.conf (if you changed the above, you will also have changed Listen 80 to Listen 81 and localhost:80 to localhost:81)
  4. /wamp/bin/mysql/mysqlVerNo/my.ini (you might have changed the port for myql from 3306 to 3307 – three places)
  5. /wamp/scripts/testport (where you might have changed 80 to 81 in several places)
  6. /wamp/lang/English (where you might have change Port 80 to Port 81)

Also write down the Version Numbers for Apache, MySQL and Phpmyadmin.

Check whether your computer is 64 bit or 32 bit.

You are now ready to start restoring WAMP.

Step 4 Download the correct version of WAMP

Find WAMPSERVER on the internet  and download the correct version of WAMPSERVER.  Don’t be tempted to upgrade while you are restoring.  Keep the task manageable.

Step 5 Uninstall WAMP

Go to your Control Panel (from Start) and uninstall WAMP.  Uninstall removes everything except your www and bin folders.

Step 6 Install the correct version of WAMP

Install WAMP.  I use all of the defaults (IE and dummy email).  If I need to fix my email, I do it in a separate exercise.

REMEMBER to enable the rewrite module in Apache. Go to the WAMP menu, Apache, modules.  Click on rewrite. And close. Then check again. Sometimes the “tick” doesn’t stick.   If you don’t enable rewrite, your websites will not be able to read “pretty urls” that you carefully set up for humans to read and you will get baffling errors.

Step 7 Let WAMP start

When WAMP asks, let it start itself up.  You will see the icon in your bottom tool bar and it should go GREEN.

Step 8 Check you have access to localhost

Got the WAMP menu and check you have access to localhost – that is the list of your websites in www.

If your config.inc.php file shows a password (see Step 3), then you don’t have access to Phpmyadmin – fix that in the next step.

Step 9 Fix your password in config.php.inc so you have access to phpmyadmin

Got to your config.inc.php file (see Step 3). If it differs in format from the one you printed out, then you have installed the wrong version of WAMP. Close all services, exit and start again!

If you have the correct version, then change your user name and password. If you have changed your ports, then do nothing else right now.

Stop all services and restart all services (from the WAMP menu).

Check you have access to phpmyadmin.  If you get a pink error message #2002 or #1045, then in all likelihood, you have put in the user name and password incorrectly.  But sometimes you have little choice but to try to reinstall (start again).  In short, at this point, you should have access to Phpmyadmin and clerical error or confused working procedures is a more likely cause of failure than anything more complicated (Don’t google  it. That is like looking for medical information – you will just panic. Calm down and work systematically.)

If you have access to phpmyadmin, you should be able to access your user table.

Steps 10 & 11 Access a website

Now go to localhost and access a website. If you did not change your ports, everything should work fine.  All done.

If you did change your ports, you have one of two options.  Change the port settings on your websites to match the defaults.  Or, carry on and edit all the files that you printed in Step 3.

To change the port settings in Drupal, the port setting for mysql is in /www/sites/all/default/settings.php. You have to go to Properties with a right click and change from read-only. Change the port to the default of 3306.  Save and set the Properties back to read-only.  Remember you will have to do this for every website.  Also remember if you test this on one website and then go on to change the port settings, come back to change the port setting to the new number.

If you have edited all the files in Step 3,  then this time stop all services, exit and restart WAMP and then all services because you have edited the menu as well as the services you call.

If all goes well, you should be able to access all your websites.

Step 12 Consider changing your server

WAMPSERVER 2.2 seems unstable to me. I don’t know if 2.4 is anybetter.  What I do know is that the config.inc.php file in WAMPSERVER 2.4 is radically different from the one in 2.2 and I cannot see how to update the ports.

Also the version of mysql is different which requires an undate of your data tables as well as your software. To upgrade, you might do better to treat the job as a migration and back up all your websites and all your mysql, rebuild your server and then rebuild your websites.

 

There you go –it might take you an hour to get back into action. If anything goes wrong, it might take several hours. But don’t panic.  The web is littered with half instructions and panicky notes.  Don’t go near them.  Just work very systematically. Check as you go so that you don’t cause more chaos. And everything will work.

6 Comments

Add a Save button to the top of a Drupal post

One of the annoying features of Drupal 7 is that its submit button is below the fold.

Inevitably when we are writing a long post, we become distracted at some point and posts are left unsaved.  Without an automatic save feature, it is equally inevitable that posts are lost.

To make life a little easier, it is cool to put a Save button at the top of the Add Content form. And it is easy to do.

  1. Install and enable the module Content Type Extras
  2. Go to the list of Modules and Configure Content Type Extras
  3. The Module allows for all manner of extra buttons that I don’t use. I will just forget what they all do.
  4. I go to Extras and check two boxes to add a Save button to the top of each Content Type.
  5. Save and buttons appear whenever you add  a new Article, Book page, etc.

Now you have saved yourself a needless task of scrolling down to find the Save button and given yourself a prompt to Save when you are distracted.

Leave a Comment

Basic guidelines for choosing fonts

I find web design enormously difficult.  I like to approach work in an organized way and I don’t see the method that designers use, though they must have one.

I was enormously relieved then to find a list of rough guidelines on the Adaptive Themes blog originally taken from Smashing Magazine.  Rephrased — here they are.

Serif and Sans-Serif  Fonts?

  • Sans-serif fonts, i.e., fonts such as Arial that have no serifs or flourishes at the end of letters, are still more popular than serif fonts such as Times New Roman.
  • The more common rule-of-thumb is that we should use sans-serif fonts because they are easier to read on the web and serif fonts when we are presenting on paper.
  • The second rule-of-thumb is to use the opposite type of font for the headings.

Headlines

  • Popular choices for headlines are Georgia, Arial and Helvetica.
  • Popular size for headline fonts range between 18 and 29 pixels.
  • Header font sizes are typical 1.96 times the size of the body font.

Body Text

  • Popular choices for the body of the text are Georgia, Arial, Verdana and Lucida Grande.
  • Typical sizes for the body font are 12 to 14 pixels.
  • The line height for the body text is typically 1.48 times the font size in pixels.

Paragraph spacing

The spacing between paragraphs is typically set at 0.754 the line height in pixels.

Characters per line

The optimal number of characters per line is between 55 and 75.  75 to 85 characters per line is more popular.

Alignment

The body text is usually aligned left.

Images

Image replacement is rarely used.

Links

Links are underlined or highlighted with bold or color.

 

 

 

Leave a Comment

How to import large files into phpmyadmin and WAMP

One of the more infuriating problems that you will encounter with WAMP is that it will refuse to  import an SQL file.  Too big, it says.

Google this problem and you will learn that it is down to phpmyadmin and that there are three possible ways forward.

  1.  Adjust our php.ini settings to allow a larger file
  2. Use the command prompt to run mysql.exe commands
  3. Edit the .sql file

There is a fourth way forward that is so much simpler.  Hat-tip to this UK web developer.

  1. Go to c:/wamp/apps/phpadmin3.5.2
  2. Make a new subfolder called ‘upload’
  3. Edit config.inc.php to find and update this line: $cfg[‘UploadDir’] = ‘upload’

Now when you import a database, you will given a drop-down list with all the files in this directory.  Chose the file you want and you are done.

Note though, that you only set up this procedure once – at the time you set up WAMP.  So you will forget this procedure!  That is why I have put it on my blog.

Another note to myself – if I have not checked rewrite_module in Apached modules, I should do so now. That is the other modification to the standard install of WAMP that gets forgotten.

 

 

One Comment

7 steps to align your website with your business strategy or professional policy

Let’s imagine a professional person who wants a website, because these days we need a website, but who also wants the website to pay for itself – not only to recover the paltry fees for domain name and hosting charges – but also by becoming a useful part of their business.

What should go onto the professional’s website and how should they construct it?

Listed below are 7 considerations, none of which are specific to any one content management system (CMS) or framework though all consistent with Drupal, which is the framework that I am using a lot of these days.

#1 Domain name or url

Your domain name will be something like www.jojordan.org.

  • You will see there that I have used the name that I expect people would use if they were searching for me. You might also use the name of your business.  The principles here are
    • List the names that people might use to search for you and rather go bigger than go smaller. That is, try to include the smallest possible name in a bigger phrase than abbreviate a larger phrase into something meaningless.  Your goal is to have the “phrase” that you wish to be associated with you in your domain name in “black and white” so to speak. Why?  Because people want to find you; and because computers are rather stupid. They are looking for the phrase that people put into the search bar.
    • Also, note that I used .org as my extension. What is the best extension to use?
      • Convention is extremely important in naming.  The top level domain (TLD) begins with extensions such as .com, .org, .edu, .gov, .net These extension are the default for organizations based in the USA but are also to signify a global business.
      • .com suggest business or core.  .net suggests community. .org is something in between and is less popular than .com.  I used .com simply because jojordan.com was already taken and I didn’t want to buy it. So I settled for second best and .org seemed ok to me for what is really a “CV” or “resume” site – that is, for information and not for trading.
      • For my company, I really wanted a .com extension so I expanded the name of the site from Rooi to rooiventures.com
      • Many businesses want to be identified with a particular country. They will then prefer to use a country signifier such as .co.uk
      • New TLDs are coming out now and it is possible to book for a name such as www.outof.africa
      • To find out if a domain name is taken, try looking it up on a service like Domainr
      • You will also see that my name is preceded by the well-known www, though I am going to be asked later whether I want http://jojordan.org to resolve to http://www.jojordan.orgor the reverse.  The principles here are
        • To make sure that your website is set up to resolve to both versions
        • To make sure that one resolves to the other – I believe Google frowns on both being valid as that duplicates content and makes a headache for their spiders (if this is true, they will exact revenge by dropping you down their page rankings – or put another way, punish people who try to scam the rankings by publishing the same thing twice)
        • Simply make a choice and remember to check that your website is set up correctly.  In practice, you will not see the difference but the ranking spiders will
        • Find out where to buy your Domain name. Domainr will probably tell you but if you live in an out-of-the-way place, you might need to visit an office rather than simply make the purchase on line (oh yes, been there and done that).
        • Names are rented rather than bought and must be paid for annually or biannually – put the next payment in your diary! And keep the receipts – they are business costs and at least you don’t pay tax on them

#2 Set up a holding page

While you get your website sorted out, you can make that domain name work for you and start to acquire some experience in website management.

Set up a simple one page website using a contact form so that people can email you.

These are the issues you will be thinking about now.

  • Where will you host your site?  You want the hosting service to be cheap because nothing much is happening right now and you don’t want to be locked in to a long-term contract.
  • Your hosting site can be anywhere in the world but check that their server is in the same timezone as most of your customers. I have had a hosting service take my site down in the middle of the UK working day “for maintenance”.
  • Check that you can log into their cPanel and use phpAdmin to manage your site.
  • Initially, pick a host who offers one-click installs of WordPress or Drupal.
  • Make a MySQL database that will hold your website (I know there is not much in it right now but you are getting practice into the whole process)
  • Install WordPress or Drupal into it (takes 5 minutes)
  • Get some anti-spam set up (Akismet for WordPress and Mollam for Drupal)
  • Theme your site a little (download a free theme)
  • Add some basic information about who you are and a message saying “coming soon”
  • Set up a contact form and make sure the anti-spam is operating
  • For practice, set the backups so that you can import the content of your database (just about nothing right now) into a clean database, anytime, anywhere
  • Also zip and copy all the WordPress or Drupal files and have them emailed to you regularly so you can simply unzip them next to a refreshed database, point them to the database and have your site back running in minutes
  • Pick up the DNS server numbers from your host and go to the computer where you bought your domain name. Insert the numbers against your domain name so the domain name server (the place you buy names) points to the host (where your website sits physically)
  • For sack of clarity, you are gathering usernames and passwords at an alarming rate. This is what should be in your notebook
    • Domain name, place you buy it, annual fee and renewal data
    • Your user name and password at the place you buy your domain name and the email address that you gave them
    • Your hosting service, their url, your package, its cost and when you pay
    • Your username and password to log into their website to pay your account and the email address that you gave them (they should email you when they need a payment)
    • You may use these names and passwords to get to their cPanel where you do things like set up your database but you might be given another set too!
    • Your username and password for your MySQL database and the name you gave to the database
    • Your username and password and name of the website that you set up – these will be the no 1 account for your website with admin rights.  You can use these to log on to your website online and do set up tasks that are done from inside the website – like setting up the contact page
    • Your username and password at the spam service (and email address). They will give you a number to insert into your website to connect the two.
    • You can also set up Google Analytics now.  This involves
      • setting up an account with Google Analytics using another set of username, password but not email if you logged in with a gmail account.
      • Getting a code
      • Going back to your website (which still has one page only), logging in, and inserting the code.
      • Adding an EU cookie alert if you  are in Europe or expect to do much business here
      • Why should you set up Google Alerts now?  More practice, but to remind you to start developing name recognition. Use your url on your name badge at conferences; add it to your emails; add it your business cards; add it when you leave a comment on other people’s blogs.  Then you watch your traffic at Google Alerts – not much at first but often very weird indeed.

#3 Consider the tone of your website

Initially, we tend to design our websites through touch-and-feel. We google the web for designs and themes and choose on the basis of I like this or a I don’t like that.

To think more about what you are doing, consider the relationship that you will have with your users.

  • Are you going to be a chatty host being pleasant and nice and encouraging people to linger and leave comments to which you will reply?
  • Are you the organiser which draws people into a set of activities designed to move them from noobe to recognised expert in a specific community?
  • Are you a mentor recognising a community brought together by common values and interests?

Your relationship with your users will set your tone; your content will determine your design (colours and layout); and the activities on your site will inform the activity on your site and it’s underlying structure.

At this stage, you might rethink your “coming soon” page?  Now you are no longer befuddled by the internet plumbing, you can think about whether the tone of the page reflects your relationship; whether the look reflects your users; and whether the sign-up reflects your purpose.

For example, a more commercial site might allow send users a voucher to redeem in store; an organising site might send out emails in response to repeated logins to gain some kind of “level” while you get set up; and a community site might request your users to send you notices of events in their areas, or links to articles they have written, which you could share by email to all your users.

From the outside, your website is part of the relationship you have users and as you meet users in real life, you invite and involve them in this community.

#4 Basic services on your website

As you start to build your website, you will initially add some very basic services.

  • Add a privacy statement.
    • I have put the privacy statement here because Google cares.  Decide how you will look after the names and addresses, and for that matter, information about what people read and look at, and write a clear policy.  Put the policy in a “page”.  Later you will probably add a link in footer to this page.
    • Note that you might also be obliged by the law where you live to add something like an EU cookie pop up and to register with Data Protection.
    • Think it out now – these are your customers and you want to look after them from outset.
    • Add some basic information about your commercial operation
      • On another page, add the official name of your business, its registered address, its trading address, its company number if it has one, its VAT number if it has one
      • Your customers need to know whom they are trading with and what codes of conduct you have signed up to (Companies Act, Tax, etc).  You can assume your customers are knowledgeable and know what to look for but in brief – how do they contact you about formal matters?
      • How do your customers reach you to buy?
        • If you are a restaurant, where are you? Where can people park? When are you open?  What are your opening hours?  What do your customers want to know?
        • If your customers come to you, add a Google map.  You can add a printable version but don’t put in a bad map when Google can supply something better than they can use to check directions and transport.
        • Put some markers in for where your entrance is and where the parking is?
        • How do disabled people get to your front door?
        • How can people telephone you?
        • And even what can people email you about?  What do you promise to reply to?
        • Career advice
          • Do you employ people? And if so, who might want to work for you?
          • Do you work with people?
          • What is your advice for people getting started?
          • Bookings
            • What would you like people to buy from you?
            • In some businesses , this is an easy question to answer – in others less easy
            • Start at the end of the sale chain and think about what the final “order” will look like.  You may not be able to put that online, but looking at it and imaging it like a restaurant booking or a book purchase on Amazon will help you see how to structure your site.
            • For example, let’s imagine that you offer language tuition. You don’t have many students, but you imagine that some people sit at home and contemplate whether or not to buy your service.
              • You could put a list of times (and seasons, e.g., school holidays) when you do and do not offer  language services
              • You could put a list of “modules” e.g., travelling to X for the first time, going to a formal dinner, greeting your hosts
              • You don’t necessarily have to put up prices right now – just get started
  • If the purchasing of your services is very complicated, then you might like to start to educate your customers
    • For example, I learn Chinese and it would be helpful to put up some goals such as Level 1: Learn to speak 50 words in simple phrases like Hello and Goodbye, learn to recognise the phrases in Chinese characters and pin yin, and learn to write the characters.  Be able to show Chinese speaker you are willing to learn and be prepared to continue to Level 2 when you are ready
    • I am “showing” what the customer needs to think about to make their decision and when they are ready, they will come back.

#5 Putting together a fuller site

By now, you will have decided on a theme and you are probably using a free theme for WordPress or Drupal.  At this stage you are probably thinking about colour and fonts, mostly.

You will also have these pages ready –

  • A privacy policy
  • A formal business information page
  • The how to get to you which might be married with your contact form
  • Some basic pages about your services

You might also have some email traffic already and be checking Google Alerts and storing away your backups.

You can install your theme and add pages very easily.  Remember to keep your spam filter active!

You might also find your About page very easy to write now.  It does not need to be much but it should state clearly who you are. People don’t like dealing with Anonymous people on the internet.  Something brief and to the point much as you would say over the telephone if you telephoned a potential customer out-of-the-blue

#6 Social Media

You have probably heard the phrase social media or Web 2.0.  Web 2.0 is the web that “answers back”. So far, we have been using Web 1.0.  People can talk to you but they have to switch to email, or to the post, or the phone or Voice-over-internet like Skype.

We have also set up “pages”, that is, static content that does not change very much from one month to the next.  Moreover, when the content on the page does change, you take the page down the way you would rip off an old notice on a noticeboard and replace it with another.

Even on a page though, you can set “comments” as “on”.  I wouldn’t, as these pages are for information.  I would add a link and encourage people to email you.

But people like to comment for three reasons.  They have got used to commenting liberally on Facebook and Twitter.  They want their comment to be public for whatever reason (you may not appreciate the reason but that is another matter). And they leave the name of their own website – not only that others can see it but that Google can see it. Google moves sites up the ranking if they have lots of links to other websites.  So, many of the comments will but outright spam, and Google will penalize you if you don’t clean them up, but the links to real websites will boost your rankings.  Both commentator and host win.

Rather than use your ‘pages’ to move to Web 2.0, it is now time to activate a blog.  Your blog might look like a “page” but it is actually a pile of “posts”, ordered by date with the most recent on top.  It is here that you add information for your readers – remembering the relationship with them that you thought about in Step #3.

Look here at the lovely curation by Ilkut Terzioglu who does not write on about all the technical things he deals with daily. Here he adds visual and graphic things that he values and that will be interesting to his readers who also appreciate the visual and the graphic and the socially interesting.

In a sense, a blog is a newsletter but in nature of a feature column in newspaper. It becomes a resource for readers.

Web2.0 comes in because the top post of your blog changes often.  The others remain on your site but the top one changes. Google likes to see this.  Blogs almost always have their comments “open”.

And the blog should have an RSS feed set up (Really Simple Syndication). Basically, you should see an RSS button in your browser when you look at your url, or somewhere on your page.  Your readers should be able to pick up the url for your RSS feed and put it into a feed reader.  Why do we have this?  If we log on to our feed reader, it pulls the latest blogs from all the places we visit into one place and we don’t have to visit all these other places.  Actually, feed readers are going out of fashion (Google is shutting their service) and you encourage your readers to sign up for a copy of your blog by email but be careful to add an unsubscribe button so they can tell you to stop sending copies programmatically.

You can also use RSS to pipe your blog to other websites, like Linkedin, if you wish – don’t overdo it though.

As a last Web 2.0 measure, consider where you want your material to be advertised. Do you want links to Facebook , Linkedin andTwitter?  Do you want people to email your copy to others?  Do you want people to print easily?

Think through what your readers want to use your material for and make life easy for them?

And then think through the content of your blog.   What do you work on a daily or weekly basis that is useful to them?  If you are running a consumer type service, what information is helpful to them?  If you are helping people level up, what is most interesting to them?  If you are mentoring a shared community, are expert articles – written by yourself or others – what they want?  Ilkut’s visual blog is that – material shared with people who have the same values.  The key words here are “share” and “value”.

#7 Commercialise your site

Finally, we get to the nub of the matter.  Is this website part of your business or just a giant drain on your resources.

I hope that so far you see the value – your customers can find you, they can find out essential information such as your address, and the uninitiated can start to learn the basics – when are you open? What do they start to think about when they use a service such as yours?  You should be recouping your costs with these activities alone.

Commercialising your site is the big step up and to bring your website into your business as a significant player, I suggest that you think this process out.

Imagine a completely naïve customer – they have not hired you or bought from you, or anyone like you, ever.  What is going through their minds?  What confusion and muddle are they experiencing and what basic signposts can you provide to help them understand what is available to them?  What are the basics to understanding your world?

And then think about the end of the process, which I encourage you to think about in Step #4.  If we call the the initial muddle of a complete novice is Stage #1 (for the customer) and signing the final purchase order/contract as Stage #7, then can we work out the intervening five stages that a customer goes through as they gain sufficient experience and understanding to buy from us.

This is the kind of exercise that we want to do practically rather than theoretically, and also the kind of exercise that we don’t want to jump into as you might try if you came to this paragraph first.  Though you don’t need to go through all the website set up that I have listed, working through step-by-step brings us gently to place where we can understand what a customer goes through when they buy a complicated service – as they transition from a newcomer to an expert consumer.

This is the bulk of the work to bringing your website into your business as a major player. From that point, you can make your website much more interesting.  You will also start to use Google Analytics with more verve, too.  GA will tell you where people are landing on your site.  If rank newbies are hitting content intended for people around Stage 5, you can expect them to bounce off your site.  And you might adjust your site but adding a clear path from 1 to 7 that appears on every single page.

It is here that you provide a very significant pre-sales service where customers learn what is available to them in this world to make their lives better; and how to set about learning more and becoming more involved.

Once you have got this far, then you will become more demanding of the CMS that you are using, be it WordPress or Drupal, and the whole business of running your Website will become much more interesting and rewarding – both task by task and sale by sale.

I hope this helps and that these 7 steps help you understand what is involved in running a website.  I hope you feel confident to set about developing a website and copying with the internet plumbing.

And above all, I hope you are able to develop fantastic websites that help people discover your world and to benefit from it in ways that benefit them and bring them economic advantage.

 

2 Comments

How to change the port numbers on WAMP and stop conflicts with a portable server

To install WAMP on your PC

What is WAMP?

WAMP stands for Windows Apache MySQL Php. 

·        Windows is your operating system.

·        Apache is a server that manages communications between computers on a network including the internet.  All websites reside on a server somewhere.

·         MySQL is a database to hold the contents of a website. A website is made up of two parts: its database and its programmes such as PHP

·        PHP is a programming language.  The language resides on the server and the website is written in PHP.

When do we use WAMP?

Anyone who develops websites, including their own blog, is likely to want to install WAMP on their computer.  If they don’t use Windows, then they will be looking for LAMP or MAMP.

WAMP is installed in folder on your C:/Wamp.

How do I use WAMP?

 To start WAMP up, you go to Start/All Programs/Start WAMP.  You may have to give it permission to bypass your firewall.

WAMP has a drop-down (or pop up menu).

You pick “local host” to see a list of websites residing on your WAMP.  Pick any of these and the website should appear in your browser (i.e., Firefox, Chrome, Internet Explorer, etc.)

Alternatively, you can go to your browser bar and type “localhost/mywebsite” [without the “”].  If you are a noobe, note that is an alternative to http://www.mywebsite.com.

If WAMP is running, and “mywebsite” exists, then mywebsite will open in your browser.

In short, you are running a private little internet on your computer and you can see your website in your own browser.

How do I install WAMP?

1.       Download the latest WAMP (first recall whether you have a 64 bit or an older 32 bit machine)

2.       Follow the instructions

3.       Have a look at the menu bar and see localhost, phpAdmin, Apache and MySQL.

Build a website

To build your first website, use WindowsExplorer to make a new folder in c:/wamp/www/mynewwebsite.

Check that you can see the folder when you use WAMP’s menu and choose localhost.  This folder is still empty and in two steps, you will download into it WordPress or Drupal, or whatever you are using.

First, make a new database for your website by going to phpAdmin.  Make a new database and then add yourself again with a new name and password (and name that is not root).  Give yourself all privileges.

Now you can download and install something like WordPress into your folder and when it asks for your database, give it your database name, your new user name and your password.

When you return to localhost and select mynewwebsite, you should see your website in your browser.

WAMP won’t run – port in conflict?

You very likely have Skype running on your computer as well.  Skype “listens” to the same port as WAMP but listens to another as well.

To resolve the conflict, open Skype and look for the technical settings. Uncheck “listen to port 80” and WAMP will work.

WAMP conflicts with another server on your computer?

You may be running ScholarWriter, for example, on Uniform Server and you will find you have to switch off UniformServer before you run WAMP, and vice versa.

You might also be running Maven with Eclipse to run UseCaseTool (uctool).  Maven is also a server. 

You might also have a GeoServer running!

You want WAMP to listen to its own distinct port and you also want MySQL to have its own port.  We will change the port in WAMP from 80 to 81 and in MySQL from 3306 to 3307.

We will accomplish these changes in this order.

1.       Edit Apache’s httpd.conf file

a.       Go to WAMP’s menu and select httpd.conf

b.      Use find to find localhost and change it to localhost:81

c.       Save

2.       Edit c:/wamp/wampmanager.tpl file so the WAMP menu points to localhost:81

a.       Find http://localhost and change it to http://htttp:localhost:81

b.      Three instances

c.       Save

3.       Edit MySQL my.ini file

a.       Go back to the menu and follow MySQL to my.ini

b.      Find 3306 and change it to 3307

c.       Save

4.       Edit the phpAdmin config.inc.php file to recognise the 3307 port

a.        Find the config.php file at c:/wamp/apps/phpadmin…/config.inc.php

b.      Edit out the first reference to localhost against verbose to leave ‘’ with nothing between them – I don’t know why but until I changed this I couldn’t go from the WAMP menu to phpAdmin

c.       Change the next reference to localhost to 127.0.0.1 – apparently if that remains as localhost, then the port defaults to 3306

d.      Change the port from ‘’ to ‘3307’

e.      Save

5.       Restart the WAMP server

a.       Shut down all services

b.      Exit

c.       Restart

d.      And test all the links in the menu

If all is well, you are now directed to both localhost:81 and localhost:81/phpAdmin where you can set up new databases.

Change the port settings on any existing websites

Note that if you already have made a database before you changed the port AND installed a website, then you must change the settings on the website. 

For each website, go to c:/wamp/www/websitename/sites/default/settings.php and edit these lines to match the port settings as follows

     ‘host’ => ‘localhost:81’

      ‘port’ => ‘3307’

Final test

Fire up another server, say a portable website and see if you are able to run two servers on the same PC.

And not least change your password

Your server resides behind your firewall and is not accessible from the internt.

But, just in case, change the password for the user ‘root’

1.       In PhpAdmin, change the password for user root under Privileges

2.       Go immediately back to the config.inc.php file and insert the same password in password.

3.       Reboot your WAMP and just in case you are exposed to the internet, no one should be able to connect to your MySQL without knowing your password.

At last, you should have WAMP running smoothly on port 81 and 3307 while other servers (and Skype) run on other ports.  I have deliberately left port 80 and 3306 clear for a portable server that so the defaults are used for users who are likely to have the greatest disinterest in tweaking their system!

13 Comments