Blue 2 Blond Wiki / handleiding showcase

Introductie

Deze wiki is een showcase vanuit Blue 2 Blond, ontwikkeld voor een externe partij waarbij behoefte was aan een lange maar gebruiksvriendelijke handleiding voor hun tool. Hiervoor is een CMS ingezet, waarbij men zelf in staat is om teksten te wijzigen, en daarmee dus nieuwe secties of subsecties toe te voegen en tevens rechten te verdelen.

Het verdelen van rechten, kan op zo een manier, dat daarmee bepaald wordt welke gebruikersgroepen bepaalde informatie/secties te zien krijgen (die logischerwijs wel of niet voor hen van toepassing zijn). De door ons ontwikkelde wiki-module somt vervolgens automatisch de pagina's op hierarchische wijze op, zodat een gebruiker enkel te zien krijgt wat voor hem is ingesteld.

Over Blue 2 Blond

Blue 2 Blond ontwikkelt hoogwaardig maatwerk applicaties middels PHP, op Bootstrap basis om de responsiveness als ook gebruiksvriendelijkheid in de basis te waarborgen. Bovenop Bootstrap is ruimte voor maatwerk, om een applicatie naar huisstijl om te zetten.

Deze pagina is een showcase van een Wiki omgeving naar aanleiding van een portfolio item zoals te vinden op de Blue 2 Blond website.

naar Blue 2 Blond

Over deze wiki

Op normaal/groot (desktop/laptop) scherm, zal de inhoudsopgave van deze wiki rechts uitgelijnd zijn. Op smartphones, wordt standaard de inhoudsopgave getoond, inclusief zijn eerste sub-onderdelen om overzicht te waarborgen.

Op een smartphone zal de inhoudsopgave bovenaan de pagina terug te vinden zijn, in tegenstelling tot desktops/laptops. Op een desktop of laptop zal de inhoudsopgave tijdens het scrollen, rechtsbovenin beeld blijven, om twee redenen:
  • ter indicatie waar je je op het moment van scrollen bevindt
  • om eenvoudig, tijdens het scrollen, snel naar andere hoofdsecties, of naar andere subsectie binnen hetzelfde onderdeel te springen.

Naast het benadrukken van de (sub)sectie dat bekeken wordt, wordt de titel van de hoofdsectie ook te allen tijde bovenin beeld gebracht, welke bovenin blijft staan tijd.

Zoeken in de wiki

Naast een inhoudsopgave, is er een andere optie geïntroduceerd om snel tot de gewenste informatie te komen. Je kunt spatie gescheiden, trefwoorden invullen waar je informatie over wilt. Hierbij zullen in de inhoudsopgave, automatisch enkel de opties overblijven welke overeenkomsten heeft met de ingevulde trefwoorden.
Daarnaast wordt ter verduidelijking, eventuele spatiegescheiden trefwoorden tevens met geel achtergrond gemarkeerd in de gehele wiki/handleiding.

Scherm onderdelen

Hieronder staan terugkerende scherm onderdelen toegelicht. Denk hierbij aan kleine componenten als knoppen, notificaties en iconen, maar ook grotere onderdelen / secties als formulieren en tabellen / lijsten.

Componenten

knoppen buttons meldingen notificaties alerts iconen icons

In deze omgeving komen knoppen, meldingen en iconen op uniforme wijze terug op elke pagina. Hierbij komen knoppen als ook meldingen in specifieke kleurstelling terug, om de achterliggende actie (in geval van knoppen) of het type boodschap (in geval van meldingen) consequent en herkenbaar te houden. Hieronder worden ze verder toegelicht.

Knoppen

Actieknoppen behorende bij een scherm, zijn veelal rechts uitgelijnd. Indien een bepaalde scherm en bijbehorende gegevens (bijvoorbeeld: bericht) gewijzigd kan worden, zullen de knoppen die tot zo een actie leiden, steeds ten opzicht van de titel, rechts uitgelijnd zijn.
Daarnaast zijn knoppen ook terug te vinden om tot andere acties te leiden, zoals het opslaan van een formulier, actie bevestigen of uitloggen. Hieronder zijn de verschillende algemene betekenissen toegelicht.

Knoppen kunnen voorzien van tekst weergegeven worden, soms in combinatie met iconen, en soms bevat een knop ook enkel een icoon. Vooral op smartphones, zullen knoppen dusdanig gecomprimeerd worden, dat er enkel een icoon getoond wordt binnen de knop. Meer over de betekenissen van iconen, vind in het onderdeel iconen.

wit een klik op deze knop, zal u op dezelfde pagina houden en tovert in de meeste gevallen een uitklap-navigatie/blok op het scherm
licht blauw een klik op deze knop, brengt u tot een andere pagina (bijvoorbeeld, bericht bekijken)
donker blauw een klik op deze knop, heeft als gevolg dat er een actie wordt uitgevoerd (bijvoorbeeld, document uploaden of nieuwe sectie openen)
oranje een klik op deze knop, gaat een actie uitvoeren waarbij aandacht vereist is (bijvoorbeeld, downloaden of openstaande winkelwagen)
rood een klik op deze knop, gaat een kritieke actie uitvoeren (bijvoorbeeld, bestelling plaatsen of uitloggen)
groen een klik op deze knop, laat primair formulier gegevens verifieren/opslaan (bijvoorbeeld een bericht versturen)

Voor de volledigheid een voorbeeld van een knop met icoon en tekst. Zo een knop zal je naar een formulier leiden, waarmee een nieuw entiteit (bericht, bestelling) toegevoegd kan worden:

toevoegen

Meldingen

