Client Side Web Development

How web browsers work

The web browsers most of us use on a daily basis such as Internet Explorer or Firefox are very sophisticated computer programs which download and read source code documents written by the developer. The browser then interprets the source code in such a way as to display the web page in the manner intended by the designer and to provide any interactive functionality necessary for the page to function at the local level. What is meant by the term 'Local' in this context refers to the computer, smart phone or other device used by a person whilst surfing the internet.

What is a client

The programs used whilst interacting with the World Wide Web are known as 'Clients'. The web browser 'Internet Explorer 8' and the email program 'Outlook' are both client applications running on the local computer and interacting with a remote server, in the case of one to display web pages and the other to send and receive emails. Producing the source code scripts written for these local applications to download and interpret is known as Client Side web development.

Client side web development is subdivided into three areas: content, styling and dynamics.
Good web developers will address each of these three areas separately calling on a variety of scripting languages and perhaps the occasional embedded object such as Adobe Flash or Microsoft Silverlight.

HTML

Typically, the language used to structure content would be a variant of HTML or 'Hypertext Mark-up Language'. HTML was derived from the mark-up used by traditional print proof readers to annotate any corrections to a publication before it could be passed as ready for the printing presses. The functionality of HTML however is entirely different from the old proofing mark-up being wholly concerned with the structure of the content of a webpage.

The HTML structure of a page affects the way the page is displayed in a web browser by applying HTML tags to each of the elements of page content, for example the text you are reading at the moment is "paragraph" text and is set between an opening <p> tag and a closing </p> tag within the source code of this document. The large heading and the smaller sub-headings on this page are each contained within <h1></h1> and <h2></h2> tags respectively.

Although HTML is used to structure the web page and comes with a variety of pre-set styles it is not normally these HTML styles that are used to control the look and feel of the page. HTML default styles vary between different browsers and are neither reliable nor flexible enough to provide the developer with an accurate tool for reproducing the designer's vision on a web page.

CSS

'Cascading Style Sheets' commonly referred to as CSS is the technology used to control the visual display of a web page. Well constructed CSS provides cross-browser reliability and sufficient flexibility to apply virtually any visual design requirements to HTML pages. CSS styles are applied to individual HTML elements and instruct the browser on how to render these elements thus controlling how they appear to a viewer. One of the main advantages of CSS is the ability to store all styles in a single external 'style sheet' referenced by web pages at load time, enabling quick changes to display elements, as an example, changing the style of the Heading type 1 tag '<h1>' in the style sheet will apply to all occurrences of that type of HTML element on all pages that reference the style sheet throughout the entire website.

Javascript

To provide interactivity at the local, client-side level of a web page the most common technology in use at the moment is Javascript.

Javascript is a scripted computer language interpreted by almost all web browsers that do not have this facility expressly disabled. The scripts can be applied to individual elements within the HTML code and allow for simple animations such as image changes, button animations as well as facilitating interactivity detection such as mouse cursor / keyboard activity and controlling on page responses.

There are a number of Javascript extension libraries available for web developers which provide for a much greater degree of interactivity and allow more sophisticated animation techniques to be employed on web pages without using embedded applications such as Adobe Flash. JQuery and Mootools are the two most popular extension libraries and provide a range of powerful additions to the Javascript programmer's repertoire.