public-courses / 2016-pwa-public

Download as
Browse Code »

Commit 3bb85e3c550d4650d9bc3a17a67399a0f0ee01e3

Authored by Rémi Emonet
1 parent 7c92f338b8
Exists in master

up

Showing 5 changed files with 3209 additions and 2 deletions

index.html View file @ 3bb85e3
... ... @@ -39,9 +39,11 @@
39 39 <a href="lesson-01.html">Slides 1 <br/> introduction</a>
40 40 <a href="lesson-02.html">Slides 2 <br/> HTML+CSS</a>
41 41 <a href="raw/cours-2.zip">Fichiers HTML et CSS du cours</a>
  42 + <a href="lesson-03.html">Slides 2 <br/> HTML+CSS</a>
42 43  
43 44 <a href="export-lesson-01.pdf">Slides 1, pdf <br/> (ne pas imprimer) </a>
44 45 <a href="export-lesson-02.pdf">Slides 2, pdf <br/> (ne pas imprimer) </a>
  46 + <a href="export-lesson-03.pdf">Slides 3, pdf <br/> (ne pas imprimer) </a>
45 47 <!--
46 48 <a href="lesson-3.html">Slides 3 <br/> HTTP+Servlets</a>
47 49 <a href="lesson-4.html">Slides 4 <br/> DI+MVC+Spring</a>
48 50  
49 51  
... ... @@ -58,12 +60,12 @@
58 60 <h2>Other Resources</h2>
59 61 <div>
60 62  
61   - <a href="tp1.pdf">TP 1 <br/>Subject</a>
  63 + <a href="tp1.pdf">TP 1 (HTML+CSS) <br/>Sujet</a>
62 64 <a href="raw/tp1-base.txt">Le fichier <br/>du TP1</a>
63 65 <a href="raw/test.mp4">A test video to download¹</a>
64 66 <a href="more-installation.html">Installation <br/>on your laptop</a>
  67 + <a href="tp2.pdf">TP 2 (SPRING) <br/>Sujet</a>
