CMS 4.0 Richtlijnen en Specificaties

CMS 4.0 Richtlijnen en Specificaties   Algemene richtlijnen  Buttons  Linkjes  Zoekknop  Split Buttons  Dropdown Button  Fonts  Schaduw  Veld opbouw  Meldingen  Breakpoints  Pagination  Persistence:  CK­Editor  Preview knop  Media galerij en scope 

   

Algemene richtlijnen Labels  ● Label voor het inputveld. Tekst label rechts uitgelijnd  ● Label bij mobiel boven inputveld. Tekst label links uitgelijnd.    Input  ● Breedte van een veld is op te delen in 3 formaten:  100%, 50% of ⅓ deel van de  beschikbare ruimte.   ● Tekstvelden zijn vooral 100% of 50%.   ● Lijsten zoals radiobuttons of checkbockes mogen ⅓ deel worden als dit met de  labels goed past.    Legend  ● Voor de semantiek belangrijk om de legend te gebruiken bij elke fieldset.   ● Legend een duidelijke semantische omschrijving geven.   ● De legend wordt in het CMS door css verborgen.    Fieldset  ● Semantische html noodzakelijk en gebruiken indien nodig.  

● De opdeling van de formulieren gaan via foundations “accordeon methode” en we  gaan daardoor niet veel met fieldset doen.    Teksten    Textarea   Gebruiken voor tekst zonder tekst­editor opties. Minimale hoogte is 100px.   Bijvoorbeeld: teaser, credits, embedded code    CK­editor  Gebruiken voor tekst met tekst­editor opties.  Tussen de formulieren links uitgelijnd op  gelijke hoogte met input items. De hoogte van een ck­editor is altijd 400px en 100% breed.  Bijvoorbeeld: omschrijvingsveld    Toelichting en uitleg  Tussen de formulieren links uitgelijnd op gelijke hoogte met input items kan uitleg tekst  staan.  De breedte is 80% van de beschikbare ruimte.    Tooltip  Extra tekstuele toelichting bij een bepaalde item door een rollover.     Radio & Search    Input Radio (1 ­ 6 items)  Gebruik maximaal 2 rijen en/of 3 kolommen. Maximaal 6 items.    Example: Ja/nee, Man/Vrouw, Zichtbaarheid    Select (6 ­ 20)  Gebruik minimaal 6, maximaal 20 items.      Search Box ( > 20)   Gebruik bij meer dan 20 items. Bevat helptekst met uitleg over de zoekfunctionaliteit.     

 

  Checkbox  & Selectie    Checkbox (2 ­ 9)  Gebruik maximaal 5 rijen en/of 2 kolommen. Maximaal 10 items.     Selectie­box ( >  9) (selectie box verderuitzoeken en custom kijken)  Gebruik bij meer dan 9 items. Bevat helptekst met uitleg over de zoekfunctionaliteit.     

      Password  Gebruik bij wachtwoorden.  De validatie bevat geen speciale wensen behalve een  minimaal aantal karakters van 1. (Dit voor het gemak van cms gebruiker.)     Datepicker  Gebruiken bij velden met datum en/of tijd.  We gebruiken alleen een datepicker voor de datum, tijd vullen we met de hand in in een  type=time veld. Best of both worlds. Datum&tijd velden zijn dus gecombineerde velden met  elk een eigen foutmelding. Het is overigens ook mogelijk de datum met de hand in te  vullen.  De datepicker opent op de datum van vandaag (tenzij er al een datum is ingevuld  natuurlijk). Hij is namelijk ook vooral handig bij datums die dicht bij vandaag liggen  (“volgende week vrijdag”) en minder bij datums die ver weg liggen. Bij die (een  geboortedatum of pinkpop volgend jaar) weet je namelijk de datum al en kun je die veel  sneller even typen.    Datum[ yyyy­mm­dd ] (Dit is geen geldige datum, vul jaar­maand­dag in (yyyy­mm­dd))   

Datum en tijd [ yyyy­mm­dd ] [ hh:mm ]  (Dit is geen geldige datum, vul jaar­maand­dag in (yyyy­mm­dd))  (Dit is geen geldige datum, vul uren(00­23) en minuten (00­59) in (hh:mm))   

