The Knowledge

(CSS) Three Is A Magic Number

Many popular visual effects that previously required background images and the use of your Favourite Graphics Editor (FGE or Photoshop for short), can now be done with CSS3 magic. Here is a quick overview of six crucial CSS3 features.

Before We Start: Browser support is an issue with these features. You'll need a decent, lets say 'modern' browser, such as a recent version of Chrome, Safari, Firefox or Internet Explorer 9/10. Even then they can be inconsistencies. I'll draw out some of the inconsistencies amongst 'modern' browser but am going to ignore older versions of IE as We Need to Talk About Internet Explorer.

Border Radius

Everyone loves a rounded corner. Steve Jobs was positively nuts about them. Set all four at once or pick them off individually.

/* add a basic border */
border: 2px solid #555;
/* all four */
border-radius: 10px;
/* top left only */
border-top-left-radius:10px;
Styled with border Radius

Values should be positive numbers. Bigger values are more curvy as what you are actually doing is setting the radius of the circle used to create the curve. Elements with higher widths and heights can take bigger values but eventually you can curve no more.

You can also apply two radii - horizontal first and vertical second to achieve other border effects.

/* add a basic border */
border: 2px solid #555;
/* all four */
border-radius: 4px 10px;
Styled with border Radius

As these features are not supported by all browsers we have the contentious issue of vendor prefixes. These are prefixes added to each property as a temporary stop gap until the standard is formalized. As such this can be a moveable feast. For border-radius we would need the following:

border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;

The Vendor prefixes are as follows:

Browser Layout Engine Vendor Prefix Example
Chrome Webkit -webkit- -webkit-animation-duration
Firefox Gecko -moz- -moz-column-count
Internet Explorer Trident -ms- -ms-background-position-x
Opera Presto -o- *
Safari Webkit -webkit- -webkit-animation-duration
* Opera adopting -webkit

For adding rounded corners to pre-IE9 versions of IE we need to talk about Internet Explorer.

Box Shadow

Now we have a border time for a shadow (once the providence of Photoshop).

box-shadow: 4px 4px 4px #555;

Results in:

Box Shadow

box-shadow: ['inset'], horizontal offset, vertical offset, [blur distance, spread distance,colour value]

box-shadow: inset 2px 2px 8px 8px #555 ;

Results in:

Box Shadow

Vendor prefixes would be:

border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;

Text Shadow

So shadows on boxes are okay but lets now have text shadow as well.

text-shadow: 2px 2px #fff;
Text Shadow

text-shadow: horizontal offset, vertical offset, [blur distance, spread distance,colour value]

More than one shadow can be added and when done subtly can look rather good.

.ts2 {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 20px;
	color: #E0C9A5;
	text-shadow: -1px -1px #fff, 1px 1px #333;
	padding:15px;
}
.ts3 {
	text-shadow: 1px 1px #fff, -1px -1px #444;
}

When the two classes above are applied to an element it results in:

Text Shadow

As text-shadow boasts good browser support no vendor prefixes are needed.

Warning: Time for a timely reminder. Support for these features is lacking in old school IE6, IE7 and IE8.

Gradients

Background gradients don't require a new CSS property but make use of the background property. Values can be either linear or radial with values dictating the colour, direction and strength of the gradient.

