Friday, 31 August 2012

About Web Content

If you are involved in any Internet activity, particularly for work or business, you may have come across the term "Web content". It may seem an odd expression and understandably baffles people. However, it is a key concept to understand if you are trying to make a success of an Internet business or other online project. In this article we will outline what Web content is, how it is produced and what people use it for.

Content Types

The Web presents many different types of content to the people browsing it. Content types include text, data and various media types such as images, video, audio and animation, not to mention interactive components. Most modern Web pages contain multiple types of content within them, since Web users have come to expect a stimulating, engaging and interactive experience when they visit a site.

If you are building a website, it is necessary to give careful consideration to the content you wish to include on each page. Striking a balance between having enough content and not too much can be tricky. Text content is arguably the most important in terms of success or failure. Successful text content for a website is relevant to the purpose of the site, provides useful material to the people visiting the site and is written to a high standard of quality.

For media content types, there are a number of additional considerations. For certain media items such as audio, video and animation, end-users may require particular software programs. This can naturally cause problems accessing those media items, particularly for users of certain device types and operating systems. It is also important to remember that many website users are now browsing on mobile devices such as smartphones, netbooks and tablet PCs. In these cases, there may be a low bandwidth and limited Internet connectivity generally. For this reason it is advisable to use media items such as images with the smallest file sizes you can achieve while still maintaining an acceptable level of quality.

Content Delivery

Websites use a variety of techniques for delivering their content to users. Most sites are now dynamic, which means that the content is stored in database systems and built into Web pages when users' browsers request them. This process involves server side scripting. Server side scripts run when users request pages, fetching data from the database and building it into the resulting pages before returning these to the browser, or client.

Dynamic techniques have also produced Content Management Systems for authoring and delivering content. A CMS system allows people who do not have Web development or programming skills to create and publish website content. CMS programs such as Joomla and Wordpress are behind many of the most successful sites on the Web, for retail businesses, online newspapers and magazines, social media sites and many more.

How is Content Used?

Of course the most obvious use of content is to convey information to website users, but there is a lot more to it than that. Some organisations also create text content to drive traffic to their sites, publishing the content on other sites such as blogs and including links back to their own Web properties from there.

Many people focus on attracting search engine traffic using Search Engine Optimisation (SEO) techniques to tailor the text content of a site. These techniques have a limited and reducing value, as the search engines are always improving their algorithms to present their users with the most relevant results first. The only genuine way to perform well in the Search Engine Results Pages (SERPs) is to focus on creating good quality, relevant content on your site.

At its essence, Web content is anything you see on a website. However, the surrounding issues are complex and making best use of content can have a huge impact on the outcome of any Internet project.

See also:

About Randomness

Randomness is a concept with relevance to many different fields and areas of life, from mathematics to computing science and the arts. There are actually lots of different definitions of randomness, for its uses in these different contexts. In this article we'll go over what it means for something to be random, as well as looking at the application of randomness in computer programming and the arts.

I started thinking about randomness when I was developing my Android Nonsense apps, see also this post: Using Randomness to Stimulate Creativity

What Is It Anyway?

In one sense, something being random means it being unpredictable. In another sense, it means having no discernible order. If some sequence of events appears not to conform to any sort of order, this implies that it has not been arrived at through a dedicated method. When something happens as a result of some process in which there is a purpose, this does not normally create random results. In some cases randomness is used in an intuitive sense, while in others it has a very specific objective definition. In mathematical contexts, random sequences are often referred to in conjunction with notions of probability and predictability.

Computer Programming

Randomness is a common topic in computer programming. Often, computer programmers use language utilities known as random number generators. These allow programs to generate a series of numbers with specific parameters, for example within a certain range or with a certain number type such as integer or floating point. Programmers use these for various tasks, some relating to underlying application logic, some relating to user interaction. For example, random functions can be used to present content items to application users in a way that creates a different user experience each time.

Although random number generators are common in computer programming, the numbers produced are not actually truly random. This is because it is impossible, by definition, for a computer program to generate a random series of numbers. In order for a series to be random, there can be no process or method used to generate it, but a computer can only generate numbers using a detailed, specific process. In brief, this means that if a series is generated by a computer, it is not random.

While not truly random, the random number generators used in computer programming are designed to create the appearance of randomness to the end user. For example, if you use a music player such as an MP3 player, you will be familiar with shuffle functions. With a shuffle function, the application uses a random number generator to choose songs from those available. There is in fact another obvious way in which these functions are not really random in addition to the fact that they are computer generated. This is that fact that most shuffle functions are designed not to repeat songs, but rather to play each available song once before playing any one a second time. Again, the randomness here is in appearance rather than strictly in reality.

The Arts

Another common area to experience randomness is in the arts, particularly in comedy contexts. Many people find randomness produces results that are funny, for example through gibberish, or nonsense speak in which people combine random combinations of words. Some computer programs combine this with the random number generation functions to generate random sentences for comic effect. Some songwriters also use randomness to come up with lyrics and song titles.

Randomness is also involved in art in a creative sense. Many people find randomness is a great way to stimulate them creatively. This can involve using computer programs again, for example to generate random words or pictures. The unpredictability of randomness produces surprising results that appear to stimulate the creative functions within the human brain.


We experience randomness in many areas of life, from the weather to throwing a dice or shuffling a deck of cards. In many cases you see random sequences and are not aware of it, and in many more you see sequences that appear to be random but are in fact not. Whatever way you look at it, randomness is a part of life.

See also

Random Number Generators
Using Randomness to Stimulate Creativity

Android Widget Development

Android developers can create widget applications that users display and interact with on their device homescreens. Android widget development is a little different to standard Android application development. In this article we will run through some of the ways in which developing widget app differs from developing ordinary apps for the Android platform. If you are hoping to attempt Android widget development, it is recommended that you try creating a standard app first, before moving onto widget apps.

Differences Between Widget Apps and Standard Apps

Many aspects of application structure remain the same between Android widget apps and other apps. One of the main ways in which widgets differ is in how they are launched. Rather than the user launching the app by selecting it in their device menu or from a shortcut icon, with a widget application the user must add it to their device homescreen display. This is normally accomplished by long-pressing the homescreen and selecting the widget from a list. Widget applications are downloaded and installed using the same procedure as for other applications. Once a widget is on the user's screen, it will typically continue to run until the user removes it.

Some widget apps update with information from the Internet or from the system itself. For example, common widgets display information about the phone itself, such as the battery level, network connectivity and phone settings. Additionally, many widget apps retrieve data over the Internet, which is then displayed within the widget user interface. Many widgets are not interactive, simply displaying information within a graphical presentation. However, some can be configured by pressing the widget icon, then choosing settings. Such apps require a more advanced level of development than the ones that are not interactive.

Application Elements

In many ways the elements of a widget app are the same as those in other apps, with a few fundamental differences. With a widget, you don't need to implement a main Activity to launch when the app starts up. Instead, you extend "AppWidgetProvider" and provide methods specifying what should happen when your widget updates. The widget will be automatically updated at a period you specify within your application metadata. This comprises an XML file in your Resources directory. You also need to specify the widget class and metadata in your application Manifest XML. Within the XML metadata for a widget, you can also dictate the dimensions and other properties of your app.


These are the main options in a widget app, but there are many other possibilities. For example, if you need your app to update at a greater frequency than what is allowed when declaring it in the XML resources, which is at most every 30 minutes, you can provide a class extending the "AlarmManager" class. You can optionally also register one or more of your app classes to receive system broadcasts. These are announcements that are available system-wide, often pertaining to information about phone state. Widget layouts are also subject to some restrictions. For example, you can only use certain layout types for an Android widget, including Frame, Linear and Relative layouts. Optionally, you can create an Activity which the Android system will run when your app starts up. This is commonly used to set configuration options for widgets.

