Presented by Nassib Awad Topics presented XML XSL SVG ENGR 6923 Presented by Nassib Awad
Presented by Nassib Awad XML Presented by Nassib Awad
Presented by Nassib Awad XML XML stands for Extensible Markup Language History of XML XML is used for structuring data XML is a text format XML uses tags and attributes Presented by Nassib Awad
Presented by Nassib Awad XML XML is modular Combines and reuses other formats XML provides a namespace mechanism XSL (Style sheet Language Transformation) RDF (Resource Description Framework) XML leads HTML to XHTML Presented by Nassib Awad
An XML example about a memo distributed to students <?xml version="1.0" ?> - <!-- Filename firstmemo.xml --> <memo> <to>students in advanced web design</to> <from><staffperson> <rank>adjunct professor</rank> <name>Walter Houser</name> <office>109 Massachusetts Ave</office> </staffperson></from> <subject>student scores</subject> <body>congratulations everyone! Your grades show remarkable improvement. You should be proud of your success. </body> </memo> Presented by Nassib Awad
Presented by Nassib Awad XSL XML STYLE Presented by Nassib Awad
Presented by Nassib Awad XML style XML styling is transforming and formatting information Styling is the rendering of information into a form suitable for consumption by a target audience. Presented by Nassib Awad
XSL or Extensible Style sheet Language Definition XSL was the original proposal to allow formatting of XML files for display XSL is divided into XSL FO and XSLT XSL FO used for outputting PDF files XSLT stands for Extensive Style sheet Language Transformation A tree-oriented transformation language Presented by Nassib Awad
Example on XSL style sheet <?xml version="1.0"?> <!-- This file is an XSL stylesheet file that is used to read the data from the simple book catalog database. The filename is listing12-2.xsl. --> <xsl:stylesheet xmlns:xsl="uri:xsl"> <xsl:template match="/"> <html> <body> <table border="1"> <tr style="font-weight:bold;color:blue"> <td>Author Name</td> <td>Author Address</td> <td>Author City</td> <td>Author State</td> <td>Author e-mail</td> <td>Publisher Name</td> <td>Publisher Address</td> <td>Publisher Phone</td> </tr> <xsl:for-each select="Catalog/Book"> <tr> <xsl:apply-templates/> </tr> </xsl:for-each> </table> </body> </html> </xsl:template> <xsl:template match="Author"> <td><xsl:value-of select="Name"/></td> <td><xsl:value-of select="Address"/></td> <td><xsl:value-of select="City"/></td> <td><xsl:value-of select="State"/></td> <td><xsl:value-of select="Email"/></td> </xsl:template> <xsl:template match="Publisher"> <td><xsl:value-of select="Name"/></td> <td><xsl:value-of select="Address"/></td> <td><xsl:value-of select="Phone"/></td> </xsl:template> </xsl:stylesheet> Presented by Nassib Awad
Scalable Vector Graphics SVG Scalable Vector Graphics Presented by Nassib Awad
SVG or Scalable Vector Graphics SVG is a simple text editor standardized on September 2001 Produces two-dimensional vector diagrams for the Internet Uses mathematical statements rather than bit-pattern description Enables the viewing of any size and resolution SVG files have the extension ".svg" ".svgz" Presented by Nassib Awad
Presented by Nassib Awad SVG advantages It has smaller size Many effects can be manufactured with pure SVG SVG can be combined with JavaScript and produce animations SVG can be merged into HTML documents Presented by Nassib Awad
Presented by Nassib Awad SVG advantages Can be printed out with best quality Sound files can be merged in SVG files Streaming sound is not yet possible SVG drawings can be interactive and dynamic Presented by Nassib Awad
SVG advantages (continued) Three types of graphic objects: Images Text Vector graphic shapes It is a language for rich graphical content It allows text within images so that the text can be located by a search engine Presented by Nassib Awad
Presented by Nassib Awad SVG It has standard basic shapes circle, line, polyline, canavas It can be a combination of text canavas and basic shapes Filling and painting operations, and choosing a font Presented by Nassib Awad
Presented by Nassib Awad Graphical advantages SVG meets the needs of business presentation It is an application's user interface Includes relevant enhancements GIS/Mapping CAD/Design Printing and Web Design Presented by Nassib Awad
Presented by Nassib Awad Graphical advantages It controls the color space used in an animation Allow SMIL to use animated or static SVG content as media components It controls the speed of the document timeline Presented by Nassib Awad
Presented by Nassib Awad Example on SVG <?xml version="1.0" standalone="no"?> <!DOCTYPE svg SYSTEM "SVG-19990812.dtd"> <!-- local DTD so we aren't subject to changes in draft --> <svg width="300" height="300" > <image xlink:href=“ENGR6923.jpg" x="30" y="30" width="431" height="82" /> <text style="font-size:48; stroke: blue" x="120" y="170">SVG Rules!</text> <image xlink:href=“ENGR.jpg" x="170" y="85" width="200" height="27" /> </svg> Presented by Nassib Awad
This is the output with the two distinct images: Presented by Nassib Awad
Presented by Nassib Awad SVG printing (SVGP) Scalable printing with high resolution and exact It is used as a file format for low end printers. PC-free Photo Album Generation the final form of SVG graphic including images, borders, framing etc. with no driver or PC required Presented by Nassib Awad
Presented by Nassib Awad References: Among many web sites used as reference, the major sites are: www.xml.com www.w3.org Presented by Nassib Awad
Presented by Nassib Awad Thank you Presented by Nassib Awad