Intro

Websites evolueren

Ook na de go-live blijft een website veranderen. Er worden verschillende soorten content:

• toegevoegd: Nieuwe blogs, teamleden, extra features,...​
• verwijderd: Verouderde producten, verlopen events…​
• geüpdatet: Aanpassingen in prijzen, contactinfo…

Websites evolueren

• Handmatig code of designs aanpassen is tijdrovend en foutgevoelig.
• Er werken vaak verschillende profielen aan een website:
  • Copywriters
  • Designers
  • Marketeers
  • ...

Content Management

= Het organiseren, opslaan en bijwerken van inhoud in één centraal systeem.

• Dynamische content
• Eenvoudige beheer
• Meerdere beheerders

→ En dat is precies waar een CMS ons helpt.

CMS

CMS

= Content Management Systeem

RECAP

• 🗄️ Centrale plek om content te beheren
• 🏞️ Maakt mogelijk om inhoud van een website aan te passen (teksten, foto’s, blogs,...)
• ❌ Geen code nodig om de inhoud te beheren

Dat doet een belletje rinkelen! 🔔

Waarom een CMS gebruiken?

• Consistentie & structuur
• Efficiënt contentbeheer & makkelijk uitbreidbaar
• Meerdere auteurs zonder dev/des ervaring

RECAP

Aandachtspunten

• Logisch opgesteld content model
• Juiste field types
• Links & relaties 
• Toekomstige schaalbaarheid

Mini oefening

Analyse van een bestaande website

• Cluster gelijkaardige pagina's in FigJam
• Benoem de gemeenschappelijke onderdelen

Uitgebreide uitleg op Canvas

Soorten CMS'en

CMS principes

In Webflow maakten we dynamische pagina’s a.d.h.v. collections, fields, page templates,...

CMS principes

• De principes in Webflow gelden voor alle CMS’en
• Verschil zit voornamelijk in:
  • 🏠 hoe je het CMS host
  • 💾 hoe data opgeslagen wordt
  • 🤓 Gebruikte technologieën

🏠 CMS hosten

Cloud-hosted vs. self-hosted

Websites hosten

🏠 Je website = het huis dat je hebt gebouwd

🌍 Je domeinnaam = het adres van dat huis

💾 Hosting = de grond waar je het huis op plaatst

RECAP

💡 Zit deze leerstof wat ver? Herbekijk de slides over websites publiceren uit de module User Interface Prototyping.

Een website live zetten is zoals een huis bouwen:

Afbeeldingsbron

Cloud-hosted

• Alles in de cloud
• Geen setup
• Geen serverbeheer (security updates, legacy code,...)

🏠 CMS hosten

 Voorbeelden 

Vb: in Webflow kies je voor elke website een Site Plan met bepaalde kost. De site zelf staat op de servers van Webflow.

Cloud-hosted

🏠 CMS hosten

Self-hosted

• Hostingpakket kopen bij een provider
  vb. Combell, One.com,...
• Verantwoordelijk voor (security) updates
• Je ontwikkelt alles lokaal en plaatst dan een kopie van je project folder op een server

🏠 CMS hosten

 Voorbeelden 

💾 Data opslaan

 Database vs. flat file 

💾 Data opslaan

Relationele database

• Gegevens worden opgeslagen in tabellen:
  • Rijen = entries
  • kolommen = fields
• Tabellen kunnen gelinkt zijn aan elkaar
• 🔎 uitgebreide query-mogelijkheden = zoeken

💾 Data opslaan

Relationele database

Database server nodig
Vb. MySQL, MariaDB, PostgreSQ

💾 Data opslaan

Afbeeldingsbron

WEB SERVER

DATABASE SERVER

Flat file-gebaseerd

• Bestanden (MD, JSON, YAML, TXT) in mappen
• Eenvoudigere setup en hosting requirements
• Maar minder schaalbaar

💾 Data opslaan

Overzicht

Principes zoals collections, fields, templates gelden in elk CMS

🏠 Hosting

• Cloud-hosted: alles geregeld
• Self-hosted: zelf installeren & onderhouden

💾 Data opslaan

• Database
• Flat file 

Technologieën verschillen, maar de basis blijft hetzelfde

Let's explore! 🧭

CMS demo's

We bekijken een aantal veelgebruikte CMS'en.

• 🥵 Geen paniek: je hoeft ze niet te kennen
• 🔎 Let op zaken zoals:
  • Welke content kan je maken en beheren?
  • Hoe flexibel zijn velden en templates?
  • Welke zaken kan ik wel of niet stylen?

Probeer te observeren, niet te onthouden. Het doel is inzicht, niet technische kennis.

Wordpress

= cloud-hosted (of self-hosted) CMS, met database

🔗 wordpress.com

Experiment

Maak een gratis Wordpress website aan en experimenteer met de visuele editor in Wordpress.

Uitgebreide uitleg op Canvas

Kirby 

= Self hosted, flat file CMS

🔗 Kirby quickstart guide & 🔗 Download PHP

Kirby

Template files

• = de front-end 
• Voornamelijk PHP
  niet enkel HTML & CSS

Je bouwt de website dus zonder visuele editor.

DEMO

Kirby 

Blueprints:

• = Hier bepaal je hoe het CMS van je website er uit ziet
• .yml-files 

DEMO

Kirby

Content:

• = de inhoud van de website
• .txt-files & afbeeldingen

DEMO

Craft CMS

= Self-hosted CMS, met database

🔗 Getting started Youtube tutorial

DEMO

Craft CMS

Template files

• = de front-end 
• Voornamelijk PHP & Twig (een soort next level HTML)

Je bouwt de website dus zonder visuele editor.

DEMO

Craft CMS

Admin panel

• = CMS

• Eenvoudig voor
  niet-technische gebruikers

• Flexibel & uitbreidbaar voor developers

• your-url.com/admin

Webflow CMS

= Cloud-hosted CMS, met database

🔗 Webflow University
Daar hebben we afgelopen schooljaar al veel mee geëxperimenteerd 🤓

Begrippen

Collection

RECAP

= verzameling van gelijkaardige soorten content

• Ook wel post types genoemd.

Entry

RECAP

= één rij of record uit een collection

• Bevat verschillende fields

Fields

RECAP

= attribuut of kolom of propertie van een entry

• Vb: Titel, datum, auteur, thumbnail, score,...

Field types

Number

• Getal, geen eenheid
• Handig voor berekeningen
   

Single line tekst of plain text

• Korte tekst
• Voor titels of productnamen
• ⚠️ Bevat géén opmaak (bold, italic, lijstjes, headings,...)

Field types

Richt text of WYSIWYG of redactor

• Voor langere teksten mét formatting
• Soms extra uitbreidbaar met plugins

Field types

Image of file of asset

• Afbeelding, document en/of video
• ⚠️ Sommige CMS'en laten meerdere bestanden toe
• ⚠️ Sommige CMS'en hebben aparte fields per type bestandsformaat

Multi-select of Dropdown

• Meerdere keuzes mogelijk
• Voor tags of categorieën

Field types

Reference of relational field

• Koppelt een entry aan een collectie
• bijvoorbeeld:
  • Kunstenaar → Schilderijen
  • Product → Relevante producten
  • Film → Categorie

Field types

... en nog zo veel meer.

💡Bekijk de documentatie van het CMS om te weten wat mogelijk is, vb Webflow Field types

Field types: Tips

• Plain text: stel min. & max. aantal karakters in
• Gebruik rich text alleen waar je echt opmaak nodig hebt. Vermijd ongewenste styling vanuit CMS.
• Hou rekening met realistische inhoud

Field types: Tips

• Mediavelden: check limieten op aantal uploads en bestandsgrootte

Contentmodel

= Ontwerp of blauwdruk van de structuur van je CMS

• Beschrijft visueel per entry de fields
• Toont connecties met andere entry types

Weekoefening

Content modelling & Webflow CMS opbouw

• Stel een content model op voor een fictieve eventspagina & zet een CMS op in een nieuw Webflow project.

Uitgebreide uitleg op Canvas