Markup Languages based on XML

1
Markup Languages based on XML

• XML is a meta-language
• A language for creating other languages.
• Markup Languages that have been created using XML
• MathML
• Chemical Markup Language (CML)
• Vector Markup Language (VML) Scalable Vector
  Graphics (SVG)
• Wireless Markup Language (WML)
• Geography Markup Language (GML)
• Synchronized Multimedia Integration Language
  (SMIL)
• ...

2
MathML

• Developed by W3C for describing mathematical
  notations and expressions using XML.
• Requires a special browser/editing environment.
• Amaya (www.w3.org/Amaya/User/BinDist.html)
• Can be embedded in html using ltmathgt element.

3
MathML elements

• ltmsubsupgt Math operators that requires
• ltmsubgt ltmsupgt subscripts and/or superscripts
• ltmogt Math operator
• ltmngt Number
• ltmigt Variable
• ltmrowgt Grouping operator
• ltmsqrtgt Square root operator
• Integral
• delta
• InvisibleTimes Multiplication without showing
  the (x) operator

4
lthtmlgt ltbodygt ltmathgt ltmrowgt ltmsubsupgt
ltmogtIntegrallt/mogt ltmngt0lt/mngt
ltmrowgt ltmngt1lt/mngt
ltmogt-lt/mogt ltmigtxlt/migt
lt/mrowgt lt/msubsupgt
5
ltmsqrtgt ltmrowgt ltmngt4lt/mngt
ltmogtInvisibleTimeslt/mogt
ltmsupgt ltmigtxlt/migt
ltmngt2lt/mngt lt/msupgt
ltmogtlt/mogt ltmigtylt/migt
lt/mrowgt lt/msqrtgt ltmogtdeltalt/mogt
ltmigtxlt/migt lt/mrowgt lt/mathgt lt/bodygt lt/htmlgt

6
Scalable Vector Graphics (SVG)

• SVG is a way to describe vector graphics data for
  use over the Web.
• Advantages over current methods (bitmaps) for
  distributing graphics on the Web.
• Vector graphics describe graphics in terms of
  lines, curves, etc.
• Needs plug-in from www.adobe.com/svg

7

• lt?xml version"1.0"?gt
• ltsvg viewBox"0 0 300 300" width"300"
  height"300"gt
• lt!-- Generate a background --gt
• ltggt
• ltpath style"fill pink"
• d"M0,0 h300 v300 h-300 z"/gt
• lt/ggt
• lt!-- Some shapes and colors --gt
• ltggt
• ltcircle style"fill green
• fill-opacity 0.5" cx"150" cy"150"
  r"50"/gt
• ltrect style"fill blue stroke white"
• x"50" y"50" width"100" height"100"/gt
• lttext style"fill red font-size 24pt"
• x"25" y"250"gtWelcome to SVG!lt/textgt
• lt/ggt
• lt/svggt

8
SVG elements

• ltggt Group
• ltpathgt Used to creates a box (line)
• style Uses CSS property
• fill fill color
• d defines points of the box
• M0,0 Starting coordinates (point)
• h Next horizontal point
• v Next vertical point
• z Connects back to the first point

9
SVG elements

• ltcirclegt Creates a circle
• style
• fillblue Fill color
• fill-opacity0.5
• 50 opacity
• cx x-axis center coordinate
• cY Y-axis center coordinate
• r radius

10
SVG elements

• ltrectgt Creates a rectangle
• style
• fillred Fill color
• strokewhite white border
• x upper-left x-coordinate
• y upper-left y-coordinate
• width width
• height height

11
SVG elements

• lttextgt Creates some text
• style
• fillred Fill color
• font-size24pt
• Font size
• x x-coordinate
• y y-coordinate

12
ltsvg viewBox"-500 -500 1000 1000"gt ltggt
ltpath style"fill black" d"M
-2000,-2000 H 2000 V 2000 H -2000 Z"/gt lt/ggt
ltcircle id"sun" style"fill yellow" cx"0"
cy"0" r"100"/gt ltggt ltanimateTransform
attributeName"transform"
type"rotate" dur"80s" from"0" to"360"
repeatCount"indefinite"/gt ltcircle id"earth"
style"fill blue" cx"400" cy"0"
r"40"/gt ltg transform"translate( 400 0 )"gt
ltcircle id"moon" style"fill white"
cx"70" cy"0" r"10"gt ltanimateTransform
attributeName"transform" type"rotate"
dur"20s" from"360" to"0"
repeatCount"indefinite"/gt lt/circlegt lt/ggt
lt/ggt lt/svggt
13
SVG animation

• ltanimateTransform attributeName"transform"
• type"rotate" dur"80s" from"0" to"360"
  repeatCount"indefinite"/gt
• Changes the attributes of its parent element
  (transform)
• Property of the change (rotate)
• Duration of change (dur)
• Initial value (from)
• Final value (to)
• Number of times to perform the transformation
  (repeatCount)

14
SVG animation

• ltg transform"translate( 400 0 )"gt
• ltcircle id"moon" style"fill white"
• cx"70" cy"0" r"10"gt
• ltanimateTransform attributeName"transform"
  
• type"rotate" dur"20s" from"360" to"0"
  
• repeatCount"indefinite"/gt
• lt/circlegt
• lt/ggt
• Shifts the center of this group to (400, 0)
• animateTransform will change the position of its
  parent (moon)