As I’m unable to upload anything very visual, I’ll just add some notes about the terminology you can use when discussing and analysing web pages. The technical terms are in bold.
People use the term “internet” interchangeably with “web” but – in its original form – the internet was the name for the global network of computers which forms the infrastructure of several different services: you probably know about the (world wide) web and electronic mail (email), but the internet is/was also used for file transfer (FTP), user groups, bulletin boards, etc. One of the characteristics of the development of the internet is that more and more of the services ended up using the web – so we use web services like Googlemail and Hotmail for email, and people tend to use web forums rather than bulletin boards and Usenet.
The world wide web (so far) has had three distinct phases.
- HTML phase, or Web 1.0. This is your basic, static, web, based on the Hypertext Markup Language originally specified by Tim Berners-Lee of CERN. Berners-Lee wanted to find a way for academics to share information and papers easily across the internet, so he proposed HTML. He also, crucially, gave it away rather than seeking to patent it, which is why the web started out free and has remained pretty much free, in spite of corporate America’s many attempts to monetize it.
- HTML is fairly easy to learn, and is a standard overseen by the W3C, the World Wide Web Consortium, which is the international body founded by Berners-Lee. W3C tries to develop HTML in an open, standards-based way, in spite of the many attempts by corporate America to make it closed and proprietary. HTML develops through different versions, which unfortunately take years to agree. This means that big, powerful companies like Microsoft, Adobe, and Apple, sometimes invent their own way of doing things, which clash.
- This can be a problem for web designers, some of whom don’t stick to the standards laid down by W3C. For example, Microsoft might invent a secure protocol suitable for online banking. This would be a good thing, but it would only be a “feature” of Internet Explorer, Microsoft’s web browser. This would mean that anyone wanting to use internet banking would have to use Internet Explorer, and not any of the other browsers – like the original Netscape Navigator, or Firefox, Camino, Safari, or Google Chrome.
- There are many parts of the internet which work well on some browsers but are broken on others. This is even true of so-called standards-based HTML, because each browser company is free to interpret the HTML standard in their own way. HTML has developed through several iterations. Currently under development is HTML 5, which may be years away from being finalised.
- The static web 1.0 was frustrating for a number of reasons.
- Control over colours was very limited to “web standard” colours, which were agreed by the industry – but there were only a few of them (called sRGB) (and anyway they didn’t look the same across browsers and computing platforms). HTML 4 currently only names 16 colours, which can be described using hexadecimal (hex) codes. You may see these codes if you ever look at the source (the HTML markup) for a web page. Red looks like this: #FF0000; navy blue looks like: #000080.
- You could only use the fonts that were installed on an end-users computer. Microsoft helpfully released a free set of “web fonts” in the mid-1990s (Georgia, Verdana, Trebuchet, Courier New, Comic Sans), but that’s a pretty limited set for a designer to work with. And one of them is Comic Sans.
- Workarounds had to be found to do things like display text in columns, or ensure that graphics remained in place. Tables was one way of doing this. Tables were originally meant to display data sets, but could be used to create an underlying grid.
- Cascading Style Sheets (CSS) was an early way of displaying more typographically rich web pages – offering designers more control over font placement and size. But they started to make the web more complicated to design (or code), and things got even more complicated when large corporates started to create pages that they wanted to update in real time. CSS is now an integral part of Web 2.0 – most web sites use a style sheet – and they are widely used in free blogging software like WordPress to create templates like this one.
- A recent addition to CSS, and a potential solution to the frustrations of web typography, is the ability to embed fonts into web pages, which would be downloaded by the end user when they load the site. Google has just released a selection of open source, embeddable fonts, and in conjunction with existing services like Typekit, the web could become more typographically rich. Not all browsers support embedded web fonts, however, which is one reason I had to abandon their use on this blog. Until the standard is widely adopted, you can’t be sure your readers are getting a good experience.
- Early web pages were static and remained fixed unless you went in and re-edited the page. What newspapers and retailers wanted was a way to communicate to their “back office” so that, say, a journalist could type up a “breaking news” story and it would appear instantly, or a retailer could change an image, add a new product to an inventory, or adjust pricing. This led to the kind of web design that connected the pretty “designed” end to the “back office” database. This required even more knowledge of coding and scripting, which eventually led to…
- The crucial feature of the AJAX web is that it supports more interactivity. So our web-using audience changes from being (passive) readers and customers to being bloggers, photo sharers, video uploaders, commenters, and so on.
- Any web site that allows you to have your own account, post your own content, and generally be a more active web user tends to be based on AJAX. And all of the important things that have happened on the internet in the last few years have been based on AJAX. Flickr, Facebook, WordPress/Blogger, Twitter, YouTube, etc. In order to remember your details, web sites typically send a small file to your computer which it reads when you connect to the site and loads your data. These files are called cookies. Cookies make the web more convenient to use, but they also invade your privacy.
- AJAX also means that web pages can be more dynamic, offering drop-downs, rollovers, popups, comment threads etc., but (at their best) without interfering with the display and use of the web page. So you should be able to view a photo gallery without having to wait for the WHOLE PAGE to load every time you move on. You will note that some web sites are better at this kind of thing than others.
- Tags and categories are part of the AJAX web. All content can be tagged, making it easier to find. Tags can be used by bloggers, photo sharers, video sharers, and newspapers to make content easy to find, categorise, and share. It allows software like Viewfinder to search Flickr for images which match certain concepts and ideas – which is how I build my slideshows.
- Some see tagging as the beginning of the so-called Semantic Web, which is a vision of the future, in which all data will be defined and therefore machines will be able to “read” it and process it. This could be used for serious scientific research, or abused by marketing companies. These are the kind of algorithms that help web sites and services make recommendations based on your buying habits, for example, or the buying habits of the people like you.
- The mobile web, or Web 3.0. Still in its fairly early stages of development, but this is the internet you see running on smartphones like Blackberry, iPhone, and those running Google’s Android operating system. Phones are small, with small screens, so the mobile web has to be optimised for all of that – and sometimes, it leaves the web browser and has its own application (or app). So you get your Twitter clients on your phone, your Flickr client, your Facebook client, and so on.
- The other thing about the mobile web is that its still arguing about Flash.
Flash is a technology originally developed by Macromedia and now owned by Adobe. Flash allows for fast-loading and scaleable vector graphics (see below), as well as richer typography. It also allows for dynamic, animated content, for embedded video, and a host of other rich media features. Unfortunately, it’s also a bit of a system and battery hog, and it can be a vector for viruses, and it can cause crashes. Apple won’t have it in the house, so the mobile web (for now) is the Flash-free web. Google are proposing the introduction of Flash in the next version of Android, however.
- Originally, the web used GIF (graphics interchange format) files, which were small (because you could reduce the number of colours they used), and could be animated. They could also have a transparent channel (an alpha channel), which means you could specify areas of the image (e.g. those bits that were white or black) to show the background beneath.
- There were also JPEG (Joint Photographic Expert Group) files, which are better for photos, and allowed compression to reduce the number of steps between shades of colour. JPEGS are still ubiquitous.
- PNG (portable network graphic) is another bitmap format, which allows for lossless compression (meaning that the quality of the original image is maintained), and also an alpha channel for transparency. They allow for smaller file sizes than GIF, but “cleaner” compressed images than JPEGs. Unfortunately, they’re not in wide use.
- SVG (Scaleable Vector Graphic) is a format used for illustrations and diagrams rather than for photography. A vector graphic is unlike a bitmap in that it is described using maths (points and curves) and can therefore be made bigger using multiplication with no loss of quality. SVG is an XML file format developed by the W3C (see above). They’re a good solution to the problem of scaling diagrams, except of course Microsoft won’t support them in Internet Explorer until the forthcoming Version 9.
- Flash is also a vector graphic format that allows for animation etc (see above).
Both GIF and JPEG are bitmap graphic formats, which means they are made up of pixels (dots) and are therefore hard to scale – because there are only so many dots.