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
parent e4811d8040
commit 4df20d8adf
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 || []));