De meeste acties zullen gevolgd worden door notificaties, gehuld in 4 mogelijke kleuren. Een tweetal (groen en oranje) zullen daarbij met regelmaat verschijnen. De meldingen zijn bedoeld om aan te geven of een uitgevoerde actie wel of niet gelukt is, inclusief verdere feedback indien van toepassing. Hieronder zijn de mogelijke type notificaties toegelicht, inclusief hun kleur.

Een groene notificatie, geeft aan dat formulier-gegevens correct opgeslagen zijn, of gegevens (bericht of bestelling) correct verstuurd zijn

Een lichtblauwe notificatie, betekent dat er een informatieve medeling wordt gedaan, waar niet direct op geacteerd hoeft te worden.

Een oranje notificatie, geeft aan dat er bij het versturen/opslaan, gegevens aangevuld of gecorrigeerd moet worden.
Ook wanneer er in schermen, geen resultaten gevonden zijn, of wanneer u in een proces geen toegang heeft, kan dit in middels een oranje notificatie worden meegedeeld.

Een rode notificatie, geeft aan dat een opgevraagde entiteit (bijvoorbeeld bericht of product) niet gevonden kon worden.

Iconen

Gepoogd is om de iconen zoveel mogelijk voor zich te laten spreken, en vaak worden iconen vergezeld met direct zichtbare beschrijving, of soms verschijnt een beschrijving indien je er met de muiscursor over beweegt. Op een smartphone is dit minder het geval, doordat knoppen, voorzien van iconen, als het ware gecomprimeerd worden om in beeld te passen om alsnog meerdere verticaal uitgelijnde iconen mogelijk te maken.

Desalniettemin, is hieronder een lijst van iconen terug te vinden die herhaald terug zullen of kunnen komen door deze applicatie.

navigatie of (aanvullende) opties naar voren halen
geeft aan dat er een mogelijkheid tot sorteren is (voornamelijk in combinatie met kolommen binnen een tabel)
geeft binnen een tabel-kolom aan dat er sprake is van een actieve sortering, oplopend, dus hoogste (1, of beginnend bij a), of in geval van datum oudste bovenaan
geeft binnen een tabel-kolom aan dat er sprake is van een actieve sortering, aflopend, dus hoogste (9, of beginnend bij z), of in geval van datum nieuwste bovenaan
buiten tabellen om, betekent dit: meer (aanvullende) opties naar voren halen
nieuwe rij/gegevens toevoegen
data/achterliggende pagina bekijken
data/achterliggende pagina wijzigen
rechten / toegang / wachtwoord beheren
gegeven / rij verwijderen uit lijst
scherm of tekst-sectie sluiten
data/achterliggende pagina verwijderen
/ document of lijst downloaden
/ document of lijst uploaden
betreft organisatie/afnemer
betreft organisatie/leverancier
formulier gegevens opslaan
formulier/mail versturen (of geeft aan, dat er sprake is van een verstuur-actie)
pagina verversen (eventueel inclusief opslaan van huidige formulier-gegevens)
filter raadplegen/tevoorschijn halen om specifiek te kunnen zoeken in lijsten
informatie inzien
/ toelichting inzien
gebruiker, of gebruiker gegevens
persoon toevoegen (als ontvanger aan bericht)
reacties-aanduiding
bericht beantwoorden / reageren
alle beantwoorden
bijlagen (m.n. bij een bericht)
akkoord / voltooid / bekeken
(actie) annuleren
locatie aanduiding
mail / email-adres aanduiding
telefoon nummer / aanduiding
faxnummer
website
opmaak / kleurstelling / logo
/ instellingen / voorkeuren

Secties

formulieren invoerveld tab-menu tabellen overzicht lijsten sorteren ordenen

Tabellen / overzichts lijsten

De hoofdschermen van de verschillende onderdelen binnen deze applicatie, worden gedomineerd door tabellen ofwel lijsten, waarin een overzicht van bijbehorende data opgevraagd kan worden. Deze tabellen zijn onderverdeeld in kolommen, waarbij gesorteerd kan worden op de data die in deze kolommen staan.

Rechts uitgelijnd van elk kolom-kop, is een sorteer icoon () terug te vinden, indien er op de betreffende kolom gesorteerd kan worden. Indien er reeds een sprake is van een actieve sortering, wordt dit aangegeven met een ander icoon. Namelijk een icoon dat staat voor oplopende sorterings-wijze (), of aflopende sorterings-wijze ().

De kolommen worden nummeriek/op data geordend, of -zoals het met een mooi woord heet- lexicografisch, oftewel, op alfabet.

Smartphones en tablets
Hoe er gesorteerd is, is niet alleen af te leiden uit de sorterings-icoon en bijbehorende data, maar is veelal ook op te maken uit de hoofd-sorteer knop, waarmee ook gesorteerd kan worden. Doordat er op smartphones beperkte ruimte is, zal informatie soms dusdanig in elkaar schuiven, dat bepaalde secundaire kolommen en bijbehorende data onzichtbaar wordt.

Om deze reden is een enkele sorteer-knop terug te vinden, waarmee dezelfde acties uitgevoerd kunnen worden, namelijk oplopend en aflopend sorteren op bepaalde kolommen die daarvoor in aanmerking komen. Zie deze knop in actie in onderstaande schermafbeelding:

Door het wegvallen van kolommen in deze opzet, zou er door smartphone gebruikers niet meer gesorteerd kunnen worden op specifieke kolommen. De in de schermafbeelding omkaderde knop, maakt dit alsnog mogelijk. Via deze tweedelige knop, kan via de linkerkant een nieuwe kolom worden gekozen om op te sorteren ofwel ordenen.