Buttons ● Opslaan knop van een formulier staat altijd boven­  en onderaan het formulier  ● Alle input buttons zijn gelijk van hoogte 24px. Breedte is variabel.  ● Een button begint altijd met een hoofdletter en is een werkwoord.   

Linkjes De linkjes  zien er uit als tekst linkjes met een pijl­icon als er “terug” gegaan wordt in de  hiërarchie. De pijl suggereert waar de locatie zich in de hiërarchie bevind. Ga je terug, is  het pijltje naar links.   

Zoekknop Input veld en knop tegen elkaar plaatsen als ze zich samen op 1 regel bevinden en op  toepassing zijn van elkaar.   Label voor het inputveld is verplicht. Toelicht over zoek mag in de input.   Na submit van de knop kan er bij zoeken    Bijvoorbeeld: zoekveld met zoekknop   

Split Buttons Gebruiken bij combinatie buttons waarbij er meer dan 2 acties mogelijk zijn. Anders de  verschillende buttons naast elkaar tonen. Rechts uitgelijnd met padding ertussen.  Bijvoorbeeld: Opslaan, Opslaan Nieuw item, Opslaan naar overzicht   

Dropdown Button Visueel gelijk aan een button?        

Kleurvalidatie   Betaat uit 3 elementen:   ● # 

# en hoeft niet meer ingevuld te worden 

● 123456  ● [kleurcodevoorbeeld]

de kleurcode   visuele feedback van de kleurcode 

  Via de kleur inputveld  wordt de kleurcode (Hexicode) herkend en gevalideerd.   Validatie melding verkeerde code: Deze kleur is niet bekend, probeer het nogmaals  Validatie melding te weinig karakters: Een kleur bestaat uit 6 karakters. U heeft er 5  ingevuld. (etc)   

Styleguide   Kleuren zijn gedefinieerd in de standaard stylesheet  Tekst is zwart op wit, behalve links en knoppen  Icon set is klaargezet en middels een mixin klaar voor gebruik.  Icons zijn alleen voor buttons, acties. Feedback ("nieuwsbrief verzonden") doen we waar  mogelijk in tekst.    

Fonts Lettertypes: Helvetica, Arial, sans­serif.  Voor sommige titels: botanika, Helvetica, Arial, sans­serif.  Vrijwel alles is 12px.  Behalve sommige titels, die groter zijn.    De basis maat is 12px. Buttons en inputs hebben doorgaans een dubbele grootte (24px).  Witruimte is 3px, 6px of 12px.  Borders zijn 1px.   

Schaduw Onder de elementen die op de achtergrond liggen hebben we een heel subtiele  dropshadow:  box­shadow: 0px 1px 3px 0px rgba(0,0,0,0.2);    Terminologie  Alle labels, button­teksten en overige zinnetjes beginnen met een hoofdletter.  Relaties worden zoveel mogelijk duidelijk uit de visuele hiërarchie. Het is dus niet nodig  om "Evenementen toevoegen" op een button te zetten, "Toevoegen" volstaat en is  duidelijker. 

Buttons hebben als label een werkwoord ("Opslaan", niet "Sla op").  De submit button om wijzigingen op te slaan heeft als label "Opslaan".   

Formulier opbouw Om het voor de gebruiker makkelijk te maken om informatie te vinden en evt. aan te  passen is het belangrijk dat elk formulier een logische opbouw heeft. Wat een logische  opbouw is verschilt per dataset, dus hier volgen alleen handvatten om zo’n indeling te  maken geen voorschrift dat 1­op­1 toe te passen is. Als je hier over nadenkt en probeert  een logische     Er zijn 2 aspecten waar je over na moet denken: volgorde en groepering.   

Volgorde 1. Begin met identificerende velden.   Voorbeeld: bij een inschrijfformulier begin je met voornaam, achternaam en niet met  geboortedatum.  2. Velden worden naar beneden toe steeds minder specifiek.  3. Begin met eenvoudige velden zoals tekst, kleine groepen radio buttons.  4. Plaats complexe velden zoals wysiwyg editors, transfer tool, grote groepen  checkboxes, etc. lager in het formulier.  5. Verwijzingen naar andere content komen als laatst. Denk aan multimedia, tabellen  met gekoppelde data, etc. 