Syntax variables for linear and radial (and horizontal) gradients. There is also an issue that webkit based Safari prior to version 5.1 used a slightly different syntax to that now adopted.

  /* Safari 4+, Chrome */
  background: -webkit-gradient(linear, left top, left bottom, from(#ffff00), to(#ffffff));
  /* Chrome 10+, Safari 5.1+, iOS 5+ */
  background: -webkit-linear-gradient(top, #ffff00, #ffffff);
  /* Firefox 3.6-15 */
  background: -moz-linear-gradient(top, #ffff00, #ffffff);
  /* Opera 11.10-12.00 */
  background: -o-linear-gradient(top, #ffff00, #ffffff);
  /* Firefox 16+, IE10, Opera 12.50+ */
  background: linear-gradient(to bottom, #ffff00, #ffffff);
  /*  IE 10 */
  background: -ms-linear-gradient(top, #ffff00, #ffffff);
}

There are endless permutations of the gradient.

Check out the some of the great tools for generating gradients online:

Warning: IE9 does not support gradient. See We Need to Talk About Internet Explorer for workarounds.

Opacity

Give elements transparency with opacity. Takes values of 1 to 0 where 1 is opaque and 0 transparent. As such decimal values such as 0.5 and 0.75 are the order of the day.

opacity: 0.5;

RGBA

When we set colors in web design we use RGB - Red, Green, Blue.

... and we represent them as hexidecimal colours:

Red, Green, Blue

As any Photoshop user should know there is also something called Alpha. This represents the opacity of a colour known as it alpha channel. With CSS3 you can create colours with RGBA - the A been Alpha. Instead of using hexidecimal colour codes we values between 0-255 for the red, green the blue and then a value between 0 and 1 for alpha (as we did with opactiy).

Like gradients above this trick is used on the background property ie:

background:rgba(255,255,0,0.5);

So we can create layer effects by nesting elements and using RGBA values on the child elements as follows:

A RGBA Example

Don't forget We Need to Talk About Internet Explorer.

Three is a magic number.

We Need To Talk About Internet Explorer

IE don't you just love it? No probably not but unfortunately we still live in a web world dominated by Internet Explorer - Microsoft were just way too successful in getting their browser everywhere.

Here in the UK, Internet Explorer in all its different guises, still has the largest market share as calculated by statcounter. In August 2012 there were double the users of IE8 compared to Safari on the iPad.

That means you cannot ignore it. You must have a strategy for dealing with it.

HTML5

Pre IE9 versions of IE do not support HTML5. If you want to start you use HTML5 elements such a <nav>, <header> you can but beware.

Old IE versions will treat unknown elements (all HTML5 elements) as inline elements and it won't be able to style them. That means using the likes of <footer> and <nav> becomes problematic.

Help is at hand though.

However, a ‘fudge’ or ‘shim’ or ‘shiv’ has been made available by jQuery and Javascript wizard John Resig. Adding the following Javascript code to your pages will allow them to be styled.

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Here's a page pre-Shim and a page post-Shim (best viewed in IE8 - you don't hear that very often).

IE Conditional Comments

The above uses a feature of IE known as conditional comments. The lines that look like standard HTML comments are ignored by all browsers except IE that interpretes the conditional logic.

To detect Pre IE9 versions of IE we can use:

<!--[if lt IE 9]>
// detects running IE version less than (lt) 9
<![endif]-->

You can do other queries such as:

<!--[if IE 7]>
// detects running IE 7
<![endif]-->

or

<!--[if gte IE 8]>
// detects running IE version greater than or equal to 8
<![endif]-->

A full list of conditional comment syntax is available from Microsoft.

This gives you the opportunity to serve up different stylesheets to help deal with older versions of IE for example:

<!--[if IE 6]><link rel="stylesheet" type="text/css" href="/styles/style-ie6.css" /><![endif]-->
<!--[if IE 7]><link rel="stylesheet" type="text/css" href="/styles/style-ie7.css" /><![endif]-->
<!--[if IE 8]><link rel="stylesheet" type="text/css" href="/styles/style-ie8.css" /><![endif]-->
<!--[if IE]><link rel="stylesheet" type="text/css" href="/styles/style-ie.css" /><![endif]-->

Modernizr

As well as detecting which browser the user is running you can also detect which specific features are supported. This can be done through the rather nifty 'modernizr' javascript plugin.

Modernizr includes the 'shiv' for HTML5 and also adds 'feature-sniffing' to identify whether the browser supports various HTML5 and CSS3 features.

CSS3

I am going to consider the six CSS3 features covered here and see how we can try and use them in older versions of Internet Explorer.

The web community is a wonderful thing and as well as Modernizr we have been provided with PIEs. Progressive Internet Explorer is a polyfil* that will give us the suport for border-radius, box-shadow and gradients.

Working with PIE is well documented. Download the files and upload them to your server. I find it best to place them in your styles folder. The crucial one is pie.htc.

Border Radius with PIE

To create a border radius with CSS3 you would use:

#container{
     border-radius: 15px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    -o-border-radius: 15px;
    border-radius: 15px;
}

Old IE cannot cope with this. So to fix it with PIE change it to:

#container{
     border-radius: 15px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    -o-border-radius: 15px;
    behavior: url(styles/PIE.htc);
}

Two tips with PIE.

  1. The url to the htc file is relative to the document that calls the stylesheet NOT relative to the stylesheet.
  2. If the htc does not seem to work for you and your server supports php then use PIE.php instead.

Box Shadow with PIE

We have done the ground work above. Box shadow can be added in the same way by just adding the necessary CSS3 properties (don't forget your vendor options).

#container{
     box-shadow:0 0 7px 0 #999999;
    -moz-box-shadow:0 0 7px 0 #999999;
    -webkit-box-shadow:0 0 7px 0 #999999;
    -o-box-shadow:0 0 7px 0 #999999;
     border-radius: 15px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    -o-border-radius: 15px;
    behavior: url(pie-css/PIE.htc);
}

Here is a page polyfilled with PIE.

Box Shadow with Microsoft Filters

Who ate all the pies?

If you are pie-less then there is another solution to Box Shadow support.

Microsoft has its own propriety solution for a range of visual effects that can be applied through their CSS filter property.

The filter CSS property will be ignored by other browsers so is quite safe to use.

It should also be used with the Microsoft vendor prefix of -ms-filter for IE8 whilst earlier versions just use filter.

/* for IE8 */
-ms-filter:progid:DXImageTransform.Microsoft.Shadow(strength=4,direction=135,color='#999999');
/* for pre IE8 */
filter:progid:DXImageTransform.Microsoft.Shadow(strength=4,direction=135,color='#999999');

The syntax is a strange compared to the general elegance of CSS but it does work of a fashion.

The shadow takes values for the strength and colour. The direction value is in degrees 0° been straight up so a value of 135 is off set to the right.

Check the Microsoft documentation for other options.

Text Shadow with Microsoft Filters

Text Shadow is not tackled by PIE but we can use the same Microsoft shadow filter to achieve the same effect.

.myShadow{
-ms-filter:progid:DXImageTransform.Microsoft.Shadow(strength=2,direction=135,color='#ffffff');
filter:progid:DXImageTransform.Microsoft.Shadow(strength=2,direction=135,color='#ffffff');
*/ moderny way */
text-shadow: 2px 2px #ffffff;
}

The above would create a white shadow offset to the bottom right. However, this technique can look pretty ropey with small font sizes.

As such you may decide it is best not to attempt to style text in this way. Fair enough. There is even an intellectual justification, two in fact, you can use to cover yourself.

Excuses:

  1. Progressive Enhancement - If it looks good and is supported in the browser I'll use it. If not it is only decoration and not core.
  2. Graceful Degradation - As long as it can be read, I'll drop some decorative features from older browsers. Kind of the reverse of the Progressive Enhancement.

Gradients with Microsoft Filters

We can use Microsoft filters to add linear gradients.

.myGrad{
-ms-filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#ffff00',endColorStr='#ffffff');
filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#ffff00',endColorStr='#ffffff');
}

The above would create a vertical linear gradient yellow to white.

Opacity with Microsoft Filters

Opacity is again handled by a Microsoft filter. The filter is in this case Alpha and takes an opacity value as a percentage (remember the opacity property in CSS3 takes a value between 0 and 1).

.myOp{
-ms-filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
/* modern way */
opacity:0.5;
}

RGBA with Microsoft Filters

Finally we can again use the Gradient filter to create a fallback for RGBA backgrounds that can be used in CSS3.

There are a number of steps here. First use background-color to provide a solid background colour. We need to do this as pre-IE9 the likes of background:rgba(255,255,0,125) would just not be understood and as a result just ignored.

Secondly add in another background-color property setting it to a value of transparent

And finally use the Gradient filter to apply the alpha setting. You are hopefully used to seeing colours expressed hexidecimally ie #RRGGBB. Here we need to use the #AARRGGBB format, where AA is the alpha hexadecimal value. As a result a value of 00 would be transparent and a value of FF opaque.

To create a yellow fading background we would therefore need the following:

#container{
background-color: #ffff00;
background-color: transparent;
-ms-filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#7f0ffff00',endColorStr='#7fffff00');
filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#7fffff00',endColorStr='#7fffff00');
/* modern way */
background: rgba(255,255,0,0.5);
}

Fire up your old Granny's Vista laptop and take a look at this page. Should be styled (of sorts).

Don't worry IE10 will be out soon.

* Polyfils fix the holes missing in the application

EU Cookie Law - Cookie Consent Checker jQuery Plugin

EU law in its infinite wisdom now requires web sites to be explicit about Cookie usage.

I am not going to explore the legal rights or wrongs of these regulations. If you want more information see:

Any EU web users will by now have seen these "cookie consent" forms pop up on their favourite sites. To make it easier to add your own cookie consent checker I have put together a simple jQuery Plugin.

See the Demo.

Download the Files (zip).

How to use

In the ZIP you find everything you need.

1. Load jQuery and the 'cookieChecker.js' plugin file. ie:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="js/cookieChecker.js"></script>

2. Attach the plugin to the <body> tag.

You can do this at the bottom of the file before <body> like so:

</body>
$('body').cookieChecker();

Alternatively, if you prefer add a jQuery $(document).ready function to the <head> of the document like this:

<head>
<script>
$(document).ready(function(){
$('body').cookieChecker();
});
</script>
</head>

In either case attach the plugin to the <body> tag.

3. Change the Default Parameters

The plugin has the following optional parameters.

cookieName
Name of the cookie to be created - default name 'policyAgreed'
msgFile
The path to the HTML file to be used to hold the consent message. Create and style your own file or the edit the default 'js/cookieMsg.html'
duration
Length in years for cookie to persist - default name 3 years

For example:

$('body').cookieChecker({'cookieName':'myCookie','msgFile':'msg/myMessage.html','duration':1});
});

