'Meta-informatie' toevoegen aan HTML, hoe in db?

[Rekcor]

Ik wil gebruikers data kunnen toevoegen aan een stuk tekst, en vroeg mij af of de volgende manier van opslaan de meest handige is.

Stel, een stuk tekst:

HTML:

<p>the quick brown fox jumps over the lazy dog</p>
(...)
<p>the quicker red fox jumps over the lazy dog as well</p>

Nu wil ik de gebruiker de mogelijkheid geven om een zgn sleutelwoord te selecteren, en daar informatie aan toe te voegen, bijv.

• een plaatje
• een URL
• een eigen notitie
• een calender event (wanneer voor het laatst gezien?)

Sleutelwoorden komen ook op andere plekken op de site voor. Er zijn twee use cases voor het tonen:

1) Er is informatie die getoond moet worden voor iedere instantie van een sleutelwoord (bijv. het plaatje)
2) Er is informatie die getoond moet worden alleen voor de geselecteerde instantie (bijv. de notitie)

Mijn aanpak zou zijn:

HTML:

<p>the quick brown <span data-keywordId="2"  data-keywordInstanceId="1">fox</span> jumps over the lazy dog</p>
(...)
<p>the quicker red <span data-keywordId="2">fox</span> jumps over the lazy dog as well</p>

En dan in de database de volgende tabellen:

keyword

code:

+-----------+------+
| keyWordId | name |
+-----------+------+
|         2 | fox  |
+-----------+------+

node

code:

+--------+---------+
| nodeId |  name   |
+--------+---------+
|      1 | Plaatje |
|      3 | Notitie |
+--------+---------+

keywordInstance

code:

+-------------------+--------+
| keywordInstanceId | nodeId |
+-------------------+--------+
|                 1 |      3 |
+-------------------+--------+

keyword_node

code:

+-----------+--------+
| keywordId | nodeId |
+-----------+--------+
|         2 |      1 |
+-----------+--------+

Mijn vraag: hoe blij worden jullie van deze aanpak?

[HuHu]

Worden de sleutelwoorden door jou (als maker) geselecteerd of kan iedere gebruiker zijn eigen sleutelwoorden selecteren? En moet de toegevoegde informatie voor iedere bezoeker zichtbaar zijn (dus opslaan op de server) of alleen voor de bezoeker die het zelf toevoegt (eventueel opslaan met html5 local storage).

Het is misschien ook handiger om een betere datastructuur te kiezen dan platte tekst (= een array) om je content op te slaan. Je zou kunnen kijken hoe text-editors (zoals Word of Google Docs) omgaan met het bewaren van comments in een document. Handige datastructuren: http://www.cs.unm.edu/~crowley/papers/sds/sds.html en Wikipedia: Rope (data structure)

Als je je tekst opslaat in een rope, dan kun je aan individuele nodes in je rope meta-informatie toevoegen, zoals je comments. Annotaties die gelden voor elk woord kun je apart opslaan en later met, bijvoorbeeld, JavaScript in de browser een find-and-replace doen.

[Rekcor]

Dank! Je hebt twee soorten gebruikers (auteurs en lezers). Eerstgenoemden kunnen inderdaad sleutelwoorden aanmaken. Alles moet zichtbaar zijn voor de lezers.

Bedankt voor de twee links. Erg interessant! Ik was inderdaad het onzekerst over het opslaan als platte tekst. Dit moet vroeger of later problemen opleveren.

[HuHu]

Als het aantal sleutelwoorden beperkt blijft, wat waarschijnlijk het geval is als alleen auteurs ze kunnen aanmaken, dan kun je ook de array-aanpak blijven gebruiken. Als je een opmaaktaal hebt waarmee auteurs werken, of een WYSIWYG editor, dan kun je die uitbreiden met tags/opties om sleutelwoorden te markeren.

code:

the quick brown [tag id=2314]fox[/tag] jumps over the lazy dog

Dit wordt dan gerenderd zoals de HTML uit je OP. Met een WYSIWYG editor kun je zelf een leuk knopje toevoegen.

Globale steekwoorden kun je met een find-and-replace doen. Maar hierbij hou je wel altijd het probleem dat één woord meerdere (ongerelateerde) betekenissen kan hebben, afhankelijk van de context.

[Rekcor]

Ik heb die twee artikelen/pagina's doorgelezen en de aldaar gepresenteerde data-structuren lijken me wel erg ingewikkeld voor mijn doel.

In mijn voorbeeld zie je overigens al een probleem opdoemen: wat als je een 'fox' hebt als sleutelwoord, maar ook een 'red fox'? Dit wil ik oplossen door af te spreken dat het langste woord als eerste wordt geparsed, en dat een woord in de tekst max 1 sleutelwoord mag zijn.

Jouw probleem is nog lastiger: je hebt wel een 'appel', maar dat is wat anders dan 'Karel Appel'. Dit wil ik oplossen door de gebruiker de mogelijkheid te geven om woorden te 'beschermen' tegen sleutewoorden:

HTML:

<p>Karel <span data-protected="true">Appel</span> eet een <span data-keywordId="3">appel</span></p>

[HuHu]

Hoe laat je auteurs tekst invoeren? Ik neem aan in een editor? De editor zou woorden die in aanmerking komen voor tags kunnen highlighten, waarna de auteur kiest of ze worden toegepast?

Wat je nu steeds laat zien is de uiteindelijke HTML, zoals die in de browser komt. Dan hoeft "Appel" niet meer "protected" te zijn, want je kunt er server-side voor zorgen dat alleen "appel" die span-tag krijgt.

[Rekcor]

Hoe laat je auteurs tekst invoeren? Ik neem aan in een editor? De editor zou woorden die in aanmerking komen voor tags kunnen highlighten, waarna de auteur kiest of ze worden toegepast?

Inderdaad in een (waarschijnlijk CK)editor op een webpagina.

Goed idee, dank! En dan misschien ook een 'apply to all' knop erbij, want meestal zal de auteur wel willen dat alles wordt toegepast. Of: standaard wordt het toegepast, maar de auteur kan het gemakkelijk on-toepassen.