Groepering Groepering gebeurt op 2 niveau’s.  1. Ten eerste plaats je gegevens die direct met elkaar te maken hebben bijelkaar.  Voorbeeld: Geslacht plaats je na voornaam, achternaam en niet na email adres.  2. Lange formulieren kun je opbreken met section dividers. In zo’n section plaats je  groepen velden (vuistregel: minstens 4 velden) die bij elkaar horen. Sections  kunnen dichtgeklapt worden, dus het maakt zin om hier velden in te stoppen die je  bijna nooit nodig hebt (hoe vaak je ze gebruikt is dus een zinnige regel om groepen  te maken, het hoeft niet altijd inhoudelijk te zijn). 

Veld opbouw   Elk veld heeft de volgende opbouw: Label [ Placeholder ] (Melding) Helptekst    ● Het label beschrijft in 1 of 2 steekwoorden *wat* er ingevuld moet worden (e.g. 

"E­mail adres").  ● De placeholder geeft een voorbeeld van hoe dat ingevuld moet worden (e.g.  "[email protected]", "yyyy­mm­dd").  ● De melding beschrijft een eventuele fout ("Dit is geen correct e­mail adres").  ● De helptekst beschrijft in meer woorden het hoe en waarom en kan evt eisen aan  het format verder beschrijven. Dit is echter optioneel en lang niet altijd nuttig. (e.g.  "Een e­mail adres heeft een apestaartje en is maximaal 50 karakters lang".)   

Meldingen   Meldingen worden geformuleerd vanuit de veronderstelling dat als iets mis gaat de schuld  bij het systeem ligt, of dat het systeem een fout constateert in de data. Je meld dus niet dat  de gebruiker iets verkeerd heeft ingevuld, je meld dat wat er is ingevuld niet klopt.  Meldingen vertellen nooit wat een gebruiker moet doen, hooguit verzoeken ze de gebruiker  om iets te doen.  Dus niet: "U moet een geldig e­mail adres invullen"  Maar: "Dit is niet een geldig e­mail adres", "Vul een e­mail adres in", etc.     Foutmeldingen worden als volgt opgebouwd:  1. optioneel: naam of code van het probleem (e.g. "404")  2. probleemstelling (e.g. "De pagina kan niet worden geladen")  3. optioneel: uitleg van het probleem en waardoor het is ontstaan (e.g. "Mogelijk is de  pagina verplaats, of er zit een fout in het adres. Het kan ook een tijdelijk probleem  zijn")  4. wat moet ik nu doen (e.g. "Controleer het adres en probeer het nog een keer")  5. optioneel: button: wat moet het systeem voor mij gaan doen (e.g. "Opnieuw laden")    Overigens geldt deze stijl van melden ook voor positieve meldingen. Als ik op opslaan klik,  verzoek ik het systeem de data op te slaan. Als dat lukt heb ik niet iets goed gedaan (ik  hoef echt geen schouderklopje van een computer) maar is het het systeem gelukt de  bewerking uit te voeren. 

Breakpoints 1. zonder linker menu (als 3.6)  2. met compacter main sectie (nice­to­have)   

Pagination Lijsten hebben pagination onderaan ("centered" in Foundation). 50 resultaten per pagina.    < Vorige  *1* 2 3 4 5 … 99 Volgende >    < Vorige  1 … 8 9 *10* 11 12 … 99 Volgende >   

Persistence: Als je een item van pagina 2 opent, bewerkt en opslaat, en je gaat terug naar de lijst, dan  kom je weer op pagina 2 met dezelfde zoekargumenten.  Als je een blok in of uitvouwt en je bekijkt hetzelfde scherm later of op een ander device,  dan zijn dezelfde blokken nog steeds in of uitgevouwen. Dit is per module: als je een blok  gegevens invouwt bij Voorstellingen, is dit blok bij alle voorstellingen ingevouwen.     

CK-Editor Alleen tekst waarbij tekst ge­edit moet kunnen worden mag een ck­editor bevatten.  Teasers hebben bijvoorbeeld niet altijd een editor nodig. Dit is een korte samenvatting van  de tekst.     Inline editor  Er is een inline editor beschikbaar. Hierdoor ziet de klant niet dat het editable is, pas na  hover. Ook is de preview knop en code knop niet zichtbaar.    Implementatie  De implementatie kan op een DIV of een textearea.    Toolbar  De editor toolbar is zelf samen te stellen.  Onderstaande elementen uitgelicht voor de  default Peppered    ● Format  De headers zitten in een pulldownmenu wat een extra klik en stap is voor de  gebruiker. Er zal zelf code geschreven moeten worden om de 'Opmaak', op te  splitsen in meerdere header knoppen.  ● Bold 

