Récupération du cours SVG

exercices/plan/index.md

@@ -0,0 +1,79 @@
+---
+layout: layouts/page.njk
+title: Plan avec Inkscape
+---
+
+> **Inkscape** est un logiciel de dessin vectoriel libre multiplateforme. Il gère des fichiers conformes aux standards XML, SVG et CSS du W3C.
+
+Il offre des fonctionnalités similaires aux logiciels propriétaires comme CorelDRAW et Adobe Illustrator. Un peu plus austère, il demande un peu plus de maîtrise. 
+
+A savoir : Le logiciel est intégré à la liste des logiciels libres préconisés par l’État français dans le cadre de la modernisation globale de ses systèmes d’informations.
+
+
+Copier L'archive `inkscape-1.1-x64.7z` depuis le disque pédagogique `\info\amio\intégration et documents web`\
+Décompresser le dans `c:\temp`
+
+Ajouter l'image le <a href="plan.png" download>plan</a> de l'IUT au format png\
+File - Import
+
+Les touches + et - du pavé numérique permettent de zoomer.\
+Cliquer sur la molette de la souris pour vous déplacez dans l'illustration
+
+Ajouter un nouveau calque.
+Menu Layer - Layers ...
+
+Vérrouiller le layer 1 pour ne pas dessiner dessus par inadvertance.\
+Régler l'opacité du layer 1 à 60% (Opacity en dessous de la liste)
+
+Retourner sur le layer 2
+
+Prendre l'outil courbe de Bézier (touche B) et dessiner le contour du bâtiment.\
+Fermer bien la forme en sélectionnant le premier point lorsque vous avez fini.
+
+Régler l'épaisser du trait sur 3px\
+Menu Objet - Fill and Stroke - Stroke Style
+
+Dessiner les salles intérieures avec une épaisseur de trait de 1.5px\
+Utiliser le clic sur la molette et les touches + et - du pavé numérique pour vous déplacer dans l'illustration.
+
+Pour modifier la position d'un point particulier d'un chemin il faut utiliser l'outil de sélection des nodes. ![](nodes.png)
+
+![](inkscape.png)
+
+Renseigner les identifiants sur les salles.\
+Menu Object - Object Properties
+
+### Dimensions de la zone de travail
+
+Pour terminer modifier la zone de travail pour englober parfaitement le plan.
+Menu File - Document Properties
+Déployer le menu Resize page to content et cliquer sur le bouton Resize page to drawing or selection
+
+Pour optimiser le code source : sortir les chemins du layer 2
+
+Enregistrer le fichier au format SVG
+
+## Intégration html / css
+
+Copier/coller le code source du fichier SVG dans une page html.
+Supprimer les éléments d'en-tête Inkscape inutiles.\
+Supprimer le prologue xml
+Supprimer le code relatif au layer 1 avec l'image.
+
+Ajouter une feuille de style à la page html
+
+Ajouter des classes css sur les salles
+info pour les salles du département info\
+geii pour les salle du département génié électrique\
+mmi pour les salle du département mmi
+
+Retirer le style en ligne `fill:none` des chemins sinon celui-ci prendra le dessus.
+
+Définir la couleur de remplissage dans les classes CSS
+#ff6e2c pour info\
+#9d2038 pour geii\
+#936bb6 pour mmi\
+#add24a pour les salles des 3 départements
+#42c7c1 pour la lp tourisme
+
+![](reponse.png)

exercices/plan/plan.svg

