Cadoles
/
formations
20
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Base formation angular+amélioration layout formations JS

This commit is contained in:
William Petit 2015-04-06 17:50:08 +02:00 committed by Benjamin Bohard
parent 60d10200f7
commit 7cbddf946d
29 changed files with 800 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
javascript/angular/angular.md Normal file
View File

@ -0,0 +1,11 @@
# .cadoles-slide-title[Angular, présentation générale]
.cadoles-list[
- Framework applicatif côté client en Javascript
- Initialement présenté par Google en 2009
- Licence MIT
- Dernière version stable 1.3.15 (version 2 en alpha)
- Compatible avec l'ensemble des navigateurs, IE compris (jusqu'à IE8)
]

36
javascript/angular/app-basique.md Normal file
View File

@ -0,0 +1,36 @@
# .cadoles-slide-title[Premier coup d'oeil]
**Une application basique**
```html
<html>
<head>
<meta charset="utf8">
<title>Calculateur de diamètre et périmètre d'un cercle</title>
</head>
<!-- Déclaration du point d'entrée et initialisation de l'application -->
<body ng-app ng-init="radius=1.0; pi=3.14">
<h1>Calculateur de diamètre et périmètre d'un cercle</h1>
<!-- Liaison de données via la directive ng-model -->
<label>Approximation de π:</label>
<input ng-model="pi" type="number" />
<br />
<!-- Champ de récupération du rayon -->
<label>Rayon de votre cercle:</label>
<input ng-model="radius" type="number" />
<hr />
<!-- Affichage des valeurs calculées -->
<b>Diamètre: </b><span>{{ 2 * radius }}</span><br />
<b>Périmètre: </b><span>{{ 2 * radius * pi }}</span><br />
<!-- Import de du framework Angular -->
<script src="../node_modules/angular/angular.js"></script>
</body>
</html>
```

32
javascript/angular/controleurs.md Normal file
View File

@ -0,0 +1,32 @@
# .cadoles-slide-title[Les contrôleurs]
.cadoles-small[
- Les contrôleurs permettent de gérer la logique métier dans votre application Angular.
- La définition du périmètre d'action d'un contrôleur est lié à un élément du DOM et se fait via l'utilisation de la directive `ng-controller`
]
**Exemple**
```html
<html>
<!-- Déclaration du point de montage de notre application" -->
<body ng-app="myApp">
<div ng-controller="MyAppCtrl">
<span>{{ $scope.foo }}</span> <!-- Affiche "Hello World !" -->
</div>
<!-- Import du framework Angular -->
<script src="angular.js"></script>
<!-- Déclaration de notre module/application Angular -->
<script>
var myApp = angular.module('myApp', []);
myApp.controller('MyAppCtrl', ['$scope', function($scope) {
$scope.foo = 'Hello World !';
}]);
</script>
</body>
</html>
```

8
javascript/angular/cover.md Normal file
View File

@ -0,0 +1,8 @@
class: middle, center
# .cadoles-blue[Formation AngularJS 1]
## .cadoles-blue[EOLE]
### William Petit
<img style="height: 30px" src=../../beamer-skel/img/logo-cadoles-01.png />
### 09/10 Avril 2015

1
javascript/angular/exercices/.gitignore vendored Normal file
View File

@ -0,0 +1 @@
node_modules

29
javascript/angular/exercices/basic-app/index.html Normal file
View File

@ -0,0 +1,29 @@
<html>
<head>
<meta charset="utf8">
<title>Calculateur de diamètre et périmètre d'un cercle</title>
</head>
<!-- Déclaration de l'application -->
<body ng-app ng-init="radius=1.0; pi=3.14">
<h1>Calculateur de diamètre et périmètre d'un cercle</h1>
<label>Approximation de π:</label>
<input ng-model="pi" type="number" step="0.01" />
<br />
<!-- Champ de récupération du rayon -->
<label>Rayon de votre cercle:</label>
<input ng-model="radius" type="number" step="0.1" />
<hr />
<!-- Affichage des valeurs calculées -->
<b>Diamètre: </b><span>{{ 2 * radius }}</span><br />
<b>Périmètre: </b><span>{{ 2 * radius * pi }}</span><br />
<!-- Import de du framework Angular -->
<script src="../node_modules/angular/angular.js"></script>
</body>
</html>

14
javascript/angular/exercices/package.json Normal file
View File

@ -0,0 +1,14 @@
{
"name": "angular-exercices",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "GPL",
"dependencies": {
"angular": "^1.3.15"
}
}

25
javascript/angular/exercices/scope-1/app.js vendored Normal file
View File

@ -0,0 +1,25 @@
/*
* Énoncé:
*
* Implémenter le contrôleur MainCtrl et sa fonction sayHello()
* affichant le message "Bonjour <nom> <prénom>. Votre âge est <age>.",
* où les éléments <???> sont remplacés par les données présentes dans le
* formulaire, lorsque l'utilisateur clique sur le bouton "Dire bonjour".
*
* Attention: des directives Angular sont également nécessaires dans le code HTML.
*
*/
var Exo = angular.module('Exo', []);
Exo.controller('MainCtrl', ['$scope', function($scope) {
$scope.nom = null;
$scope.prenom = null;
$scope.age = null;
$scope.direBonjour = function() {
// alert('...');
};
}]);

31
javascript/angular/exercices/scope-1/index.html Normal file
View File

@ -0,0 +1,31 @@
<html>
<head>
<meta charset="utf8">
<title>Exercice manipulation $scope et contrôleur</title>
</head>
<!-- Déclaration de l'application -->
<body ng-app="Exo">
<div ng-controller="MainCtrl">
<label>Nom</label>
<input type="text" />
<br />
<label>Prénom</label>
<input type="text" />
<br />
<label>Age</label>
<input type="number" />
<br />
<button>Dire bonjour</button>
</div>
<!-- Import de du framework Angular -->
<script src="../node_modules/angular/angular.js"></script>
<script src="app.js"></script>
</body>
</html>

25
javascript/angular/exercices/scope-2/app.js vendored Normal file
View File

@ -0,0 +1,25 @@
/*
* Énoncé:
*
* Implémenter le contrôleur MainCtrl et sa fonction sayHello()
* affichant le message "Bonjour <nom> <prénom>. Votre âge est <age>.",
* où les éléments <???> sont remplacés par les données présentes dans le
* formulaire, lorsque l'utilisateur clique sur le bouton "Dire bonjour".
*
* Attention: des directives Angular sont également nécessaires dans le code HTML.
*
*/
var Exo = angular.module('Exo', []);
Exo.controller('MainCtrl', ['$scope', function($scope) {
$scope.nom = null;
$scope.prenom = null;
$scope.age = null;
$scope.direBonjour = function() {
// alert('...');
};
}]);

31
javascript/angular/exercices/scope-2/index.html Normal file
View File

@ -0,0 +1,31 @@
<html>
<head>
<meta charset="utf8">
<title>Exercice manipulation $scope et contrôleur</title>
</head>
<!-- Déclaration de l'application -->
<body ng-app="Exo">
<div ng-controller="MainCtrl">
<label>Nom</label>
<input type="text" />
<br />
<label>Prénom</label>
<input type="text" />
<br />
<label>Age</label>
<input type="number" />
<br />
<button>Dire bonjour</button>
</div>
<!-- Import de du framework Angular -->
<script src="../node_modules/angular/angular.js"></script>
<script src="app.js"></script>
</body>
</html>

BIN
javascript/angular/img/One_Way_Data_Binding.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 32 KiB

BIN
javascript/angular/img/Two_Way_Data_Binding.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 49 KiB

BIN
javascript/angular/img/modeles_client_serveur.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 23 KiB

29
javascript/angular/index.html Normal file
View File

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html>
<head>
<title>Cadoles - Formation Angular</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link href="../cadoles-theme.css" rel="stylesheet">
</head>
<body>
<script type="text/javascript">
SLIDES = [
'cover',
'plan',
'spa',
'angular',
'app-basique',
'liaison-donnees-1',
'modules',
'controleurs',
'scope-1',
'scope-2',
'scope-3',
'scope-4',
'licence'
];
</script>
<script src="../bower_components/remark/out/remark.js"></script>
<script src="../slideshow-bootstrap.js"></script>
</body>
</html>

23
javascript/angular/liaison-donnees-1.md Normal file
View File

