Gebruik deze .MD als standaardbasis wanneer we een nieuwe HTML-webapp, tool, kennisbank, Google Sites-pagina of interactieve website maken.
De site wordt ontworpen als een zelfstandige, gebruiksvriendelijke werkruimte die:
mobiel, tablet en desktop ondersteunt;
geschikt is voor insluiting in Google Sites;
gegevens kan bewaren, importeren en exporteren;
duidelijke navigatie gebruikt;
gebruikers kan registreren;
personaliseerbaar is;
waar mogelijk zonder verplichte externe server bruikbaar blijft;
later uitgebreid kan worden met Apps Script, Google Sheets, Drive, API's, AI en authenticatie.
Wanneer registratie onderdeel is van de applicatie begint de gebruikerservaring met een duidelijk startscherm.
Mogelijke velden:
Naam
Gebruikersnaam
Organisatie
Creator
Website
Telefoon
Taal
Land
Rol
Projectnaam
Notities
Datum registratie
User ID
Niet iedere website hoeft alle velden te gebruiken.
Alles wat tijdens registratie wordt ingevuld moet kunnen worden opgeslagen.
Gebruik waar passend:
localStorage;
JSON;
Google Sheets;
Google Drive;
Apps Script/backend;
database.
Een terugkerende gebruiker moet zijn profiel opnieuw kunnen laden.
Op het registratie-/profielscherm standaard mogelijkheden opnemen voor:
USER EXPORT
TXT
JSON
CSV
DOC/DOCX waar mogelijk
Kopiëren
Delen
USER IMPORT
Minimaal:
JSON
TXT
CSV
Waar technisch betrouwbaar mogelijk:
DOC/DOCX
Na import worden bekende profielvelden automatisch teruggezet.
Onbekende gegevens mogen niet stilzwijgend verloren gaan; bewaar deze waar mogelijk als aanvullende metadata.
Maak onderscheid tussen:
Alleen gebruikersprofiel en persoonlijke instellingen.
Volledige applicatiestatus, bijvoorbeeld:
user;
instellingen;
projecten;
teksten;
songs;
records;
favorieten;
historie;
notities;
configuratie.
Zo kan men een profiel apart meenemen of de complete werkruimte herstellen.
Wanneer bij een site wordt gevraagd:
"maak exports mogelijk"
dan voegen we standaard passende exportmogelijkheden toe.
Bij voorkeur:
TXT
JSON
CSV
DOC/DOCX
HTML
Kopiëren
Native Share
Waar zinvol:
XLSX
Markdown
afbeelding
volledige backup JSON.
Imports worden eveneens toegevoegd wanneer opgeslagen werk later opnieuw gebruikt moet kunnen worden.
Wanneer een site een eigen publieke URL heeft, verschijnt bij menselijke exports standaard:
EERST DE WEBSITE-LINK
daarna de inhoud.
Voorbeeld:
https://sites.google.com/view/worshipwriting
TITEL
Tekst...
Dus niet eerst credits en daarna de URL.
Standaard:
LINK → TITEL → METADATA/CREDITS → INHOUD
tenzij expliciet anders gevraagd.
Voor Google Sites en iframe-compatibiliteit:
GEEN href="#..." navigatie als hoofdmechanisme.
Gebruik bij voorkeur:
JavaScript tabs;
buttons;
panels;
sections;
views;
data-* attributen;
actieve/inactieve states.
De URL hoeft daardoor niet te veranderen wanneer binnen de applicatie van scherm wordt gewisseld.
Externe links gebruiken volledige HTTPS-URL's.
Bijvoorbeeld:
<a
href="https://example.com"
target="_blank"
rel="noopener noreferrer">
Open website
</a>
Geen onnodige gegenereerde googleusercontent.com/embed... links gebruiken.
Belangrijke:
cijfers;
KPI's;
kaarten;
categorieën;
begrippen;
woorden;
onderwerpen;
tegels
mogen niet alleen decoratief zijn.
Maak ze waar nuttig interactief.
Een klik kan bijvoorbeeld openen:
uitleg;
details;
voorbeelden;
FAQ;
bron;
zoekresultaten;
interne tab;
externe pagina;
editor.
Bij een kenniswebsite moet men vanuit de samenvatting kunnen doorklikken naar verdieping.
Voeg waar nuttig een algemene zoekfunctie toe.
Ondersteun bijvoorbeeld:
lokale inhoud;
titels;
teksten;
categorieën;
tags;
opgeslagen records;
internet search;
verschillende zoekmachines.
Bij taalzoekopdrachten niet automatisch een website afdwingen.
Dus standaard NIET:
site:ebible.org Japanese Psalm 23
maar:
Japanese Psalm 23
of:
Arabic scripture trust God
of:
French Bible love forgiveness
De zoekopdracht bestaat in principe uit:
GEKOZEN TAAL + ZOEKWOORDEN / ZOEKTEKST
Een specifieke websitefilter wordt alleen gebruikt wanneer wij daar bewust voor kiezen.
Wanneer de applicatie meertalige content ondersteunt, kunnen dezelfde zoekwoorden voor meerdere talen worden voorbereid.
Voor onze MLS/songwriting-workflows zijn de vaste talen:
English
Nederlands
العربية
हिन्दी
Bahasa Indonesia
Esperanto
Español
Français
Português
Italiano
한국어
日本語
简体中文
Voorbeeld:
Onderwerp: hope and trust
De tool kan zoekopdrachten voorbereiden zoals:
English Bible hope trust
Nederlandse Bijbel hoop vertrouwen
Arabic Bible hope trust
Hindi Bible hope trust
Spanish Bible hope trust
French Bible hope trust
...
De daadwerkelijke zoektekst mag waar mogelijk natuurlijk in de betreffende taal worden geformuleerd.
Een uitgebreid instellingenpaneel is standaard gewenst voor grotere webapps.
Minimaal overwegen:
achtergrond;
tweede achtergrond;
tekstkleur;
secundaire tekst;
accentkleur;
buttons;
cards;
borders;
actieve tab;
links.
Ondersteun waar passend:
effen kleur;
gradient;
afbeelding;
URL naar afbeelding;
upload;
geen achtergrondafbeelding.
Keuze uit meerdere veilige fonts.
Bijvoorbeeld:
system font;
Arial;
Helvetica;
Verdana;
Georgia;
Times New Roman;
Trebuchet;
Courier;
monospace.
Waar online fonts worden gebruikt moet de applicatie ook zonder dat externe font leesbaar blijven.
lettergrootte;
regelafstand;
letter spacing;
contentbreedte;
card spacing;
compact/comfortabel;
eventueel font weight.
Bij voorkeur:
Light
Dark
System
Custom
Persoonlijke instellingen worden opgeslagen.
Bijvoorbeeld:
theme
background
backgroundImage
textColor
accentColor
fontFamily
fontSize
lineHeight
contentWidth
Gebruik minimaal localStorage wanneer geen account/backend beschikbaar is.
Settings moeten bij voorkeur ook onderdeel zijn van:
USER EXPORT
en/of:
WORKSPACE EXPORT
zodat dezelfde omgeving later kan worden hersteld.
Geef een duidelijke resetmogelijkheid.
Maak waar nodig onderscheid tussen:
reset instellingen;
reset user;
reset huidige project;
volledige browserdata wissen.
Gebruik bevestiging bij destructieve acties.
Voor tekstgerichte applicaties standaard overwegen:
🔊 Voorlezen
■ Stop
Waar zinvol:
huidige tekst;
geselecteerde tekst;
afzonderlijke kaart;
volledig document;
resultatenlijst.
Gebruik browser Speech Synthesis wanneer geschikt.
Bij meertalige inhoud proberen we de stemtaal aan de teksttaal te koppelen.
Teksten moeten waar relevant direct bewerkbaar zijn.
Ondersteun bijvoorbeeld:
textarea;
content editor;
toevoegen;
verwijderen;
dupliceren;
verplaatsen;
drag & drop;
undo;
reset;
autosave.
Bij lijsten moet men regels waar nuttig kunnen herschikken.
Gebruik voor grotere tools een centrale state.
Bijvoorbeeld conceptueel:
APP
├── version
├── user
├── settings
├── projects
├── currentProject
├── library
├── favorites
├── history
└── metadata
Een volledige JSON-backup bevat de benodigde state om de werkruimte later opnieuw op te bouwen.
Werk in niveaus.
Browser/localStorage.
Import/export JSON.
Google Drive / cloud.
Account/backend/database.
Een simpele HTML moet niet onnodig afhankelijk worden gemaakt van een backend wanneer lokale opslag voldoende is.
Waar cloudopslag wordt toegevoegd, denk aan:
Nieuw
Open
Opslaan
Autosave
Opslaan als
Dupliceren
Hernoemen
Verwijderen
Versies
Export backup
Import backup
Later eventueel:
Google Drive
Microsoft OneDrive
Dropbox
andere storageproviders.
Ontwerp standaard voor:
mobiel;
tablet;
laptop;
desktop.
Buttons moeten makkelijk aanklikbaar zijn.
Vermijd:
extreem kleine tekst;
horizontale overflow;
enorme vaste breedtes;
onbruikbare tabellen op mobiel.
Gebruik responsive grids en flex layouts.
Buttons hebben een herkenbare functie en consistente stijl.
Voorbeelden:
📥 Import
📤 Export
💾 Opslaan
📂 Open
➕ Nieuw
🔍 Zoeken
🎲 Random
🔊 Voorlezen
■ Stop
📋 Kopiëren
⚙️ Instellingen
Belangrijke import/exportfuncties mogen boven én onder lange pagina's terugkomen.
Waar delen logisch is, standaard WhatsApp overwegen.
De WhatsApp-tekst bevat bij voorkeur:
WEBSITE-LINK
TITEL
TEKST
Gebruik URL-encoding.
Bij zeer lange inhoud moet de applicatie rekening houden met praktische URL-/berichtlimieten.
Bied daarom daarnaast:
Copy;
Native Share;
TXT;
aan.
Bij grote tekstcollecties ondersteunen we waar relevant:
zoekwoord;
categorie;
nummer;
vanaf nummer;
selectie nummers;
random;
aantal resultaten;
minimum;
maximum.
Bij randomgeneratoren:
Aantal: 1 t/m 100
of een ander logisch maximum.
Meerdere filters kunnen als duidelijke toggle-buttons worden weergegeven:
AAN / UIT
Bijvoorbeeld:
[ON] Psalmen
[ON] Bijbeltekst
[OFF] Profeten
[ON] Wijsheid
De actieve filters bepalen gezamenlijk de randompool.
API's zijn een bronlaag, niet de gebruikersinterface.
Technische metadata zoals:
API provider
endpoint
WEB
CORS
internal source ID
hoeft niet automatisch in gebruikerscontent of exports terecht te komen.
Maak onderscheid tussen:
INTERNAL SOURCE METADATA
en:
USER CONTENT
Bronvermelding wordt alleen zichtbaar/exporteerbaar wanneer dit juridisch, inhoudelijk of door de gebruiker gewenst/noodzakelijk is.
Maak onderscheid tussen:
public domain;
open licensed;
API-access;
copyrighted;
eigen content.
Een openbare webpagina betekent niet automatisch dat de volledige inhoud vrij mag worden gekopieerd.
Bij contentgeneratie gebruiken we externe teksten bij voorkeur als:
research;
inspiratie;
feitenbron;
referentie.
Geen onnodige reproductie van beschermde teksten.
Voor songwriting-apps ondersteunen we waar relevant:
Title
Theme
Keywords
Story
Emotion
Structure
Verse
Pre-Chorus
Chorus
Bridge
Vamp
Tag
Outro
Notes
Sources/research
Languages
MLS
TTS
Save
Remix
Export
Share
De generator moet nieuwe/originele teksten maken en niet simpelweg bestaande songs kopiëren.
Voor Worship Writing gebruiken we:
https://sites.google.com/view/worshipwriting
als primaire website in exports.
Workflow:
WORDS
↓
THEME
↓
SCRIPTURE / STORY / RESEARCH
↓
STRUCTURE
↓
VERSE
↓
PRE-CHORUS
↓
CHORUS
↓
VERSE
↓
BRIDGE / VAMP
↓
FINAL DECLARATION
↓
OUTRO
↓
MLS
↓
EDIT
↓
SAVE
↓
EXPORT / SHARE
Scripture research kan filters bevatten zoals:
Psalms
Bible
Wisdom
Prophets
Gospels
Letters
Old Testament
New Testament
Selected Book.
Aantal random resultaten:
1–100
Waar technisch mogelijk combineren we meerdere vrije/public-domain bronnen zodat één enkele externe API niet de volledige functionaliteit bepaalt.
Menselijke exports:
https://sites.google.com/view/worshipwriting
SONG TITLE
Credits / metadata
Lyrics
Scripture inspiration
Notes
Technische API-bronlabels worden niet automatisch tussen de songtekst gezet.
Wanneer een project eigen credits heeft, gebruik deze consequent.
Voor Songwriter/Worship-projecten kan bijvoorbeeld worden gebruikt:
⌘ @godogood · Songwriter Stijn Gabeler · Next level songwriting · Gabeler.eu · GoDoGood.eu
Credits mogen worden aangepast aan het specifieke project.
Nooit geheime API-keys hardcoded in publieke HTML zetten.
Dus niet:
const API_KEY = "secret-key";
Voor beveiligde API's:
HTML → eigen backend/Apps Script → externe API
of een andere veilige serverlaag.
De site moet niet alleen informatie tonen.
We bouwen een werkruimte.
Daarom proberen we steeds de cyclus mogelijk te maken:
OPENEN → INVULLEN → ZOEKEN → MAKEN → BEWERKEN → OPSLAAN → EXPORTEREN → DELEN → LATER OPNIEUW OPENEN
Bij een nieuwe uitgebreide website controleren we:
Mobielvriendelijk
Google Sites/iframe geschikt
Geen onnodige hash-navigatie
Duidelijke tabs/views
Registratie indien nodig
User opslaan
User import
User export
Workspace import
Workspace export
localStorage
JSON backup
TXT export
CSV waar relevant
PDF/Print
DOC/DOCX waar relevant
Native Share
Copy
Voorlezen bij teksttools
Search
Random/selectie waar relevant
Instellingen
Kleuren aanpassen
Achtergrond aanpassen
Lettertype aanpassen
Lettergrootte aanpassen
Light/Dark/Custom
Settings opslaan
Externe HTTPS-links correct
Website-link bovenaan menselijke exports
Interactieve hoofdkaarten/woorden waar nuttig
Geen API-secrets in frontend
Copyright/licenties respecteren
Resetmogelijkheden
Complete backup/restore
Bestaand werk opnieuw kunnen openen
Een goede site is niet alleen:
KIJKEN
maar:
KIJKEN + DOEN + MAKEN + OPSLAAN + TERUGHALEN + EXPORTEREN + DELEN + PERSONALISEREN.
Wanneer we een nieuwe site bouwen, gebruiken we deze .MD als basis en voegen we daarna de projectspecifieke functies toe.