Cynthia Duca: January 2012

Sunday, 29 January 2012

Blog 12 - Conclusion

Conclusion

Yet another end of another journey, which started few months ago. With the aid of this blog I improved my knowledge on several different web technologies, mostly XML, since this blog was mainly focused on this area..

Bloging is a good way to make sure that you understood what you learnt, as you will need to explain things to other readers. Explaining certain things like; What is this? and What is that? would be difficult if you don't grasp the concept yourself first.

This blog was a different kind of blog, it was more the kind of question and answer, but where ever it was possible I added some other material of my own to give out something more. There were some sessions which were a bit tiring as there was some question which were exactly the same and repetitive, but in the end the task was always done.

That is it for me for now! Happpyyy Blogging everyone! =)

Blog 11 -

Introduction

Today we will be covering XML Schemas, this comes from the word databaes. This describes the structure of an XML document, it gives out details of relationships and refers to XML schema definition known as XSD.

An XML Schema defines elements, attributes, child attributes and the order of the child attributes. During the lecture we also watched two short clips about XML Schemas. An XSD always starts with "<xs:schema>" for example <xs:elementName = "basicDocument" type = "xs:string">

Quick questions:

The following passage is to be found in the middle of a particular XML document:

The heavily-used<service xlink:type = "simple" xlink:href ="http://www.thetrams.co.uk/croydon"

> Croydon Tramlink </service> provides a cross link to nearby <location>Wimbledon</location>, <location>Addington</location> and <location>Beckenham</location>.

What can you say about how the text Croydon Tramlink will be treated by a browser such as Mozilla Firefox?

Answer
This would be treated as a normal XML hyperlink. As the "show" XLink attribute was not specified, clicking this link would load the site replacing the initial site. As seen in the previous blogs, replace is the default setting for this attribute.

Question 2
It’s possible to provide validation for a class of XML document using a Document Type Definition (.dtd) file, or using an XML schema. The DTD approach is easier. Why might you want to use the XML schema approach?

Answer

All the things that can be defined within a DTD can be also defined by schema, but not vice versa. XML Schemas provide more control over the documents, within an XML Schema it would be easier to describe what is allowed within the content. An XML Schema can work with namespaces while a DTD can't, therefore it provides more flexibility. Another thing which provides flexibility is that XML Schema provide several different data types like string, integer and also dates and decimal numbers on the other hand DTD only uses two data types PCDATA and CDATA.

With XML one doesn't need to learn a new technology and can use the same XML editor when editing XML files.

Longer Questions

Here is an XML document:

<?xml version="1.0" encoding="UTF-8"?>

<title>

Being a Dog Is a Full-Time Job

</title>

<author>Charles M. Schulz</author>

<name>Snoopy</name>

<friend-of>Peppermint Patty</friend-of>

extroverted beagle

</qualification>

</character>

<name>Peppermint Patty</name>

<qualification>bold, brash and tomboyish</qualification>

</character>

</book>

An XML schema is to be constructed, which will validate this document and other similar documents. Make notes on the elements etc that this document contains, and record any significant factors about them.

Answer

Before doing the XML Schema one has to analyze what is needed. At a glance once can start by noticing the main things, like <book> is the root note. One needs to identify the data types that will be used.

<author>, <qualification> and <name> are of type string. While <since> is to be classified under <date> as it specifies days range. Book contains an attribute which is the ISBN of the book this should use a numeric data type. One can also notice that <friend-of> is not used in both character nodes, which makes it that <friend-of> is optional to use it.

References

http://www.w3schools.com/schema/schema_why.asp

http://publib.boulder.ibm.com/infocenter/db2luw/v8/index.jsp?topic=/com.ibm.db2.udb.doc/ad/c0008576.htm

Blog 10 - XLink & Questions

Introduction

This week we introduced XLink which is short for XML Linking Language, which is used in XML documents to create hyperlinks. All elements can be transformed into hyperlinks and behave like one. XLink appart from simple links supports extended links like linking multiple resources together. These links can be defined outside the linked files.

Quick questions:

Question 1

