Presented by Nassib Awad Topics presented XML XML XSL XSL SVG SVG ENGR 6923 ENGR 6923

Presented by Nassib AwadPresented by Nassib Awad

Topics presentedTopics presented

• XMLXML

• XSLXSL

• SVGSVG

ENGR 6923ENGR 6923


XMLXML


XMLXML

• XMLXML standsstands for for EExtensible xtensible MMarkup arkup LLanguageanguage

• History of XMLHistory of XML

• XML is used for structuring dataXML is used for structuring data

• XML is a text formatXML is a text format

• XML uses tags and attributesXML uses tags and attributes


XMLXML

• XML is modularXML is modular

Combines and reuses other formatsCombines and reuses other formats

• XML provides a XML provides a namespacenamespace mechanismmechanism

XSL (XSL (Style sheet Language Style sheet Language Transformation) Transformation) RDF (Resource RDF (Resource Description Framework)Description Framework)

• XML leads HTML to XHTMLXML leads HTML to XHTML


An XML example about a memo An XML example about a memo distributed to studentsdistributed to students<?xml version="1.0" ?> - <?xml version="1.0" ?> -  --> <memo><memo> <to><to>students in advanced web designstudents in advanced web design</to> </to> <from><staffperson><from><staffperson> <rank><rank>adjunct professoradjunct professor</rank> </rank> <name><name>Walter HouserWalter Houser</name> </name> <office><office>109 Massachusetts Ave109 Massachusetts Ave</office> </office> </staffperson></from> </staffperson></from> <subject><subject>student scoresstudent scores</subject> </subject> <body><body>congratulations everyone! Your grades congratulations everyone! Your grades

show remarkable improvement. You should show remarkable improvement. You should be proud of your success. be proud of your success. </body> </body> </memo> </memo>


XSLXSL

XML STYLEXML STYLE


XML styleXML style

• XML styling is transforming and XML styling is transforming and formatting informationformatting information

Styling is the rendering of information Styling is the rendering of information into a into a form suitable for consumption form suitable for consumption by a target by a target audience.audience.


XSL or EXSL or Exxtensible tensible SStyle sheet tyle sheet LLanguageanguage

• DefinitionDefinitionXSL was the original proposal to allow XSL was the original proposal to allow formatting of XML files for displayformatting of XML files for display

• XSL is divided into XSL FO and XSLTXSL is divided into XSL FO and XSLT

XSL FO used for outputting PDF filesXSL FO used for outputting PDF files

XSLT stands for Extensive Style sheet XSLT stands for Extensive Style sheet Language TransformationLanguage Transformation

• A tree-oriented transformation A tree-oriented transformation languagelanguage


Example on XSL style sheetExample on XSL style sheet<?xml version="1.0"?><?xml version="1.0"?>

 simple book catalog database. The filename is listing12-2.xsl. --> <xsl:stylesheet xmlns:xsl="uri:xsl"><xsl:stylesheet xmlns:xsl="uri:xsl"><xsl:template match="/"><xsl:template match="/"><html><html><body><body><table border="1"><table border="1"><tr style="font-weight:bold;color:blue"><tr style="font-weight:bold;color:blue"><td>Author Name</td><td>Author Name</td><td>Author Address</td><td>Author Address</td><td>Author City</td><td>Author City</td><td>Author State</td><td>Author State</td><td>Author e-mail</td><td>Author e-mail</td><td>Publisher Name</td><td>Publisher Name</td><td>Publisher Address</td><td>Publisher Address</td><td>Publisher Phone</td><td>Publisher Phone</td></tr></tr><xsl:for-each select="Catalog/Book"><xsl:for-each select="Catalog/Book"><tr><tr><xsl:apply-templates/><xsl:apply-templates/></tr></tr></xsl:for-each></xsl:for-each></table></table></body></body></html> </html> </xsl:template></xsl:template><xsl:template match="Author"><xsl:template match="Author"><td><xsl:value-of select="Name"/></td><td><xsl:value-of select="Name"/></td><td><xsl:value-of select="Address"/></td><td><xsl:value-of select="Address"/></td><td><xsl:value-of select="City"/></td><td><xsl:value-of select="City"/></td><td><xsl:value-of select="State"/></td><td><xsl:value-of select="State"/></td><td><xsl:value-of select="Email"/></td><td><xsl:value-of select="Email"/></td></xsl:template></xsl:template><xsl:template match="Publisher"><xsl:template match="Publisher"><td><xsl:value-of select="Name"/></td><td><xsl:value-of select="Name"/></td><td><xsl:value-of select="Address"/></td><td><xsl:value-of select="Address"/></td><td><xsl:value-of select="Phone"/></td><td><xsl:value-of select="Phone"/></td></xsl:template></xsl:template></xsl:stylesheet> </xsl:stylesheet>