65 68 <!--
66   - <a href="tp2.pdf">TP 2 <br/>Subject</a>
67 69 <a href="tp3.pdf">TP 3 <br/>Subject</a>
68 70 <a href="more-projects.html">Project <br/>Instructions</a>
69 71 <a href="more-links.html">Helpful <br/>Links</a>
lesson-03.html View file @ 3bb85e3
  1 +<!DOCTYPE html>
  2 +<html>
  3 + <head>
  4 + <meta charset="utf-8">
  5 + <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  6 +
  7 + <title>Programmation Web Avancée   Architecture MVC</title>
  8 + <meta name="cours-n" content="3">
  9 +
  10 + <meta name="author" content="Rémi Emonet">
  11 + <meta name="venue" content="PWA M1 DSC">
  12 + <meta name="date" content="2016">
  13 + <meta name="affiliation" content="Université Jean Monnet − Laboratoire Hubert Curien">
  14 +
  15 + <style type="text/css">
  16 + li blockquote {
  17 + padding: 5px;
  18 + font-size: 20px;
  19 + }
  20 + blockquote {
  21 + border: 1px solid darkgrey;
  22 + border-radius: 5px;
  23 + padding: 0;
  24 + font-size: 30px;
  25 + font-style: italic;
  26 + }
  27 + blockquote p {
  28 + margin: 0;
  29 + padding: 30px;
  30 + }
  31 + blockquote p cite {
  32 + font-size: 20px;
  33 + }
  34 + </style>
  35 +
  36 + <!--
  37 + <script src="deck.js/extensions/includedeck/load.js"></script>
  38 + <script src="extensions/slides-dev.js"></script>
  39 + -->
  40 + <script src="extensions/deck-packed.js"></script>
  41 + <script src="extensions/slides.js"></script>
  42 + <script>go()</script>
  43 + </head>
  44 +
  45 +<body>
  46 +
  47 +<div class="deck-container">
  48 +
  49 + <div class="deck-loading-splash" style="background: black; color: chartreuse;"><span class="vcenter" style="font-size: 30px; font-family: Arial; ">Please wait, while our marmots are preparing the hot chocolate…</span></div>
  50 +
  51 +<section class="smart">
  52 +
  53 +# @chunk: chunks/title.md
  54 +
  55 +# Questions ? <br/> Commentaires ? {no-print}
  56 +
  57 +# @chunk: chunks/objectives.md
  58 +
  59 +## Programmation Impérative <span>{var-cours-n}</span> : Plan {#plan overview}
  60 +- Frameworks {framework}
  61 +- Modèle-Vue-Contrôleur {mvc}
  62 +- MVC Web et Spring MVC {mvcweb}
  63 +- MVC Web en Pratique {mvcdemo}
  64 +# @copy:#plan
  65 +
  66 +
  67 +<!-- ################################### -->
  68 +# @copy:#plan: %+class:inred: .framework
  69 +
  70 +## Qu'est-ce qu'un framework ? {libyli}
  71 +- Wikipedia // discutons de cette définition
  72 + - <blockquote>Un framework est un ensemble cohérent de composants logiciels structurels,
  73 + qui sert à créer les fondations ainsi que les grandes lignes de tout ou d’une partie d'un logiciel (architecture).</blockquote>
  74 + - <blockquote>Un framework se distingue d'une simple bibliothèque logicielle :</blockquote> // selon vous ? bien souvent :
  75 + - le framework est actif {slide}
  76 + - inversion de contrôle, « main » dans le framework, etc
  77 + - Hollywood Principle: "Don't call us, we'll call you."
  78 + - flux de contrôle géré par le framework
  79 + - le comportement par défaut est utile {slide} // seulement qq
  80 + - le framework est extensible {slide}
  81 + - fonctions de rappel (callbacks), sous-classes personnalisées, etc
  82 + - le framework est non-modifiable {slide}
  83 +- Traductions possibles :
  84 + - cadre d'applications, canevas, cadriciel, socle d'applications
  85 +- Utilité ? // coûts, fiabilité, évolutivité
  86 +
  87 +## Exemples de frameworks
  88 +- Frameworks Web (non exhaustif)
  89 + - Java : JavaEE, JSF, **Spring**, **JPA**, Hibernate, …
  90 + - HTML/CSS : Bootstrap, **picnic.css**, …
  91 + - Javascript : AngularJS, Ember.js, backbone.js, **React.js**, …
  92 + - Scala : play, …
  93 + - Python : django, …
  94 + - Ruby : rails, …
  95 + - Groovy : grails, …
  96 + - PHP : symfony, …
  97 +- Autres{slide}
  98 + - JavaSE, JavaME, langage de programmations
  99 + - Swing, Eclipse RCP, Cocoa
  100 + - Drupal, DjangoCMS, Joomla
  101 + - DirectShow, Gstreamer
  102 +
  103 +
  104 +
  105 +<!-- MVC de base -->
  106 +# @copy:#plan: %+class:inred: .mvc
  107 +
  108 +## Patron MVC Originel {libyli}
  109 +- Model-View-Controller (MVC) // aux pluriels dans le papier
  110 + - 1978 : Trygve Reenskaug // depuis, aussi DCI
  111 + - Contexte : applications graphiques classiques
  112 +- Model : données et logique métier
  113 + - correspond au modèle mental de l'utilisateur
  114 +- View : afficher/filtrer les informations du modèle
  115 + - connaît la structure du modèle
  116 + - peut aussi agir sur le modèle
  117 +- Controller : gérer les actions utilisateurs
  118 + - agit sur les vues et/ou modèle
  119 + - <blockquote>A controller is the link between a user and the system. …
  120 + The controller receives such user output, translates it into the appropriate
  121 + messages and pass these messages on to one or more of the views.</blockquote>
  122 +
  123 +## Patron MVC en Java Swing {libyli} // qui connaît swing ?
  124 +- Modèle
  125 + - objets (java beans) observables (patron observateur)
  126 + - ex : ButtonModel, BoundedRangeModel, ListModel, Document // du plus GUI au plus pure data
  127 +- Vue
  128 + - objets graphiques
  129 + - écoute le modèle (patron observateur) et se met à jour
  130 + - ex : JButton, JCheckBox, JSlider, JList, JTextField // plusieurs vues pour un type de modèle
  131 +- Contrôleur
  132 + - au niveau de la fenêtre // en gros
  133 + - routage des événements (aiguillage)
  134 + - événements clavier &rArr; composant qui a le focus
  135 + - événements souris &rArr; composant sous le curseur
  136 + - au niveau de chaque composant // fusionné avec la vue, choix des concepteurs, plus logique
  137 + - action sur le modèle du composant
  138 + - transmission à un « listener » défini par le programmeur
  139 +
  140 +## Objectifs du MVC
  141 +- MVC = Model-View-Controller
  142 +- Séparation du système en trois types d'éléments{slide}
  143 + - modèle : données et logique/règles métier
  144 + - vues : afficher et filtrer les données du modèle
  145 + - contrôleurs : gérer les actions utilisateurs
  146 +- Séparation de responsabilités{slide}
  147 + - le modèle gère les données métier, il ne connaît rien d'autre
  148 + - les vues connaissent la structure du modèle
  149 + - les vues ne contiennent pas de logique métier
  150 + - les contrôleurs interprètent des actions utilisateurs
  151 + - les contrôleurs agissent sur le modèles et/ou les vues
  152 +
  153 +
  154 +
  155 +
  156 +<!-- MVC Web Spring (et un peu Java EE) -->
  157 +# @copy:#plan: %+class:inred: .mvcweb
  158 +
  159 +## Interaction Client-Serveur
  160 +@svg: media/client-server-mvc/client-server.svg 700px 400px
  161 +- @anim: #user |#client |#server |#r1 |#r2 |#a2 |#a1 |#r3 |#r4 |#a4 |#a3
  162 +
  163 +## Qu'est ce qu'un serveur Web {libyli}
  164 +- Un programme
  165 +- Écoute sur un port réseau (80 par défaut)
  166 +- Reçoit des requêtes utilisant le protocole HTTP
  167 +- Répond avec une ressource en utilisant le protocole HTTP
  168 +- Différents type de ressources
  169 + - pages HTML
  170 + - CSS
  171 + - images
  172 + - JSON
  173 + - texte brute
  174 + - …
  175 +
  176 +## MVC avec Servlets et JSP {libyli}
  177 +- Modèle
  178 + - JavaBeans et objets
  179 + - persistance avec SQL (JDBC) // base de donnée
  180 +- Vues // la vue accède au modèle via les EL etc
  181 + - JSP (compilées en servlets)
  182 + - avec EL et tags JSTL
  183 +- Contrôleur
  184 + - descripteur de « routes » (dans `WEB-INF/web.xml`)
  185 + - servlet normale (`.java`)
  186 + - interprète la requête
  187 + - extrait une partie du modèle
  188 + - ViewModel : petit morceau de modèle passé à la vue par le contrôleur // c'est pas du full contrôleur en vrai mais plus un MVVM pragmatique
  189 + - aiguille vers les JSP
  190 +
  191 +
  192 +## MVC Web... {libyli} // aparté avant
  193 +
  194 +## Aparté : Annotations Java {libyli}
  195 +- Méta-data sur du code Java {libyli}
  196 + - utilisable par le compilateur
  197 + - potentiellement utilisable à l'exécution (introspection)
  198 + - une annotation a un type,
  199 + - ex : `@Override void superMethod(@NotNull String str) { ... }`
  200 + - et possiblement des paramètres,
  201 + - ex : `@SuppressWarnings(value = "unchecked")`
  202 +- Qu'est ce qui peut être annoté
  203 + - méthodes, classes, attributs
  204 + - paramètres, variables locales
  205 +- En Java 8, encore plus
  206 + - `new @... CustomObject()`
  207 + - `s = (@NotNull String) o`
  208 + - `class ... implements @... CustomObject`
  209 + - `... throws @... Exception`
  210 +
  211 +
  212 +## MVC avec Spring dans ce cours {libyli}
  213 +- Modèle
  214 + - JavaBeans (objets Java)
  215 + - persistance avec JPA et Repositories de Spring Data
  216 +- Contrôleur
  217 + - description de route : annotations Java
  218 + - méthodes Java, avec injection de paramètres
  219 + - classe `Model` pour le ViewModel
  220 +- Vue
  221 + - templates Thymeleaf
  222 + - accès automatique au ViewModel
  223 +
  224 +
  225 +## Interaction Client Serveur et MVC
  226 +<p> </p>
  227 +
  228 +@svg: media/client-server-mvc/server-mvc.svg 700px 400px
  229 +
  230 +- @anim: #user, #client |#server |#r0 |#a0 |#s0,#router |#s1,#controller |#s2,#service |#s3,#db |#s4 |#s5,#view |#s6 |#s7 |#legend
  231 +
  232 +
  233 +
  234 +<!-- ################################### -->
  235 +# @copy:#plan: %+class:inred: .mvcdemo
  236 +
  237 +
  238 +## Démo : que programmer ?
  239 +
  240 +## Démo : ce que nous ne ferons pas !
  241 +- {comment}
  242 + - comprendre le build et la création de projet
  243 + - les aspects base de donnée
  244 + - l'injection de dépendances
  245 +
  246 +## Démo : remettre les technologies à leur place
  247 +- Maven
  248 +- Spring
  249 +- Spring Boot
  250 +- Thymeleaf
  251 +- Spring Web MVC
  252 +- javax.inject (@Inject)
  253 +- (JPA)
  254 +- (H2)
  255 +
  256 +<!--
  257 +## what we prog
  258 +## what we keep under the carpet
  259 +## what file/techon will do what
  260 +## step by step
  261 +-->
  262 +
  263 +
  264 +<!-- key points -->
  265 +
  266 +## Points Clés {key deck-status-fake-end}
  267 +
  268 +</section>
  269 +
  270 + <!-- deck.status snippet -->
  271 + <p class="deck-status deck-progress-10"> <span class="deck-status-current"></span> / <span class="deck-status-total"></span> − <span class="var-author">will be replaced by the author</span> − <span class="var-title">will be replaced by the title</span></p>
  272 +
  273 + <a data-progress-size=": spe.top(15, 555); height: 45*designRatio; left: slide.right - 90*designRatio; width: 90*designRatio" class="ccby" href="http://en.wikipedia.org/wiki/Creative_Commons_license" title="This work is under CC-BY licence." target="_blank"></a>
  274 +
  275 + <a class="ujm" data-progress-size=": spe.top(15, 525); height: 65*designRatio; left: slide.left; width: 130*designRatio" target="_blank"></a>
  276 +
  277 +</div>
  278 +<!-- clicky Cla -->
  279 +<script type="text/javascript">
  280 +var clicky_site_ids = clicky_site_ids || [];
  281 +clicky_site_ids.push(100779706);
  282 +(function() {
  283 + var s = document.createElement('script');
  284 + s.type = 'text/javascript';
  285 + s.async = true;
  286 + s.src = '//static.getclicky.com/js';
  287 + ( document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0] ).appendChild( s );
  288 +})();
  289 +</script>
  290 +<noscript><p><img alt="Clicky" width="1" height="1" src="//in.getclicky.com/100779706ns.gif" /></p></noscript>
  291 +
  292 +
  293 +<!-- Histats.com START (aync)-->
  294 +<script type="text/javascript">var _Hasync= _Hasync|| [];
  295 +_Hasync.push(['Histats.start', '1,2767123,4,0,0,0,00010000']);
  296 +_Hasync.push(['Histats.fasi', '1']);
  297 +_Hasync.push(['Histats.track_hits', '']);
  298 +(function() {
  299 +var hs = document.createElement('script'); hs.type = 'text/javascript'; hs.async = true;
  300 +hs.src = ('http://s10.histats.com/js15_as.js');
  301 +(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(hs);
  302 +})();</script>
  303 +<noscript><a href="http://www.histats.com" target="_blank"><img src="http://sstatic1.histats.com/0.gif?2767123&101" alt="javascript hit counter" border="0"></a></noscript>
  304 +<!-- Histats.com END -->
  305 +</body>
  306 +</html>
media/client-server-mvc/client-server.svg View file @ 3bb85e3
Diff suppressed. Click to show
  1 +<?xml version="1.0" encoding="UTF-8" standalone="no"?>
  2 +<!-- Created with Inkscape (http://www.inkscape.org/) -->
  3 +
  4 +<svg
  5 + xmlns:dc="http://purl.org/dc/elements/1.1/"
  6 + xmlns:cc="http://creativecommons.org/ns#"
  7 + xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
  8 + xmlns:svg="http://www.w3.org/2000/svg"
  9 + xmlns="http://www.w3.org/2000/svg"
  10 + xmlns:xlink="http://www.w3.org/1999/xlink"
  11 + xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
  12 + xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
  13 + width="710.56226"
  14 + height="182.153"
  15 + id="svg2"
  16 + version="1.1"
  17 + inkscape:version="0.48.4 r9939"
  18 + sodipodi:docname="client-server.svg">
  19 + <defs
  20 + id="defs4">
  21 + <marker
  22 + inkscape:stockid="Arrow2Mend"
  23 + orient="auto"
  24 + refY="0"
  25 + refX="0"
  26 + id="Arrow2Mend"
  27 + style="overflow:visible">
  28 + <path
  29 + id="path8691"
  30 + style="fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round"
  31 + d="M 8.7185878,4.0337352 -2.2072895,0.01601326 8.7185884,-4.0017078 c -1.7454984,2.3720609 -1.7354408,5.6174519 -6e-7,8.035443 z"
  32 + transform="scale(-0.6,-0.6)"
  33 + inkscape:connector-curvature="0" />
  34 + </marker>
  35 + <radialGradient
  36 + inkscape:collect="always"
  37 + r="13.818"
  38 + gradientTransform="matrix(1.9147,0,0,0.35992,636.48,401.69)"
  39 + cx="26.434"
  40 + cy="46.138"
  41 + gradientUnits="userSpaceOnUse"
  42 + id="radialGradient7377-4-2">
  43 + <stop
  44 + offset="0"
  45 + stop-color="#2e3436"
  46 + id="stop3252-1-0" />
  47 + <stop
  48 + offset="1"
  49 + stop-opacity="0"
  50 + stop-color="#2e3436"
  51 + id="stop3254-9-7" />
  52 + </radialGradient>
  53 + <radialGradient
  54 + inkscape:collect="always"
  55 + r="22"
  56 + gradientTransform="matrix(0.95081,-2.7825,2.4664,0.84276,573.01,448.74)"
  57 + cx="25.247"
  58 + cy="41.181999"
  59 + gradientUnits="userSpaceOnUse"
  60 + id="radialGradient7379-3-0">
  61 + <stop
  62 + offset="0"
  63 + stop-color="#888a85"
  64 + id="stop3226-5-9" />
  65 + <stop
  66 + offset="1"
  67 + stop-color="#babdb6"
  68 + id="stop3228-0-9" />
  69 + </radialGradient>
  70 + <linearGradient
  71 + inkscape:collect="always"
  72 + x1="2.3497"
  73 + y1="1.3497"
  74 + gradientTransform="matrix(1.466,0,0,1.466,651.69,355.47)"
  75 + x2="45.650002"
  76 + gradientUnits="userSpaceOnUse"
  77 + y2="44.650002"
  78 + id="linearGradient7381-3-7">
  79 + <stop
  80 + offset="0"
  81 + stop-color="#888a85"
  82 + id="stop3392-2-9" />
  83 + <stop
  84 + offset=".77952"
  85 + stop-color="#555753"
  86 + id="stop3394-5-3" />
  87 + <stop
  88 + offset="1"
  89 + stop-color="#2e3436"
  90 + id="stop3396-3-4" />
  91 + </linearGradient>
  92 + <linearGradient
  93 + inkscape:collect="always"
  94 + y2="43.610001"
  95 + y1="2.3903999"
  96 + gradientTransform="matrix(1.466,0,0,1.466,651.69,355.47)"
  97 + x2="0"
  98 + gradientUnits="userSpaceOnUse"
  99 + id="linearGradient7383-7-8">
  100 + <stop
  101 + offset="0"
  102 + stop-opacity=".8"
  103 + stop-color="#ffffff"
  104 + id="stop3206-7-9" />
  105 + <stop
  106 + offset="1"
  107 + stop-opacity="0"
  108 + stop-color="#ffffff"
  109 + id="stop3208-0-6" />
  110 + </linearGradient>
  111 + <linearGradient
  112 + inkscape:collect="always"
  113 + x1="86.133003"
  114 + y1="105.1"
  115 + gradientTransform="matrix(0.44083,-0.17874,0.17874,0.44083,647.4,372.85)"
  116 + x2="84.639"
  117 + gradientUnits="userSpaceOnUse"
  118 + y2="20.895"
  119 + id="linearGradient7385-5-4">
  120 + <stop
  121 + offset="0"
  122 + stop-opacity=".67949"
  123 + stop-color="#ffffff"
  124 + id="stop3232-0-6" />
  125 + <stop
  126 + offset="1"
  127 + stop-opacity=".33333"
  128 + id="stop3234-1-1" />
  129 + </linearGradient>
  130 + <radialGradient
  131 + inkscape:collect="always"
  132 + r="20.676001"
  133 + gradientTransform="matrix(1.466,0,0,1.466,651.69,355.47)"
  134 + cx="16.791"
  135 + cy="8.8218002"
  136 + gradientUnits="userSpaceOnUse"
  137 + id="radialGradient7387-5-9">
  138 + <stop
  139 + offset="0"
  140 + stop-opacity=".45"
  141 + stop-color="#ffffff"
  142 + id="stop3242-6-5" />
  143 + <stop
  144 + offset="1"
  145 + stop-opacity="0"
  146 + stop-color="#ffffff"
  147 + id="stop3244-6-7" />
  148 + </radialGradient>
  149 + <radialGradient
  150 + r="8.7663002"
  151 + cy="67.501999"
  152 + cx="12.576"
  153 + gradientTransform="scale(1.9258,0.51926)"
  154 + gradientUnits="userSpaceOnUse"
  155 + id="radialGradient6695-0"
  156 + xlink:href="#radialGradient2460-6-7"
  157 + inkscape:collect="always" />
  158 + <radialGradient
  159 + r="8.7663002"
  160 + gradientTransform="scale(1.9258,0.51926)"
  161 + cx="12.576"
  162 + cy="67.501999"
  163 + gradientUnits="userSpaceOnUse"
  164 + id="radialGradient2460-6-7">
  165 + <stop
  166 + offset="0"
  167 + id="stop2456-8-8" />
  168 + <stop
  169 + offset="1"
  170 + stop-opacity="0"
  171 + id="stop2458-1-5" />
  172 + </radialGradient>
  173 + <linearGradient
  174 + inkscape:collect="always"
  175 + x1="-23.886"
  176 + y1="49.952999"
  177 + gradientTransform="scale(1.4929,0.66985)"
  178 + x2="-23.886"
  179 + gradientUnits="userSpaceOnUse"
  180 + xlink:href="#linearGradient2991-1-3"
  181 + y2="44.879002"
  182 + id="linearGradient6937-5-0" />
  183 + <linearGradient
  184 + x1="-23.886"
  185 + x2="-23.886"
  186 + gradientTransform="scale(1.4929,0.66985)"
  187 + y1="49.952999"
  188 + gradientUnits="userSpaceOnUse"
  189 + y2="44.879002"
  190 + id="linearGradient2991-1-3">
  191 + <stop
  192 + offset="0"
  193 + stop-color="#d8dfd6"
  194 + id="stop2987-0-0" />
  195 + <stop
  196 + offset="1"
  197 + stop-opacity="0"
  198 + stop-color="#d8dfd6"
  199 + id="stop2989-5-3" />
  200 + </linearGradient>
  201 + <radialGradient
  202 + r="8.7663002"
  203 + cy="67.501999"
  204 + cx="12.576"
  205 + gradientTransform="scale(1.9258,0.51926)"
  206 + gradientUnits="userSpaceOnUse"
  207 + id="radialGradient6697-2"
  208 + xlink:href="#radialGradient2460-6-7"
  209 + inkscape:collect="always" />
  210 + <linearGradient
  211 + inkscape:collect="always"
  212 + x1="12.207"
  213 + y1="53.535"
  214 + gradientTransform="scale(1.8163,0.55056)"
  215 + x2="12.128"
  216 + gradientUnits="userSpaceOnUse"
  217 + xlink:href="#linearGradient2707-5-8"
  218 + y2="64.892998"
  219 + id="linearGradient6941-9-3" />
  220 + <linearGradient
  221 + x1="12.207"
  222 + x2="12.128"
  223 + gradientTransform="scale(1.8163,0.55056)"
  224 + y1="53.535"
  225 + gradientUnits="userSpaceOnUse"
  226 + y2="64.892998"
  227 + id="linearGradient2707-5-8">
  228 + <stop
  229 + offset="0"
  230 + stop-color="#585956"
  231 + id="stop2703-7-6" />
  232 + <stop
  233 + offset="1"
  234 + stop-color="#bbbeb8"
  235 + id="stop2705-4-5" />
  236 + </linearGradient>
  237 + <linearGradient
  238 + inkscape:collect="always"
  239 + x1="8.6115999"
  240 + y1="7.2294002"
  241 + gradientTransform="matrix(1.1299,0,0,0.88506,-1.625,-1.3044)"
  242 + x2="34.784"
  243 + gradientUnits="userSpaceOnUse"
  244 + xlink:href="#linearGradient2245-0-5"
  245 + y2="33.34"
  246 + id="linearGradient6943-5-8" />
  247 + <linearGradient
  248 + id="linearGradient2245-0-5">
  249 + <stop
  250 + offset="0"
  251 + stop-color="#dde1d9"
  252 + id="stop2247-4-7" />
  253 + <stop
  254 + offset="1"
  255 + stop-color="#cacdc6"
  256 + id="stop2249-3-7" />
  257 + </linearGradient>
  258 + <linearGradient
  259 + y2="31.246"
  260 + x2="32.536999"
  261 + y1="5.3818002"
  262 + x1="10.391"
  263 + gradientTransform="scale(1.1044,0.90547)"
  264 + gradientUnits="userSpaceOnUse"
  265 + id="linearGradient6699-4"
  266 + xlink:href="#linearGradient2979-1-4"
  267 + inkscape:collect="always" />
  268 + <linearGradient
  269 + x1="10.391"
  270 + x2="32.536999"
  271 + gradientTransform="scale(1.1044,0.90547)"
  272 + y1="5.3818002"
  273 + gradientUnits="userSpaceOnUse"
  274 + y2="31.246"
  275 + id="linearGradient2979-1-4">
  276 + <stop
  277 + offset="0"
  278 + stop-color="#8f8f8f"
  279 + id="stop2255-6-9" />
  280 + <stop
  281 + offset="1"
  282 + stop-color="#494949"
  283 + id="stop2257-4-9" />
  284 + </linearGradient>
  285 + <linearGradient
  286 + inkscape:collect="always"
  287 + x1="19.15"
  288 + y1="32.622002"
  289 + gradientTransform="matrix(1.1741,0,0,0.94543,0.72182,-1.3315)"
  290 + x2="16.316"
  291 + gradientUnits="userSpaceOnUse"
  292 + xlink:href="#linearGradient2681-8-7"
  293 + y2="8.8666"
  294 + id="linearGradient6947-4-9" />
  295 + <linearGradient
  296 + x1="19.15"
  297 + x2="16.316"
  298 + gradientTransform="matrix(1.1741,0,0,0.94543,0.72182,-1.3315)"
  299 + y1="32.622002"
  300 + gradientUnits="userSpaceOnUse"
  301 + y2="8.8666"
  302 + id="linearGradient2681-8-7">
  303 + <stop
  304 + offset="0"
  305 + id="stop2677-3-9" />
  306 + <stop
  307 + offset="1"
  308 + id="stop2679-1-7" />
  309 + </linearGradient>
  310 + <linearGradient
  311 + inkscape:collect="always"
  312 + x1="3.707"
  313 + y1="171.28999"
  314 + gradientTransform="matrix(5.7052,0,0,0.17528,1,-0.67937)"
  315 + x2="3.707"
  316 + gradientUnits="userSpaceOnUse"
  317 + xlink:href="#linearGradient2689-6-5"
  318 + y2="162.45"
  319 + id="linearGradient6949-9-1" />
  320 + <linearGradient
  321 + x1="3.707"
  322 + x2="3.707"
  323 + gradientTransform="matrix(5.7052,0,0,0.17528,1,-0.67937)"
  324 + y1="171.28999"
  325 + gradientUnits="userSpaceOnUse"
  326 + y2="162.45"
  327 + id="linearGradient2689-6-5">
  328 + <stop
  329 + offset="0"
  330 + id="stop2685-8-0" />
  331 + <stop
  332 + offset="1"
  333 + stop-opacity="0"
  334 + id="stop2687-6-3" />
  335 + </linearGradient>
  336 + <linearGradient
  337 + inkscape:collect="always"
  338 + x1="17.698"
  339 + y1="13.005"
  340 + gradientTransform="matrix(1.1081,0,0,0.90247,1,1)"
  341 + x2="34.974998"
  342 + gradientUnits="userSpaceOnUse"
  343 + xlink:href="#linearGradient2421-8-8"
  344 + y2="55.201"
  345 + id="linearGradient6951-2-0" />
  346 + <linearGradient
  347 + x1="17.698"
  348 + y1="13.005"
  349 + gradientTransform="matrix(1.1081,0,0,0.90247,1,1)"
  350 + x2="34.974998"
  351 + gradientUnits="userSpaceOnUse"
  352 + y2="55.201"
  353 + id="linearGradient2421-8-8">
  354 + <stop
  355 + offset="0"
  356 + stop-color="#fff"
  357 + id="stop2417-3-3" />
  358 + <stop
  359 + offset="1"
  360 + stop-opacity="0"
  361 + stop-color="#fff"
  362 + id="stop2419-1-9" />
  363 + </linearGradient>
  364 + <linearGradient
  365 + inkscape:collect="always"
  366 + x1="11.492"
  367 + y1="1.6538"
  368 + gradientTransform="matrix(1.239,0,0,0.89596,0.59055,-1.3315)"
  369 + x2="17.198999"
  370 + gradientUnits="userSpaceOnUse"
  371 + xlink:href="#linearGradient2673-2-8"
  372 + y2="26.729"
  373 + id="linearGradient6953-4-8" />
  374 + <linearGradient
  375 + x1="11.492"
  376 + x2="17.198999"
  377 + gradientTransform="matrix(1.239,0,0,0.89596,0.59055,-1.3315)"
  378 + y1="1.6538"
  379 + gradientUnits="userSpaceOnUse"
  380 + y2="26.729"
  381 + id="linearGradient2673-2-8">
  382 + <stop
  383 + offset="0"
  384 + stop-color="#fff"
  385 + id="stop2669-4-9" />
  386 + <stop
  387 + offset="1"
  388 + stop-opacity="0"
  389 + stop-color="#fcfcff"
  390 + id="stop2671-1-2" />
  391 + </linearGradient>
  392 + <radialGradient
  393 + inkscape:collect="always"
  394 + r="8.7663002"
  395 + gradientTransform="scale(1.9258,0.51926)"
  396 + cx="12.576"
  397 + cy="67.501999"
  398 + gradientUnits="userSpaceOnUse"
  399 + xlink:href="#radialGradient2460-6-7"
  400 + id="radialGradient6935-9-1" />
  401 + <linearGradient
  402 + inkscape:collect="always"
  403 + x1="18.316999"
  404 + y1="48.643002"
  405 + gradientTransform="scale(1.1299,0.88506)"
  406 + x2="18.177"
  407 + gradientUnits="userSpaceOnUse"
  408 + xlink:href="#linearGradient2245-0-5"
  409 + y2="52.535999"
  410 + id="linearGradient6957-3-4" />
  411 + <linearGradient
  412 + inkscape:collect="always"
  413 + x1="10.391"
  414 + y1="5.3818002"
  415 + gradientTransform="scale(1.1044,0.90547)"
  416 + x2="32.536999"
  417 + gradientUnits="userSpaceOnUse"
  418 + xlink:href="#linearGradient2979-1-4"
  419 + y2="31.246"
  420 + id="linearGradient6945-0-6" />
  421 + <linearGradient
  422 + y2="100.2"
  423 + x2="8.1134005"
  424 + y1="88.509003"
  425 + x1="8.1134005"
  426 + gradientTransform="scale(2.3099,0.43293)"
  427 + gradientUnits="userSpaceOnUse"
  428 + id="linearGradient6701-4"
  429 + xlink:href="#linearGradient2758-8-2"
  430 + inkscape:collect="always" />
  431 + <linearGradient
  432 + x1="8.1134005"
  433 + x2="8.1134005"
  434 + gradientTransform="scale(2.3099,0.43293)"
  435 + y1="88.509003"
  436 + gradientUnits="userSpaceOnUse"
  437 + y2="100.2"
  438 + id="linearGradient2758-8-2">
  439 + <stop
  440 + offset="0"
  441 + stop-color="#9d9d9d"
  442 + id="stop2754-4-4" />
  443 + <stop
  444 + offset="1"
  445 + stop-color="#b9b9b9"
  446 + id="stop2756-1-1" />
  447 + </linearGradient>
  448 + <linearGradient
  449 + y2="100.2"
  450 + x2="8.1134005"
  451 + y1="88.509003"
  452 + x1="8.1134005"
  453 + gradientTransform="scale(2.3099,0.43293)"
  454 + gradientUnits="userSpaceOnUse"
  455 + id="linearGradient6703-2"
  456 + xlink:href="#linearGradient2758-8-2"
  457 + inkscape:collect="always" />
  458 + <linearGradient
  459 + inkscape:collect="always"
  460 + x1="8.1134005"
  461 + y1="88.509003"
  462 + gradientTransform="scale(2.3099,0.43293)"
  463 + x2="8.1134005"
  464 + gradientUnits="userSpaceOnUse"
  465 + xlink:href="#linearGradient2758-8-2"
  466 + y2="100.2"
  467 + id="linearGradient6961-4-9" />
  468 + <linearGradient
  469 + inkscape:collect="always"
  470 + x1="13.629"
  471 + y1="101.28"
  472 + gradientTransform="matrix(2.1436,0,0,0.4665,1,-0.50883)"
  473 + x2="8.6485004"
  474 + gradientUnits="userSpaceOnUse"
  475 + xlink:href="#linearGradient2741-0-0"
  476 + y2="74.098"
  477 + id="linearGradient6967-7-1" />
  478 + <linearGradient
  479 + x1="13.629"
  480 + x2="8.6485004"
  481 + gradientTransform="matrix(2.1436,0,0,0.4665,1,-0.50883)"
  482 + y1="101.28"
  483 + gradientUnits="userSpaceOnUse"
  484 + y2="74.098"
  485 + id="linearGradient2741-0-0">
  486 + <stop
  487 + offset="0"
  488 + stop-color="#f9fff5"
  489 + id="stop2637-8-5" />
  490 + <stop
  491 + offset="1"
  492 + stop-opacity="0"
  493 + stop-color="#f9fff5"
  494 + id="stop2639-7-7" />
  495 + </linearGradient>
  496 + <linearGradient
  497 + y2="3.8450999"
  498 + x2="35.521"
  499 + y1="3.9384"
  500 + x1="34.300999"
  501 + gradientUnits="userSpaceOnUse"
  502 + id="linearGradient6705-9"
  503 + xlink:href="#linearGradient2717-1-5"
  504 + inkscape:collect="always" />
  505 + <linearGradient
  506 + x1="34.300999"
  507 + x2="35.521"
  508 + y1="3.9384"
  509 + gradientUnits="userSpaceOnUse"
  510 + y2="3.8450999"
  511 + id="linearGradient2717-1-5">
  512 + <stop
  513 + offset="0"
  514 + stop-color="#909090"
  515 + id="stop2713-7-8" />
  516 + <stop
  517 + offset="1"
  518 + stop-opacity="0"
  519 + stop-color="#bebebe"
  520 + id="stop2715-7-8" />
  521 + </linearGradient>
  522 + <linearGradient
  523 + y2="3.8450999"
  524 + x2="35.521"
  525 + y1="3.9384"
  526 + x1="34.300999"
  527 + gradientUnits="userSpaceOnUse"
  528 + id="linearGradient6707-6"
  529 + xlink:href="#linearGradient2717-1-5"
  530 + inkscape:collect="always" />
  531 + <linearGradient
  532 + y2="3.8450999"
  533 + x2="35.521"
  534 + y1="3.9384"
  535 + x1="34.300999"
  536 + gradientUnits="userSpaceOnUse"
  537 + id="linearGradient6709-6"
  538 + xlink:href="#linearGradient2717-1-5"
  539 + inkscape:collect="always" />
  540 + <linearGradient
  541 + y2="3.8450999"
  542 + x2="35.521"
  543 + y1="3.9384"
  544 + x1="34.300999"
  545 + gradientUnits="userSpaceOnUse"
  546 + id="linearGradient6711-9"
  547 + xlink:href="#linearGradient2717-1-5"
  548 + inkscape:collect="always" />
  549 + <linearGradient
  550 + inkscape:collect="always"
  551 + x1="34.300999"
  552 + y1="3.9384"
  553 + x2="35.521"
  554 + gradientUnits="userSpaceOnUse"
  555 + xlink:href="#linearGradient2717-1-5"
  556 + y2="3.8450999"
  557 + id="linearGradient6969-6-3" />
  558 + <linearGradient
  559 + inkscape:collect="always"
  560 + x1="200.38"
  561 + y1="498.13"
  562 + gradientTransform="translate(-173.39,-319.09)"
  563 + x2="247.31"
  564 + gradientUnits="userSpaceOnUse"
  565 + y2="539.27002"
  566 + id="linearGradient2927">
  567 + <stop
  568 + offset="0"
  569 + style="stop-color:rgb(0, 0, 0)"
  570 + id="stop6741" />
  571 + <stop
  572 + offset="1"
  573 + style="stop-color:rgb(0, 0, 0);stop-opacity:0"
  574 + id="stop6743" />
  575 + </linearGradient>
  576 + </defs>
  577 + <sodipodi:namedview
  578 + id="base"
  579 + pagecolor="#ffffff"
  580 + bordercolor="#666666"
  581 + borderopacity="1.0"
  582 + inkscape:pageopacity="0.0"
  583 + inkscape:pageshadow="2"
  584 + inkscape:zoom="1.28"
  585 + inkscape:cx="295.49348"
  586 + inkscape:cy="-148.64164"
  587 + inkscape:document-units="px"
  588 + inkscape:current-layer="layer1"
  589 + showgrid="false"
  590 + inkscape:window-width="1920"
  591 + inkscape:window-height="1175"
  592 + inkscape:window-x="0"
  593 + inkscape:window-y="0"
  594 + inkscape:window-maximized="1"
  595 + fit-margin-top="0"
  596 + fit-margin-left="0"
  597 + fit-margin-right="0"
  598 + fit-margin-bottom="0" />
  599 + <metadata
  600 + id="metadata7">
  601 + <rdf:RDF>
  602 + <cc:Work
  603 + rdf:about="">
  604 + <dc:format>image/svg+xml</dc:format>
  605 + <dc:type
  606 + rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
  607 + <dc:title />
  608 + </cc:Work>
  609 + </rdf:RDF>
  610 + </metadata>
  611 + <g
  612 + inkscape:label="Layer 1"
  613 + inkscape:groupmode="layer"
  614 + id="layer1"
  615 + transform="translate(-11.177561,-584.26674)">
  616 + <g
  617 + transform="translate(781.54843,595.87478)"
  618 + inkscape:label="Camada 1"
  619 + id="layer1-5">
  620 + <g
  621 + id="g9642" />
  622 + </g>
  623 + <g
  624 + transform="matrix(1.8906,0,0,1.8906,270.60927,619.15442)"
  625 + id="client"
  626 + inkscape:label="#g6647-9">
  627 + <path
  628 + d="m 41.101,35.051 a 16.8825,4.5522348 0 1 1 -33.765,0 16.8825,4.5522348 0 1 1 33.765,0 z"
  629 + transform="matrix(1,0,0,1.3689,-1.9786,-13.617)"
  630 + inkscape:connector-curvature="0"
  631 + style="color:#000000;fill:url(#radialGradient6695-0);fill-rule:evenodd"
  632 + id="path6649-2" />
  633 + <path
  634 + d="m -26.264,29.716 a 9.3945,3.9396 0 1 1 -18.789,0 9.3945,3.9396 0 1 1 18.789,0 z"
  635 + transform="translate(57.533,3.2034)"
  636 + inkscape:connector-curvature="0"
  637 + style="color:#000000;fill:#adb0aa;fill-rule:evenodd;stroke:#4b4d4a"
  638 + id="path6651-1" />
  639 + <path
  640 + d="m -26.264,29.716 a 9.3945,3.9396 0 1 1 -18.789,0 9.3945,3.9396 0 1 1 18.789,0 z"
  641 + transform="matrix(0.94027,0,0,0.94027,55.404,4.2712)"
  642 + inkscape:connector-curvature="0"
  643 + style="color:#000000;fill:none;stroke:#7b7f7a"
  644 + id="path6653-8" />
  645 + <path
  646 + d="m -26.264,29.716 a 9.3945,3.9396 0 1 1 -18.789,0 9.3945,3.9396 0 1 1 18.789,0 z"
  647 + transform="matrix(0.94027,0,0,0.94027,55.404,3.5212)"
  648 + inkscape:connector-curvature="0"
  649 + style="color:#000000;fill:none;stroke:url(#linearGradient6937-5-0);stroke-width:0.68065"
  650 + id="path6655-7" />
  651 + <path
  652 + d="m 25.688,28.766 -0.063,1 c 0,0 4.324,3.599 9,4.203 2.338,0.301 4.754,0.702 6.75,1.187 1.996,0.485 3.588,1.12 4.125,1.656 0.31,0.311 0.451,0.574 0.5,0.782 0.049,0.207 0.038,0.355 -0.094,0.562 -0.264,0.416 -1.08,0.968 -2.468,1.406 C 40.66,40.44 35.717,41 28.875,41 v 1 c 6.896,0 11.864,-0.528 14.844,-1.469 1.49,-0.47 2.525,-1.015 3.031,-1.812 C 47.003,38.32 47.107,37.83 47,37.375 46.893,36.92 46.615,36.49 46.219,36.094 45.341,35.216 43.682,34.687 41.625,34.188 39.568,33.688 37.109,33.273 34.75,32.969 30.031,32.36 25.688,28.766 25.688,28.766 z"
  653 + inkscape:connector-curvature="0"
  654 + style="fill:#d0d0d0;fill-rule:evenodd;stroke:#979797;stroke-width:0.40000001;stroke-linejoin:round"
  655 + id="path6657-2" />
  656 + <path
  657 + d="m 41.101,35.051 a 16.8825,4.5522348 0 1 1 -33.765,0 16.8825,4.5522348 0 1 1 33.765,0 z"
  658 + transform="matrix(1,0,0,1.3689,-1.9786,-19.021)"
  659 + inkscape:connector-curvature="0"
  660 + style="color:#000000;fill:url(#radialGradient6697-2);fill-rule:evenodd"
  661 + id="path6659-9" />
  662 + <rect
  663 + x="17.472"
  664 + y="30.704"
  665 + width="9.0396996"
  666 + height="2.74"
  667 + style="color:#000000;fill:url(#linearGradient6941-9-3);fill-rule:evenodd"
  668 + id="rect6661-3" />
  669 + <path
  670 + d="m 7.0809,1.6956 h 29.588 c 0.911,0 1.624,0.5835 1.667,1.4016 l 1.332,25.578 c 0.058,1.118 -0.901,2.021 -2.02,2.021 H 6.1019 c -1.1188,0 -2.0781,-0.903 -2.0199,-2.021 L 5.414,3.0972 C 5.4542,2.3241 5.9615,1.696 7.0807,1.696 z"
  671 + inkscape:connector-curvature="0"
  672 + style="color:#000000;fill:url(#linearGradient6943-5-8);fill-rule:evenodd;stroke:url(#linearGradient6699-4)"
  673 + id="path6663-2" />
  674 + <path
  675 + d="m 8.4105,4.3058 -1.2422,22.045 h 27.651 L 33.4843,4.3988 8.4103,4.3054 z"
  676 + inkscape:connector-curvature="0"
  677 + style="fill:url(#linearGradient6947-4-9);fill-rule:evenodd;stroke:#000000;stroke-width:0.5;stroke-linejoin:round"
  678 + id="path6665-7" />
  679 + <path
  680 + d="m 6.1774,28.736 h 31.429"
  681 + inkscape:connector-curvature="0"
  682 + style="fill:none;stroke:url(#linearGradient6949-9-1);stroke-width:0.99618;stroke-linecap:round;stroke-opacity:0.24841003"
  683 + id="path6667-7" />
  684 + <path
  685 + d="m 6.9146,2.7063 29.845,-0.0378 c 0.284,-3e-4 0.559,0.2373 0.582,0.6526 l 1.362,24.803 c 0.058,1.057 -0.54,1.786 -1.598,1.786 H 6.5816 c -1.0589,0 -1.5933,-0.729 -1.5361,-1.786 L 6.3692,3.6301 C 6.4079,2.9145 6.5356,2.707 6.9138,2.7065 z"
  686 + inkscape:connector-curvature="0"
  687 + style="color:#000000;fill:none;stroke:url(#linearGradient6951-2-0);stroke-opacity:0.70064003"
  688 + id="path6669-0" />
  689 + <path
  690 + d="M 8.7115,4.7464 7.909,22.6174 C 18.954,20.2164 19.33,12.1244 33.063,9.4704 L 32.902,4.8132 8.712,4.7472 z"
  691 + inkscape:connector-curvature="0"
  692 + style="opacity:0.53142999;fill:url(#linearGradient6953-4-8);fill-rule:evenodd"
  693 + id="path6671-1" />
  694 + <path
  695 + d="m 41.101,35.051 a 16.8825,4.5522348 0 1 1 -33.765,0 16.8825,4.5522348 0 1 1 33.765,0 z"
  696 + transform="matrix(1.2644,0,0,1.2913,-6.2163,-4.0004)"
  697 + inkscape:connector-curvature="0"
  698 + style="color:#000000;fill:url(#radialGradient6935-9-1);fill-rule:evenodd"
  699 + id="path6673-0" />
  700 + <path
  701 + d="m 6.4622,36.817 h 31.003 c 1.119,0 0.977,0.272 1.092,0.613 l 2.834,8.425 c 0.115,0.342 0.027,0.613 -1.092,0.613 H 3.6272 c -1.1187,0 -1.2066,-0.271 -1.0917,-0.613 L 5.3704,37.43 C 5.4852,37.089 5.3433,36.817 6.4626,36.817 z"
  702 + inkscape:connector-curvature="0"
  703 + style="color:#000000;fill:url(#linearGradient6957-3-4);fill-rule:evenodd;stroke:url(#linearGradient6945-0-6)"
  704 + id="path6675-6" />
  705 + <path
  706 + d="m 6.3917,38.829 -1.7678,5.127 h 5.4801 l 0.53,-2.033 h 14.85 l 0.549,2.075 h 6.168 L 30.522,38.829 H 6.392 z"
  707 + inkscape:connector-curvature="0"
  708 + style="fill:#7a7d77;fill-rule:evenodd"
  709 + id="path6677-3" />
  710 + <path
  711 + d="m 11.076,42.276 -0.442,1.68 h 14.761 l -0.442,-1.768 -13.877,0.088 z"
  712 + inkscape:connector-curvature="0"
  713 + style="fill:#777874;fill-rule:evenodd"
  714 + id="path6679-4" />
  715 + <path
  716 + d="m 37.593,38.829 1.679,5.038 -5.48,-0.088 -1.503,-4.861 5.304,-0.089 z"
  717 + inkscape:connector-curvature="0"
  718 + style="color:#000000;fill:#777a75;fill-rule:evenodd"
  719 + id="path6681-8" />
  720 + <path
  721 + d="m 37.593,38.299 1.679,5.038 -5.48,-0.088 -1.503,-4.862 5.304,-0.088 z"
  722 + inkscape:connector-curvature="0"
  723 + style="color:#000000;fill:url(#linearGradient6701-4);fill-rule:evenodd"
  724 + id="path6683-8" />