Approaching Development

Although widget apps are developed and released using the same process as normal apps, the testing process is sometimes a little more complex. There is a significant limit to the value of testing certain widgets using an Android emulator, or virtual Android device. The most reliable approach is therefore to run these apps on real devices over a period of time in order to gain a true sense of how well they function. This is particularly the case for widgets that receive system broadcasts and other announcements, as these announcements are not entirely authentic on an emulator. For example, the battery level on the emulator by default stays at 50%, which is not very helpful if you are attempting to create a battery level widget.


As with any Android app, developers need to consider the increasing range of devices running the Android platform when constructing widgets. This is especially so for design matters. Sticking to designs that are relative and will adapt gracefully across different screen sizes is doubly important for widget applications, since they basically comprise visual displays of information. Again, thorough testing is essential to result in a widget app that will function reliably and therefore be a success.

See also:

Thursday, 30 August 2012

How To Get Started With Web Development

Anyone can teach themselves the skills involved in Web development, but if you're a beginner it can be difficult to know where to begin. In this article we'll go over the basic areas to get yourself acquainted with. Ideally, if you can work through each area in turn, getting yourself to a reasonable level of competence in each before moving on to the next, you'll build a solid foundation in the discipline that you can continue to grow over time. If you do not have much technical experience, try not to be intimidated by the number of technologies involved, just focus on one at a time and within a short period you'll be well on your way to being a competent Web developer.


The first area to get to grips with is HTML. HTML is known as a markup language. The content of most Web pages is structured within HTML markup. This markup consists of elements and attributes, with each content item in a page listed within one or more element structures.

The first step in creating any Web page is working out what the content is going to be, which may include text, images, media such as videos and interactive items. Once you decide on these content items and have them ready, you will structure them within HTML markup.

The HTML dictates the structure of a page, with each item listed within the body section, and information about the page listed in the head section. The head section gives the user's Web browser information it needs to display the page. To learn basic HTML, you should ideally cover: making a page, including text, links, images and HTML attributes. Once you have the basics of HTML mastered, you can look into other client side technologies.


Cascading Style Sheets determine the styling and appearance of Web pages, in conjunction with HTML code. CSS code for a page can appear along-side the HTML elements, in the page head section or in a separate file saved with ".css" as the extension.

CSS code can instruct the user's Web browser to display page items in particular ways. CSS dictates such display properties as text/ font style, colours, backgrounds, layouts, borders, margins and padding. The CSS declarations identify particular elements within a page by referring to the element type or using ID and class attributes included in the HTML markup.

The basic techniques involved in CSS are not complex, but the tricky part is testing your pages in different Web browsers, as your designs may appear with significant differences between them. Once you've learned basic HTML, learning the essentials of CSS is not difficult.


JavaScript is used to make Web pages dynamic and interactive. JavaScript code appears within the Web page HTML markup, either in the head or body section, or in a separate file saved with ".js" extension. Such scripts can respond to user interaction with a page, for example altering the appearance of a page element when the user hovers their mouse over it.

Writing JavaScript code is a fundamentally different activity to writing markup code. When you write JavaScript, you are effectively writing programs, with instructions for the Web browser to execute one after another. JavaScript areas to get yourself acquainted with for basic Web development include using logical structures such as loops and conditionals, variables, functions and event listeners. Try not to be too overwhelmed by learning JavaScript if you have no programming experience, as most websites only require small excerpts of code anyone can learn.

Server Side

So far we have focused on client side technologies, which are those technologies that operate in the user's Web browser (the client). Web development also involves technologies functioning on the Web server. These include database technologies and server side scripting.

Many websites store their data in databases in systems such as MySQL or XML data files, rather than coding the data directly into HTML files. In these sites, when the user's browser requests a Web page, a server side script runs on the server computer that is hosting the site. The script may carry out various processes, including querying a data source. The server side script takes the data it has retrieved and builds it into HTML structures, sending these to the user's browser to be rendered there are they would be with a standard HTML page.

If you want to continue learning Web development skills once you have a good grasp of client side development, you can try learning a server side scripting language such as PHP or ASP, as well as data technologies such as SQL and XML.


Web development involves many different skills, with new and emerging areas including HTML5, advanced JavaScript topics such as jQuery and mobile development. If you're new to the area this can all seem pretty intimidating, but in reality most of the technologies are accessible enough for you to teach yourself with the help of the many free Internet tutorials.

There are lots of websites for learning these skills, with W3Schools the main starting point for most people hoping to teach themselves. If you do want to get stuck into Web development, it's best to focus on one skill at a time and not worry too much about how fast your skills are progressing.


Evaluating IT Training

It's impossible to overstate the importance of performance measurement with training, and IT training can have an enormous impact on an organisation. If you're involved in Information Technology training, it's well worth taking the time to evaluate the success of your efforts, so that you can identify any areas for potential improvement and maximise on those areas that are proving to be most productive. If you are an employer, it is of course vital to check the relative success or failure of any IT training programmes you have engaged in for future reference.

IT training comes in many forms, from picking up skills on a day to day basis to formal courses with well defined learning outcomes. There are also a number of key aspects to consider when approaching evaluation of IT training, including both content and quality of the material in question.

Does the Material Cover Enough Ground?

It is naturally the case that an IT training experience is only successful if it covers the topic in question in enough detail and depth. If the course was accompanied by an outline of objectives, this is worth referring to. A questionnaire can be a useful tool in establishing success or failure in this regard. Trainees can be given such a questionnaire, which can be multiple choice or include areas for more detailed feedback. It's advisable not only to check that specific topic areas were covered by the training, but also to ask trainees if the topics were sufficiently explored and illuminated, rather than being glossed over.

Is the Material Produced to a High Standard?

A training experience may cover relevant material but still fail to equip trainees with adequate knowledge or skills. The quality of training content is therefore hugely important. This can include the quality of teaching materials such as written content or presentations, as well as the teaching quality itself where training staff are concerned. Trainees can be asked if they felt the material was effectively communicated to them, in a way that improved their practical skills.

Is the Material Relevant to the Job?

Any IT training course is surely aimed at giving trainees practical skills that will prove to be useful on the job. In some cases this is a difficult aspect to measure, particularly in cases where employees are not yet doing the job, but are undergoing training in preparation for it. For employees undergoing training for an existing job, this can be a useful checkpoint. This issue is particularly relevant to managers making decisions about purchasing IT training products. Employees are also in the best position to determine the accuracy of certain IT training processes.

Measurement Tools

The most basic tool for IT training evaluation is a simple questionnaire. In some cases trainees may also be interviewed for more detailed information. However, one activity that is often neglected is a practical evaluation. IT training is primarily about skills rather than knowledge. For this reason it can be extremely valuable to engage trainees in practical tests following their training. Ideally, this should involve trainees carrying out actual tasks that will be involved in their jobs. A typical example would be using a new software program to carry out a common task. There may also be some value in carrying out this and other evaluation processes after a delay in time following the training, to establish whether the skills have been gained on a long term basis.

Getting General Feedback

It's always worth taking the time to allow, and encourage, employees to suggest future improvements to a training programme. This can include suggestions of additional areas or tasks to include in the training. Successful IT training processes are a continuous dialogue between trainer and trainee, with iterative improvements over time resulting in higher levels of success into the future.

