User manual

Introduction

Voor je ligt de handleiding voor de nieuwe achterkant van de JD-site. Een website kent een voorkant (front end) en een achterkant (back end). De 'front end' is datgene wat de bezoekers van een site zien. Deze handleiding dient als uitleg voor de 'back end' van de site. Het is de bedoeling dat je via de achterkant aanpassingen doet aan site.

Je komt op de achterkant door naar www.jd.nl te gaan en op 'inloggen' te klikken. Je logt in op de website met jouw persoonlijke MijnJD-account. Indien je geen MijnJD-account hebt met bijbehorende rechten, kun je deze aanvragen via de Landelijk Algemeen Secretaris.

Het is overigens niet de bedoeling dat je via de nieuwe achterkant allerlei bestanden gaat opslaan, de Wolk blijft voor massaopslag het primaire middel.

1 Pages

1.1 Menustructuur

Via de admin-pagina, onder Content > Pages, is het mogelijk de menustructuur van de site aan te passen. Door met de cursor op het logo van de 'pijltjes omhoog/omlaag' te klikken kan je met het balkje slepen. Je kan het balkje ook laten inspringen zodat er submenu onstaat. Het systeem laat 2 menulagen toe - een hoofdmenu en een submenu - een sub-submenu is dus niet zichtbaar op de site. Een menu verwijderen kan door simpelweg op het kruisje te klikken.

1.1.1 Homepage

Het menu 'Home' is de landingspagina van de (sub)website en deze kun je niet verwijderen. Wanneer je op 'Home' klikt, kun je wel de inhoud en indeling van de pagina veranderen. Indien je dit doet zul je onder het content-venster een indeling zien van de kolommen op de homepage.

Onder 'Metadata' kun je de widgets aanpassen. Widgets zijn kleine applicaties die op beperkte schaal de functionaliteit van de website bevorderen. In dit geval zorgen de widgets ervoor dan vanaf de homepage gemakkelijk naar andere pagina's doorverwezen kan worden, bijvoorbeeld naar blog-items. De widgets zijn ingedeeld in twee kolommen en zijn terug te vinden onderaan de homepagina. Met 'Left column widgets' en 'Right column widgets' kun je een indeling maken met éen of twee kolommen en x-aantal rijen. Dit kun je naar eigen inzicht indelen.

Bij Metadata staan standaard categorieën, die je naar eigen inzicht kunt toevoegen aan de pagina. Deze categorieën staan vast. Wil je een andere titel voor je kopje dan kan je het ICT-team hiervoor mailen. Onder 'horizontal position' kun je bepalen of de kopjes links of rechts komen.

Klik op 'Save' om de veranderingen door te voeren.

1.1.2 Nieuw menu aanmaken

  • Ga naar: Content > Pages > Add... > Rich text page
  • Title: Naam van het menu
  • Status: 'Published' is automatisch aangevinkt. Hierdoor zijn veranderingen aan de site na opslaan meteen zichtbaar op de site. Wanneer je je veranderingen in eerste instantie alleen zichtbaar wil maken voor de admin, kun je 'Draft' aanklikken.
  • Published from/Expires on: Hier kan je aangeven wanneer het formulier zichtbaar moet zijn op de website. Klik bij 'Published from' op 'today' en daarnaast bij 'Time' op 'now'. Als je wilt aangeven tot wanneer de content zichtbaar moet zijn op de site kan je een uiterste datum aangeven bij 'Expires on'. Dit is niet noodzakelijk.
  • Content: hier zie je een tekstverwerker waar naar believen tekst, afbeeldingen en video invoeren. Zie 2.1 voor uitleg over de tekstverwerker.
  • Klik op 'Save' om de veranderingen door te voeren.

1.1.3. Add Link

