Lex Diamonds Blog

Tuesday, 28 December 2010

Task 8: Describe and discuss Graphical XML – SVG, giving examples.

First introduced as a public draft in 1999 and as a recommendation (SVG 1.0) in 2001 by the World Wide Web Consortium, the Scalable Vector Graphics (SVG) serve an important role for presenting graphics on the Web as well as in offline and mobile devices. Short for Scalable Vector Graphics, a vector graphics file format that enables two-dimensional images to be displayed in XML pages on the Web. Vector images are created through text-based commands formatted to comply with XML specifications. In contrast to JPEG and GIF images on the Web, which are bitmapped and always remain a specified size, SVG images are scalable to the size of the viewing window and will adjust in size and resolution according to the window in which it is displayed. the current version is 1.1.

SVG graphics can include geometric forms such as lines, points, polygons, curves, circles--as well as text and embedded digital images. These graphics can be displayed, transformed, shaded, textured, animated, and made interactive. SVG is an open standard, which means that its specification is publicly available (at W3C) and many SVG freeware and commercial software tools are available from a wide variety of developers and vendors.

SVG graphics are vector graphics defining shapes such as points, lines, curves, and polygons. This is in contrast to raster graphics, such as those used in a digital photograph, which are based on a large set of individual pixels. SVG graphics are represented in data files that are plain text which is readable by humans and easily edited using a simple text editor.

Below is the list The SVG 1.1 specification defines 14 important functional areas or feature sets.

SVG Features	Functionalities
Path	Clipping path, and coordinates.
Basic Shapes	Straight line path, polygons, circles and ellipses.
Text	Unicode character text included in an SVG file is expressed as XML character data.
Painting	SVG shapes can be filled and/or outlined (painted with a colour, a gradient or a pattern). Also Fills can be opaque or have various degrees of transparency
Colour	Colours can be applied to all visible SVG elements, either directly or via the 'fill', 'stroke' and other properties. Also hexadecimal value, RGB decimal and RGB in percentage.
Gradients and Patterns	Opacity gradients, Colour gradients can be linear or radial (circular).
Clipping, Masking and Compositing	Graphic elements, including text, paths, basic shapes and combinations of these, can be used as outlines to define both 'inside' and 'outside' regions that can be painted (with colors, gradients and patterns) independently.
Filter Effect	Filter effects are defined by filter elements in other word s To apply a filter effect to a graphics element or a container element the 'filter' property is set on a given element.
Interactivity	Hyper linking and event handling
Linking	Hyper linking , SVG images can contain hyperlinks to other documents, using XLink.
Scripting	All aspects of an SVG document can be accessed and manipulated using scripts in a similar way to HTML. Scripting language are *ECMAScript* and JavaScript which are closely related.
Animation	SVG content can be animated using the built-in animation elements such as `<animate>`, `<animateMotion>` and `<animateColor> and the usage of SMIL which stands for` Synchronized Multimedia Integration Language.
Fonts	As with HTML and CSS, text in SVG may reference external font files, such as system fonts
Metadata	Metadata properties includes images creating and description

The code below is a simple example to demonstrate the SVG graphics.

<?xml version="1.0"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

width="526" height="233">

<rect x="13" y="14" width="500" height="200" rx="50" ry="100"

fill="none" stroke="blue" stroke-width="10" />

</svg>

Output Results

Figure: 1.0

Seeing that I have specified the code above it is a simple XML documents with declared in the namespace and then coordinates of the graphic is defined. In this case, a round circle with blue fills around it.

Reference: SVG -Scalable Vector Graphics (2010)[Online] Viewed At: http://www.w3.org/TR/SVG/[Accessed 24-12--2010]

Task 7: Discuss the notion of Xlink. What is its purpose and how do you use it? Give example to illustrate your answers.