One of the advantages claimed for the “extended links”, that the W3C consortium intended to be part of the XLink language, was that the definition of a particular hyperlink could be located, not in the local resource (the document where the link starts), or the remote resource (the document where the link ends), but in a quite different “third party” document. Why might this be an advantage?

Answer

All XML elements can be turned into hyperlinks. Below is an example showing how the element myScgool is turned into a hyperlink using this facility of XLinks. If the type attribute was set to extended instead of single one would have been able to define multiple links.

<mySchool xlink:type = "simple" xlink:href="http://stcmalta.com"> Click to visit school site </mySchool>

Question 2

The XLink language provides an attribute for a hyperlink called show – it has several possible values. What is the effect of providing such a link with each of the following attribute values?

show=”replace”

show=”new”

show=”embed”

Which of these three attribute values is the default?

Answer

Below are the meaning to each one

show = "new"

When one clicks on the hyperlink a new window is opened.

show = "embed"

When one clicks on the hyperlink a new tab is opened in the same window

show = "replace"

When one clicks the hyperlink the current window which is open will be replaced with that link

By default windows are replaced therefore the default attribute is show = "replace"

Longer questions:

1. Here is an XML document:

<?xml version="1.0"?>

<!DOCTYPE memo SYSTEM memo.dtd">

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

</memo>

<date>date: 11 November 09</date>

<sender>from: The Managing Director</sender>

<addressee>to: Heads of all Departments</addressee>

<message>I think we should be making wind-turbines. Have a look at this website. Tell me what you think. </message>

</memo>

The accompanying .dtd file looks like this:

<?xml version= "1.0" ?>

