388 lines
No EOL
28 KiB
HTML
388 lines
No EOL
28 KiB
HTML
<?xml version="1.0" encoding="utf-8"?>
|
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
|
|
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
|
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
|
|
|
|
|
<meta name="keywords" content="m4, SVG, XSLT, XML, design, programmation, fractales">
|
|
|
|
<link rel="shortcut icon" type="image/x-icon" href="/Scratch/img/favicon.ico" />
|
|
<link rel="stylesheet" type="text/css" href="/Scratch/assets/css/main.css" />
|
|
<link rel="stylesheet" type="text/css" href="/Scratch/css/solarized.css" />
|
|
<link rel="stylesheet" type="text/css" href="/Scratch/css/idc.css" />
|
|
<link rel="alternate" type="application/rss+xml" title="RSS" href="http://feeds.feedburner.com/yannespositocomfr"/>
|
|
|
|
<link rel="alternate" lang="fr" xml:lang="fr" title="Accroître le pouvoir des languages déficients." type="text/html" hreflang="fr" href="/Scratch/fr/blog/SVG-and-m4-fractals/" />
|
|
<link rel="alternate" lang="en" xml:lang="en" title="Increase the power of deficient languages." type="text/html" hreflang="en" href="/Scratch/en/blog/SVG-and-m4-fractals/" />
|
|
<script type="text/javascript" src="/Scratch/js/jquery-1.3.1.min.js"></script>
|
|
<script type="text/javascript" src="/Scratch/js/jquery.cookie.js"></script>
|
|
<script type="text/javascript" src="/Scratch/js/index.js"></script>
|
|
<!--[if lt IE 9]>
|
|
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
|
|
<![endif]-->
|
|
<title>Accroître le pouvoir des languages déficients.</title>
|
|
</head>
|
|
<body lang="fr" class="article">
|
|
<script type="text/javascript">// <![CDATA[
|
|
document.write('<div id="blackpage"><img src="/Scratch/img/loading.gif" alt="Chargement en cours..."/></div>');
|
|
// ]]>
|
|
</script>
|
|
|
|
<div id="content">
|
|
|
|
<div id="choix">
|
|
<div class="return"><a href="#entete">↓ Menu ↓</a></div>
|
|
<div id="choixlang">
|
|
<a href="/Scratch/en/blog/SVG-and-m4-fractals/" onclick="setLanguage('en')">in English</a>
|
|
</div>
|
|
<div class="flush"></div>
|
|
</div>
|
|
<div id="titre">
|
|
<h1>
|
|
Accroître le pouvoir des languages déficients.
|
|
</h1>
|
|
|
|
<h2>
|
|
Fractales en SVG avec m4
|
|
</h2>
|
|
|
|
</div>
|
|
<div class="flush"></div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="flush"></div>
|
|
<div id="afterheader">
|
|
<div class="corps">
|
|
<p><img alt="Yesod logo made in SVG and m4" src="/Scratch/img/blog/SVG-and-m4-fractals/main.png" /></p>
|
|
|
|
|
|
<div class="intro">
|
|
|
|
|
|
<p><span class="sc"><abbr title="Trop long à lire">tlàl</abbr> : </span> Utiliser m4 pour accroître le pouvoir d’<span class="sc">xslt</span> et d’<span class="sc">svg</span>. Example cool, les fractales.</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<p>Lorsqu’<span class="sc">xml</span> fût inventé beaucoup pensaient que c’était l’avenir.
|
|
Passer de fichiers plat à des fichiers structurés standardisés fût un grand progrès dans beaucoup de domaines.
|
|
Cerain se mirent à voir du <span class="sc">xml</span> de partout.
|
|
À tel point que les les format compatibles <span class="sc">xml</span> naquirent de toute part.
|
|
Non seulement comme format de fichier, mais aussi comme format pour un langage de programmation.</p>
|
|
|
|
<p>Ô joie !</p>
|
|
|
|
<p>Malheureusement, <span class="sc">xml</span> fût fabriquer pour le transfert de données.
|
|
Pas du tout pour être vu ou édité directement.
|
|
La triste vérité est qu’<span class="sc">xml</span> est verbeux et laid.
|
|
Dans un monde parfait, nous ne devrions avoir des programmes qui s’occupent de nous afficher correctement le <span class="sc">xml</span> pour nous épargner la peine de les voir directement.
|
|
Mais devinez quoi ?
|
|
Notre monde n’est pas parfait.
|
|
Beaucoup de programmeurs sont ainsi forcé de travailler
|
|
directement avec de l’<span class="sc">xml</span>.</p>
|
|
|
|
<p><span class="sc">xml</span>, n’est pas le seul cas de format mal utilisé que je connaisse.
|
|
Vous avez d’autres formats dans lesquels il serait très agréable d’ajouter des variables, des boucles, des fonctions…</p>
|
|
|
|
<p>Mais je suis là pour vous aider.
|
|
Si comme moi vous détestez <span class="sc">xslt</span> ou écrire de l’<span class="sc">xml</span>.
|
|
Je vais vous montrer une façon d’améliorer tout ça.</p>
|
|
|
|
<h2 id="un-exemple-avec-span-classscxsltspan">Un exemple avec <span class="sc">xslt</span></h2>
|
|
|
|
<p>Commençons avec le pire cas de langage <span class="sc">xml</span> que je connaisse : <span class="sc">xslt</span>.
|
|
Tous les développeurs qui ont déjà dû écrire du <span class="sc">xslt</span> savent à quel point ce langage est horrible.</p>
|
|
|
|
<p>Pour réduire la “verbosité” de tels langages, il y a un moyen.
|
|
<strong><code>m4</code></strong>.
|
|
Oui, le préprocesseur utilisé par <code>C</code> et <code>C++</code>.</p>
|
|
|
|
<p>Voici certains exemples :</p>
|
|
|
|
<ul>
|
|
<li>Les variables, au lieu d’écrire <code>myvar = value</code>, voici la version <span class="sc">xslt</span> :</li>
|
|
</ul>
|
|
|
|
<pre class="twilight">
|
|
<span class="MetaTagAll"><span class="MetaTagAll"><</span><span class="MetaTagAll">xsl</span><span class="MetaTagAll"><span class="MetaTagAll">:</span></span><span class="MetaTagAll">variable</span> <span class="MetaTagAll">name</span>=<span class="String"><span class="String">"</span>myvar<span class="String">"</span></span> <span class="MetaTagAll">select</span>=<span class="String"><span class="String">"</span>value<span class="String">"</span></span><span class="MetaTagAll">/></span></span>
|
|
</pre>
|
|
|
|
<ul>
|
|
<li>Afficher quelquechose. Au lieu de <code>print "Hello world!"</code>, <span class="sc">xslt</span> nous offre :</li>
|
|
</ul>
|
|
|
|
<pre class="twilight">
|
|
<span class="MetaTagAll"><span class="MetaTagAll"><</span><span class="MetaTagAll">xsl</span><span class="MetaTagAll"><span class="MetaTagAll">:</span></span><span class="MetaTagAll">text</span> </span>
|
|
<span class="MetaTagAll"> <span class="MetaTagAll">disable-output-escaping</span>=<span class="String"><span class="String">"</span>yes<span class="String">"</span></span><span class="MetaTagAll">></span></span><span class="String"><span class="String"><![CDATA[</span>Hello world!</span>
|
|
<span class="String"><span class="String">]]></span></span><span class="MetaTagAll"><span class="MetaTagAll"></</span><span class="MetaTagAll">xsl</span><span class="MetaTagAll"><span class="MetaTagAll">:</span></span><span class="MetaTagAll">text</span><span class="MetaTagAll">></span></span>
|
|
</pre>
|
|
|
|
<ul>
|
|
<li>afficher la valeur d’une variable, au lieu de <code>print myvar</code>, nous avons droit à :</li>
|
|
</ul>
|
|
|
|
<pre class="twilight">
|
|
<span class="MetaTagAll"><span class="MetaTagAll"><</span><span class="MetaTagAll">xslt</span><span class="MetaTagAll"><span class="MetaTagAll">:</span></span><span class="MetaTagAll">value-of</span> <span class="MetaTagAll">select</span>=<span class="String"><span class="String">"</span>myvar<span class="String">"</span></span><span class="MetaTagAll">/></span></span>
|
|
</pre>
|
|
|
|
<ul>
|
|
<li>Essayez d’imaginer à quel point il est verbeux de déclarer une fonction dans ce langage.</li>
|
|
</ul>
|
|
|
|
<h2 id="la-solution-m4--la-rescousse">La solution (m4 à la rescousse)</h2>
|
|
|
|
<pre class="twilight">
|
|
<span class="DoctypeXmlProcessing"><span class="DoctypeXmlProcessing"><?</span><span class="DoctypeXmlProcessing">xml</span><span class="DoctypeXmlProcessing"> version</span>=<span class="DoctypeXmlProcessing"><span class="DoctypeXmlProcessing">"</span>1.0<span class="DoctypeXmlProcessing">"</span></span><span class="DoctypeXmlProcessing"> standalone</span>=<span class="DoctypeXmlProcessing"><span class="DoctypeXmlProcessing">"</span>yes<span class="DoctypeXmlProcessing">"</span></span><span class="DoctypeXmlProcessing">?></span></span> <span class="Comment"><span class="Comment"><!--</span> YES its <span class="sc">xml</span> <span class="Comment">--></span></span>
|
|
<span class="Comment"><span class="Comment"><!--</span> ← start a comment, then write some m4 directives:</span>
|
|
<span class="Comment"></span>
|
|
<span class="Comment">define(`ydef',`<xsl:variable name="$1" select="$2"/>')</span>
|
|
<span class="Comment">define(`yprint',`<xsl:text disable-output-escaping="yes"><![CDATA[$1]]></xsl:text>')</span>
|
|
<span class="Comment">define(`yshow',`<xsl:value-of select="$1"/>')</span>
|
|
<span class="Comment"></span>
|
|
<span class="Comment"><span class="Comment">--></span></span>
|
|
<span class="Comment"><span class="Comment"><!--</span> Yes, <span class="sc">xml</span> sucks to be read <span class="Comment">--></span></span>
|
|
<span class="MetaTagAll"><span class="MetaTagAll"><</span><span class="MetaTagAll">xsl</span><span class="MetaTagAll"><span class="MetaTagAll">:</span></span><span class="MetaTagAll">stylesheet</span> <span class="MetaTagAll">version</span>=<span class="String"><span class="String">"</span>1.0<span class="String">"</span></span> <span class="MetaTagAll">xmlns</span><span class="MetaTagAll"><span class="MetaTagAll">:</span></span><span class="MetaTagAll">xsl</span>=<span class="String"><span class="String">"</span>http://www.w3.org/1999/XSL/Transform<span class="String">"</span></span><span class="MetaTagAll">></span></span>
|
|
<span class="Comment"><span class="Comment"><!--</span> And it sucks even more to edit <span class="Comment">--></span></span>
|
|
<span class="MetaTagAll"><span class="MetaTagAll"><</span><span class="MetaTagAll">xsl</span><span class="MetaTagAll"><span class="MetaTagAll">:</span></span><span class="MetaTagAll">template</span> <span class="MetaTagAll">match</span>=<span class="String"><span class="String">"</span>/<span class="String">"</span></span><span class="MetaTagAll">></span></span>
|
|
ydef(myvar,value)
|
|
yprint(Hello world!)
|
|
yshow(myvar)
|
|
<span class="MetaTagAll"><span class="MetaTagAll"></</span><span class="MetaTagAll">xsl</span><span class="MetaTagAll"><span class="MetaTagAll">:</span></span><span class="MetaTagAll">template</span><span class="MetaTagAll">></span></span>
|
|
</pre>
|
|
|
|
<p>Maintenant compilons simplement ce fichier :</p>
|
|
|
|
<pre class="twilight">
|
|
m4 myfile.m4 <span class="Keyword">></span> myfile.xslt
|
|
</pre>
|
|
|
|
<p>Et vous pouvez profitez ! Maintenant <span class="sc">xslt</span> devient plus lisible et plus facile à éditer.</p>
|
|
|
|
<h2 id="la-partie-la-plus-cool-les-fractales-">La partie la plus cool: les fractales !</h2>
|
|
|
|
<p>À ses débuts, beaucoup pensaient que ce serait le nouveau Flash. Apparemment, ce devrait plutôt être <code>canvas</code> avec du javascript qui occupera cette place.</p>
|
|
|
|
<p>Tout d’abord, laissez moi vous montrer le résultat :</p>
|
|
|
|
<p><a href="/Scratch/img/blog/SVG-and-m4-fractals/main.svg">
|
|
<img alt="Yesod logo made in SVG and m4" src="/Scratch/img/blog/SVG-and-m4-fractals/main.png" />
|
|
Cliquez sur l’image pour voir le <span class="sc">svg</span> directement. Attention, si vous n’avez pas un ordinateur récent, ça risque de ramer.
|
|
</a></p>
|
|
|
|
<p>Le positionnement du texte “esod” par rapport au “λ” renversé a été en jouant avec firebug. De cette façon je n’avais pas à regénérer pour tester.</p>
|
|
|
|
<p>Faire une telle fractale revient à :</p>
|
|
|
|
<ol>
|
|
<li>Choisir un élément racine ;</li>
|
|
<li>le dupliquer et le transformer ;</li>
|
|
<li>le résultat est un nouveau sous-élément ;</li>
|
|
<li>répéter à partir de 2 mais en utilisant le sous-élément comme nouvelle racine.</li>
|
|
<li>Arréter lorsque la récursion est assez profonde.</li>
|
|
</ol>
|
|
|
|
<p>Si j’avais dû faire ça manuellement, il m’aurait fallu faire beaucoup de copier/coller dans mon <span class="sc">svg</span>.
|
|
Simplement parce que la transformation est toujours la même, mais je ne pouvais pas dire, utiliser la transformation appelée “titi”.
|
|
Plutôt que copier du <span class="sc">xml</span>, j’ai utilisé m4.</p>
|
|
|
|
<p>Et voici le code commenté :</p>
|
|
|
|
<div class="code"><div class="file"><a href="/Scratch/fr/blog/SVG-and-m4-fractals/code/yesodlogo.m4"> ➥ yesodlogo.m4 </a></div><div class="withfile">
|
|
<pre class="twilight">
|
|
<span class="DoctypeXmlProcessing"><span class="DoctypeXmlProcessing"><?</span><span class="DoctypeXmlProcessing">xml</span><span class="DoctypeXmlProcessing"> version</span>=<span class="DoctypeXmlProcessing"><span class="DoctypeXmlProcessing">"</span>1.0<span class="DoctypeXmlProcessing">"</span></span><span class="DoctypeXmlProcessing"> encoding</span>=<span class="DoctypeXmlProcessing"><span class="DoctypeXmlProcessing">"</span>UTF-8<span class="DoctypeXmlProcessing">"</span></span><span class="DoctypeXmlProcessing"> standalone</span>=<span class="DoctypeXmlProcessing"><span class="DoctypeXmlProcessing">"</span>no<span class="DoctypeXmlProcessing">"</span></span><span class="DoctypeXmlProcessing">?></span></span>
|
|
<span class="Comment"><span class="Comment"><!--</span></span>
|
|
<span class="Comment"> M4 Macros</span>
|
|
<span class="Comment">define(`YTRANSFORMONE', `scale(.43) translate(-120,-69) rotate(-10)')</span>
|
|
<span class="Comment">define(`YTRANSFORMTWO', `scale(.43) translate(-9,-67.5) rotate(10)')</span>
|
|
<span class="Comment">define(`YTRANSFORMTHREE', `scale(.43) translate(53,41) rotate(120)')</span>
|
|
<span class="Comment">define(`YGENTRANSFORM', `translate(364,274) scale(3)')</span>
|
|
<span class="Comment">define(`YTRANSCOMPLETE', `</span>
|
|
<span class="Comment"> <g id="level_$1"></span>
|
|
<span class="Comment"> <use style="opacity: .8" transform="YTRANSFORMONE" xlink:href="#level_$2" /></span>
|
|
<span class="Comment"> <use style="opacity: .8" transform="YTRANSFORMTWO" xlink:href="#level_$2" /></span>
|
|
<span class="Comment"> <use style="opacity: .8" transform="YTRANSFORMTHREE" xlink:href="#level_$2" /></span>
|
|
<span class="Comment"> </g></span>
|
|
<span class="Comment"> <use transform="YGENTRANSFORM" xlink:href="#level_$1" /></span>
|
|
<span class="Comment">')</span>
|
|
<span class="Comment"> <span class="Comment">--></span></span>
|
|
<span class="MetaTagAll"><span class="MetaTagAll"><</span><span class="MetaTagAll">svg</span> </span>
|
|
<span class="MetaTagAll"> <span class="MetaTagAll">xmlns</span>=<span class="String"><span class="String">"</span>http://www.w3.org/2000/svg<span class="String">"</span></span> </span>
|
|
<span class="MetaTagAll"> <span class="MetaTagAll">xmlns</span><span class="MetaTagAll"><span class="MetaTagAll">:</span></span><span class="MetaTagAll">xlink</span>=<span class="String"><span class="String">"</span>http://www.w3.org/1999/xlink<span class="String">"</span></span></span>
|
|
<span class="MetaTagAll"> <span class="MetaTagAll">x</span>=<span class="String"><span class="String">"</span>64<span class="String">"</span></span> <span class="MetaTagAll">y</span>=<span class="String"><span class="String">"</span>64<span class="String">"</span></span> <span class="MetaTagAll">width</span>=<span class="String"><span class="String">"</span>512<span class="String">"</span></span> <span class="MetaTagAll">height</span>=<span class="String"><span class="String">"</span>512<span class="String">"</span></span> <span class="MetaTagAll">viewBox</span>=<span class="String"><span class="String">"</span>64 64 512 512<span class="String">"</span></span></span>
|
|
<span class="MetaTagAll"> <span class="MetaTagAll">id</span>=<span class="String"><span class="String">"</span>svg2<span class="String">"</span></span> <span class="MetaTagAll">version</span>=<span class="String"><span class="String">"</span>1.1<span class="String">"</span></span><span class="MetaTagAll">></span></span>
|
|
<span class="MetaTagAll"><span class="MetaTagAll"><</span><span class="MetaTagAll">g</span> <span class="MetaTagAll">id</span>=<span class="String"><span class="String">"</span>level_0<span class="String">"</span></span><span class="MetaTagAll">></span></span> <span class="Comment"><span class="Comment"><!--</span> some group, if I want to add other elements <span class="Comment">--></span></span>
|
|
<span class="Comment"><span class="Comment"><!--</span> the text "λ" <span class="Comment">--></span></span>
|
|
<span class="MetaTagAll"><span class="MetaTagAll"><</span><span class="MetaTagAll">text</span> <span class="MetaTagAll">id</span>=<span class="String"><span class="String">"</span>lambda<span class="String">"</span></span> </span>
|
|
<span class="MetaTagAll"> <span class="MetaTagAll">fill</span>=<span class="String"><span class="String">"</span>#333<span class="String">"</span></span> <span class="MetaTagAll">style</span>=<span class="String"><span class="String">"</span>font-family:Ubuntu; font-size: 100px<span class="String">"</span></span></span>
|
|
<span class="MetaTagAll"> <span class="MetaTagAll">transform</span>=<span class="String"><span class="String">"</span>rotate(180)<span class="String">"</span></span><span class="MetaTagAll">></span></span>λ<span class="MetaTagAll"><span class="MetaTagAll"></</span><span class="MetaTagAll">text</span><span class="MetaTagAll">></span></span>
|
|
<span class="MetaTagAll"><span class="MetaTagAll"></</span><span class="MetaTagAll">g</span><span class="MetaTagAll">></span></span>
|
|
<span class="Comment"><span class="Comment"><!--</span> the text "esod" <span class="Comment">--></span></span>
|
|
<span class="MetaTagAll"><span class="MetaTagAll"><</span><span class="MetaTagAll">text</span> </span>
|
|
<span class="MetaTagAll"> <span class="MetaTagAll">fill</span>=<span class="String"><span class="String">"</span>#333<span class="String">"</span></span> </span>
|
|
<span class="MetaTagAll"> <span class="MetaTagAll">style</span>=<span class="String"><span class="String">"</span>font-family:Ubuntu; font-size: 28px; letter-spacing: -0.10em<span class="String">"</span></span> </span>
|
|
<span class="MetaTagAll"> <span class="MetaTagAll">x</span>=<span class="String"><span class="String">"</span>-17.3<span class="String">"</span></span> </span>
|
|
<span class="MetaTagAll"> <span class="MetaTagAll">y</span>=<span class="String"><span class="String">"</span>69<span class="String">"</span></span> </span>
|
|
<span class="MetaTagAll"> <span class="MetaTagAll">transform</span>=<span class="String"><span class="String">"</span>YGENTRANSFORM<span class="String">"</span></span><span class="MetaTagAll">></span></span>esod<span class="MetaTagAll"><span class="MetaTagAll"></</span><span class="MetaTagAll">text</span><span class="MetaTagAll">></span></span>
|
|
<span class="Comment"><span class="Comment"><!--</span> ROOT ELEMENT <span class="Comment">--></span></span>
|
|
<span class="MetaTagAll"><span class="MetaTagAll"><</span><span class="MetaTagAll">use</span> <span class="MetaTagAll">transform</span>=<span class="String"><span class="String">"</span>YGENTRANSFORM<span class="String">"</span></span> <span class="MetaTagAll">xlink</span><span class="MetaTagAll"><span class="MetaTagAll">:</span></span><span class="MetaTagAll">href</span>=<span class="String"><span class="String">"</span>#level_0<span class="String">"</span></span> <span class="MetaTagAll">/></span></span>
|
|
|
|
YTRANSCOMPLETE(1,0) <span class="Comment"><span class="Comment"><!--</span> First recursion <span class="Comment">--></span></span>
|
|
YTRANSCOMPLETE(2,1) <span class="Comment"><span class="Comment"><!--</span> deeper <span class="Comment">--></span></span>
|
|
YTRANSCOMPLETE(3,2) <span class="Comment"><span class="Comment"><!--</span> deeper <span class="Comment">--></span></span>
|
|
YTRANSCOMPLETE(4,3) <span class="Comment"><span class="Comment"><!--</span> even deeper <span class="Comment">--></span></span>
|
|
YTRANSCOMPLETE(5,4) <span class="Comment"><span class="Comment"><!--</span> Five level seems enough <span class="Comment">--></span></span>
|
|
<span class="MetaTagAll"><span class="MetaTagAll"></</span><span class="MetaTagAll">svg</span><span class="MetaTagAll">></span></span>
|
|
</pre>
|
|
</div></div>
|
|
|
|
<p>et je l’ai compile en <span class="sc">svg</span> et ensuite en <span class="sc">png</span> avec :</p>
|
|
|
|
<pre class="twilight">
|
|
m4 yesodlogo.m4 <span class="Keyword">></span> yesodlogo.svg <span class="Keyword">&&</span> convert yesodlogo.svg yesodlogo.png
|
|
</pre>
|
|
|
|
<p>Le λ est dupliqué avec trois “transformations” différentes. Les transformations sont : <code>YTRANSFORMONE</code>, <code>YTRANSFORMTWO</code> et <code>YTRANSFORMTHREE</code>.</p>
|
|
|
|
<p>Chaque transformation est une similarité (translation + rotation + zoom, ce qui est équivalent à juste rotation + zoom, mais bon).</p>
|
|
|
|
<p>Une fois fixée chaque transformation peut ensuite être réutilisée pour chaque nouveau niveau.</p>
|
|
|
|
<p>Maintenant <code>YTRANSCOMPLETE</code> entre en jeu.
|
|
Cette macro prend deux arguments.
|
|
Le niveau courant et le niveau précédent.
|
|
Cette macro va dupliquer le niveau précédent en lui appliquant chacune des 3 transformations.
|
|
Au niveau 0, le contenu est un seul grand λ, le niveau 1 en contient 3. Le niveau 2 en contient 9, etc…
|
|
Le niveau 5 contient 3<sup>5</sup>=243 λ.
|
|
Tous les niveaux combinés représentent 3<sup>6</sup>-1 / 2 = 364 λ.</p>
|
|
|
|
<p>L’avantage principal c’est que je pouvais visualiser le résultat final facilement.
|
|
Sans ce système de macro, pour faire une preview il m’aurait fallu faire des copier/coller + quelques modifications à chaque essai.</p>
|
|
|
|
<h2 id="conclusion">Conclusion</h2>
|
|
|
|
<p>Ce fut très amusant de faire une fractale en <span class="sc">svg</span>, mais la partie la plus intéressante était d’augmenter la puissance d’expressivité du langage en utilise un préprocesseur.
|
|
J’ai utilisé cette méthode avec <span class="sc">xslt</span> pour une vrai application par exemple.
|
|
On peut aussi utiliser m4 pour faire des includes d’autres fichiers.
|
|
Typiquement je l’ai utiliser pour les includes dans un format obscur.
|
|
Mais vous pouvez aussi le considérer pour des includes dans du HTML.
|
|
Par exemple pour fabriquer un site statique rapidement, m4 peut se révéler utile pour inclure un footer ou un menu sur toutes les pages par exemple.
|
|
J’ai aussi pensé que l’on pouvait utiliser m4 pour structurer des programmes comme brainfuck.</p>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div id="choixrss">
|
|
<a id="rss" href="http://feeds.feedburner.com/yannespositocomfr">
|
|
s'abonner
|
|
</a>
|
|
</div>
|
|
<script type="text/javascript">
|
|
$(document).ready(function(){
|
|
$('#comment').hide();
|
|
$('#clickcomment').click(showComments);
|
|
});
|
|
function showComments() {
|
|
$('#comment').show();
|
|
$('#clickcomment').fadeOut();
|
|
}
|
|
document.write('<div id="clickcomment">Commentaires</div>');
|
|
</script>
|
|
<div class="flush"></div>
|
|
<div class="corps" id="comment">
|
|
<h2 class="first">commentaires</h2>
|
|
<noscript>
|
|
Vous devez activer javascript pour commenter.
|
|
</noscript>
|
|
|
|
<script type="text/javascript">
|
|
var idcomments_acct = 'a307f0044511ff1b5cfca573fc0a52e7';
|
|
var idcomments_post_id = '/Scratch/fr/blog/SVG-and-m4-fractals/';
|
|
var idcomments_post_url = 'http://yannesposito.com/Scratch/fr/blog/SVG-and-m4-fractals/';
|
|
</script>
|
|
<span id="IDCommentsPostTitle" style="display:none"></span>
|
|
<script type='text/javascript' src='/Scratch/js/genericCommentWrapperV2.js'></script>
|
|
|
|
</div>
|
|
|
|
<div id="entete" class="corps_spaced">
|
|
<div id="liens">
|
|
<ul><li><a href="/Scratch/fr/">Bienvenue</a></li>
|
|
<li><a href="/Scratch/fr/blog/">Blog</a></li>
|
|
<li><a href="/Scratch/fr/softwares/">Softwares</a></li>
|
|
<li><a href="/Scratch/fr/about/">À propos</a></li></ul>
|
|
</div>
|
|
<div class="flush"></div>
|
|
<hr/>
|
|
<div id="next_before_articles">
|
|
<div id="previous_articles">
|
|
articles précédents
|
|
|
|
<div class="previous_article">
|
|
<a href="/Scratch/fr/blog/Yesod-excellent-ideas/"><span class="nicer">«</span> Les idées de yesod</a>
|
|
</div>
|
|
|
|
|
|
<div class="previous_article">
|
|
<a href="/Scratch/fr/blog/Higher-order-function-in-zsh/"><span class="nicer">«</span> Fonctions d'ordre supérieur en zsh</a>
|
|
</div>
|
|
|
|
|
|
<div class="previous_article">
|
|
<a href="/Scratch/fr/blog/programming-language-experience/"><span class="nicer">«</span> Mon expérience avec les languages de programmation</a>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
<div id="next_articles">
|
|
articles suivants
|
|
|
|
<div class="next_article">
|
|
<a href="/Scratch/fr/blog/Yesod-tutorial-for-newbies/">Site en Haskell <span class="nicer">»</span></a>
|
|
</div>
|
|
|
|
|
|
<div class="next_article">
|
|
<a href="/Scratch/fr/blog/Typography-and-the-Web/">La typography et le Web <span class="nicer">»</span></a>
|
|
</div>
|
|
|
|
|
|
<div class="next_article">
|
|
<a href="/Scratch/fr/blog/Haskell-the-Hard-Way/">Haskell comme un vrai! <span class="nicer">»</span></a>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
<div class="flush"></div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="bottom">
|
|
<div>
|
|
<a href="http://twitter.com/yogsototh">Suivez-moi</a>
|
|
</div>
|
|
<div>
|
|
<a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/deed.fr">Droits de reproduction ©, Yann Esposito</a>
|
|
</div>
|
|
<div id="lastmod">
|
|
Écrit le : 20/10/2011
|
|
modifié le : 16/11/2011
|
|
</div>
|
|
<div>
|
|
Site entièrement réalisé avec
|
|
<a href="http://www.vim.org">Vim</a>
|
|
et
|
|
<a href="http://nanoc.stoneship.org">nanoc</a>
|
|
</div>
|
|
</div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
</body>
|
|
</html> |