● ● ●

● ● ● ●

●

● ●

●

●

●

●

●

Maak de tekst bold  Italic  Maak de tekst Italic  NumberedList  Een lijst met nummering.  BulletedList  Een boulid list die de gebruiker in de tekst kan toevoegen. Deze boulets images  zijns bij blocks standaard en voor customsites aanpasbaar.  Link & Unlink  Het toevoegen en verwijderen van een link tussen de tekst.  Images  Het toevoegen van een afbeelding tussen de tekst.  SpecialChar  Een bijzonder karakter toevoegen aan de tekst.  Cut  Het verwijderen van tekst dat in de editor geselecteerd is. Is inactief als er geen  tekst is geselecteerd.  Copy  Het kopieren van teskt dat in de editor geselecteerd is. Is inactief als er geen tekst  is geselecteerd.  Table  Het toevoegen van een tabel tussen de tekst.  PasteText  Tekst plakken in de editor als platte tekst. Alle stijling gaat verloren. Nagaan of we  de tekst kunnen aanpassen bij de pop­up van het plakken.  PasteFromWord  Tekst plakken in de edtior uit een Word bestand. inline stijling blijft behouden en list,  en boulitlist, enters en br worden meegenomen.  Source  Knop voor zichtbaarheid in de code voor HTML kenners en voor bugfixes voor  Peppered.  Preview  Een AJAX ­ request moet kunnen met een formcontent. Voorbeeld tonen van de  pagina voor de bezoeker voordat deze live komt te staan. (overleg Remco hoe dit  zou kunnen werken)  Table  Het toevoegen van een tabel tussen de tekst. Mogelijk, mits alle advanced opties  verwijderen.  ShowBlocks 

Elke element krijgt zijn eigen block. Je kunt onderaan de editor zien welk element  elke block heeft. Jammer dat het niet gelijk in de editor zelf zichtbaar is zoals in de  oude versie.    Niet :    x Templates  Voor gedefinieerde lay­out toe te voegen aan een pagina.  Na een aantal test, waarbij de TAB niet werkte. De tekst niet boven­aan centreerde etc.  Geen simpel element.    x Paste  Plakken van tekst in de editor. Dit gaat altijd via een pop­up knip en plak boxjes waarin je  de tekst kan plakken met ctr­c. Indirect een uitlegboxjes omdat je ook direct kan plakken in  de editor met de sneltoets ctr­c. 

Preview knop   1. Preview knop informatie bij ck­editor velden  2. Preview knop bij afbeeldingen en uitsneden­> buiten de scope    1. Preview CK­editor pagina’s (voor informatie pagina’s, nieuws en detailpagina’s)    Per ck­editor kan er een preview pagina geopend worden waarbij de tekst zichtbaar wordt  zoals ingevuld in de ck­editor. Dit is een standaard preview pagina, met de CSS van de  website. Deze laat alleen de content zien niet de website.  Het opent in een nieuwe  dialogbox.    Er is een preview knop meegeleverd bij de ck­editor. Deze zou ideaal zijn om voor te  gebruiken.    Het is een indruk en geen 100% representatie van de pagina. Wat je kan zien is hoe  plaatjes uitlijnen en hoe de enters zich gedragen. De ruimte van de preview pagina kan  breder zijn dan bijvoorbeeld en ruimte van een nieuwsbericht. De  verwachtingsmanagement voor de bezoeker is hierbij belangrijk. Goede feedback en  uitleg.   

● Preview­knop per module en per klant inbouwen  ● Bij elke CK­editor is een preview knop zichtbaar.   ○ uitzondering Nieuwsbrief  ● Verwachtingsmanagement naar de klant (denk aan microcontent, uitleg en tutorials)     