Wanneer je een menu aanmaakt met 'Rich text page' creeer je een pagina op de JDsite zelf. Echter is het ook mogelijk om een menu naar een andere pagina te laten verwijzen.

  • Ga naar: Content > Pages > Add... > Link
  • Title: Naam van het menu
  • URL: de link van de pagina waar het menu naar moet verwijzen.
  • Status: 'Published' is automatisch aangevinkt. Hierdoor zijn veranderingen aan de site na opslaan meteen zichtbaar op de site. Wanneer je je veranderingen in eerste instantie alleen zichtbaar wil maken voor de admin, kun je 'Draft' aanklikken.
  • Published from/Expires on: Hier kan je aangeven wanneer het formulier zichtbaar moet zijn op de website. Klik bij 'Published from' op 'today' en daarnaast bij 'Time' op 'now'. Als je wilt aangeven tot wanneer de content zichtbaar moet zijn op de site kan je een uiterste datum aangeven bij 'Expires on'. Dit is niet noodzakelijk.
  • 'Top Navigation Bar', 'Left hand tree, en 'footer' staan automatisch aangevinkt. Hier hoef je niets aan te veranderen.
  • Klik op 'Save' om de veranderingen door te voeren.

2 Managing Content

Door middel van de tekstverwerker kun je de inhoud wijzigen. De verschillende functies staan hieronder beschreven.

2.1 Taakbalk tekstverwerker

Van links naar rechts zie je in de taakbalk staan:

  • Ongedaan maken (ctrl-z)
  • Herstellen (ctrl-y)
  • Formats-menu: bewerken format van de alinea's
  • B: vetgedrukt
  • I: cursief
  • Links uitlijnen
  • Centreren
  • Rechts uitlijnen
  • Uitvullen
  • Bulletpoints invoegen
  • Nummering invoegen
  • Minder inspringen
  • Meer inspringen
  • Geschakelde ketting: hyperlink invoegen/veranderen
  • Fotootje: afbeeldingen invoegen/veranderen
  • Filmband: video invoegen/veranderen (embedden)
  • Tabel: tabel invoegen
  • Punthaken: opent een nieuw venster zodat je de website in HTML-code kan zien en veranderen. Het is niet eng. HTML-code is simpelweg de taal waarin de opmaak van de site is geschreven.
  • Vier pijlen: fullscreen

2.2 Hyperlink invoegen

Het invoegen van een hyperlink kan als volgt: - Selecteer de tekst waarvan je een link wilt maken; - Klik op de het icoontje van de kettingschakel in de taakbalk. Via dit icoon kun je de hyperlink later ook aanpassen of verwijderen; - Vul de URL Link in bij 'URL'; - Klik op 'OK'.

2.3 Afbeelding

Een afbeelding opnemen in de tekst kan op twee manieren:

  1. Een afbeelding kopiëren/plakken (vanaf een andere site) in het tekstvak (bij content). Deze methode is makkelijk en snel. Echter, wanneer de locatie van de afbeelding op de originele site verandert, is de afbeelding niet meer zichtbaar en krijg je een foutmelding.

  2. Om te zorgen dat je afbeelding in de toekomst wel beschikbaar blijft kan je de afbeelding uploaden naar de Media Library (de afbeelding staat dan op de eigen JD server)

    • Zorg dat de afbeelding is opgeslagen in de Media Library (zie punt 7 voor meer uitleg hierover)
    • Ga naar het tekstvak 'Content' en klik in de taakbalk op het 'Instert/Edit Image' icoon (vijfde van links)
    • Een nieuw venster opent;
    • Onder het tabblad 'General', naast het veld van 'Image URL' zit de 'browse' knop om naar de Media Library te gaan;
    • Selecteer de afbeelding uit de Media Libary;
    • Klik op 'Insert'.

Wil je de afbeelding verwijderen uit het tekstvak, dan kan je dat met delete of backspace doen.

2.4 PDF-bestanden

