The World Wide Web

The World Wide Web
Source: www.bordalierinstitute.com
Visual representation of
the World Wide Web

The World Wide Web has grown exponentially at an extremely rapid rate since 1990 when its inventor, Tim Berners-Lee, implemented the first successful communication between a Hypertext Transfer Protocol (HTTP) client and server via the Internet.

Many people assume the Internet and the World Wide Web are one and the same thing. The Internet is actually the global system of interconnected computer networks that use the TCP/IP Internet protocol suite to serve billions of users worldwide. The World Wide Web is just one application on the Internet. Other applications on the Internet include email, Voice over IP (VoIP) e.g. Skype, Instant Messaging and Google Earth. Many of these other applications though have Web interfaces.

In its early days, the Web only consisted of content for end-users to passively view. It wasn’t long before eCommerce websites enabled the buying and selling of products and services over the Internet. Then, in the early 2000’s, new Web applications which facilitated greater user participation, interaction and information over the Web saw the introduction of user-generated content and virtual communities formed in social media sites, blogs, wikis and other interactive websites. By 2003, this new era in the history of the Web become popularly known as Web 2.0.

The Internet, in its early days, was primarily a network of mainframe computers serving desktop and laptop computers, but with advancements in technology and wireless communication it has grown to include many mobile devices such as smartphones and tablet computers. More recently developed operating systems, such as Google’s Linux-based Android OS and Apple’s Unix-based iOS, have enabled mobile devices to support a range of mobile applications. Commonly referred to as apps, they can be downloaded from the owners of the operating systems (i.e. Google, Apple, BlackBerry) and include a wide range of gaming applications and service applications. There are apps for banking, booking, location-based finding, order-tracking and a host of other services.

Cloud Computing
Source: www.cgarchitect.com
Cloud computing enables centralised
data to be shared globally

The most recent major development in the use of the Internet and the Web is Cloud Computing, whereby software, data and other electronic resources that are usually stored on an enterprise’s LAN server or, for an individual, on their PC or other personal device, are instead stored remotely ‘on the cloud’, being a server on the Internet. End users access cloud based applications through a Web browser or other user interface software and share the resources stored ‘on the cloud’ with other users.

Cloud computing effectively packages multiple IT components into a single, optimised computing solution, centralising the management of IT resources. It is mostly used by large international enterprises having offices all over the world. Applications run faster ‘on the cloud’ and two or more end users can work on a single document at the same time.

In the realm of personal computing, cloud computing enables all personal content to be accessed across all personal devices. Apple’s iCloud, for example, enables users to take a photo on their iPhone and have it automatically and instantly appear on their iPad, or download a song on their iPad and have it instantly accessible from their iPod.

HTML

HyperText Mark-up Language (HTML) is used to describe a web document’s structure and content. It is not a programming language or formatting language. Rather, it is simple text that uses mark-up codes to indicate the logical ‘elements’ in the document, such as headings, paragraphs, tables and images. HTML elements are the basic building-blocks of webpages. Web browsers interpret mark-up codes and render or display mark-up elements as ‘marked’.

HTML uses tags to mark-up elements. Tags are enclosed in angle brackets and most commonly come in pairs, such as <title>....</title> which fully enclose the element’s contents. However some HTML elements, such as images, use only a single tag and are therefore referred to as empty elements.

A level 1 heading: <h1>Web Development</h1>

An image: <img id="logo" src="images/MyLogo.png" height ="60" width="100" alt="Logo" title="MyLogo" />

Basic HTML Exercise

The image below shows the basic structure for HTML documents; having head and body tags within html tags. Right-click on this image and select 'Save Link As..' or 'Save Target As..' to download a basic HTML file containing this html mark-up code. Save the file wherever you choose (e.g. on your desktop) then right-click this file and choose 'Open With > Notepad'. You will notice this document is a simple text file which contains a title within the head of the document and a heading 1, heading 2 and paragraph within the body of the document. You can edit the content of these HTML elements as you please. The next time you open the file it should open in your default web browser and display the text you have edited. Note the title text appears within the browser window's tab.

A basic html page
Logical and Physical Mark-up

In HTML there is both logical and physical mark-up. Logical mark-up includes structural and semantic mark-up while physical mark-up tells us how the document is to be styled when presented. Examples of physical mark-up include <b>bold text</b> and <i>italic text</i>.

Logical mark-up elements, such as headings and paragraphs, are block-level elements which the browser presents with line breaks to separate them visually from other elements. Physical mark-up elements are generally inline elements which occur inside block-level elements and do not introduce any visual breaks.

It is generally considered best practice to separate presentation mark-up (physical) from structural mark-up (logical) by using a separate language, know as CSS, for all styling of HTML elements.

CSS

Cascading Style Sheets (CSS) is a style description language that uses style rules, selectors and properties to apply styling to HTML elements for presentation in a webpage. Web browsers interpret CSS along with HTML when rendering a webpage.