SVGSVG

Scalable Vector GraphicsScalable Vector Graphics


SVG or Scalable Vector SVG or Scalable Vector GraphicsGraphics

• SVG is a simple text editor standardized on SVG is a simple text editor standardized on September 2001September 2001

• Produces two-dimensional vector diagrams Produces two-dimensional vector diagrams for the Internetfor the Internet

• Uses mathematical statements rather than Uses mathematical statements rather than bit-pattern descriptionbit-pattern description

• Enables the viewing of any size and Enables the viewing of any size and resolution resolution

• SVG files have the extension SVG files have the extension ".svg" ".svg" ".svgz"".svgz"


SVG advantagesSVG advantages

• It has smaller sizeIt has smaller size

• Many effects can be manufactured with Many effects can be manufactured with pure SVGpure SVG

• SVG can be combined with JavaScript and SVG can be combined with JavaScript and produce animationsproduce animations

• SVG can be merged into HTML documentsSVG can be merged into HTML documents


SVG advantagesSVG advantages

• Can be printed out with best qualityCan be printed out with best quality

• Sound files can be merged in SVG Sound files can be merged in SVG filesfiles

• Streaming sound is not yet possibleStreaming sound is not yet possible

• SVG drawings can be interactive and SVG drawings can be interactive and dynamicdynamic


SVG advantages SVG advantages (continued)(continued)

• Three types of graphic objects: Three types of graphic objects: ImagesImages

TextText

Vector graphic shapesVector graphic shapes

• It is a language for rich graphical It is a language for rich graphical contentcontent

• It allows text within images so that the It allows text within images so that the text can be located by a search enginetext can be located by a search engine


SVGSVG

• It has standard basic shapesIt has standard basic shapes

circle, line, polyline, canavascircle, line, polyline, canavas

• It can be a combination of text canavas It can be a combination of text canavas and basic shapesand basic shapes

• Filling and painting operations, and Filling and painting operations, and choosing a font choosing a font


Graphical advantagesGraphical advantages

• SVG SVG meets the needs of business meets the needs of business presentationpresentation

• It is an application's user interfaceIt is an application's user interface• Includes relevant enhancementsIncludes relevant enhancements

GIS/MappingGIS/MappingCAD/DesignCAD/DesignPrinting and Web DesignPrinting and Web Design


Graphical advantagesGraphical advantages

• It controls the color space used in an It controls the color space used in an animation animation

• Allow SMIL to use animated or static Allow SMIL to use animated or static SVG content as media components SVG content as media components

• It controls the speed of the document It controls the speed of the document timelinetimeline


Example on SVGExample on SVG

<?xml version="1.0" standalone="no"?><?xml version="1.0" standalone="no"?><!DOCTYPE svg SYSTEM "SVG-19990812.dtd"><!DOCTYPE svg SYSTEM "SVG-19990812.dtd"><!-- local DTD so we aren't subject to changes in draft --<!-- local DTD so we aren't subject to changes in draft --

>><svg width="300" height="300" ><svg width="300" height="300" > <image xlink:href=“ENGR6923.jpg" x="30" y="30" <image xlink:href=“ENGR6923.jpg" x="30" y="30"

width="431" width="431" height="82" /> height="82" /> <text style="font-size:48; stroke: blue" x="120" <text style="font-size:48; stroke: blue" x="120" y="170">SVG Rules!</text> y="170">SVG Rules!</text> <image xlink:href=“ENGR.jpg" x="170" y="85" <image xlink:href=“ENGR.jpg" x="170" y="85"

width="200" height="27" />width="200" height="27" /></svg</svg>>


This is the output with the two distinct This is the output with the two distinct images:images:


SVG printing (SVGP)SVG printing (SVGP)

• Scalable printing with high resolution and Scalable printing with high resolution and exact exact

• It is used as a file format for low end It is used as a file format for low end printersprinters. .

• PC-free Photo Album GenerationPC-free Photo Album Generationthe final form of SVG graphic including the final form of SVG graphic including images, borders, framing etc. with no images, borders, framing etc. with no driver or PC requireddriver or PC required


References:References:

Among many web sites used as reference, Among many web sites used as reference, the major sites are:the major sites are:

www.xml.comwww.xml.com

www.w3.orgwww.w3.org

http://www.xml.com/

http://www.w3.org/


Thank youThank you

Documents

Presented by Nassib Awad Topics presented XML XML XSL XSL SVG SVG ENGR 6923 ENGR 6923