See also:

XML Database Mapping Using XSD (XML Schema)

It is not uncommon for developers working on software or Web applications to change data storage and modelling approaches. An example of this would be deciding to switch from XML data to a relational database. The decision to shift data modelling technologies may be a result of changes in the aims or other technologies being used within a project.

Changing from XML to a relational database system is not typically a difficult task. The main activity involved is mapping the data structures from one system to the other. The data structure includes the data items and the relationships between them. Ultimately the database will be defined using SQL but the initial stage involves creating a design, an abstract model of the database determining the structures its data content will be held in.

If an XML data source is accompanied by an XML Schema Definition (XSD) determining its structure, this can be used as the primary source for mapping the data to a relational system. XML Schemas define the structures and elements an XML data source can contain, including the names and datatypes of elements, their attributes and the relationships between them.

Techniques For Mapping

There is no set procedure for mapping XML to a relational structure, although there are some common approaches. The process should be accompanied by an informed sense of the system for which the data is being modelled, with the overall purpose of this system in mind when mapping decisions are being made.

Element To Table

Often the most logical step will be to translate XML elements into relational database tables. This is not always the best approach, it does depend on the data in question. If an XML element is mapped into a database table, its columns may become the element attributes, optionally the element content or children.

Element To Column

In some cases XML elements may become columns in other database tables. This is most likely the case with simple elements, which simply contain a text string, easily translatable into a column in a system such as MySQL. If an element contains further elements or attributes, the possibility of mapping only into a column will be less likely.

Attribute To Column

Since attributes are single, simple pieces of data, it will generally make most sense to translate them into columns in the database tables corresponding to their given elements. An alternative may be in cases where there are only a set, finite number of possible attribute values, in which case this may be reflected in different tables for the elements having each attribute type.

For example, if an element called "thing" has an attribute "type" and this attribute can only be "red" or "green" it may be reflected by having two tables, one for "red things" and one for "green things". However, in most cases it will be more sensible to have a "thing" table with a "type" column in it.


Representing relationships in a data set is one of the more challenging aspects of mapping from XML to relational database using an XSD. Relationships in XML are implemented by structure, for example with an element having child elements. In relational database systems such relationships are reflected using "keys" linking different tables.

For example, consider the following XML structure:


The corresponding XSD excerpt:

This could be reflected in a relational database using Foreign Keys. The relationship is "one to many" in that one family may be associated with multiple members, but each member will typically only be part of a single family. In this case, a relational database could contain a "family" table with a "name" column and a unique "ID" column representing the table's Primary Key. An additional "member" table could include a "name" column (containing "Mary", "Jim" or "Tony" in this case). The "member" table could use a Foreign Key by including a column called "familyID" in which the "ID" for the member's family is recorded, linking the two tables in a way that accurately represents their relationship.


Ultimately, there is no one correct way to translate XML indicated by an XSD into a relational database design. An understanding of both technologies, together with information about the project the data is being used for, will make a successful outcome far more likely.

See also:

Wednesday, 29 August 2012

What Are Android APK Files?

If you use an Android device, such as a smartphone, laptop, netbook or tablet PC with the Android operating system installed, you have probably used APK files without realising it. As a user, you will not generally need to worry about Android APK files or have any real awareness of what they are, but developers for the platform do deal with them. Essentially, an APK file, or an Android Package file, is an Android application, or "app", which has been compiled and is ready to be installed and run on your device.

APK Creation

Android application developers create APK files, generating them as part of the development process. Most Android apps are developed in the Eclipse IDE, which can have a number of official plugins for Android installed, making it possible to develop, generate and ultimately release apps in the form of APK files. Once an Android project in Eclipse has been developed, executed, tested and is ready to be released, it can be exported in the form of an APK file.

In order to be released through Google's official Play store (previously Android Market), APK files must also be signed for security purposes. When an application has been signed and released through the store, it can only be updated using newer APK files which have also been signed using the same certificate, to verify that their origin is the same.

APK File Distribution and Acquisition

In the vast majority of cases, APK files are distributed and accessed by users through Google Play. Developers open accounts with the store, upload their APK files and choose publishing details including information for potential users and pricing choices.

Users of Android devices can access Google Play through a dedicated application which is typically installed on such devices when they are purchased. Using the Play app, users can browse applications by category or by searching for particular keywords and terms. Within each application listing users can read details, previous user reviews, comments and required system permissions for using the app.

Many apps are free, but some are downloaded at a set cost. If a user decides that they do not want to keep an app installed on their phone before the trial period ends, they can cancel the purchase. Whether an app is paid or free, users can decide at any time to uninstall it, again within the Play app.

APK File Installation and Use

When a user decides to download and install an app, Google Play and the Android system carry out the installation process. The APK file is initially downloaded onto the device, and the system then extracts the required information from this to install and execute the application. Once installed, users can use apps without needing access to the APK file, by simply browsing to the app listing in their device menu.

APK files can also be acquired through channels other than the official store, as there are other Web marketplaces for Android. Additionally, developers can install and run apps that are currently under development by copying the APK files onto their device, then using the Android system to install and run them. APK files are really only used within the installation process, and are not required when this is complete.


Customising LCD Output in XBMC

XBMC Introduction

XBMC is a media player which was initially designed for use with the Xbox, when it was called Xbox Media Center. The player is open source, and can now run on lots of device types, such as television sets and PCs. Most of the main operating systems can run XBMC, including Windows, Mac and Linux.

People are watching TV in lots of different ways these days, and for many of us the PC is the main medium for all of our entertainment, including tuning into TV shows. You can use XBMC to watch the television on your computer, and the system has been extended into a host of derivative applications such as Boxee. XBMC can be used with enhancements such as interactive program guides, and can also tune into radio broadcasts.

How Can the XBMC LCD be Customised?

You can customise XBMC output in a number of ways, for example with regard to the LCD output when media playback is going on. To do this, you need to edit the lcd.xml file. Within this file you can indicate the details of how you want the display to be customised by altering the XML structures.

The lcd.xml file can be found in the "UserData" folder for your XBMC installation. Where to locate this file depends on which operating system your version of XBMC is running on. Specific details for each platform can be found in the XBMC online manual.

How Does XML Work?

If you're not already familiar with XML structuring, don't worry. Familiarising yourself with the basic principles involved in XML is not difficult, even if you don't have much technical experience.

The following is a trivial example of what the content of an XML file may look like:


XML is used to model data for many different types of application, and the lcd.xml file contains the settings for various aspects of playback output on the screen. You should be able to open the file in any basic text editor.

What Elements of LCD Output can be Tailored?

Numerous elements can be altered to dictate LCD output in XBMC. These include music, video and navigation among others, and each of these categories is contained within a dedicated area of the lcd.xml file. You will see "line" tags indicating each specific area of output, and these will be contained within the relevant categories.

Inside the "line" elements, you will see various "InfoLabels" which are the specific aspects of media playback to be displayed. These variables can be used to indicate information you want shown on the screen while a particular media item is playing. These can include, for example where music is concerned, title, time, artist and album.

What is the Easiest Way to Choose Settings?

By far the most straightforward way to pick what settings you want for the XBMC LCD is by referring directly to the online manual. The manual lists all of the possible variations, so you can easily experiment with them until you find the display options you want.

Because the XBMC player is open source, it is designed to make user customisation possible in a number of ways, giving you an excellent level of control.

See also:

How To: AJAX PHP Functions