Via de rechterzijde van deze tweedelige knop, kan binnen dezelfde knop, op omgekeerde wijze gesorteerd worden.Indien er dus reeds aflopend gesorteerd is, zorgt een druk op het rechter-deel van de knop er voor dat er oplopend gesorteerd wordt, en vice versa.
Ook geeft de rechterzijde van de tweedelige knop aan, hoe er op dat moment gesorteerd is. Hierbij wordt niet alleen alfabetische of numerieke sortering (voor getallen en ook datum/tijden) benadrukt, maar ook de volgorde (als de z boven de a staat, is er bijvoorbeeld alfabetisch aflopend gesorteerd, aangegeven middels dit icoon: )

Formulieren

Door deze applicatie zijn steeds formulieren met invoervelden en bijbehorende onderdelen terug te vinden. Alhoewel deze van desktop/laptop tot smartphone appareten verschillen in positionering, is de achterliggende gedachte als ook achterliggende functionaliteit steeds identiek.

Desktop computers en laptops
Formulieren komen veelal op uniforme wijze terug. De invoervelden staan rechts uitgelijnd, terwijl de betekenis/uitleg van de gevraagde informatie links uitgelijnd staat. Deze weergave verschilt zodra je een telefoon gebruikt.

Steeds zullen de groene knoppen die een opslaan-actie bevestigen, onder het formulier rechts uitgelijnd zijn. Meerendeel van de knoppen zullen steeds rechts uitgelijnd zijn, alhoewel er in sommige gevallen uitzonderingen zijn (zoals document openen of downloaden binnen de documenten module).

Sommige formulieren zullen vanwege de vele opties, onderverdeeld zijn in meerdere vlakken. Een voorveeld is de profielpagina. Steeds is er één vlak tegelijk zichtbaar, waarbij via een horizontale tab-navigatie, de andere vlakken per keer tevoorschijn zijn te toveren. Dit gebeurt dan veelal direct, zonder dat de pagina herladen hoeft te worden, om de gebruiksvriendelijkheid tegemoet te komen.

Smartphones en tablets
Formuliervelden en bijbehorende uitleg zullen op een smartphone en sommige tablets (met kleinere resoluties of in portait/verticale modus) steeds onder elkaar schuiven om de ruimte goed te benutten. Dit gebeurt vanwege de beperkte ruimte in de breedte, om de bruikbaarheid (ruimte om te zien wat iemand typt) te behouden.

De tab-navigaties, zoals bij je profiel, die op een desktop of laptop computer horizontaal uitgelijnd zal zijn, worden op een smartphone ook verticaal gepositioneerd, waarbij duidelijk benadrukt wordt welke tab en daarmee vlak op dat moment actief is.

Inloggen

inloggen wachtwoord vergeten emailadres

Inlogscherm

Het eerste scherm dat u ziet wanneer u naar deze applicatie gaat, is het inlogscherm. Vul hier uw e-mailadres en wachtwoord in. Indien u ingelogd wilt blijven, swiped u het naastgelegen grijze icoontje naar rechts totdat deze groen kleurt.

login

Voordat u kunt inloggen moet u weten wat uw geregistreerde e-mailadres en wachtwoord zijn. Deze zijn u bij registratie opgestuurd.

Wachtwoord vergeten?

Dit is geen enkel probleem. Klik op het WW-vergeten icoon rechtsbovenin en vul uw e-mailadres in. Uw ontvangt spoedig een mail waarin u een nieuw wachtwoord kunt aanvragen.

E-mail-adres (en wachtwoord) vergeten?

Klik op het wachtwoord-vergeten icoon. Onze database kan alleen e-mailadressen herkennen die ook werkelijk bij ons geregistreerd staan. Test met de verschillende e-mailadressen die u heeft. Is geen van allen een match? Neem dan contact met ons op en wij helpen u graag verder.

Dashboard

berichten bestellingen agenda documenten wiki

Het Dashboard is de Homepagina van deze applicatie. Vanuit deze paginas kunt u alle modules inzien en met 1 klik op de knop naar de desgewenste module kunt gaan.

Deze ziet er als volgt uit op uw Dekstop/PC:


dashboard pc

Zo ziet het Dashboard eruit op een Tablet/IPad


Zo ziet het Dashboard eruit op uw mobiel.
Dashboard mobiel

Een korte uitleg van de modules:

Berichten:

Bij vragen aan de leveranciers en vice versa kunt u hier een bericht plaatsen en terugvinden. Binnen berichten staat ook meteen overzicht van al uw geplaatste berichten en de reacties erop. Wilt u meer informatie over berichten? Klik dan hier.

Bestellingen:

Wilt u een bestelling plaatsen? Of bestellingen inzien? Dan kunt u dat binnen bestellingen doen. Wilt u meer informatie over bestellingen? Klik dan hier.

Agenda:

De agenda-module helpt u om overzicht te houden in de (te plaatsen) bestellingen en afspraken. Vanuit uw organisatie kunnen er afspraken ingepland worden. Wilt u meer informatie over agenda? Klik dan hier.

Documenten:

Binnen documenten kunt u alle relevante documenten vinden voor uw organisatie binnen deze applicatie, zoals prijzen en instructies. Wilt u meer informatie over Documenten? Klik dan hier.

Topnavigatie

In de topnavigatie vindt u te allen tijde een snel overzicht van de verschillende functies die deze applicatie u aanbiedt en de mogelijkheid naar deze modules te gaan. Er is verschil tussen de mobiele weergave en de weergave die u op de PC ziet.

Topnavigatie Links

Logo's

Geheel aan de linkerbovenkant vind u het logo van deze tool, applicatie, daarnaast het logo van het whitelabel dat u deze tool aanbiedt, en daarna het logo van uw eigen bij aangesloten Organisatie

