--- /dev/null
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/PR-SVG-20010719/DTD/svg10.dtd">
+<svg width="30cm" height="26cm" viewBox="338 -200 582 520" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <g>
+ <rect style="fill: #92b220" x="350" y="160" width="300" height="60"/>
+ <path style="fill: #92b220" d="M 350,160 A 10,10 0 0 0 340,170 L 350,170 z"/>
+ <path style="fill: #92b220" d="M 660,170 A 10,10 0 0 0 650,160 L 650,170 z"/>
+ <rect style="fill: #92b220" x="340" y="170" width="320" height="40"/>
+ <path style="fill: #92b220" d="M 340,210 A 10,10 0 0 0 350,220 L 350,210 z"/>
+ <path style="fill: #92b220" d="M 650,220 A 10,10 0 0 0 660,210 L 650,210 z"/>
+ <line style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" x1="350" y1="160" x2="650" y2="160"/>
+ <line style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" x1="350" y1="220" x2="650" y2="220"/>
+ <path style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" d="M 350,160 A 10,10 0 0 0 340,170"/>
+ <path style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" d="M 660,170 A 10,10 0 0 0 650,160"/>
+ <line style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" x1="340" y1="170" x2="340" y2="210"/>
+ <line style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" x1="660" y1="170" x2="660" y2="210"/>
+ <path style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" d="M 340,210 A 10,10 0 0 0 350,220"/>
+ <path style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" d="M 650,220 A 10,10 0 0 0 660,210"/>
+ <text font-size="12.8" style="fill: #000000;text-anchor:middle;font-family:sans-serif;font-style:normal;font-weight:700" x="500" y="193.9">
+ <tspan x="500" y="193.9">Django</tspan>
+ </text>
+ </g>
+ <g>
+ <rect style="fill: #4f628a" x="350" y="260" width="200" height="60"/>
+ <path style="fill: #4f628a" d="M 350,260 A 10,10 0 0 0 340,270 L 350,270 z"/>
+ <path style="fill: #4f628a" d="M 560,270 A 10,10 0 0 0 550,260 L 550,270 z"/>
+ <rect style="fill: #4f628a" x="340" y="270" width="220" height="40"/>
+ <path style="fill: #4f628a" d="M 340,310 A 10,10 0 0 0 350,320 L 350,310 z"/>
+ <path style="fill: #4f628a" d="M 550,320 A 10,10 0 0 0 560,310 L 550,310 z"/>
+ <line style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" x1="350" y1="260" x2="550" y2="260"/>
+ <line style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" x1="350" y1="320" x2="550" y2="320"/>
+ <path style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" d="M 350,260 A 10,10 0 0 0 340,270"/>
+ <path style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" d="M 560,270 A 10,10 0 0 0 550,260"/>
+ <line style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" x1="340" y1="270" x2="340" y2="310"/>
+ <line style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" x1="560" y1="270" x2="560" y2="310"/>
+ <path style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" d="M 340,310 A 10,10 0 0 0 350,320"/>
+ <path style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" d="M 550,320 A 10,10 0 0 0 560,310"/>
+ <text font-size="12.8" style="fill: #ffffff;text-anchor:middle;font-family:sans-serif;font-style:normal;font-weight:normal" x="450" y="293.9">
+ <tspan x="450" y="293.9">Database (SQL, Oracle, etc..)</tspan>
+ </text>
+ </g>
+ <g>
+ <rect style="fill: #ffffff" x="350" y="-40" width="480" height="180"/>
+ <path style="fill: #ffffff" d="M 350,-40 A 10,10 0 0 0 340,-30 L 350,-30 z"/>
+ <path style="fill: #ffffff" d="M 840,-30 A 10,10 0 0 0 830,-40 L 830,-30 z"/>
+ <rect style="fill: #ffffff" x="340" y="-30" width="500" height="160"/>
+ <path style="fill: #ffffff" d="M 340,130 A 10,10 0 0 0 350,140 L 350,130 z"/>
+ <path style="fill: #ffffff" d="M 830,140 A 10,10 0 0 0 840,130 L 830,130 z"/>
+ <line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x1="350" y1="-40" x2="830" y2="-40"/>
+ <line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x1="350" y1="140" x2="830" y2="140"/>
+ <path style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" d="M 350,-40 A 10,10 0 0 0 340,-30"/>
+ <path style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" d="M 840,-30 A 10,10 0 0 0 830,-40"/>
+ <line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x1="340" y1="-30" x2="340" y2="130"/>
+ <line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x1="840" y1="-30" x2="840" y2="130"/>
+ <path style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" d="M 340,130 A 10,10 0 0 0 350,140"/>
+ <path style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" d="M 830,140 A 10,10 0 0 0 840,130"/>
+ <text font-size="12.8" style="fill: #000000;text-anchor:middle;font-family:sans-serif;font-style:normal;font-weight:normal" x="590" y="53.9">
+ <tspan x="590" y="53.9"></tspan>
+ </text>
+ </g>
+ <g>
+ <rect style="fill: #4f628a" x="590" y="260" width="320" height="60"/>
+ <path style="fill: #4f628a" d="M 590,260 A 10,10 0 0 0 580,270 L 590,270 z"/>
+ <path style="fill: #4f628a" d="M 920,270 A 10,10 0 0 0 910,260 L 910,270 z"/>
+ <rect style="fill: #4f628a" x="580" y="270" width="340" height="40"/>
+ <path style="fill: #4f628a" d="M 580,310 A 10,10 0 0 0 590,320 L 590,310 z"/>
+ <path style="fill: #4f628a" d="M 910,320 A 10,10 0 0 0 920,310 L 910,310 z"/>
+ <line style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" x1="590" y1="260" x2="910" y2="260"/>
+ <line style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" x1="590" y1="320" x2="910" y2="320"/>
+ <path style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" d="M 590,260 A 10,10 0 0 0 580,270"/>
+ <path style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" d="M 920,270 A 10,10 0 0 0 910,260"/>
+ <line style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" x1="580" y1="270" x2="580" y2="310"/>
+ <line style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" x1="920" y1="270" x2="920" y2="310"/>
+ <path style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" d="M 580,310 A 10,10 0 0 0 590,320"/>
+ <path style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" d="M 910,320 A 10,10 0 0 0 920,310"/>
+ <text font-size="12.8" style="fill: #ffffff;text-anchor:middle;font-family:sans-serif;font-style:normal;font-weight:normal" x="750" y="293.9">
+ <tspan x="750" y="293.9">Filesystem</tspan>
+ </text>
+ </g>
+ <g>
+ <rect style="fill: #f3ad17" x="370" y="80" width="120" height="40"/>
+ <path style="fill: #f3ad17" d="M 370,80 A 10,10 0 0 0 360,90 L 370,90 z"/>
+ <path style="fill: #f3ad17" d="M 500,90 A 10,10 0 0 0 490,80 L 490,90 z"/>
+ <rect style="fill: #f3ad17" x="360" y="90" width="140" height="20"/>
+ <path style="fill: #f3ad17" d="M 360,110 A 10,10 0 0 0 370,120 L 370,110 z"/>
+ <path style="fill: #f3ad17" d="M 490,120 A 10,10 0 0 0 500,110 L 490,110 z"/>
+ <line style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" x1="370" y1="80" x2="490" y2="80"/>
+ <line style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" x1="370" y1="120" x2="490" y2="120"/>
+ <path style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" d="M 370,80 A 10,10 0 0 0 360,90"/>
+ <path style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" d="M 500,90 A 10,10 0 0 0 490,80"/>
+ <line style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" x1="360" y1="90" x2="360" y2="110"/>
+ <line style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" x1="500" y1="90" x2="500" y2="110"/>
+ <path style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" d="M 360,110 A 10,10 0 0 0 370,120"/>
+ <path style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" d="M 490,120 A 10,10 0 0 0 500,110"/>
+ <text font-size="12.8" style="fill: #000000;text-anchor:middle;font-family:sans-serif;font-style:normal;font-weight:normal" x="430" y="103.9">
+ <tspan x="430" y="103.9">Models</tspan>
+ </text>
+ </g>
+ <g>
+ <rect style="fill: #f3ad17" x="370" y="0" width="440" height="40"/>
+ <path style="fill: #f3ad17" d="M 370,0 A 10,10 0 0 0 360,10 L 370,10 z"/>
+ <path style="fill: #f3ad17" d="M 820,10 A 10,10 0 0 0 810,0 L 810,10 z"/>
+ <rect style="fill: #f3ad17" x="360" y="10" width="460" height="20"/>
+ <path style="fill: #f3ad17" d="M 360,30 A 10,10 0 0 0 370,40 L 370,30 z"/>
+ <path style="fill: #f3ad17" d="M 810,40 A 10,10 0 0 0 820,30 L 810,30 z"/>
+ <line style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" x1="370" y1="0" x2="810" y2="0"/>
+ <line style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" x1="370" y1="40" x2="810" y2="40"/>
+ <path style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" d="M 370,0 A 10,10 0 0 0 360,10"/>
+ <path style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" d="M 820,10 A 10,10 0 0 0 810,0"/>
+ <line style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" x1="360" y1="10" x2="360" y2="30"/>
+ <line style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" x1="820" y1="10" x2="820" y2="30"/>
+ <path style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" d="M 360,30 A 10,10 0 0 0 370,40"/>
+ <path style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" d="M 810,40 A 10,10 0 0 0 820,30"/>
+ <text font-size="12.8" style="fill: #000000;text-anchor:middle;font-family:sans-serif;font-style:normal;font-weight:normal" x="590" y="23.9">
+ <tspan x="590" y="23.9">Views, Controller, Context</tspan>
+ </text>
+ </g>
+ <g>
+ <rect style="fill: #f3ad17" x="550" y="80" width="100" height="40"/>
+ <path style="fill: #f3ad17" d="M 550,80 A 10,10 0 0 0 540,90 L 550,90 z"/>
+ <path style="fill: #f3ad17" d="M 660,90 A 10,10 0 0 0 650,80 L 650,90 z"/>
+ <rect style="fill: #f3ad17" x="540" y="90" width="120" height="20"/>
+ <path style="fill: #f3ad17" d="M 540,110 A 10,10 0 0 0 550,120 L 550,110 z"/>
+ <path style="fill: #f3ad17" d="M 650,120 A 10,10 0 0 0 660,110 L 650,110 z"/>
+ <line style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" x1="550" y1="80" x2="650" y2="80"/>
+ <line style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" x1="550" y1="120" x2="650" y2="120"/>
+ <path style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" d="M 550,80 A 10,10 0 0 0 540,90"/>
+ <path style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" d="M 660,90 A 10,10 0 0 0 650,80"/>
+ <line style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" x1="540" y1="90" x2="540" y2="110"/>
+ <line style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" x1="660" y1="90" x2="660" y2="110"/>
+ <path style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" d="M 540,110 A 10,10 0 0 0 550,120"/>
+ <path style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" d="M 650,120 A 10,10 0 0 0 660,110"/>
+ <text font-size="12.8" style="fill: #000000;text-anchor:middle;font-family:sans-serif;font-style:normal;font-weight:normal" x="600" y="103.9">
+ <tspan x="600" y="103.9">Workflow</tspan>
+ </text>
+ </g>
+ <g>
+ <rect style="fill: #e65911" x="350" y="-100" width="560" height="40"/>
+ <path style="fill: #e65911" d="M 350,-100 A 10,10 0 0 0 340,-90 L 350,-90 z"/>
+ <path style="fill: #e65911" d="M 920,-90 A 10,10 0 0 0 910,-100 L 910,-90 z"/>
+ <rect style="fill: #e65911" x="340" y="-90" width="580" height="20"/>
+ <path style="fill: #e65911" d="M 340,-70 A 10,10 0 0 0 350,-60 L 350,-70 z"/>
+ <path style="fill: #e65911" d="M 910,-60 A 10,10 0 0 0 920,-70 L 910,-70 z"/>
+ <line style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" x1="350" y1="-100" x2="910" y2="-100"/>
+ <line style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" x1="350" y1="-60" x2="910" y2="-60"/>
+ <path style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" d="M 350,-100 A 10,10 0 0 0 340,-90"/>
+ <path style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" d="M 920,-90 A 10,10 0 0 0 910,-100"/>
+ <line style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" x1="340" y1="-90" x2="340" y2="-70"/>
+ <line style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" x1="920" y1="-90" x2="920" y2="-70"/>
+ <path style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" d="M 340,-70 A 10,10 0 0 0 350,-60"/>
+ <path style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" d="M 910,-60 A 10,10 0 0 0 920,-70"/>
+ <text font-size="12.8" style="fill: #ffffff;text-anchor:middle;font-family:sans-serif;font-style:normal;font-weight:normal" x="630" y="-76.1">
+ <tspan x="630" y="-76.1">Web server</tspan>
+ </text>
+ </g>
+ <g>
+ <rect style="fill: #dd0000" x="350" y="-200" width="560" height="60"/>
+ <path style="fill: #dd0000" d="M 350,-200 A 10,10 0 0 0 340,-190 L 350,-190 z"/>
+ <path style="fill: #dd0000" d="M 920,-190 A 10,10 0 0 0 910,-200 L 910,-190 z"/>
+ <rect style="fill: #dd0000" x="340" y="-190" width="580" height="40"/>
+ <path style="fill: #dd0000" d="M 340,-150 A 10,10 0 0 0 350,-140 L 350,-150 z"/>
+ <path style="fill: #dd0000" d="M 910,-140 A 10,10 0 0 0 920,-150 L 910,-150 z"/>
+ <line style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" x1="350" y1="-200" x2="910" y2="-200"/>
+ <line style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" x1="350" y1="-140" x2="910" y2="-140"/>
+ <path style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" d="M 350,-200 A 10,10 0 0 0 340,-190"/>
+ <path style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" d="M 920,-190 A 10,10 0 0 0 910,-200"/>
+ <line style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" x1="340" y1="-190" x2="340" y2="-150"/>
+ <line style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" x1="920" y1="-190" x2="920" y2="-150"/>
+ <path style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" d="M 340,-150 A 10,10 0 0 0 350,-140"/>
+ <path style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" d="M 910,-140 A 10,10 0 0 0 920,-150"/>
+ <text font-size="12.8" style="fill: #ffffff;text-anchor:middle;font-family:sans-serif;font-style:normal;font-weight:normal" x="630" y="-166.1">
+ <tspan x="630" y="-166.1">Browser</tspan>
+ </text>
+ </g>
+ <g>
+ <rect style="fill: #92b220" x="690" y="160" width="140" height="60"/>
+ <path style="fill: #92b220" d="M 690,160 A 10,10 0 0 0 680,170 L 690,170 z"/>
+ <path style="fill: #92b220" d="M 840,170 A 10,10 0 0 0 830,160 L 830,170 z"/>
+ <rect style="fill: #92b220" x="680" y="170" width="160" height="40"/>
+ <path style="fill: #92b220" d="M 680,210 A 10,10 0 0 0 690,220 L 690,210 z"/>
+ <path style="fill: #92b220" d="M 830,220 A 10,10 0 0 0 840,210 L 830,210 z"/>
+ <line style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" x1="690" y1="160" x2="830" y2="160"/>
+ <line style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" x1="690" y1="220" x2="830" y2="220"/>
+ <path style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" d="M 690,160 A 10,10 0 0 0 680,170"/>
+ <path style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" d="M 840,170 A 10,10 0 0 0 830,160"/>
+ <line style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" x1="680" y1="170" x2="680" y2="210"/>
+ <line style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" x1="840" y1="170" x2="840" y2="210"/>
+ <path style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" d="M 680,210 A 10,10 0 0 0 690,220"/>
+ <path style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" d="M 830,220 A 10,10 0 0 0 840,210"/>
+ <text font-size="12.8" style="fill: #000000;text-anchor:middle;font-family:sans-serif;font-style:normal;font-weight:700" x="760" y="193.9">
+ <tspan x="760" y="193.9">TimeSide</tspan>
+ </text>
+ </g>
+ <g>
+ <polyline style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" points="511,100 520,100 520,100 529,100 "/>
+ <polygon style="fill: #000000" points="511,95 501,100 511,105 "/>
+ <polygon style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" points="511,95 501,100 511,105 "/>
+ <polygon style="fill: #000000" points="529,105 539,100 529,95 "/>
+ <polygon style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" points="529,105 539,100 529,95 "/>
+ </g>
+ <g>
+ <polyline style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" points="600,69 600,51 "/>
+ <polygon style="fill: #000000" points="595,69 600,79 605,69 "/>
+ <polygon style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" points="595,69 600,79 605,69 "/>
+ <polygon style="fill: #000000" points="605,51 600,41 595,51 "/>
+ <polygon style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" points="605,51 600,41 595,51 "/>
+ </g>
+ <g>
+ <polyline style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" points="429,149 429,131 "/>
+ <polygon style="fill: #000000" points="424,149 429,159 434,149 "/>
+ <polygon style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" points="424,149 429,159 434,149 "/>
+ <polygon style="fill: #000000" points="434,131 429,121 424,131 "/>
+ <polygon style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" points="434,131 429,121 424,131 "/>
+ </g>
+ <g>
+ <polyline style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" points="429.608,-11 429.608,-20 429.608,-20 429.608,-49 "/>
+ <polygon style="fill: #000000" points="424.608,-11 429.608,-1 434.608,-11 "/>
+ <polygon style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" points="424.608,-11 429.608,-1 434.608,-11 "/>
+ <polygon style="fill: #000000" points="434.608,-49 429.608,-59 424.608,-49 "/>
+ <polygon style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" points="434.608,-49 429.608,-59 424.608,-49 "/>
+ </g>
+ <g>
+ <polyline style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" points="620,231 620,240 620.312,240 620.312,249 "/>
+ <polygon style="fill: #000000" points="625,231 620,221 615,231 "/>
+ <polygon style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" points="625,231 620,221 615,231 "/>
+ <polygon style="fill: #000000" points="615.312,249 620.312,259 625.312,249 "/>
+ <polygon style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" points="615.312,249 620.312,259 625.312,249 "/>
+ </g>
+ <text font-size="12.8" style="fill: #000000;text-anchor:start;font-family:sans-serif;font-style:normal;font-weight:normal" x="590" y="50">
+ <tspan x="590" y="50"></tspan>
+ </text>
+ <text font-size="12.8" style="fill: #000000;text-anchor:start;font-family:sans-serif;font-style:normal;font-weight:700" x="568.078" y="-17.249">
+ <tspan x="568.078" y="-17.249">Telemeta</tspan>
+ </text>
+ <g>
+ <polyline style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" points="430,69 430,51 "/>
+ <polygon style="fill: #000000" points="425,69 430,79 435,69 "/>
+ <polygon style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" points="425,69 430,79 435,69 "/>
+ <polygon style="fill: #000000" points="435,51 430,41 425,51 "/>
+ <polygon style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" points="435,51 430,41 425,51 "/>
+ </g>
+ <g>
+ <polyline style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" points="880,249 880,-30.5002 880,-30.5002 880,-49 "/>
+ <polygon style="fill: #000000" points="875,249 880,259 885,249 "/>
+ <polygon style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" points="875,249 880,259 885,249 "/>
+ <polygon style="fill: #000000" points="885,-49 880,-59 875,-49 "/>
+ <polygon style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" points="885,-49 880,-59 875,-49 "/>
+ </g>
+ <g>
+ <rect style="fill: #f3ad17" x="710" y="80" width="99.375" height="40"/>
+ <path style="fill: #f3ad17" d="M 710,80 A 10,10 0 0 0 700,90 L 710,90 z"/>
+ <path style="fill: #f3ad17" d="M 819.375,90 A 10,10 0 0 0 809.375,80 L 809.375,90 z"/>
+ <rect style="fill: #f3ad17" x="700" y="90" width="119.375" height="20"/>
+ <path style="fill: #f3ad17" d="M 700,110 A 10,10 0 0 0 710,120 L 710,110 z"/>
+ <path style="fill: #f3ad17" d="M 809.375,120 A 10,10 0 0 0 819.375,110 L 809.375,110 z"/>
+ <line style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" x1="710" y1="80" x2="809.375" y2="80"/>
+ <line style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" x1="710" y1="120" x2="809.375" y2="120"/>
+ <path style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" d="M 710,80 A 10,10 0 0 0 700,90"/>
+ <path style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" d="M 819.375,90 A 10,10 0 0 0 809.375,80"/>
+ <line style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" x1="700" y1="90" x2="700" y2="110"/>
+ <line style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" x1="819.375" y1="90" x2="819.375" y2="110"/>
+ <path style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" d="M 700,110 A 10,10 0 0 0 710,120"/>
+ <path style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" d="M 809.375,120 A 10,10 0 0 0 819.375,110"/>
+ <text font-size="12.8" style="fill: #000000;text-anchor:middle;font-family:sans-serif;font-style:normal;font-weight:normal" x="759.688" y="103.9">
+ <tspan x="759.688" y="103.9">Streaming</tspan>
+ </text>
+ </g>
+ <g>
+ <polyline style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" points="671,100 680,100 680,100 689,100 "/>
+ <polygon style="fill: #000000" points="671,95 661,100 671,105 "/>
+ <polygon style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" points="671,95 661,100 671,105 "/>
+ <polygon style="fill: #000000" points="689,105 699,100 689,95 "/>
+ <polygon style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" points="689,105 699,100 689,95 "/>
+ </g>
+ <g>
+ <polyline style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" points="760,149 760,140 759.688,140 759.688,131 "/>
+ <polygon style="fill: #000000" points="755,149 760,159 765,149 "/>
+ <polygon style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" points="755,149 760,159 765,149 "/>
+ <polygon style="fill: #000000" points="764.688,131 759.688,121 754.688,131 "/>
+ <polygon style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" points="764.688,131 759.688,121 754.688,131 "/>
+ </g>
+ <g>
+ <polyline style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" points="760,249 760,240 760,240 760,231 "/>
+ <polygon style="fill: #000000" points="755,249 760,259 765,249 "/>
+ <polygon style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" points="755,249 760,259 765,249 "/>
+ <polygon style="fill: #000000" points="765,231 760,221 755,231 "/>
+ <polygon style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" points="765,231 760,221 755,231 "/>
+ </g>
+ <g>
+ <polyline style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" points="428.996,249 428.996,240 428.684,240 428.684,231 "/>
+ <polygon style="fill: #000000" points="423.996,249 428.996,259 433.996,249 "/>
+ <polygon style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" points="423.996,249 428.996,259 433.996,249 "/>
+ <polygon style="fill: #000000" points="433.684,231 428.684,221 423.684,231 "/>
+ <polygon style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" points="433.684,231 428.684,221 423.684,231 "/>
+ </g>
+ <g>
+ <polyline style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" points="759.688,69 759.688,60 759.688,60 759.688,51 "/>
+ <polygon style="fill: #000000" points="754.688,69 759.688,79 764.688,69 "/>
+ <polygon style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" points="754.688,69 759.688,79 764.688,69 "/>
+ <polygon style="fill: #000000" points="764.688,51 759.688,41 754.688,51 "/>
+ <polygon style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" points="764.688,51 759.688,41 754.688,51 "/>
+ </g>
+ <g>
+ <polyline style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" points="630,-111 630,-120 630,-120 630,-129 "/>
+ <polygon style="fill: #000000" points="625,-111 630,-101 635,-111 "/>
+ <polygon style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" points="625,-111 630,-101 635,-111 "/>
+ <polygon style="fill: #000000" points="635,-129 630,-139 625,-129 "/>
+ <polygon style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" points="635,-129 630,-139 625,-129 "/>
+ </g>
+ <text font-size="12.8" style="fill: #ffffff;text-anchor:start;font-family:sans-serif;font-style:normal;font-weight:normal" x="862.752" y="-75.415">
+ <tspan x="862.752" y="-75.415">static</tspan>
+ </text>
+ <text font-size="12.8" style="fill: #ffffff;text-anchor:start;font-family:sans-serif;font-style:normal;font-weight:normal" x="403.494" y="-76.332">
+ <tspan x="403.494" y="-76.332">dynamic</tspan>
+ </text>
+</svg>
--- /dev/null
+\documentclass[10pt, final, hyperref, table]{beamer}
+\mode<presentation>
+
+
+ %\usepackage[english]{babel} % "babel.sty"
+% \usepackage{french} % "french.sty"
+% \usepackage{franglais} % "franglais.sty" (a defaut)
+ \usepackage{times} % ajout times le 30 mai 2003
+
+%% --------------------------------------------------------------
+%% CODAGE DE POLICES ?
+%% Si votre moteur Latex est francise, il est conseille
+%% d'utiliser le codage de police T1 pour faciliter la césure,
+%% si vous disposez de ces polices (DC/EC)
+\usepackage[utf8]{inputenc}
+\usepackage[T1]{fontenc}
+\usepackage{eurosym}
+
+
+%% ==============================================================
+%\usepackage{graphicx}
+\usepackage{amsmath,amsfonts}
+%\usepackage[table]{xcolor}
+\usepackage{subfigure}
+\usepackage{fancybox}
+
+\usepackage{multicol}
+\usepackage{wrapfig}
+\usepackage{listings}
+\usepackage{xcolor}
+\usepackage{multimedia} % For playing sound
+
+\usepackage{hyperref}
+% Define hyperlinks color
+\definecolor{links}{HTML}{2A1B81}
+\hypersetup{colorlinks,linkcolor=,urlcolor=links}
+
+\usetheme{Madrid}
+\setbeamercovered{transparent}
+
+
+% telemeta red
+\definecolor{telemetaRed}{rgb}{0.41568, 0.01176, 0.02745} % #6A0307
+\usecolortheme[rgb={0.41568, 0.01176, 0.02745}]{structure}
+
+%\setbeamercolor{frametitle}{bg=telemetaRed}
+% Display a grid to help align images
+%\beamertemplategridbackground[1cm]
+
+%We will get the normal bibliography style (number or text instead of icon) by including the following code
+\setbeamertemplate{bibliography item}[text]
+\setbeamerfont{caption}{size=\footnotesize}
+% listings settings
+\definecolor{lstComments}{rgb}{0,0.6,0}
+\definecolor{lstBkgrd}{rgb}{0.95,0.95,1}
+\lstset{%
+ language=Python, % the language of the code
+ frame=single, % adds a frame around the code
+ frameround=tttt,
+ commentstyle=\color{lstComments},% comment style
+ backgroundcolor=\color{lstBkgrd}, % choose the background color
+ basicstyle=\tiny, % the size of the fonts that are used for the code
+ stringstyle=\ttfamily, % typewriter type for strings
+ keywordstyle=\color{blue}, % keyword style
+ showstringspaces=false, % underline spaces within strings only
+}
+
+
+\definecolor{rouge}{rgb}{1.0,0,0}
+\newcommand{\chref}[2]{
+ \href{#1}{\color{rouge}\underline{#2}}
+}
+\newcommand{\dchref}[1]{
+ \href{#1}{\color{rouge}\underline{#1}}
+}
+\newcommand{\curl}[1]{
+ \color{rouge}\underline{\url{#1}}
+}
+\title[Telemeta]{Telemeta\\ open web audio content management system}
+
+\author{Guillaume Pellerin\inst{1}}
+
+\institute[Parisson]{
+ \inst{1}%
+ Parisson, Paris, France\\
+\vskip1ex
+ \begin{center}
+ \includegraphics[width=.3\linewidth]{img/parisson_logo_FINALE_com.pdf}
+ \end{center}
+}
+
+\date[DML 1st Workshop - 19/03/2014]{Digital Music Lab 1st Workshop - 19/03/2014}
+
+\begin{document}
+\frame{\titlepage}
+
+
+\section[Table of contents]{}
+\frame{\frametitle{Table of contents}
+\tableofcontents
+}
+
+\section{Goals}
+\frame{\frametitle{Main goals}
+\vspace{-1cm}
+\center{\includegraphics[width=4cm]{img/logo_telemeta_1-1.pdf}}
+\vspace{0.5cm}
+\begin{itemize}
+ \item \alert{Save}, \alert{scale} and \alert{sustain} big music data and related metadata
+ \item \alert{Play} audio and read metadata \alert{synchronously}
+ \item \alert{Index} and \alert{share} music data through a \alert{collaborative} web app
+ \item \alert{Link} music data to various \alert{ontologies} and \alert{external services}
+ \item \alert{Manage} \alert{workflow} rules (access, copyrights) easily through time
+ \item \alert{Process} audio \alert{on demand} through a \alert{modular architecture}
+\end{itemize}
+}
+
+\section{History}
+\frame{\frametitle{History of the project}
+\begin{itemize}
+ \item \alert{2006} : definition of the goals (open source web audio collaborative platform)
+ \item \alert{2007} : first partner : CREM
+ \item \alert{2007} - 2009 : technical specifications, definition of the DB migrator
+ \item \alert{2008} : prototype development
+ \item \alert{2008 - 2010} : workflow and format specifications
+ \item \alert{2011} : development, final migration and release of \alert{Telemeta 1.0} to the CREM for production : \dchref{http://archives.crem-cnrs.fr}
+ \item \alert{2011 - 2014} : collaborative indexing, more development, massive data imports...
+\end{itemize}
+}
+
+\section{Technologies}
+\frame{\frametitle{Technologies}
+\begin{center}
+\large{100\% 0pen Source!}
+\end{center}
+
+\begin{itemize}
+ \item \chref{http://python.org}{Python} : smart object oriented language \\
+ \item \chref{http://djangoproject.com}{Django} : high-level web MVC framework \\
+ \item \chref{https://github.com/yomguy/TimeSide}{TimeSide} : open web audio processing framework
+ \item \chref{http://gstreamer.freedesktop.org/}{GStreamer} : open source multimedia framework
+ \item MySQL, PostgreSQL, others : relational databases \\
+ \item GNU / Linux : applications, libraries and kernel \\
+\end{itemize}
+}
+
+\section{Features}
+%\frame{\tableofcontents[currentsection]}
+\frame{\frametitle{Key features}
+ \begin{itemize}
+ \item \alert{Pure HTML5} web user interface including dynamical forms
+ and smart workflows
+ \item \alert{On the fly} audio analyzing, transcoding and \alert{metadata}
+ embedding in various formats
+ \item \alert{Social editing} with \alert{semantic ontologies}, smart workflows,
+ realtime tools, human or automatic \alert{annotations and
+ segmentations}
+ \item \alert{User management} with individual desk, playlists, profiles
+ and access rights
+ \item \alert{High level search engine} (geolocation, instruments, ethnic groups, etc...)
+ \item \alert{Data providers} : DublinCore, OAI-PMH, RSS, XML, JSON and other
+ \item \alert{Multi-language} support (now english and french)
+ \end{itemize}
+}
+
+
+\section{Architecture}
+\frame{\frametitle{Architecture}
+ \begin{center}
+ \pgfimage[width=8cm]{img/TM_arch}
+ \end{center}
+}
+
+\section{Data model}
+%\frame{\tableofcontents[currentsection]}
+\frame{\frametitle{Data model}
+\begin{itemize}
+ \item Main resource objects (hierarchy)
+ \begin{center}
+ \pgfimage[width=10cm]{img/TM_model}
+ \end{center}
+ \item Complete model : \chref{http://telemeta.org/export/cb1fc9ad29e2cb0122fde9dd76c5275ba5dc7d14/doc/devel/telemeta-all.pdf}{view PDF}
+\end{itemize}
+}
+
+
+\section{Workflow}
+\frame{\frametitle{Workflow}
+ \begin{center}
+ \pgfimage[width=12cm]{img/TM_workflow}
+ \end{center}
+}
+
+
+\begin{frame}\frametitle{Interface}
+ \vspace{-0.25cm}
+ \begin{center}
+ \includegraphics[width=12cm]{img/shots/player_mark.png}
+ \end{center}
+ \tiny{\url{http://archives.crem-cnrs.fr/archives/items/CNRSMH_I_1976_011_003_08/}}
+\end{frame}
+
+
+\section{Related projects}
+\frame{\tableofcontents[currentsection]}
+
+\begin{frame}
+ \frametitle{TimeSide : open web audio processing framework}%\scriptsize
+% ==================================
+% --------- Résumé -----------------
+% ==================================
+\begin{block}{Server side - TimeSide Engine}
+
+ \begin{itemize}
+ \item \alert{Do} asynchronous and fast audio processing with Python,
+ \item \alert{Decode} audio frames from ANY format into numpy arrays,
+ \item \alert{Analyze} audio content with state-of-the-art audio feature extraction libraries,
+ \item \alert{Organize}, serialize and save analysis metadata through various formats,
+ \item \alert{Draw} various fancy waveforms, spectrograms and other cool graphers,
+ \item \alert{Transcode} audio data in various media formats and stream them through web apps,
+
+ \end{itemize}
+
+\end{block}
+\begin{block}{Client side - TimeSide UI}
+ \begin{itemize}
+ \item \alert{Playback} and \alert{interact} on demand through a smart high-level HTML5 extensible player,
+ \item \alert{Index}, \alert{tag} and \alert{organize semantic metadata} \\
+(see \href{http://telemeta.org/}{Telemeta} which embeds TimeSide).
+\hfill $\vcenter{\hbox{\includegraphics[width=0.2\textwidth]{img/logo_telemeta_1-1.pdf}}}$
+ % \begin{flushright}
+ % \includegraphics[width=0.2\textwidth]{../../Common/img/logo_telemeta_1-1.pdf}\\
+ % \colorbox{yellow!50}{\textbf{\url{http://telemeta.org/}}}
+ %\end{flushright}
+ \end{itemize}
+\end{block}
+\end{frame}
+
+\begin{frame}
+ \frametitle{TimeSide - Architecture}
+ \begin{center}
+ \includegraphics[width=0.8\textwidth]{img/timeside_schema_v3.pdf}
+ \end{center}
+\end{frame}
+
+
+
+\frame{\frametitle{DIADEMS}
+\begin{itemize}
+ \item \chref{http://www.irit.fr/recherches/SAMOVA/DIADEMS/fr/welcome/&cultureKey=en}{DIADEMS} : Description, Indexation, Access to Sound and Ethnomusicological Documents
+ \item granted by ANR : french national research agency (ANR-12-CORD-0022)
+ \item 3 years, 8 partners, 850 k\euro
+ \item new collaboration between human and computer science laboratories (not so easy!)
+ \item apply MIR algorithms on large scale ethnomusicological data
+ \item define some high level interfaces to find musical informations in complex corpus
+ \item \dchref{http://www.irit.fr/recherches/SAMOVA/DIADEMS/fr/welcome/}
+ \item \dchref{http://diadems.telemeta.org}
+\end{itemize}
+}
+
+\frame{\frametitle{DIADEMS - Partners}
+\begin{itemize}
+\item Sponsors:
+\begin{itemize}
+ \item CNRS
+ \item Huma-Num (ex TGE Adonis)
+ \item ANR
+ \item CREM
+ \item UPMC
+ \item Parisson
+\end{itemize}
+
+\vspace{0.25cm}
+
+\item Partners :
+\begin{itemize}
+\item IRIT (université Paul Sabatier, Toulouse 3)
+\item LIMSI (universités Pierre et Marie Curie (UPMC, Paris 6) et Paris-Sud)
+\item LAM (institut Jean Le Rond d'Alembert, UPMC)
+\item LABRI (université de Bordeaux)
+\item CREM (université Paris Ouest Nanterre La Défense)
+\item LESC (université Paris Ouest Nanterre La Défense)
+\item Museum d'Histoire Naturelle de Paris
+\item Musée du Quai Branly
+\end{itemize}
+
+\end{itemize}
+
+\begin{center}
+\begin{columns}[c]
+\column{2.5cm}
+\begin{center}
+\pgfimage[width=1cm]{img/logo-CNRS}\end{center}
+\column{2.5cm}
+\begin{center}
+\pgfimage[width=2.5cm]{img/Logo-CREM-La.jpg}
+\end{center}
+\column{2.5cm}
+\begin{center}
+\pgfimage[width=2.5cm]{img/parisson_logo_200}\end{center}
+\column{2cm}
+\begin{center}
+\pgfimage[width=1.2cm]{img/logo-mnhn}\end{center}
+\end{columns}
+\end{center}
+
+}
+
+
+\frame{\frametitle{DIADEMS - Roadmap}
+\begin{center}
+\pgfimage[width=12cm]{img/TM_Roadmap}
+\end{center}
+}
+
+\frame{\frametitle{TODO list}
+\begin{block}{TimeSide}
+ \begin{itemize}
+ \item web server (django)
+ \item process task manager
+ \item full HTML5 zooming player (+ annotations, segmentations, etc..)
+ \item analyzer parameters (+ interface)
+ \item more filtering (FIR, IIR, phase vocoder)
+ \item \dchref{https://github.com/yomguy/TimeSide/issues}
+ \end{itemize}
+\end{block}
+\begin{block}{Telemeta}
+ \begin{itemize}
+ \item class based views
+ \item rewrite geolocation services
+ \item public and enhanced user playlists
+ \item smart breadcrumbs
+ \item better interactions with TimeSide
+ \item \dchref{http://telemeta.org/report/1}
+ \end{itemize}
+\end{block}
+}
+
+\section{Development}
+%\frame{\tableofcontents[currentsection]}
+\frame{\frametitle{Development}
+\begin{block}{Links}
+ \begin{itemize}
+ \item \dchref{http://telemeta.org}
+ \item \dchref{https://github.com/yomguy/Telemeta/}
+ \item \dchref{https://github.com/yomguy/TimeSide/}
+ \end{itemize}
+\end{block}
+\begin{block}{Team}
+ \begin{itemize}
+ \item Guillaume Pellerin
+ \item Thomas Fillon
+ \item Paul Brossier
+ \item Riccardo Zaccarelli
+ \item Maxime Lecoz
+ \item David Doukan
+ \end{itemize}
+\end{block}
+\begin{block}{Licence}
+\chref{http://www.cecill.info/licences/Licence_CeCILL_V2.1-en.html}{CeCILL v2.1} (GPL v2 compatible)
+\end{block}
+}
+
+
+\frame{\frametitle{The End}
+ \begin{center}
+ \large{Thank you!}
+ \vspace{0.25cm}
+ \begin{block}{Links}
+ \begin{itemize}
+ \item \chref{http://telemeta.org}{telemeta.org}
+ \item \chref{https://twitter.com/telemeta/}{@telemeta}
+ \end{itemize}
+ \end{block}
+ \begin{block}{Me}
+ \begin{itemize}
+ \item \chref{mailto:guillaume@parisson.com}{guillaume@parisson.com}
+ \item \chref{https://twitter.com/yomguy/}{@yomguy}
+ \item \chref{https://github.com/yomguy/}{github.com/yomguy/}
+ \item \chref{https://plus.google.com/u/0/+GuillaumePellerin/posts}{+GuillaumePellerin}
+ \item \chref{http://fr.linkedin.com/in/guillaumepellerin}{fr.linkedin.com/in/guillaumepellerin}
+ \end{itemize}
+ \end{block}
+ \end{center}
+}
+
+\end{document}
\ No newline at end of file