Using AJAX, you can combine HTML, JavaScript, PHP and XML to enhance websites. By adding AJAX PHP functions to your pages, you can create a more dynamic, interactive experience for your users. With AJAX, your pages can call a PHP script running on the Web server. This script can query a data source such as a relational database or XML store for new data. The script can then return this new data to the user's browser, where the client side script in JavaScript can write the new data into the page HTML. Essentially, this means that you can fetch and present new data to your users while they interact with your page, and without having to refresh the page as a whole.

Build the Page

Create an HTML page to implement your AJAX PHP processing. Use the following outline:



Here we will display new data from the server.
</body> </html>

We will place JavaScript functions in the page head area for fetching and receiving the new data from the server. Within the body, we have an element in which we will display the new data and a button to prompt the AJAX function execution.

Add JavaScript

In the script section in your page head, add the following code:

function getNewData() {
    //XML HTTP Request object
var xmlHTTPReq;
    //take care of different browsers
if (window.XMLHttpRequest) xmlHTTPReq = new XMLHttpRequest();
else xmlHTTPReq = new ActiveXObject("Microsoft.XMLHTTP");

Here we create an XML HTTP Request object. Next we provide the browser with instructions for when the new data is received, still inside the "getNewData" function:

xmlHTTPReq.onreadystatechange = function() {
//write the result to the page
if (xmlHTTPReq.readyState==4 && xmlHTTPReq.status==200)
document.getElementById("resultArea").innerHTML = xmlHTTPReq.responseText;

This code simply writes the new data to the section in the Web page with "resultArea" as its ID attribute. We have instructed the browser to handle the returned data, now we need to call the server side PHP script, at the end of the "getNewData" function:

//specify the script"GET", "get_data.php", true);

Create a PHP Script

Next we need to create a PHP script to fetch the new data. Open a new file and save it "get_data.php" entering the following code:

$rand_num = rand(0, 100);
echo "Here is a random number between 0 and 100: ".$rand_num;

The PHP script could do many different things here, such as fetching data from a database or from XML. In this case we simply return a random number for demonstration. Save your HTML and PHP files and upload them to your server. Visit the page in your browser and click the button to see the new data fetched from the server.


You can also pass data to the PHP script if this suits your needs. For example, you can capture user data from an HTML form with input elements, passing the entered data for processing at the server side. A common use for this is committing the new user data to a database. To pass data to PHP, simply retrieve the user input data in the JavaScript function and append it to the PHP script URL as in this example:

//user entered data is stored in a var named "userData""GET", "get_data.php?info=" + userData, true);

In the PHP script, you can retrieve the passed data as follows:

$passed_data = $_GET["info"];


You can incorporate AJAX PHP functions with various other technologies such as XML and jQuery. The emerging HTML5 features are also set to provide enhanced levels of communication between client and server using such utilities as Server Sent events, so the browsing experience is going to become more and more responsive.

See also:

How To: HTML5 Local Storage

The improved storage model in HTML5 is one of the most anticipated new features. Using Local Storage and Session Storage, your websites and Web applications can store much more data at the user's browser, the client. Storing data at client side is a common task with many Web projects, but until HTML5 there were serious restrictions on what you could do in this regard. In this tutorial we will outline the basics of using HTML5 Local Storage in a Web page, with JavaScript code to manage the data stored.

There are numerous advantages to the improved Local Storage utility in HTML5. As well as having the ability to store greater amounts of information at client side, your apps can utilise this data in a more efficient fashion. Storing data at the client inevitably reduces the need to continually fetch it over the network.

The Web Page

Your HTML5 Web pages should all have the same outline structure, with the HTML5 DOCTYPE. Use the following as a guide:

<!DOCTYPE html>

In the body we will place our page elements and in the head we will use a JavaScript section. Add these HTML elements in the body section of your page:

Here we will display the local data

Type some text in the box then click the button to store it locally.

This code creates a text area for the user to type some text into. Under the text field is some informative text telling the user to input text then click the button to store it locally.

JavaScript Function

Now create a script inside the head section of your HTML5 page. Add the following in the head:

Inside the script, add the following function:

function storeLocally() {

This is the function that will execute when the user clicks the button. Inside the function, first get a reference to the "div" element we want to write the result into:

var showDataElement =

We are going to create a variable within the browser's Local Storage object. When the user returns to the page, the variable will be set from the last time, unless they have deleted the data. If the variable already exists, we are going to overwrite it with the new data. However, let's first check whether it has already been set and if so what was entered before:

var storedData = localStorage.typedData;
if(storedData==null) storedData = "";

Now let's get the newly entered data from the text field:

var newData = document.getElementById(inputData).value;

Update the Local Storage object with this new data:

localStorage.typedData = newData;

Finally, let's write the previous data and new data to the browser as a visible response to the user:

showDataElement.innerHTML = "

Last time you entered:

" + storedData + "

This time you entered:

" + newData;

When the script executes, the previously stored data will no longer be stored. If you wanted to keep a record of everything the user enters you could append the new data to the Local Storage variable rather than replacing it each time. This code is simply an example to illustrate the practice of using Local Storage in HTML5, but you will of course need to tailor it to the needs of your own projects.


The other main new storage option with HTML5 is the Session Storage. Unlike Local Storage, data stored in the Session Storage object only persists for a single user session. This is obviously more sensible if you don't need your stored data to stay around between user visits to the site. If you do need the data to remain accessible, use the HTML5 Local Storage option outlined above.

Related Links

Tuesday, 28 August 2012

Web Development Concepts: Client and Server

To put it simply, this is about the relationship between two computers: yours and the server. Client stuff happens on your computer and Server stuff happens on the server. However, although the Client stuff runs on your computer, it's still stored on the server. Make sense? Let's explore it in a bit more detail.

Who's Who

The terms Client and Server are used in Web development contexts. As with all tech terms, these are often used as a concise reference, but are unfortunately also often used when another term would actually be easier to understand. For whatever reason, a lot of geeks seem to love using mystifying language, perhaps to compensate for their crippling social inadequacies (and I include myself in that category) - who knows?

Anyway, Client and Server are fairly easy to get to grips with. They simply refer to where the different functions of a website are run. Server refers (as you might have guessed) to code etc that is executed on the Web server, and Client refers to things that happen within the browser (e.g. Firefox, Internet Explorer, Opera, Safari, Chrome) as it runs on your computer.

The Network

The terms Client and Server are used to reflect the relationship within the computer network (i.e. the Internet). However, you don't need to understand the ins and outs of networking to understand these terms.

The Process

When you browse to a website, a number of things happen. The data and programming code etc for the site are stored on the Web server. The website address identifies the location of the server, and the browser requests the relevant page from this location.

The Web browser receives the HTML content from the server, which it is able to interpret and display as a Web page, together with the text, images, data etc and style rules determining how it should be displayed.

A wide variety of technologies are used in Web development, some running on the server, and some on the client. Your Web browser is basically able to display HTML, but this HTML may be served to it in different ways.


The traditional Web model meant storing HTML pages on the server which are simply sent to the browser and displayed. In this model, the content of a site was all directly written into the HTML files, and had to be manually changed if the information needed changed. However, as sites developed, there became more of a focus on data-driven sites that are said to be 'dynamic'. This simply means that the sites use data and other resources to build the Web pages at the time that they are requested by a browser.

Server side programming is one of the main tools involved in this. Server side languages such as ASP and PHP run on Web servers, creating HTML when they run and sending it to the requesting browser to be displayed. In a typical model, the Web server will have a database on it, plus the other content such as images etc. When someone requests a page, the Server side scripts execute, query the database for any relevant information and write this back to the browser in the form of the HTML page.

Client side programming refers to functionality that is carried out within the browser itself. Many sites try to be interactive in different ways, and one such way is using a Client side language such as JavaScript. This is typically used to achieve things like interactive menus and styles that make the elements in a site change their appearance as you interact with them using your mouse and keyboard - these are generally carried out using CSS (Cascading Style Sheets).

With the emerging techniques in HTML5 and CSS3, websites are becoming even more responsive, interactive and dynamic from both client and server side.

Client and Server Working Together

Some uses of Web technology use the two approaches of client side and server side development in tandem, such as AJAX, as well as many jQuery and HTML5 functions. You'll see examples of these on lots of sites, where an element of the page is updated without the page as a whole being refreshed. In this case a Client side script in JavaScript often sends a request to a server side script (e.g. in PHP), with the returned data displayed in the browser without it having to request a new page. With HTML5, the client side code doesn't even have to request something from the server, the sever can simply push new data for the browser to display.


If you see someone referring to Client Server Applications or Client Server Development etc, this is really just a reference to the use of a variety of technologies deployed both on the Server and Client. These days, Web development pretty much always involves both so the terms are often redundant. Some developers do specialise and focus on one side or the other, particularly where large Web applications are involved.


If you are planning to get involved in Web development yourself, it is vital to understand the process that executes when people view websites. However, if you are only planning on accessing the Web as an end-user, you really don't have to understand these concepts, although they are interesting if you're an utter geek like me.

See also:
What is Dynamic Content?
What is Web Content?
How to Get Started with Web Development

What is Dynamic Content?

When you visit a website, your browser sends a request to the Web server for the content of each page you view. The Web server responds with the page requested and your browser renders it for you to see and interact with. However, what happens between your browser requesting the page and receiving it determines whether the page is dynamic or not. Dynamic content is website content that is delivered in a particular way. In this article we will explain what dynamic content is, how it is achieved and its relative advantages/ disadvantages.


In most dynamic websites, the content is modelled within a database system. The data comprising the website content in such cases can involve numbers, text and references to media items stored on the Web server. Many businesses use a single database to store their data, which may include retail items, client details and other commercial records. In this case, a company can create more than one system to access and interact with this data.

For example, a company could use a desktop program for their employees, which uses the same database as the website for customer use. Internet newspapers and magazines also store their data in databases, in many cases utilising Content Management Systems (CMSs) to build their sites on top of a data store.


With dynamic content, the function of a website involves programming scripts. When the server receives a request from the user's browser for a page on the site, it executes a server side script in a language such as PHP, ASP or Java. This script may do a number of things, but will typically query the database for the page content, then build the resulting data into a page using HTML markup. Finally, the server sends the newly constructed page to the browser that issued the request, also known as the client.

Although dynamic development is a common approach to Web building now, this was not always the case. Before dynamic technologies became so prevalent, static websites were the norm. In a static site, the pages are already built and are stored on the Web server waiting to be sent to the user for viewing.

From the end-user's point of view the process is irrelevant, all they see is the Web page. However, what has happened to deliver the page a user sees is fundamentally different for dynamic content. Essentially, dynamic content is content that is constructed when the client requests it, rather than already being structured as with the static model.

Client Side

Web development is often broadly thought of as comprising two distinct parts, client side and server side. Server side development involves the scripts and databases that execute on the server. Client side development is for those technologies that run within the user's Web browser, including HTML, JavaScript and CSS (Cascading Style Sheets).

Although primarily a matter for server side development, dynamic content can be prompted at client side as well. For example, with JavaScript techniques and tools such as AJAX and jQuery, the user interacting with a page can cause a server side script to execute, returning dynamic content from the server to write into the existing page. With the emerging HTML5 utilities the possibilities are becoming even more dynamic again. For example, with Server Side Events, the server can push dynamic content to the browser without the client side code having to request it.

Advantages to Dynamic Content

Dynamic content offers a number of generic advantages over static content, hence its enormous growth as the Web has evolved. Dynamic sites offer a potentially distinct user experience with each visit, since the page content is fetched anew every time a browser requests it. With a dynamic site, the content, or data, is all stored at a single location. This brings the "single point of change" advantage, meaning that data updates only need to happen in one place, with the entire site fetching the data from the same location, i.e. the database. When combined with interactive technologies at client side, dynamic content can also create sites that are more engaging than their static counterparts.

Disadvantages to Dynamic Content

There is really only one disadvantage to dynamic content, and that relates to the technologies required to deliver it. While most people can pick up basic skills for static development, for dynamic development you really need programming skills. This often means that companies need to hire services from professional developers rather than carrying out the work in-house. The requirement for this expertise also includes maintaining sites in the long run.


You will see dynamic content on almost any website you visit, although you may not be aware of it. Dynamic content is the rule now rather than the exception, and is an essential feature of most successful website projects. By utilising dynamic technologies in association with additional tools such as CMS programs, individuals and organisations can create an efficient, appealing Web presence.


How To Uninstall Android Apps

If you have an Android device, such as a mobile phone, tablet or laptop PC, and have installed apps on it, you may of course wish to remove some of those apps if you decide you no longer want them. To uninstall Android apps, you have two broad options. If you bought or downloaded your apps through the official Google Play store (formerly Android Market), you can uninstall them through the Google Play app on your phone or device. As an alternative, you can uninstall Android apps through a section in your device settings, accessed through the main menu.

In this article we will run through the basics of uninstalling Android apps using both techniques. This can include apps that you installed on the device yourself as well as applications that were already installed when you started using it. However, be careful when removing apps that were already on your device when you got it, as some of them may be providing functionality that other apps rely on and that you are in fact using even though you are not aware of it. In general, it's best only to uninstall apps that you installed yourself.

Uninstall through the Market/ Google Play

For free apps and paid apps after the refund period has elapsed:

In March 2012 the Android Market became Google Play, but the process of uninstalling apps remains the same.

If you installed the apps you want to remove through Google Play, you can uninstall them using the Google Play app as well. To do so, open the Google Play app on your phone or other device, then browse to "My Apps", which you should see when you press the menu button on your device. Once you are in the My Apps section, you should see a list of the apps you have downloaded through Google Play. Locate the ones you want to remove by browsing through the list, using the search function if you have a lot of apps and can't find the ones you are looking for at first glance. You should see the search button near the top of the screen.

Your apps are normally listed in sections, with apps for which there are currently updates available appearing at the top, so you may need to scroll down past these to find the applications you want to uninstall. When you find an app you want to remove, select it from the list and your device will present you with the listing for that app. You should see an "Uninstall" button near the top of the screen, so select it. You will be prompted to confirm you want to uninstall the app, so if you are sure, press OK. While the app is being uninstalled you will see a notification in the Google Play screen. When the app has been successfully uninstalled, the Google Play screen will return to its normal state.

For paid apps before the end of the refund period:

If you are uninstalling apps you paid for, you will only receive a refund if you uninstall the app within 15 minutes of purchasing it. After that time you are no longer entitled to a refund. If you are uninstalling an Android app and are still within the refund period, you will see a "Refund" button in the Google Play page for the app, so select it. After the 15 minute refund window you will simply see the "Uninstall" button.


If you are outwith the refund period but are unsatisfied with an app, you do have the option of contacting the developer, as the Google Play listings include contact details. You have no guarantee of getting a refund after the 15 minutes elapse, but if an app is faulty in some way you may be able to get the developer to agree to a refund.

Uninstall through the Device Settings

You can uninstall any application installed on your device through your device settings menu, regardless of whether the app was installed through Google Play or not. To use this option, open your main device menu and select "Settings". Choose "Applications", then "Manage applications" or just "Manage" depending on your system version. You should see a tabbed display letting you filter apps that have been downloaded, are installed on the SD card, are currently running, or simply all installed apps. Choose an option and scroll through the list until you find the app you want to remove.

You will see the "Application info" screen for the app, which lists information about the application data and where it is stored. You should see an "Uninstall" button near the top, so choose this. You will be prompted to confirm that you want to go ahead and uninstall the app, so choose OK, if you are sure. You will see a notification while the app is being uninstalled and confirmation when the uninstall is complete.

Additional Options and Considerations

These are the two basic options you have if you want to uninstall Android apps. You may find that, depending on your device or Android platform software version, the titles you see may vary slightly from the steps above, but they should be broadly similar.

If you decide after uninstalling an app that you do want it after all, you can of course download and install it again, providing it is still available. If you have installed applications from sources other than the official Google Play store, you can use the Settings/ Manage applications technique to uninstall these. Whatever download route you took basically involved the application APK file being downloaded onto your device and the app being installed from it, so the uninstallation process should not be any more problematic.

Related Resources

Developing Android Widgets

Developing Android widget applications involves a slightly different process to creating standard apps. In this article we will go over the basics of what Android Widget development involves, outlining the main ways in which the task varies from other applications. If you already have experience developing a standard Android application, you will be able to approach the job of developing a widget app fairly easily. However, if you have not yet developed any Android applications, it is advisable to start by trying a standard app first rather than a widget app.

Launching and Running

Most Android apps are launched through the user device menu. Application shortcuts may be added to homescreens, with users launching the apps from the shortcut icons. However, widget apps are launched using a distinct process. When the user downloads a widget app from the Google Play store (formerly Android Market), the app installation process is exactly the same as for other apps. To run the widget, the user must add it to their device screen. Normally, this involves long-pressing (pressing and holding) an area of the homescreen. The user is then presented with options to add application shortcuts or widgets. Upon choosing widget, the user is presented with a list of those available, i.e. those widget applications they have installed.

When the user chooses a widget to add to the homescreen, the widget will be automatically added to the position they originally long-pressed. The user can then move the widget around the screen by pressing, holding and dragging it. Often, Android widgets allow users to choose configuration settings. This is particularly common with widget apps that update over time, sometimes fetching data over the Internet. In such cases you can provide users with the ability to set timing periods for these and other options, normally by pressing the widget while it is on the screen.


When you approach the task of developing Android widgets, there are a number of similarities and differences with other apps. Because the launch process is different, there are differences in your Manifest file, Resources directories and Java classes. For a widget app, you do not need to use a main Activity class to be launched when the widget runs. Instead, you provide a class that extends the "AppWidgetProvider" class. In addition to this, you need to declare this "AppWidgetProvider" class within your application Manifest file, in which you can define it as a receiver. In the Manifest, you also need to define metadata for the widget app, indicating an XML resource file in which you specify the basic properties of your widget.

The widget metadata is defined using the "AppWidgetProviderInfo" resource. Essentially, this involves creating a folder in your application resources directory named "xml" in which you save an XML file with the widget properties outlined in it. These properties include how often you want the widget to update, as well as default dimensions and a preview image. Within your "AppWidgetProvider" class, you can provide methods that will execute whenever the widget app updates, which will occur at the frequency you indicated in your XML metadata file. Within these methods, you can define the behaviour and appearance of your widget, optionally basing this on data fetched from elsewhere.

Rather than simply updating your widget apps at a fixed period, you can also set it up to receive system broadcast announcements. This is particularly useful for widgets that indicate information about the phone state, for example the current battery level. Some widget apps also use the "AlarmManager" class to register and receive announcements at custom periods. If a developer decides to allow the user to set configuration options for a widget app, they normally do this by implementing a click listener for the widget, detecting the user pressing it when it is on the homescreen and presenting a user interface for settings when this occurs.


Testing widgets is broadly similar to testing standard Android apps, although there are some differences depending on the purpose of the widget app in question. For example, when a widget is updating with information about the phone state, for example battery level, WiFi connectivity etc, you will not be able to carry out effective testing on the Android emulator. In such cases a widget app really needs to be tested on an actual Android device, as the device settings on virtual devices do not change in the same way as on real devices.


If you are thinking about attempting an Android widget application and have already developed one or more normal Android apps, you can easily make the required adjustments to your development approach. However, if you are thinking of a widget app as your first foray into Android development, you may have more success by focusing on a standard app first to give yourself a solid foundation on the platform.


An Introduction to HTML5 Features

HTML5 promises to make a serious impact on the future of Web design and development. At the moment the level of browser support is still pretty low, but that doesn't mean you can't start using the new HTML5 features in your projects. For those users whose browsers do support the new features, you can create sites that are more engaging and accessible than before. As long as you ensure your sites are still accessible to the users with a lower level of browser support, providing alternative content items if necessary, you can get stuck into HTML5 now.


The HTML5 DOCTYPE is incredibly simple, which is great news for developers. No more copying and pasting complex and unreadable DOCTYPE declarations, not to mention trying to decide which one to go for and then the inevitable hassle of getting your pages to validate. With HTML5 there is one very straightforward and memorable DOCTYPE declaration. Here it is:

<!DOCTYPE html>

Yes, it really is that easy! Just follow this with your HTML element plus head and body content and away you go. There is no other fundamental difference in terms of page structure with HTML5, so you can update existing markup without too much trouble.

New Elements

Among the most noteworthy HTML5 features are the new elements. With HTML5, the approach to page structure is fundamentally different. HTML5 includes a range of new structural elements: header, footer, nav, aside, section and article - we'll go through these next. HTML5 also includes new media elements such as video and audio, which we'll also briefly introduce. There are actually lots of new elements in HTML5, we're just going through some of the more notable and accessible ones.

Before we get onto actual markup examples, it's worth understanding that HTML5 is designed for more semantic Web design and development than previous versions. In an abstract sense, this means that the markup elements themselves indicate something about the meaning of the element content, rather than being purely structural. Don't worry if you're baffled about the semantic Web development concepts, as they will become clear as we work through the structural elements below.

Structural Elements

The new structural elements in HTML5 allow you to define the parts of your page as semantic items. The header element can be the header content for a page or a section of a page, while the footer element models content for the footer of a page or section. These are indicated by the HTML5 header and footer tags as follows:

page header

Here is some header text

Here is the main content area
Here is the footer info

Most pages contain at least on navigation section, which in HTML5 you can use the nav element for:

The section element defines any kind of section you choose to divide your page into, using section tags as follows:

Here is some info


Grouped together within a section

The article element is designed to be used for a chunk of content that can stand in its own right, i.e. one or more content items that would make sense when presented on its/their own. Examples of article content would be forum and blog posts, news articles etc. The article tags appear as follows:

Here is some news

This is the content of the news

news picture

The aside element provides supplementary content for another content item. The aside tags should include information or other content that is relevant to the content within the element it is contained within, i.e. extra info about the parent element content:

Here is some info

As you can see, the structural HTML5 elements allow you to build a level of logic and meaning into your Web page markup.

Media Elements

HTML5 includes a range of media elements including those for presenting video, audio and the canvas element for JavaScript delivered graphics. The video tags can be included as follows:

The audio tags can be included as follows:

As you can see both the audio and video elements include source elements indicating the names, locations and types of the media files to play.

The canvas element is potentially one of the most exciting new HTML5 features, as it allows your pages to serve graphics through JavaScript directly to your users as they interact with the site. The following code demonstrates the canvas tags:

This draws a simple rectangle outline.

Input Elements

HTML5 offers new options for capturing user input within Web forms. The new elements include datalist, keygen and output. Since these are a little advanced for this introductory article, we won't go through them in detail. If you want to find out how to use the new HTML5 form elements, see the links at the bottom of the article.

Browser Support

At the moment, browser support is the number one issue to consider when building HTML5 websites. The support level is not great at present, but ultimately HTML5 will make it easier to provide support for users with legacy browsers. The browser software programs are of course always evolving, so your HTML5 markup will become more and more usable all the time. There are lots of good resources around the Web listing which HTML5 features are supported by which browsers, so these are well worth checking out on a fairly regular basis if you're planning on using HTML5 now. The HTML5 Please site is one of the most reliable sources.

Although resources like HMTL5 browser support sites are useful, they are not exhaustive and cannot be relied on for guarantees about browser support. As always, it's essential that you test your own sites on as many browsers, device types and operating systems as you can. This is a hazy area at the moment and is likely to be for some time. On the plus side, by getting stuck into HTML5 early on, your future development projects will benefit from the more semantic and user-friendly approach you will have already adopted.

See also:
How To: HTML5 Local Storage
Why Web Developers Are Excited About HTML5 and CSS3
How to Get Started with Web Development

Monday, 27 August 2012

What is Web Content?

It goes without saying that Web content is the content of websites. However, the topic is actually a relatively complex one. Despite the importance of Web development technologies and Web design, the single most important aspect of any site is its content. Content makes the difference between a website's success and failure. This is therefore a vital topic for anyone involved in the Web, particularly where business is concerned.

In this article we will run over the different types of Web content, explain the ways in which this content is delivered to website users and overview a couple of the most important associated technologies and techniques.


By far the most common type of content on websites is text. Text content appears on pretty much every website you are likely to come across. The text within a website includes not only the excerpts you see within the page, but also the titles of pages, the domain for the site as a whole and lots of textual items that appear within the markup of each page.

In the past, many webmasters have attempted to manipulate the search engines to drive traffic to sites by targeting keywords and phrases within website text. The aim in this approach is to make a site appear as close to the top of the search engine results pages (SERPs) for those phrases as possible, making it more likely that people searching for those phrases will visit that particular site. However, the search engine algorithms are always growing in complexity and reducing the effectiveness of this technique. For this reason, the best way to make a site perform well is to simply publish textual and other material that is relevant to the purpose of the site and that provides high quality, useful information.

Although there is little point structuring text content to artificially draw search engine traffic, there is a real art to writing successfully for the Web. People read text differently on the Web than on printed media, with more of a tendency to scan content and less tolerance for text excerpts that are lengthy. Successful Web writing typically involves shorter sentences and clauses, rather than long, complex sentences with lots of punctuation. It is also worth bearing in mind that your readers may be reading in a second language, as they could be from literally anywhere in the world.


Web media comes in many forms, including images, audio/ sound, video, animations and interactive variants on each of these. When deploying media items on websites, there are a number of potential issues to consider. These issues relate to the range of users who will be accessing a site. We have all become accustomed to seeing various types of media when we visit websites, and expect a high level of stimulation in general. Media items can make a site very engaging, but bring with them a range of considerations.

Users can be browsing to a site on a vast range of device types, operating systems and Web browsers. This means that for a successful site, developers and webmasters need to choose content items that are as accessible as possible to this range of environments. For example, if a user is browsing on a mobile device such as a smartphone, they may have limited connectivity. For this reason, many developers look to minimise the size of media resources such as graphics and other digital images, to reduce the download time as far as possible.

For interactive media, users with varied types of hardware control also need to be considered. Many sites are designed to facilitate interaction using a mouse and keyboard, but users of mobile and other portable computing devices such as tablet PCs do not have these in the same way as for a desktop PC. In some cases, developers opt to provide alternative content items for users without the required hardware or software. For example, many media items, particularly video and audio, require specific software programs to be installed on the user device in order to play. This can again cause accessibility issues.


Much website content can also be described as data. A typical example of this would be a retail site in which products are listed for sale, each with a name, description, price and so on. In such cases, this data is normally stored within a database system. When the user visits a site, the content of the site is pulled from the database and presented within the pages. If the user makes a purchase, the database is also updated with this new information. Web content data can include text, numerical figures and even media items. Often, the data is arranged in structured ways within these databases, using data modelling techniques.

Static and Dynamic

Web content is delivered to the user's Web browser in more than one way. In the past, websites simply involved a series of HTML files and media files stored on the server. When the user visited the page, these were simply sent to their browser and displayed there. This was described as static. With the advance in Web technologies, dynamic techniques emerged.

The retail website example is a typical one here. With the product information stored within a database, the pages in such a website are actually built when the user visits them, i.e. when their browser requests them. When the user's browser requests a page, instead of simply returning the page, the Web server runs a program which fetches data from the database, builds it into a page structure in HTML and then sends that to the browser where it is presented to the user.

Dynamic Web content allows sites to use one data store which can be queried from multiple site pages. If there is any need to change the data, it only needs to be changed within the database and this change will be reflected throughout the site.

Content Management Systems

Content Management Systems are commonly used throughout the Web. A Content Management System, or CMS, bridges the gap between the data and the resulting Web pages, automating the process of generating one from the other. Most CMS programs are designed to be usable by people who do not have Web development skills. This means that as a user of a CMS, you can build the content of your site without having to write any code at all. Among the most widely used CMS options are Joomla, Wordpress and Drupal.

Uses of Content

Web content is used to serve a variety of purposes. For example, many commercial ventures use content to attract users to their sites, or Web properties. For example, many people publish articles on sites that are separate to their main site for the purposes of driving traffic to that site. Blogs are a common way to achieve this, with content that is related to the purpose of a site linking back to it.


As you can see, Web content is about much more than simply the text and images you place on a website. Content can be a valuable online asset and is frequently used as a marketing tool. Above all else, it doesn't matter how many complex and impressive technical efforts go into the construction of a site, if the content is not up to standard. By focusing on content first and foremost, website owners have a better chance of success, whatever their aims happen to be.

See also:

Using CSS3 Fonts

CSS3 offers a variety of enhanced features designers and developers can use to create more engaging sites than ever before. CSS3 fonts are among the most significant developments for designers. Essentially, CSS3 allows you to use any font you want within your sites, regardless of whether the user has it installed or not. This is pretty exciting for designers, as user font restrictions have long been a major hassle when implementing designs.

In the past, your Web pages could only display fonts the user had installed on their computer. This meant that whatever font you specified in your CSS code, your site may still not have appeared the way you wanted it to because you had no way of knowing in advance whether any particular user would have that font.You could of course specify fonts to use if your chosen font was not installed, and could use generic descriptions of fonts so that the browser could use whatever font of that type the user did have, for example sans serif. However, even the best case scenario meant an unpredictable user experience.

The font you use in a Web page can have a massive impact on the visual style and usability of the site as a whole, so being able to choose fonts freely is a huge step forward for Web design.

Providing Fonts

CSS3 allows you to use any font because you essentially provide that font as one of your website resources, deploying it from the Web server in the same way you would other style elements such as images.

To include the fonts you want, upload them to your server along with your other resources, taking a note of the location you have them stored at, relative to your site. You can use True Type Fonts, which are saved with ".ttf" extension, OpenType Fonts, which are saved with ".otf" extension and Embedded OpenType Fonts, which are saved with ".eot" as the extension. However, Internet Explorer only supports EOT, while Firefox, Opera, Safari and Chrome support OTF and TTF.

As with most CSS3 properties, older browsers do not support the use of CSS3 fonts in this way at all.

The Font Face Rule

CSS3 uses the font-face declaration to support fonts stored on the server within your Web page designs. The first step in using this technique is defining a font face within the CSS code for your page. You can use the following outline to define a font:

@font-face {
/*give the font a name*/
font-family: productDescriptionFont;
/*tell the browser where to find it*/
src: url('fonts/Really_Cool.ttf'), url('fonts/Really_Cool.eot');

Notice that the source URL is provided twice, once for Internet Explorer (with ".eot") and once for the other supporting browsers. In this case the fonts are stored in a directory named "fonts" that is itself in the same directory as the Web page/ CSS file - wherever this code is stored. The font is named "Really_Cool" just as an example. You should of course alter your code to suit the name and location of your own fonts.

So far we have defined a font, but have not applied it to any Web page elements yet.

Applying the Font

You can apply the font you defined to Web page elements using the usual CSS identifiers. To apply it to all div elements with "description" as the class name, for example in a retail website, use the following code:

div.description {
/*use the font name defined earlier*/

Additional Options

You can use additional options within your font-face definition section. For example, if you use a bold font within your site, you need to include a bold specifier for font-weight within your font-face declaration, if you want italics, you can include it within a font-style declaration and so on. These are optional - the only required ingredients in a font-face section of CSS3 code are the name you want to use to refer to your font and the URL indicating its location on your server.

Whatever rules you apply to your font within the font-face section will be displayed within any Web page elements you apply the font to using its name. This can help to keep your CSS3 code tidy, as you only need one line to apply the font and can apply it within as many CSS declarations as you like. If you decide you want to make a change to the font, you only have to do it within the font-face declaration and it will be reflected throughout your site.


It might seem a bit soon to get excited about emerging technologies and standards such as HTML5 and CSS3, but many of your website users will already have supporting browsers. While it's vital to make sure you accommodate those users without the most recent browser programs, there's absolutely no reason you can't start providing the improved visual effects such as CSS3 fonts to everyone else.

Useful Links

What Is An SQL Max Query?

Websites and computing applications often store data in databases. Database systems such as MySQL and Oracle are common for both Web and desktop programs. When these programs need to retrieve data from a database, they execute query statements on it. Queries can retrieve specific data items, by referring to table and column names. The MAX function in SQL normally appears inside the select statement, which is a data query. The MAX function is particularly useful for numerical data, as it retrieves the maximum value in a column.

In this article we'll briefly go over the purpose and use of the max clause in select query statements, referring in particular to the MySQL database system.


Databases for Web and desktop applications use various systems, but most of them use SQL statements. Developers build application user interfaces on top of databases, writing SQL statements to insert, update and query data. When you visit a website built using a database, the server side scripts within the site will typically execute standard query statements on the data for common tasks.

Databases store many different types of data value, including text strings and numbers. A typical database includes one or more table, with each table having a few columns. Each record in a table may store a value in each column. For example, a table to store product details could have a column representing price. Each record in the table would represent a single product, and would have a value in the price column.

When applications built on databases need to retrieve data, they use query statements, as in the following SQL example:

SELECT price FROM product;

This would retrieve the values in the price column for every record in the product table.

Max Queries

Developers can include additional conditions within query statements, tailoring the data values retrieved. For example, if an application needs to establish the product with the highest cost, it can use a MAX query.

The following code demonstrates:

SELECT MAX(price) FROM product;

This query should result in a single data item, representing the maximum value in the price column. The code uses the MAX clause as part of the statement, including the column name as a parameter to the function. The rest of the statement is the same as a standard query.

As Clause

The MAX clause also appears along with the AS clause. The following code demonstrates:

SELECT MAX(price) AS top_price FROM product;

The AS clause allows developers to assign a name to use as a reference for the resulting data value. This can be particularly useful in cases where the query is selecting a special data item such as the maximum value in a column. Depending on the database system in use, the name specified in the AS clause may appear in the application user interface.

Where Clause

SQL queries involving MAX often also involve WHERE clauses. The following statement demonstrates:

SELECT MAX(price) FROM order WHERE product_type=3;

This would return the maximum price record for a particular product type. The product type could be an additional column in the product table. Scripts for Web and desktop applications in languages such as PHP, ASP and Java can use variables to dynamically load data values into queries, such as the product type in this case.


SQL statements sometimes use the MAX clause in statements involving grouping. The following code demonstrates a grouping query:

SELECT product_type, MAX(price) FROM product GROUP BY product_type;

This would be useful if the developer needs to retrieve the maximum price for each product type. If the query only specifies the column it needs the maximum for, it will only return a single result. Since this statement specifies two columns, one of which is enclosed in a MAX clause, it must also specify which column to group the results by, so that the maximum for each type is returned.


MySQL :: MySQL 5.0 Reference Manual :: 12.2.8 SELECT Syntax
MySQL :: MySQL 5.0 Reference Manual :: 11.15.1 GROUP BY (Aggregate) Functions

Implementing Image Links With JavaScript

Most Web pages link to other pages, within the same site and on other sites. HTML anchor elements are the primary tool used to implement these links. However, JavaScript functions can also implement links between pages. These functions can execute on user interaction with the mouse, such as clicking an image element.

Web pages often include clickable images, particularly in the header area, for example with Web page banners. Using a combination of HTML and JavaScript code, developers can create Web page banner elements that link to other pages. Within the HTML markup for a banner image, the developer can include an event listener attribute to detect user clicks. When the user clicks an image, the JavaScript code can prompt the browser to open a new page. Web page banners can provide visually engaging, interactive elements within sites.

HTML Images

To include images within a Web page banner section, developers can use the HTML image element. The following code demonstrates:

This code includes an image in a dedicated page section. The image element uses a single self-closing tag, with the source attribute indicating the location and name of the image file for the browser to load and display. The "alt" attribute provides text to display if the image file cannot be loaded. The banner for a page may contain multiple different images, linking to different locations.

This markup code demonstrates a basic image element, which instructs the browser to display the image. However, clicking on the image will have no effect. To make the image clickable, the developer must add a click listener.

Click Listener

To implement a link through JavaScript, developers include event listener attributes within their HTML elements. The following extended code demonstrates:

banner picture

This code specifies a JavaScript function for the browser to execute when the user clicks the image element. The function call includes a text string parameter specifying the page to fetch. The address can be a relative or absolute URL (Uniform Resource Locator).

JavaScript Function

Web pages can include sections for JavaScript functions between the opening and closing head tags. The following code demonstrates a script section with a function outline inside it:

This function is called when the user clicks the image. The parameter passed represents the page to browse to. Inside the function, the developer can include code instructing the browser to load the new page.

Open Page

To instruct the user's Web browser to load a particular page, JavaScript code can use the Window object. The following code demonstrates:;

The Window open method allows additional optional parameters. Using these, developers can specify where to open the new page, whether in a new window or in the current one. The "specs" parameter allows developers to indicate details of the browser window when opening the new page, including dimensions. The replace parameter indicates how the new page should be handled in the browser history. Once this code is included in the JavaScript function, users clicking the HTML image element will cause the linked page to load.

Alternatively, JavaScript code can use the Document and Location objects, as follows:

document.location.href = linkPage;

The page address is passed into the function as a parameter when the click event is triggered. The HTML markup for the image lists the actual address to fetch.

See also:
How To: AJAX PHP Functions
Displaying a Substring in JavaScript