Tuesday 13 August 2013

What is an XML File?

What is an XML File?

An XML file, or document, is a file saved with ".xml" extension, in which structured data is stored. XML files store data within markup structures, similar to the HTML markup used to structure Web pages. XML is used in conjunction with many different technologies, for websites and applications running over the Internet as well as software applications running on desktop, laptop and mobile computing devices. XML is a data storage technology, with XML files acting as databases.

Uses

XML data is used in many different types of project, including websites and software applications. The nature of XML is that it can be extended to form other languages based on the same structural rules. For example, many news feeds you see on websites are structured in RSS, which is based on XML. Similarly, the XHTML variant of HTML is XML-structured. For this reason you will find XML files stored on Web servers for use within websites and applications.

Software programs also use XML. An XML document can act as a database, with programs querying, inserting and updating data in conjunction with a user interface. Many of the programming languages in use benefit from tools for processing XML data - these are often referred to XML parsing libraries. XML is prevalent in mobile technology too, with Android applications structuring data, design layouts and shape definitions in XML documents stored within an app structure.

Structure

XML files store data values in markup structures. The following example demonstrates a simple XML structure:

 
  Mary Smith
  John Jones
 
 
  Sarah Mitchell
 
 
  Margaret Cooper
  Mark Simpson
  Paul Hunter
 

This data models the departments and employees in a company. Each element, or node, in an XML document is preceded by an opening tag and followed by a closing tag, which is the same as the opening tag except for a leading slash "/" character. Elements can contain other elements inside them. The opening tag of an XML element can also include attributes, such as "name" in the department element above. Each attribute is listed using a name and a value, which is enclosed in quotation marks. Attributes provide additional information about an element.

XML is tree-structured, with a root node (company in the example) acting as parent to all other nodes in the tree. This is similar to a family tree, except that in XML, an element can have only one direct parent. In the example above, each employee node is a child of a department node and in some cases a sibling of other employee nodes. XML data values can include various data types, such as text strings, numbers and dates.

Tools

XML is a straightforward language to work with in most cases. You can create and edit XML files in a standard text editor program. There are also various XML development and editing software tools available, some free and some commercial. These XML editors are typically equipped with formatting and validating tools, and can sometimes prompt you with code excerpts as you write your markup. XML validators check XML files for markup errors. You can access such XML validation tools through software programs and websites, allowing you to make sure your XML documents are well-formed before you attempt to use the data in them.

Monday 8 April 2013

Will I Lose Emails If I Change Web Hosts?

When you change Web hosts, you will lose emails unless you take steps to retain them. You can keep email addresses when you change Web host as long as you transfer your domain name to your new host. Once you are set up with the new host you can create the same addresses you had at the original host. However, retaining an email address does not retain received and sent email messages at that address. You can take steps to retain this data, as well as other email-related data such as the addresses of your contacts. Preserving your email address ensures that people are still able to contact you even after a Web host change.

Email Address

An email address is associated with a domain name. If your domain name is registered through your existing Web host and you want to keep it, you will need to transfer it to your new host. You can then set up the same email address (or addresses if you have more than one) with your new host. When the domain transfers to your new host, the new version of your email address will continue to receive emails as the old one did. This means that you can continue to use the same email address to send mail and that people can continue to contact you on it. If you do not transfer your domain name and set up the email address again with your new host, you will lose that email address.

Export

Although you can transfer your email address to the new host along with your domain name, this does not mean that the mail associated with your email address will also be transferred. If you do not export emails while you still have a functioning account with your existing host, you will lose those mail messages. When exporting mail, you may need to consider how your mail folders are organized and make sure you export from all relevant mail folders, including any you have in your inbox and sent mail. You may also wish to export email addresses for your contacts if you have an address book.

Import

If you choose to set up your existing email address at your new host, when you access your email account it will not display previously sent and received emails at the address. However, depending on the email client you are using, you may be able to import the mail data you exported from the old host. If you had multiple folders in your mail, for example in the inbox, you may need to manually create these again in the new account before you can import data. Depending on the program you are using, you may be able to import sent mail as well as mail in the inbox folders.

Issues

Although it is possible to retain mail data while transferring a domain and email address from one host to another, you may encounter issues during the process. For example, your new host will become responsible for the details of managing your domain, including domain registration. When a domain changes to a new host or server, it can take some time for the domain to function correctly at its new location. This includes email addresses associated with the domain, so there may be a gap between your email continuing on the old hosting account and becoming available on the new one.

Monday 1 April 2013

Getting Started with SVG Animation

