From server to surfer: anatomy of a website

You don’t need to understand technology to grok understand social media, but frankly, it sometimes helps. Or at least a basic grounding in how AJAX is different from PHP, and why CSS won’t sort out your SQL will help you to follow what a developer is on about and whether they are likely to be telling the truth when they blame X for screwing up your website.

So today: a bit of a break from the usual applied social media stuff – here’s my quick primer on what some of the main concepts are and how they relate to each other. I won’t even list the caveats: for a start, this only describes a handful of the relevant technologies out there, and I’m no expert in any of them – I’ve tried to be concise rather than accurate.

HTML: how it’s structured
HyperText Markup Language is in the middle of my ‘spectrum’ but a good place to start. HTML is the framework of a webpage, containing the content. It describes what the different parts of the page are – this bit’s a heading, this bit’s a list, this phrase is a link to another page etc. The ‘markup’ refers to the fact that it takes plain text and by wrapping certain phrases in tags, demonstrates to a web browser how that bit should be presented.

CSS: what it looks like
If HTML gives the structure, then Cascading Style Sheets describe the appearance. So when I say HTML tags demonstrate how something should be presented, that’s just the starting point. CSS lets you override the defaults and specify things like colours, fonts, borders and backgrounds, as well as radically altering the layout of a page. The fact that the leading web browsers tend to display the same CSS in different ways is both a charming thread in life’s rich tapestry and the reason why a web designer on a deadline should never be approached without body armour.

Javascript: how it behaves
Once loaded, a regular web page made of HTML and CSS will just sit there for you to read. Javascript transforms the page into something which responds in different ways when you click or drag something – like a Google map or a box that expands when you click on its title. Javascript is a ‘proper’ programming language, where the instructions are sent over the internet to your web browser and then run on your computer – also referred to as ‘client-side’. It can also change parts of the page automatically after loading, which makes it handy for things like widgets where you want to insert something from elsewhere into your page (it’s the J in AJAX, but that’s a whole other story). n.b. For extra pub quiz points: Javascript has virtually nothing to do with Java.

XML: what it represents
Extensible Markup Language isn’t a feature of all websites, but’s its increasingly common – RSS feeds are a form of XML. It looks a lot like HTML but it does more than just describe the structure of a page; it describes what the information actually is. So, for example, an RSS feed denotes a list of items, each with a title, a link and a description – which gives enough information for machines elsewhere on the internet to process those items in meaningful ways (aka Semantic Web): displaying them as a list of news stories, for example.

PHP: how it’s processed
PHP (the acronym is meaningless, honestly) is another proper programming language, but unlike Javascript which runs within your web browser, PHP is ‘server side’ i.e. it runs on the web server and the results are sent to you over the interweb, normally as HTML. For example: you click a button on a web page, the information you’ve provided is sent to the server, a PHP script processes it (stores it in a database, sorts it in alphabetical order, emails it to somebody, whatever) and then sends you a result (maybe a confirmation page). Lots of other languages do the same thing: ASP.NET, Perl and Ruby on Rails to name a few.

SQL: the relationships between the data
Structured Query Language in flavours such as MySQL are database management tools. At one level, they provide commands for PHP or other script to send information to and from a database, like a user’s profile information or shopping cart contents. More profoundly, the way these databases are designed should reflect the relationships between real world concepts: searching your library’s online catalogue might involve looking in the ‘Authors’ table and returning a list of all the associated items in the ‘Book’ table along with one or more associated ‘Genres’ from another table.

Linux/Apache: the way requests are handled
Worth a mention are the operating systems and software which run the web servers on which the databases and scripts operate. On the open source side, there’s the Linux operating system (various flavours) on which people generally run the Apache web server software – a constantly-running program which handles requests for web pages from browsers, pieces together the appropriate HTML pages including running any scripts if necessary, and sends them back over the internet. The Microsoft equivalents would be Windows/IIS.

Hmmm, feels like I’ve oversimplified and overcomplicated it all in equal measure – there’s more to this technical writing lark than meets the eye. But hopefully if you’re involved in this space but aren’t especially technically minded (like the colleague whose initial query sparked this post), some of that might go some way to showing how it all fits together.