Media galerij en scope   Er mist nog een passage over een centrale plek voor deze afbeeldingen    Nieuwe framework: mediagalerij  Een mediagalerij kan bij een module gebruikt worden en hier kunnen images geupload  worden. Per upload is het mogelijk om meerdere afbeeldingen in 1 keer te downloaden.  Na uploaden kunnen de naam, omschrijving ingevuld worden.    Er zijn meerdere mediagalerijen mogelijk per module..     In de mediagalerij zijn video (embedcode van youtube en vimeo) en afbeeldingen mogelijk  om toe te voegen. Per mediagalerij kan er bepaalde worden welk soort bestanden  geüpload kunnen worden. Dit hangt af van de uiting van de mediagalerij.     PDF en documenten kan straks niet meer via de mediagalerij en gaat via de ck­finder  waar de bestanden gëupload en gelinkt kunnen worden.     Note: Recensie module zal herzien worden.  recensies zijn sowieso niet meer van deze  tijd. Gehele artikelen mogen niet zomaar meer gebruikt worden door copyright  regelingen. Alleen maximaal 10% van een artikel, bijvoorbeeld een quote. Kan dus  beter een tekstveld voor gebruikt worden.    Note: Er is onderzoek nodig bij theaters wat met beeld en geluid willen doen op hun  website.    Nieuwe framework: mediagalerij croptool  Bij een mediagalerij zijn er per afbeelding verschillende varianten mogelijk voor de  verschillende uitingen: Overzichts thumbnail, detailpagina slideshow, narrowcasting  achtergrond etc.  

Deze afbeeldingsvarianten zijn cropbaar.     In de frontendcode geef je de indicator mee, welke de backend afvangt en opslaat zodat  de klant deze afbeelding kan croppen in het cms. Dit is tevens het label voor de thumbnail  in de cropmodule.    Note: Voor Tivoli wordt de croptool functionaliteit nog niet ingebouwd. Dit kan in de  toekomst toegevoegd worden.    Nieuwe framework: mediagalerij croptool & afbeeldingskeuze  Er zal een mogelijkheid komen om tussen verschillende afbeeldingen in de mediagalerij  de “default’ afbeelding te kiezen voor de verschillende uitingen. Zie afbeelding voorstel  hieronder.   

 

    CK­finder     De CK­finder blijft gelijk werken zoals het nu ook werkt bij de FCK­editor.     Werking: Via de CK­editor kan de CK­finder aangeroepen worden. Er kan een foto  geupload worden, eventueel formaat aangepast worden en opgeslagen. De foto is dan  zichtbaar in de editor.  Tevens mogelijk om PDF’s, Doc’s of andere files te uploaden. Per  editor en module kan er bepaald worden welk file geupload kan worden.      Mobiel grid regels html    ● Label beging ALTIJD op een nieuwe regel 100% (12 koloms). Ook al is de fieldset  erachter maar 1 kolom groot.  ● Fieldsets zijn altijd 100% (12 koloms) als er maar 1 op een row bevindt. Zijn er  meerdere fieldsets in 1 row met verder geen labels ertussen geldt de volgende  uitzondering:  ○ fieldset large­6 t/m large­12, vertaald altijd naar small­12 (dus toch een  nieuwe regel)  ○ fieldset large­5 wordt small­10   ○ fieldset large­4 wordt small­8  ○ fieldset large­3 wordt small­6  ○ fieldset large­2 wordt small­4  ○ fieldset large­1 wordt small­2   Als 2 fieldset met deze bekeringen niet binnen de 12 kolommen passen zal het  automatisch op de volgende regel vallen.  ● Radiobuttons altijd op een nieuwe regel. Theoretisch kan je 2 kolommen maken,  maar je weet nooit hoe lang de labels zullen zijn. Vandaar altijd100% (12 koloms).        Meertaligheid en modulenamen per klant    Besloten is dat alle teksten voor het CMS 4.0 centraal georganiseerd gaan worden, om zo  wijzigingen eenvoudig te kunnen doorvoeren en alvast ter voorbereiding op meertaligheid  van het CMS zelf.   

Per modulenaam worden meerdere varianten mogelijk waar op klantniveau uit gekozen  kan worden. De default modulenaam en de alternatieve namen krijgen ieder een  enkelvoud en een meervoudsvorm zodat ook in meldingen op een correcte manier  gerefereerd kan worden aan het item.   (bijvoorbeeld voorstelling/voorstellingen <> show/shows)  Naast de modulenaam zal de tekst eromheen (uitlegtekst, etc) hetzelfde blijven.    We zullen de basis hiervoor leggen in de eerste modules, en zorgen voor richtlijnen voor  vervolgmodules.