With HTML5, you can embed SVG images inline in your Web pages. Although the level of support for some of the SVG elements still has a long way to go, there are many advantages to using these graphics. Since you create the SVG code in XML in your pages, you can also implement animation and interaction on the contents of an SVG. SVGs are also scalable at any level, so are ideal for catering to different user environments.

In this tutorial we are going to look at basic animation within SVG elements in HTML5 pages. The results will not work in all modern browsers. Although inline SVG is in itself supported in all current versions of the major browsers, the animation elements are not. You will be able to see some of the effects in both Firefox and Chrome, but the effect in which we animate colour can only be reliably viewed in Chrome at the moment. As is always the case with HTML5 skills, this is more of a preview of what we will be able to do in the near future than a practical guide of techniques you can rely on already, so make sure you include alternatives in your live sites. You can see the demo now for an indicator of what we are working towards.

Create an HTML5 Page

Start by creating a new HTML5 page using the following outline:
<!DOCTYPE html>
<html>
<head>
</head>
<body>

</body>
</html>

We won't be using any scripts or CSS in the head section for this tutorial, however, you can use both to apply effects to the elements inside SVGs.

Create the SVG Element

In the body section of your page, add the SVG element as follows:




The remainder of our code will be placed between these opening and closing tags. The main attributes to pay attention to in the opening SVG tag are the dimensions. You can alternatively specify relative percentage values for the width and height if you have CSS dimensions set for the containing page element.

Add the Definitions

The SVG is going to contain shapes, definitions of gradients and animations. Let's start by defining a couple of gradients. The SVG is going to contain a simplistic representation of the sun rising against a blue sky background. In an SVG, you define re-usable items such as gradients in the dedicated defs section, so add it inside the SVG element first:




Inside this section, place a gradient to represent the sky background:

 
 


This is a linear gradient, with an ID so that we can apply it to our shapes when we create them. The x1, y1, x2, y2 attributes represent the start and end co-ordinates of the gradient. In this case we want the gradient to unfold vertically so the start point is the top left corner and the end point is the bottom left corner. The stop elements represent points in the gradient - in this case it is going to go from one shade of blue to another, will full opacity throughout.

Now add a radial gradient for the sun:

 
 


In this case we define the central points of the start and end circles of the gradient - it will spread from the center of the circle shape to its outer edges. The first colour stop starts 20% into the gradient, so there will be an area of solid colour at the centre.

Add the Shapes

The SVG is going to display a rectangle background and circular sun. First add the rectangle, after the closing defs tag but still inside the SVG element:




You can include a shape using a single self-closing tag, but we are going to include the animation properties inside the rectangle element, so we separate the opening and closing tags. The rectangle properties include the x and y co-ordinates for its top left corder and the width and height, which we set to cover the whole image. We set the gradient we defined in the defs section by referring to it in the fill attribute.

Now add the circle element for the sun:




The circle is defined using the co-ordinates for its central point and the length of the radius. Again, we specify one of the gradients already defined. The circle will be in the center of the image, occupying 80% of the total width (twice the radius).

Animate Movement

If you open your page now you will see a static image of the sun in front of the sky background. Now we can add some animation using the SVG animation elements, which come from SMIL animation. First, to animate the sun, making it move into the image as though rising from the horizon, add the following animate element inside the circle element:


This element specifies an animation that will move the circle element on the y axis, which we specify by referring to the cy attribute of the circle. The attribute type tells us what type of animation this is. The from and to attributes indicate the desired start and end positions for the circle. The begin attribute indicates that the animation should start immediately and the dur attribute that it should last 5 seconds. Setting the fill attribute to freeze stops the circle from going back to its original position when the animation has elapsed.

Animate Opacity

As well as moving the circle, let's fade it in at the same time. Add the following animation, also inside the circle element:


This time the animation is on a CSS property - the opacity. We want the circle to go from zero to full opacity, to last 5 seconds and to execute once.

Animate Colour

Let's also animate the sky to complement what is happening with the sun. This animation has less browser support at the time of writing, so you may need to view the page in Chrome to see it in action. Add it between the opening and closing rectangle tags:


This is an animateColor element, which animates a change in colour over 5 seconds. The animation uses the same colours we specified in the linear gradient for the sky - browsers without support for the colour animation will simply display the gradient instead.

Conclusion

That's our basic animation complete. Open your page in a supporting browser to see the result. You should see the sun shape rise up into the image while fading in, as the background changes colour from one shade of blue to a darker one. Check out the demo to see what it should look like. This is really just the beginning when it comes to SVG animation, as there are other elements for transformational animations such as rotations and translations. With any luck you'll be able to use them for more and more users as time passes, but for the moment these effects must necessarily be used with caution.