What is XLink? XML Linking Language (XLink) is a way of creating a hyperlink in XML. A hyperlink is a reference that a reader can follow to view another Internet page or object. XLink allows you to simulate what HTML does with the tag and create a workable passage inside the document. As with all things XML, there are rules to follow when creating an XLink. Developing a hyperlink with XML requires use of a Uniform Resource Identifier (URI) and namespace to establish the connection. This lets you build a basic hyperlink within your code that can be seen in the output stream. To understand XLink, you must look closer at the syntax in addition In the XML, linking can be either XLink XML Linking Language or XPointer(XML Pointer).

How to use Xlink :

The XLink specification defines constructs that describe links between objects. XLink became a W3C Recommendation on 27th June 2001. These constructs may be inserted into either XML DTDs or XML document instances. The behavior of these links can resemble that of a simple HTML link, or exhibit more sophisticated behavior. This document also covers using the "xlink:" namespace, explanations of XLink's behavior (show and actuate) and semantic (role and title) attributes, plus basic definitions of simple links, extended links, and extended link groups. The following code below is an example to designate the assertion of XLink in the namespace and inserting an XLink within a XML document.

<?xml version="1.0"?>

<homepages xmlns:xlink="http://www.w3.org/1999/xlink">
<homepage xlink:type="simple"
xlink:href="http://www.w3schools.com">Visit W3Schools</homepage>
<homepage xlink:type="simple"
xlink:href="http://www.w3.org">Visit W3C</homepage>

</homepages>

Extended Hyperlinks

As I have discussed above to get access to the XLink attributes and features you must declare the XLink namespace at the top of the document.

The XLink namespace is: "http://www.w3.org/1999/xlink"

The xlink:type and the xlink:href attributes in the <homepage> elements define that the type and href attributes come from the xlink namespace.

The xlink:type="simple" creates a simple, two-ended link (means "click from here to go there"). We will look at multi-ended (multidirectional) links later.

Reference: Use of XLink and XLink Pointer,(2010) [Online] Viewed at: http://xml.coverpages.org/xlinkMaler980402.html [Accessed 23-11-2010].

Task 7: How can XSLT be used (a) to transform an XML structure and (b) to sort the contents of an XML document?

As we might already know XSLT stands for eXtensible Markup Language Transformation. When XSL is used for transformation, XSL takes the form of Extensible Stylesheet Language Transformation (XSLT). An XSLT style sheet is composed of template rules that match specific portions of an XML document and allow the transformation of the XML document content. Not only can XSLT transform an XML document from one dialect to another (often HTML), but it provides many other capabilities for extracting data from an XML document and manipulating that data.

XSL is of interest to any developer who needs to access and manipulate XML documents. XSL is robust, yet easy to learn. Developers can focus on the problem they are solving and the XML document content. Furthermore in html the tags are predefined and their names are significant while in xml you can utilize a tag name in the system and consequently, tag names are insignificant. Another important feature is that the technique of approach with an xml document using XSLT is that in the progression of transformation of XML documents into XHTML, each XML element that presents in the XML documents will be changed into XHTML elements.

Through this feature, you can achieve an assortment of functions on the elements to organize and produce necessary outputs. In addition XPath as I have mentioned in the other posts is decisive in the transformation of a document. In other words Xpath helps the XSLT by proving conversion path next to the XML document element starting from root elements and their attributes. Also XPath supports XSLT in various ways to characterize source documents, which will equal alongside templates that are predefined set of tags. The Transformation process will occur whilst there is corresponding documents between the definite foundation of the document and a outline.

Reference: XSLT Transformation, (2010) [Online] Available at: http://www.webreference.com/xml/resources/books/xsltreference/31290103.htm [Viewed At 23-12-2010].

Thursday, 23 December 2010

Task 7: How can XML be styled using CSS? What are the strengths and weaknesses of using CSS? Give example to illustrate your answers.

CSS

As we may already know CSS stands for "cascading style sheets". Furthermore CSS administers XML documents to be viewed in a web browser in other words a single CSS file can contain positioning, layout , font, colors and style information for an entire web site. The file can be referenced by each html file on the site.CSS is a means of separating the content of an html document from the style and layout of that document. Also Defining a DTD and parsing it in the web browser are fundamental piece with CSS as it is the major imperative component to exhibit the structure of the document and feature part definition in the web browser. in addition,

