Scribd
Upload
21 views103 pages

Unit-1 XML To RWD

Uploaded by

Shin Chan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
21 views103 pages

Unit-1 XML To RWD

Uploaded by

Shin Chan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 103

CUSTOMER INTERFACE DESIGN AND

DEVELOPMENT
SITA1502
Subject Code : SITA1502
Subject Name: Customer Interface Design
and Development

Faculty Name: Dr. R. M. Gomathi/


Ms. E. Brumancia
2
eXtensible Markup language
( XML )
XML
• XML stands for eXtensible Markup Language.
• Xml is designed to transport and store data.
• Xml is important to know, and very easy to learn.
• Xml is a markup language much like html.
• Xml was designed to carry data, not to display data.
• Xml tags are not predefined. You must define your own tags.
• Xml is designed to be self-descriptive.
• Xml is a W3C recommendation.
The Difference Between XML and HTML
• XML was designed to transport and store data, with focus on what data is.
• HTML was designed to display data, with focus on how data looks
XML Tree
• XML documents form a tree structure that starts at "the root" and branches to "the leaves".
• Xml documents form a tree structure
• XML documents must contain a root element. This element is "the parent" of all other elements
• The elements in an XML document form a document tree. The tree starts at the root and branches to the
lowest level of the tree.
• Syntax: <?xml version="1.0" encoding="ISO-8859-1"?>
<Root> <note>
<child> <to>Tove</to>
<from>Jani</from>
<subchild>.....</Subchild>
<heading>Reminder</heading>
</child> <body>Don't forget me this weekend!</body>
</root> </note>
• The terms parent, child, and sibling are used to describe the relationships between elements. Parent
elements have children. Children on the same level are called siblings
<?xml version="1.0"?>
<bookstore>
<book category="cooking">
<title lang="english">Everyday Italian</title>
<author>Giada De Laurentiis</author>
<year>2005</year>
<price>30.00</price>
</book>
<book category="children">
<title lang="english">Harry Potter</title>
<author>J K. Rowling</author>
<year>2005</year>
<price>29.99</price> </book>
</bookstore>
Output:1
Output:2

Dr.R.Jeberson, Dept of IT, Sathyabama University