logo pc navigaties
Functionaliteiten Logo's
  • Klikt u op de tweede logo, in dit geval SEISO, dan wordt u doorgestuurd naar het Dashboard. Zo kunt u altijd snel terug naar de Home-pagina.
  • Klikt u op het derde logo, het logo van de organisatie waarbij u aangesloten bent en ik dit voorbeeld "Your Logo Here" dan gebeurt er normaal helemaal niks. Behalve als u bent aangesloten bij meerdere Hoofdorganisaties. Dan kunt door hier van Organisatie wisselen. (lees meer over organisatie wisselen)

Topnavigatie rechts:

topnav rechts

Uw naam met profielfoto

Hier kunt u uw profiel beheren, wachtwoord wijzigen en uitloggen. U doet dit door hierop te klikken (zie: Profiel beheren)
profiel

Icoon geschiedenis

Binnen de huidige sessie wordt de geschiedenis bijgehouden voor bezochte pagina's binnen deze applicatie. Zo kunt u gemakkelijk terug naar uw eerder bezochte pagina's. U kunt hier ook kiezen deze geschiedenis te legen. Dit gebeurt sowieso wanneer u uitlogt of uw browser afsluit, maar u kunt ook binnen uw huidige sessie besluiten de geschiedenis te verwijderen. U doet dit door op het uitgeklapte icoon "Geschiedenis legen" te klikken.
geschiedenis

Icoon Help Mij.

Via het Reddingsboei-icoon, komt u in een formulier terecht waar u snel in contact kan komen met onze Helpdesk. Uw e-mailadres is automatisch voor u ingevoerd, u hoeft slechts het onderwerp (niet verplicht) en een beschrijving van uw vraag te noteren. Onder onderwerp vind u een balk met 3 kleuren, hier kunt u de urgentie waarmee uw vraag behandeld moet worden aangeven.
  • Rood/Roze staat voor urgentie HOOG,
  • Aquagroen voor urgentie MIDDEL,
  • Blauw voor urgentie LAAG.
Helpdesk

Taalkeuze

U kunt hier keuze maken in welke taal u deze applicatie wilt gebruiken. De keuze bestaat uit de talen Nederlands (standaard) of Engels. U kunt de geweste taalkeuze selecteren door erop te klikken.
taalkeuze

Icoon Volledig Scherm

Indien u deze applicatie op volledig scherm wilt bekijken/gebruiken, klikt u op dit icoon. Wilt u weer uit het volledig scherm? Klik dan op uw toetsenbord op ESC. Deze optie is enkel beschikbaar op grotere schermen.

Uw profiel

Uw profiel is de overzichtspagina waarin u uw eigen profiel kunt instellen en wijzigen naar uw wensen. Denk hierbij aan uw gegevens, wachtwoord, profielfoto en pagina weergave binnen deze applicatie.
profiel
U vindt uw profiel door rechtsbovenin de topnavigatie op uw naam te klikken. Er verschijnt nu een uitklapmenu. Klik op wat u aan wilt passen. Er opent nu een nieuwe pagina. Desktop Profiel

De nieuwe pagina ziet er als volgt uit op de PC/Desktop versie. Voor de rest van dit Profieluitleg zal gebruik worden gemaakt van de Mobiele Weergave. De functionaliteiten zijn exact hetzelfde, alleen de opmaak is iets anders. U kunt naar verschillende tabs gaan door er op te klikken.

Gebruikersinformatie

Hier kunt u uw persoonlijke gegevens aanvullen of wijzigen zoals uw naam, en e-mail.
Vergeet niet om eventuele wijzigingen op te slaan.

Gebruikersinfo

Profielfoto

Binnen profielfo kunt u een foto van uzelf of uw bedrijf in jpg of jpeg formaat uploaden. Deze afbeelding zal zichtbaar zijn wanneer u inlogt, bij berichten die u plaatst en rechtsbovenin het scherm wanneer u bent ingelogd.


U doet dit als volgt:
  • Klik op de afbeelding,
  • Er verschijnen nu 2 iconen. Klik op het uploadicoon (blauw, met het pijltje naar boven)
  • U kunt nu een foto vanaf uw computer/telefoon selecteren. Zit u op mobiel? Dan kunt u ook kiezen om een foto van uzelf te maken.
  • U krijgt nu rechts in beeld een preview van uw profielfoto te zien.
  • Wilt u de foto bijsnijden? Klik op het schaaricoon.
  • Is alles naar wens geupload? Klik dan op opslaan. Uw profielfoto is gewijzigd.
U kunt uw profielfoto altijd wijzigen of verwijderen.
  • Om de foto te verwijderen, klikt u op het prullenbak-icoon wanneer u op de afbeelding klikt.
  • Toch spijt van het verwijderen van de foto? Klik op "ongedaan maken".
  • Vergeet niet om uw wijzigingen altijd op te slaan.

Voorkeuren

Voorkeuren biedt u de mogelijkheid om binnen deze applicatie uw persoonlijke voorkeuren in te stellen en te wijzigen.

voorkeuren