PDF bestanden, zoals het HR en Statuten, kun je als volgt insluiten (embedden) op een pagina.

  • Upload het PDF-bestand in de Media Library (zie punt 7 voor meer uitleg hierover)
  • Open in de backend de pagina waar je het PDF wilt insluiten
  • Ga naar het tekstvak 'Content' en klik in de taakbalk op het HTML-icoon (zevende van links)
  • Kopieer in het HTML venster de onderstaande objectcode: <object data="/static/media/path/bestandsnaam.pdf" width="100%" height=600 type="application/pdf"></object>
  • Waar in de bovenstaande code nu "/static/media/path/bestandsnaam.pdf" staat dien je de locatiecode (tag) van het pdf-bestand te plaatsen. Dit doe je als volgt:
    • open in een nieuw tabblad de Media Library
    • klik op de bestandsnaam van het pdf-bestand welke je wilt insluiten
    • Het pdf-bestand wordt nu geopend in een ander tabblad, in die adresbalk zie je nu de locatiecode van het pdf-bestand staan.
    • Kopieer deze locatiecode, let wel, de code begint met /static/media/ en eindigt met .pdf . Alles wat hiervoor of achter staat heb je niet nodig.
  • Plak de locatiecode op de plek waar nu /static/media/path/bestandsnaam.pdf staat. Zorg dat de code tussen de aanhalingstekens blijft staan.

Dit is een vrij geavanceerd proces, ga dus niet zomaar rommelen aan de code. Wanneer je de locatiecode niet correct kopieert, wordt er geen PDF bestand zichtbaar op de site.

2.5 Headers

Op de HomePage and elke RichTextPage kunnen één of meerdere headers worden geplaatst. Deze kun je naar eigen inzicht veranderen.

  • Ga naar Content > Pages
  • Klik op de pagina die je wilt veranderen
  • Onderaan aan de pagina kan je bij 'Header Images' een afbeelding invoegen.
  • Klik onder image op het icoontje (venster met loepje). Een nieuw venster van de Media Library wordt automatisch geopend. Klik op het diagonale pijltje (meest linker-icoon) de afbeelding aan die je als header wilt. Let wel: Een header image dient 610 x 290 pixels als vereiste te hebben. Is dit niet het geval kan je de afbeelding niet invoeren.
  • Als je geen header invoegt op een pagina dan is er nog steeds wel een header zichtbaar op die desbetreffende pagina. Dit zal dan namelijk de header zijn die je ook ziet op de homepage. Verander je de header op de homepage, dan verandert deze ook de andere pagina's waar geen specifieke header is ingesteld.
  • Indien je twee of meerdere headers invoegt, dan zullen deze willekeurig rouleren.

Wil je de header image weer verwijderen, klik dan op het kruisje. Het plaatje verdwijnt dan niet automatisch uit de lijst maar hij is wel echt verwijderd.

2.6 Video's

Filmpjes uploaden via Youtube (maar ook via andere sites) is geen probleem.

  • Ga naar Youtube en zoek de betreffende video.
  • Klik onder de video op 'Delen/Share', daarna op 'Insluiten/Embed'.
  • Kopieer de code, deze HTML code lijkt hierop: <iframe width="560" height="315" src="//www.youtube.com/embed/BcsfftwLUf0" frameborder="0" allowfullscreen></iframe>
  • Klik boven het tekstvak waar je de video wilt plaatsen op de filmrol-knop (insert/edit video) en kies de tab 'Embed'.
  • Plak de code die je van Youtube hebt gekopieerd in het tekstvak.
  • Klik op 'OK'.

Wil je de video nog verplaatsen, dan kun je dat doen door het grijze vak te klikken en te verslepen. Wil je de video weer verwijderen uit het tekstvak dan kan je dat met backspace doen in het tekstvak.

2.7 Maps

Kaarten met markers kun je invoegen vanuit OpenStreetMap. Je kunt een kaart aanmaken op https://umap.openstreetmap.fr/en/.

Om de kaart in te voegen in een post of pagina:

  1. Klik links op 'Embed and share this map'.
  2. Klik eventueel op 'iframe export options' om opties aan te passen van het kaartje voor je het invoegt.
  3. Kopieer de HTML-code in het vakje rechts bovenin (onder 'Embed the map').
  4. Ga in de beheeromgeving van de JD-website naar de plaats waar je het kaartje wilt embedden (pagina of post).
  5. Klik onder 'Inhoud' op de 'Source code'-knop (twee punthaken, tweede van rechts).
  6. Plak de code op de gewenste plaats in het vak.
  7. Klik OK en sla de pagina of post op.

2.8 In-line editing

