Category Archives: Introductory

Basic Overview

Browsers & HTML

Typically web pages are written in Hypertext Markup Language (HTML) which is a standardised coding system for tagging text files to instruct browsers how to display their content in terms of font, colour, and layout.  HTML often uses Cascading Style Sheets (CSS) which is a coding language that helps organise the style tags in a reusable format (i.e. a set of style tags is defined in one place but can be applied to content elements across the site).

Browsers can interpret and display HTML/CSS documents.  HTML documents can include JavaScript, which is a programming language used for more complex tasks.  Browsers can also display a range of other resource types like PDF documents and images.  Browser plugins can be installed to display additional specific resource types.  If the resource is not a type that the browser can display, it will open the dialogue for you to download the file onto your computer.

Browsers can be used to display an HTML file that is stored on your computer but usually your browser is sending requests over a network (the Internet or a local Intranet) to retrieve web pages or documents from a remote server, the host web-server.

Web Links & URLs

A web link is some text or a graphic displayed in a document or web page that you can click on to open another document or web page.  The link contains a URL (Universal Resource Locator) that is not displayed in the document or web page.  On some applications or browsers, the link URL is displayed while you have your mouse pointer over the link.  A URL for the home page of a website might look like this:

http://www.my-site.com

This comprises the protocol (http) and the host name (www.my-site.com).  The URL for a page other than the home page will include the page name like this:

http://www.my-site.com/my-page.html

If the website is organised in a folder structure on the host server, then the URL needs  to identify the folder that the page is in and so could look like this:

http://www.my-site.com/my-folder/my-page.html

Some web pages, like search pages, allow you to enter text that is processed and the result returned.  In this case the URL needs to include the search text:

http://www.my-site.com/my-folder/my-page.php?my-parameter=my-value

When you click on any such link, your browser sends a request to the host which responds with the requested resource for your browser to display.

Web Server

Your browser uses a URL to send a request for a document to the host web server.  If the requested document is HTML, the web server will return the HTML to the browser to display.  (This is a very simplified version of what happens; for example, it does not address caching which is the subject of another post).

Back to the Browser

Current versions of HTML and CSS are powerful enough to allow the web developer a great deal of freedom in their design.  JavaScript can be used to develop additional functionality within a web page.  You can develop almost anything in terms of the design and user interface that is presented to the user in a browser.  This is fine for web pages with a known fixed content, but it is not so good for dynamic content.

A good example of dynamic content is the results page you get when you do an Internet search.  Dynamic content requires processing that includes reading and writing to files or databases on the server.  Similarly Content Management Systems like WordPress, store page content (text, images, etc.) in a database.  The web page is a template that needs to retrieve content for display.  Giving the browser direct access to the server database or write access to server files would create a number of problems.

The main problem is that from the point of view of the server, the browser is not to be trusted.  While the HTML and JavaScript downloaded from the server might be written to ensure the integrity of how such functions are carried out, the server would have no way of knowing that requests were indeed coming from the downloaded page.  Other problems with doing all the processing on the browser would be the impact on the performance of the browser and the increased network traffic.

Browsers are excellent at displaying pages and that is really all they should be asked to do.  Processing for dynamic content and providing access to server resources is better handled on the server; and PHP provides this capability.

PHP & Databases

Hypertext Preprocessor (PHP) is a scripting language designed for web development.  When the web server gets the request for a document, it determines if the requested document is to be returned to the browser or if something else needs to happen first.  If the document is a PHP file, the server submits it to the PHP interpreter.  The PHP interpreter goes through the file, executing any PHP scripts it finds, and returns the output, which should be well formed HTML, to the web server which sends it back to the browser to display.

WordPress is written almost entirely in PHP and stores content and configuration data in a relational database.  For example, this post is not stored as a file; rather it is stored as data in the database.  When you browse to this page, WordPress uses PHP to retrieve the data from the database and construct the HTML web page.  You can use the View Source facility of your browser to see the HTML, CSS, and JavaScript that the WordPress PHP generates for this web page.

Caching

Consider a customer service desk:

A customer phones in with a request.  The customer service agent has no idea what the answer is and puts the customer on hold and phones the product support desk.  The product specialist has no idea what the answer is and puts the service desk on hold and phones the product technical department.  The technician has no idea what the answer is and puts the support desk on hold and get the manual out.

The manual provides the answer to the technician in complex technical terms.  The technician understands the complex technical terms and reconnects to the product support desk and tells the product specialist the answer in technical jargon.  The product specialist understands the technical jargon and reconnects to the support desk and tells customer service agent the answer in product jargon.  The customer service agent understands the product jargon and reconnects to the customer and tells the customer the answer in plain English.  The customer is happy with the answer but not with the time it took waiting on the phone.

If each person in the chain started to keep notes (a cache of information) on the different requests and their answers, they would not always have to phone through or check the manual to get the answer.  This speeds things up considerably.  However, if the product development team changes the product, the answers that have been noted down might now be out of date.

And so it is with data caching.  At each level the answer to a request can be stored to speed things up when the same request is made; but, there needs to be a mechanism to handle changes.  When visiting, or working on, a WordPress site, data is cached at a number of levels to reduce the amount of data being sent across the network and to reduce repeated processing.

Browser Cache

The cache that most of us are aware of is the browser cache on our own computer or laptop.