@@ -0,0 +1,155 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="2026.6666"
+   height="1904.7618"
+   viewBox="0 0 536.2222 503.96825"
+   version="1.1"
+   id="svg61919"
+   inkscape:version="1.1 (c68e22c387, 2021-05-23)"
+   sodipodi:docname="plan.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview61921"
+     pagecolor="#ffffff"
+     bordercolor="#999999"
+     borderopacity="1"
+     inkscape:pageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="0"
+     inkscape:document-units="px"
+     showgrid="false"
+     inkscape:zoom="0.23716796"
+     inkscape:cx="1235.4114"
+     inkscape:cy="1157.4076"
+     inkscape:window-width="1680"
+     inkscape:window-height="997"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1"
+     units="px"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0" />
+  <defs
+     id="defs61916" />
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     sodipodi:insensitive="true"
+     style="display:inline;opacity:0.433962"
+     transform="translate(163.19478,103.48412)">
+    <image
+       width="536.22223"
+       height="503.96823"
+       preserveAspectRatio="none"
+       xlink:href="plan.png"
+       id="image61995"
+       x="-163.19478"
+       y="-103.48412" />
+  </g>
+  <path
+     style="fill:none;stroke:#000000;stroke-width:1.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     d="m 157.67287,104.27297 -31.55379,-0.78885 -15.77689,-93.083662 -98.605582,1.57769 77.306776,483.561742 90.717136,-70.99602 h 171.96812 l 91.50598,73.36256 81.251,-483.561749 -104.1275,-1.577689 -11.73406,91.801788 -28.49701,-0.0986 -10e-6,-88.843626 -223.24302,-0.493028 z"
+     id="path62296" />
+  <path
+     style="fill:none;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     d="m 410.57792,471.90929 9.20365,-56.89534 33.18895,27.05317 -9.7359,55.83931 z"
+     id="scao" />
+  <path
+     style="fill:none;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     d="m 434.56319,427.56438 -18.9651,-46.85495 3.90458,-22.86971 h 48.24948 l -14.78163,84.2274 z"
+     id="path62446" />
+  <path
+     style="fill:none;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     d="m 419.50267,357.83972 18.96511,-105.4237 46.57608,0.8367 -17.29171,104.587 z"
+     id="timbernerslee" />
+  <path
+     style="fill:none;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     d="m 438.46778,252.41602 10.59815,-56.61643 45.73939,-0.2789 -9.76146,57.73203 z"
+     id="tourisme" />
+  <path
+     style="fill:none;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     d="M 449.06593,195.79959 468.03105,89.818087 h 43.78709 L 494.80532,195.52069 Z"
+     id="sc2" />
+  <path
+     style="fill:none;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     d="m 468.03105,89.818087 h -15.61833 l 7.53026,-43.787094 59.68433,0.836697 -7.80917,42.950397 z"
+     id="eln2" />
+  <path
+     style="fill:none;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     d="m 519.62731,46.86769 4.85831,-32.523009 -104.1275,-1.577689 -3.92333,32.706204 29.00547,0.557797 h 14.50272 z"
+     id="sii3" />
+  <path
+     style="fill:none;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     d="m 445.16134,46.309893 -2.23118,18.686211 -29.01947,-0.459191 2.5241,-19.063717 z"
+     id="path62458" />
+  <path
+     style="fill:none;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     d="m 442.93016,64.996104 -7.43164,39.454256 -26.87446,0.11842 5.28663,-40.031867 z"
+     id="path62460" />
+  <path
+     style="fill:none;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter"
+     d="m 380.12705,104.47018 -73.02055,0.40844 -14.78163,-21.196304 -0.55779,-68.887975 88.35996,0.832213 z"
+     id="lab" />
+  <path
+     style="fill:none;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     d="m 309.61659,131.93179 120.76314,-0.5578 17.84951,-0.2789 -33.18895,170.4071 -43.78709,-3.06789 h -94.26775 l 0.83669,-147.2585 18.12842,0.2789 z"
+     id="path62464" />
+  <path
+     style="fill:none;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     d="m 86.776537,132.21069 h 16.733923 l 119.64754,0.2789 13.38713,19.24401 18.96511,-0.2789 1.1156,146.7007 -97.89344,0.8367 -44.34489,-1.39449 z"
+     id="path62466" />
+  <path
+     style="fill:none;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     d="M 126.11908,103.48412 91.796715,104.87862 84.824246,65.832801 76.736185,10.61086 110.34219,10.400458 Z"
+     id="path62468" />
+  <path
+     style="fill:none;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     d="M 85.382043,65.553901 H 20.119748 L 11.736608,11.97815 76.736187,10.61086 Z"
+     id="path62470" />
+  <path
+     style="fill:none;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     d="m 47.172928,64.996104 13.94493,79.765026 H 32.391298 L 20.119748,65.553901 Z"
+     id="path62472" />
+  <path
+     style="fill:none;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     d="m 32.391298,144.76113 h 28.72656 l 10.598152,62.1944 -29.563262,0.2789 z"
+     id="path62474" />
+  <path
+     style="fill:none;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     d="m 157.67287,104.27297 69.38971,0.60565 19.52291,-8.645862 h 37.37242 l 8.36696,-12.550442 -0.55779,-68.887975 -134.88306,0.339185 z"
+     id="bibliotheque" />
+  <path
+     style="fill:none;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     d="m 266.1084,331.62325 0.83669,92.87326 h 39.88251 l 14.78163,-92.31547 z"
+     id="path62593" />
+  <path
+     style="fill:none;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     d="m 321.60923,332.18104 47.41278,0.2789 -12.27154,63.0311 -5.02183,29.05283 -44.90104,-0.0474 z"
+     id="veramolnar" />
+  <path
+     style="fill:none;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     d="m 369.02201,332.45994 22.3119,0.8367 -12.55044,62.75219 -22.033,-0.55779 z"
+     id="path62597" />
+  <path
+     style="fill:none;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     d="m 211.72315,331.62325 14.50273,92.59437 40.71921,0.27889 -0.83669,-92.87326 z"
+     id="path62599" />
+  <path
+     style="fill:none;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     d="m 266.1084,331.62325 55.50083,0.55779 -14.78163,92.31547 h -39.88251 z"
+     id="path62601" />
+  <path
+     style="fill:none;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     d="m 378.78347,396.04883 19.09258,-0.6922 21.90552,19.65732 -9.20365,56.89534 -58.84928,-47.36542 5.02183,-29.05283 z"
+     id="andywarhol" />
+</svg>

