Niouzes

< Octobre 2021 >
Lu Ma Me Je Ve Sa Di
        1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31

Citation

Attention

Certains des exemples que nous fournissons ci-dessous ne sont pas complets. D'emblée, nous nous en excusons, bien sûr. Mais pourquoi diable sont-ils incomplets ?

Ils sont incomplets parce que nous y travaillons en ce moment et que plutôt que de vous faire patienter jusqu'à ce qu'ils soient tous terminés, nous avons préféré vous les livrer dans l'état où ils se trouvent pour que vous puissiez vous faire une idée de ce qu'ils illustrent.

Au fur et à mesure de notre avancement, nous ferons les mises à jour idoines. Nous espérons résorber notre retard au plus vite.

2014-08-06 à 17:05:56 par Patrick Boens

Table Of Contents

  1. Template with patterns, Swipe Simply, cahing pages for bots, … (06/08/2014)
  2. Gestion de redirections, Accept-Language, extrapolation de la langue et du pays, LSContainer et le génome, LSInput et les gènes, utilisation de LSCacheDir, création de propriétés dynamiques de LSPage dans le géorama, … (11/10/2013)
  3. Statistiques d'accès, Site Manager, prefetch, prerender, File Explorer, interactions Ajax … (17/06/2013)
  4. LSTag, LSContentsDatetime, LSContentsCountdown, LSContentsStopwatch, threshold et score, configuration vhosts Apache, génération automatique, LSVStrings.js, LSVDates.js, tracing sur XML des îles, Free User Input Zones, multiple credentials, cookie de dernière visite, LSInput et datalist (10/04/2013)
  5. Tour d'horizon des filtres (23/09/2013)
  6. Messages de service (07/01/2014)
  7. Accès aux propriétés des îles, halt.sem, cookies positionnés dans les îles, filtre 'browsertype', contenus alternatifs, expressions PHP sur les href, gestion de l'expiration, filtre de visite, ... (22/09/2013)
  8. Messages de service, ... (30/10/2012)
  9. Config Apache, LSInput, LSForm, ... (13/03/2013)
  10. LSContentsBooking, Browser Danger Rating, User Agent vides (non spécifiés), filtres sur les paramètres, LSBrowser, ... (11/06/2013)
  11. LSTag('img'), auto pages, nouveaux filtres, audio/video, ... (02/11/2013)
  12. LSGeo, LSFootnotes, LSSourceFile, LSPublication, onfail avec codes de retour HTTP (301, 302, ...), ... (27/06/2013)
  13. LSCache, microformat (lupdate), multicontent, LSContentsTagCloud, LSContentsImageGallery, HTML5 (input zones), ... (15/09/2013)
  14. Check Spamhaus, vos settings dans le géorama, LSContentsMicronews, Switch dans le géorama, LSCursor: des records dans les records, ... (04/12/2012)
  15. Campagnes de pub, TODO list (04/12/2012)
  16. Debugging de page, LSTimeline, le fichier de géorama, LSTag, Glossaire IT, Named colors, Codes langue, ... (23/03/2013)
  17. LSCursor: une revue complète de la classe (12/03/2013)
  18. LSForm, LSInput, … (28/01/2013)
  19. LSContentsBusinessCoordinates, redirection de pages, LSTwitterPost, LSContentsTwitterFollowers, LSContentsShare, calendrier, LSContentsContactForm, LSContentsReview et LSReview, droits sur une page, URLs canoniques, LSPaymentOptions et LSContentsPaymentOptions, Offres d'emploi, LSContentsImageTransition, ... (20/09/2013)
  20. Galerie avec vignettes, RSS, partage d'offres d'emploi, partage de citations, diaporama dewslider, horloge flash, footnotes, ... (01/10/2012)
  21. îles préfixées de texte standard, le paramètre title, le paramètre heading, le paramètre text, le paramètre xsl, LSRegionSubtag, Language Switchers, LSFormEnroll, LSContentsLegal, sitemap, substitution de propriétés, LSSourceFile et LSContentsSourceFile, LSContentsComments, LSContentsCharter, ... (05/11/2013)
  22. LSContentsLoginLogoff, Utilisation de && dans les conditions des îles, LSWidgetOpeningHours et LSContentsBusinessOpeningHours, inclusion de snippets, image bouton de login/logoff, LSContentsBusinessCoordinates, commentaires dans les îles, doctypes, LSImageTrans, calcul de dates, LSWidgetEmailForm, LSContentsMedia, LSContentsIFrame, onload et onunload d'une page, Page settings, ... (22/09/2013)
  23. Dates et heures de publication et/ou d'expiration, PHP expressions, Blocs XHTML avant et après une île, suite de pages, îles valables par domaine, substitutions, envoyer des fichiers au serveur, templates dynamiques, contenus distants, contenus générés en Java, LSCalculator, Gérer des signets (bookmarks), Pages conditionnelles, îles conditionnelles, désactivations, LSContentsMedia, taille du géorama, partager une page entre sites, LSXHtmlImg, île dans la section …, textes latins, Dublin Core, Utilisation de caches, corrections automatiques, In-Place Editing, LSContentsCitation (03/11/2013)

Les îles préfixées de texte standard 2010-01-02

Depuis l'opus "2.4.0500"

Avec la version 2.4.0500 Vae Soli! a introduit la notion de texte standard sur une île. Les textes standards précèdent TOUJOURS le contenu spécifique de l'île. Voyons plus précisément de quoi il s'agit.

Si nous prenons une île de classe LSContentsJobs, la classe qui vous permet d'afficher des offres d'emploi, il y a de grandes chances que vous souhaitiez mentionner un titre, peut-être bien une rapide description.

Et voilà exactement ce à quoi Vae Soli! a décidé d'apporter une réponse globale. Vous pouvez effectivement afficher un titre et une description rapide de ce que l'île propose. Si nous revenons en la circonstance sur l'île de type LSContentsJobs, voyez comment nous proposons d'afficher titre et description :

