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.
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.
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.
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.
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.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
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.
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 |
formulieren invoerveld tab-menu tabellen overzicht lijsten sorteren ordenen


inloggen wachtwoord vergeten emailadres


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:










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.


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.
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.
