Differences

This shows you the differences between two versions of the page.

--- versiebeheer [2026/01/23 14:28] – support
+++ versiebeheer [2026/01/23 14:37] (current) – support
@@ Line 4: / Line 4: @@
 <html>
-<div style="display:flex; gap:18px; align-items:flex-start; flex-wrap:wrap;">
+<style>
+  .wrap { display:flex; gap:18px; align-items:flex-start; flex-wrap:wrap; }
+  .colL { flex:1; min-width:320px; max-width:560px; }
+  .colR { flex:1; min-width:320px; max-width:620px; }
+  .card { padding:14px 16px; border:1px solid #e5e5e5; border-radius:10px; background:#fff; margin-bottom:12px; }
+  .cardSoft { padding:14px 16px; border:1px solid #eaeaea; border-radius:10px; background:#fafafa; margin-bottom:12px; }
+  .titleXL { font-size:20px; font-weight:800; margin-bottom:6px; }
+  .titleL { font-size:18px; font-weight:800; margin-bottom:6px; }
+  .titleM { font-weight:800; font-size:16px; margin-bottom:6px; }
+  .p { color:#555; line-height:1.55; }
+  .ul { margin:8px 0 0 18px; color:#555; line-height:1.5; }
+  /* Beeldverhoudingen */
+  .imgBox { padding:12px; border:1px solid #eaeaea; border-radius:10px; background:#fafafa; margin-bottom:12px; }
+  .imgTitle { font-weight:800; margin-bottom:8px; }
+  .img { width:100%; border-radius:10px; border:1px solid #e0e0e0; display:block; }
+  /* Gedeelde folders bewust kleiner */
+  .imgFolders {
+    width:100%;
+    max-height:330px;   /* tweakbaar: 280–360 */
+    object-fit:contain; /* houdt hele afbeelding zichtbaar */
+    background:#fff;
+  }
+  /* Highlight blok */
+  .calloutGood { margin-top:10px; padding:10px 12px; background:#f7fbfb; border:1px solid #dfeeee; border-radius:10px; color:#2b5b5b; line-height:1.5; }
+  /* Compactere tip */
+  .calloutTip { margin-top:10px; padding:10px 12px; background:#fff7f2; border:1px solid #ffe1cf; border-radius:10px; color:#6a3a14; line-height:1.5; }
+  /* Codeblok */
+  pre.code { margin:10px 0 0; padding:10px 12px; border-radius:10px; background:#fff; border:1px solid #e5e5e5; overflow:auto; }
+  /* Terugknop */
+  .backWrap { margin-top:14px; text-align:center; }
+  .backBtn {
+    display:inline-block; padding:8px 14px; border-radius:20px;
+    background:#eef3f3; color:#006666; text-decoration:none; font-weight:700;
+  }
+</style>
+<div class="wrap">
   <!-- LINKERKOLOM -->
-  <div style="flex:1; min-width:320px; max-width:560px;">
+  <div class="colL">
-    <!-- HERO / INTRO -->
+    <div class="card">
-    <div style="padding:14px 16px; border:1px solid #e5e5e5; border-radius:10px; background:#fff; margin-bottom:12px;">
+      <div class="titleXL">Versiebeheer in Sumsonite</div>
-      <div style="font-size:20px; font-weight:800; margin-bottom:6px;">
+      <div class="p">
-        Versiebeheer in Sumsonite
+        Sumsonite is ontworpen om gebieds- en vastgoedprojecten controleerbaar, reproduceerbaar en audit-proof door te rekenen.
-      </div>
+        Dat betekent dat niet alleen de actuele uitkomst belangrijk is, maar juist ook: varianten, scenario’s,
-      <div style="color:#555; line-height:1.55;">
+        besluitmomenten en onderliggende documentatie.
-        Sumsonite is ontworpen om gebieds- en vastgoedprojecten <strong>controleerbaar, reproduceerbaar en audit-proof</strong> door te rekenen.
-        Dat betekent dat niet alleen de actuele uitkomst belangrijk is, maar juist ook:
-        varianten, scenario’s, besluitmomenten en de onderliggende documentatie.
       </div>
-      <div style="margin-top:10px; padding:10px 12px; background:#f7fbfb; border:1px solid #dfeeee; border-radius:10px; color:#2b5b5b; line-height:1.5;">
+      <div class="calloutGood">
         <strong>Wat levert dit op?</strong><br>
-        Een sluitende audittrail: je kunt altijd uitleggen <em>welke versie</em> is gebruikt, <em>waarom</em> keuzes zijn gemaakt,
+        Een sluitende audittrail: je kunt altijd uitleggen welke versie is gebruikt, waarom keuzes zijn gemaakt,
-        en <em>welke documenten</em> de onderbouwing vormen — richting collega’s, opdrachtgever, bestuur én accountant.
+        en welke documenten de onderbouwing vormen – richting collega’s, opdrachtgever, bestuur en accountant.
       </div>
     </div>
-    <!-- KERNPRINCIPES -->
+    <div class="card">
-    <div style="padding:14px 16px; border:1px solid #e5e5e5; border-radius:10px; background:#fff; margin-bottom:12px;">
+      <div class="titleM">Kernprincipes</div>
-      <div style="font-size:16px; font-weight:800; margin-bottom:8px;">Kernprincipes</div>
+      <ul class="ul">
+        <li><strong>Niet overschrijven</strong>: versies blijven bestaan; je kopieert en hernoemt.</li>
+        <li><strong>Projectdossier per systeemmap</strong>: alle doorrekeningen van één project staan bij elkaar.</li>
+        <li><strong>Besluitvorming zichtbaar</strong>: gedeelde folders zijn ingericht langs het proces.</li>
+        <li><strong>Documenten herleidbaar</strong>: koppeling op projectniveau én per kostencode (doc-label).</li>
+        <li><strong>Metadata als ruggengraat</strong>: filtering, dashboards en consistentie.</li>
+      </ul>
+    </div>
-      <div style="color:#555; line-height:1.55;">
+    <!-- Afbeelding: Gedeelde folders (bewust kleiner) -->
-        <ul style="margin:0; padding-left:18px;">
+    <div class="imgBox">
-          <li><strong>Niet overschrijven</strong>: versies blijven bestaan; je kopieert en hernoemt.</li>
+      <div class="imgTitle">Gedeelde folders (processtructuur)</div>
-          <li><strong>Projectdossier per systeemmap</strong>: alle doorrekeningen van één project staan bij elkaar.</li>
+      <img class="img imgFolders"
-          <li><strong>Besluitvorming zichtbaar</strong>: gedeelde folders zijn ingericht langs het proces.</li>
+           src="/wiki/lib/exe/fetch.php?media=handleiding_nieuw:afbeeldingen:gedeelde_folders.png"
-          <li><strong>Documenten herleidbaar</strong>: koppeling op projectniveau én per kostencode (doc-label).</li>
+           alt="Gedeelde folders">
-          <li><strong>Metadata als ruggengraat</strong>: zorgt voor filtering, dashboards en consistentie.</li>
+      <div class="p" style="margin-top:8px;">
-        </ul>
+        De mappenstructuur volgt de uitwerkings- en besluitvormingsfases.
+        Zo kun je altijd terugvinden welke stukken bij welke fase en welk besluitmoment horen.
       </div>
     </div>
-    <!-- AFBEELDING: GEDEELDE FOLDERS -->
+    <!-- Sectie 4 naar links gehaald voor balans -->
-    <div style="padding:12px; border:1px solid #eaeaea; border-radius:10px; background:#fafafa; margin-bottom:12px;">
+    <div class="cardSoft">
-      <div style="font-weight:800; margin-bottom:8px;">Gedeelde folders (processtructuur)</div>
+      <div class="titleM">4. Externe opslagstructuur (cloud/schijf)</div>
-      <img src="/wiki/lib/exe/fetch.php?media=handleiding_nieuw:afbeeldingen:gedeelde_folders.png"
+      <div class="p">
-           style="width:100%; border-radius:10px; border:1px solid #e0e0e0;" alt="Gedeelde folders">
+        Richt je opslag zo in dat documenten door alle uitwerkingsfases heen transparant blijven, zonder dat de geschiedenis verdwijnt.
-      <div style="margin-top:8px; color:#555; line-height:1.5;">
-        De mappenstructuur volgt de uitwerkings- en besluitvormingsfases. Zo kun je altijd terugvinden welke stukken
-        bij welke fase en welk besluitmoment horen.
       </div>
+      <pre class="code">/Projectnaam
+  /01_Plannen_in_ontwikkeling
+  /02_Ter_besluitvorming
+  /03_Vastgesteld
+  /04_Archief_historie</pre>
+      <div class="p" style="margin-top:8px;">
+        <strong>Belangrijke regels:</strong>
+      </div>
+      <ul class="ul">
+        <li>Documenten bij voorkeur niet verplaatsen tussen fases; kopieer wanneer nodig.</li>
+        <li>Vastgesteld blijft ongewijzigd (read-only in beheer).</li>
+        <li>Archief/historie blijft raadpleegbaar voor reconstructie en audit.</li>
+      </ul>
     </div>
@@ Line 56: / Line 116: @@
   <!-- RECHTERKOLOM -->
-  <div style="flex:1; min-width:320px; max-width:620px;">
+  <div class="colR">
-    <!-- 1) SYSTEEMMAP -->
+    <div class="card">
-    <div style="padding:14px 16px; border:1px solid #e5e5e5; border-radius:10px; background:#fff; margin-bottom:12px;">
+      <div class="titleL">1. Systeemmap: het projectdossier</div>
-      <div style="font-size:18px; font-weight:800; margin-bottom:6px;">1. Systeemmap: het projectdossier</div>
+      <div class="p">
-      <div style="color:#555; line-height:1.55;">
+        Elke doorrekening in Sumsonite staat in een systeemmap op projectniveau. Dit is het rekenkundige projectdossier
-        Elke doorrekening in Sumsonite staat in een <strong>systeemmap op projectniveau</strong>.
+        waarin alle versies, varianten en scenario’s van dat project samenkomen.
-        Dit is het rekenkundige projectdossier waarin alle versies, varianten en scenario’s van dat project samenkomen.
       </div>
-      <ul style="margin:8px 0 0 18px; color:#555; line-height:1.5;">
+      <ul class="ul">
         <li>Alle doorrekeningen blijven beschikbaar (initiatief, werkversies, besluitvarianten, vastgesteld).</li>
-        <li>Versies worden expliciet <strong>gekopieerd en hernoemd</strong> (geen overschrijven).</li>
+        <li>Versies worden expliciet gekopieerd en hernoemd (geen overschrijven).</li>
         <li>Rechten en eigenaarschap kunnen per project worden ingericht.</li>
       </ul>
     </div>
-    <!-- 2) GEDEELDE FOLDERS (UITLEG) -->
+    <div class="cardSoft">
-    <div style="padding:14px 16px; border:1px solid #eaeaea; border-radius:10px; background:#fafafa; margin-bottom:12px;">
+      <div class="titleM">2. Gedeelde folders: besluitvorming transparant</div>
-      <div style="font-weight:800; font-size:16px; margin-bottom:6px;">2. Gedeelde folders: besluitvorming transparant</div>
+      <div class="p">
-      <div style="color:#555; line-height:1.55;">
         De gedeelde folders zijn opgebouwd in lagen:
-        <ul style="margin:8px 0 0 18px;">
-          <li><strong>Laag 1</strong>: fase (01 plannen, 02 ter besluitvorming, 03 vastgesteld, 04 archief/historie)</li>
-          <li><strong>Laag 2</strong>: besluitmomenten (bijv. VO-besluit, kredietbesluit, actualisatie)</li>
-          <li><strong>Laag 3</strong>: projecten (met alle bijbehorende rekenbestanden en onderbouwing)</li>
-        </ul>
       </div>
-      <div style="margin-top:8px; color:#555; line-height:1.55;">
+      <ul class="ul">
+        <li><strong>Laag 1</strong>: fase (01 plannen, 02 ter besluitvorming, 03 vastgesteld, 04 archief/historie)</li>
+        <li><strong>Laag 2</strong>: besluitmomenten (bijv. VO-besluit, kredietbesluit, actualisatie)</li>
+        <li><strong>Laag 3</strong>: projecten (met alle bijbehorende rekenbestanden en onderbouwing)</li>
+      </ul>
+      <div class="p" style="margin-top:8px;">
         Dit ondersteunt een heldere audittrail: je ziet in één oogopslag welke versie “waar thuishoort” in het proces.
       </div>
     </div>
-    <!-- AFBEELDING: PROJECTGEGEVENS -->
+    <!-- Projectgegevens nu groter en prominenter -->
-    <div style="padding:12px; border:1px solid #eaeaea; border-radius:10px; background:#fafafa; margin-bottom:12px;">
+    <div class="imgBox">
-      <div style="font-weight:800; margin-bottom:8px;">Projectgegevens &amp; metadata</div>
+      <div class="imgTitle">Projectgegevens &amp; metadata</div>
-      <img src="/wiki/lib/exe/fetch.php?media=handleiding_nieuw:afbeeldingen:projectgegevens.png"
+      <img class="img"
-           style="width:100%; border-radius:10px; border:1px solid #e0e0e0;" alt="Projectgegevens">
+           src="/wiki/lib/exe/fetch.php?media=handleiding_nieuw:afbeeldingen:projectgegevens.png"
-      <div style="margin-top:8px; color:#555; line-height:1.5;">
+           alt="Projectgegevens">
-        De metadata (fase, versietype, jaar/prijspijl, maker, opdrachtgever) geeft context aan de berekening
+      <div class="p" style="margin-top:8px;">
-        én wordt gebruikt om data te groeperen en filteren in dashboards.
+        Metadata (fase, versietype, jaar/prijspeil, maker, opdrachtgever) geeft context aan de berekening
+        en wordt gebruikt om te groeperen en filteren in dashboards.
       </div>
     </div>
-    <!-- 3) DOCUMENTATIEPAGINA -->
+    <div class="card">
-    <div style="padding:14px 16px; border:1px solid #e5e5e5; border-radius:10px; background:#fff; margin-bottom:12px;">
+      <div class="titleL">3. Documentatiepagina: koppelen van onderbouwing</div>
-      <div style="font-size:18px; font-weight:800; margin-bottom:6px;">3. Documentatiepagina: koppelen van onderbouwing</div>
+      <div class="p">
-      <div style="color:#555; line-height:1.55;">
+        Sumsonite bewaart zelf geen documenten, maar werkt met hyperlinks naar bronbestanden in jullie opslagomgeving
-        Sumsonite bewaart zelf geen documenten, maar werkt met <strong>hyperlinks naar bronbestanden</strong> in jullie opslagomgeving
         (SharePoint/Teams/netwerkschijf).
       </div>
-      <div style="margin-top:10px; padding:10px 12px; border:1px solid #e6f0f0; background:#f7fbfb; border-radius:10px; color:#2b5b5b; line-height:1.5;">
+      <div class="calloutGood" style="margin-top:10px;">
         <strong>6 kernplekken</strong><br>
-        Op de documentatiepagina kun je zes belangrijke projectdocumenten vastleggen.
+        Op de documentatiepagina kun je zes belangrijke projectdocumenten vastleggen. Elk document krijgt een omschrijving en een hyperlink.
-        Elk document krijgt een <strong>omschrijving</strong> en een <strong>hyperlink</strong>.
       </div>
-      <div style="margin-top:10px; color:#555; line-height:1.55;">
+      <div class="p" style="margin-top:10px;">
         <strong>Per kostencode koppelen</strong><br>
-        Daarnaast kun je per kostenregel in de GREX een document koppelen. Als dat gedaan is,
+        Daarnaast kun je per kostenregel in de GREX een document koppelen. Als dat gedaan is, verschijnt achter de kostencode het label <strong>‘doc’</strong>.
-        verschijnt achter de kostencode het label <strong>‘doc’</strong>. Zo wordt onderbouwing op detailniveau zichtbaar.
       </div>
     </div>
-    <!-- AFBEELDING: DOCUMENTATIE -->
+    <!-- Documentatie nu groter en prominenter -->
-    <div style="padding:12px; border:1px solid #eaeaea; border-radius:10px; background:#fafafa; margin-bottom:12px;">
+    <div class="imgBox">
-      <div style="font-weight:800; margin-bottom:8px;">Documentatiekoppeling (6 kernvelden + doc-label)</div>
+      <div class="imgTitle">Documentatiekoppeling (6 kernvelden + doc-label)</div>
-      <img src="/wiki/lib/exe/fetch.php?media=handleiding_nieuw:afbeeldingen:documentatie.png"
+      <img class="img"
-           style="width:100%; border-radius:10px; border:1px solid #e0e0e0;" alt="Documentatiepagina">
+           src="/wiki/lib/exe/fetch.php?media=handleiding_nieuw:afbeeldingen:documentatie.png"
-      <div style="margin-top:8px; color:#555; line-height:1.5;">
+           alt="Documentatiepagina">
-        Voorbeeld van een gekoppeld document: een leesbare omschrijving met een hyperlink,
+      <div class="p" style="margin-top:8px;">
-        plus optioneel het volledige webadres.
+        Voorbeeld van een gekoppeld document: een leesbare omschrijving met hyperlink, plus optioneel het volledige webadres.
       </div>
     </div>
-    <!-- 4) EXTERNE OPSLAGSTRUCTUUR -->
+    <!-- Sectie 5 compacter -->
-    <div style="padding:14px 16px; border:1px solid #eaeaea; border-radius:10px; background:#fafafa; margin-bottom:12px;">
+    <div class="card">
-      <div style="font-weight:800; font-size:16px; margin-bottom:6px;">4. Externe opslagstructuur (cloud/schijf)</div>
+      <div class="titleL">5. Beheer &amp; bewaartermijnen</div>
-      <div style="color:#555; line-height:1.55;">
+      <div class="p">
-        Richt je opslag zó in dat documenten door alle uitwerkingsfases heen transparant blijven, zonder dat de geschiedenis verdwijnt.
-        Een praktische structuur is:
-      </div>
-      <pre style="margin:10px 0 0; padding:10px 12px; border-radius:10px; background:#fff; border:1px solid #e5e5e5; overflow:auto;">
-/Projectnaam
-  /01_Plannen_in_ontwikkeling
-  /02_Ter_besluitvorming
-  /03_Vastgesteld
-  /04_Archief_historie
-      </pre>
-      <div style="margin-top:8px; color:#555; line-height:1.55;">
-        <strong>Belangrijke regels:</strong>
-        <ul style="margin:8px 0 0 18px;">
-          <li>Documenten worden bij voorkeur <strong>niet verplaatst</strong> tussen fases; kopieer wanneer nodig.</li>
-          <li>Wat is vastgesteld blijft <strong>ongewijzigd</strong> (read-only in beheer).</li>
-          <li>Archief/historie blijft <strong>raadpleegbaar</strong> voor reconstructie en audit.</li>
-        </ul>
-      </div>
-    </div>
-    <!-- 5) BEHEER, ARCHIVERING, VERWIJDERING -->
-    <div style="padding:14px 16px; border:1px solid #e5e5e5; border-radius:10px; background:#fff; margin-bottom:12px;">
-      <div style="font-size:18px; font-weight:800; margin-bottom:6px;">5. Beheer &amp; bewaartermijnen</div>
-      <div style="color:#555; line-height:1.55;">
         Documentbeheer is onderdeel van de audittrail. Spreek intern af:
       </div>
-      <ul style="margin:8px 0 0 18px; color:#555; line-height:1.5;">
+      <ul class="ul">
-        <li>wie eigenaar is van het projectdossier en de opslagstructuur;</li>
+        <li>wie eigenaar is van projectdossier en opslagstructuur;</li>
         <li>wanneer documenten “vastgesteld” zijn en niet meer wijzigen;</li>
         <li>welke bewaartermijnen gelden (gemeentelijk of organisatiebreed);</li>
-        <li>dat je nooit documenten verwijdert zolang ze nog via hyperlinks aan actieve of vastgestelde versies hangen.</li>
+        <li>dat je geen documenten verwijdert zolang ze via hyperlinks aan actieve of vastgestelde versies hangen.</li>
       </ul>
-      <div style="margin-top:10px; padding:10px 12px; background:#fff7f2; border:1px solid #ffe1cf; border-radius:10px; color:#6a3a14; line-height:1.5;">
+      <div class="calloutTip">
         <strong>Praktische tip:</strong><br>
-        Bij opschonen: eerst links in Sumsonite aanpassen/verwijderen, dan pas het bronbestand opschonen.
+        Bij opschonen: eerst links in Sumsonite aanpassen/verwijderen, dan pas het bronbestand opschonen. Zo voorkom je dode links.
-        Zo voorkom je “dode links” in documentatie en kostenregels.
       </div>
     </div>
-    <!-- 6) HYPERLINKS & URL-VERKORTING -->
+    <!-- Sectie 6 compacter -->
-    <div style="padding:14px 16px; border:1px solid #eaeaea; border-radius:10px; background:#fafafa; margin-bottom:12px;">
+    <div class="cardSoft">
-      <div style="font-weight:800; font-size:16px; margin-bottom:6px;">6. Hyperlinks &amp; leesbaarheid</div>
+      <div class="titleM">6. Hyperlinks &amp; leesbaarheid</div>
-      <div style="color:#555; line-height:1.55;">
+      <div class="p">
-        Gebruik altijd een hyperlink naar de <strong>definitieve opslaglocatie</strong> (SharePoint/Teams/netwerkschijf).
+        Gebruik altijd een hyperlink naar de definitieve opslaglocatie. Bij lange URL’s kun je een korte omschrijving tonen
-        Bij lange URL’s kun je in Sumsonite een korte omschrijving tonen en desnoods een URL-verkorter gebruiken.
+        en desnoods een URL-verkorter gebruiken.
       </div>
+      <div class="p" style="margin-top:8px;">
-      <div style="margin-top:10px; color:#555; line-height:1.55;">
+        <strong>Gratis URL-verkorters:</strong> Bitly, TinyURL, Rebrandly
-        <strong>Gratis en gangbare URL-verkorters:</strong>
-        <ul style="margin:8px 0 0 18px;">
-          <li>Bitly</li>
-          <li>TinyURL</li>
-          <li>Rebrandly</li>
-        </ul>
       </div>
     </div>
-    <!-- TERUGKNOP (NAAR MENUPAGINA) -->
+    <!-- TERUGKNOP -->
-    <div style="margin-top:14px; text-align:center;">
+    <div class="backWrap">
-      <a href="/wiki/doku.php?id=handleiding_nieuw:sub_sumsonite"
+      <a class="backBtn" href="/wiki/doku.php?id=handleiding_nieuw:sub_sumsonite">← Terug naar Sumsonite (menu)</a>
-         style="display:inline-block; padding:8px 14px; border-radius:20px;
-                background:#eef3f3; color:#006666; text-decoration:none; font-weight:700;">
-        ← Terug naar Sumsonite (menu)
-      </a>
     </div>