XML via XSLT omvormen naar HTML en naar andere XML
Voor de eerste opdracht dienden we te werken met XML en InDesign. In onze groep kozen we ervoor aan de slag te gaan met een trappisten-catalogus (© Colruyt). Concreet kwam het er op neer een catalogus op te maken in InDesign, deze vervolgens te exporteren naar XML, om hem daarna weer — na de nodige transformaties — als getagde tekst te importeren in een ander InDesign-document. Tevens moesten we voorzien in een XSLT-bestand voor conversie van de XML-data naar een webpagina.
Uitgaande van een XML-bestand met alle nodige catalogus-gegevens, is hier duidelijk sprake van enkele omzettingen of transformaties.
- XML → XSLT → HTML;
- XML → XSLT → XML voor InDesign-import.
Vooreerst overlopen we eventjes hoe het XML-bronbestand eruit ziet, vervolgens nemen we de verschillende XSLT-bestanden onder de loep.
De XML waar alles mee begint
Deze code snippet is puur ter illustratie van de opbouw van het XML-bestand, en bevat slechts twee nodes; het werkelijke bestand is uiteraard iets groter.
<?xml version="1.0" encoding="UTF-8"?>
<Dranken>
<Bier>
<Naam>Brigand</Naam>
<Beschrijving>Een amberkleurig bier met een karaktervolle smaak. Licht bitter dankzij de fijne hop.</Beschrijving>
<Temperatuur>8 - 10</Temperatuur>
<Graden>9</Graden>
<Hoeveelheid>6 × 33 cl</Hoeveelheid>
</Bier>
<Bier>
<Naam>Brugse Tripel</Naam>
<Beschrijving>Traditionele, lichtbruine tripel uit Brugge, hergist op de fles. Heeft een aangename lichtzoete smaak: een afgerond moutkarakter, een geparfumeerde hoptoets en een lekkere combinatie van verschillende smaken.</Beschrijving>
<Temperatuur>8 - 12</Temperatuur>
<Graden>9</Graden>
<Hoeveelheid>6 × 33 cl</Hoeveelheid>
</Bier>
</Dranken>Van XML naar HTML
De XML-gegevens worden via XSLT in een HTML-webpagina gegoten. De opmaak wordt verzorgd door middel van CSS.
XSLT: naar-html.xsl
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" doctype-public="-//W3C//DTD HTML 4.01//EN" omit-xml-declaration="yes" encoding="UTF-8" indent="yes" />
<xsl:template match="/">
<html>
<head>
<title>Folder Colruyt</title>
<link rel="stylesheet" type="text/css" href="opmaak.css" />
</head>
<body>
<h1>Folder</h1>
<xsl:for-each select="Dranken/Bier">
<div class="artikel">
<h2><xsl:value-of select="Naam" /></h2>
<p class="afbeelding"><img src="../images/{translate(translate(translate(translate(translate(translate(Naam, ' ', ''), '(', ''), ')', ''), '-', ''), 'é', 'e'), 'è', 'e')}.jpg" alt="Foto van {Naam}" /></p>
<p class="beschrijving"><xsl:value-of select="Beschrijving" /></p>
<ul>
<li class="temperatuur">Schenken op <xsl:value-of select="Temperatuur" />° <abbr title="Celsius">C</abbr></li>
<li class="graden"><abbr title="Alcohol">Alc.</abbr><xsl:text> </xsl:text><xsl:value-of select="Graden" />% <abbr title="volume">vol</abbr></li>
<li class="hoeveelheid"><xsl:value-of select="Hoeveelheid" /></li>
</ul>
</div>
</xsl:for-each>
</body>
</html>
</xsl:template>
</xsl:stylesheet>Resulterende HTML
Deze code snippet is puur ter illustratie van de opbouw van het HTML-bestand, en bevat slechts twee bieren; het werkelijke bestand is uiteraard iets groter.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Folder Colruyt</title>
<link rel="stylesheet" type="text/css" href="opmaak.css">
</head>
<body>
<h1>Folder</h1>
<div class="artikel">
<h2>Brigand</h2>
<p class="afbeelding"><img src="../images/Brigand.jpg" alt="Foto van Brigand"></p>
<p class="beschrijving">Een amberkleurig bier met een karaktervolle smaak. Licht bitter dankzij de fijne hop.</p>
<ul>
<li class="temperatuur">Schenken op 8 - 10° <abbr title="Celsius">C</abbr></li>
<li class="graden"><abbr title="Alcohol">Alc.</abbr> 9% <abbr title="volume">vol</abbr></li>
<li class="hoeveelheid">6 × 33 cl</li>
</ul>
</div>
<div class="artikel">
<h2>Brugse Tripel</h2>
<p class="afbeelding"><img src="../images/BrugseTripel.jpg" alt="Foto van Brugse Tripel"></p>
<p class="beschrijving">Traditionele, lichtbruine tripel uit Brugge, hergist op de fles. Heeft een aangename lichtzoete smaak: een afgerond moutkarakter, een geparfumeerde hoptoets en een lekkere combinatie van verschillende smaken.</p>
<ul>
<li class="temperatuur">Schenken op 8 - 12° <abbr title="Celsius">C</abbr></li>
<li class="graden"><abbr title="Alcohol">Alc.</abbr> 9% <abbr title="volume">vol</abbr></li>
<li class="hoeveelheid">6 × 33 cl</li>
</ul>
</div>
</body>
</html>Van XML naar XML voor InDesign
De XML-data wordt via XSLT omgevormd naar een uitgebreider XML-bestand, waarin ook de bestandsnaam van de afbeelding voor elk bier is opgenomen. Dit is nodig voor latere import in InDesign. Deze bestandsnaam wordt bepaald door de naam van het bier (<Naam> in het XML-bestand), waaruit bepaalde karakters (zoals spaties) worden verwijderd. Deze stap is noodzakelijk omdat XSLT binnen InDesign beperkte functionaliteiten heeft. Een reeds geprepareerde XML-invoerstroom is daarom efficiënter dan zomaar het basis-XML-bestand te gebruiken.
XSLT: naar-indesign-xml.xsl
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<!--
indent="no" want bij het importeren naar InDesign komt de whitespace mee :(
Een leesbare versie van de output bevindt zich in dezelfde map als dit bestand.
-->
<xsl:output method="xml" omit-xml-declaration="no" encoding="UTF-8" indent="no" />
<xsl:template match="/">
<Dranken>
<xsl:for-each select="Dranken/Bier">
<Bier>
<Naam><xsl:value-of select="Naam" /></Naam>
<Beschrijving><xsl:value-of select="Beschrijving" /></Beschrijving>
<Temperatuur>Schenken op <xsl:value-of select="Temperatuur" />° C</Temperatuur>
<Graden>Alc. <xsl:value-of select="Graden" />% vol.</Graden>
<Hoeveelheid><xsl:value-of select="Hoeveelheid" /></Hoeveelheid>
<Afbeelding href="file://images/{translate(translate(translate(translate(translate(translate(Naam, ' ', ''), '(', ''), ')', ''), '-', ''), 'é', 'e'), 'è', 'e')}.jpg" />
</Bier>
</xsl:for-each>
</Dranken>
</xsl:template>
</xsl:stylesheet>Resulterende XML
Deze code snippet is puur ter illustratie van de opbouw van het XML-bestand, en bevat slechts twee nodes; het werkelijke bestand is uiteraard iets groter.
<?xml version="1.0" encoding="UTF-8" ?>
<Dranken>
<Bier>
<Naam>Brigand</Naam>
<Beschrijving>Een amberkleurig bier met een karaktervolle smaak. Licht bitter dankzij de fijne hop.</Beschrijving>
<Temperatuur>Schenken op 8 - 10° C</Temperatuur>
<Graden>Alc. 9% vol.</Graden>
<Hoeveelheid>6 × 33 cl</Hoeveelheid>
<Afbeelding href="file://images/Brigand.jpg" />
</Bier>
<Bier>
<Naam>Brugse Tripel</Naam>
<Beschrijving>Traditionele, lichtbruine tripel uit Brugge, hergist op de fles. Heeft een aangename lichtzoete smaak: een afgerond moutkarakter, een geparfumeerde hoptoets en een lekkere combinatie van verschillende smaken.</Beschrijving>
<Temperatuur>Schenken op 8 - 12° C</Temperatuur>
<Graden>Alc. 9% vol.</Graden>
<Hoeveelheid>6 × 33 cl</Hoeveelheid>
<Afbeelding href="file://images/BrugseTripel.jpg" />
</Bier>
</Dranken>
Mooi uitgewerkt. Je kunt dus in een editorvenster van WordPress ook HTML-code voorzien net zoals bij DRUPAL. Uiteraard want WordPress is DRUPAL!?
| Geplaatst 3 years, 3 months agoWordPress
!=Drupal ;)Maar uiteraard is dit mogelijk, het is gewoon een kwestie van de juiste HTML te gebruiken. Code snippets worden in een
PRE-element vervat (omdat code-voorbeeldjes een vorm van voorgeformatteerde tekst zijn), met daarin nog eens eenCODE-element (omdat het code betreft).Opdat de snippets niet als HTML geparset zouden worden, moeten we ook de speciale karakters vervangen door hun respectievelijke entities. Zo wordt
| Geplaatst 3 years, 3 months ago<Dranken>geschreven als<Dranken>. Om dit proces te vergemakkelijken, gebruiken we de HTML entities converter die u ook bij de links op onze homepagina terugvindt.