Een website kent een voorkant (front end) en een achterkant (back end). De 'front end' is datgene wat de bezoekers van een site zien. Deze User Manual dient als uitleg voor de 'back end' van de site. Het is de bedoeling dat je via de achterkant aanpassingen doet aan site. Wanneer je als admin bent ingelogd is het ook mogelijk om via de voorkant kleinere aanpassingen te doen (in-line editing) aan de de titel en een blog post. Login bij de admin-omgeving > ga terug naar de site. Je ziet linksboven een klein gele tab met een pijltje, klap deze uit en je ziet waar wijzigingen kan aanbrengen met 'Edit'.

2.9 Sidebar

Het is mogelijk om de sidebar aan te passen.

  • Ga naar: Content > Sidebar
  • Blogs: Hier kan je instellen welke blog categorie zichtbaar zijn op in de sidebar.
  • Twitter feed: staat automatisch aangevinkt
  • Events and newsletters tabs: staat automatisch aangevinkt.
  • Social media buttons: Hier staan de vier links naar sociale media waar de Jonge Democraten actief zijn. Je kunt hier ook de link veranderen naar de social media pagina's van je eigen afdeling.

3 Formulier opstellen

Wil je een formulier opstellen, zodat leden zich voor een activiteit kunnen aanmelden, dan kan dat met de nieuwe backend. Overigens kan je met dit formulier geen betalingen invoeren of verwerken.

  • Ga naar: Content > Pages > Add... > Form
  • Title: Naam van het submenu
  • Status: 'Published' is automatisch aangevinkt. Hierdoor zullen veranderingen aan de site na opslaan meteen zichtbaar op de site. Wanneer je je veranderingen nog niet aan de buitenwereld wilt tonen kun je ervoor kiezen om bovenaan 'Draft' aan te vinken. De veranderingen zullen dan alleen zichtbaar zijn voor de admin.
  • Published from/Expires on: Hier kan je aangeven wanneer het formulier zichtbaar moet zijn op de website. Klik bij 'Published from' op 'today' en daarnaast bij 'Time' op 'now'. Als je wilt aangeven tot wanneer de content zichtbaar moet zijn op de site kan je een uiterste datum aangeven bij 'Expires on'. Dit is niet noodzakelijk.
  • Content: hier zie je een tekstverwerker waar naar believen tekst, afbeeldingen en video invoeren. Zie 2.1 voor uitleg over de tekstverwerker.
  • Button text: staat standaard op 'Submit'. Dit is de tekst van de button wanneer de gebruiker het formulier verstuurd op de frontend.
  • Response: Nadat het formulier is verstuurd, zullen gebruikers de content zien die je hier plaatst.
  • Show in menus: 'Top Navigation Bar', 'Left hand tree, en 'footer' staan automatisch aangevinkt. Hier hoef je niets aan te veranderen. Vink 'Login required' niet aan.
  • Email: Hier kan je een bevestigingsmail toesturen naar de gebruikers (optioneel). Vul hiervoor de benodigde velden in.
  • Fields: Via deze optie kan je het uiteindelijke formulier opstellen, dit kun je naar eigen inzicht doen. Zorg voor de veiligheid wel dat je een CAPTCHA in je formulier zet!!! Een CAPTCHA kom je vaak tegen op het internet, het is namelijk dat welbekende plaatje met een tekenreeks, die je moet intypen om te bevestigen dat je een mens bent en geen computer. De CAPTCHA fungeert zo oa als een spamfilter.

Klik op 'Save' om de veranderingen door te voeren.

4 Blogposts

Als AS heb je de mogelijkheid om blogs aan te maken, aan te passen en te verwijderen.

TODO: verschil tussen blog categorie, blog posts en blog page.

