Verschillen

Dit geeft de verschillen weer tussen de geselecteerde revisie en de huidige revisie van de pagina.

--- dmcompusoft:speddenekamp [25-07-2025 11:12] – Arjan de Wit
+++ dmcompusoft:speddenekamp [25-07-2025 12:41] (huidige) – Arjan de Wit
@@ Regel 1: / Regel 1: @@
-__false__
+====== Website SPED Denekamp ======
+===== 1. Versiebeheer =====
+^Datum^Versie^Wijziging^Auteur|
+|27-07-2025|0.1|Initiële versie|Arjan de Wit|
+<WRAP pagebreak/>
+===== 2. Inleiding =====
+{{:dmcompusoft:screenshot.png?nolink&1440x859}}
+==== 2.1 Doel ====
+Dit document voorziet in de functionele beschrijving van de componenten die gebruikt worden om de website van SPED Denekamp te laten functioneren.
+Het verdient de aanbeveling om enige kennis van HTML te hebben voor het beheer van deze website. Voor een optimaal beheer is kennis van markup, php en css een pré.
+==== 2.2 Scope ====
+In dit document staat beschreven welke wensen worden ingevuld met de standaard functionaliteit en welke wensen worden ingevuld met maatwerk plugins.
+=== 2.2.1 Klantwens ===
+SPED Denekamp heeft aangegeven een website te willen met een __Homepagina__, en pagina's voor Nieuws, informatie en Contact. Tens moeten er pagina's beschikbaar zijn ten behoeve van Wist-U-Dat en Donaties.
+<WRAP pagebreak/>
+===== 3. Functionele beschrijving =====
+==== 3.1 Inleiding ====
+De website van SPED Denekamp draait op het open source platform [[https://getgrav.org/|GRAV cms]]. Grav is een Flat file conten management system. Dat wil zeggen dat er geen database gebruikt wordt maar dat alle pagina's in markup bestanden worden opgeslagen. GRAV cms kent een klein marktaandeel maar is met meer dan 120 themas en ruiim 400 plugins ten behoeve van extra functionaliteit, bijzonder veelzijdig.
+De technische vereisten voor het hosting platform zijn:
+  * PHP 7.3.6 of hoger
+  * Web Server (Apache, Nginx, LiteSpeed, Lightly, IIS, etc.)
+Alle, in dit hoofdstuk genoemde plugins zijn terug te vinden in [[:dmcompusoft:speddenekamp#appendix-a|Appendix A ]]met een link naar de officiële website.
+==== 3.2 Layout ====
+Voor de website wordt gebruik gemaakt van het commerciële design [[https://getgrav.org/premium/typhoon|Typhoon Theme]]. Typhoon biedt een responsive layout voor weergave op desktop, tablet en mobile. De modulaire pagina opbouw zorgt ervoor dat de pagina's volledig naar eigen wens kunnen worden opgebouwd. Hiervoor is geen technische kennis benodigd.
+=== 3.2.1 Kleurstelling ===
+De primaire kleuren die op de website gebruikt worden zijn:
+<WRAP col2>
+{{:dmcompusoft:groen.png?nolink&43x38}}Hex: #255925
+</WRAP>
+<WRAP col2>
+{{:dmcompusoft:rood.png?nolink&43x38}}Hex: #a31e1e
+</WRAP>
+=== 3.2.2 Lettertype ===
+Er is gekozen voor het lettertype Inter. Dit font is een standaard [[https://fonts.google.com/specimen/Inter|Google Font]].
+<WRAP pagebreak/>
+==== 3.3 Prestaties ====
+De website scoort onderstaande prestaties bij de Google Lighthouse metingen. Om de prestaties te behouden wordt er aanbevolen om afbeeldingen te uploaden in het [[https://nl.wikipedia.org/wiki/WebP|webp-formaat]]. Hiervoor kan van de onlin converter [[https://convertio.co/nl/|Convertio]] gebruik gemaakt worden.
+<WRAP GROUP>
+<WRAP half column>
+**Desktop:**
+**{{:dmcompusoft:performance_desktop.png?nolink&702x501}}**</WRAP>
+<WRAP half column>
+**Mobiel:**</WRAP>
+{{:dmcompusoft:performance_mobile.png?nolink&843x484}}</WRAP>
+==== 3.4 Statistieken ====
+De meeste metingen en rapportages op het gebied van bezoekers gaan via de plugin Page Stats. Deze statistieken zijn anoniem en via het dashboard toegankelijk. \\ De relevante instellingen zijn:
+{{:dmcompusoft:page-stats.png?nolink&600}}<WRAP pagebreak/>
+{{anchor:zoekmachine}}
+==== 3.5 Zoekmachine optimalisatie ====
+Om de vindbaarheid op het internet te vergroten kan per pagina diverse metadata toegevoegd worden
+{{:dmcompusoft:seo.png?nolink&1637x288}}Klik op het tabblad Options en vink metadata aan.
+Voeg in ieder geval een metatag "description" toe en vul hierin een kort stukje tekst (max 160 karakters) in die de inhoud van de pagina beschrijft. Deze tekst verschijnt in de zoekresultaten.
+==== 3.6 Contact formulieren ====
+Voor het maken van contact- en inschrijf formulieren wordt gebruik gemaakt van de plugin Forms. Op de website is het volgende formulier gedefinieerd:
+  * **Contactformulier** \\ Ten behoeve van het opnemen van contact met SPED Denekamp. Mail gaat naar speddinkelland@gmail.com. \\ Dit formulier is geplaatst op de contact pagina
+Voor het tegenhouden van spam berichten wordt gebruik gemaakt van de door De Wit Online ontwikkelde plugin Form hCaptcha.
+<WRAP pagebreak />
+===== 4. Content Management =====
+==== 4.1 Inleiding ====
+Het gaat te ver om een hele handleiding te schrijven. Er zijn via Google ook voldoende tutorials te vinden over hoe je met Grav CMS en de plugins moet omgaan. Een aantal basis zaken echter, worden wel beschreven in dit hoofdstuk. Een goede start is de [[https://learn.getgrav.org/17|Learn pagina]] van Grav CMS.
+==== 4.2 Beheer ====
+{{anchor:inloggen}}
+=== 4.2.1 Inloggen ===
+Inloggen op de beheersomgeving van de website gaat door naar de url [[https://www.speddenekamp.nl/admin|https://www.speddenekamp.nl/admin]] te gaan. \\
+Medewerkers die inlog gegevens hebben, kunnen deze hier invullen.
+Beheerders kunnen medewerkers toegang geven en van rollen voorzien. \\ Nieuwe medewerkers moeten de inloggegevens handmatig toegestuurd krijgen van een beheerder.
+Er zijn 2 groepen aangemaakt:
+  * Beheerders, \\ Groep met rechten om pagina's en gebruikers te beheren
+  * Redacteurs, \\ Groep voor mensen die artikelen mogen plaatsen
+=== 4.2.2 Pagina's ===
+<WRAP group>
+<WRAP third column>
+{{:dmcompusoft:pages.png?nolink&225x221}}
+</WRAP>
+<WRAP twothirds column>
+In de beheersomgeving vind je aan de linker zijde een menu. Hierin staan de functionaliteiten die de website bevat, alsmede toegang tot de instellingen van de website en het thema.
+In het menu vind je "Pages" Onder dit kopje vind je alle pagina's die op de website staan. De editor geeft je heel veel mogelijkheden in het maken van de pagina's. Iedere pagina kan voorzien worden van zogenaamde Meta informatie ten behoeve van zoekmachines. Dit vind je terug onder [[:dmcompusoft:speddenekamp#zoekmachines|Zoekmachine optimalisatie]].
+Via deze link vind je een instructie om een nieuwe pagina aan te maken: [[https://learn.getgrav.org/17/content/content-pages|https://learn.getgrav.org/17/content/content-pages]]
+</WRAP>
+Klik op de [Add] knop om een nieuwe pagina aan te maken:
+{{:dmcompusoft:pages-add.png?nolink&400}}
+In het pop-up venster kunnen verschillende parameters opgegeven worden:
+{{:dmcompusoft:pages-params.png?nolink&600}}
+  * Page Title, \\ De titel van de pagina
+  * Folder name (wordt automatisch aangemaakt op basis van de Page Title), \\ De fysieke folder waar de bestanden van deze pagina worden opgeslagen
+  * Parent Page, \\ Bovenliggende pagina waar deze pagina onder wordt aangemaakt. (default: Root).
+  * Page Template, \\ De layout die gebruikt moet worden.
+      * Default \\ volstaat voor de meeste reguliere pagina's
+      * Post \\ moet gekozen worden wanneer er een nieuwsartikel geschreven wordt
+      * Modular \\ moet gekozen worden wanneer je meer creatieve opmaak nodig hebt zoals op de home pagina en de informatie pagina
+Laat de overige instellingen staan en klik op [Continue]
+</WRAP><WRAP pagebreak/>{{anchor:berichten}}
+=== 4.2.3 Berichten ===
+<WRAP group>
+<WRAP third column>
+{{:dmcompusoft:wp-blog.png?nolink&241x289}}
+</WRAP>
+<WRAP twothirds column>
+In het menu vind je ook "Berichten" Onder dit kopje vind je alle nieuws artikelen die op de website staan. Hiervoor kan gebruik gemaakt worden van de reguliere editor. Ieder bericht kan voorzien worden van zogenaamde Meta informatie ten behoeve van zoekmachines. Dit vind je terug onder [[:dmcompusoft:veteranen-texel#yoast|Yoast SEO]].
+Via deze link vind je een instructie om een nieuws artikel toe te voegen: [[https://wordpress.com/support/posts/|https://wordpress.com/support/posts/]]
+</WRAP>
+</WRAP>
+=== 4.2.4 Media ===
+<WRAP group>
+<WRAP third column>
+{{:dmcompusoft:wp-media.png?nolink&241x289}}
+</WRAP>
+<WRAP twothirds column>
+In het menu vind je ook "Media" Onder dit kopje vind je alle afbeeldingen, documenten en videos die door de beeheerder ge-upload zijn.
+</WRAP>
+</WRAP>
+=== 4.2.5 Flatsome Theme ===
+<WRAP group>
+<WRAP third column>
+{{:dmcompusoft:wp-flatsome.png?nolink&321x316}}
+</WRAP>
+<WRAP twothirds column>
+[[https://flatsome3.uxthemes.com/|Flatsome Theme]] is een **commercieel**  thema dat ontzettend veelzijdig is. Het gaat in deze beschrijving dan ook te ver om alle mogelijkheden uit te leggen. \\ Het thema voorziet in een goed gedocumenteerde hulp. Deze vind je via deze link: [[https://docs.uxthemes.com/|https://docs.uxthemes.com/]]. \\
+De UX-Builder is het hart van dit thema en biedt de gebruiker eindeloos veel mogelijkheden om de website vorm te geven. Binnen het thema zijn verschillende opties om handmatig code voor styling (zogenaamde css) toe te voegen.
+</WRAP>
+</WRAP>
+<WRAP pagebreak/>
+{{anchor:appendix-a}}
+===== Appendix A - Plugins & Integraties =====
+==== A1. Plugins ====
+De gebruikte plugins op de website worden hieronder kort beschreven maar verder niet toegelicht. Meer informatie vind je door op de links te klikken.
+  * [[https://nl.wordpress.org/plugins/date-time-picker-field/|Availability datepicker]], om datum en tijd in Contact Form 7 te kunnen kiezen
+  * [[https://github.com/francodacosta/grav-plugin-page-stats|Page Stats]], om inzicht te krijgen in bezoekersaantallen en welke pagina's bezocht worden
+  * [[https://nl.wordpress.org/plugins/wordpress-seo/|Yoast SEO]], voor het optimaliseren van de pagina's en artikelen tbv. zoekmachines
+  * [[https://nl.wordpress.org/plugins/complianz-gdpr/|Complianz]], GDRP Cookie consent
+  * [[https://github.com/getgrav/grav-plugin-form|Forms]], voor het maken van formulieren
+  * [[https://nl.wordpress.org/plugins/contact-form-7-honeypot/|HoneyPot]], ter voorkoming van veel spm berichten via de formulieren
+  * [[https://nl.wordpress.org/plugins/polylang/|Polylang]], om het mogelijk te maken de site meertalig te maken
+  * [[https://wordpress.org/plugins/really-simple-ssl/|Really Simple SSL]], voor beveiliging van de website
+<WRAP pagebreak/>
+===== Appendix B - Inloggegevens =====
+<WRAP important> \\ **LET OP:**  Deze pagina bevat gevoelige informatie zoals gebruikersnamen en wachtwoorden! \\ </WRAP>
+**Email:**
+Het email account is uitsluitend aangemaakt om op de juiste maniet emails vanaf het contactformulier te kunnen verzenden.
+Server instellingen zijn:
+Inkomende mailservser: mail.speddenekamp.nl \\ Uitgaande mailserver: mail.speddenekamp.nl poort 587
+  * info@speddenekamp.nl \\ oUR61VVi
+Artikelen met betrekking tot het instellen van de email vind u op:[[https://www.dewitonline.nl/clients/knowledgebase/1/Email|https://www.dewitonline.nl/clients/knowledgebase/1/Email]]
+**Webhosting:**
+De website wordt gehost bij De Wit Online. \\ Via [[https://www.dewitonline.nl/clients/login|deze link]] kan worden ingelogd op het beheer paneel. Hier vandaan heb je toegang tot het technische gedeelte maar ook tot je account gegevens.
+Inlognaam: kirsten03@live.nl \\ Wachtwoord: Niet bij ons bekend \\  \\ Voor het meeste beheer is deze omgeving voldoende. Hier kunnen wachtwoorden van email accounts gereset worden etc. Voor meer hulp heeft DM Compusoft een uitgebreide [[https://www.dewitonline.nl/clients/index.php/knowledgebase|kennisbank]].
+Voor het technische gedeelte van de website maakt DM Compusoft gebruik van DirectAdmin. De DirectAdmin is te bereiken via deze link: \\ [[https://www.speddenekamp.nl:2222|https://www.speddenekamp.nl:2222]]
+Inlognaam: sp3dd3nkp \\ Wachtwoord: oUR61VVi
+**Website:**
+Toegang tot de website is beschreven in [[:dmcompusoft:speddenekamp#inloggen|paragraaf 4.2.1 Inloggen]].
+**Licentie Typhoon Theme:**
+Licentiecode: 9d8dfc7d-9c55-48d8-b43c-1ee53cc05695
+**Form hCaptcha:**
+De Site Key is: b35ce280-30da-4398-bb5e-9da0343a593a \\ Er is ook een Secret Key gecofigureerd maar deze key is eigendom van De Wit Online.

Kpn

Kpn-qrc