@ -0,0 +1,23 @@
# .cadoles-slide-title[La liaison de données]
.cadoles-left-column[
**Liaison à sens unique**
<img src="./img/One_Way_Data_Binding.png" style="max-width:85%" />
]
.cadoles-right-column[
**Liaison à double sens**
<img src="./img/Two_Way_Data_Binding.png" style="max-width:85%" />
]
.cadoles-xs.cadoles-center.cadoles-clearfix[
Source: [Documentation Angular](https://docs.angularjs.org/guide/databinding)
]

12
javascript/angular/licence.md Normal file
View File

@ -0,0 +1,12 @@
# .cadoles-slide-title[Licence]
Cette œuvre est mise à disposition sous licence [cc-by-nc-sa-2.0](http://creativecommons.org/licenses/by-nc-sa/2.0/fr/)
- Attribution
- Pas d’Utilisation Commerciale
- Partage dans les Mêmes Conditions 2.0
- France
Pour voir une copie de cette licence, visitez http://creativecommons.org/licenses/by-nc-sa/2.0/fr/
ou écrivez à Creative Commons, 444 Castro Street, Suite 900,
Mountain View, California, 94041, USA.

25
javascript/angular/modules.md Normal file
View File

@ -0,0 +1,25 @@
# .cadoles-slide-title[Modules]
- Un module est une unité logique, fonctionnelle de votre application.
- Une application Angular est un aggrégat d'un ou plusieurs modules, i.e. plusieurs modules distincts peuvent partager la même page via des points de montage différents.
- Un module peut avoir zéro, une ou plusieurs dépendances vers d'autres modules.
**Exemple**
```html
<html>
<!-- Déclaration du point de montage de notre application" -->
<body ng-app="myApp">
<!-- Import de du framework Angular -->
<script src="angular.js"></script>
<!-- Déclaration de notre module/application Angular -->
<script>
var myApp = angular.module('myApp', []);
</script>
</body>
</html>
```

40
javascript/angular/plan.md Normal file
View File

@ -0,0 +1,40 @@
# .cadoles-slide-title[Plan]
- SPA & changement de paradigme
- Angular: présentation générale
- Premier coup d'oeil
- Liaison de données
- Modules
- Contrôleurs et scopes
- Services et injection de dépendances
- Templates et expressions
- Les filtres
- Directives
- Animations
- Tests unitaires
- Tests fonctionnels
???
## Plan complet
- SPA & changement de paradigme
- Angular: présentation générale
- Premier coup d'oeil
- Liaison de données
- Modules
- Contrôleurs et scopes
- Les contrôleurs
- L'objet `$scope`
- Services et injection de dépendances
- Utilisation de services
- Création de services personalisés
- Templates et expressions
- Itération
- Inclusion de templates
- Manipulation des classes
- Les filtres
- Directives
- Animations
- Tests unitaires
- Tests fonctionnels

5
javascript/angular/questions.md Normal file
View File

@ -0,0 +1,5 @@
# .cadoles-slide-title[{{ end() }}]
.cadoles-center[
## Des questions ?
]

35
javascript/angular/scope-1.md Normal file
View File

@ -0,0 +1,35 @@
# .cadoles-slide-title[L'objet $scope (1/4)]
.cadoles-small[
- L'object `$scope` est le lien entre la logique métier de votre contrôleur et le DOM.
- C'est le contexte utilisé lors des opérations de liaison de données.
- C'est également le principal médium de gestion des interactions de l'utilisateur avec votre application.
]
**Exemple**
```html
<html>
<body ng-app="myApp">
<div ng-controller="MyAppCtrl">
<!-- La directive "ng-click" associe la méthode exposée sur le $scope à l'évènement "onclick" -->
<button ng-click="buttonClickHandler()"></button>
</div>
<script src="angular.js"></script>
<script>
var myApp = angular.module('myApp', []);
myApp.controller('MyAppCtrl', ['$scope', function($scope) {
$scope.buttonClickHandler = function() {
alert('Click !');
};
}]);
</script>
</body>
</html>
```

31
javascript/angular/scope-2.md Normal file
View File

@ -0,0 +1,31 @@
# .cadoles-slide-title[L'objet $scope (2/4)]
**Contrôleurs et héritage prototypal des `$scope`**
```html
<html>
<body ng-app="myApp">
<div ng-controller="ParentCtrl">
{{parentProp}} <!-- "Foo" -->
<div ng-controller="ChildCtrl">
* {{parentProp}} <!-- "Foo" -->
{{childProp}} <!-- "Bar" -->
</div>
</div>
<script src="angular.js"></script>
<script>
var myApp = angular.module('myApp', []);
myApp.controller('ParentCtrl', ['$scope', function($scope) {
* $scope.parentProp = "Foo";
}]);
myApp.controller('ChildCtrl', ['$scope', function($scope) {
* $scope.childProp = "Bar";
}]);
</script>
</body>
</html>
```

34
javascript/angular/scope-3.md Normal file
View File

@ -0,0 +1,34 @@
# .cadoles-slide-title[L'objet $scope (3/4)]
**Communication inter-controlleurs, évènements & propagation**
```html
<html>
<body ng-app="myApp">
<div ng-controller="ParentCtrl">
<div ng-controller="ChildCtrl">
</div>
</div>
<script src="angular.js"></script>
<script>
var myApp = angular.module('myApp', []);
myApp.controller('ParentCtrl', ['$scope', function($scope) {
* $scope.$on('child-event', function(evt) { console.log('Emitted event: ', evt); });
* $scope.$broadcast('parent-event', {data: 'Parent event !'});
}]);
myApp.controller('ChildCtrl', ['$scope', function($scope) {
* $scope.$emit('child-event', {data: 'Child event !'});
* $scope.$on('parent-event', function(evt) { console.log('Broadcasted event: ', evt); });
}]);
</script>
</body>
</html>
```

29
javascript/angular/scope-4.md Normal file
View File

@ -0,0 +1,29 @@
# .cadoles-slide-title[L'objet $scope (4/4)]
**Observer les modifications du $scope**
```html
<html>
<body ng-app="myApp">
<div ng-controller="MainCtrl">
<input ng-model="message" />
</div>
<script src="angular.js"></script>
<script>
var myApp = angular.module('myApp', []);
myApp.controller('MainCtrl', ['$scope', function($scope) {
$scope.message = '';
$scope.$watch('message', function(newVal, oldVal) {
console.log('"message" a changé !', newVal, oldVal);
});
}]);
</script>
</body>
</html>
```

19
javascript/angular/spa.md Normal file
View File

@ -0,0 +1,19 @@
# .cadoles-slide-title[Un changement de paradigme]
> **S.P.A.** Single Page Application
.cadoles-center[
<img src="./img/modeles_client_serveur.png" style="max-width:65%"/>
]
.cadoles-left-column.cadoles-small.cadoles-padded[
- L'état de l'application est géré côté serveur.
- Le rendu est géré côté serveur.
- Le client se place en simple terminal d'affichage de l'application.
]
.cadoles-left-right.cadoles-small.cadoles-padded[
- L'état de l'application est géré côté client.
- Le rendu est géré côté client.
- Le serveur se place en fournisseur de données.
]

28
javascript/base/index.html
View File

@ -3,23 +3,12 @@
<head> <head>
<title>Cadoles - Formation Javascript</title> <title>Cadoles - Formation Javascript</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<style type="text/css">
body {
font-family: 'Droid Sans', 'Ubuntu Sans', 'sans-serif';
}
h1, h2, h3 {
font-family: 'Caviar Dream', 'Droid Sans', 'Ubuntu Sans', 'sans-serif';
font-weight: normal;
}
.remark-code, .remark-inline-code { font-family: 'Ubuntu Mono', monospace; }
</style>
<link href="../cadoles-theme.css" rel="stylesheet"> <link href="../cadoles-theme.css" rel="stylesheet">
</head> </head>
<body> <body>
<script src="../bower_components/remark/out/remark.js"></script>
<script type="text/javascript"> <script type="text/javascript">
var slides = [ var SLIDES = [
'cover', 'cover',
'plan', 'plan',
'historique', 'historique',
@ -71,19 +60,6 @@
'licence' 'licence'
]; ];
var slideshow = remark.create({
source: slides.map(fetchSlide).join('\n---\n'),
highlightStyle: 'github',
highlightLanguage: 'javascript'
});
function fetchSlide(slideName) {
var req = new XMLHttpRequest();
req.open('GET', slideName+'.md', false);
req.send();
return req.responseText.replace(/\r\n/g, '\n');
};
</script> </script>
<script id="cadoles-ascii" type="text/ascii-art"> <script id="cadoles-ascii" type="text/ascii-art">
___ _ _ ___ _ _
@ -101,5 +77,7 @@
console.log('%c '+asciiText, 'color: #2A80AF;'); console.log('%c '+asciiText, 'color: #2A80AF;');
}()); }());
</script> </script>
<script src="../bower_components/remark/out/remark.js"></script>
<script src="../slideshow-bootstrap.js"></script>
</body> </body>
</html> </html>

18
javascript/cadoles-theme.css
View File