Wat kunnen deze instellingen voor u betekenen?
  • Rijen per Pagina? U kunt hier kiezen hoeveel rijen/onderwerpen u wilt zien per pagina, bijvoorbeeld binnen berichten of bestellingen.
  • Kies taal ? Geef hier uw taalvoorkeur op. U heeft keuze voor Nederlands of Engels
  • Datum weergave ? Alle mogelijke vormen van data weergave worden ondersteund, kies uw voorkeur.
  • Fixed Koptext ? Wanneer u op de website deze applicatie met een pagina naar beneden gaat, blijft de topnavigatie (de bovenste balk waarin berichten/bestellingen/agenda etc in staat) ten alle tijden boven in beeld. Deze optie staat standaard aan. Vind u het vervelend dat de balk in beeld blijft, dan kunt u het hier uitzetten. Klik op het icoon, zodat deze op rood gaat staan.
  • Onthouden e-mailadres ? U kunt hier bepalen of u bij elke inlog opnieuw uw e-mailadres+ wachtwoord wilt invullen of dat uw e-mailadres standaard onthouden wordt en alleen uw wachtwoord ingevuld hoeft te worden bij het inloggen. Optie e-mail onthouden staat standaard aan. Om het uit te zetten klikt u op het icoon, zodat deze op rood gaat staan.

Modules

Hier kunt u persoonlijke aanpassingen doorvoeren voor de volgende modules:

Agenda Module:

  • Agenda start dag ? U kunt hier bepalen op welke dag u de voorkeur heeft dat de agenda een nieuwe week begint.
  • Agenda Modus ? Kies hier uw voorkeursweergave van de Agenda, wilt u het liefst per dag, per week of per maand de agenda overzien.
  • Agenda Zichtbaarheid ? Wilt u liever de agenda in een overview zien. Klik dan op het linkericoon. Voorkeur voor een textueel overzicht? Klik op het rechtericoon.

Berichten Module:

  • Antwoord volgorde ? Wanneer u in een berichtenconversatie zit, kunt u bepalen of u het meest recente antwoord bovenaan of onderaan de berichtenreeks ziet.
  • Eigen antwoord kleur ? Binnen Berichten kunt u de kleur van uw geschreven berichten wijzigen. Deze kleur is alleen zichtbaar voor u.
  • Status Indicatie? U kunt hier kiezen of u de status indicatie van een bericht liever met tekst ziet of met iconen.

Wachtwoord

Uw wachtwoord wijzigen doet u door uw oude wachtwoord boven in te vullen. Daarna kiest u uw gewenste nieuwe wachtwoord. Het icoontje aan de zijkant geeft een indicatie hoe veilig uw gekozen wachtwoord is. Dit is slechts een suggestie en niet verplicht.
Wanneer u uw nieuwe wachtwoord tweemaal identiek heeft opgeschreven, drukt u op opslaan. Uw wachtwoord is nu gewijzigd.

Uitloggen

Om uit te loggen binnnen deze applicatie klikt u op uw profielfoto/naam. Wanneer de uitklap verschijnt, ziet u ook de optie uitloggen.

Klik hierop, en u bent uitgelogd.

uitloggen

Beheer

Beheer is alleen zichtbaar voor specifieke gebruikers die rechten hebben om zaken binnen deze applicatie aan te passen. Op korte termijn zal dit alleen Admin zijn.

Pagina's

Hier vindt u alle pagina's die bestaan binnen deze applicatie. Pagina's zijn onderverdeeld in hoofdpagina's, die tevens in de "Hoofdnavigatie" terug te vinden zijn. Bijvoorbeeld "Beheer".

Hoofdpagina's kunnen ook Subpagina's aan zich verbonden hebben. Binnen beheer zijn er bijvoorbeeld 12 Subpagina's. Deze zijn zichtbaar op de website onder de uitklap van "Beheer". Voorbeelden van subpagina's binnen "Beheer" zijn: Pagina's, Gebruikers, Rechten.

Let op! Zowel Hoofd- als Subpagina's kunnen een module hebben. Met een module heeft de programmeur ervoor gezorgd dat een pagina bepaalde functies kan uitvoeren. Wanneer er een module gekoppeld is aan een pagina, kan deze niet gewijzigd worden. Eventuele tekst toevoegingen zullen worden overschreven.

Pagina Overzicht

Dit is het volledige overzicht van alle webpagina's in deze applicatie, zowel de Hoofdpagina's als de onderliggende Subpagina's. Dit ziet er als volgt uit:

U kunt hiermee de volgende gegevens inzien en eventueel wijzigen:

Titel:
Hier staan de titels van de verschillende hoofdpagina's. Wanneer u hier op klikt gaat u naar de desbetreffende pagina. U kunt geen wijzigingen doorvoeren door op de titel te klikken.

Subpagina's:
Wanneer er geen subpagina's aan de hoofdtitel verbonden zijn, staat hier het cijfer 0 (subpagina's). Indien er wel subpagina's aanwezig zijn, staat het aantal subpagina's hier aangegeven. Bijvoorbeeld 12 subpagina's voor "beheer". Wanneer op dit cijfer wordt geklikt, komt u in een overzichtspagina van deze subpagina's. Voor meer informatie, lees: subpagina's beheren en toevoegen

Modules:
U ziet hier welke modules aan de pagina's verbonden zijn. Indien er een module aan een pagina is verbonden, kunt u deze niet wijzigen.

Bijgewerkt:
U kunt hier zijn op welke datum en tijd de pagina voor het laatst gewijzigd/bijgewerkt is.

Actief:
  • Ja : De pagina is toegankelijk
  • Nee: De pagina staat non-actief en is daardoor door niemand toegankelijk.

Openbaar:
Dit specificeert voor wie een actieve pagina toegankelijk is.
  • Groen icoon: de pagina is toegankelijk voor iedereen, ongeacht of iemand is ingelogd.
  • Rood icoon: de pagina is enkel toegankelijk voor mensen die zijn ingelogd en één van hun gebruikersrollen overeenkomt met de rollen die zijn toegekend aan deze pagina.