<Island id="jobs" active="yes" class="LSContentsJobs">
    <param name="storage"><![CDATA[/jobs/jobs.xml]]></param>
    <param name="title"><![CDATA[Offres d'emploi]]></param>
    <param name="heading"><![CDATA[h3]]></param>
</Island>

Les îles et le paramètre title 2010-01-02

Depuis l'opus "2.4.0500"

Cela donne :

Illustration d'une offre d'emploi

Les îles et le paramètre heading 2010-01-02

Depuis l'opus "2.4.0500"

<Island id="jobs" active="yes" class="LSContentsJobs">
    <param name="storage"><![CDATA[/jobs/jobs.xml]]></param>
    <param name="title"><![CDATA[Offres d'emploi]]></param>
    <param name="heading"><![CDATA[h3]]></param>
</Island>

Ce que nous indique ce paramètre c'est le niveau de heading appliqué au titre s'il y en a un. Dans l'exemple ci-dessus, le titre est positionné à Offres d'emploi et ce titre est rendu dans un <h3>…</h3>

Illustration d'une offre d'emploi

Les îles et le paramètre text 2010-01-02

Depuis l'opus "2.4.0500"

Toujours avec la version 2.4.0500 nous avons introduit la notion de texte standard sur une île. C'est une extension naturelle qui s'applique à toutes les îles puisque ce changement est intervenu dans la classe de base, la classe LSIsland. Voyons immadiatement comment ça marche sur plusieurs îles différentes.

Tout d'abord l'île LSContentsSitemap :

<Island id="SitemapIsland" active="yes" class="LSContentsSitemap">
    <param name="title"><![CDATA[Plan du site]]></param>
    <param name="heading"><![CDATA[h2]]></param>
    <param name="text"><![CDATA[<p>Voici notre plan de site par lequel vous pouvez
                                   trouver toutes nos URLs.</p>]]></param>
    <param name="layout"><![CDATA[by-group]]></param>
</Island>

… ce qui donne :

Illustration du sitemap avec texte, titre et heading

… ensuite l'île d'affichage des offres d'emploi : LSContentsJobs :

<Island id="jobs" active="yes" class="LSContentsJobs">
    <param name="storage"><![CDATA[/jobs/jobs.xml]]></param>
    <param name="title"><![CDATA[Offres d'emploi]]></param>
    <param name="heading"><![CDATA[h3]]></param>
    <param name="text"><![CDATA[<p>Voici les offres d'emploi que nous vous proposons.
                                   N'hésitez pas à nous contacter pour tout
                                   renseignement complémentaire.</p>]]></param>
</Island>

… ce qui donne :

Illustration d'une offre d'emploi avec titre, heading et texte

Enfin, attaquons-nous à un diaporama : LSContentsImageTransition :

<Island id="diapo" active="yes" class="LSContentsImageTransition">
    <param name="title"><![CDATA[ Paillettes et strass]]></param>
    <param name="heading"><![CDATA[h2]]></param>
    <param name="text"><![CDATA[Ce diaporama est inspiré par les vitrines des magasins du monde entier.]]></param>
    <param name="diaporama"><![CDATA[/islands/diaporama-vitrine.xml]]></param>
    <param name="transition"><![CDATA[2000]]></param>
    <param name="increment"><![CDATA[0]]></param>
    <param name="clauses"><![CDATA[]]></param>
</Island>

ICI ... LE TEXTE EST ENCORE A PONDRE

Illustration d'un diaporama avec titre, heading et texte

Les îles et le paramètre xsl 2010-01-02

Depuis l'opus "2.4.0500"

Ici, expliquer le paramètre en question!!!

Langue d'une page 2009-12-29

L'indication de la langue d'un site (ou d'une page) est une information cruciale pour les moteurs de recherche et plus généralement pour tous les programmes qui extraient de vos pages des informations automatiques qu'ils indexent. C'est la raison pour laquelle Vae Soli! a depuis ses tout débuts proposé un codage de la langue.

La langue d'un site (ou, nous le répétons, simplement d'une page) est indiquée dans un paramètre du géorama comme le montre l'exemple ci-dessous :

<Defaults>
    <Settings>
        <LSDoctype><![CDATA[xhtml11]]></LSDoctype>
        <LSIsDebug><![CDATA[true]]></LSIsDebug>
        <LSLanguage><![CDATA[fr]]></LSLanguage>
        <LSRegionSubtag><![CDATA[BE]]></LSRegionSubtag>
        <LSTheme><![CDATA[core]]></LSTheme>
        <LSCargo><![CDATA[ls]]></LSCargo>
        <LSTracingLevel><![CDATA[48]]></LSTracingLevel>
        <LSTracingOutput><![CDATA[/traces/log.log]]></LSTracingOutput>
        <LSTracingFilter><![CDATA[]]></LSTracingFilter>
        <LSMustStartSession><![CDATA[true]]></LSMustStartSession>
        <LSAuthor><![CDATA[Patrick Boens]]></LSAuthor>
        <LSSetProceduresTo><![CDATA[/code/mydomain.php]]></LSSetProceduresTo>
        <LSMustWriteSourceHeader><![CDATA[false]]></LSMustWriteSourceHeader>
        <LSServiceMessages><![CDATA[true]]></LSServiceMessages>
    </Settings>
</Defaults>

Ces informations sont extraites automatiquement lorsque Vae Soli! construit la page à afficher … et ce AVANT même de faire appel à votre template de page. Comme les infos de page sont disponibles dans le code qui compose votre template, elles sont utilisables dans le template. En voici un exemple :

<html xmlns="http://www.w3.org/1999/xhtml"
     xml:lang="<?php echo $this->szLanguage; ?>">
    <head>
        <title>Mon titre</title>
    </head>
    <body>
        … le corps de la page
    </body>
</html>

Région 2009-12-29

Depuis l'opus "2.4.0500"

Avec la version 2.4.0500 on a introduit la notion de région de la langue. Par exemple pour le français, on peut spécifier que la langue est à prendre dans le contexte belge. Pour ce faire on utilise le paramètre LSRegionSubtag ainsi que le montre l'exemple suivant :

<Defaults>
    <Settings>
        <LSDoctype><![CDATA[xhtml11]]></LSDoctype>
        <LSIsDebug><![CDATA[true]]></LSIsDebug>
        <LSLanguage><![CDATA[fr]]></LSLanguage>
        <LSRegionSubtag><![CDATA[BE]]></LSRegionSubtag>
        <LSTheme><![CDATA[core]]></LSTheme>
        <LSCargo><![CDATA[ls]]></LSCargo>
        <LSTracingLevel><![CDATA[48]]></LSTracingLevel>
        <LSTracingOutput><![CDATA[/traces/log.log]]></LSTracingOutput>
        <LSTracingFilter><![CDATA[]]></LSTracingFilter>
        <LSMustStartSession><![CDATA[true]]></LSMustStartSession>
        <LSAuthor><![CDATA[Patrick Boens]]></LSAuthor>
        <LSSetProceduresTo><![CDATA[/code/mydomain.php]]></LSSetProceduresTo>
        <LSMustWriteSourceHeader><![CDATA[false]]></LSMustWriteSourceHeader>
        <LSServiceMessages><![CDATA[true]]></LSServiceMessages>
    </Settings>
</Defaults>

Si on voulait maintenant composer un attribut langue tenant compte de la région on ferait appel au code suivant dans le template :

<html xmlns="http://www.w3.org/1999/xhtml"
     xml:lang="<?php echo $this->FullLanguage(); ?>">
    <head>
        <title>Mon titre</title>
    </head>
    <body>
        … le corps de la page
    </body>
</html>

… cela aura pour effet de générer un attribut langue "fr-BE" !

Language Switchers 2009-12-29

Les Language Switchers permettent de créer un mécanisme de changement de langue. Vae Soli! fournit un code standard pour ce faire et il vous appartient de définir les CSS pour en gérer la présentation.

Voici typiquement une île codée dans le géorama qui s'occupe de présenter des Language Switchers :

<Island id="switchers" active="yes" class="LSContentsLanguageSwitchers">
    <param name="languages"><![CDATA[en,fr,nl]]></param>
</Island>

Voilà ce que donne le rendu de l'île dans sa version texte (avec un peu de CSS) …

Illustration des 'Language Switchers', version texte

Depuis l'opus "2.4.0500"

Depuis l'opus 2.4.0500, il est possible d'utiliser 2 séparateurs de langue : , et ; et donc la manière suivante de présenter les switchers est également valable :

<Island id="switchers" active="yes" class="LSContentsLanguageSwitchers">
    <param name="languages"><![CDATA[en;fr;nl]]></param>
</Island>

Language Switchers avec images 2009-12-29

Depuis l'opus "2.4.0500"

Pour que vous puissiez utiliser des images en lieu et place de libellés, il suffit de mentionner le paramètre pictures dans la définition de l'île :

<Island id="switchers" active="yes" class="LSContentsLanguageSwitchers">
    <param name="languages"><![CDATA[en;fr;nl]]></param>
    <param name="pictures"><![CDATA[/images/flag-uk-small.png;
                                    /images/flag-french-small.png;
                                    /images/flag-dutch-small.png]]></param>
</Island>

Voilà ce que donne le rendu de l'île (avec un peu de CSS) …

Illustration des 'Language Switchers' en images

Classe "Enroll" : classe LSFormEnroll 2009-12-27

Depuis l'opus "2.4.0500"

Cette nouvelle classe permet de créer un formulaire d'encodage standard comme l'illustre la capture d'écran qui suit :

Formulaire standard de souscription

La classe ne permet cependant pas (encore) de sauver les données : il faudra que vous créez le code qui va permettre de sauver les données dans la base de données que vous aurez choisie.

L'écran ci-dessus est réalisé grâce à la définition d'une île de clsse LSFormEnroll. En voici la définition extraite du géorama :

<Island id="body-form" active="yes" class="LSFormEnroll"
        condition=".php=return !isset($_POST['cmdEnrollSubmit']);">
    <param name="title"    ><![CDATA[Rejoignez notre équipe]]></param>
    <param name="teaser"   ><![CDATA[<p>Laissez-nous vos coordonnées pour que
                                        nous puissions vous contacter au plus
                                        vite.</p>]]></param>
    <param name="submit"   ><![CDATA[self]]></param>
    <param name="company"  ><![CDATA[false]]></param>
    <param name="firstname"><![CDATA[true]]></param>
    <param name="birthdate"><![CDATA[true]]></param>
    <param name="address"  ><![CDATA[true]]></param>
    <param name="phone"    ><![CDATA[true]]></param>
    <param name="homepage" ><![CDATA[true]]></param>
</Island>

Accès à la newsletter, réception d'emails et acceptation de termes et conditions : LSFormEnroll 2010-01-31

Vous pouvez également demander au visiteur de souscrire à une newsletter, de recevoir vos emails, et d'accepter des termes et conditions, lesquelles sont disponibles par le biais d'une URL bien précise. Un simple paramétrage permet la chose :

<Island id="body-form" active="yes" class="LSFormEnroll"
        condition=".php=return !isset($_POST['cmdEnrollSubmit']);">
    <param name="title"    ><![CDATA[Rejoignez notre équipe]]></param>
    <param name="text"     ><![CDATA[<p>Laissez-nous vos coordonnées pour que
                                        nous puissions vous contacter au plus
                                        vite.</p>]]></param>
    <param name="submit"    ><![CDATA[self]]></param>
    <param name="company"   ><![CDATA[false]]></param>
    <param name="firstname" ><![CDATA[true]]></param>
    <param name="birthdate" ><![CDATA[true]]></param>
    <param name="address"   ><![CDATA[true]]></param>
    <param name="phone"     ><![CDATA[true]]></param>
    <param name="homepage"  ><![CDATA[true]]></param>
    <param name="cv"        ><![CDATA[true]]></param>
    <param name="picture"   ><![CDATA[true]]></param>
    <param name="newsletter"><![CDATA[true]]></param>
    <param name="emails"    ><![CDATA[true]]></param>
    <param name="terms"     ><![CDATA[true]]></param>
    <param name="terms-href"><![CDATA[/terms-and-conditions.php]]></param>
</Island>

Formulaire standard de souscription avec newsletter, emails, termes et conditions

Accepter des SMS, accepter des tweets : LSFormEnroll 2010-02-19

Depuis l'opus 2.5.0020

Avec l'arrivée des classes réservées à Twitter, il devenait indispensable de modifier le formulaire de souscription. C'est chose faite dans la version 2.5.0020 de Vae Soli!. Désormais, l'île accepte d'autres paramètres réservés à cet effet comme l'illustrent l'extrait du géorama qui suit ainsi que la capture d'écran :

<Island id="body-form" active="yes" class="LSFormEnroll"
        condition=".php=return !isset($_POST['cmdEnrollSubmit']);">
    <param name="title"    ><![CDATA[Rejoignez notre équipe]]></param>
    <param name="text"     ><![CDATA[<p>Laissez-nous vos coordonnées pour que
                                        nous puissions vous contacter au plus
                                        vite.</p>]]></param>
    <param name="submit"    ><![CDATA[self]]></param>
    <param name="company"   ><![CDATA[false]]></param>
    <param name="firstname" ><![CDATA[true]]></param>
    <param name="birthdate" ><![CDATA[true]]></param>
    <param name="address"   ><![CDATA[true]]></param>
    <param name="phone"     ><![CDATA[true]]></param>
    <param name="homepage"  ><![CDATA[true]]></param>
    <param name="cv"        ><![CDATA[true]]></param>
    <param name="picture"   ><![CDATA[true]]></param>
    <param name="newsletter"><![CDATA[true]]></param>
    <param name="emails"    ><![CDATA[true]]></param>
    <param name="terms"     ><![CDATA[true]]></param>
    <param name="terms-href"><![CDATA[/terms-and-conditions.php]]></param>
    <param name="sms"       ><![CDATA[true]]></param>
    <param name="tweets"    ><![CDATA[true]]></param>
</Island>

Formulaire standard de souscription avec SMS et tweets

Détourner complètement la classe LSFormEnroll 2009-12-28

Il est possible – comme beaucoup d'autres îles – de détourner complètement la classe LSFormEnroll de telle sorte qu'elle se comporte comme une simple île de classe LSContents. Vous pouvez faire cela en spécifiant le paramètre storage de l'île : le contenu présent dans le fichier de storage est alors affiché dans la page à l'endroit approprié.

Dans l'exemple qui suit tous les autres paramètres, excepté storage, seront ignorés :

<Island id="body-form" active="yes" class="LSFormEnroll"
        condition=".php=return !isset($_POST['cmdEnrollSubmit']);">
    <param name="storage"><![CDATA[/islands/enroll.php]]></param>
    <param name="title"    ><![CDATA[Rejoignez notre équipe]]></param>
    <param name="text"     ><![CDATA[<p>Laissez-nous vos coordonnées pour que
                                        nous puissions vous contacter au plus
                                        vite.</p>]]></param>
    <param name="submit"   ><![CDATA[self]]></param>
    <param name="company"  ><![CDATA[false]]></param>
    <param name="firstname"><![CDATA[true]]></param>
    <param name="birthdate"><![CDATA[true]]></param>
    <param name="address"  ><![CDATA[true]]></param>
    <param name="phone"    ><![CDATA[true]]></param>
    <param name="homepage" ><![CDATA[true]]></param>
</Island>

Créer une page de termes légaux : classe LSContentsLegal

Vae Soli! contient une île spécialisée pour la création d'un texte légal standard :

<Archipelago id="body" active="yes" category="body">
    <Island id="body" active="yes" class="LSContentsLegal" />
</Archipelago>

Désactiver des paragraphes de la page de termes légaux

Il se pourrait que vous souhaitiez désactiver des paragraphes du texte légal standard. En voici un exemple qui ne laisse finalement que 3 paragraphes du texte de base :

<Archipelago id="body" active="yes" category="body">
    <Island id="body" active="yes" class="LSContentsLegal">
        <param name="info-auto-stored">false</param>
        <param name="cookies">false</param>
        <param name="subscription-forms">false</param>
        <param name="order-forms">false</param>
        <param name="surveys">false</param>
        <param name="external-links">false</param>
        <param name="security">false</param>
        <param name="extra-info">false</param>
        <param name="youth-guard">false</param>
        <param name="individual-choices">false</param>
        <param name="data-quality">true</param>
        <param name="blogs">true</param>
        <param name="contact">true</param>
    </Island>
</Archipelago>

Personnaliser un article de la page de termes légaux

Vous pouvez personnaliser toute la page des termes légaux. Si un article de la page ne vous convient pas, il suffit de mentionner un texte de substitution dans l'île comme le montre l'exemple qui suit :

<Archipelago id="body" active="yes" category="body">
    <Island id="body" active="yes" class="LSContentsLegal">
        <param name="cookies-storage">/islands/legal/cookies.php</param>
    </Island>
</Archipelago>

De fait, tous les articles peuvent ainsi être modifiés. Le nom du paramètre est le nom de l'article (info-auto-stored, cookies, subscription-forms, …) suivi de "-storage" (ex: info-auto-stored- storage, cookies-storage, …).

Paramétrer la page de termes légaux 2009-08-08

Depuis l'opus "2.1.0000"

Il est possible de « paramétrer » chaque paragraphe des termes légaux, notamment en mentionnant des pre-block et post-block à chaque paragraphe. Une application pratique possible est d'illustrer chaque paragraphe avec une image. C'est ce que nous avons fait dans le petit exemple qui suit … pour deux paragraphes :

<Island id="body" active="yes" class="LSContentsLegal">
    <param name="pre-block">/islands/legal-first-img.html</param>
    <param name="blogs-before">/islands/legal-last-img.html</param>
</Island>

Cela mérite une petite explication. Dans l'exemple ci-dessus, nous avons utilisé deux stratégies différentes. La première stratégie (<param name="pre-block">/islands/legal-first-img.html</param>) a utilisé le paramètre pre-block. Le paramètre pre-block rend possible l'insertion d'un bloc AVANT toute autre chose. Similairement, le paramètre post-block permet d'insérer un bloc APRES toute autre chose. C'est un mécanisme — pre / post — qui est mis en œuvre pour toute l'île LSContentsLegal.

Le même mécanisme existe pour chaque paragraphe : pre / post. Ainsi, le paramètre <param name="blogs-before">/islands/legal-last-img.html</param> va permettre d'insérer un bloc AVANT le paragraphe consacré aux blogs et <param name="blogs-after">/islands/legal-last-img.html</param> permet d'insérer un bloc APRES le paragraphe. Le même mécanisme — -before et -after — existe pour chaque paragraphe ce qui rend le système très générique.

Détourner complètement la classe LSContentsLegal 2009-12-16

Depuis l'opus "2.3.0007"

Il est désormais possible de détourner complètement la classe LSContentsLegal de telle sorte qu'elle se comporte comme une simple île de classe LSContents. Vous pouvez faire cela en spécifiant le paramètre storage de l'île : le contenu présent dans le fichier de storage est alors affiché dans la page à l'endroit approprié.

Dans l'exemple qui suit tous les autres paramètres, excepté storage, seront ignorés :

<Island id="body" active="yes" class="LSContentsLegal" lupdate="auto">
    <param name="storage"><![CDATA[/islands/test.php]]></param>
    <param name="info-auto-stored"><![CDATA[true]]></param>
    <param name="cookies"><![CDATA[true]]></param>
    <param name="subscription-forms"><![CDATA[true]]></param>
    <param name="order-forms"><![CDATA[false]]><![CDATA[</param>
    <param name="surveys"><![CDATA[true]]></param>
    <param name="external-links"><![CDATA[true]]></param>
    <param name="security"><![CDATA[true]]></param>
    <param name="extra-info"><![CDATA[false]]></param>
    <param name="youth-guard"><![CDATA[true]]></param>
    <param name="individual-choices"><![CDATA[true]]></param>
    <param name="data-quality"><![CDATA[true]]></param>
    <param name="blogs"><![CDATA[true]]></param>
    <param name="contact"><![CDATA[true]]></param>
</Island>

Modifier le heading de la page des termes légaux 2009-12-24

Depuis l'opus "2.4.0000"

Un nouveau paramètre a fait son apparition, le paramètre heading.

<Island id="LegalIsland" active="yes" class="LSContentsLegal">
    <param name="heading"><![CDATA[h3]]></param>
</Island>

Une fois ce heading modifié, tous les headings suivants se trouvent hiérarchisés à partir de ce nouveau heading.

Construire un sitemap 2009-04-27

Sitemap général 2009-04-27

Si vous souhaitez qu'une page apparaisse dans le sitemap de votre site (plan de site), il suffit d'associer un tag <Sitemap>…</Sitemap> dans le XML de la page. En voici un exemple  :

<Pangaea>
    <Land id="/articles/index.php" active="yes" editable="yes" group="articles"
          href="/config-pages/articles.xml">
        <Sitemap priority="0.8" frequency="weekly" />
    </Land>
</Pangaea>

Nous passons, pour l'instant, sous silence les paramètres priority et frequency.

Dans le cas ci-dessus, la page apparaît dans le sitemap sans que ne se pose d'autre question. Par contre, si la page est associée à un domaine précis (dans Vae Soli! on parle d'un landscape), alors la page n'apparait dans le sitemap que si on se trouve sur le domaine en question. Voici un exemple de ce genre de situation :

<Pangaea>
    <Land id="/articles/index.php" active="yes" editable="yes"
          group="articles"
          landscape="www.vaesoli.org;
          href="/config-pages/articles.xml">
        <Sitemap priority="0.8" frequency="weekly" />
    </Land>
</Pangaea>

Cette page n'apparaîtra pas dans le sitemap de www.vaesoli.net ni dans celui de www.vaesoli.com … tout simplement pour la raison que cette page est inaccessible sur ces domaines : elle n'est même pas affichable !

Sitemap par groupe de fonctionnalité 2009-12-16

Il vous est loisible de créer une page de sitemap organisé par groupe. La page de sitemap apparaît dès lors semblable au sitemap illustré ci-dessous :

Illustration d'un sitemap organisé par groupe

Comment faire cela ? Simplement par la paramétrisation du sitemap comme l'indique le snippet suivant :

<Island id="SitemapIsland" active="yes" class="LSContentsSitemap">
    <param name="title" lang="fr"><![CDATA[Plan du site]]></param>
    <param name="title" lang="en"><![CDATA[Sitemap]]></param>
    <param name="title" lang="nl"><![CDATA[Plan van onze site]]></param>
    <param name="layout"><![CDATA[by-group]]></param>
</Island>

Mais d'où viennent les groupes ? Ils viennent de la définition de chaque page dans le géorama. C'est l'attribut group=… de chaque <Land …>…</Land> qui tient ce rôle :

<Land id="/index.php" active="yes" group="Général" href="%geo-path%/index.xml">
    <Sitemap priority="1" frequency="daily" />
</Land>
<!-- ============================================================ -->
<Land id="/downloads.php" active="yes" group="Téléchargements" href="%geo-path%/downloads.xml">
    <Sitemap priority="0.8" frequency="monthly" />
</Land>
<!-- ============================================================ -->
<Land id="/getting-started.php" active="yes" group="Documentation" href="%geo-path%/getting-started.xml">
    <Sitemap priority="0.5" frequency="monthly" />
</Land>
<!-- ============================================================ -->
<Land id="/samples.php" active="yes" group="Documentation" href="%geo-path%/samples.xml">
    <Sitemap priority="0.7" frequency="monthly" />
</Land>
<!-- ============================================================ -->
<Land id="/news.php" active="yes" group="Nouvelles" href="%geo-path%/news.xml">
    <Sitemap priority="0.9" frequency="daily" />
</Land>
<!-- ============================================================ -->
<Land id="/online-doc/index.php" active="yes" group="Documentation" href="%geo-path%/online-doc.xml">
    <Sitemap priority="0.9" frequency="daily" />
</Land>
<!-- ============================================================ -->
<Land id="/legal.php" active="yes" group="Utilitaires" href="%geo-path%/legal.xml">
    <Sitemap priority="0.2" frequency="monthly" />
</Land>
<!-- ============================================================ -->
<Land id="/contact.php" active="yes" group="Utilitaires" href="%geo-path%/contact.xml">
    <Sitemap priority="0.2" frequency="monthly" />
</Land>
<!-- ============================================================ -->
<Land id="/help.php" active="yes" group="Utilitaires" href="%geo-path%/help.xml>
    <Sitemap priority="0.7" frequency="monthly" />
</Land>
…

Depuis l'opus "2.3.0007"

En outre, Depuis l'opus 2.3.0007, il vous est également possible d'utiliser les substitutions pour afficher les noms des groupes dans le sitemap. En voici un exemple :

<Land id="/help.php" active="yes" group="{utils}" href="%geo-path%/help.xml">
    <Sitemap priority="0.7" frequency="monthly" />
</Land>

… et une subsititution est définie dans le fichier des substitutions :

<Data key="{utils}" active="yes" editable="yes">
    <Value lang="fr"><![CDATA[Utilitaires]]></Value>
    <Value lang="en"><![CDATA[Tools]]></Value>
    <Value lang="nl"><![CDATA[Hulpmiddelen]]></Value>
</Data>

Positionner le titre du sitemap 2009-12-23

Depuis l'opus "2.4.0000"

Positionner le titre du sitemap se fait très simplement en modifiant le paramètre title de l'île. En voilà un exemple immédiat en 3 langues :

<Island id="SitemapIsland" active="yes" class="LSContentsSitemap">
    <param name="title" lang="fr"><![CDATA[Plan du site]]></param>
    <param name="title" lang="en"><![CDATA[Sitemap]]></param>
    <param name="title" lang="nl"><![CDATA[Plan van onze site]]></param>
</Island>

Modifier le heading du sitemap 2009-12-23

Depuis l'opus "2.4.0000"

Enfin, il est également possible d'avoir la main mise sur le niveau de heading utilisé par Vae Soli! pour mentionner le titre. Cela se fait en jouant avec le paramètre heading comme le démontre l'exemple qui suit :

<Island id="SitemapIsland" active="yes" class="LSContentsSitemap">
    <param name="title" lang="fr"><![CDATA[Plan du site]]></param>
    <param name="heading"><![CDATA[h4]]></param>
</Island>

Georama avec substitutions de propriétés 2009-12-21

Depuis l'opus "2.4.0000"

Avec la version 2.4.0000 il est désormais possible d'utiliser des substitutions de propriétés dans le géorama. Pour vous faire comprendre précisément de quoi nous parlons, considérez le fragment suivant de géorama :

<Archipelago id="poles" active="yes" category="poles">
    <Island id="pole-01" active="yes" class="LSContents">
        <param name="storage" lang="fr"><![CDATA[/islands/pole-01_fr.php]]></param>
        <param name="storage" lang="nl"><![CDATA[/islands/pole-01_nl.php]]></param>
        <param name="storage" lang="en"><![CDATA[/islands/pole-01_en.php]]></param>
    </Island>
    <Island id="pole-02" active="yes" class="LSContents">
        <param name="storage" lang="fr"><![CDATA[/islands/pole-02_fr.php]]></param>
        <param name="storage" lang="nl"><![CDATA[/islands/pole-02_nl.php]]></param>
        <param name="storage" lang="en"><![CDATA[/islands/pole-02_en.php]]></param>
    </Island>
    <Island id="pole-03" active="yes" class="LSContents">
        <param name="storage" lang="fr"><![CDATA[/islands/pole-03_fr.php]]></param>
        <param name="storage" lang="nl"><![CDATA[/islands/pole-03_nl.php]]></param>
        <param name="storage" lang="en"><![CDATA[/islands/pole-03_en.php]]></param>
    </Island>
    <Island id="pole-04" active="yes" class="LSContents">
        <param name="storage" lang="fr"><![CDATA[/islands/pole-04_fr.php]]></param>
        <param name="storage" lang="nl"><![CDATA[/islands/pole-04_nl.php]]></param>
        <param name="storage" lang="en"><![CDATA[/islands/pole-04_en.php]]></param>
    </Island>
    <Island id="pole-05" active="yes" class="LSContents">
        <param name="storage" lang="fr"><![CDATA[/islands/pole-05_fr.php]]></param>
        <param name="storage" lang="nl"><![CDATA[/islands/pole-05_nl.php]]></param>
        <param name="storage" lang="en"><![CDATA[/islands/pole-05_en.php]]></param>
    </Island>
    <Island id="pole-06" active="yes" class="LSContents">
        <param name="storage" lang="fr"><![CDATA[/islands/pole-06_fr.php]]></param>
        <param name="storage" lang="nl"><![CDATA[/islands/pole-06_nl.php]]></param>
        <param name="storage" lang="en"><![CDATA[/islands/pole-06_en.php]]></param>
    </Island>
</Archipelago>

Et voyez comment ce fichier géorama peut se simplifier désormais … grâce à quelques substitutions de propriétés :

<Archipelago id="poles" active="yes" category="poles">
    <Island id="pole-01" active="yes" class="LSContents">
        <param name="storage"><![CDATA[/islands/{island->id}_{page->lang}.php]]></param>
    </Island>
    <Island id="pole-02" active="yes" class="LSContents">
        <param name="storage"><![CDATA[/islands/{island->id}_{page->lang}.php]]></param>
    </Island>
    <Island id="pole-03" active="yes" class="LSContents">
        <param name="storage"><![CDATA[/islands/{island->id}_{page->lang}.php]]></param>
    </Island>
    <Island id="pole-04" active="yes" class="LSContents">
        <param name="storage"><![CDATA[/islands/{island->id}_{page->lang}.php]]></param>
    </Island>
    <Island id="pole-05" active="yes" class="LSContents">
        <param name="storage"><![CDATA[/islands/{island->id}_{page->lang}.php]]></param>
    </Island>
    <Island id="pole-06" active="yes" class="LSContents">
        <param name="storage"><![CDATA[/islands/{island->id}_{page->lang}.php]]></param>
    </Island>
</Archipelago>

Dans le cas qui nous occupe, le pattern {island->id} a été remplacé par l'ID de chaque île. De même, le pattern {page->lang} a été remplacé par la langue dans laquelle la page doit être affichée. Cela simplifie grandement le géorama et le raccourcit dans des proportions très intéressantes (plus de la moitié dans notre cas).

À ce stade, les patterns suivants sont reconnus :

  1. {island->id}
  2. {island->guid}
  3. {island->cachettl}
  4. {page->cargo}
  5. {page->cargo2}
  6. {page->cargo3}
  7. {page->self}
  8. {page->guid}
  9. {page->doctype}
  10. {page->cachettl}
  11. {page->template}
  12. {page->paradeigma}
  13. {page->title}
  14. {page->h1}
  15. {page->lupdate}
  16. {page->lang}
  17. {page->theme}
  18. {page->keyword}
  19. {page->group}
  20. {page->href}
  21. {user->account}'
  22. {user->fname}'
  23. {user->lname}'
  24. {user->email}'
  25. {user->company}'
  26. {user->id}'
  27. {user->guid}'
  28. {user->url}'
  29. {user->ip}'
  30. {app->domain}
  31. {app->protocol}
  32. {app->useragent}
  33. {app->referer}
  34. {app->root}
  35. {get=…}
  36. {post=…}
  37. {cookie=…}
  38. {auto}

Gageons qu'à l'avenir d'autres patterns seront supportés. Néanmoins, la liste proposée permet déjà de générer des expressions très dynamiques. Une fois encore prenons l'exemple du <param name="storage">…</param> pour illustrer notre propos :

<param name="storage"><![CDATA[/users/{user->fname}{user->lname}/{page->lang}/index.html]]></param>

L'exemple proposé va donc générer un accès à un fichier dont le nom complet est composé du prénom et du nom de l'utilisateur, de la langue de la page et pour finir 'index.html'.

On peut aussi faire plus court avec le pattern {auto}. Dans ce cas, le nom généré contient le nom de la page, le nom de l'archipel, le nom de l'île et la langue : une manière simple de générer des noms complexes dépendant des îles qui contiennent ce pattern.

<param name="storage"><![CDATA[/islands/{auto}.html]]></param>

Afficher un fichier source

Fichier source directement en PHP

$szSrcFile = 'x:\vaesoli\include\LSStrings.functions.php';

$oFile = new LSSourceFile( $szSrcFile,true );   /* Avec numéro de ligne = true */
$oFile->SetDepth( 75 );                         /* 75 colonnes par défaut */
$oFile->Read();                                 /* Lire le fichier */
echo "<pre>" . $oFile->Render() . "</pre">;     /* Afficher le source */

Fichier source sous forme d'île

<Archipelago id="body" active="yes" category="body">
    <Island id="src" active="yes" class="LSContentsSourceFile">
        <param name="storage"><![CDATA[/vaesoli/include/LSStrings.functions.php]]></param>
    </Island>
</Archipelago>

Inline CSS

Depuis l'opus "2.4.0000"

Avec la version 2.4.0000 de Vae Soli! il est désormais possible de mentionner un inline CSS qui sera directement utilisé dans la génération de la balise <pre>…</pre> comme le montre l'exemple qui suit :

<Island id="src" active="yes" class="LSContentsSourceFile">
    <param name="css"><![CDATA[white-space:pre-wrap;]]></param>
    <param name="storage"><![CDATA[/vaesoli/include/LSXMLSitemap.class.php]]></param>
</Island>

Commentaires sur pages : classe LSContentsComments 2009-12-16

Depuis l'opus "2.3.0007"

Nous avons commencé une revue détaillée de l'utilisation des microformats dans le rendu des commentaires que déposent les gens sur des pages composées avec Vae Soli!.

all-posts

L'ensemble des commentaires est inclus dans une division affublée de la classe all-posts.

post

Chaque commentaire individuel est entouré d'une division dont la classe est classe post.

post-author

Le nom de l'auteur du commentaire reçoit la classe post-author.

post-posting-time

La date et heure à laquelle le commentaire est entré est mainteant entouré d'une balise <span> qui reçoit la classe post-posting-time.

post-title

Le sujet (ou titre) du commentaire est maintenant mentionné dans une balise <span> de classe post-title.

post-content

Le contenu du commentaire est maintenant mentionné dans une balise <p> de classe post-content.

rel="nofollow"

Les liens que mentionnent les personnes qui laissent des commentaires sur vos pages sont aujourd'hui affublés d'un rel="nofollow", et ce Depuis l'opus 2.3.0007 de telle sorte que les moteurs de recherche ne suivent pas les commentaires déposés.

Créer une page d'aide : classe LSContentsCharter

Vae Soli! contient une île spécialisée pour la création d'un texte d'aide standard :

<Archipelago id="body" active="yes" category="body">
    <Island id="body" active="yes" class="LSContentsCharter" />
</Archipelago>

Détourner complètement la classe LSContentsCharter 2009-12-16

Depuis l'opus "2.3.0007"

Il est désormais possible de détourner complètement la classe LSContentsCharter de telle sorte qu'elle se comporte comme une simple île de classe LSContents. Vous pouvez faire cela en spécifiant le paramètre storage de l'île : le contenu présent dans le fichier de storage est alors affiché dans la page à l'endroit approprié.

Dans l'exemple qui suit tous les autres paramètres, excepté storage, seront ignorés :

<Island id="body" active="yes" class="LSContentsCharter" lupdate="auto">
    <param name="storage"><![CDATA[/islands/test.php]]></param>
    {{{..}}}
</Island>

Formulaire de contact :
liste de destinataires et …
liste d'activités 2009-11-20

Dans le formulaire de contact, il est désormais possible de déterminer une liste de destinataires. Les personnes renseignées dans la liste recevront le contenu du formulaire par email.

Plusieurs personnes de la liste peuvent recevoir l'email. Pour ce faire, il suffit de mentionner le fait que la liste des destinataires est "multiple".

Dans ce cas, il est également possible de mentionner la taille de la listbox qui sera présentée à l'écran : c'est l'objectif de l'attribut size tel qu'il est mentionné dans l'exemple qui suit.

<Island id="contact-form" active="yes" class="LSContentsContactForm">
  <param name="submit"         ><![CDATA[self]]></param>
  <param name="recipients"     multiple="yes" size="2">
    <![CDATA[John Doe=john.doe@mydomain.com;Paul Durant=paul.durant@mydomain.com]]></param>
  <param name="activities"     multiple="yes" size="2">
    <![CDATA[pr=Programmation;co=Consulting;ts=Testing]]></param>
  <param name="company"        ><![CDATA[true]]></param>
  <param name="firstname"      ><![CDATA[true]]></param>
  <param name="birthdate"      ><![CDATA[false]]></param>
  <param name="address"        ><![CDATA[true]]></param>
  <param name="phone"          ><![CDATA[true]]></param>
  <param name="homepage"       ><![CDATA[true]]></param>

  <param name="mail-type"      ><![CDATA[text/plain]]></param> <!-- text/html -->
  <param name="mail-host"      ><![CDATA[relay.skynet.be]]></param>
  <param name="mail-port"      ><![CDATA[25]]></param>
  <param name="mail-from-name" ><![CDATA[Mydomain Robot]]></param>
  <param name="mail-from-email"><![CDATA[robot@mydomain.com]></param> -->
  <param name="mail-priority"  ><![CDATA[3]]></param>
  <param name="mail-subject"   ><![CDATA[Formulaire de contact]]></param>
</Island>

Formulaire de contact :
liste cachée de destinataires 2011-10-10

Depuis l'opus "4.0.0018"

Un petit cas particulier du cas précédent est une liste de destinataires invisible. Voilà le changement qu'il faut apporter à votre île pour que la liste des destinataires reste cachée dans le formulaire :

<Island id="contact-form" active="yes" class="LSContentsContactForm">
  <param name="submit"         ><![CDATA[self]]></param>
  <param name="recipients"     visible="no">
    <![CDATA[John Doe=john.doe@mydomain.com;Paul Durant=paul.durant@mydomain.com]]></param>
  <param name="company"        ><![CDATA[true]]></param>
  <param name="firstname"      ><![CDATA[true]]></param>
  <param name="birthdate"      ><![CDATA[false]]></param>
  <param name="address"        ><![CDATA[true]]></param>
  <param name="phone"          ><![CDATA[true]]></param>
  <param name="homepage"       ><![CDATA[true]]></param>

  <param name="mail-type"      ><![CDATA[text/plain]]></param> <!-- text/html -->
  <param name="mail-host"      ><![CDATA[relay.skynet.be]]></param>
  <param name="mail-port"      ><![CDATA[25]]></param>
  <param name="mail-from-name" ><![CDATA[Mydomain Robot]]></param>
  <param name="mail-from-email"><![CDATA[robot@mydomain.com]></param> -->
  <param name="mail-priority"  ><![CDATA[3]]></param>
  <param name="mail-subject"   ><![CDATA[Formulaire de contact]]></param>
</Island>

Formulaire de contact :
Imposer une liste de pays 2012-02-29

Depuis l'opus "4.5.0100"

Si vous souhaitez imposer une liste de pays à Vae Soli!, pas de problème ! Il suffit de spécifier cette liste via le paramètre country-list. Voici comment procéder :

<Island id="contact-form" active="yes" class="LSContentsContactForm">
    <param name="submit"    ><![CDATA[/contact.php]]></param>
    <param name="company"   ><![CDATA[true]]></param>
    <param name="firstname" ><![CDATA[true]]></param>
    <param name="birthdate" ><![CDATA[false]]></param>
    <param name="address"   ><![CDATA[true]]></param>
    <param name="phone"     ><![CDATA[true]]></param>
    <param name="body"      ><![CDATA[true]]></param>
    <param name="homepage"  ><![CDATA[false]]></param>
    <param name="country-list" lang="fr"><![CDATA[BE=Belgique;NL=Pays-Bas;FR=France;DE=Allemagne;LU=Luxembourg]]></param>
    <param name="country-list" lang="nl"><![CDATA[BE=België;NL=Holland;FR=Frankrijk;DE=Duitsland;LU=Luxembourg]]></param>
</Island>

Formulaire de contact :
Changer les libellés 2012-02-29

Depuis l'opus "4.5.0100"

Si les libellés standards fournis par Vae Soli! dans le formulaire de contact ne vous conviennent pas il suffit de les modifier. À condition de savoir comment faire.

  • ZipCity-label: le libellé de code postal et localité
  • Zip-tooltip: le libellé de la bulle d'aide affichée sur la zone de code postal
  • City-tooltip: le libellé de la bulle d'aide affichée sur la zone de localité/ville

Détourner la classe LSContentsContactForm 2009-12-16

Depuis l'opus 2.3.0007

Il est désormais possible de détourner complètement la classe LSContentsContactForm de telle sorte qu'elle se comporte comme une simple île de classe LSContents. Vous pouvez faire cela en spécifiant le paramètre storage de l'île : le contenu présent dans le fichier de storage est alors affiché dans la page à l'endroit approprié.

Dans l'exemple qui suit tous les autres paramètres, excepté storage, seront ignorés :

<Island id="contact-form" active="yes" class="LSContentsContactForm">
    <param name="storage"  ><![CDATA[/islands/contact.php]]></param>
    <param name="submit"   ><![CDATA[/contact.php]]></param>
    <param name="company"  ><![CDATA[true]]></param>
    <param name="firstname"><![CDATA[true]]></param>
    <param name="birthdate"><![CDATA[false]]></param>
    <param name="address"  ><![CDATA[true]]></param>
    <param name="phone"    ><![CDATA[true]]></param>
    <param name="homepage" ><![CDATA[true]]></param>
</Island>

Faire le CSS du formulaire de contact 2010-03-28

Sans CSS pour votre formulaire de contact celui-ci prend la forme que voici :

Illustration d'un formulaire de contact

Ce n'est guère engageant, vous l'admettrez. Le CSS est pourtant simple à mettre en place. Le formulaire de contact est inséré dans une division qui est affublée d'une classe bien précise : LS_VAESOLI_CONTACT_FORM. Cela se présente comme suit:

<div class="LS_VAESOLI_CONTACT_FORM">
   … et ici on met le formulaire
</div>

A priori il faut donc donner un style à cette division pour pouvoir la formater correctement. Voici une manière de faire:

div.LS_VAESOLI_CONTACT_FORM {
    width       :   800px;
    background  :   #ddd;
    font-size   :   0.8em;
    margin      :   10px auto;
}

Vous pouvez bien sûr utiliser encore bien d'autres attributs mais ceux-ci vont suffire pour une première passe.

Ensuite, Vae Soli! place dans cette division le formulaire proprement dit : <form action="" method="post">...</form>. Le formulaire possède deux parties : une partie "infos de contact" et une partie "page d'accueil". Chaque partie est mise dans un fieldset. Cela se présente comme suit :

<form class="LS_VAESOLI_CONTACT_FORM" action="" method="post">

  <fieldset class="LS_VAESOLI_CONTACT_FORM_FIELDSET_1">
    <legend>Vos infos de contact</legend>
    <div class="LS_VAESOLI_CONTACT_FORM_FIELDSET_1">
      … ici les labels et les zones d'input nécessaires
    </div> 
  </fieldset> 

  <fieldset class="LS_VAESOLI_CONTACT_FORM_FIELDSET_2">
    <legend>Vos infos de contact</legend>
    <div class="LS_VAESOLI_CONTACT_FORM_FIELDSET_2">
      … ici les labels et les zones d'input nécessaires
    </div> 
  </fieldset> 
</form>

Le fieldset #2 est optionnel; il se pourrait dès lors qu'il ne soit pas du tout généré par Vae Soli!. Ceci est fonction des paramètres de l'île.

Si on veut dès lors diriger l'affichage de chaque fieldset, il faut créer des CSS qui leur correspondent. En voici un exemple:

form.LS_VAESOLI_CONTACT_FORM fieldset {
    width       :   350px;
    height      :   320px;
    border      :   1px solid #bbb;
    padding     :   5px;
    margin      :   10px 5px;
}

fieldset.LS_VAESOLI_CONTACT_FORM_FIELDSET_1 {
    float       :   left;
}

fieldset.LS_VAESOLI_CONTACT_FORM_FIELDSET_2 {
    float       :   right;
}

Le formulaire a maintenant meilleure allure mais ce n'est toujours pas optimal comme on peut s'en rendre compte sur l'illustration ci-dessous :

Illustration d'un formulaire de contact

Intéressons-nous maintenant aux labels et zones de saisie. Le formulaire est bien mieux équilibré si toutes les zones s'alignent entre elles. Il en découle qu'on va créer des CSS pour donner à tous les labels la même largeur et nous ferons de même avec les zones de saisie. Voici comment faire :

form.LS_VAESOLI_CONTACT_FORM fieldset label {
   display      :   inline-block;
   font-size    :   0.9em;
   width        :   130px;
}

form.LS_VAESOLI_CONTACT_FORM fieldset input,
form.LS_VAESOLI_CONTACT_FORM fieldset textarea {
   width        :   230px;
}

Avec ce peu de CSS mis en place, voyons de quoi à l'air notre formulaire (notez que nous n'avons créé qu'une page de base):

Illustration d'un formulaire de contact

Ce n'est pas mal, mais ce n'est pas encore la perfection. Ainsi, la zone de saisie du code postal devrait être plus petite que les autres zones d'input. Par ailleurs, si on veut que code postal et ville tiennent sur une ligne il faut aussi réduire la taille de cette zone. Voilà qui est simple à résoudre:

form.LS_VAESOLI_CONTACT_FORM input#txtZIPCode {
   width        :   65px;
}
form.LS_VAESOLI_CONTACT_FORM input#txtCity {
   width        :   154px;
   margin-left  :   5px;
}

Voyons immédiatement l'impact que cette modification a sur l'affichage de notre formumaire :

Illustration d'un formulaire de contact

Nous approchons de la fin. Il ne reste maintenant plus qu'à faire un peu d'ajustement pour que le texte "Votre adresse email (*):" tienne sur une seule ligne et que la zone de texte aie une taille correcte dans le fieldset #2. Voilà donc la version finale de notre CSS qui va nous permettre d'atteindre ces objectifs.

div.LS_VAESOLI_CONTACT_FORM {
    width       :   800px;
    background  :   #ddd;
    font-size   :   0.8em;
    margin      :   10px auto;
}

form.LS_VAESOLI_CONTACT_FORM fieldset {
    width       :   375px;
    height      :   260px;
    border      :   1px solid #bbb;
    padding     :   5px;
    margin      :   10px 5px;
}

fieldset.LS_VAESOLI_CONTACT_FORM_FIELDSET_1 {
    float       :   left;
}

fieldset.LS_VAESOLI_CONTACT_FORM_FIELDSET_2 {
    float       :   right;
}

form.LS_VAESOLI_CONTACT_FORM fieldset label {
   display      :   inline-block;
   font-size    :   0.85em;
   width        :   140px;
}

form.LS_VAESOLI_CONTACT_FORM fieldset input,
form.LS_VAESOLI_CONTACT_FORM fieldset textarea {
   width        :   225px;
}

form.LS_VAESOLI_CONTACT_FORM input#txtZIPCode {
   width        :   55px;
}
form.LS_VAESOLI_CONTACT_FORM input#txtCity {
   width        :   159px;
   margin-left  :   5px;
}

fieldset.LS_VAESOLI_CONTACT_FORM_FIELDSET_2 textarea {
    width       :   370px !important;
    height      :   100px !important;
}

Illustration d'un formulaire de contact

Précédent Suivant