<!DOCTYPE memo [

<!ELEMENT memo (heading, date, time, sender, addressee, message)>

<!ELEMENT heading (#PCDATA)>

<!ELEMENT date (#PCDATA)>

<!ELEMENT time (#PCDATA)>

<!ELEMENT sender (#PCDATA)>

<!ELEMENT addressee (#PCDATA)>

<!ELEMENT message (#PCDATA)>

At the point where the document says this website, there is supposed to be a hyperlink that takes the reader to the website:

http://engineering.suite101.com/article.cfm/wind_power

a) Amend the document, so that the link is in fact there. Make any necessary changes to the .dtd file as well.

b) Suppose that the heading of one of the sections in the target website is <A NAME=“WE Elec Facts”>Wind Energy Electricity Facts</A>, including the tags as shown. What changes would you have to make to the link in the managing director’s memo, to make the hyperlink finish at that point rather than at the wind_power document as a whole?

Answer a

1.<memo xmlns:xlink="http://www.linkgoeshere">
2. <heading>memo 1334</heading>
3. <date>date: 11 November 09</date>
4. <time>time: 09:30</time>
5. <sender>from: The Managing Director</sender>
6. <addressee>to: Heads of all Departments</addressee>
7. <message>I think we should be making wind-turbines. Have a look at
8. <link xlink:type="simple"xlink:href="http://engineering.suite101.com/article.cfm/wind_power">this website
9.</link>.
10. Tell me what you think.
11. </message>
12. </memo>

Above is the modified XML document, including the HYPERLINK. First the namespace was declared which is found in line 1, which is the root node. On line 8 there is the new element which was added so that the hyperlink can be added. The attribute simple was used for the xlink:type. This shows that there is one hyperlink.

1. <?xml version= "1.0">
2. <!ELEMENT memo (heading, date, time, sender, addressee,message)>
3. <!ATTLIST memo xmlns:xlink CDATA #FIXED "http://www.linkgoeshere">
4. <!ELEMENT heading (#PCDATA)>
5. <!ELEMENT date (#PCDATA)>
6. <!ELEMENT time (#PCDATA)>
7. <!ELEMENT sender (#PCDATA)>
8. <!ELEMENT addressee (#PCDATA)>
9. <!ELEMENT message (#PCDATA|link)*>
10. <!ELEMENT link (#PCDATA)>
11. <!ATTLIST link xlink:href CDATA #REQUIRED xlinkL:type (simple |extended) #REQUIRED>

Above is the DTD arranged after the changes have been made to the XML file as this won’t validate anymore with the original DTD. Everything remained the same except some elements and attributes were added. Line 3 is a new line which defines the memo element and is the xmlns:xlink. Line 9 was changed to allow not only allow parsed data hence #PCDATA but also the link elements. Line 11 shows the link element needs and “href” and a “type” attribute, which can be set to either simple or extended.

Answer B

This can be arranged by adding an “#” followed with the name of the anchor

<link xlink:type = “simple”

xlink:href =http://engineering.suite101.com/article.cfm/wind_power#WE ElecFactsthis website</link>.

Question 2.
Here is another XML document:

<?xml version="1.0"?>

<!DOCTYPE memo SYSTEM memo.dtd">

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

</memo>

<date>date: 11 November 09</date>

<sender>from: The Managing Director</sender>

<addressee>to: Heads of all Departments</addressee>

<message>I think we should be making solar panels. Have a look at this website. Tell me what you think. </message>

</memo>

At the point where the document says this website, there is supposed to be a hyperlink that takes the reader to a suitable website. Find one, and amend the document, so that the link is in fact there. Is it necessary to make any changes to the .dtd file, or can we use the file as you amended it before?

Answer 2

This question is the same as the previous question, a namespace is to be declared within the root node. A new element is to be added where on can add the hyperlink as shown below. Since the link will be only replaced there is no need for the DTD to be fixed, therefore it will validate with the existing one.

Wednesday, 25 January 2012

Blog 9 - CSS, XPATH and Questions

Introduction

This week the questions cover Cascading Style Sheets (CSS) and I will also include small information about AJAX.

CSS is not obligatory however this will enhance and transform the site by adding background colours, changing font-sizes or font-face and positioning divs. The advantage of CSS is that with CSS one has got to only change the style sheet on one page and it will effect all the pages. This CSS file is linked into all HTML pages.

Exchange of information between server side scripting and client side scripting.

Ajax, made out of Javascript and XML. Ajax is a web application, this works as following; Javascript code sends a request to the PHP script which in return sends back XML data. The Javascript code uses that data to update only parts of a website instead of refreshing the whole page. This was introduced when Java applets where introduced in 1995.

Questions

Quick Question

Question 1

Suppose that a CSS file is used to determine how an XML document will appear when viewed in a browser. Suppose that the CSS file contains two rules, one dictating that a particular piece of text will appear in bold type, the other dictating that it will not. What will happen?

Answer

CSS uses the overwriting method. When there are two rules opposing each other, the last rule which is declared will be considered. Therefore in this case the text will not appear bold.

Question 2

An XML document contains the sentence “The grand old Duke of York, he had 10000 men.” Would XPath be able to extract the piece of data “10000” from such a document?

Answer

Yes, with XPATH it will be able to extract that kind of information. XPATH is another query language and this consists of several different functions one of which is extracting data from a document. This can be done by using the function substring (string,start,len) which will return a substring from the start to the defined position of the string.

substring ("The grand old Duke of York, he had 1000 men.", 35,5)

This means that the position that needs to be extracted starts after the 35th character and is 5 characters long.

Longer Questions

Question 1

Open JCreator and open the chemElements2.xml file in it. Add a line to the document that will cause it to be viewed (in the browser) in conjunction with a CSS file called stylesheet01.css

Answer

CSS is one file which contains all styles, this is then linked to all other pages. In each technology it has each own way of how it is suppose to be declared. In XML it is declare as following;

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

Question 2

Write the file, stylesheet01.css, and store it in the same folder. The content of this CSS file should cause the table to appear in the Mozilla Firefox browser, as described above. Make your own decisions about suitable typefaces, borders, background colours, alignment, etc.

Answer

The below screen shot is the initial result. Where there was no CSS file linked to it.

In Firefox with no styling

We than had to create a style of our own with appropriate settings to make it look like a table with content in it. Below is the code for styling this content and presenting a table layout.

1. chemElements

2. {

3. width:900px;

4. }

7. tableHead *

8. {

9. font-weight:bold;

10. font-family:Georgia, "Times New Roman", Times, serif;

11. font-size:14px;

12. width:150px;

13. background-color:#990033;

14. color: #FFFFFF;

15. padding: 5px 5px 5px 5px;

16. border-right: 1px solid #000000;

17. border-bottom: 1px solid #000000;

18. display:block;

19. float:left;

20. height:20px;

21. text-align:center;

22. }

23.

24. element *

25. {

26. font-family:Arial, Helvetica, sans-serif;

27. font-size:12px;

28. width:150px;

29. background-color:#CCCCCC;

30. padding: 5px 5px 5px 5px;

31. border-right:1px solid #000000;

32. border-bottom:1px solid #000000;

33. display:block;

34. float:left;

35. height:20px;

36. text-align:center;

37. }

First the root tag was style as seen on line 1. A width for the table was specified. From line 11 to line 22 the another header is specified which is the tableHead, this is the header of the table, first I added some font styles, added a border and a background colour. Float:left on line 23 will allow each column to come side by side instead of having each one beneath the other. Next the "content of the table " is defined. Once again the font-styles where set, a background colour and some borders were added and displayed the text at the centre of each box. Below is the result of the XML containing some CSS styles.

Question 3

Consider the following XML document:

<?xml version= "1.0" ?>

<!DOCTYPE book SYSTEM "musicList.dtd">

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

<musicList

number="2" title="miscellaneous CDs"

xmlns:cdlist=”http://middlesex_press.co.uk/CDcollection ”>

<title>The Best of Ivor Cutler</title >

<artist>Ivor Cutler</artist >

<cdlist:refnum> POL767 </ cdlist:refnum >

</cd>

<title>Penderecki’s First Symphony</title >

<artist>Middlesex Symphony Orchestra</artist >

<cdlist:refnum> DGM987 </ cdlist:refnum >

</cd>

<title>Penderecki’s Last Symphony</title >

<artist>Middlesex Symphony Orchestra</artist >

<cdlist:refnum> DGM988 </ cdlist:refnum >

</cd>

<title>Boris the Spider Rides Again</title >

<artist>The Renegades</artist >

<cdlist:refnum> CHR328 </ cdlist:refnum >

</cd>

</musicList>

Answer a

musicList/*

Answer b

//tracks[@total = 5]

Answer c

/cd/[contains(title,"Penderecki")]

//title[contains[.,"Penderecki")] <!--title elements containing Pendereck in the text->

Answer d

//title[string-length(.) >11]

Answer e

//cd[1]/*

References:

http://en.wikipedia.org/wiki/Ajax_(programming)

http://www.w3.org/Style/CSS/

http://www.w3schools.com/xpath/xpath_syntax.asp

Week 8 XPATH and Questions

Introduction

This week we tackled XPath.

What is Xpath? This is a query language where, one can navigate through elements and attributes in an XML Document. It can also be used for computation of certain values, like Boolean. Xpath is based on a tree of a document and goes round that document searching for nodes. In other words it is choosing a path within multiple paths. To specify a path one can use:

/bookstock/book. This means that the root node is bookstock and it will go down to the next directory which in this case is book.

Quick Questions
Question 1

You have a set of legal documents. Each has four sections: the title, the case, the background and the judgement, in that order. Each has been made into an XML document by inserting a prolog and suitable tags. You want to write a CSS file that will display these documents using a suitable browser.

Can you write the CSS file in such a way that it will display the title, then the judgement, then the background, then the case?
Can you write the CSS file in such a way that it will display just the title, and the judgement?
If the CSS file is called legalWrit.css, what processing instruction should you put in the prolog of the XML document(s)?

Answers:

1.a

CSS is used for applying style-sheets to pages for making them more visually attractive, like enhancing font size and colour. Using margins and positioning, can place certain orders but only to enhance the order in which they are visually viewed. In this case an XSL should be used to arrange the order of the document.

1.b

Yes one can hide certain parts of a document by using either:

display:none or display:hidden

1.c

One can do this by using the href. Href points to something you want to "add"

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

Question 2

What is the difference between URI and URL?

Answer

URI stands for Uniform Resource Identifier. This is used to identify a name or resource on the Internet and is made of a string of characters. This identification is used to interact with representations of a resource over a network using specific protocols.

What does a URI do? It describes how the resource is accessed where the computer is housed which contains the resource and the specific file name of the resource

While on the other hand URL stands for Uniform Resource Locator defines and specifies the location of a resource. It is a type of URI.

Question 3
Why does the XML language allow namespaces?

Answer:
When giving names to elements and attributes developers might use the same names by mistakes. In XML this can be fixed by using a sort of name prefix, this way conflicts in names are avoided. For example:

<s:school xmlns:s="http://linkgoeshere.com">

    <s:name> STC </s:name>

</s:school>

<l:location xmlns:l = "http://linkgoeshere.com">

    <s:name> STC </s:name>

</l:location>

Longer Questions:
Question 1

Here is a short XML document. Type it out, as a new file in JCreator. Save it under the name memo1.xml in a suitable directory in your file system. Notice that the JCreator editor picks out the different components in different colours, to aid you in detecting errors. Now open another tab in JCreator and type the following style sheet out. Save it under the name stylesheet01.css in the same folder as memo1.xml. Notice that, this time, the editor does not pick out the different components in different colours.

memo {display: block; margin: 1em;}

id {display: block; margin: 1em; font-style: italic; font-size:200%}

date {display: block; margin: 1em;color: "dark blue"; text-align: left;}

time {display: block; margin: 1em;color: aqua; text-align: left;}

from, to {display: block; margin: 1em;color: green; text-align: left;}

message {display: block; margin: 1em;color: blue; text-align: left;}

Now use the Mozilla Firefox browser to view the file memo1.xml.

Answer 1:

Question 1.b
What was the point of putting “display: block” into the CSS file in each of the 6 lines?

Answer 1.b

This is a CSS styling which allows you to define how you are going to display your HTML. In this case block which will put one beneath another. This doesn't allow HTML elements next to it, except if the float element is declared.

There are other display methods like inline, none, list-item and inline-block.

Question 2

We want the chapter we were working on last week (“Chapter 2: Volcanic winter”) to be displayed on screen in a web browser. Here are some of the features we would like it to have: the font for the text to be Palatino, or failing that Times New Roman, or failing that any serif face. Type size to be 12 pt. The chapter heading to be the same font, but 24 pt and bold and italic and blue. The poem lines to be the same font, but italic. Background colour to be parchment: use the colour #FCFBC4. Both the chapter heading and the main text are to be indented from the left margin by 1 em. The lines of poetry are to be indented from the left margin by 2 ems.

Write a CSS file that will enable the chapter to be displayed in this way. Call it stylesheet4.css

1.  chapter

2. {
3. display:block;
4. font-family: Palatino, "Times New Roman", serif;
5. font-size:12px;
6. background-color:#FCFBC4;
7. padding-left: 1em;
8. }
9. chapterHead
10. {
11. display:block;
12. font-size:24px;
13. font-weight: bold;
14. font-style: italic;
15. color:blue;
16. }
17. poem
18. {
19. font-style: italic;
20. }
21. line
22. {
23. padding-left: 2em;
24. display:block;
25. }

Question 2.2

Type some – not all – of the XML document version of “Chapter 2: Volcanic winter” into a suitable file. Store it in the same folder as the stylesheet4.css document you have just written. View the file, using the Mozilla Firefox browser. See whether it looks as it should. If not, change the CSS file and view it again. Repeat this until you have it right.

Answer 2.2

Question 3

Right a different CSS file, with different display properties, and adjust your XML file so that it is displayed using this one instead. Use display properties that seem appropriate to you.

Answer

The below is an arranged version of the XML document. Where some of the style was changed like; margins, colors, font-sizes, font-face, padding and other things to improve the look.

References:
http://www.w3schools.com/xpath/
http://searchsoa.techtarget.com/definition/URI
http://www.quirksmode.org/css/display.html

Sunday, 29 January 2012

Blog 12 - Conclusion

Blog 11 -

Blog 10 - XLink & Questions

Wednesday, 25 January 2012

Blog 9 - CSS, XPATH and Questions

Week 8 XPATH and Questions

About Me

Blog Archive