Opties:
Klik op het "hamburger" icoon, er verschijnen nu opties om de pagina te:
  • Bekijken: U kunt hiermee de desbetreffende pagina bekijken.
  • Zichtbaar: Hiermee kunt u bepalen of de pagina in de topnavigatie staat/komt te staan. Zichtbaar betekent dat de pagina wordt getoond in de Topnavigatie en Dashboard. Bij onzichtbaar gebeurt beide niet. U wijzigt de status op het icoon zelf te klikken. U zult dan zien dat de tekst binnen opties naar "onzichtbaar/zichtbaar" is gewijzigd.
  • Wijzigen: U kunt hiermee de pagina wijzigen. Let op: Indien er een module aan de pagina gekoppeld is, wordt eventuele opgegeven tekst genegeerd en overschreven door de module. Dit werkt dus slechts voor pagina's zonder module. Lees hier over hoe u een pagina kunt wijzigen.
  • Kopiëren: hiermee kopieert u de gehele pagina, inclusief tekst , toegestane gebruikers en bijbehorende modules. Deze verschijnt hierna in dit pagina-overzicht, en u kunt deze hierna wijzigen door gebruik te maken van de "wijzigen" functie/
  • Rechten: Hiermee kunt u de rechten inzien en wijzigen van wie de pagina kan zien.

Pagina's en Titels Wijzigen

U kunt slechts informatieve pagina's wijzigen, dit zijn pagina's waaraan geen module is gekoppeld. U doet dit als volgt:
  • zoek de gewenste pagina in het Pagina Overzicht.
  • Klik op het "hamburger-icoon" onder opties.
  • Klik op wijzigen.
Beschrijving (Editor)
Binnen beschrijving/editor kunt u 3 dingen wijzigen of instellen binnen de pagina.