@ -1,4 +1,15 @@
/* Thème Cadoles */ /* Thème Cadoles */
body {
font-family: 'Droid Sans', 'Ubuntu Sans', 'sans-serif';
}
h1, h2, h3 {
font-family: 'Caviar Dream', 'Droid Sans', 'Ubuntu Sans', 'sans-serif';
font-weight: normal;
}
.remark-code, .remark-inline-code { font-family: 'Ubuntu Mono', monospace; }
a { a {
color: #3080AF; color: #3080AF;
text-decoration: none; text-decoration: none;
@ -63,10 +74,13 @@ ul > li {
display: inline-block; display: inline-block;
} }
.cadoles-center { text-align: center; }
.cadoles-blue { color: #5379B4; } .cadoles-blue { color: #5379B4; }
.cadoles-clearfix { clear: both; } .cadoles-clearfix { clear: both; }
.cadoles-list > ul { font-size: 1.5em; } .cadoles-list > ul { font-size: 1.5em; }
.cadoles-list > ul ul { font-size: 0.8em; } .cadoles-list > ul ul { font-size: 0.8em; }
.cadoles-xlarge { font-size: 1.5em; }
.cadoles-large { font-size: 1.2em; }
.cadoles-small { font-size: 0.8em; } .cadoles-small { font-size: 0.8em; }
.cadoles-xs { font-size: 0.7em; } .cadoles-xs { font-size: 0.7em; }
.cadoles-center { text-align: center; } .cadoles-center { text-align: center; }
@ -83,6 +97,10 @@ ul > li {
float: right; float: right;
} }
.cadoles-padded {
padding: 10px;
}
.cadoles-right-column:after { .cadoles-right-column:after {
visibility: hidden; visibility: hidden;
display: block; display: block;

210
javascript/ressources/modeles_client_serveur.ep Normal file
View File

@ -0,0 +1,210 @@
<?xml version="1.0"?>
<Document xmlns="http://www.evolus.vn/Namespace/Pencil"><Properties/><Pages><Page><Properties><Property name="name">Untitled Page</Property><Property name="id">1428307129158_3008</Property><Property name="width">1264</Property><Property name="height">812</Property><Property name="dimBackground"/><Property name="transparentBackground"/><Property name="backgroundColor">#ffffff</Property></Properties><Content><g xmlns="http://www.w3.org/2000/svg" p:type="Shape" xmlns:p="http://www.evolus.vn/Namespace/Pencil" p:def="Evolus.Common:Line" id="fd02c15c568b4b72b87c2537c78d9112" transform="matrix(1,0,0,1,200,392)"><p:metadata><p:property name="box"><![CDATA[896,10]]></p:property><p:property name="strokeColor"><![CDATA[#666666FF]]></p:property><p:property name="strokeStyle"><![CDATA[2|1,3]]></p:property></p:metadata>
<rect style="fill: #000000; fill-opacity: 0; stroke: none;" x="0" y="0" p:name="bgRect" id="9e81b59b70644dfd8a0f704cd94a3b63" width="896" height="10"/>
<path style="fill: none; stroke: rgb(102, 102, 102); stroke-width: 2; stroke-opacity: 1; stroke-dasharray: 1, 3;" d="M 0 5 L 896 5" p:name="line1" id="b491dd2268da471186fd5c3037a535aa" transform="translate(0,0)"/>
</g><g xmlns="http://www.w3.org/2000/svg" p:type="Shape" xmlns:p="http://www.evolus.vn/Namespace/Pencil" p:def="Evolus.Common:RectWithGradient" id="a2f82c6a3f2f4439b59e8b4d3ab72cb6" transform="matrix(1,0,0,1,200,152)"><p:metadata><p:property name="box"><![CDATA[424,80]]></p:property><p:property name="withBlur"><![CDATA[false]]></p:property><p:property name="radius"><![CDATA[0,0]]></p:property><p:property name="textPadding"><![CDATA[0,5]]></p:property><p:property name="startFillColor"><![CDATA[#2F5F8FFF]]></p:property><p:property name="endFillColor"><![CDATA[#54AAFFFF]]></p:property><p:property name="strokeColor"><![CDATA[#1B3280FF]]></p:property><p:property name="strokeStyle"><![CDATA[2|]]></p:property><p:property name="textContent"><![CDATA[<font size="5">Serveur
</font>]]></p:property><p:property name="textFont"><![CDATA["Liberation Sans",Arial,sans-serif|normal|normal|13px|none]]></p:property><p:property name="textColor"><![CDATA[#000000FF]]></p:property><p:property name="textAlign"><![CDATA[1,1]]></p:property></p:metadata>
<defs>
<linearGradient x1="0%" y1="0%" x2="0%" y2="100%" p:name="linearFill" id="7039317c5353406589859f04e9c8a18b">
<stop style="stop-color: rgb(47, 95, 143); stop-opacity: 1;" offset="0" p:name="stop1" id="1a162ed4042c4a62bf53f3e9565373f4"/>
<stop style="stop-color: rgb(84, 170, 255); stop-opacity: 1;" offset="1" p:name="stop2" id="02f98e82d0774f34959887ed7d94f47a"/>
</linearGradient>
<rect width="424" height="80" rx="0" ry="0" x="0" y="0" style="stroke-width: 2; fill: url(&quot;#7039317c5353406589859f04e9c8a18b&quot;) none; stroke: rgb(27, 50, 128); stroke-opacity: 1;" p:name="rrRect" id="437f0631b69846c993cb476ba8cf8cdf" transform="translate(0,0)"/>
<filter height="1.2558399" y="-0.12792" width="1.06396" x="-0.03198" p:name="shadingFilter" id="4c8f0d9495ae46bab7b414f5f7ad076d">
<feGaussianBlur stdDeviation="1" in="SourceAlpha"/>
</filter>
</defs>
<use xlink:href="#437f0631b69846c993cb476ba8cf8cdf" xmlns:xlink="http://www.w3.org/1999/xlink" transform="translate(2, 2)" p:filter="url(#4c8f0d9495ae46bab7b414f5f7ad076d)" style="opacity: 0.5; visibility: hidden; display: none;" p:heavy="true" p:name="bgCopy" id="738f762440df44dd8b891659f87e45c6"/>
<use xlink:href="#437f0631b69846c993cb476ba8cf8cdf" xmlns:xlink="http://www.w3.org/1999/xlink"/>
<foreignObject x="5" y="26" width="414" height="28" p:name="text" id="ccb8f9145bad49e0b176d37820a14537" style="font-family: &quot;Liberation Sans&quot;,Arial,sans-serif; font-size: 13px; font-weight: normal; font-style: normal; text-decoration: none; color: rgb(0, 0, 0); opacity: 1; text-align: center;"><div xmlns="http://www.w3.org/1999/xhtml"><font size="5">Serveur
</font></div></foreignObject>
</g><g xmlns="http://www.w3.org/2000/svg" p:type="Shape" xmlns:p="http://www.evolus.vn/Namespace/Pencil" p:def="Evolus.Common:RectWithGradient" id="7e6c284add2548c29fd2feb29f684abc" transform="matrix(1,0,0,1,200,560)"><p:metadata><p:property name="box"><![CDATA[424,80]]></p:property><p:property name="withBlur"><![CDATA[false]]></p:property><p:property name="radius"><![CDATA[0,0]]></p:property><p:property name="textPadding"><![CDATA[0,5]]></p:property><p:property name="startFillColor"><![CDATA[#2F5F8FFF]]></p:property><p:property name="endFillColor"><![CDATA[#54AAFFFF]]></p:property><p:property name="strokeColor"><![CDATA[#1B3280FF]]></p:property><p:property name="strokeStyle"><![CDATA[2|]]></p:property><p:property name="textContent"><![CDATA[<div style="text-align: center;"><font size="5">Client</font></div>]]></p:property><p:property name="textFont"><![CDATA["Liberation Sans",Arial,sans-serif|normal|normal|13px|none]]></p:property><p:property name="textColor"><![CDATA[#000000FF]]></p:property><p:property name="textAlign"><![CDATA[1,1]]></p:property></p:metadata>
<defs>
<linearGradient x1="0%" y1="0%" x2="0%" y2="100%" p:name="linearFill" id="a594fcda0218449fbf8598a105154549">
<stop style="stop-color: rgb(47, 95, 143); stop-opacity: 1;" offset="0" p:name="stop1" id="b631e85c58dc4c80ae74e5fe851d9926"/>
<stop style="stop-color: rgb(84, 170, 255); stop-opacity: 1;" offset="1" p:name="stop2" id="928163434b784970b9348eb17f1daf99"/>
</linearGradient>
<rect width="424" height="80" rx="0" ry="0" x="0" y="0" style="stroke-width: 2; fill: url(&quot;#a594fcda0218449fbf8598a105154549&quot;) none; stroke: rgb(27, 50, 128); stroke-opacity: 1;" p:name="rrRect" id="86dcf1e4f0c34257866e53fc1428bca4" transform="translate(0,0)"/>
<filter height="1.2558399" y="-0.12792" width="1.06396" x="-0.03198" p:name="shadingFilter" id="5edb7eb3285049239675977a314fdbc2">
<feGaussianBlur stdDeviation="1" in="SourceAlpha"/>
</filter>
</defs>
<use xlink:href="#86dcf1e4f0c34257866e53fc1428bca4" xmlns:xlink="http://www.w3.org/1999/xlink" transform="translate(2, 2)" p:filter="url(#5edb7eb3285049239675977a314fdbc2)" style="opacity: 0.5; visibility: hidden; display: none;" p:heavy="true" p:name="bgCopy" id="0b91b831704c4a67a2d0fc1090e4116c"/>
<use xlink:href="#86dcf1e4f0c34257866e53fc1428bca4" xmlns:xlink="http://www.w3.org/1999/xlink"/>
<foreignObject x="5" y="26" width="414" height="28" p:name="text" id="ec73d61943cc4c22809ad26261b242a7" style="font-family: &quot;Liberation Sans&quot;,Arial,sans-serif; font-size: 13px; font-weight: normal; font-style: normal; text-decoration: none; color: rgb(0, 0, 0); opacity: 1; text-align: center;"><div xmlns="http://www.w3.org/1999/xhtml"><div style="text-align: center;"><font size="5">Client</font></div></div></foreignObject>
</g><g xmlns="http://www.w3.org/2000/svg" p:type="Shape" xmlns:p="http://www.evolus.vn/Namespace/Pencil" p:def="Evolus.Common:arrow" id="f0a7e82e0bfe42379d0ca2b0033f5b0c" transform="matrix(1,0,0,1,247.00001525878906,240)"><p:metadata><p:property name="startPin"><![CDATA[0,0]]></p:property><p:property name="endPin"><![CDATA[-1,302]]></p:property><p:property name="withStartArrow"><![CDATA[true]]></p:property><p:property name="withEndArrow"><![CDATA[false]]></p:property><p:property name="mode"><![CDATA[curvy]]></p:property><p:property name="detached"><![CDATA[false]]></p:property><p:property name="strokeColor"><![CDATA[#1B3280FF]]></p:property><p:property name="strokeStyle"><![CDATA[2|]]></p:property><p:property name="textContent"><![CDATA[]]></p:property><p:property name="textFont"><![CDATA["Liberation Sans",Arial,sans-serif|normal|normal|13px|none]]></p:property><p:property name="textColor"><![CDATA[#000000FF]]></p:property><p:property name="textAlign"><![CDATA[1,1]]></p:property></p:metadata>
<defs>
<path style="stroke-linejoin: round; fill: none;" p:name="path" id="b94b0de30f234c5eb604ec44fdd5ef9e" d="M -6 6 L 0 0 L 6 6 M 0 0 C 0 60 -1 242 -1 302"/>
</defs>
<use xlink:href="#b94b0de30f234c5eb604ec44fdd5ef9e" xmlns:xlink="http://www.w3.org/1999/xlink" stroke-width="10" stroke-opacity="0" stroke="#FF0000"/>
<use xlink:href="#b94b0de30f234c5eb604ec44fdd5ef9e" xmlns:xlink="http://www.w3.org/1999/xlink" p:name="outArrow1" id="135f99a4232042c5ad4c89cc69e7240c" style="stroke: rgb(27, 50, 128); stroke-opacity: 1; stroke-width: 2;"/>
<text p:name="text" id="39128b307d6e462ba16f23821461a957" style="fill: rgb(0, 0, 0); fill-opacity: 1; font-family: &quot;Liberation Sans&quot;,Arial,sans-serif; font-size: 13px; font-weight: normal; font-style: normal; text-decoration: none;">
<textPath xlink:href="#b94b0de30f234c5eb604ec44fdd5ef9e" xmlns:xlink="http://www.w3.org/1999/xlink" startOffset="50%" text-anchor="middle" alignment-baseline="middle">
<tspan dy="-4.333333333333333" p:name="textSpan" id="8f2687abd0e34c73a78fef294e4bc865" dx="16"></tspan>
</textPath>
</text>
</g><g xmlns="http://www.w3.org/2000/svg" p:type="Shape" xmlns:p="http://www.evolus.vn/Namespace/Pencil" p:def="Evolus.Common:PlainTextV2" id="e3b5590fa469455a9d460b93ef0b555d" transform="matrix(1,0,0,1,200,476)"><p:metadata><p:property name="disabled"><![CDATA[false]]></p:property><p:property name="width"><![CDATA[100,0]]></p:property><p:property name="fixedWidth"><![CDATA[false]]></p:property><p:property name="label"><![CDATA[GET /]]></p:property><p:property name="textColor"><![CDATA[#000000FF]]></p:property><p:property name="textFont"><![CDATA["Liberation Sans",Arial,sans-serif|normal|normal|13px|none]]></p:property><p:property name="textAlign"><![CDATA[0,0]]></p:property></p:metadata>
<rect x="0" y="0" style="fill: none; stroke: none; visibility: hidden; display: none;" p:name="bgRect" id="0b7ee8b429e746788edf2ea07a0aac8c" width="0" height="0"/>
<text xml:space="preserve" p:name="text" id="26579336d2924b1c89aa7fffb581fc6a" style="fill: rgb(0, 0, 0); fill-opacity: 1; font-family: &quot;Liberation Sans&quot;,Arial,sans-serif; font-size: 13px; font-weight: normal; font-style: normal; text-decoration: none;"><tspan x="0" y="0">GET /</tspan></text>
</g><g xmlns="http://www.w3.org/2000/svg" p:type="Shape" xmlns:p="http://www.evolus.vn/Namespace/Pencil" p:def="Evolus.Common:PlainTextV2" id="587ee6ec971d4fa49664dd8d384c371e" transform="matrix(1,0,0,1,289,324)"><p:metadata><p:property name="disabled"><![CDATA[false]]></p:property><p:property name="width"><![CDATA[100,0]]></p:property><p:property name="fixedWidth"><![CDATA[false]]></p:property><p:property name="label"><![CDATA[Page HTML]]></p:property><p:property name="textColor"><![CDATA[#000000FF]]></p:property><p:property name="textFont"><![CDATA["Liberation Sans",Arial,sans-serif|normal|normal|13px|none]]></p:property><p:property name="textAlign"><![CDATA[0,0]]></p:property></p:metadata>
<rect x="0" y="0" style="fill: none; stroke: none; visibility: hidden; display: none;" p:name="bgRect" id="6e4634f18edf4c44940d70cf185f8ef9" width="0" height="0"/>
<text xml:space="preserve" p:name="text" id="2720f67743b847ddb5d27b7e6dc3d6cc" style="fill: rgb(0, 0, 0); fill-opacity: 1; font-family: &quot;Liberation Sans&quot;,Arial,sans-serif; font-size: 13px; font-weight: normal; font-style: normal; text-decoration: none;"><tspan x="0" y="0">Page HTML</tspan></text>
</g><g xmlns="http://www.w3.org/2000/svg" p:type="Shape" xmlns:p="http://www.evolus.vn/Namespace/Pencil" p:def="Evolus.Common:arrow" id="df590cf53fa642b7bfb53276276c4ea7" transform="matrix(1,0,0,1,367,240)"><p:metadata><p:property name="startPin"><![CDATA[0,0]]></p:property><p:property name="endPin"><![CDATA[-1,302]]></p:property><p:property name="withStartArrow"><![CDATA[false]]></p:property><p:property name="withEndArrow"><![CDATA[true]]></p:property><p:property name="mode"><![CDATA[curvy]]></p:property><p:property name="detached"><![CDATA[false]]></p:property><p:property name="strokeColor"><![CDATA[#1B3280FF]]></p:property><p:property name="strokeStyle"><![CDATA[2|]]></p:property><p:property name="textContent"><![CDATA[]]></p:property><p:property name="textFont"><![CDATA["Liberation Sans",Arial,sans-serif|normal|normal|13px|none]]></p:property><p:property name="textColor"><![CDATA[#000000FF]]></p:property><p:property name="textAlign"><![CDATA[1,1]]></p:property></p:metadata>
<defs>
<path style="stroke-linejoin: round; fill: none;" p:name="path" id="dd9908adcc264215bea550e8b2329a8b" d="M 0 0 C 0 60 -1 242 -1 302 M 5 296 L -1 302 L -7 296"/>
</defs>
<use xlink:href="#dd9908adcc264215bea550e8b2329a8b" xmlns:xlink="http://www.w3.org/1999/xlink" stroke-width="10" stroke-opacity="0" stroke="#FF0000"/>
<use xlink:href="#dd9908adcc264215bea550e8b2329a8b" xmlns:xlink="http://www.w3.org/1999/xlink" p:name="outArrow1" id="c79f67bcb67849bdb89e33ae7379d2ad" style="stroke: rgb(27, 50, 128); stroke-opacity: 1; stroke-width: 2;"/>
<text p:name="text" id="9816e36044cb42f69d430ddfccb20b87" style="fill: rgb(0, 0, 0); fill-opacity: 1; font-family: &quot;Liberation Sans&quot;,Arial,sans-serif; font-size: 13px; font-weight: normal; font-style: normal; text-decoration: none;">
<textPath xlink:href="#dd9908adcc264215bea550e8b2329a8b" xmlns:xlink="http://www.w3.org/1999/xlink" startOffset="50%" text-anchor="middle" alignment-baseline="middle">
<tspan dy="-4.333333333333333" p:name="textSpan" id="49a46fea8fc74c66b115d7e279de7418" dx="-16"></tspan>
</textPath>
</text>
</g><g xmlns="http://www.w3.org/2000/svg" p:type="Shape" xmlns:p="http://www.evolus.vn/Namespace/Pencil" p:def="Evolus.Common:arrow" id="fe0cb604724644b49666f05dd4e16c40" transform="matrix(1,0,0,1,486,240)"><p:metadata><p:property name="startPin"><![CDATA[0,0]]></p:property><p:property name="endPin"><![CDATA[-1,302]]></p:property><p:property name="withStartArrow"><![CDATA[true]]></p:property><p:property name="withEndArrow"><![CDATA[false]]></p:property><p:property name="mode"><![CDATA[curvy]]></p:property><p:property name="detached"><![CDATA[false]]></p:property><p:property name="strokeColor"><![CDATA[#1B3280FF]]></p:property><p:property name="strokeStyle"><![CDATA[2|]]></p:property><p:property name="textContent"><![CDATA[]]></p:property><p:property name="textFont"><![CDATA["Liberation Sans",Arial,sans-serif|normal|normal|13px|none]]></p:property><p:property name="textColor"><![CDATA[#000000FF]]></p:property><p:property name="textAlign"><![CDATA[1,1]]></p:property></p:metadata>
<defs>
<path style="stroke-linejoin: round; fill: none;" p:name="path" id="07ac618b50ad42d284aac63f320b934c" d="M -6 6 L 0 0 L 6 6 M 0 0 C 0 60 -1 242 -1 302"/>
</defs>
<use xlink:href="#07ac618b50ad42d284aac63f320b934c" xmlns:xlink="http://www.w3.org/1999/xlink" stroke-width="10" stroke-opacity="0" stroke="#FF0000"/>
<use xlink:href="#07ac618b50ad42d284aac63f320b934c" xmlns:xlink="http://www.w3.org/1999/xlink" p:name="outArrow1" id="4519551605b04fddae6814d49ea51c37" style="stroke: rgb(27, 50, 128); stroke-opacity: 1; stroke-width: 2;"/>
<text p:name="text" id="bdb9a292d6bb42a9b67a2867c57db894" style="fill: rgb(0, 0, 0); fill-opacity: 1; font-family: &quot;Liberation Sans&quot;,Arial,sans-serif; font-size: 13px; font-weight: normal; font-style: normal; text-decoration: none;">
<textPath xlink:href="#07ac618b50ad42d284aac63f320b934c" xmlns:xlink="http://www.w3.org/1999/xlink" startOffset="50%" text-anchor="middle" alignment-baseline="middle">
<tspan dy="-4.333333333333333" p:name="textSpan" id="2a446da947734c7fa843a3a4b3f48628" dx="16"/>
</textPath>
</text>
</g><g xmlns="http://www.w3.org/2000/svg" p:type="Shape" xmlns:p="http://www.evolus.vn/Namespace/Pencil" p:def="Evolus.Common:PlainTextV2" id="72a667564fbc474ab6a63abbdabb4910" transform="matrix(1,0,0,1,420,476)"><p:metadata><p:property name="disabled"><![CDATA[false]]></p:property><p:property name="width"><![CDATA[100,0]]></p:property><p:property name="fixedWidth"><![CDATA[false]]></p:property><p:property name="label"><![CDATA[GET /url2]]></p:property><p:property name="textColor"><![CDATA[#000000FF]]></p:property><p:property name="textFont"><![CDATA["Liberation Sans",Arial,sans-serif|normal|normal|13px|none]]></p:property><p:property name="textAlign"><![CDATA[0,0]]></p:property></p:metadata>
<rect x="0" y="0" style="fill: none; stroke: none; visibility: hidden; display: none;" p:name="bgRect" id="2e9e9a810766411e9f31c4102a273b24" width="0" height="0"/>
<text xml:space="preserve" p:name="text" id="5faa1a761e6c43a6832ccbf76a3f5387" style="fill: rgb(0, 0, 0); fill-opacity: 1; font-family: &quot;Liberation Sans&quot;,Arial,sans-serif; font-size: 13px; font-weight: normal; font-style: normal; text-decoration: none;"><tspan x="0" y="0">GET /url2</tspan></text>
</g><g xmlns="http://www.w3.org/2000/svg" p:type="Shape" xmlns:p="http://www.evolus.vn/Namespace/Pencil" p:def="Evolus.Common:arrow" id="71a11249466548889294299717a00162" transform="matrix(1,0,0,1,599,240)"><p:metadata><p:property name="startPin"><![CDATA[0,0]]></p:property><p:property name="endPin"><![CDATA[-1,302]]></p:property><p:property name="withStartArrow"><![CDATA[false]]></p:property><p:property name="withEndArrow"><![CDATA[true]]></p:property><p:property name="mode"><![CDATA[curvy]]></p:property><p:property name="detached"><![CDATA[false]]></p:property><p:property name="strokeColor"><![CDATA[#1B3280FF]]></p:property><p:property name="strokeStyle"><![CDATA[2|]]></p:property><p:property name="textContent"><![CDATA[]]></p:property><p:property name="textFont"><![CDATA["Liberation Sans",Arial,sans-serif|normal|normal|13px|none]]></p:property><p:property name="textColor"><![CDATA[#000000FF]]></p:property><p:property name="textAlign"><![CDATA[1,1]]></p:property></p:metadata>
<defs>
<path style="stroke-linejoin: round; fill: none;" p:name="path" id="98e109a4a03a4a90a3c23a00c9feb0ba" d="M 0 0 C 0 60 -1 242 -1 302 M 5 296 L -1 302 L -7 296"/>
</defs>
<use xlink:href="#98e109a4a03a4a90a3c23a00c9feb0ba" xmlns:xlink="http://www.w3.org/1999/xlink" stroke-width="10" stroke-opacity="0" stroke="#FF0000"/>
<use xlink:href="#98e109a4a03a4a90a3c23a00c9feb0ba" xmlns:xlink="http://www.w3.org/1999/xlink" p:name="outArrow1" id="40c0cfe75b194e1abd8d93046ce45284" style="stroke: rgb(27, 50, 128); stroke-opacity: 1; stroke-width: 2;"/>
<text p:name="text" id="6f47d714a56f4620aba06a8db4823cab" style="fill: rgb(0, 0, 0); fill-opacity: 1; font-family: &quot;Liberation Sans&quot;,Arial,sans-serif; font-size: 13px; font-weight: normal; font-style: normal; text-decoration: none;">
<textPath xlink:href="#98e109a4a03a4a90a3c23a00c9feb0ba" xmlns:xlink="http://www.w3.org/1999/xlink" startOffset="50%" text-anchor="middle" alignment-baseline="middle">
<tspan dy="-4.333333333333333" p:name="textSpan" id="b78f029baa174146968440927ec57a61" dx="-16"/>
</textPath>
</text>
</g><g xmlns="http://www.w3.org/2000/svg" p:type="Shape" xmlns:p="http://www.evolus.vn/Namespace/Pencil" p:def="Evolus.Common:PlainTextV2" id="c7150c9a1bd744d2bc2295e75b01b3e9" transform="matrix(1,0,0,1,520,324)"><p:metadata><p:property name="disabled"><![CDATA[false]]></p:property><p:property name="width"><![CDATA[100,0]]></p:property><p:property name="fixedWidth"><![CDATA[false]]></p:property><p:property name="label"><![CDATA[Page HTML]]></p:property><p:property name="textColor"><![CDATA[#000000FF]]></p:property><p:property name="textFont"><![CDATA["Liberation Sans",Arial,sans-serif|normal|normal|13px|none]]></p:property><p:property name="textAlign"><![CDATA[0,0]]></p:property></p:metadata>
<rect x="0" y="0" style="fill: none; stroke: none; visibility: hidden; display: none;" p:name="bgRect" id="0003d984940b4f819e158427c245944b" width="0" height="0"/>
<text xml:space="preserve" p:name="text" id="a98655cf5515478baae9930336a959f7" style="fill: rgb(0, 0, 0); fill-opacity: 1; font-family: &quot;Liberation Sans&quot;,Arial,sans-serif; font-size: 13px; font-weight: normal; font-style: normal; text-decoration: none;"><tspan x="0" y="0">Page HTML</tspan></text>
</g><g xmlns="http://www.w3.org/2000/svg" p:type="Shape" xmlns:p="http://www.evolus.vn/Namespace/Pencil" p:def="Evolus.Common:RectWithGradient" id="a4b4d3e1653a4318a0b37831c6cf4c74" transform="matrix(1,0,0,1,664,155)"><p:metadata><p:property name="box"><![CDATA[432,80]]></p:property><p:property name="withBlur"><![CDATA[false]]></p:property><p:property name="radius"><![CDATA[0,0]]></p:property><p:property name="textPadding"><![CDATA[0,5]]></p:property><p:property name="startFillColor"><![CDATA[#2F5F8FFF]]></p:property><p:property name="endFillColor"><![CDATA[#54AAFFFF]]></p:property><p:property name="strokeColor"><![CDATA[#1B3280FF]]></p:property><p:property name="strokeStyle"><![CDATA[2|]]></p:property><p:property name="textContent"><![CDATA[<font size="5">Serveur
</font>]]></p:property><p:property name="textFont"><![CDATA["Liberation Sans",Arial,sans-serif|normal|normal|13px|none]]></p:property><p:property name="textColor"><![CDATA[#000000FF]]></p:property><p:property name="textAlign"><![CDATA[1,1]]></p:property></p:metadata>
<defs>
<linearGradient x1="0%" y1="0%" x2="0%" y2="100%" p:name="linearFill" id="4aafbd9c50a94f74a71d3dce5f2d7836">
<stop style="stop-color: rgb(47, 95, 143); stop-opacity: 1;" offset="0" p:name="stop1" id="2f9dbb68fe834ae090f352c818170216"/>
<stop style="stop-color: rgb(84, 170, 255); stop-opacity: 1;" offset="1" p:name="stop2" id="8645ceebd62844618b52ba6814e0554c"/>
</linearGradient>
<rect width="432" height="80" rx="0" ry="0" x="0" y="0" style="stroke-width: 2; fill: url(&quot;#4aafbd9c50a94f74a71d3dce5f2d7836&quot;) none; stroke: rgb(27, 50, 128); stroke-opacity: 1;" p:name="rrRect" id="4ec8286d3e334cd2b840aed1cec7bcdc" transform="translate(0,0)"/>
<filter height="1.2558399" y="-0.12792" width="1.06396" x="-0.03198" p:name="shadingFilter" id="af55f991719b4580adaa1cf66214a346">
<feGaussianBlur stdDeviation="1" in="SourceAlpha"/>
</filter>
</defs>
<use xlink:href="#4ec8286d3e334cd2b840aed1cec7bcdc" xmlns:xlink="http://www.w3.org/1999/xlink" transform="translate(2, 2)" p:filter="url(#af55f991719b4580adaa1cf66214a346)" style="opacity: 0.5; visibility: hidden; display: none;" p:heavy="true" p:name="bgCopy" id="fe49411e52d14e918b9270301b0f21f0"/>
<use xlink:href="#4ec8286d3e334cd2b840aed1cec7bcdc" xmlns:xlink="http://www.w3.org/1999/xlink"/>
<foreignObject x="5" y="26" width="422" height="28" p:name="text" id="84abe5c8beca4f1f82a8707c771d8738" style="font-family: &quot;Liberation Sans&quot;,Arial,sans-serif; font-size: 13px; font-weight: normal; font-style: normal; text-decoration: none; color: rgb(0, 0, 0); opacity: 1; text-align: center;"><div xmlns="http://www.w3.org/1999/xhtml"><font size="5">Serveur
</font></div></foreignObject>
</g><g xmlns="http://www.w3.org/2000/svg" p:type="Shape" xmlns:p="http://www.evolus.vn/Namespace/Pencil" p:def="Evolus.Common:RectWithGradient" id="62a6a4bfccec4ebe9a205972b4a635d3" transform="matrix(1,0,0,1,664,560)"><p:metadata><p:property name="box"><![CDATA[432,80]]></p:property><p:property name="withBlur"><![CDATA[false]]></p:property><p:property name="radius"><![CDATA[0,0]]></p:property><p:property name="textPadding"><![CDATA[0,5]]></p:property><p:property name="startFillColor"><![CDATA[#2F5F8FFF]]></p:property><p:property name="endFillColor"><![CDATA[#54AAFFFF]]></p:property><p:property name="strokeColor"><![CDATA[#1B3280FF]]></p:property><p:property name="strokeStyle"><![CDATA[2|]]></p:property><p:property name="textContent"><![CDATA[<div style="text-align: center;"><font size="5">Client</font></div>]]></p:property><p:property name="textFont"><![CDATA["Liberation Sans",Arial,sans-serif|normal|normal|13px|none]]></p:property><p:property name="textColor"><![CDATA[#000000FF]]></p:property><p:property name="textAlign"><![CDATA[1,1]]></p:property></p:metadata>
<defs>
<linearGradient x1="0%" y1="0%" x2="0%" y2="100%" p:name="linearFill" id="226cf86dfdcf4221ae3f8525627dcfef">
<stop style="stop-color: rgb(47, 95, 143); stop-opacity: 1;" offset="0" p:name="stop1" id="f42e401c2576459e9c9c359c9e931b00"/>
<stop style="stop-color: rgb(84, 170, 255); stop-opacity: 1;" offset="1" p:name="stop2" id="bc56fae364d44bfe927469624e459519"/>
</linearGradient>
<rect width="432" height="80" rx="0" ry="0" x="0" y="0" style="stroke-width: 2; fill: url(&quot;#226cf86dfdcf4221ae3f8525627dcfef&quot;) none; stroke: rgb(27, 50, 128); stroke-opacity: 1;" p:name="rrRect" id="16e60564412b459db2842468bf9bbd15" transform="translate(0,0)"/>
<filter height="1.2558399" y="-0.12792" width="1.06396" x="-0.03198" p:name="shadingFilter" id="7eec5abc64404f77867ab9469e99d62c">
<feGaussianBlur stdDeviation="1" in="SourceAlpha"/>
</filter>
</defs>
<use xlink:href="#16e60564412b459db2842468bf9bbd15" xmlns:xlink="http://www.w3.org/1999/xlink" transform="translate(2, 2)" p:filter="url(#7eec5abc64404f77867ab9469e99d62c)" style="opacity: 0.5; visibility: hidden; display: none;" p:heavy="true" p:name="bgCopy" id="0bf6f84d4392454eba6e6ae54b1769b0"/>
<use xlink:href="#16e60564412b459db2842468bf9bbd15" xmlns:xlink="http://www.w3.org/1999/xlink"/>
<foreignObject x="5" y="26" width="422" height="28" p:name="text" id="6790a45d975749a4affb79ad038d3342" style="font-family: &quot;Liberation Sans&quot;,Arial,sans-serif; font-size: 13px; font-weight: normal; font-style: normal; text-decoration: none; color: rgb(0, 0, 0); opacity: 1; text-align: center;"><div xmlns="http://www.w3.org/1999/xhtml"><div style="text-align: center;"><font size="5">Client</font></div></div></foreignObject>
</g><g xmlns="http://www.w3.org/2000/svg" p:type="Shape" xmlns:p="http://www.evolus.vn/Namespace/Pencil" p:def="Evolus.Common:arrow" id="e66d63fb8a8741feaff91f805af1ec4c" transform="matrix(1,0,0,1,712,242)"><p:metadata><p:property name="startPin"><![CDATA[0,0]]></p:property><p:property name="endPin"><![CDATA[-1,302]]></p:property><p:property name="withStartArrow"><![CDATA[true]]></p:property><p:property name="withEndArrow"><![CDATA[false]]></p:property><p:property name="mode"><![CDATA[curvy]]></p:property><p:property name="detached"><![CDATA[false]]></p:property><p:property name="strokeColor"><![CDATA[#1B3280FF]]></p:property><p:property name="strokeStyle"><![CDATA[2|]]></p:property><p:property name="textContent"><![CDATA[]]></p:property><p:property name="textFont"><![CDATA["Liberation Sans",Arial,sans-serif|normal|normal|13px|none]]></p:property><p:property name="textColor"><![CDATA[#000000FF]]></p:property><p:property name="textAlign"><![CDATA[1,1]]></p:property></p:metadata>
<defs>
<path style="stroke-linejoin: round; fill: none;" p:name="path" id="bfb3eb13d2f6426385b080a6431b3b22" d="M -6 6 L 0 0 L 6 6 M 0 0 C 0 60 -1 242 -1 302"/>
</defs>
<use xlink:href="#bfb3eb13d2f6426385b080a6431b3b22" xmlns:xlink="http://www.w3.org/1999/xlink" stroke-width="10" stroke-opacity="0" stroke="#FF0000"/>
<use xlink:href="#bfb3eb13d2f6426385b080a6431b3b22" xmlns:xlink="http://www.w3.org/1999/xlink" p:name="outArrow1" id="ff2033c527754ea0a73dd366792f6e3e" style="stroke: rgb(27, 50, 128); stroke-opacity: 1; stroke-width: 2;"/>
<text p:name="text" id="c7e3196965274a4a81b72e5d35924a95" style="fill: rgb(0, 0, 0); fill-opacity: 1; font-family: &quot;Liberation Sans&quot;,Arial,sans-serif; font-size: 13px; font-weight: normal; font-style: normal; text-decoration: none;">
<textPath xlink:href="#bfb3eb13d2f6426385b080a6431b3b22" xmlns:xlink="http://www.w3.org/1999/xlink" startOffset="50%" text-anchor="middle" alignment-baseline="middle">
<tspan dy="-4.333333333333333" p:name="textSpan" id="93a6c167db3648fc820ccb158eb088ff" dx="16"/>
</textPath>
</text>
</g><g xmlns="http://www.w3.org/2000/svg" p:type="Shape" xmlns:p="http://www.evolus.vn/Namespace/Pencil" p:def="Evolus.Common:PlainTextV2" id="8aa0684ef6144de6804dda8f83347640" transform="matrix(1,0,0,1,668,476)"><p:metadata><p:property name="disabled"><![CDATA[false]]></p:property><p:property name="width"><![CDATA[100,0]]></p:property><p:property name="fixedWidth"><![CDATA[false]]></p:property><p:property name="label"><![CDATA[GET /]]></p:property><p:property name="textColor"><![CDATA[#000000FF]]></p:property><p:property name="textFont"><![CDATA["Liberation Sans",Arial,sans-serif|normal|normal|13px|none]]></p:property><p:property name="textAlign"><![CDATA[0,0]]></p:property></p:metadata>
<rect x="0" y="0" style="fill: none; stroke: none; visibility: hidden; display: none;" p:name="bgRect" id="961491992a1f45ff80fc73da47a0d042" width="0" height="0"/>
<text xml:space="preserve" p:name="text" id="0c5df21ef0d44741a2beb04549a757bb" style="fill: rgb(0, 0, 0); fill-opacity: 1; font-family: &quot;Liberation Sans&quot;,Arial,sans-serif; font-size: 13px; font-weight: normal; font-style: normal; text-decoration: none;"><tspan x="0" y="0">GET /</tspan></text>
</g><g xmlns="http://www.w3.org/2000/svg" p:type="Shape" xmlns:p="http://www.evolus.vn/Namespace/Pencil" p:def="Evolus.Common:arrow" id="121700fe9950407dbbfd56970ec473c4" transform="matrix(1,0,0,1,847,240)"><p:metadata><p:property name="startPin"><![CDATA[0,0]]></p:property><p:property name="endPin"><![CDATA[-1,302]]></p:property><p:property name="withStartArrow"><![CDATA[false]]></p:property><p:property name="withEndArrow"><![CDATA[true]]></p:property><p:property name="mode"><![CDATA[curvy]]></p:property><p:property name="detached"><![CDATA[false]]></p:property><p:property name="strokeColor"><![CDATA[#1B3280FF]]></p:property><p:property name="strokeStyle"><![CDATA[2|]]></p:property><p:property name="textContent"><![CDATA[]]></p:property><p:property name="textFont"><![CDATA["Liberation Sans",Arial,sans-serif|normal|normal|13px|none]]></p:property><p:property name="textColor"><![CDATA[#000000FF]]></p:property><p:property name="textAlign"><![CDATA[1,1]]></p:property></p:metadata>
<defs>
<path style="stroke-linejoin: round; fill: none;" p:name="path" id="2d52c840d1b644d0bc81af35eb66171a" d="M 0 0 C 0 60 -1 242 -1 302 M 5 296 L -1 302 L -7 296"/>
</defs>
<use xlink:href="#2d52c840d1b644d0bc81af35eb66171a" xmlns:xlink="http://www.w3.org/1999/xlink" stroke-width="10" stroke-opacity="0" stroke="#FF0000"/>
<use xlink:href="#2d52c840d1b644d0bc81af35eb66171a" xmlns:xlink="http://www.w3.org/1999/xlink" p:name="outArrow1" id="e886c63c1b6f4ccc8ebe043d2f632136" style="stroke: rgb(27, 50, 128); stroke-opacity: 1; stroke-width: 2;"/>
<text p:name="text" id="0b3dd57692584d07a5c0dc19e3a505e4" style="fill: rgb(0, 0, 0); fill-opacity: 1; font-family: &quot;Liberation Sans&quot;,Arial,sans-serif; font-size: 13px; font-weight: normal; font-style: normal; text-decoration: none;">
<textPath xlink:href="#2d52c840d1b644d0bc81af35eb66171a" xmlns:xlink="http://www.w3.org/1999/xlink" startOffset="50%" text-anchor="middle" alignment-baseline="middle">
<tspan dy="-4.333333333333333" p:name="textSpan" id="bb7e9499aed94d0faefc60d9787b1888" dx="-16"/>
</textPath>
</text>
</g><g xmlns="http://www.w3.org/2000/svg" p:type="Shape" xmlns:p="http://www.evolus.vn/Namespace/Pencil" p:def="Evolus.Common:arrow" id="76aa61e32f7c4b9a8d6082a574d3c6a8" transform="matrix(1,0,0,1,982,240)"><p:metadata><p:property name="startPin"><![CDATA[0,0]]></p:property><p:property name="endPin"><![CDATA[-1,302]]></p:property><p:property name="withStartArrow"><![CDATA[true]]></p:property><p:property name="withEndArrow"><![CDATA[false]]></p:property><p:property name="mode"><![CDATA[curvy]]></p:property><p:property name="detached"><![CDATA[false]]></p:property><p:property name="strokeColor"><![CDATA[#1B3280FF]]></p:property><p:property name="strokeStyle"><![CDATA[2|]]></p:property><p:property name="textContent"><![CDATA[]]></p:property><p:property name="textFont"><![CDATA["Liberation Sans",Arial,sans-serif|normal|normal|13px|none]]></p:property><p:property name="textColor"><![CDATA[#000000FF]]></p:property><p:property name="textAlign"><![CDATA[1,1]]></p:property></p:metadata>
<defs>
<path style="stroke-linejoin: round; fill: none;" p:name="path" id="b4714324199b45d592f4d72d354b4fc1" d="M -6 6 L 0 0 L 6 6 M 0 0 C 0 60 -1 242 -1 302"/>
</defs>
<use xlink:href="#b4714324199b45d592f4d72d354b4fc1" xmlns:xlink="http://www.w3.org/1999/xlink" stroke-width="10" stroke-opacity="0" stroke="#FF0000"/>
<use xlink:href="#b4714324199b45d592f4d72d354b4fc1" xmlns:xlink="http://www.w3.org/1999/xlink" p:name="outArrow1" id="7242140ed6114ca985db1091301613d9" style="stroke: rgb(27, 50, 128); stroke-opacity: 1; stroke-width: 2;"/>
<text p:name="text" id="a677fd1150eb47e4b9189a9d67c86ac8" style="fill: rgb(0, 0, 0); fill-opacity: 1; font-family: &quot;Liberation Sans&quot;,Arial,sans-serif; font-size: 13px; font-weight: normal; font-style: normal; text-decoration: none;">
<textPath xlink:href="#b4714324199b45d592f4d72d354b4fc1" xmlns:xlink="http://www.w3.org/1999/xlink" startOffset="50%" text-anchor="middle" alignment-baseline="middle">
<tspan dy="-4.333333333333333" p:name="textSpan" id="0017b2fce95d4783ad0bb086fdbdc2fb" dx="16"/>
</textPath>
</text>
</g><g xmlns="http://www.w3.org/2000/svg" p:type="Shape" xmlns:p="http://www.evolus.vn/Namespace/Pencil" p:def="Evolus.Common:PlainTextV2" id="e07a6b936d1f4f72b52d770740a212e6" transform="matrix(1,0,0,1,776,479)"><p:metadata><p:property name="disabled"><![CDATA[false]]></p:property><p:property name="width"><![CDATA[100,0]]></p:property><p:property name="fixedWidth"><![CDATA[false]]></p:property><p:property name="label"><![CDATA[]]></p:property><p:property name="textColor"><![CDATA[#000000FF]]></p:property><p:property name="textFont"><![CDATA["Liberation Sans",Arial,sans-serif|normal|normal|13px|none]]></p:property><p:property name="textAlign"><![CDATA[0,0]]></p:property></p:metadata>
<rect x="0" y="0" style="fill: none; stroke: none; visibility: hidden; display: none;" p:name="bgRect" id="640846d683e54e9a95abccda58bdb1cf" width="0" height="0"/>
<text xml:space="preserve" p:name="text" id="67c4b96cf3d14b41bb1616ca42e28472" style="fill: rgb(0, 0, 0); fill-opacity: 1; font-family: &quot;Liberation Sans&quot;,Arial,sans-serif; font-size: 13px; font-weight: normal; font-style: normal; text-decoration: none;"/>
</g><g xmlns="http://www.w3.org/2000/svg" p:type="Shape" xmlns:p="http://www.evolus.vn/Namespace/Pencil" p:def="Evolus.Common:arrow" id="53f0d5effcdf4d189fd3eda96b799a7f" transform="matrix(1,0,0,1,1071,243)"><p:metadata><p:property name="startPin"><![CDATA[0,0]]></p:property><p:property name="endPin"><![CDATA[-1,302]]></p:property><p:property name="withStartArrow"><![CDATA[false]]></p:property><p:property name="withEndArrow"><![CDATA[true]]></p:property><p:property name="mode"><![CDATA[curvy]]></p:property><p:property name="detached"><![CDATA[false]]></p:property><p:property name="strokeColor"><![CDATA[#1B3280FF]]></p:property><p:property name="strokeStyle"><![CDATA[2|]]></p:property><p:property name="textContent"><![CDATA[]]></p:property><p:property name="textFont"><![CDATA["Liberation Sans",Arial,sans-serif|normal|normal|13px|none]]></p:property><p:property name="textColor"><![CDATA[#000000FF]]></p:property><p:property name="textAlign"><![CDATA[1,1]]></p:property></p:metadata>
<defs>
<path style="stroke-linejoin: round; fill: none;" p:name="path" id="6768ab9bb22c4280b31e43d672dc387d" d="M 0 0 C 0 60 -1 242 -1 302 M 5 296 L -1 302 L -7 296"/>
</defs>
<use xlink:href="#6768ab9bb22c4280b31e43d672dc387d" xmlns:xlink="http://www.w3.org/1999/xlink" stroke-width="10" stroke-opacity="0" stroke="#FF0000"/>
<use xlink:href="#6768ab9bb22c4280b31e43d672dc387d" xmlns:xlink="http://www.w3.org/1999/xlink" p:name="outArrow1" id="065c561ab348405da38ce51133bfba9d" style="stroke: rgb(27, 50, 128); stroke-opacity: 1; stroke-width: 2;"/>
<text p:name="text" id="098e4872c3064801b90c4724b5d29d59" style="fill: rgb(0, 0, 0); fill-opacity: 1; font-family: &quot;Liberation Sans&quot;,Arial,sans-serif; font-size: 13px; font-weight: normal; font-style: normal; text-decoration: none;">
<textPath xlink:href="#6768ab9bb22c4280b31e43d672dc387d" xmlns:xlink="http://www.w3.org/1999/xlink" startOffset="50%" text-anchor="middle" alignment-baseline="middle">
<tspan dy="-4.333333333333333" p:name="textSpan" id="210990db628c46c09f1decc437a22c02" dx="-16"/>
</textPath>
</text>
</g><g xmlns="http://www.w3.org/2000/svg" p:type="Shape" xmlns:p="http://www.evolus.vn/Namespace/Pencil" p:def="Evolus.Common:PlainTextV2" id="26935d8f1d784855a1a7bab2fa65c7c0" transform="matrix(1,0,0,1,1015,323)"><p:metadata><p:property name="disabled"><![CDATA[false]]></p:property><p:property name="width"><![CDATA[100,0]]></p:property><p:property name="fixedWidth"><![CDATA[false]]></p:property><p:property name="label"><![CDATA[Données]]></p:property><p:property name="textColor"><![CDATA[#000000FF]]></p:property><p:property name="textFont"><![CDATA["Liberation Sans",Arial,sans-serif|normal|normal|13px|none]]></p:property><p:property name="textAlign"><![CDATA[0,0]]></p:property></p:metadata>
<rect x="0" y="0" style="fill: none; stroke: none; visibility: hidden; display: none;" p:name="bgRect" id="953ce02730114e27ada762b0b454069a" width="0" height="0"/>
<text xml:space="preserve" p:name="text" id="cee6a32462aa42a09a81038a5a9074d3" style="fill: rgb(0, 0, 0); fill-opacity: 1; font-family: &quot;Liberation Sans&quot;,Arial,sans-serif; font-size: 13px; font-weight: normal; font-style: normal; text-decoration: none;"><tspan x="0" y="0">Données</tspan></text>
</g><g xmlns="http://www.w3.org/2000/svg" p:type="Shape" xmlns:p="http://www.evolus.vn/Namespace/Pencil" p:def="Evolus.Common:RichTextBoxV2" id="f99ae6130f9a482382b3e8347a9e997d" transform="matrix(1,0,0,1,320,72)"><p:metadata><p:property name="width"><![CDATA[200,0]]></p:property><p:property name="fixedWidth"><![CDATA[false]]></p:property><p:property name="textContent"><![CDATA[Modèle classique<br />]]></p:property><p:property name="textFont"><![CDATA["Liberation Sans",Arial,sans-serif|normal|normal|25px|none]]></p:property><p:property name="textColor"><![CDATA[#000000FF]]></p:property><p:property name="customStyle"><![CDATA[
]]></p:property></p:metadata>
<foreignObject x="0" y="0" width="197" height="29" p:name="htmlObject" id="5fa9633b88fa4111a2919b0a07b53b0b" style="color: rgb(0, 0, 0); opacity: 1; font-family: &quot;Liberation Sans&quot;,Arial,sans-serif; font-size: 25px; font-weight: normal; font-style: normal; text-decoration: none;">
<div xmlns="http://www.w3.org/1999/xhtml" p:name="textDiv" id="2e064d51789548a199792bb4d5f72855" style="display: inline-block; white-space: nowrap; text-decoration: none;"><div xmlns="http://www.w3.org/1999/xhtml">Modèle classique<br /></div></div>
</foreignObject>
</g><g xmlns="http://www.w3.org/2000/svg" p:type="Shape" xmlns:p="http://www.evolus.vn/Namespace/Pencil" p:def="Evolus.Common:RichTextBoxV2" id="6f1ab6c384874436be2358a8b72bcfa8" transform="matrix(1,0,0,1,760,304)"><p:metadata><p:property name="width"><![CDATA[200,0]]></p:property><p:property name="fixedWidth"><![CDATA[false]]></p:property><p:property name="textContent"><![CDATA[Layout HTML <br />+ Javascript <br />+ Assets]]></p:property><p:property name="textFont"><![CDATA["Liberation Sans",Arial,sans-serif|normal|normal|13px|none]]></p:property><p:property name="textColor"><![CDATA[#000000FF]]></p:property><p:property name="customStyle"><![CDATA[
]]></p:property></p:metadata>
<foreignObject x="0" y="0" width="78" height="45" p:name="htmlObject" id="88c6ed5e32b34108881b290d02029d0a" style="color: rgb(0, 0, 0); opacity: 1; font-family: &quot;Liberation Sans&quot;,Arial,sans-serif; font-size: 13px; font-weight: normal; font-style: normal; text-decoration: none;">
<div xmlns="http://www.w3.org/1999/xhtml" p:name="textDiv" id="730e2d3a39d84db7abf64ecf142a41d9" style="display: inline-block; white-space: nowrap; text-decoration: none;"><div xmlns="http://www.w3.org/1999/xhtml">Layout HTML <br />+ Javascript <br />+ Assets</div></div>
</foreignObject>
</g><g xmlns="http://www.w3.org/2000/svg" p:type="Shape" xmlns:p="http://www.evolus.vn/Namespace/Pencil" p:def="Evolus.Common:RichTextBoxV2" id="bf44f826da0b4d728f4fe2886d90efd8" transform="matrix(1,0,0,1,912,456)"><p:metadata><p:property name="width"><![CDATA[200,0]]></p:property><p:property name="fixedWidth"><![CDATA[false]]></p:property><p:property name="textContent"><![CDATA[GET <br />/data.json]]></p:property><p:property name="textFont"><![CDATA["Liberation Sans",Arial,sans-serif|normal|normal|13px|none]]></p:property><p:property name="textColor"><![CDATA[#000000FF]]></p:property><p:property name="customStyle"><![CDATA[
]]></p:property></p:metadata>
<foreignObject x="0" y="0" width="57" height="30" p:name="htmlObject" id="cc8db333dab940db98713d06f6b2404a" style="color: rgb(0, 0, 0); opacity: 1; font-family: &quot;Liberation Sans&quot;,Arial,sans-serif; font-size: 13px; font-weight: normal; font-style: normal; text-decoration: none;">
<div xmlns="http://www.w3.org/1999/xhtml" p:name="textDiv" id="c5f8a893e57541b3afd32173acda02cd" style="display: inline-block; white-space: nowrap; text-decoration: none;"><div xmlns="http://www.w3.org/1999/xhtml">GET <br />/data.json</div></div>
</foreignObject>
</g><g xmlns="http://www.w3.org/2000/svg" p:type="Shape" xmlns:p="http://www.evolus.vn/Namespace/Pencil" p:def="Evolus.Common:RichTextBoxV2" id="d8aed16287844606b49c9ee9fd992e46" transform="matrix(1,0,0,1,811,72)"><p:metadata><p:property name="width"><![CDATA[200,0]]></p:property><p:property name="fixedWidth"><![CDATA[false]]></p:property><p:property name="textContent"><![CDATA[Modèle SPA<br />]]></p:property><p:property name="textFont"><![CDATA["Liberation Sans",Arial,sans-serif|normal|normal|25px|none]]></p:property><p:property name="textColor"><![CDATA[#000000FF]]></p:property><p:property name="customStyle"><![CDATA[
]]></p:property></p:metadata>
<foreignObject x="0" y="0" width="139" height="29" p:name="htmlObject" id="0e5c8253bce246508a468fb06c365467" style="color: rgb(0, 0, 0); opacity: 1; font-family: &quot;Liberation Sans&quot;,Arial,sans-serif; font-size: 25px; font-weight: normal; font-style: normal; text-decoration: none;">
<div xmlns="http://www.w3.org/1999/xhtml" p:name="textDiv" id="8ff67c83c4494349b2e578ec2cee19ec" style="display: inline-block; white-space: nowrap; text-decoration: none;"><div xmlns="http://www.w3.org/1999/xhtml">Modèle SPA<br /></div></div>
</foreignObject>
</g></Content></Page></Pages></Document>

44
javascript/slideshow-bootstrap.js Normal file
View File

@ -0,0 +1,44 @@
(function(SLIDES) {
var remaining = SLIDES.length;
var slidesContent = [];
SLIDES.forEach(function(slideName, index) {
fetchSlide(slideName, slideLoadedHandler.bind(null, index));
});
function slideLoadedHandler(index, content) {
remaining--;
slidesContent[index] = content;
if(remaining === 0) {
createSlideShow();
}
}
function createSlideShow() {
remark.create({
source: slidesContent.join('\n---\n'),
highlightStyle: 'github',
highlightLanguage: 'javascript'
});
}
function fetchSlide(slideName, cb) {
var req = new XMLHttpRequest();
req.open('GET', slideName+'.md', true);
req.onload = function (e) {
req.onload = null;
if (req.readyState === 4) {
if (req.status === 200) {
var content = req.responseText.replace(/\r\n/g, '\n');
return cb(content);
} else {
console.error('Impossible de charger "'+slideName+'.md" !', req.statusText);
return cb(slideName+'.md');
}
}
};
req.send(null);
}
}(SLIDES = SLIDES || []));