3. Customize the Message

To customize the message open the 'cookieMsg.html' file. Use the CSS file to format to taste.

Finally you should also put together your own cookie policy file outlining what cookies you have used. Here is an example I used.

Any comments, suggested improvements welcome.

Getting Starting with Google Maps

There is a Swansea but to get there you'll probably need a map ... a Google Map. So here are some quick examples to get you started.

All of the following use Google Maps Version 3.

Adding a Google Map means adding some Javascript to your page and accessing the Google Maps API.

Note: When the Google Maps API first appeared in 2005 it was free to use. In November 2011 Google introduced licensing for high volume users and this has lead some sites to jump ship to other mapping services in particular Openstreetmap.

Getting Started

We are aiming to produce this:

First thing you'll want to do is sign up with Google and get yourself an API key. Sign up to Google here.

Calling the API

Once you have a key, this is then used in your call to the Google Maps API as follows adding your key where I have put 'YOUR-KEY-HERE' :

<script type="text/javascript"
      src="http://maps.googleapis.com/maps/api/js?key=YOUR-KEY-HERE0&sensor=true">
</script>

The 'sensor' parameter above can be set to 'true' or 'false'. This indicates whether you wish to use the likes of GPS to determine the user's location - a feature of most mobile web browsers.

Warning: You must add a value for 'sensor'. It cannot be left blank. Your request to the API will fail if it is missed out.