CSS can be embedded within the head of an HTML page or style can be inline within html tags. However, the best practice is to write all CSS style descriptions within a separate external style sheet and link to this style sheet within the HTML pages. This enables styles described in the style sheet for particular element types, such as headings, to apply to all elements of that type within every HTML page of the web site.

<head>

<link rel=“stylesheet” type=“text/css” title=“My Style” href=“mystyle.css” />   /* Link to an external style sheet */

<style type=”text/css” media=”screen”>   /* Embedded style sheet */

/* Style rules in this section here */

</style>

</head>

/* Inline Style */   <h2 style=”color: red; border: solid;”>A Grand Heading</h2>   /* Avoid using inline style */

Style rules for heading 1’s, heading 2’s, paragraphs and anchor hypertext links:

h1{ text-align: center; font: bold 40pt times new roman, serif; color: #0000ff;}   /* blue */

h2{ text-align: left; font: bold 30pt times new roman, serif; color: #0000ff;}   /* blue */

p { text-align: left; font: normal 11pt arial, sans-serif;}   /* black */

a:link {color: #009900;}   /* green */

a:visited {color: #0000ff;}   /* blue */

a:hover {color: #ff0000;}   /* red */

a:active {color: #ffff00;}   /* yelllow */

When all style rules for a web page are within a single external CSS style sheet, changing the references to another CSS style sheet can instantly change the styles of elements throughout the web page. Select the Default Style option or Alternative Style option below to change this web page's style sheet reference.

Default Style                 Alternative Style

XML

XML (eXtensible Mark-up Language) is a simple, flexible meta-language from which other mark-ups can be created. An ISO compliant Standard Generalised Mark-up Language (SGML) that is applicable to a wide range of applications, XML defines a set of rules for encoding documents in a format that is both human readable and machine understandable. Platform independent, it is widely used for marking up a variety of structured data, such as Scalar Vector Graphics, Maths Mark-up and Geographical Mark-up. XML is also used to enable electronic document data exchange over the internet through web services.

When XML is used for a particular project or task it is called an ‘XML application’. Example XML applications include:

  • XHTML – an XML application of HTML
  • SGV – an XML application of Scalar Vector Graphics
  • RSS – an XML application of syndicated channel items
  • KML / GML – an XML application for geography

XHTML has the same elements and attributes as HTML but conforms to the syntax and rules of XML. Unlike HTML, which is just hypertext that cannot be extended, XHTML is extensible, enabling other XML based markup languages to be mixed with it, such as SVG and KML (Keyhole Markup Language) used in Google Maps.

Documents can be marked up with a set of XML tags of a person’s own devising which allow semantics to describe hierarchical data, enabling such data to be searched and utilised in XML applications. A great example of a website that uses XML is ‘The Proceedings of the Old Bailey, 1674-1913’. In this site, court case proceedings have been marked up using XML to identify persons, places, offences, victims and so on, enabling detailed search results. Any of the search results pages can be viewed as XML. Here is just one example:
http://www.oldbaileyonline.org/browse.jsp?foo=bar&path=sessionsPapers/16940711.xml&div=f16940711-1&xml=yes

Client/Server Architecture

A system consisting of a client and a server is known as a two-tier system. A client (“front-end”) presents the interface (Web browser) to the user while the server (“back-end”) is responsible for data storage and management.

The client gathers information from the user and submits it to the server. The server fulfils the request by managing the information submitted by the client or sending back information requested by the client. Upon receiving the requested information, the client formats and presents the results to the user.

In a three-tier (or multi-tier) client/server architecture, a middle processing tier handles the interaction between the Web browser client and the data storage tier. This processing tier performs necessary processing or calculations based on the request from the client tier and handles the return of any information to the client tier.

Three-tier Client/Server Architecture
Source: Swinburne University
Three-tier Client/Server Architecture

Client-side scripting is a language that runs on a local browser (on the client tier) to create dynamic web pages and handle user-interface processing and light processing, such as data validation. JavaScript is an example of client-side scripting.

Server-side scripting is a language that is executed from a Web server to handle more intensive processing and data storage for interactive Web sites. PHP is an example of server-side scripting.

JavaScript

JavaScript is a dynamic scripting language that is primarily used on the client-side but can also be used for server-side web applications. Both procedural and object based, it is generally used for short, specific tasks to provide enhanced user interfaces and dynamic websites. Utilising the DOM (Document Object Model), which is a platform and language independent interface, JavaScript is able to access web documents to dynamically update their content, structure or style. JavaScript scripting can be embedded within HTML documents or written within separate JScript files linked to HTML documents.

On the client-side, JavaScript is interpreted by a Web browser when the page is loaded. This site uses JavaScript to cycle through images (see ArcMap and Aimsun images), switch between CSS style sheets (see under CSS) and provide the current age of my twin sons Thomas and Oliver who were born on the 21st January 2009 and today are JavaScript can also be used client-side to load and validate data within user input forms.

AJAX (Asynchronous JavaScript and XML) is a client-side use of JavaScript with XMLHttpRequest objects to provide a method for sending data to, and retrieving data from, a server. This client-server data exchange is performed asynchronously (in the background) without interfering with the display and behaviour of an existing page such that the page does not require a full reload.

Cookie Monster Cartoon
Source: www.infocarnivore.com

JavaScript is also used to create and retrieve cookie values. Cookies are essentially text files containing string variables which a web site sends to an end-user’s browser. Saved on the end-user’s computer, cookies always contain the URL of the server from which they were sent. Whenever an end-user accesses a website, their browser makes HTTP requests to load the website pages. When doing this, browsers also check their cookie files. If a cookie’s URL matches that requested, data is sent to the URL server as part of the HTTP request. This data contains state information which usually includes the user’s identity and the time of their request. Typically, information on the user’s recent browsing history is also sent. Items selected in a shopping cart may also be sent. Cookies are not viruses, although they can be used by spyware to track users browsing activities. Most e-Commerce websites however use cookies without malicious intent, to determine user preferences and the number of visits by users to their site.

In recent times, faster JavaScript virtual machines and frameworks built upon them have increased the popularity of JavaScript for server-side web applications. The most notable of these frameworks is Node.js, which consists of Google Chrome's V8 JavaScript engine plus several built-in libraries. JavaScript is also used in applications that are not web-based, such as in PDF documents and desktop widgets.

Just for Fun

Change the date setting on your computer to 21st January for any year from 2010 onwards, clear your browser's cache then reload this page and see what happens!

PHP

PHP is a server-side scripting language that is executed from a web server to produce dynamic web pages. When interpreted by a Web server with a PHP processor module, the server generates the resulting Web page which it returns to the client browser. Unlike client-side scripting languages, such as JavaScript, PHP cannot manipulate a Web browser.

First developed in 1995, it was then referred to as Personal Home Page Tools (PHP Tools). It is now said to stand for ‘PHP: Hypertext Preprocessor’, a recursive acronym.

PHP scripting can be embedded into HTML or XHTML source documents. A Web page document containing PHP code, such as this web page, must have an extension of .php. The standard method for writing PHP code declaration blocks is to use the <?php and ?> script delimiters. For example:

<?php echo “Hello World!”; ?>

As an open source scripting language it is widely used, often as an alternative to Microsoft’s Active Server Pages (ASP). It has a wide range of functions and control structures which can be used to perform various types of processing such as complex calculations. PHP also has object-oriented programming capabilities which can be used to access many types of databases, such as MySQL, Oracle and Sybase, for data storage and retrieval.

Basic PHP Exercise

The following exercise demonstrates how PHP can be used to write data to a text file on a remote server through use of a user input form. When the form is submitted, it can GET or POST (in this case POST) data entered in the form to the website's server and write it to the text file, along with the date and time of submission, the user's IP address and whether that IP is the unique IP address of the user's client computer or the remote IP address of the proxy server through which they are connected to the internet. To see this for yourself, carry out the following steps in the form below:

  1. Select the initials of your first and last name from the list boxes.
  2. Click the ‘Submit’ button.
  3. Click the ‘Download’ button.*

* A left-click on the 'Download' button will open your text file within a new browser window. The name you gave your file will appear at the end of the URL address.
To download the actual text file, right-click the 'Download' button and select 'Save Link As..' or 'Save Target As..'.

  

Download button

Java

Java Coffee Cup Logo
Source: Sun Microsystems
The Java Coffee Cup Logo

Java is a general-purpose, class-based, object-oriented language. First released in 1995 by Sun Microsystems, it is now owned by Oracle. Its syntax style is similar to C and C++ and much of C# and VB.Net models Java. It is currently one of the most popular programming languages in use, particularly for client-server web applications but it is also used in a variety of non-web-based applications.

Specifically designed to have as few implementation dependencies as possible, Java is intended to let application developers write once and run anywhere, meaning that the code does not need to be recompiled to run on another platform. Java source code is compiled to byte code which is platform independent and the byte code is run on Java Virtual Machines (JVM). Different JVMs exist for different operating systems. Java is also a concurrent programming language which means it can execute multiple threads of code at the same time.

As an object-oriented language, objects are created from instances of classes. Essentially, classes are constructs of code containing attributes and methods that are used as a blueprint from which objects are instantiated. Classes usually represent real world objects, such as people, animals, buildings or possibly abstract things, such as a ‘shape’. Many objects can be instantiated from the one class. For example, an ‘animal’ class could be used to instantiate a ‘horse’ object and also a ‘dog’ object.

While programmers write their own classes for specific programs, many other classes can be called at run time from the Java Class Library which holds comprehensive sets of standard class libraries. Each of the standard class library ‘packages’ consists of a set of classes which contain reusable functions found in most operating systems. Dynamically loaded at run time, the standard class libraries provide the programmer with well-known sets of useful facilities and provide an abstract interface to tasks that would normally depend heavily on the hardware and operating system, such as accessing a network or files.

Each version of Java has its own API (Application Program Interface) and an online API Specification which describes the various library packages, along with the various classes, interfaces, exceptions and error handlers these packages contain. One such example is the Java 2 Platform Standard Edition 5.0 API Specification.