Blog aanmaken

  • Ga naar: Content > Blog posts > Klik rechtsboven op 'Add blog posts'
  • Title: Naam van het Blog
  • Categories: Vink hier de categorie aan waar je Blog bij hoort. Je kan zelf geen nieuwe categorieën aanmaken. Indien je toch andere categorieën wilt kun je het ICT-team mailen.
  • Status: 'Published' is automatisch aangevinkt. Hierdoor zullen veranderingen aan de site na opslaan meteen zichtbaar op de site. Wanneer je je veranderingen nog niet aan de buitenwereld wilt tonen kun je ervoor kiezen om bovenaan 'Draft' aan te vinken. De veranderingen zullen dan alleen zichtbaar zijn voor de admin.
  • Published from/Expires on: Hier kan je aangeven wanneer het formulier zichtbaar moet zijn op de website. Klik bij 'Published from' op 'today' en daarnaast bij 'Time' op 'now'. Als je wilt aangeven tot wanneer de content zichtbaar moet zijn op de site kan je een uiterste datum aangeven bij 'Expires on'. Dit is niet noodzakelijk. Laat je 'Expires on' leeg, zal de blog niet verdwijnen van de hoofdsite. Als de blog weg is op de frontend van de site, kan je als admin op de backend nog steeds de blog zien, deze zal niet aan de achterkant verdwijnen tenzij je hem zelf verwijderd.
  • Content: hier zie je een tekstverwerker waar naar believen tekst, afbeeldingen en video invoeren. Zie 2.1 voor uitleg over de tekstverwerker.

Onder de tab 'Other posts' is het mogelijk om links van gerelateerde berichten te plaatsen onder de blog. Dit is optioneel. Onder de tab 'Meta data' is het mogelijk om nog tags toe te voegen onder de blog. Tevens is het hier mogelijk om de URL en beschrijving aan te passen.

'allow comments' is automatisch aangevinkt. Echter laat de JD-site het niet toe om comments onder een blog te plaatsen. Je kan er dus voor kiezen om 'allow comments' niet aan te vinken, dit kan je naar eigen inzicht bepalen. Als je besluit dit te doen zal in het overzicht van de blogs op de site de dode link naar '0 comments' verdwijnen. (deze functie zal verdwijnen)

Klik op 'Save' om de veranderingen door te voeren.

Blog bewerken/verwijderen

Nadat een blog is ingevoerd kan je het als AS nog bewerken. Dit doe je door onder Content > Blog posts in het overzicht op de desbetreffende blog te klikken. Je komt nu weer in het specificatie venster wat je ook zag toen je de blog aanmaakte. Je kan hier veranderingen doorvoeren. Vergeet niet op 'Save' te klikken.

Een blog kan je verwijderen uit het overzicht door er een vinkje voor te zetten en in het drop-down-menu erboven (waar nu nog ------ staat) op 'delete selected Blog posts' te klikken.

5 Events

  • Ga naar: Content > Events > Klik rechtsboven op 'Add events'
  • Title: Naam van het evenement
  • Status: 'Published' is automatisch aangevinkt. Hierdoor zullen veranderingen aan de site na opslaan meteen zichtbaar op de site. Wanneer je je veranderingen nog niet aan de buitenwereld wilt tonen kun je ervoor kiezen om bovenaan 'Draft' aan te vinken. De veranderingen zullen dan alleen zichtbaar zijn voor de admin.
  • Published from/Expires on: Hier kan je aangeven wanneer het formulier zichtbaar moet zijn op de website. Klik bij 'Published from' op 'today' en daarnaast bij 'Time' op 'now'. Als je wilt aangeven tot wanneer de content zichtbaar moet zijn op de site kan je een uiterste datum aangeven bij 'Expires on'. Dit is niet noodzakelijk.
  • Content: hier zie je een tekstverwerker waar naar believen tekst, afbeeldingen en video invoeren. Zie 2.1 voor uitleg over de tekstverwerker.

Klik op 'Save' om de veranderingen door te voeren.

6 Newsletters

  • Ga naar: Content > Newsletters > Klik rechtsboven op 'Add newsletter'
  • Templates: Selecteer de template.
  • Subject: Geef hier het onderwerp van de nieuwsbrief aan.
  • Content: Vul hier de inhoud van je nieuwsbrief in.
  • Newsletter attachements: hier kun je eventueel bijlagen toevoegen
  • Klik op 'Save' om de veranderingen door te voeren.

Laat aan de Algemeen Secretaris weten dat je nieuwsbrief klaar staat zodat deze kan worden verstuurd.

7 Images and Documents

7.1 Media Library

