Gestion de contenu HTML & CSS Export de données

Par défaut, l'ensemble des templates utilisés par Kiubi génèrent un code en XHTML (1.0 transitionnal, pour être précis). Il est cependant possible d'utiliser des templates qui génèrent un code en XML. La procédure est simple et consiste à utiliser un template XML associé à un nouvel ensemble de mise en page dont le contenu sera ajouté grâce à un type de billet particulier, lui aussi en XML. La condition préalable étant d'utiliser un thème graphique personnalisé afin de pouvoir accéder à l'édition des templates.

Générer un flux XML permet par exemple d'utiliser l'API de GoogleMaps, d'inclure dynamiquement du contenu de votre site dans du Flash ou de créer des flux RSS sur mesure (par exemple un flux sur les nouveaus produits disponibles...).

Pour illustrer ce tutorial, nous prendrons comme exemple l'utilisation de l'API de GoogleMaps, comme on peut en avoir un exemple ici. Le code XML que nous souhaitons obtenir devra donc correspondre à celui-ci :

<?xml version="1.0" encoding="utf-8" ?>
<markers>
  <marker lat="47.246655" lng="-1.532694" info="Point1&lt;br /&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed varius commodo mauris, vel condimentum leo tempus vel. Maecenas vitae magna velit, sit amet accumsan risus." />
  <marker lat="48.857205" lng="2.379237" info=" Point2&lt;br /&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed varius commodo mauris, vel condimentum leo tempus vel. Maecenas vitae magna velit, sit amet accumsan risus." />
  <marker lat="45.74863" lng="4.863381" info=" Point2&lt;br /&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed varius commodo mauris, vel condimentum leo tempus vel. Maecenas vitae magna velit, sit amet accumsan risus." />
</markers>

1. Créer un template principal générant de l'XML

La première étape nécessite de créer un nouveau template (ou modèle de mise en page) dont le code XHTML par défaut sera remplacé par du XML.

Pour ajouter un nouveau template, il suffit de créer un nouveau sous-répertoire au répertoire theme/fr/templates/ de votre espace FTP et d’y copier tous les fichiers correspondants à votre nouveau template. Le nouveau template sera alors automatiquement proposé dans l’édition d’un ensemble de mise en page de la console d’administration. Toutes les informations concernant l'utilisation des templates principaux sont disponibles dans le Guide du webdesigner, Généralités, chapitre 8.

Une fois le template créé, éditez les fichiers index.html, desc.xml et structure.xhtml et remplacez la totalité de leur contenu respectif par les codes suivants.

Pour le fichier index.html :
<!-- BEGIN:main -->
<?xml version="1.0" encoding="utf-8" ?>
<markers></markers>
<!-- END:main -->
Pour le fichier desc.xml :
<?xml version="1.0" encoding="iso-8859-1"?>
<modele img="illustration_1col.gif" intitule="XML">
  <zones>
    <zone id="contenu" colmax="1" intitule="Contenu" defaut="1" />
  </zones>
</modele>
Pour le fichier structure.xhtml :
<table>
  <tr>
    <td>{contenu}</td>
  </tr>
</table>
Nous obtenons ainsi un template principal en XML (fichier index.html) dont seulement une zone a été définie (fichier desc.xml) pour pouvoir y insérer un seul widget (fichier structure.xhtml).


2. Ajouter un nouvel ensemble de mise en page

Retour dans la console d'administration afin d'y ajouter un nouvel ensemble de mise en page via l'onglet "Apparence/Mises en page/Site Web".

Cliquez sur le bouton "Ajouter une mise en page" et utilisez le template créé à l'étape précédente (qui devrait s'appeler "XML") pour configurer la page type "Page libre".

 



Editez ensuite la page type nouvellement configurée pour vérifier que seul le widget "Contenu d'une page libre" est présent dans cette page.

  


3. Créer un nouveau type de billet en XML

Suivant le même principe que pour le template principal, il est nécessaire de créer un nouveau type de billet tout d'XML vêtu.

Pour ajouter un nouveau type de billet, il suffit de créer un sous-répertoire au répertoire theme/fr/billets/ de votre espace FTP et d’y copier les fichiers config.xml et index.html correspondants à votre nouveau type de billet. Le nouveau type de billet sera alors automatiquement proposé dans le service Site web de la console d’administration. Toutes les informations concernant l'utilisation des types de billets sont disponibles dans le Guide du webdesigner, Généralités, chapitre 3.

Une fois le type de billet créé, éditez les fichiers config.xml et index.html et remplacez la totalité de leur contenu respectif par les codes suivants.

Pour le fichier config.xml :
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE types SYSTEM "http://www.kiubi-admin.com/DTD/typesbillets.dtd">
  <type tri="10">
    <desc>XML</desc>
    <listechamps>
      <champ champ="titre" type="text" intitule="Intitulé" />
      <champ champ="texte2" type="text" intitule="Latitude" />
      <champ champ="texte3" type="text" intitule="Longitude" />
      <champ champ="texte1" type="wysiwyg" intitule="Infos supp." />
    </listechamps>
</type>
Pour le fichier index.html :
<!-- BEGIN: main -->
<marker lat="{texte2}" lng="{texte3}" info="{titre|htmlentities} &lt;br /&gt; {texte1|htmlentities}" />
<!-- END: main -->
Nous obtenons ainsi un nouveau type de billet disposant les champs d'information "Intitulé", "Latitude", "Longitude" et "Infos supp." (fichier config.xml) et dont le contenu sera en XML (fichier index.html). Vous remarquerez l'utilisation du filtre "htmlentities" sur les balises {titre} et {texte1} du fichier index.html afin de forcer l'encodage en HTML de tous les caractères spéciaux, cette opération n'étant obligatoire que dans le cas de l'utilisation de l'API de GoogleMaps.

Bien entendu, le contenu XML du billet reste à 100% personnalisable et peut intégrer les balises XML de votre choix, en fonction de vos besoins. Vous pouvez aussi créer plusieurs types de billet XML différents, si vous le souhaitez.


4. Dernière étape, assembler tous les éléments

Nous disposons d'un ensemble de mise en page correctement configuré et d'un type de billet générant du code en XML. La dernière étape consiste donc à créer une page qui nous permettra d'associer l'ensemble de mise en page et le contenu XML.

Dans la console d'administration, créez une nouvelle page libre dans le Site web ayant pour intitulé "Points GoogleMap" et associez lui l'ensemble de mise en page "XML" (dans la liste déroulante de la zone "Apparence").



Il vous suffira maintenant de rédiger un nouveau billet de type "XML" pour chaque élément que vous souhaitez intégrer au contenu de cette page.

Dans notre exemple, la page sera accessible à l'adresse suivante : http://www.mon-domaine.com/points-googlemap.html (remplacez www.nom-domaine.com par votre nom de domaine). Même si l'entête de cette dernière restera en HTML, son contenu sera bien formaté en XML.

Les fiches d'aide associés

Aucune fiche associée

Testez Kiubi gratuitement 30 jours pour créer votre site Internet ou votre boutique en ligne

Vous avez une question ? Besoin d'un conseil ou d'un devis ? Contactez-nous !