Titel aanpassen: (beschikbaar voor pagina's met en zonder modules)

U kunt hier de titel van de pagina aanpassen. Vergeet niet om uw wijziging op te slaan.

Icoon titel aanpassen: (beschikbaar voor pagina's met en zonder modules

U kunt hier het icoon dat naast de titel van de pagina wordt getoond instellen of wijzigen.
Dit is alleen van toepassing bij Hoofdpagina's. De gekoppelde icoon wordt namelijk alleen gebruikt in de navigatiebalk.

Icoon wijzigen of instellen doet u dit als volgt:
  • Klik op het icoon naast de titel (indien er geen icoon is toegevoegd ziet deze eruit als een lege bladzijde)
  • Er verschijnen nu een hele hoop mogelijke iconen, de iconenselector.
  • U selecteert een icoon door in het Engels te zoeken naar een passend icoon of door de lijst te bladeren.
  • Bijvoorbeeld: voor een pagina speciaal voor leveranciers zoekt u naar: truck.
  • Wanneer het juiste icoon is geselecteerd klikt u nogmaals op de iconen-selector.
  • Deze sluit nu af en uw icoon is ingesteld.
  • Vergeet niet om op te slaan om uw wijziging definitief te maken.

Tekst (en afbeeldingen) aanpassen: (alleen beschikbaar voor pagina zonder modules)

Dit is de tekst-editor, hier kunt u de teksten, tabellen, links en afbeeldingen invoeren en wijzigen van een informatieve pagina (en subpagina). De editor lijkt qua functionaliteit erg op Word en werkt ook in veel zaken hetzelfde. U kunt bijvoorbeeld tekst onderstrepen, dikgedrukt maken. bepalen waar de tekst zit in de pagina moet bevinden (links, rechts, midden etc.) Dit alles is hetzelfde als Word.

Er zijn enkele zaken waar u op moet letten, en een korte uitleg van de functies.
  • Icoon Maximaliseren: Hiermee vult de editor het gehele scherm, voor meer overzicht tijdens het schrijven/ wijzigen van de gewenste tekst.
  • Broncode: hier ziet u de HTML/CSS die de tekst heeft.

Belangrijk, indien u een tekst wilt plakken zijn er 3 iconen binnen deze editor. Plak via deze knoppen tekst, en niet met CTRL-V, dan raakt de opmaak van de webpaginan de war.

  1. Icoon 1. Hiervan gebruik maken is af te raden, dit omdat de code van de opmaak van een te plakken tekst mee gaat. Dit kan voor problemen zorgen in hoe het uiteindelijk op de website getoond wordt.
  2. Icoon 2 . Plakken als platte tekst. Dit is prima, hiermee verdwijnt alle achterliggende opmaak.
  3. Icoon 3. Plakken vanuit Word. Kan ook gebruikt worden, hiermee wordt de opmaak omgezet in een formaat waar de webbrowser mee kan werken.
  • Pijltjes: Hiermee kunt u wijzigien ongedaan maken.
  • Link toevoegen. Hiermee kunt u een link toevoegen binnen uw pagina. Lees hier meer over.
  • Afbeelding toevoegen: Hiermee kunt u een link toevoegen binnen uw pagina. Lees hier meer over.
  • Horizontale lijn invoeren: plaatst een horizontale lijn in de tekst. Kan gebruikt worden om duidelijk onderschijdt te maken tussen blokken tekst of afbeeldingen.
  • Speciaal teken invoeren: snelle overzichtslijst van speciale tekens om toe te voegen aan de teksten.
  • Stijl: hoeft niet gebruikt te worden.
  • Opmaak: onder opmaak staan de standaard stijlen van de website van deze applicatie gekoppeld. Tip is om bij Alinea titels en dergelijke gebruik te maken van Opmaak kop 2 of 3.
  • Lettergrote, wordt over het algemeen standaard in de stijl van deze applicatie geschreven, en hoeft niet worden gebruikt. Mag natuurlijk wel.
Afbeelding toevoegen
Om een afbeelding aan uw te schrijven webpagina toe te voegen klik je op het afbeelding icoon. Om een afbeelding toe te voegen zul je hem eerst moeten selecteren (en wellicht eerst uploaden). Klik hiervoor op de button "Bladeren op Server".

Je komt nu in de Filemanager. Deze werkt als volgt:

Om een bestand te uploaden:

U kunt kiezen of u alle bestanden op dezelfde plek wilt zetten of ze wil orderen in mappen. Voor beter overzicht is de aan te raden methode om mappen te creëren. Indien dit gewenst is moet u dit doen voordat u de afbeeldingen upload.

Map aanmaken :
Klik op het groene + icoon rechtsbovenin de Filemanager. Maak hier een map-naam aan. Bijvoorbeeld: Testmap. Klik op toevoegen. De map is nu aangemaakt.

Map selecteren:
Wanneer je klikt op het icoon linksbovenin de Filemanager, dan verschijnt er een uitklap met de aanwezige mappen. Wanneer je op de naam van de map klikt, bijvoorbeeld "Testmap", dan zit u vanaf dat moment in goede map voor de upload of om de daar geüploade bestanden te zien/selecteren.

Map verwijderen.
Ga via het icoon linksbovenin de Filmanager naar mapoverzicht. Ga met je muis over de te verwijderen map heen, er verschijnt nu een rood kruisje. Klik hierop, en u kunt de map verwijderen. U kunt slechts de map verwijderen wanneer alle afbeeldingen in de map reeds verwijderd zijn.

Afbeelding uploaden:
Selecteer indien u de afbeeling in een map wilt uploaden eerst de juiste map. Klik dan op het groene upload-icoon. Hier klikt u op de button "Bestand Kiezen". U kunt de gewenste afbeelding nu vanaf u computer selecteren. Toegestane extensies zijn: gif, jpg, jpeg, png.

U kunt meerdere afbeeldingen tegelijk uploaden. U moet hiervoor wel elke keer de button "Bestand kiezen" voor gebruiken.

Afbeelding Selecteren.
Wanneer de afbeelding geüpload is, kunt u deze selecteren om toe te voegen aan uw webpagina door te klikken op het groene + icoon naast de titel van de geüploade afbeelding.

U heeft nu de afbeelding geselecteerd. U komt weer terug in onderstaand scherm (zie afbeelding).

Hier kunt u de afbeelding aanpassen voordat deze op de webpagina wordt geplaatst.
Bij alle wijzigingen kunt u meteen een voorbeeld zien wat de afbeelding gaat "doen" in de webpagina.

URL: de link naar de afbeelding. Wordt automatisch ingevuld wanneer er een afbeelding is geselecteerd.
Alternatieve tekst: Dit is de tekst die iemand te zien krijgt wanneer de afbeelding niet werkt. Tevens wordt deze tekst gebruikt door screenreaders (programma's die webpagina's voorlezen aan bijvoorbeeld blinden) Invullen is optioneel.

Breedte&Hoogte: hier kan de grootte van de afbeelding op de webpagina worden bepaald. Afbeelding heeft standaard de eigen hoogte en breedte, maar dit kan indien gewenst aangepast worden.

Rand: Hiermee wordt er een grijze rand om de gehele afbeelding gezet. De tekst op de webpagina kan nu niet in de buurt van de rand komen. Behalve als u graag een grijze rond om de afbeelding wilt, niet de aan te raden methode.

Hspace: staat voor horizontale ruimte. Hiermee pas je de afstand op de horizontale lijn de afstand tussen tekst en afbeelding aan.
Vspace. : Zelfde als bovenstaande, maar dan voor de verticale lijnen.

Uitlijning: Hiermee bepaalt u waar de afbeelding geplaatst moet worden.
<niet ingevuld> : hiermee gaat de afbeelding op de positie staan waar het typen is opgehouden. Indien dit midden in een zin was, gaat de afbeelding daar op gepositioneerd staan (dit is op te lossen door altijd een enter te plaatsen, en pas daarna naar afbeelding toevoegen te gaan)
Links: Hiermee gaat de afbeelding automatisch links van de tekst staan
Rechts : Hiermee gaat de afbeelding automatisch links van de tekst staan
Link Toevoegen
Hiermee kunt u een link toevoegen binnen de (tekst) pagina. Er zijn verschillende type linken die u kunt maken:


URL: plak de link in de daarvoor bestemde lege balk. U hoeft aan protocol niks te wijzigen, dit doet het programma zelf.
Link naar bestaande pagina: wanneer de link naar een pagina binnen deze applicatie zelf moet leiden, kunt u hier de gewenste pagina selecteren. Het programma vult zelf de link in. (zie afbeelding)
Afbeelding: Hiermee linkt u naar een geüploade afbeelding. Klik op "Afbeelding", selecteer de gewenste afbeelding (of upload deze eerst) . De afbeelding-link wordt automatisch in de balk ingevuld.
Document: Indien u een link naar een document (bijvoorbeeld PDF) wilt toevoegen, klikt u op document. U kunt dan het gewenste document selecteren (of eerst uploaden)


U kunt ook kiezen hoe de link geopend moet worden, u kunt dit aanpassen binnen "Relatie":
Met de standaard functie, genaamd <niet ingevuld>, wordt de link in hetzelfde venster geopend als waar de gebruiker deze op opent. Bij een externe link betekent dit dat ze uit de website van deze applicatie gaan.
Indien "Nieuw Venster" geselecteerd wordt, wordt de link in een nieuw venster/tabblad van de gebruiker geopend. In veel gevallen de aan te raden instelling.
Indien "Fancybox Popup" wordt geselecteerd, dan wordt er binnen de huidige pagina een popup met de desbetreffende link getoond, die ook weer weggeklikt kan worden. Deze instelling is vooral handig voor links naar afbeeldingen en documenten.


Her is af te raden om aan de overige en geavanceerde opties/instellingen binnen linnk toevoegen: URL te komen. Deze zijn overbodig complicerend.


Link-type naar E-mail-adres
Indien de gewenste link een e-mailadres is, kan dat worden aangegeven door via de uitklap van "Link- Type" in plaats van "URL", "E-mail" te selecteren (zie afbeelding)


Dit opent een nieuwe layout voor binnen links: (zie afbeelding)
Bij de lege balk van "e-mailadres" vult u het gewenste e-mailadres in dat u wilt toevoegen. Wanneer hier op geklikt wordt, opent deze automatische in het standaard e-mailprogramma van de gebruiker. Indien gewenst kan er bij een klik op deze link ook automatisch een onderwerp en een tekst ingevuld worden in het e-mailprogramma van de gebruiker, maar dit is zeker niet verplicht.


Kiezen hoe de link getoond wordt binnen de tekst.


Lay-out van de Link:
Er zijn 2 opties om de link in de tekst te tonen:
1. De gehele link toevoegen aan de tekst, bijvoorbeeld http://www.google.nl
Indien dit de gewenste layout is, kunt u gewoon het icoon link toevoegen aanklikken.
2. Een link toevoegen aan een stuk tekst. Bijvoorbeeld door een link te zetten onder Lees Meer..
U doet dit door eerst de tekst waaraan de link toegevoegd moet worden te arceren/selecteren, en daarna pas op het icoon link toevoegen te klikken. Het linkadres wordt hiermee standaard onder de tekst "verstopt"

Subpagina's

Subpagina's werken in essentie hetzelfde als Hoofdpagina's. Paar punten van aandacht:
  • Je vind subpagina(s) door op pagina-overzicht- subpagina's te klikken. Binnen deze subpagina's kun je bestaande subpagina's wijzigen (let op: wanneer er een module verbonden is aan de subpagina kunnen er geen tekst/afbeelding wijzigingen worden gedaan) of nieuwe subpagina's aanmaken.
  • Er kunnen ook weer subpagina's aan subpagina's zijn/worden verbonden. U ziet deze door binnen het subpagina overzicht weer op subpagina te klikken.
  • Wanneer u een tekst schrijft voor een subpagina hoeft u bij de titel geen icoon mee te geven. Dit icoon dient slechts voor de pagina's die zichtbaar zijn in de topnavigatie.

Rechtenstructuur Pagina's.

Niet elke gebruiker heeft dezelfde rechten. U kunt binnen de rechtenstructuur bepalen wie welke pagina's wel of juist niet mag zien en eventueel zelfs wijzigen. Dit werkt als volgt:

Openbaar:
Reguleert of de gebruiker ingelogd moet zijn om de pagina te mogen zien. Bij groen is deze voor iedereen toegankelijk, rood alleen bij inlog. Gezien deze applicatie een gesloten applicatie is, moet het icoon meestal op rood.

Overige Rechtengroepen:
Hier kan ingesteld worden welke groep, welke rechten binnen deze pagina heeft. Dit wordt geregeld binnen de uitklap. Er zijn de momenteel de rechten te vergeven binnen een webpagina:
  • Alle (hiermee heeft de gebruiker alle onderstaande rechten)
  • Bekijken (gebruiker kan pagina zien)
  • Toevoegen (geeft gebruikers het recht zaken zoals documenen, agendapunten, berichten toe te voegen)
  • Wijzigen (kan de pagina wijzigen)
  • Verwijderen (kan de pagina verwijderen)

Te allen tijden moeten de rechten zo ingesteld zijn dat Applicatiebeheer en ADMIN alle rechten hebben. Met de rest de gebruikersrollen kunt u puzzelen. Zo komt het voor dat een documentenbeheerder wel binnen "Documentbeheer" alle rechten mag hebben, maar op de pagina "Homepage" alleen zaken mag bekijken.

Om de gebruikersrollen aan te passen, leest u hier meer.

Gebruikers

Rechten

Binnen Rechten kunt u inzien en eventueel wijzigen welke standaardrangen er beschikbaar zijn voor gebruikers, en welke rechten daar bij horen.

U kunt de Rechtenstructuur als een hiearchisch systeem beschouwen.

Exports

Talen

U kunt hier Taalwijzigingen aanbrengen binnen de website van deze applicatie. U kunt kiezen of u de Nederlandse of Engelse woorden/zinnen wilt wijzigen. Klik op de titel van de te wijzigen taal. Er opent zich nu een nieuw scherm.

U ziet onder "Key" een lange lijst met Engelse woorden. Dit zijn "placeholders", deze standaardtermen worden gebruikt om resultaten uit de database te halen en weer te versturen naar de gebruikers van deze applicatie. Indien gewenst zijn deze Engelse termen binnen de talenmodule in de gewenste Nederlandse of Engelse woorden te vertalen.

U doet dit in het invoerveld. Het komt soms voor dat er leestekens in de te vertalen tekst zijn opgenomen. Deze leestekens moeten niet gewijzigd of verwijderd worden! Ze zijn door de programmeur geschreven en zorgen dat standaard waarden (bijvoorbeeld een naam) in de tekst die de de gebruikers zien worden opgenomen. U kunt om de leestekens heenschrijven en ze indien gewenst binnen hun eigen invoerveld van positie laten veranderen.

Vergeet niet om uw wijzigingen op te slaan. De optie opslaan staat rechts onderaan de pagina.