Je kan verschillende bestanden (zoals documenten en afbeeldingen) opslaan bij de Media Library. Om bestanden te uploaden volg de volgende stappen: - Ga naar Content > Media Library - Klik rechtsboven op de knop 'Upload' - Klik op de knop 'Select Files' - Selecteer de gewenste bestanden. Je kan meerdere bestanden in één keer selecteren en uploaden.

Onder de tab help staat welke verschillende bestandsformaten je kan uploaden. Een bestand groter dan 10mb kan niet worden geüpload. Wel kan je meerdere bestanden die samen groter zijn dan 10mb uploaden.

Let wel, wanneer je een bestand upload, dan kan je daarna dat bestand niet meer verplaatsen binnen de Media Library. Je kan het bestand nog wel hernoemen (via het potloodje). Hernoem het bestand alleen wanneer het nog niet op de site wordt gebruikt. Als je toch een bestand hernoemt dan verander je namelijk de locatie en krijg je dus een foutmelding.

Omdat je een bestand niet meer kan verplaatsen in de Media Library is het ten sterkste aan te raden om gestructureerd te werk te gaan. Maak dus gebruik van de mappen. Creeer in deze mappen ook weer submappen (bv jaarmappen) zodat je het ook overzichtelijk houdt voor je opvolger (denk aan de karmapunten).

Daarnaast kan je bestanden sorteren op alfabetische volgorde, grootte en datum. Tevens kan je bestanden filteren op datum en type. Met de zoekfunctie kan je door je de Media Library doorzoeken.

Gebruik de Media Library om documenten op te slaan die je op de site wilt plaatsen. Documenten die je voor intern gebruik nodig hebt kun je opslaan op de Wolk.

7.2 Documenten toevoegen

Het is mogelijk om documenten (bv. HR, Statuten) zelf te plaatsen op de website.

  • Ga naar Content > Pages > Add... > Add Document Listing
  • Title: Naam van het menu
  • Status: 'Published' is automatisch aangevinkt. Hierdoor zullen veranderingen aan de site na opslaan meteen zichtbaar op de site. Wanneer je je veranderingen nog niet aan de buitenwereld wilt tonen kun je ervoor kiezen om bovenaan 'Draft' aan te vinken. De veranderingen zullen dan alleen zichtbaar zijn voor de admin.
  • Published from/Expires on: Hier kan je aangeven wanneer het formulier zichtbaar moet zijn op de website. Klik bij 'Published from' op 'today' en daarnaast bij 'Time' op 'now'. Als je wilt aangeven tot wanneer de content zichtbaar moet zijn op de site kan je een uiterste datum aangeven bij 'Expires on'. Dit is niet noodzakelijk.
  • Content: hier zie je een tekstverwerker waar naar believen tekst, afbeeldingen en video invoeren. Zie 2.1 voor uitleg over de tekstverwerker.
  • Show in menus: 'Top Navigation Bar', 'Left hand tree, en 'footer' staan automatisch aangevinkt. Hier hoef je niets aan te veranderen. Vink 'Login required' niet aan.
  • Meta Data: Onder deze tab is het mogelijk om nog tags toe te voegen bij de Documenten. Tevens is het hier mogelijk om de URL en beschrijving aan te passen.
  • Onderaan bij 'Documents' kun je documenten uploaden. Klik hiervoor op het icoontje onder 'Document'. Bestanden die nog niet in de Media Library staan kan je alsnog direct uploaden via de knop rechtsboven. Tekstbestanden die al in de Media Library staan kan je hier selecteren via 'Select' (het blauwe icoontje met pijltje, links vooraan). Wanneer het bestand succesvol is geupload zal er een knop komen met 'document selected'. Als je hierop klikt kan je het geselecteerde document openen. Enkele vereiste is nog dat je een beschrijving van het bestand invult bij 'Description'. Deze beschrijving is uiteindelijk ook te zien op de site.
  • Klik op 'Add another' indien je een extra bestand wilt uploaden.
  • Voer naar eigen inzicht een header image in. Zie 2.5 voor uitleg over headers.

Klik op 'Save' om de veranderingen door te voeren.