The main benefit of CSS has already been mentioned - it allows a consistent style to be applied across a number of web pages. If formatting changes are required then changing the style sheet will apply those changes throughout, where the alternative would be to edit all the pages manually. Using web-level style sheets means that all responsibility for formatting can be taken by a single office or person even for a multi-national corporation with dozens of websites.

And there are some weakness using CSS

Cons of CSS

Speed issues -- downloading an HTML file and a CSS file will always take longer than downloading just the HTML file, though this will be offset if the user goes on to download many pages using the same CSS.
Different syntax to HTML -- CSS was developed independently of HTML and uses a different syntax, so a web developer has to learn two sets of formatting syntax instead of one. CSS syntax is also rather clumsy and user-unfriendly.
Requires access to external files -- If you save an HTML file on disk without the associated style sheet then it wil lose its formatting when you look at it offline. Similarly, any pages which depend on a web-level sheet will lose their formatting if access to the web-level sheet site is lost. Similarly, all material linked to from a CSS file (images, for instance) must be available for the CSS to work properly.
Can easily be overridden -- because CSS is an open text-based system there is no security built in, and anyone with read/write access to a website can disrupt the formatting by changing the CSS files or altering the links in the webpages.
Complicates templates -- CSS files are particularly troublesome within authoring packages which use templates, like Dreamweaver, since a CSS link that works within the template may not necessarily work when the template is used to create a web page.
CSS also gets complicated in content management systems (CMSs) like Joomla! and Drupal, because CSS links have to be maintained across a range of directories as files are created and moved around. Most CMSs use CSS files as part of their formatting system, but these are usually fairly complex, and tinkering with them can have unforseen consequences.

As mentioned above creating an XML document, writing the DTD, and parsing it with a browser are all fine, but how will the document display when you view it? XML is not a language of display. In fact, documents written with XML will have no formatting at all.

So, How Do I View My XML?

The key to viewing XML in a browser is Cascading Style Sheets. Style sheets allow you to define every aspect of your XML document, from the size and color of your text to the background and position of your non-text objects.

Say you have an XML document:

<?xml version="1.0" standalone="yes">

<!DOCTYPE family [

<!ELEMENT parent (#PCDATA)>

<!ELEMENT child (#PCDATA)>

<family>

<parent>Judy</parent>

<parent>Layard</parent>

<child>Jennifer</child>

<child>Brendan</child>

</family>

If you were to view that document in an XML ready browser, such as Internet Explorer, it would display something like this:

Judy Layard Jennifer Brendan

But what if you wanted to differentiate between the parent and child elements? Or even make a visual distinction between all the elements in the document. You can't do that with XML, and it is not a language that is meant to be used for display.

But luckily, it is easy to use Cascading Style Sheets, or CSS, in XML documents to define how you want those documents and applications to display when viewed in a browser. For the above document, you can define the style of each of the tags in the same way you would an HTML document.

For example, in HTML you might want to define all text within paragraph tags (<p></p>) with the font face verdana, geneva, or helvetica and the background color green. To define that in a style sheet so that all paragraphs are like that, you would write:

p {

font-family : verdana, geneva, helvetica;

background-color : #00ff00;

}

The same rules work for XML documents. Each tag in XML can be defined in the XML document:

family {

color : #000000;

}

parent {

font-family : Arial Black;

color : #ff0000;

border : solid 5px;

width : 300px;

}

child {

font-family : verdana, helvetica;

color : #cc0000;

border : solid 5px;

border-color : #cc0000;

}

Once you have your XML document and your stylesheet written, you need to put them together. Similar to the link command in HTML, you put a line at the top of your XML document (below the XML declaration), telling the XML parser where to find the stylesheet. For example:

<?xml-stylesheet type="text/css" href="stylesheet.css"?>

As I said above, this line should be found below the <?xml?> declaration, but before any of the elements in the XML document.

Putting it all together, your XML document would read: