Introductie tot content management systems

CONTENT MANAGEMENT

Warm-up

Analyse van een bestaande website

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

Uitgebreide uitleg op Canvas

Statische vs. dynamische websites

Statische websites

• Vaste HTML & CSS per pagina
• Inhoud zit vast in de pagina
• Pagina's staan klaar op de server
• Aanpassingen gebeuren handmatig

👉 Snel & eenvoudig, maar onpraktisch bij veel pagina's

Dynamische websites

• Scheiding tussen lay-out (template) & inhoud (database/CMS)
• Pagina's worden live opgebouwd als je ernaar surft

👉 Beheerbaar zonder kennis van design/code

Dynamische websites

De pagina lay-out ligt vast en de header is fixed in de template.

De effectieve inhoud van de pagina (foto's, teksten,...) wordt opgehaald uit een database. Conecteren met de database en data terugkrijgen kost wat tijd, waardoor het een beetje langer duurt voor de volledige inhoud wordt getoond.

Wanneer kiezen voor een dynamische website?

🛍️ Personalisatie: winkelmandje bijhouden, aanpassingen o.b.v. taal of locatie, al dan niet ingelogd,...

📥 Interactie met de server: formulieren verzenden, reacties plaatsen, filters toepassen

🔄 Automatische updates: aanpassingen in database (nieuwe gebruiker, product verwijderen) zie je meteen

🗂️ Uniformiteit: Eén template voor honderden pagina's

Front-end vs. back-end

Front-end

= client-side / browser

👀 Alles wat de bezoeker ziet

🛠️ HTML, CSS, JS

🎯 UX/UI, responsiveness, a11y, branding

👨‍🦳 Bezoeker van de website

Back-end

= server-side / server

🗄️ Waar de website beheert wordt

🛠️ SQL/NoSQL, PHP, Node.js, API's,...

🎯 Databeheer, logica, security, gebruiksersrechten

👨‍🦳 Beheerder/bouwer van de website

Tijdens deze module bouwen we de brug tussen
font-end en back-end...

...aan de hand van een CMS.

Content Management Systems (CMS)

Een interface voor de back-end

= CMS, "de website achter de website"

🖥️ Beheeromgeving / dashboard

✏️ Content beheren

🗄️ Data beheren

⚙️ Instellingen & functionaliteit

👨‍💻 Beheerder van de website

Voorbeelden

Voorbeeld

CMS in Webflow

Content beheren met een CMS

Een beetje alsof je alles zou bijhouden in een Excel file en automatisch deze data toont op je website.

analogie (belangrijke termen!)

Row/Col vs Item/Field

Item/entry

Collections

Bottomline: structuur kan complex worden dus we moeten er goed over nadenken dus content model maken (maar daar focussen we volgende les op)

Content beheren met een CMS

Figma Sites

Title

Beknopt enkel belangrijke begrippen. Verwijzing naar de tuts achteraan de slides.

Demo

+

Oefening

Docs & tuts

Title

Tekst