About

mark.schofield.free.fr is my personal website for the display of my art to the public. It was created in 2000 and has been enriched over the years as I have added new work.

The art works are organized by galleries such as Space, Landscape and Still Life. Select a gallery by clicking on the link in the navigation pane. Select a work from the gallery by clicking on the image. This opens the image viewer that displays a full size image of the work together with a descriptive label.

mark.schofield.free.fr also serves as an electronic catalogue. A Search link in the footer opens the Catalogue Search page from which it is possible to select a subset of works from the catalogue by filtering on predefined search criteria such as category, medium, year, dimension or keyword.

Technical details

General

Techniques in web development are evolving continuously. I have followed these over the years and adopted the best in my website, while also trying to keep things simple and easy to maintain. This is the sixth version of my website.

Technology

  • XHTML and CSS
  • PHP programming (Free still uses PHP5 but I develop using PHP7, so my website is designed to be compatible with both)
  • XML and XPath
  • MySQL database
  • Apache web server

The XHTML pages are composed of a strict minimum of markup. The positioning of the markup is determined only by the CSS in the stylesheet. This allows the same markup to be used for both the mobile and desktop versions of the website, with only a change of stylesheet needed to switch from one version to the other.

The XHTML pages are generated from PHP code running on the web server. The PHP is object orientated to optimize both performance and ease of maintenance. The only code that runs on the browser is a small amount of Javascript used in the catalogue search function (where the selection of a search criterion dynamically updates the list of values to choose from). A database connection is used to store statistics on the works viewed in the catalogue, but the site will work perfectly well without it if for any reason the database is not available.

These considerations make for fast loading web pages and easy navigation through the site. Try it for yourself and see!

Design

The design is, like the code, reduced to a strict minimum. I want you to see the art, not the site. The main page is divided into four sections; a header, a footer, a navigation pane and a content pane. In the desktop version, the navigation pane is to the right and the content pane to the left. In the mobile version, the navigation pane is placed above the content pane to fit the reduced screen width. The content pane is fluid and the images will tile to fill the available space. The font is Swiss 721, which is modern and easy to read, even on a mobile device.

Architecture

mark.schofield.free.fr is based on a simple Model View Controller (MVC) framework provided by Baptiste Pesquet. I highly recommend his tutorial which explains in simple terms how to make use of an MVC architecture in order to simplify website development and maintenance.

Widgets

In the View, I make use of a library of widgets : self-contained, configurable, graphical components such as a navigation tree or a captioned image. The widget can be initialized with data from the Model and the Controller. The content of the widget is built dynamically using calls to the PHP Document Object Model (DOM). A call to the widget is used to obtain the XML markup which is then inserted into the View. This allows dynamic markup to be generated easily and avoids duplicating the same markup across several pages.

Catalogue

The catalogue is stored in an XML document called mark-schofield_artist_catalogue.xml. The catalogue is manipulated using PHP function calls to the DOM API. More complex queriers also make use of the XPath (XML Path) language.