Het pictogram van het thema en van het portaal personaliseren¶

Belangrijk

Het personaliseren van thema's is niet beschikbaar voor freemium domeinen (aangemaakt via de pagina "Probeer gratis <https://www.opendatasoft.com/discover-opendatasoft-demo/> op de website van Opendatasoft <https://www.opendatasoft.com>). Wanneer uw domein een freemium domein is en u zou deze themafunctie toch graag willen, stuur ons dan een e-mail! <sales@opendatasoft.com>

De interface van Opendatasoft voor het beheren van thema's kan worden teruggevonden in de back-office van het domein. Om hier toegang toe te hebben, dient u te klikken op de sectie "Look & feel" in de navigatiebalk en vervolgens op de koppeling "thema".

Opmerking

Om toegang te hebben tot de themapagina, moet u de domeineigenschappen kunnen bewerken. Zie De veiligheid van uw domein beheren voor meer details over toelatingen.

Wanneer u de verschillende vormen gebruikt die beschikbaar zijn op deze pagina, zal u elk aspect van uw portaal kunnen personaliseren, van de basiskleuren tot het aanbrengen van grote wijzigingen aan de lay-out ervan.

Versiebeheer¶

Alvorens dieper in te gaan op de verschillende manieren waarop u het thema van het portaal kan personaliseren, is het zeer belangrijk te benadrukken dat al wat u op deze pagina doet aan versiebeheer onderworpen is. Met andere woorden, aan uw werk wordt een versienummer toegekend en u kan op elk moment een nieuwe versie aanmaken. U werkt altijd aan de meest recente versie (beschouw het als de ontwerpversie van uw werk), maar kan elke versie live maken (m.a.w. deze toepassing op uw portaal). Indien u de meest recente versie live maakt, wordt een nieuwe aangemaakt en dit wordt dan uw nieuwe ontwerpversie van uw werk. Alleen de meest recente versie kan worden bewerkt. Alle vorige versies zijn alleen-lezen.

Terwijl u aan de meest recente versie werkt, kan u de voorbeeldweergave zien van uw wijzigingen door op de knop "Voorbeeldweergave" te klikken. Hiermee wordt een nieuw venster geopend dat uw portaal bevat met de huidige versie van het thema dat erop is toegepast.

Opmerking

Alleen gebruikers die de domeineigenschappen kunnen bewerken, kunnen een voorbeeldweergave zien van de meest recente versie van het thema. Indien u de URL van de voorbeeldweergave wil delen met andere gebruikers, zullen ze geen enkel verschil met de live versie zien.

Opmerking

U kan op elk moment en op elke welbepaalde pagina op de front-office van het portaal een voorbeeldweergave bekomen van de meest recente versie van het thema door het toevoegen van de parameter stage_theme=true aan de URL.

De versiekiezer zal u expliciet zeggen of u aan de meest recente versie werkt of eerder een vorige versie bekijkt, alsook welke versie live is.

Personalisatieopties¶

Lay-outopties¶

De lay-out van het portaal berust op een rastersysteem dat uit 12 kolommen bestaat en dat geërfd werd van het Bootstrap CSS kader en heeft als dusdanig een aantal interne variabelen die in haar CSS worden gebruikt. Dit tabblad laat u toe om de waarden van enkele van deze variabelen in te stellen.

De variabelen die momenteel genegeerd kunnen worden, zijn de "spatiebreedte" en de "responsieve breekpunten".

De "spatiebreedte" is de ruimte tussen kolommen, rijen en aanpalende vakjes.

De "responsieve breekpunten" is de breedte van het scherm (in pixels) op basis waarvan de lay-out een aanpassing zal doorvoeren om de beschikbare ruimte beter te benutten. Er zijn 4 beschikbare modi: extra smal, smal, middelgroot en groot. Dit betekent dat er 3 breekpunten zijn: extra smal tot smal, small tot middelgroot en middelgroot tot groot. Naar de modi wordt ook gebruikelijk verwezen als "mobiel", "tablet", "desktop" en "grote desktop".

Opmerking

Denk er wel aan dat "mobiele modus" niet betekent dat de gebruiker effectief een mobiel toestel gebruikt, maar wel dat de browser op het toestel enkel een kleine weergaveruimte biedt.

Om welke variabele dan ook opnieuw in te stellen naar de standaardwaarde ervan, hoeft u enkel op de knop "wissen" ernaast klikken.

Kleuren¶

Net zoals bij de lay-outopties, berust het Opendatasoft-platform op een handvol kleurvariabelen voor de stijl van de portaalelementen. U kan de kleurinput op dit tabblad gebruiken om sommige van de thema's in te stellen. Hiermee kan u met slechts enkele muisklikken uw portaal voorzien van uw eigen kleuren.

Opmerking

Deze variabelen heffen de kleuren van het standaardthema op. De aanpasbare stijlregels die in het tabblad "stijlblad" kan noteren, zullen evenwel voorrang hebben op deze kleuren. Dit betekent dat uw kleurkeuzes mogelijk niet zichtbaar zijn indien u meer specifieke CSS-regels hebt genoteerd.

Opmerking

Er kunnen themakleuren in het stijlblad van het domein gebruikt worden als CSS-variabelen:

var(--variable-name)

De beschikbare variabelen zijn: text, links, titles, page-background, highlight, boxes-background, boxes-border, section-titles, section-titles-background, header-background, header-links, footer-background en footer-links.

Deze CSS-variabelen zijn compatibel met alle browsers omdat het OpenDataSoft-platform automatisch alle variabelen vervangt door hun echte themakleurwaarden.

Stijlblad¶

Wanneer het wijzigen van de kleuren niet voldoende is en u graag ingrijpendere wijzigingen wil doorvoeren, moet u uw eigen CSS schrijven. Gelukkig stelt dit tabblad u in staat uw eigen stijlregels in te voeren. Deze zullen worden toegepast bovenop de standaard regels van Opendatasoft en er voorrang op hebben.

Wanneer uw personalisering specifieke afbeeldingen en fonts gebruikt, kunt u deze uploaden op het platform met behulp van de activabeheerpagina. Vervolgens kunt u de URL's van de activa kopiëren en plakken in uw CSS-code.

Belangrijk

Om de stijl van een element te wijzigen, hoeft u enkel de categorie van het element terugvinden en de gewenste CSS-eigenschap wijzigen. Dit heeft geen nevenwerkingen (beperkt tot enkel deze categorienaam) en werkt gegarandeerd (aangezien de hiërarchische treemap overwegend vlak is).

Dit is mogelijk omdat alle CSS-codes van Opendatasoft geschreven worden volgens de BEM-methodologie en voorzien worden van een prefix ods- zodat ze niet conflicteren met uw eigen stijlen en gemakkelijk kunnen worden overheerst. U vindt een schitterende inleiding over deze methodologie op de altijd nuttige CSS Tricks website.

Kortom, categorienamen kunnen geschreven worden als block, element, modifier (vandaar dee BEM) .ods-block[--blockmodifier][__element][--elementmodifier]. De hiërarchische treemap is maximaal 2 selectors diep. Ook staat de relevante stijl zo dicht mogelijk bij het element.

Header en footer¶

Hoewel zowel de header als de footer reeds gepersonaliseerd kunnen worden via de personaliseringssectie van het domein en het kleurenselectiepaneel, willen organisaties meestal de lay-out en de inhoud van deze gebieden nog verder personaliseren.

Zowel koptekst als voettekst zijn opgenomen in onafhankelijke AngularJS-applicaties, m.a.w. u kunt ng-if, ng-class, ng-show, ng-hide en alle standaard directieven van Angular gebruiken om de gebieden dynamischer te maken. Eén gemeenschappelijk verzoek is om de koptekst te verkleinen in een click-to-expand zijmenu onder een bepaalde viewport-breedte. Hiervoor bieden we de ods-responsive-menu directief aan. Zie deze speciale pagina voor meer informatie.

We voorzien ook namen die vervangen zullen worden door de inhoud die gespecificeerd staat in de personaliseringsopties voor het domein, zoals menu-items, taalkiezers en logo's. De volledige lijst staat rechts boven de coderuimte weergegeven.

Opmerking

Hoewel u Angular kan gebruiken binnen de header en de footer, is standaard JS nog altijd verboden omwille van veiligheidsredenen.

Cataloguskaart¶

Op de cataloguspagina van uw domein, wordt elke dataset weergegeven door een enkele cataloguskaart. Deze kaart is voorzien van een aantal standaard elementen maar mogelijk wil u de manier waarop deze eruit ziet radicaal wijzigen, nieuwe koppelingen toevoegen of nieuwe gedragingen implementeren.