Depending on your preference to managing your Javascript, the call to the API could go either in the <head> of your HTML or before the closing </body> in your HTML.

Creating a Placeholder

We now need to add some HTML to the web page that will act as the placeholder for the map. In most cases a <div> tag with an ID is the best approach. (You don't necessarily have to do this but you do need a targetable bit of HTML and this is as good a way as any).

<div id="myFirstMap">

</div>

Ensure that you styling gives the placeholder the dimensions you wish for your map.

<style type="text/css">
#myFirstMap{
			width:640px;
			height:480px;
			border:1px solid #FC0;
}
</style>

Setting Map Options

The Google Map API has a huge range of options that can be applied to your map. However, some of these aren't really 'optional' as for example you'll need to at least provide a latitude and longitude value to get a map!

These 'options' are declared in a Javascript object. Here is a basic example that includes a LatLng value, a zoom value and a map type.

var myOptions = {
          center: new google.maps.LatLng(53.3801, -1.4653),
          zoom: 16,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };

Creating the Map Object

To create the Map object itself we need to reference our placeholder and the options created above. I am using Javascript's getDocumentById here to reference the <div> of ID 'myFirstMap'

var map = new google.maps.Map(document.getElementById("myFirstMap"), myOptions);

The above is placed in a function with the options object as follows:

<script>
function initialize(){
	var myOptions = {
          center: new google.maps.LatLng(51.62437128841585, -3.9431847585819924),
          zoom: 16,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
     var myMap = new google.maps.Map(document.getElementById("myFirstMap"), myOptions);
      }
</script>

Firing the Code

The above function needs to be called when the document is ready. You could use jQuery here but I'll keep it in plain old Javascript for now.

We'll kick off the Javascript with an onload event against the <body> tag.

<body onload="initialize()">

You'll need to take a trip to the Google Maps documentation at some point but hopefully you can now find your way to Swansea.


Here are a few more pointers.

More on Options

The Google documentation is exhaustive (and exhausting). It helps if you have some grasp of basic programming jargon like classes, object, properties, methods and events . To help you on your way here are of some of the most popular map options set in the MapOptions object.

center
LatLng object from LatLng Class
zoom
0 full globe - higher numbers to zoom in ie 7, 18
mapTypeId
ROADMAP, SATELLITE, HYBRID, TERRAIN
mapTypeControl
Boolean disable/enable map type controls
panControl
Boolean disable/enable pan controls
streetViewControl
Boolean disable/enable street view controls
zoomControl
Boolean disable/enable zoom controls

In a code context these would look as follows:

function initialize(){
	var myOptions = {
          center: new google.maps.LatLng(51.62437128841585, -3.9431847585819924),
          zoom: 10,
          mapTypeId: google.maps.MapTypeId.HYBRID
          mapTypeControl: false,
          panControl: false,
          streetViewControl: false,
          zoomControl: false
};
var myMap = new google.maps.Map(document.getElementById("myFirstMap"), myOptions);
}

Markers

Markers or 'pins' are a crucial part of any map. They are created by declaring a marker object from the Marker class. When creating a marker object it can take a number of parameters passed to it as a MarkerOptions object. In the following example the marker is given a lat/lng, assigned to a map object, given a title and made draggable.

var myMarker = new google.maps.Marker(
  {position: myLatlng,
  map: myMap,
  title:"Hello World!",
  draggable: true}
  );

The Google documentation gives you the full range of possibilities.

InfoWindows

InfoWindows are the speech bubble effects that can be attached to markers. These are achieved through the InfoWindow class.

var myInfowindow = new google.maps.InfoWindow(
{content: "Hello World"}
);
myInfowindow.open(myMap,myMarker);

InfoWindows are often set to respond to user clicks. The Google API lists events associated with each type of object, so for example there are a list of events associated with markers. The following example uses the 'click' event to open an infoWindow when a marker is clicked.

google.maps.event.addListener(myMarker, 'click', function() {
myInfowindow.open(myMap,myMarker);
});

Get Position of Dropped Marker

You may have noticed above that we set the MarkerOptions 'draggable' to 'true'. We can use events to capture where the marker is dropped and find the latitude and longitude of that point.

google.maps.event.addListener(myMarker, 'dragend', function() {
document.getElementById('currentLatLng').innerHTML = marker.getPosition()
});

The above will send the lat/long value to a HTML element of ID 'currentLatLng' as you can see in the demo.

StreetView with the StreetViewPanorama Class

When Google introduced StreetView in 2007 it was of those 'wow - how did they do that - surely magic pixies' moments. The magic is all down to the StreetViewPanorama class.

This class takes as its constructor a StreetViewPanoramaOptions object.

The following are the key properties of the StreetViewPanoramaOptions class.

position
LatLng object
pov
StreetViewPov Object - heading, pitch, zoom
addressControl
Boolean disable/enable address control
scrollwheel
Boolean disable/enable scroll wheel zoom
zoomControl
Boolean disable/enable zoom controls

The StreetViewPanoramaOptions object can be created as follows:

var panoramaOptions = {
	position: sv,
	pov: {
	  heading: 0,
	  pitch: 0,
	  zoom: 1
	},
	addressControl: false
};

Once you set your options, these are used to create the streetview and attach it to a targeted element in the HTML. In this example I am using Javascript's getElementById to reference a HTML element of ID 'mySV'.

var panorama = new google.maps.StreetViewPanorama(document.getElementById("mySV"),panoramaOptions);

Geolocation

With HTML5 browsers comes the possibility of getting geolocation information via JavaScript. This information can then be feed back to a Google Map.

The following Javascript allows supporting browsers to retrieve geolocation data.

navigator.geolocation.getCurrentPosition(show_map);
function showMap(position)
{
console.info(position);
}

The following codes takes the 'position' data from the Geolocation API and passes it to a Google map.

navigator.geolocation.getCurrentPosition(showMap);

 function showMap(position)
 {
 var latitude = position.coords.latitude;
 var longitude = position.coords.longitude;
//uses jQuery to update an HTML element of ID 'whereAmI' with the latitude and longitude
 $('#whereAmI').append('<p>Your Latitude is: '+position.coords.latitude+
 ' Your Longitude is: '+position.coords.longitude+'</p>');
 var myLatLng = new google.maps.LatLng(latitude, longitude);
 var myOptions = {
          center: myLatLng,
          zoom: 16,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
 var myMap = new google.maps.Map(document.getElementById("myGeoMap"), myOptions);
 var myMarker = new google.maps.Marker({position: myLatLng, map: map, title:"You are Here", draggable: true});
}

You can find more about the Geolocation API at the following sites.

There you go - all mapped out for you now.

Postscript: This great post is useful if you intend to load the Google Maps API dynamically with jQuery's getScript()- http://lostmonocle.com/post/88217865/jquery-getscript-and-the-google-maps-api - thanks to Olly Hodgson.

Ten More Techie Terms

Following on from my Ten Techie Terms post here are some more jargon busting goodies.

1. Web Standards

Web Standards represents the holy grail for web designers/developers.  Essentially as web designers/developers we build web pages with a profusion of technologies.   The fruit of this hard labour is then viewed in a whole cacophony of environments.  Some kind of standardization to make this process less stressful is the goal of the web standards movement.  That is, to give web professionals a range of standardized, open technologies that can be used for the production of web content.  Key web standard technologies are HTML, CSS and Javascript.  A key organisation in the development of web standards is the World Wide Web Consortium commonly referred to as the W3C.

Comment: The W3C are not the be all and end all of web standards and have often found themselves reacting to developments rather than leading them.

2. Client Side Technologies

Client Side Technologies run on the .. er .. client. Yep, great so what is the client.  Lots of computing involves a client -> server relationship.  This takes the form of the server as a host for information.  The client requests information from this server.  In web technologies the server is a web server that hosts a web site and the client is the web browser used to request pages from the host/server.  Web browsers such as Chrome, Firefox, Internet Explorer, Opera and Safari are all classified as client side technologies.  Now the thing with client is that are all different.  We may have 'web standards' but each of these clients has its own interpretation of these standards.  In recent years adherence to web standards has improved dramatically but be careful you still need to do lots of client side testing of your client side technologies.

Therefore client side technologies are those that run in the client ie browser.    Those client side technologies are mainly involved in the display of the information retrieved from the server and they are the 'Big Three' of web technologies HTML, CSS and Javascript.

3. Server Side Technologies

So if client side technologies run in the client then, you guessed it, server side technologies run on the server.  That is your web server.  Web servers can have software installed on them as well as the server software itself.  These are known as server side technologies.  Most commonly these are used for producing content on the fly from databases.  That is using a backend database to provide the data used to construct the web pages.  To interrogate a database numerous server side technologies are available.  ASP.NET is a Microsoft technology, Coldfusion an Adobe technology and PHP an open source technology all of which pretty much do the same thing - query a database to retrieve data that is used as the content in a web page.  When looking for web hosting you will need to consider which server side technology you wish to use.  Given host packages are available including different server side technologies.  For example, a common host package is to offer PHP as the server side script and MySQL as the database back end.  This combination is so common that PHP/MySQL often appears as one long acronym whereas these are actually two unrelated technologies.

Tip:  You may well have noticed that all web pages don't have HTML file extensions.  We also have ASPX, PHP, CFM, JSP to name but a few.  These are all examples of server side scripts.  View source in your browser won't reveal any of the server side code as the processing is of course done on the server side.

4. SQL

Like John Travolta SQL has been around since the 1970s.  SQL stands for Structured Query Language and is a language used to create and query relational databases.  When you arrive at the point in your web development career that you need a database, it is in all likelihood to be a relational database that supports SQL such as MySQL, Microsoft's SQLServer or Oracle.  Therefore you will find yourself with another language to learn.  The good news is that SQL is relatively straight forward, some would say, almost verbatim in syntax.  When you set off to build your first PHP/ MySQL website get some SQL under your belt first.  W3Schools offer a good starting point.

Tip:  Pronounce SQL as "es queue elle" not as "see qwell".  Well that is my opinion anyway.

5. HTML5

Number 5 has got to be HTML5.  HTML5 is often used a catch all for the new generation of web standards technologies namely HTML5, CSS3 and Javascript (via some neat frameworks).  HTML requires a 'modern' browser such as IE9 or newer version of Chrome, Firefox, Opera or Safari.  HTML5 represents a not so quiet revolution in web technologies as it offers a whole new range of possibilities to designers and developers.  See the MustBeBuilt HTML5 section for some examples.  A headline feature of HTML5 is plugin-less video and audio something that previously required browser plugins such as Adobe Flash Player.

6. Browser Plugins

Plugins baby.  Browser plugins represent software used to extend the functionality of a browser.  This could be to play video such as QuickTime or to play games such as Adobe Flash.  Adobe's Flash Player is probably the most widely installed plugin.  The Flash plugin is commonly used for banner ads, video and games delivered through the web browser.  It is found on most users desktops but is notably missing from Apples IOS (iPhones, iPod, iPads) as I discuss here, there and everywhere.  The Flash Player is a free download from the Adobe site.  To create Flash content Adobe sell various applications such as Flash Professional, Flash Builder and Flash Catalyst.  Many other Adobe products such as InDesign, Photoshop and Bridge also have options for outputting content in the SWF format needed by the Flash Player.  Flash is regarded as a proprietary technology - ie it belongs to Adobe and is not part of an open standard like HTML, CSS, Javascript and the rest.  Many things previously the almost exclusive realm of Flash such as animations and video are now possible with HTML5 technologies - see above.

7. CMS - Content Management Systems

WordPress, Joomla, Drupal are all examples of Content Management Systems. These are browser based frontends that update and add web site content by managing a database behind the site.  This site is running WordPress.  WordPress is itself running on PHP and MySQL.  WordPress is the most popular of the CMS/Blogging softwares available with a billion trillion installs probably (citation needed).  Joking aside it is used for humble sites like this right through to behemoths like CNN.

8. Cookies

The cause of a storm in a tea cup when they first appeared cookies are designed to overcome 'statelessness'.  Cookies allow a web server to send back a little bit of information to be stored in the client/browser.  This helps the browser maintain state - ie know whether the user has logged in, know what is in their shopping cart.  Cookies can be created by developers with a range of technologies including old favourites like Javascript and PHP.  Cookies have recently been in the news as the EEC has passed rules that restrict the type of data that can be stored in cookies.  This is aimed at restricting a web site's ability to track the browsing habits of site visitors.

9.  Bitmap

Bitmap is an image file format.  A bitmap is literally a map of bits or pixels that make up an image.  Zoom in on any image saved from the web and you will start to see the pixel bricks that make up that image.

A Bitmap close up

Examples of bitmaps are JPEGS, PNG, GIF, TIFF and BMP.

10. Vectors

Images can also be created electronically using vector technologies. Here instead of mapping out all those pixels, mathematics is used to draw shapes. Particularly good for lines, curves and simple shapes. Vectors are resolution independent meaning they scale without becoming pixelated.

Feel the Quality of the Vector Curves

When a vectors and bitmaps is created for use on a computer screen, it uses what is known as RGB colours.  That is Red, Green and Blue. RGB colours are what we use to create colours to be viewed through a screen. As opposed to CMYK which is used to create colours for print - CMYK stands for Cyan, Magenta, Yellow and Black (K for Black so not to be confused with B for Blue)

Ten Techie Terms

"Live Long and Prosper"

As you move into the world of the web you will need to learn some new vocabulary. In the web world there are a range of technologies, acronyms and disciplines that can confuse the newbie (there's one already - newbie - personage new to the technology). Here are ten to help you converse with the nerds in your life.

1. Browsers

Lets ease you in here but I have been surprised over the years by the number of people wishing to learn web technologies that didn't know what a browser is. A browser is the software used to view web pages. These include Internet Explorer, Mozilla Firefox, Google Chrome, Opera and Apple's Safari.

All of these browsers are free downloads, or come preinstalled.

Here you are benefitting from the fact that the web was 'Born Free'.

2. URL

Uniform Resource Locator - The posh name for a web address that you enter in the browser's address bar. Ask Joe Bloggs what the URL of Facebook is and they'll have no idea. Ask them the web address and no problem. The URL of facebook is www.facebook.com. Don't go there now you'll waste another 2 hours of your live.

4. Domain Name

The Domain Name is the textual representation of an IP address. Huh? You know lots of domains already, examples been facebook.com, bbc.co.uk, mustbebuilt.co.uk etc. Behind this name lies an IP address, a number that identifies the web server where the files for that web site are hosted. They are lots of online resources that convert a domain to an IP address. We use domain names because www.bbc.co.uk is more memorable than the IP address 212.58.246.92.

A domain name makes up part of a URL - not bad two techie terms in one sentence.

Tip: One famous IP address is 127.0.0.1. This is known as 'localhost'. If you install a locally running web server it will have an IP address/domain name of 127.0.0.1/localhost.

5. HTML

Hypertext Markup Language - the core language of the web. Web pages are built with HTML. HTML is an open standard maintained by an organisation called W3C - the World Wide Web Consortium. You can't be serious about web technologies without knowing some HTML. Why not start with the mustbebuilt tried and tested 20/20 HTML approach. Twenty HTML tags to get you started. You'll also want to learn some CSS to make your pages look pretty.

Cheat! I'll sneak CSS in here with HTML.  CSS stands for Cascading Stylesheets.  CSS works along side HTML to make pages presentable.  CSS is the 'designy' side of web technologies.  It is where you choose your colours, fonts and layout style for your web pages.

6. HTTP

Hypertext Transfer Protocol - the way HTML files are sent to your browser. You see this everyday in the URL's you visit for example http://www.bbc.co.uk, http://www.facebook.com. When you enter an URL like this you are essentially telling the browser to get information from that domain using a method called Hypertext Transfer Protocol. Remember web pages are build using Hypertext Markup Language HTML.

7. Hosting

Any web site you visit is held on a web server somewhere. That web server will have an IP address to identify it and in most cases a domain name to make it more user friendly. If you want to have a web site you'll need a web host. Large organisations like Universities tend to host their own web sites on their own web servers. The vast majority of web sites, are however, hosted by hosting companies. You pay them an annually or monthy fee which is in effect a way of renting some space on a web server, where you can upload the pages that make up your web site. How do you upload? Well you need to use something called FTP coming up next.

8. FTP

File Transfer Protocol - whereas HTTP is the way you view pages, FTP is the way you publish them. There are lots of FTP applications available like FileZilla and SmartFTP that you can install. These allow you to move files to your web host, to in effect publish them. When you buy hosting, your hosting company will provide you with an FTP host (the name of server) and a login/password combination. Enter these in your FTP application of choice to get access to your web server.

Tip: Many commerical products like Dreamweaver as well as free HTML editors like Notepad++ come with FTP built in.

9. Screen Resolution

Ask yourself these questions. Do you know your screen resolution? Do you know what screen resolution means? As a potential web professional you need to understand that people will visit your web site with a whole range of different technologies. The range of browsers mentioned above is one variable. Another is screen resolution. Screen resolution is the number of pixels available to the user on their screen and is measured in terms of width x height. With destop machines these can range from 800 x 600 for smaller screens through to large monitors of say 1680 x 1024. There will also be visitors with values above and below these examples. As a web designer you need to make a design decision as to what screen resolutions you wish to focus on. The aim is generally to avoid horizontal scroll. That is you design a page that will fit the screen without forcing the user to scroll horizontally. For an example of the decision making process see the mustbebuilt section on picking a layout with Dreamweaver. This is in reference to Dreamweaver but is applicable whatever web tools you use to write your HTML.

10. SEO

Search Engine Optimization - the art of raising the profile of your web site with search engines like Google and Microsoft Bing. A good web designer will use SEO techniques instinctively. For example, make proper use of HTML elements like <title> and <h1>. There are 'black hat SEO' techniques that are considered underhand ways of trying to raise you ranking and 'white hat SEO' where you use legitimate techniques. Beware of 'SEO experts' promising you top ranking in Google.

Conclusion

As you would imagine there are plenty more and in later posts I'll post another ten and then another ten. However this is a good start.

One notable omission here is Javascript. I'll mention it here as there is often confusion between Java and Javascript. Just be aware that Javascript is a core web technology used to add interaction to web pages. You'll find more information here in relation to a technology called jQuery. Java is not in anyway related to Javascript. Java is a programming language used for building applications from Banking Systems to Android Phone Apps. Java is not a technology that any budding web professional need worry about. You can Live Long and Prosper without it. You'll be busy enough with HTML, CSS, PHP ... need I go on.

.