XML Syntax Rules (Well formed xml)
• All XML elements must have a closing tag
• XML tags are case sensitive
• XML elements must be properly nested
• XML documents must have a root element
• XML attribute values must be quoted
• Comments in XML
• White-space is preserved in XML
XML Elements
• An XML element is everything from (including) the element's start tag to (including) the element's end tag.
• An element can contain other elements, simple text or a mixture of both. Elements can also have attributes
Example: <Bookstore>
<Book Category=“prog">
<Title>java</Title>
<Author>james Gosling</Author>
<Year>2005</Year>
<Price>rs. 500.00</Price>
</Book>
</Bookstore>
• In the example above, <Bookstore> and <Book> have element contents, because they contain other
elements. <Author> has text content because it contains text.
• In the example above only <Book> has an attribute (Category=“prog").
XML Naming Rules
• XML elements must follow these naming rules:
• Names can contain letters, numbers, and other characters
• Names cannot start with A number or punctuation character
• Names cannot start with the letters xml (or XML, or xml, etc)
• Names cannot contain spaces
• Any name can be used, no words are reserved
• Best naming practices
• Make names descriptive. Names with an underscore separator are nice
• <First_name>, <last_name>.
• Names should be short and simple, <book_title>
• Avoid "-" characters, avoid "." characters, avoid ":" characters
XML Attributes
• XML elements can have attributes in the start tag.
• Attributes provide additional information about elements.
• XML attributes must be quoted.
• Attribute values must always be enclosed in quotes, but either single or double quotes
can be used.
• For a person's sex, the person tag can be written like this
<Person sex="female"> or <person sex='female’>
Example:
<person sex="female">
<firstname>anna</firstname>
<lastname>smith</lastname>
</person>
DOCUMENT TYPE DEFINITION ( DTD )
Introduction to DTD
• A Document Type Definition (DTD) defines the legal building blocks of an XML
document
• It defines the document structure with a list of legal elements and attributes.
• The purpose of a DTD is to define the structure of an xml document
• Types
• Internal DTD
• External DTD
DTD – Example:
<!Doctype Note [
<!Element Note (To,from,heading,body)>
<!Element To (#PCDATA)>
<!Element From (#PCDATA)>
<!Element Heading (#PCDATA)>
<!Element Body (#PCDATA)>
]>
Internal DTD Declaration
The DTD is declared inside the xml file. It should be wrapped in a DOCTYPE Definition.
Syntax
<!Doctype Root-element [Element-declarations]>
Eg.
<?Xml Version="1.0"?>
<!Doctype Note [
<!Element Note (To,from,heading,body)>
<!Element To (#PCDATA)>
<!Element From (#PCDATA)>
<!Element Heading (#PCDATA)>
<!Element Body (#PCDATA)>
]>
<Note>
<To>tove</To>
<From>jani</From>
<Heading>reminder</Heading>
<Body>don't Forget Me This Weekend</Body>
</Note>
Explanation
• The dtd above is interpreted like this:
• !DOCTYPE note defines that the root element of this document is note
• !ELEMENT note defines that the note element contains four elements: "to, from,
heading, body"
• !ELEMENT to defines the to element to be of type "#pcdata"
• !ELEMENT from defines the from element to be of type "#pcdata"
• !ELEMENT heading defines the heading element to be of type "#pcdata"
• !ELEMENT body defines the body element to be of type "#pcdata"

Note: #PCDATA means parseable character data


External DTD Declaration
The DTD is declared in an external file. It should be wrapped in a
DOCTYPE definition
Syntax:
<!Doctype root-element system "filename">
Eg ‘Sample.XML’
The file "note.dtd" which contains the DTD
<?xml version="1.0"?> <?xml version="1.0"?>
<!DOCTYPE note system "note.dtd"> <!Element Note (To,from,heading,body)>
<Note>
<To>tove</To> <!Element To (#PCDATA)>
<From>jani</From> <!Element From (#PCDATA)>
<Heading>reminder</Heading> <!Element Heading (#PCDATA)>
<Body>don't forget me this weekend!</Body> <!Element Body (#PCDATA)>
</Note>
Why Use a DTD?
• With a DTD, each of your XML files can carry a description of its own format.
• With a DTD, independent groups of people can agree to use a standard DTD for
interchanging data.
• Your application can use a standard DTD to verify that the data you receive from the
outside world is valid.
• You can also use a DHT to verify your own data.
XML SCHEMA DEFINITION (XSD)
What is an XML Schema?
An XML schema describes the structure of an XML document.
The XML schema language is also referred to as XML Schema
Definition (XSD).

The purpose of an xml schema is to define the legal building blocks of


an xml document:
• The elements and attributes that can appear in a document
• The number of (and order of) child elements
• Data types for elements and attributes
• Default and fixed values for elements and attributes
Why Learn XML Schema?
• In the XML world, hundreds of standardized XML formats are in
daily use.
• Many of these xml standards are defined by xml schemas.
• Xml schema is an xml-based (and more powerful) alternative to
DTD.
• XML schemas support data types
• XML schemas use XML syntax
• XML schemas secure data communication
Basics of XML Schema
Need to use the XML schema namespace (generally named xsd)
• Simpletypes are a way of restricting domains on scalars
• Can define a simpletype based on integer, with values within a particular range
• Complextypes are a way of defining element/attribute structures
• Basically equivalent to !ELEMENT, but more powerful
• Specify SEQUENCE, choice between child elements
• Specify MINOCCURS and MAXOCCURS (default 1)
• Must associate an element/attribute with a simpletype, or an element with a
complextype
Xml namespaces
Name conflicts
• In XML, element names are defined by the developer. This often results in a conflict when trying to mix XML documents from
different XML applications.
• This XML carries HTML table information:
<table>
<tr>
<td>apples</td>
<td>bananas</td>
</tr>
</table>
• This XML carries information about a table (a piece of furniture):
<table>
<name>African Coffee Table</name>
<width>80</width>
<length>120</length>
</table>
• If these XML fragments were added together, there would be a name conflict. Both contain a <table> element, but the elements
have different content and meaning. An xml parser will not know how to handle these differences
Solving the Name Conflict Using a Prefix
• Name conflicts in XML can easily be avoided using a name prefix.
• This xml carries information about an html table, and a piece of furniture:
• <h:table>
<h:tr>
<h:td>apples</h:td>
<h:td>bananas</h:td>
</h:tr>
</h:table>

<f:table>
<f:name>african coffee table</f:name>
<f:width>80</f:width>
<f:length>120</f:length>
</f:table>
• In the example above, there will be no conflict because the two <table> elements have different names.
XML Namespaces - The xmlns Attribute
• When using prefixes in XML, a so-called namespace for the prefix must be defined.
• The namespace is defined by the xmlns attribute in the start tag of an element.
• The namespace declaration has the following syntax. xmlns:prefix="uri".
• <root>
<h:table xmlns:h="http://www.W3.Org/TR/html4/">
<h:tr>
<h:td>apples</h:td> <f:table
<h:td>bananas</h:td> xmlns:f="http://www.W3schools.Com/furniture">
</h:tr> <f:name>african coffee table</f:name>
</h:table> <f:width>80</f:width>
<f:length>120</f:length>
</f:table>
</root>
XML Namespaces - The xmlns
Attribute(con…)
• Namespaces can be declared in the elements where they are used or in the XML root element:
<root
xmlns:h="http://www.W3.Org/TR/html4/"
xmlns:f="http://www.W3schools.Com/furniture">
<h:table>
<h:tr>
<h:td>apples</h:td>
<h:td>bananas</h:td>
</h:tr>
</h:table>

<f:table>
<f:name>african coffee table</f:name>
<f:width>80</f:width>
<f:length>120</f:length>
</f:table>
</root>
XSD Example - ‘note.xsd’
<?xml version="1.0"?>
<xsd:schema xmlns:xsd="http://Www.W3.Org/2001/xmlschema">

<xsd:element Name="note">
<xsd:complextype>
<xsd:sequence> This is the root element, Associates “xsd” namespace
with type specified below with XML Schema
<xsd:element Name="to" Type="xsd:string"/>
<xsd:element Name="from" Type="xsd:string"/>
<xsd:element Name="heading" Type="xsd:string"/>
<xsd:element Name="body" Type="xsd:string"/>
</xsd:sequence>
</xsd:complextype>
</xsd:element>
</xsd:schema>
Referencing a Schema in an XML Document
<?xml version="1.0"?>

<Note xmlns="https://www.W3schools.Com"
xmlns:xsi="http://www.W3.Org/2001/xmlschema-instance"
xsi:schemalocation="https://www.W3schools.Com note.xsd">

<to>tove</to>
<from>jani</from>
<heading>reminder</heading>
<body>don't forget me this weekend!</Body>
</note>
Explanation
• The <schema> element is the root element of every XML schema
• xmlns:xsd=http://www.W3.Org/2001/xmlschema indicates that the elements and data types used in the
schema come from the "http://www.W3.Org/2001/xmlschema" namespace and should be prefixed
with xsd:
• xmlns="https://www.w3schools.com" this declaration tells the schema-validator that all the elements
used in this XML document are declared in the "https://www.w3schools.com" namespace
• Once you have the XML schema instance namespace available:
xmlns:xsi="http://www.W3.Org/2001/xmlschema-instance"
• We can use the schemalocation attribute. This attribute has two values, separated by a space. The first
value is the namespace to use. The second value is the location of the XML schema to use for that
namespace:
xsi:schemalocation="https://www.W3schools.Com note.xsd"
DTD vs XSD
XML PARSER
• XML parser is a software library or a package that provides interface for
client applications to work with XML documents.
• It checks for proper format of the XML document and may also validate the
XML documents. Modern day browsers have built-in XML parsers.
• The goal of a parser is to transform xml into a readable code.
XML - Document object model
(DOM)
XSL (Extensible Stylesheet Language)
XSL (Extensible Stylesheet Language)

• XSL (Extensible Stylesheet Language), formerly called Extensible Style


Language, is a language for creating a style sheet that describes how data sent
over the Web using the Extensible Markup Language (XML) is to be presented to
the user.
XForms
XForms

• XForms is an XML format used for collecting inputs from web forms.
XForms was designed to be the next generation
of HTML / XHTML forms.
• XForms uses XML to create input forms on the Web.
What You Should Already Know
Before you continue you should have a basic understanding of the following:

HTML
HTML Forms
XHTML
XML
What Is XForms?
XForms is the next generation of HTML forms
XForms is richer and more flexible than HTML forms
XForms is platform and device independent
XForms separates data and logic from presentation
XForms uses XML to define form data
XForms stores and transports data in XML documents
XForms contains features like calculations and validations of forms
XForms reduces or eliminates the need for scripting
XForms is a W3C Recommendation
XForms is the successors of HTML Forms

Forms are an important part of many web applications today. An HTML form makes it
possible for web applications to accept input from a user.

Today, ten years after HTML forms became a part of the HTML standard, web users
do complex transactions that are starting to exceed the limitations of standard HTML
forms.

XForms provides a richer, more secure, and device independent way of handling web
input.
XHTML
TRANSFORMATIONS
XSL
T
 XSL has two independent languages:

 The XSL Transformation Language (XSLT)


 The XSL Formatting Object Language (XSL-FO)

 XSLT is used to convert an XML document to another format.

 XSL-FO provides a way of describing the presentation of an XML document.

 Both technologies use a supporting XML technology, XPath.

 XPath defines a standard mechanism for accessing elements within a document.


Creating the XSL Style Sheet
 An XSL style sheet has the following general structure:
<?xml version=”1.0”?>
<xsl:stylesheet xmlns:xsl=”URI” version=”1.0”>
<!--XSL-T CONVERSION RULES-->
</xsl:stylesheet>
 The <xsl:stylesheet> element defines how the XSLT processor should
process the current XSL document.
 The xmlns attribute is the namespace definition.
 The XSL Transformation engine reads the xmlns attribute and
determines whether it supports the given namespace.
 The xmlns attribute specifies the XSL prefix.
 All XSL elements and types in the document use the prefix.
<xsl:template> element
 The <xsl:template> defines template rules for the XSLT processor.
 A template is associated with a given element in the XML document.
 A template is defined to match on the <book> element using the following
code:
<xsl:template match=”/book”>
<!--static text and xsl rules -->
<xsl:value-of> element
 The <xsl:value-of> element contains a select attribute.
 This attribute value is the name of the actual XML element you want
to retrieve.
 For example, the following code will retrieve the title of
the book:

<xsl:value-of select=”title” />


students.xml
<?xml version = "1.0"?>
<?xml-stylesheet type = "text/xsl" href = "students.xsl"?>
<class>
<student rollno = "393">
<firstname>Dinkar</firstname>
<lastname>Kad</lastname>
<nickname>Dinkar</nickname>
<marks>85</marks>
</student> <student rollno = "593">
<student rollno = "493"> <firstname>Jasvir</firstname>
<lastname>Singh</lastname>
<firstname>Vaneet</firstname>
<nickname>Jazz</nickname>
<lastname>Gupta</lastname> <marks>90</marks>
<nickname>Vinni</nickname> </student>
<marks>95</marks> </class>
</student>
students.xsl
<?xml version = "1.0" encoding = "UTF-8"?> <xsl:for-each select = "class/student">
<xsl:stylesheet version = "1.0" <tr>
xmlns:xsl = "http://www.w3.org/1999/XSL/Transform"> <td><xsl:value-of select = "@rollno"/></td>
<td><xsl:value-of select = "firstname"/></td>
<xsl:template match = "/"> <td><xsl:value-of select = "lastname"/></td>
<html> <td><xsl:value-of select = "nickname"/></td>
<body> <td><xsl:value-of select = "marks"/></td>
<h2>Students</h2> </tr>
<table border = "1"> </xsl:for-each>
<tr bgcolor = "#9acd32"> </table>
<th>Roll No</th> </body>
<th>First Name</th> </html>
<th>Last Name</th> </xsl:template>
<th>Nick Name</th> </xsl:stylesheet>
<th>Marks</th>
</tr>
OUTPUT
Example 1
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0“ xmlns:xsl="http://www
.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<body>
<h2>My CD Collection</h2>
<table border="1">
<tr bgcolor="#9acd32">
<th>Title</th> <th>Artist</th>
</tr>
Example 1
<tr>
<td><xsl:value-of select="catalog/cd/title"/></td>
<td><xsl:value-of select="catalog/cd/artist"/></td>
</tr>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
Looping
 The XSLT element <xsl:for-each> is used for looping through a list of
elements.

 This is very useful when you have a collection of related items


to process them in a sequential fashion.

 The <xsl:for-each> element is commonly used in the Web development


world to convert an XML document to an HTML table.

<xsl:for-each select=node-set-expression>

<!-- content -->

</xsl:for-each>

 The <xsl:for-each> element has a required attribute: select.


Example
<?xml version=”1.0”?>
<xsl:stylesheet xmlns:xsl=”http://www.w3.org/1999/XSL/Transform”
version=”1.0”>
<xsl:template match=”/”>
<html><body>
<h3>Looping Example</h3>
<hr></hr>
<table border=”1” cellpadding=”5”>
<tr>
<th>Author</th>
<th>Title</th>
<th>Category</th>
<th>Price</th>
</tr>
Example
<xsl:for-each select=”booklist/book” >
<tr>
<td> <xsl:value-of select=”author” /> </td>
<td> <xsl:value-of select=”title” /> </td>
<td> <xsl:value-of select=”category” /> </td>
<td> <xsl:value-of select=”price” /> </td>
</tr>
</xsl:for-each>
</table>
</body></html>
</xsl:template>
</xsl:stylesheet>
Example
Xlink

 XLink is used to create hyperlinks within XML documents


 Any element in an XML document can behave as a link
 With XLink, the links can be defined outside the linked files

XLink Syntax

 In HTML, the <a> element defines a hyperlink. However, this is not how
it works in XML. In XML documents, you can use whatever element
names you want - therefore it is impossible for browsers to predict what
link elements will be called in XML documents.
An example of how to use XLink to create links in an XML document:

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

<homepages xmlns:xlink="http://www.google.com">

<homepage xlink:type="simple" xlink:href="https://www.yahoo.com">


Visit yahoo home page</homepage>

<homepage xlink:type="simple" xlink:href="http://


www.sathyabamauniversity.com">Visit sathyabama university</homepage>

</homepages>
To get access to the XLink features we must declare the XLink namespace. The
XLink namespace is: "http://www.google.com".

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

The xlink:type="simple" creates a simple "HTML-like" link (means "click here to


go there").

The xlink:href attribute specifies the URL to link to.


XPath

• XPath is used to address (select) parts of documents using path


expressions
• A path expression is a sequence of steps separated by “/”
• Think of file names in a directory hierarchy
• Result of path expression: set of values that along with their containing
elements/attributes match the specified path

15
ROOT
XPath example university

/university/instructor instructor

Id

_123456789

instructor

Id

_333445555

instructor

Id

_999887777
ROOT

XPath (example) university

instructor
/university/instructor
Id

_123456789

instructor

Id

_333445555

Instructor

Id

_999887777
ROOT

university

XPath(example)
instructor

Id
/university/
_123456789
instructor
Instructor

id

_333445555

instructor

Id

_999887777
ROOT

XPath (example) university

/university/instructor instructor

Id

_123456789

instructor

Id

_333445555

instructor

Id

_999887777

19
ROOT
XPath (xample) university
/university/instructor
instructor

Id

<instructor Id="_123456789”> _123456789


<name>Paul De Bra</name> instructor
....
</instructor> Id
<instructor _333445555
<name>George Fletcher</name>
Id="_333445555
”> ….. instructor
</instructor>
<instructor Id
<name>Katrien Verbert</name>
Id="_99988777 _999887777
7”>
.....
20
XQuery
• Allows to formulate more general queries than XPath
• General expression: FLWOR expression
• XQuery is to XML what SQL is to databases.
• XQuery was designed to query XML data.

FOR < for-variable > IN < in-expression >


< let-variable > := < let-expression>
[LET
WHERE < filter-expression> ]
[ ORDER By < order-specification > ]
RETURN < expression>

− note: FOR and LET can be used together or in


isolation
XQuery Example

• for $x in doc("books.xml")/bookstore/book
where $x/price>30
order by $x/title
return $x/title

• XQuery is a language for finding and extracting elements and


attributes from XML documents.

• Here is an example of what XQuery could solve:


• "Select all CD records with a price less than $10 from the CD
collection stored in cd_catalog.xml"
What is XQuery?
• XQuery is the language for querying XML data
• XQuery for XML is like SQL for databases
• XQuery is built on XPath expressions
• XQuery is supported by all major databases
• XQuery is a W3C Recommendation
What is Responsive Web Design (RWD)?

© 2013 Interactive
11/8/2013 93
Accessibility
What is RWD?

• Technique of building a website or application for all


devices
• One code base optimized for the medium and viewport
size
• It’s about adopting a more flexible, device-agnostic
approach

Same set of code


94 © 2013 Interactive Accessibility
How
How isisRWD
RWDImplemented?
Implemented?
• Fluid, flexible layout
– Uses relative sizing of grids, not fixed
– Based on columns that can be reflowed
– Allows grid layout to adjust to viewport size
• Media queries
– Target media types and media features
– Tests for max/min width & height on viewport and
device, device orientation, aspect ratio, resolution
• Responsive images
– Relative widths (CSS) or dynamic replacement (JS)

95
Images automatically adjusted and also the content of that
web site adjusts to the screen of a same website.
• How a website is structured, how information is spread through the website and how
critical is the content for the particular purpose of the website are some key
considerations while designing navigational elements for a responsive website.

Component
Of Website

Home About Us Products Gallery Contact


A fluid grid is a way of defining a layout in terms of proportions.
Thus, when the dimensions of a screen are shrunk, the layout with all
elements will reduce in proportion.
• When any device is requesting for a web site then images get
flexible for that device.
• With the help of media queries, you can also add flexible image
sizes and embed flexible video displays on your responsive
website.

Adjust Images Flexible Images


• Without media queries, responsive websites wouldn’t have been
where they are today. With CSS3 media queries, you can
conditionally apply CSS styles depending on the screen size.
• Media queries are applied to the CSS code to load specific style
elements according to the width of the screen.

Screen Resolution Layouts


• New CSS3 features also include orientation (portrait
vs. landscape), device-width, min-device-width and more.
• One can create multiple style sheets, ranges of widths —
even for landscape vs. portrait orientations.

You might also like