L'un des objectifs de ce site est de me permettre d'apprendre différentes technologies. Mais comme tout apprentissage il ne se fait pas sans rencontrer des (petits) problèmes. Voici donc comment je les ai résolus.
L'un des objectifs de ce site est de me permettre d'apprendre différentes technologies. Mais comme tout apprentissage il ne se fait pas sans rencontrer des (petits) problèmes. Voici donc comment je les ai résolus.
Je voulais, à partir d'un même fichier XML générer plusieurs pages HTML comme je l'avais fait à partir de fichiers SGML avec les DSSL.
La chose était possible puisque utilisée par DocBook, mais je ne trouvais rien chez W3C. Je ne garanti pas qu'il n'y a rien, mais que je n'ai rien trouvé.
Je suis donc partie en exploration dans les fichiers DocBook (chuncker.xsl en particulier) et ai fini par comprendre comment ça marchait. Il fallait utiliser exsl:document qui permet l'écriture dans un fichier donné avec les mêmes attributs que xsl:output
<xsl:template name="write.chunk">
<xsl:param name="filename" select="''"/>
<xsl:param name="content"/>
<xsl:variable name="method">html</xsl:variable>
<xsl:variable name="encoding">ISO-8859-15</xsl:variable>
<exsl:document href="{$filename}" method="{$method}">
<xsl:copy-of select="$content"/>
</exsl:document>
</xsl:template>
Le site devant comporter des images je les ai fait en format PNG et souvent avec une bordure transparente pour un meilleur rendu, enfin c'est ce que je croyais, mais lorsque j'ai visualisé mes pages sous IE, les images n'étaient vraiement pas belles. J'étais tombée dans un des multiples problèmes de compatibilité IE-Le reste du monde.
J'ai entendu parler d'une solution sur le forum de gimp-attitude.org: il s'agissait d'utiliser un script java exécuté uniquement sous IE.
Les images background étant directement indiquées dans le fichier CSS, le script java ne pouvait pas être utilisé pour elles. Il fallait donc une autre solution.
La solution consistait à utiliser un filter reconnu par IE et mettre une image en background sur les éléments concernés ayant un attribut class (IE ne comprend pas et n'en tient pas compte). J'ai trouvé la solution sur le forum de alsacreations.com.
body.presentation
{
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,
sizingMethod=crop src='../images/background_fract1.png');
zoom: 1; /* est-ce réellement utile? */
}
body.presentation[class]
{
background-image:url('images/background_fract1.png');
background-repeat:no-repeat;
}
Celà à marché, mais les liens n'étaient plus actifs, la solution m'a été fournie au même endroit.
a
{
position: relative;
z-index: 1; /* pour que ce soit au dessus de l'image sous IE */
}
La résolution de l'un des problèmes précédant passait par l'écriture dans le fichier HTML d'un commentaire conditionnel depuis la transformation xsl. J'avais beau essayer xsl:text, xsl:comment, impossible de fermer le commentaire conditionnel. La solution m'a été fourni sur le forum d'alsacreations.com
Il fallait utiliser CDATA
<xsl:comment>[if lt IE 7]>
<![CDATA[<script defer src="]]>
<xsl:value-of select="$loc.js"/> <xsl:value-of select="$name.js"/>
<![CDATA[" type="text/javascript">
</script>
<! endif ]]>
x</xsl:comment>
J'ai voulu passer mes pages HTML au valideur X3C et là, pas mal d'erreurs ont été signalées: pas de DTD, balise META non fermée. j'ai donc rajouté les paramètres qu'il fallait à mon xsl:output, mais ça ne marchait toujours pas, comme si les paramètres n'étaient pas pris en compte.
Et puis j'ai commencé à écrire cette page et .... il fallait juste que je mette les paramètres à mon exsl:document et non xsl:output et que je dise générer du xml et non du HTML comme indiqué sur le forum (XSLT qui ne ferme pas les balises)
<xsl:template name="write.chunk">
<xsl:param name="filename" select="''"/>
<xsl:param name="content"/>
<xsl:variable name="method">xml</xsl:variable> <!-- et non html -->
<xsl:variable name="encoding">ISO-8859-15</xsl:variable>
<xsl:variable name="indent">yes</xsl:variable>
<xsl:variable name="media-type">text/html</xsl:variable>
<xsl:variable name="omit-xml-declaration">yes</xsl:variable>
<xsl:variable name="doctype-public">-//W3C//DTD XHTML 1.0 Strict//EN</xsl:variable>
<xsl:variable name="doctype-system">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd</xsl:variable>
<exsl:document href="{$filename}" method="{$method}" encoding="{$encoding}" indent="{$indent}"
media-type="{$media-type}" omit-xml-declaration="{$omit-xml-declaration}"
doctype-public="{$doctype-public}" doctype-system="{$doctype-system}">
<xsl:copy-of select="$content"/>
</exsl:document>
</xsl:template>
Du coup mes fichiers générés sont aussi devenus plus lisible puisque l'indent="yes" était enfin pris en compte!
problème sur l'alignement des personnages: la deuxième ligne ne commence pas en début de ligne
Une solution de contournement (temporaire?)
Fixer la taille (width et height) des vignettes.
Le problème était de pouvoir présenter dans cette page des exemples de code xsl, xml, ...
J'ai commencé compliqué :-) en rajoutant une DTD puis en tentant un XMLSchema avant de me dire: "Bon sang mais c'est bien sur! Revenons aux choses simples, utilisons <![CDATA[ ... ]]> dans le XML et la balise <pre> dans le XHTML. Sans oublier d'écrire < et > pour < et > (et & pour le & bien sur :-) )"
dans le XML
<code>
<![CDATA[
body.presentation
{
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,
sizingMethod=crop src='../images/background_fract1.png');
zoom: 1; /* est-ce réellement utile? */
}
body.presentation[class]
{
background-image:url('images/background_fract1.png');
background-repeat:no-repeat;
}
]]>
</code>
dans la stylesheet XSLT
<xsl:template match="code">
<xsl:param name="type" select="'TBD'"/>
<pre class="{$type}">
<xsl:value-of select="."/>
</pre>
</xsl:template>
Pour les amoureux de la technique:
Ce site a été généré à partir de données XML, une transformation XSLT et est affiché grâce à des informations CSS (voir http://www.w3schools.com/).
Les images ont été réalisées à l'aide de l'outil Gimp.