Hier volgen enkele voorbeelden van cataloguskaarten:

../../_images/theme__catalog-card-example-central.png

../../_images/theme__catalog-card-example-datacorsica.png

../../_images/theme__catalog-card-example-toulouse.png

We voorzien handige richtlijnen om gemakkelijk informatie over een dataset terug te vinden en te integreren. Deze richtlijnen gaan ook gepaard met een standaard stijl die u kan opheffen door gebruik te maken van het tabblad "Stijlblad".

De richtlijnen zijn:

ods-catalog-card moet de volledige cataloguskaart omvatten opdat de andere richtlijnen kunnen werken.
ods-catalog-card-theme-icon zoekt het thema van de dataset op en integreert het relevante pictogram.
ods-catalog-card-body voorziet nuttige stijl- en gedragsregels (datasets zonder records, API-volmacht...).
ods-catalog-card-title, ods-catalog-card-description en ods-catalog-card-keywords spreken voor zich.
ods-catalog-card-metadata-item neemt een item-key en een item-title attribuut, zoekt een metadataeigenschap die overeenstemt met het item-key uit de dataset en integreert deze in de pagina met item-title als het label ervan. Het dient omwikkeld te worden door middel van een .ods-catalog-card__metadata element voor een betere styling maar zonder enige verplichting.
```
<ods-catalog-card-metadata-item item-title="Data" item-key="records_count"></ods-catalog-card-metadata-item>
```

Metadata itemsleutels¶
Itemsleutel	Titel van het item
licentie	Licentie (zal indien mogelijk aangeleverd worden als een koppeling)
taal	Taal van de inhoud
gewijzigd	Datum van laatste wijziging
uitgever	Naam van de uitgever
referenties	Koppeling naar de oorspronkelijke born van de data
odi_certificate_url	Koppeling naar het ODI-certificaat
records_count	Aantal records in de dataset (ongeacht filters)
attributen	Namen van de eigenaar van de data
source_domain	Enkel voor samengevoegde datasets, de naam van het domein waar de dataset van afkomstig is
source_domain_title	Enkel voor samengevoegde datasets, de oorspronkelijke titel van de dataset op het brondomein ervan
source_dataset	Enkel voor samengevoegde datasets, de oorspronkelijke identifier van de dataset op het brondomein ervan
explore.download_count	Aantal downloads van data voor deze dataset

Offline ontwikkeling¶

In de vorige sectie hebben we gezien dat u gedetailleerde CSS-regels kan schrijven waarmee het standaard thema van het portaal wordt opgeheven. Het schrijven ervan in de browser kan echter saai worden, vooral voor doorgewinterde ontwikkelaars die krachtige teksteditors gewend zijn. Aangezien het enkel zuivere CSS aanvaardt, zal u er handmatig moeten voor zorgen dat uw regels met een correcte prefix voor de vender zijn voorzien en zal u de functies, die frontend ontwikkelaars gewoon zijn, niet kunnen gebruiken voor pre-processoren, zoals variabelen en nesting.

Omwille van al deze redenen, hebben we een API gecreëerd die gebruikers in staat stelt om met de API-sleutel van het thema hun stijlregels lokaal te schrijven waarbij ze alle tools kunnen gebruiken die ze willen en enkel de hieruit voortvloeiende CSS-code naar het platform kunnen duwen. We hebben een klant voorzien van deze API, samen met vaak gebruikte tools (zonder de preprocesser en autoprefixer) in de Ontwikkelingskit van Opendatasoft <https://github.com/opendatasoft/ods-portal-devkit>`_.

Deze ODS Portal DevKit is een open source project dat gratis verdeeld wordt op Github. Het staat u vrij deze te downloaden en deze aan te passen aan uw ontwikkelings-workflow.

API-sleutel van een thema¶

U kan de API-sleutel van een thema terugvinden op de personaliseringspagina van het thema van het portaal. Vergroot enkel de sectie API-sleutel voor offline ontwikkeling en kopieer de sleutel.

Waarschuwing

Wanneer u een nieuwe sleutel genereert, worden vorige sleutels herroepen. Als gevolg hiervan zullen ontwikkelaars, die een oude sleutel gebruiken, hun werk niet naar het platform kunnen duwen. Denk er alleen aan om de nieuwe sleutel door te sturen naar elke ontwikkelaar die aan het thema van uw portaal werkt om ervoor te zorgen dat de ontwikkeling ononderbroken verloopt.