The browser cache is a temporary store of the files that were downloaded by the browser to display the website pages we have visited.  When you revisit the same page of a website, the browser sends a request to the web server.  This request includes details of the relevant files it already has in its cache.  The server uses this request to determine what files, if any, need to be downloaded to the browser for it to display the web page.

The next level of caching is handled by the server infrastructure where the website is hosted.  (There can be additional intermediate caching, for example, implemented on servers within an Internet Service Provider.)

Web Server

The web server receives the request from the browser and determines what files the browser needs.  WordPress files are always PHP files which the web server has to send to the PHP interpreter.  The PHP interpreter identifies and runs any PHP scripts and return HTML files for the requested web pages.  When you consider that PHP will often be running the same scripts to produce the same web pages, this is clearly not efficient.

HTTP Cache

To address this inefficiency, between the web server and the PHP interpreter is the HTTP cache.  The HTTP cache is either a WordPress page caching plugin or a server component.  The server component will be either a HTTP cache module of the web server itself, or an additional dedicated HTTP cache server like Varnish.

Generally speaking, the caching facility will check its cache to see if it has already responded to this request and if so, return the appropriate page.  If the response has not been cached, the request is made to PHP in the normal way and the response now cached as well as being returned to the web server.  The difference between using a plugin and a dedicated cache server, is that the plugin uses PHP to check the cache whereas the dedicated cache server can return cached request responses without using PHP at all.

If a requested page is not in the HTTP Cache, it is send to the PHP interpreter for processing.

Object Cache

Like many PHP web servers, WordPress stores its data in a database and used PHP scripts to run database queries to retrieve the data to process the request.  To reduce the overhead of repeating database queries, WordPress stores query results in its inbuilt Object Cache.  The WordPress Object Cache is created by a core WordPress PHP script so that while the PHP interpreter is processing the request, the Object Cache is in memory on the server.  This means that if WordPress identifies the same query, it can get the result directly from the Object Cache without reference to the database.

There are some aspects of the WordPress Object Cache that need to be borne in mind.  Core WordPress PHP makes use of the Object Cache by design whereas for plugins and themes to benefit they need to have be designed and developed to make use of the Object Cache through its API.  Another aspect is that cached data is held in memory only for the current request and will not be stored persistently across page loads unless you install a persistent caching plugin.

Getting Started

What is your new website for?

I know it sounds obvious, but before you start developing your website, it is a good idea to reflect on what you aim to achieve by having a website. This will help you work out what resources; time and money, you are prepared to invest, and is a first step in the overall design.

Setup WordPress

I am not going to go through the server setup process for WordPress.  There is plenty of information elsewhere on how to install WordPress and configure your server.  Setting up servers is usually done by your service provider or systems administrator.  Most service providers offer the facility to install WordPress through their control panel using a wizard.  If your provider does not offer this there is the WordPress Famous 5-Minute Installation which is a simple set of steps to get WordPress up and running.

Once WordPress is installed, your site will look like this, depending on the theme that was active in your installation.

WordPress is installed with a number of free themes and plugins.  Your service provider might also include their own additional plugins.  If your site is on the Internet, it is now active on your domain name (e.g. www.your-domain.com;  see Basic Overview for an overview).

You login to your WordPress site through the login page (e.g. www.your-domain.com/wp-login.php) using the name and password you chose when you installed WordPress.  Once logged in you will see the WordPress Dashboard.

 

 

Under Construction

If your site is on the Internet you might want to have a place holder displayed to the public while you work on your site.  I currently use the Under Construction Plugin by Web Factory ltd.  It is simple to use and does the job.  To do this you need to install the plugin.  Many plugins can be simply installed from the Plugins page of the dashboard.  Click Add New and then search for Under Construction Plugin.  Click Install and then click Activate and you are ready to set up your under construction page.  To set it up click on Settings on the plugin listing; or select Under Construction from the Dashboard Setting menu.

What is WordPress?

WordPress

WordPress is a website development tool with which you can define what is displayed in your website as well as how it is displayed.  It is also a Content Management System that keeps track of all of your website content (text, pictures, videos, etc.), providing version control, indexing, and other content management functions.

WordPress is the most widely used website creation tool in the world with more than 18 million active websites.  The next most common website creation tools are Adobe Dreamweaver & Joomla! each with about 2.5 million active websites.  The large number of active WordPress sites gives some assurance of the robustness of the core software.  It also means that there are plenty of WordPress web designers and developers able to help you with your site.

Open-Source

The core software and many of the themes and plugins for WordPress are Open-Source.  This means that rather than it being sold by an organisation for profit, it is developed by a community of individuals and organisations and freely distributed.  WordPress continues to be actively developed with improvements and extra functionality being released regularly.  You can download WordPress free from the WordPress webite.

Flexibility

There are thousands of themes and plugins that can be used with WordPress, many of which are open-source and free.  Broadly speaking, themes govern the layout of the website and plugins provide additional functionality.  This allows you to do almost anything in terms of the look and feel of the website and its functionality.  Furthermore, anyone with the necessary HTML, CSS, and PHP skills can make specific changes through editing their website theme.

Support

The online WordPress community is a fantastic resource.  There are countless people working with WordPress at all levels who are more than happy to help.  Often the problem you are struggling with has been faced by other people and the answer is already on the Internet.  You soon get good at writing Internet search queries that give you the answers you need!