<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	xmlns:georss="http://www.georss.org/georss" xmlns:geo="http://www.w3.org/2003/01/geo/wgs84_pos#" xmlns:media="http://search.yahoo.com/mrss/"
	>

<channel>
	<title>Sébastien Devaux - Consultant Technique &#187; xsl</title>
	<atom:link href="http://blog.hic-et-nunc.me/tag/xsl/feed/" rel="self" type="application/rss+xml" />
	<link>http://blog.hic-et-nunc.me</link>
	<description>Le carnet de bord des projets du boulot, des innovations du moment testées, des méthodes etc.</description>
	<lastBuildDate>Thu, 31 Mar 2011 11:31:06 +0000</lastBuildDate>
	<language>fr</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.com/</generator>
<cloud domain='blog.hic-et-nunc.me' port='80' path='/?rsscloud=notify' registerProcedure='' protocol='http-post' />
<image>
		<url>http://1.gravatar.com/blavatar/3818fff6ee1f41172c12ef12094e6dc1?s=96&#038;d=http%3A%2F%2Fs2.wp.com%2Fi%2Fbuttonw-com.png</url>
		<title>Sébastien Devaux - Consultant Technique &#187; xsl</title>
		<link>http://blog.hic-et-nunc.me</link>
	</image>
	<atom:link rel="search" type="application/opensearchdescription+xml" href="http://blog.hic-et-nunc.me/osd.xml" title="Sébastien Devaux - Consultant Technique" />
	<atom:link rel='hub' href='http://blog.hic-et-nunc.me/?pushpress=hub'/>
		<item>
		<title>Site web en trois lignes avec XSL</title>
		<link>http://blog.hic-et-nunc.me/2009/07/18/site-web-en-trois-lignes-avec-xsl/</link>
		<comments>http://blog.hic-et-nunc.me/2009/07/18/site-web-en-trois-lignes-avec-xsl/#comments</comments>
		<pubDate>Sat, 18 Jul 2009 21:07:00 +0000</pubDate>
		<dc:creator>Sébastien Devaux</dc:creator>
				<category><![CDATA[Idée]]></category>
		<category><![CDATA[Innovation]]></category>
		<category><![CDATA[web]]></category>
		<category><![CDATA[xsl]]></category>

		<guid isPermaLink="false">http://sebastiendevaux.wordpress.com/2009/07/18/site-web-en-trois-lignes-avec-xsl</guid>
		<description><![CDATA[L&#8217;apparition de CSS a permis il y a quelque temps de séparer dans une page web sa structure (un cadre à droite, une image sur la gauche, un menu en haut, etc) de sa mise en forme (le cadre est vert, l&#8217;image est encadrée, le menu est décalé en haut, etc). Mais aujourd&#8217;hui avec XSLT [...]<img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=blog.hic-et-nunc.me&amp;blog=9216399&amp;post=17&amp;subd=sebastiendevaux&amp;ref=&amp;feed=1" width="1" height="1" />]]></description>
			<content:encoded><![CDATA[<div style="text-align:justify;">L&#8217;apparition de CSS a permis il y a quelque temps de séparer dans une page web sa structure  (un cadre à droite, une image sur la gauche, un menu en haut, etc) de sa mise en forme (le cadre est vert, l&#8217;image est encadrée, le menu est décalé en haut, etc).</p>
<p>Mais aujourd&#8217;hui avec <a href="http://fr.wikipedia.org/wiki/XSLT">XSLT</a> on a mieux :<a href="http://upload.wikimedia.org/wikipedia/commons/thumb/a/aa/TempFrXslt015.svg/231px-TempFrXslt015.svg.png"><img class="alignright" src="http://upload.wikimedia.org/wikipedia/commons/thumb/a/aa/TempFrXslt015.svg/231px-TempFrXslt015.svg.png" border="0" alt="" width="98" height="187" /></a></div>
<ul style="text-align:justify;">
<li>La mise en forme : <span style="font-weight:bold;">CSS.</span><span> Tout le monde connait !</span></li>
<li>Les traitements : <span style="font-weight:bold;"><span>XSL</span></span><span style="font-weight:bold;"><span><span style="font-weight:bold;">.</span></span></span><span><span> Vulgairement : dans une feuille <a href="http://fr.wikipedia.org/wiki/XSL">XSL</a> on utilise un langage pour transformer le XML (XSLT), un langage d&#8217;interrogation qui permet de sélectionne</span></span><span><span>r les balises XML (XPath) et un truc qui ne sert à rien dans notre cas, XSL-FO. </span></span></li>
<li>Les données : <span style="font-weight:bold;">XML.</span> Tout le monde connait  !</li>
</ul>
<div style="text-align:justify;">
<p>Commencez par créer une feuille CSS, un fichier balisé XML et votre feuille XSL. Maintenant buvez deux litres de bière et résumez : mon XSLT analyse (&#8220;parse&#8221; en anglais) les balises qu&#8217;on sélectionne avec XPath et les transforme en (X)HTML (ou autre), puis mon CSS associe des attributs de formatage aux classes d&#8217;éléments lors de l&#8217;affichage dans le navigateur.</p>
<p>Mais les fichiers XML de données structurées (écrit dans un <a href="http://beta.xmlfr.org/wiki/index.php/Vocabulaire_XML">vocabulaire</a> spécifique) existent déjà dans une base de données  : une structure  (des colonnes dans des tables) et des données (des tuples). D&#8217;ailleurs l&#8217;intérêt du XML n&#8217;est que de stocker sous forme structurée des données.<br />
Voici (en simplifiant) un tuple de la table <span style="font-style:italic;">personne dont </span>les colonnes sont <span style="font-style:italic;">id</span>, <span style="font-style:italic;">nom </span>et <span style="font-style:italic;">prenom</span>, traduit en XML :<br />
<span style="color:#c0c0c0;">&lt;</span><span style="color:#c0c0c0;font-style:italic;font-size:100%;">personne id=&#8221;1&#8243; nom=&#8221;Duchnoc&#8221; prenom=&#8221;Robert&#8221; /&gt;</span><br />
Il suffit donc d&#8217;appliquer les traitements XSLT directement sur le résultat  XML des requêtes, associer la feuille CSS, et le tour est joué ; vous avez crée une page en 3 lignes, bravo !<a href="http://sebastiendevaux.files.wordpress.com/2009/07/xsl_bdd.png"><img class="alignright" src="http://sebastiendevaux.files.wordpress.com/2009/07/xsl_bdd.png?w=90&#038;h=171" border="0" alt="" width="90" height="171" /></a><br />
Voilà le processus :</p>
<ol>
<li>Je requête ma base de données</li>
<li>Je transforme le résultat balisé XML avec ma feuille XSL en (X)HTML</li>
<li>J&#8217;associe la mise en forme CSS au résultat qui sera mis en forme lors de l&#8217;affichage dans le navigateur.</li>
</ol>
<p>Pour aller plus loin, il suffirait de concevoir le modèle d&#8217;une méta-base d&#8217;un site web contenant la structure et le contenu pour qu&#8217;en trois fichiers vous puissiez créer un site dynamique en entier.</p></div>
<br />  <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gocomments/sebastiendevaux.wordpress.com/17/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/comments/sebastiendevaux.wordpress.com/17/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/godelicious/sebastiendevaux.wordpress.com/17/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/delicious/sebastiendevaux.wordpress.com/17/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gofacebook/sebastiendevaux.wordpress.com/17/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/facebook/sebastiendevaux.wordpress.com/17/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gotwitter/sebastiendevaux.wordpress.com/17/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/twitter/sebastiendevaux.wordpress.com/17/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gostumble/sebastiendevaux.wordpress.com/17/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/stumble/sebastiendevaux.wordpress.com/17/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/godigg/sebastiendevaux.wordpress.com/17/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/digg/sebastiendevaux.wordpress.com/17/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/goreddit/sebastiendevaux.wordpress.com/17/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/reddit/sebastiendevaux.wordpress.com/17/" /></a> <img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=blog.hic-et-nunc.me&amp;blog=9216399&amp;post=17&amp;subd=sebastiendevaux&amp;ref=&amp;feed=1" width="1" height="1" />]]></content:encoded>
			<wfw:commentRss>http://blog.hic-et-nunc.me/2009/07/18/site-web-en-trois-lignes-avec-xsl/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
	
		<media:content url="http://1.gravatar.com/avatar/5c93c87de1813aadce2593fb11299781?s=96&#38;d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D96&#38;r=G" medium="image">
			<media:title type="html">sebastiendevaux</media:title>
		</media:content>

		<media:content url="http://upload.wikimedia.org/wikipedia/commons/thumb/a/aa/TempFrXslt015.svg/231px-TempFrXslt015.svg.png" medium="image" />

		<media:content url="http://sebastiendevaux.files.wordpress.com/2009/07/xsl_bdd.png?w=158" medium="image" />
	</item>
	</channel>
</rss>