exercices/plan/reponse.html

@@ -0,0 +1,116 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+  <style>
+    .info { fill: #ff6e2c }
+    .geii { fill: #9d2038 }
+    .mmi { fill: #936bb6  }
+    .mmi.geii.info { fill: #add24a; }
+    .tourisme { fill: #42c7c1; }
+  </style>
+</head>
+<body>
+  
+<svg width="750" height="600" viewBox="0 0 536.2222 503.96825" xmlns="http://www.w3.org/2000/svg">
+   <path
+     style="fill:none;stroke:#000000;stroke-width:1.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     d="m 157.67287,104.27297 -31.55379,-0.78885 -15.77689,-93.083662 -98.605582,1.57769 77.306776,483.561742 90.717136,-70.99602 h 171.96812 l 91.50598,73.36256 81.251,-483.561749 -104.1275,-1.577689 -11.73406,91.801788 -28.49701,-0.0986 -10e-6,-88.843626 -223.24302,-0.493028 z"
+     id="path62296" />
+  <path
+     style="stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     d="m 410.57792,471.90929 9.20365,-56.89534 33.18895,27.05317 -9.7359,55.83931 z"
+     id="scao" class="geii" />
+  <path
+     style="fill:none;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     d="m 434.56319,427.56438 -18.9651,-46.85495 3.90458,-22.86971 h 48.24948 l -14.78163,84.2274 z"
+     id="path62446" />
+  <path
+     style="stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     d="m 419.50267,357.83972 18.96511,-105.4237 46.57608,0.8367 -17.29171,104.587 z"
+     id="timbernerslee" class="info"/>
+  <path
+     style="stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     d="m 438.46778,252.41602 10.59815,-56.61643 45.73939,-0.2789 -9.76146,57.73203 z"
+     id="tourisme" class="tourisme" />
+  <path
+     style="stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     d="M 449.06593,195.79959 468.03105,89.818087 h 43.78709 L 494.80532,195.52069 Z"
+     id="sc2" class="info" />
+  <path
+     style="stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     d="m 468.03105,89.818087 h -15.61833 l 7.53026,-43.787094 59.68433,0.836697 -7.80917,42.950397 z"
+     id="eln2" class="geii"/>
+  <path
+     style="fill:none;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     d="m 519.62731,46.86769 4.85831,-32.523009 -104.1275,-1.577689 -3.92333,32.706204 29.00547,0.557797 h 14.50272 z"
+     id="sii3" class="geii"/>
+  <path
+     style="fill:none;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     d="m 445.16134,46.309893 -2.23118,18.686211 -29.01947,-0.459191 2.5241,-19.063717 z"
+     id="path62458" />
+  <path
+     style="fill:none;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     d="m 442.93016,64.996104 -7.43164,39.454256 -26.87446,0.11842 5.28663,-40.031867 z"
+     id="path62460" />
+  <path
+     style="stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter"
+     d="m 380.12705,104.47018 -73.02055,0.40844 -14.78163,-21.196304 -0.55779,-68.887975 88.35996,0.832213 z"
+     id="lab" class="mmi info geii"/>
+  <path
+     style="fill:none;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     d="m 309.61659,131.93179 120.76314,-0.5578 17.84951,-0.2789 -33.18895,170.4071 -43.78709,-3.06789 h -94.26775 l 0.83669,-147.2585 18.12842,0.2789 z"
+     id="path62464" />
+  <path
+     style="fill:none;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     d="m 86.776537,132.21069 h 16.733923 l 119.64754,0.2789 13.38713,19.24401 18.96511,-0.2789 1.1156,146.7007 -97.89344,0.8367 -44.34489,-1.39449 z"
+     id="path62466" />
+  <path
+     style="fill:none;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     d="M 126.11908,103.48412 91.796715,104.87862 84.824246,65.832801 76.736185,10.61086 110.34219,10.400458 Z"
+     id="path62468" />
+  <path
+     style="fill:none;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     d="M 85.382043,65.553901 H 20.119748 L 11.736608,11.97815 76.736187,10.61086 Z"
+     id="path62470" />
+  <path
+     style="fill:none;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     d="m 47.172928,64.996104 13.94493,79.765026 H 32.391298 L 20.119748,65.553901 Z"
+     id="path62472" />
+  <path
+     style="fill:none;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     d="m 32.391298,144.76113 h 28.72656 l 10.598152,62.1944 -29.563262,0.2789 z"
+     id="path62474" />
+  <path
+     style="stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     d="m 157.67287,104.27297 69.38971,0.60565 19.52291,-8.645862 h 37.37242 l 8.36696,-12.550442 -0.55779,-68.887975 -134.88306,0.339185 z"
+     id="bibliotheque" class="mmi info geii"/>
+  <path
+     style="fill:none;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     d="m 266.1084,331.62325 0.83669,92.87326 h 39.88251 l 14.78163,-92.31547 z"
+     id="path62593" />
+  <path
+     style="stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     d="m 321.60923,332.18104 47.41278,0.2789 -12.27154,63.0311 -5.02183,29.05283 -44.90104,-0.0474 z"
+     id="veramolnar" class="mmi"/>
+  <path
+     style="fill:none;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     d="m 369.02201,332.45994 22.3119,0.8367 -12.55044,62.75219 -22.033,-0.55779 z"
+     id="path62597" />
+  <path
+     style="fill:none;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     d="m 211.72315,331.62325 14.50273,92.59437 40.71921,0.27889 -0.83669,-92.87326 z"
+     id="path62599" />
+  <path
+     style="fill:none;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     d="m 266.1084,331.62325 55.50083,0.55779 -14.78163,92.31547 h -39.88251 z"
+     id="path62601" />
+  <path
+     style="fill:none;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     d="m 378.78347,396.04883 19.09258,-0.6922 21.90552,19.65732 -9.20365,56.89534 -58.84928,-47.36542 5.02183,-29.05283 z"
+     id="andywarhol" class="mmi" />
+</svg>
+  <a href="." download>télécharger</a>
+</body>