Exemples

Citation

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

Injecter des CSS de manière dynamique (2012-06-20)

Depuis l'opus "5.0.0003"

Les liens CSS à inclure dans une page sont en général indiqués dans un archipel qui est dédié à cet effet. C'est la manière recommandée par Vae Soli! car de cette manière vous pouvez construire un archipel qui sera inséré dans chaque page : une seule définition et tout un site mis à jour. C'est idéal. Voici un exemple de cette manière de procéder :

<Archipelago id="link" active="yes" category="link">
    <Island id="link" active="yes" xhtml="yes">
        <link rel="stylesheet" type="text/css" href="/vaesoli/css/vaesoli.css" />
        <link rel="stylesheet" type="text/css" href="/css/inside.css" />
    </Island>
</Archipelago>

Désormais, une autre manière d'injecter des CSS est possible en Vae Soli! : <LSCSSLinks>...</LSCSSLinks> Voici comment procéder :

<Defaults>
    <Settings>
        <LSGuid><![CDATA[VAE-8cf5a160-1e8f-45c7-a28e-982aaf3f287a]]></LSGuid>
        <LSKeyword><![CDATA[documentation]]></LSKeyword>
        <LSCSSLinks><![CDATA[/css/documentation.css]]></LSCSSLinks>
    </Settings>
</Defaults>

Dans ce cas précis, la feuille de style /css/documentation.css est injectée dans la page (juste avant la fermeture de la balise </head>). Comme il s'agit d'un paramétrage de page, ce paramétrage n'est pris en compte que dans la page appropriée.

Pour être complet, il faudrait que nous évoquions la possibilité d'interagir directement avec la propriété szCSSLinks de l'objet LSPage. En effet, et c'est là la manière la plus puissante de spécifier des liens CSS additionnels, il est tout à fait possible, dans le corps d'une page, de positionner la propriété szCSSLinks afin d'indiquer le besoin d'ajouter des CSS. Voyez à ce titre l'exemple suivant :

<?php
if ( STR_Empty( $this->szCSSLinks ) )    /* $this est l'objet page */
{
    $this->szCSSLinks = '/css/documentation.css';
}
else
{
    $this->szCSSLinks .= ';/css/documentation.css';
}

<p> ... et ici, on aurait le texte de la page</p>
?>

Injecter des CSS pour des media spécifiques 2012-06-20

L'application d'un pattern particulier dans le <LSCSSLinks>...</LSCSSLinks> (ou même dans la propriété szCSSLinks de l'objet LSPage) permet de mentionner les media auxquels la CSS s'applique. Le pattern à respecter est (*media=…*) comme vous le montre l'exemple suivant :

<Defaults>
    <Settings>
        <!-- Overwrites the default settings of a page -->
        <LSGuid><![CDATA[VAE-8cf5a160-1e8f-45c7-a28e-982aaf3f287a]]></LSGuid>
        <LSKeyword><![CDATA[documentation]]></LSKeyword>
        <LSCSSLinks><![CDATA[/css/documentation.css (*media=projection,screen*)]]></LSCSSLinks>
    </Settings>
</Defaults>

Utilisation de cache 2012-06-13

Vae Soli! permet l'utilisation de cache via la classe LSCache. Voyons rapidement comment cela fonctionne !

L'idée est la suivante : nous disposons d'une chaîne de caractères. Nous voulons la sauver dans un cache dont le nom est "monfichier.cache". Plus tard, au lieu de reconstituer la chaîne (qui pourrait être le résultat de plusieurs minutes de scripting), on souhaite la récupérer du cache, du moins si celui-ci n'a pas expiré. En pseudo-code on aurait qqch du genre :

$oCache = CreateCache( "monfichier.cache" );

if ( ( $oCache does not exist ) || ( $oCache has expired ) )
    $szStr = ThisIsACPUIntensiveFunction();
    Write $szStr in $oCache
else
    $szStr = Read from $oCache
endif

Voilà maintenant un code Vae Soli! :

$szFile = "monfichier.cache";
$oCache = new LSCache( null     ,                   /* No GUID owner */
                       86400    ,                   /* TTL (Time To Live) in seconds */
                       $szFile  ,                   /* Physical filename */
                       false );                     /* Do not use Vae Soli! path for caching */

/* If cache found and not expired */
if ( $oCache->IsFound() && ( ! $oCache->HasExpired() ) )
{
    $szStr = $oCache->Read();                       /* Retrieve info from cache */
}   /* if ( $oCache->IsFound() && ( ! $oCache->HasExpired() ) ) */
else   /* Else of ... if ( $oCache->IsFound() && ( ! $oCache->HasExpired() ) ) */
{
    $szStr = ThisIsACPUIntensiveFunction();
    $oCache->Write( $szStr );
}   /* End of ... Else of ... if ( $oCache->IsFound() ... */

Et à présent, un code extrait de notre analyseur de page :

$szMainDomain = trim( $aURL['domain'] ) . '.' . trim( $aURL['tld'] );
$szFile = FIL_Normalize( dirname( $_SERVER['SCRIPT_FILENAME'] ) . '/' . md5( $szMainDomain ) . '.whois' );
$oCache = new LSCache( null     ,                   /* No GUID owner */
                       86400    ,                   /* TTL in seconds (1 day) */
                       $szFile  ,                   /* Physical filename */
                       false );                     /* Do not use Vae Soli! path */

/* If cache found and not expired */
if ( $oCache->IsFound() && ( ! $oCache->HasExpired() ) )
{
    $this->szWhoisInfo = $oCache->Read();           /* Retrieve whois info */
}   /* if ( $oCache->IsFound() && ( ! $oCache->HasExpired() ) ) */
else   /* Else of ... if ( $oCache->IsFound() && ( ! $oCache->HasExpired() ) ) */
{
    $this->szWhoisInfo = HTTP_WhoIs( $this->szURL );
    /* Write the info in the cache if we got something valuable */
    if ( ( $this->szWhoisInfo != (string) RET_CODE_UNAUTHORIZED ) &&
         ( $this->szWhoisInfo != (string) RET_CODE_NOT_FOUND    ) &&
         ( $this->szWhoisInfo != (string) RET_CODE_NO_CONTENT   )
       )
    {
        $oCache->Write( $this->szWhoisInfo );
    }
}   /* End of ... Else of ... if ( $oCache->IsFound() && ( ! $oCache->HasExpired() ) ) */

Positionner votre propre répertoire de caching (2013-04-09)

Depuis l'opus "5.1.0001"

Par défaut, Vae Soli! décidera lui-même du répertoire où il déposera les fichiers cache. Vous pouvez cependant lui indiquer votre endroit à vous si vous le souhaitez, page par page si vous le désirez. Pour ce faire, il faut positionner le setting LSCacheDir de la page. Voici un extrait du fichier defaults.xml qui s'applique à toutes les pages d'un site :

<Defaults>
    <Settings>
        …
        <LSCacheTTL><![CDATA[0]]></LSCacheTTL>
        <LSCacheDir><![CDATA[/../cache/]]></LSCacheDir>
        …
    </Settings>
</Defaults>

Et ce faisant, Vae Soli! est censé utiliser le répertoire que vous aurez mentionné lorsqu'il effectue le caching de ressources. Si par contre, vous décidiez de faire votre cache vous-même, alors voici le mécanisme à favoriser sous forme d'un extrait du code de LSContentsShare :

/****************************************************************/
/* We shall use a cache here so that we're not obliged to play  */
/* all substitutions over and over again on the same page title */
/*                                                              */
/* We do this for performance reasons !                         */
/****************************************************************/
$szCacheFile        = md5( $this->szSelf . $this->oPage->szLanguage ) . '.share.cache';

$oCache = new LSCache( null         ,                       /* No GUID owner */
                       600          ,                       /* TTL (Time To Live) in seconds */
                       $szCacheFile ,                       /* Physical filename */
                       true         ,                       /* Use Vae Soli! path */
                       $this->oPage->szCacheDir );          /* Cache directory (overwrites Vae Soli! path if NOT null) */

if ( $oCache->IsFound() && ( ! $oCache->HasExpired() ) )    /* If cache found and not expired */
{
    $this->szPageTitle = $oCache->Read();                   /* Retrieve info from cache */
}   /* if ( $oCache->IsFound() && ( ! $oCache->HasExpired() ) ) */
else   /* Else of ... if ( $oCache->IsFound() && ( ! $oCache->HasExpired() ) ) */
{
    $this->szPageTitle  = urlencode( $this->oPage->Substitute( $this->oPage->szH1 ) );
    $oCache->Write( $this->szPageTitle );
}   /* End of ... Else of ... if ( $oCache->IsFound() ... */

Microformat de dernière mise à jour (2009-12-16)

Depuis l'opus "2.3.0007"

Afin d'augmenter la conformité des aspects sémantiques, Vae Soli! a introduit un microformat qui balise les dates de dernière mise à jour de contenu lorsque celles-ci sont disponibles. À l'heure où Google lance la recherche instantanée, en temps réel, tel que ce fut annoncé par Amit Singhal lors d'une conférence de presse, c'est une possibilité intéressante pour donner à votre site et à l'information qu'il contient le coup de pouce qui pourrait le propulser dans les classements des moteurs de recherche (SEO — Search Engine Optimization).

La possibilité de mentionner une date de dernière mise à jour (date et heure en fait) existait déjà depuis bien longtemps dans Vae Soli! comme l'atteste la capture d'acran qui suit :

Ce qui change aujourd'hui, c'est que notre propre balise est maintenant entourée d'une balise faisant usage du microformat Datetime Design Pattern.

Voilà le code que nous générons (exemple) :

<abbr class="last-modified" title="2009-12-16T14:28:27+01:00">
   <span class="LS_VAESOLI_LUPDATE" title="Information de
   dernière mise à jour">2009-12-16 à 14:28:27</span>
</abbr>

L'avantage de cette notation est d'être à la fois lisible par des personnes et par des machines. Dans le cas des moteurs de recherche, ils pourront donc plus facilement répérer les informations les plus récentes.

Depuis l'opus "5.0.0002"

Depuis l'opus 5.0.0002 de Vae Soli! nous avons travaillé le concept et nous lui avons assigner quelques valeurs standard : auto et now[ +|- x] (x jours).

La valeur auto a pour effet d'utiliser la date et heure de la source la plus récente pour l'assigner à l'île ou à la page auxquelles elle se rapporte. Cette valeur est donc propagée.

now[ +|- x] (jours) doit être comprise comme :

• now : maintenant (date et heure du moment)
• now + x jours : maintenant + x (jours)
• now - x jours : maintenant - x (jours)

Voici comment procéder au travers de cinq exemples :

<Land id="/index.php"
      creationdate="20081103"
      lupdate="20120609"         /* Mention d'une date fixe */
      inherit="public"
      href="%geo-path%/index.pdef.xml">
    <Sitemap priority="0.8" frequency="daily" />
</Land>

<Land id="/index.php"
      creationdate="20081103"
      lupdate="auto"             /* Mention d'une date automatique */
      inherit="public"
      href="%geo-path%/index.pdef.xml">
    <Sitemap priority="0.8" frequency="daily" />
</Land>

<Land id="/index.php"
      creationdate="20081103"
      lupdate="now"              /* Mention de la date du jour */
      inherit="public"
      href="%geo-path%/index.pdef.xml">
    <Sitemap priority="0.8" frequency="daily" />
</Land>

<Land id="/index.php"
      creationdate="20081103"
      lupdate="now - 1"          /* Hier */
      inherit="public"
      href="%geo-path%/index.pdef.xml">
    <Sitemap priority="0.8" frequency="daily" />
</Land>

<Land id="/index.php"
      creationdate="20081103"
      lupdate="now + 1"          /* Demain */
      inherit="public"
      href="%geo-path%/index.pdef.xml">
    <Sitemap priority="0.8" frequency="daily" />
</Land>

Mentionner plusieurs sources de contenu pour une île 2010-01-03

Une île peut être composée de plusieurs sources concaténées. Il suffit de mentionner des ressources éclatées comme le montre l'exemple qui suit, qui de façon très précise, indique la manière dont la présente page est composée :

<Archipelago id="body" active="yes" category="body">
    <Island id="contents" active="yes" class="LSContents" lupdate="auto">
        <param name="storage"><![CDATA[%iles%/{auto}-3.php;
                                       %iles%/{auto}-2.php;
                                       %iles%/{auto}-1.php]]></param>
    </Island>
    <Island id="comment" active="yes" class="LSContentsComments" lupdate="auto">
        <param name="locked"><![CDATA[false]]></param>
    </Island>
    <Island id="add-comment" active="yes" class="LSContentsAddComment">
        <param name="locked"><![CDATA[false]]></param>
        <param name="ext"><![CDATA[.comments]]></param>
        <param name="owner-email"><![CDATA[patrick.boens@latosensu.be]]></param>
        <param name="action"><![CDATA[self]]></param>
        <param name="validation"><![CDATA[false]]></param>
    </Island>
</Archipelago>

Que remarquez-vous dans l'exemple illustré ci-dessus ? Tout d'abord que le storage de l'île est composé de 3 sources différentes :

1. %iles%/{auto}-3.php
2. %iles%/{auto}-2.php
3. %iles%/{auto}-1.php

Les 3 sources sont concaténées dans l'ordre mentionné. Les mentions {auto} sont résolues en fonction du nom de la page dans laquelle l'île doit être insérée, de l'archipel dans lequel l'île est renseignée, du nom de l'île elle-même et enfin en fonction de la langue de la page. Pour en savoir davantage sur ces substitutions intelligentes, sautez au chapitre "Georama avec substitutions de propriétés".

Date et heure de dernière mise à jour 2010-01-03

Malgré le fait que l'île soit composée de plusieurs ressources, la date et heure de dernière mise à jour de l'ensemble de l'île est maintenue correctement, du moins pour les ressources locales : la date et heure de dernière mise à jour de l'île correspond à la date de la plus récente source qui la compose.

Contenu Multiple 2012-05-05

Depuis l'opus "5.0.0002"

Il est possible de mentionner des îles dont la source de contenu (storage) est multiple. Voyez par exemple l'île de contenu que voici :

<Island id="contents" active="yes" class="LSContents">
    <param name="storage"><![CDATA[%iles%/{auto}-11.php;
                                   %iles%/{auto}-10.php;
                                   %iles%/{auto}-9.php;
                                   %iles%/{auto}-8.php;
                                   %iles%/{auto}-7.php;
                                   %iles%/{auto}-6.php;
                                   %iles%/{auto}-5.php;
                                   %iles%/{auto}-4.php;
                                   %iles%/{auto}-3.php;
                                   %iles%/{auto}-2.php;
                                   %iles%/{auto}-1.php]]></param>
</Island>

Vous remarquerez que la section mise en évidence mentionne plusieurs fichiers de contenus. Une petite explication s'impose.

En effet, vous voyez que le paramètre storage utilise jusqu'à 11 fichiers de contenus à enchaîner dans l'ordre mentionné. Vous remarquerez aussi que %iles% et {auto} sont un peu spéciaux. %iles% fait référence à une variable du géorama et est en fait transformée en quelque chose comme /islands. {auto} par contre est plus "tricky". C'est en fait un shortcut pour indiquer un nommage automatique. Dans ce cas, Vae Soli! forme un nom automatique basé sur le nom de la page (samples), l'ID de l'archipel (body), l'ID de l'île (contents) et la langue courante. Dans notre cas cela forme la chaîne suivante samples-body-contents_fr. Cette chaîne est ajoutée à /islands (variable du géorama %iles%) et on lui concatène un suffixe: -11.php, -10.php, etc.

Cette fonctionnalité de Vae Soli! permet donc de constituer des pages à contenu multiple … et c'est TRÈS EXACTEMENT de cette manière que la présente page est constituée.

Ceci dit, on peut très vite arriver à des pages énormes qui impliquent un transfert conséquent de bytes entre le serveur et le navigateur du visiteur. Celui-ci ne sera pas très heureux si d'aventure vous lui serviez ainsi 500 Kb de contenu sur un téléphone ! C'est ici que la pagination de contenu peut vous aider. Alors ? Comment faire ?

Voici la même île avec toutefois un paramètre supplémentaire (et c'est d'ailleurs cela qui consitutue la nouevauté de la version 5.0.0002) :

<Island id="contents" active="yes" class="LSContents">
    <param name="storage"><![CDATA[%iles%/{auto}-11.php;
                                   %iles%/{auto}-10.php;
                                   %iles%/{auto}-9.php;
                                   %iles%/{auto}-8.php;
                                   %iles%/{auto}-7.php;
                                   %iles%/{auto}-6.php;
                                   %iles%/{auto}-5.php;
                                   %iles%/{auto}-4.php;
                                   %iles%/{auto}-3.php;
                                   %iles%/{auto}-2.php;
                                   %iles%/{auto}-1.php]]></param>
    <param name="paginate"><![CDATA[true]]></param>
</Island>

… et là tout à coup, l'ensemble du contenu n'est plus offert en un bloc : nous avons introduit de la pagination.

En admettant que la page à visualiser soir la page samples.php, située dans la racine du site (c'est le cas de la présente page), alors Vae Soli! génèrera des liens pour la navigation entre les pages :

<p><a href="/samples.php?page=1">Previous</a>  <a href="/samples.php?page=3">Next</a></p>

Mais ce n'est pas tout car en effet Vae Soli! génère aussi des liens dans la section <head>…</head> de la page à destination des moteurs de recherche pour leur indiquer qu'une page est peut-être suivie d'une série d'autres, voire précédée d'une série d'autres. Voyez d'ailleurs à ce propos l'article qui traite précisément de ce sujet sur le site de Lato Sensu Management :

<link rel="prev" href="/samples.php?page=1" />
<link rel="next" href="/samples.php?page=3" />

Contenu Multiple: mentionnez des titres 2012-06-17

Depuis l'opus "5.0.0003"

Avec la version 5.0.0003 de Vae Soli! il est permis de mentionner des titres sur les différents contenus. Pour que cela marche il faut évidemment suivre une petite convention de notation et il faut s'interdire les caractères , et ;. Le titre de contenu doit être inclu grâce au pattern suivant : (*<titre>*). En voici un exemple :

<Island id="contents" active="yes" class="LSContents" lupdate="auto">
    <param name="paginate"><![CDATA[true]]></param>
    <param name="storage"><![CDATA[%iles%/{auto}-11.php (* Le contenu le plus récent: les derniers ajouts *);
                                   %iles%/{auto}-10.php (* Le contenu un peu moins récent *);
                                   %iles%/{auto}-9.php (* Consultez les exemples de Vae Soli! *);
                                   %iles%/{auto}-8.php (* Consultez les exemples de Vae Soli! *);
                                   %iles%/{auto}-7.php (* Consultez les exemples de Vae Soli! *);
                                   %iles%/{auto}-6.php (* Consultez les exemples de Vae Soli! *);
                                   %iles%/{auto}-5.php (* Consultez les exemples de Vae Soli! *);
                                   %iles%/{auto}-4.php (* Consultez les exemples de Vae Soli! *);
                                   %iles%/{auto}-3.php (* Consultez les exemples de Vae Soli! *);
                                   %iles%/{auto}-2.php (* Le contenu ancien *);
                                   %iles%/{auto}-1.php (* Le contenu le plus ancien - ce qui existe depuis longtemps *)]]></param>
</Island>

Ce faisant, les liens Précédent et Suivant inclus dans le bas de la page sont affublés des titres assignés à chaque contenu. Mais ce n'est pas tout car si vous indiquez que vous souhaitez inclure une table des matières les liens générés mentionnent vos titres. Avancez au point suivant pour qu'on vous montre comment !

Contenu multiple: intégrez une table des matières 2012-06-17

Depuis l'opus "5.0.0003"

Lorsque vous intégrez des contenus multiples il peut s'avérer intéressant d'inclure une table des matières rapide de telle sorte que les visiteurs de votre site puissent se rendre rapidement à une page individuelle de votre contenu. C'est extrêmement pratique lorsque vous écrivez un didacticiel par exemple ! Non seulement l'enchaînement des pages est automatique mais encore vous pouvez créer une table des matières avec accès direct à chaque page (la prochaine version de Vae Soli! permettra d'optimiser la description de la page, son h1 et son titre — mais cela c'est un développement en cours !) … et cela grâce à un simple paramètre de l'île : toc=true. Voyez comment faire :

<Island id="contents" active="yes" class="LSContents" lupdate="auto">
    <param name="paginate"><![CDATA[true]]></param>
    <param name="toc"><![CDATA[true]]></param>
    <param name="storage"><![CDATA[%iles%/{auto}-11.php (* Le contenu le plus récent: les derniers ajouts *);
                                   %iles%/{auto}-10.php (* Le contenu un peu moins récent *);
                                   %iles%/{auto}-9.php (* Consultez les exemples de Vae Soli! *);
                                   %iles%/{auto}-8.php (* Consultez les exemples de Vae Soli! *);
                                   %iles%/{auto}-7.php (* Consultez les exemples de Vae Soli! *);
                                   %iles%/{auto}-6.php (* Consultez les exemples de Vae Soli! *);
                                   %iles%/{auto}-5.php (* Consultez les exemples de Vae Soli! *);
                                   %iles%/{auto}-4.php (* Consultez les exemples de Vae Soli! *);
                                   %iles%/{auto}-3.php (* Consultez les exemples de Vae Soli! *);
                                   %iles%/{auto}-2.php (* Le contenu ancien *);
                                   %iles%/{auto}-1.php (* Le contenu le plus ancien - ce qui existe depuis longtemps *)]]></param>
</Island>

Contenu multiple: mentionnez des références 2012-06-19

Depuis l'opus "5.0.0003"

En cas de multiples contenus pour une même page ET en cas d'utilisation de titres ET insertion d'une table de matières vous pouvez également mentionner une référence pour chaque contenu distinct. Cette possibilité a été programmée afin de respecter des normes SEO.

En effet, les contenus multiples donnent lieu à des liens semblables dans la table des matières :

• http://www.vaesoli.org/samples.php?page=1
• http://www.vaesoli.org/samples.php?page=2
• http://www.vaesoli.org/samples.php?page=3
• etc.

D'un point de vue technique, l'implémentation correspond au besoin. Par contre d'un point de vue SEO et moteurs de recherche, cette technique n'est pas optimale. En effet, il suffirait d'introduire un nouveau contenu, disons entre la page 2 et la page 3, pour qu'automatiquement tous les contenus soient décalés. Dès lors la page 3 n'offrirait plus le contenu qui était le sien avant l'insertion du nouveau contenu. Des visiteurs étant amenés sur vos pages risquent dès lors d'être déçus.

C'est la raison pour laquelle nous avons introduit la notion de "référence" sur un contenu multiple. Voilà comment ce présente, à l'instant 't' le contenu multiple de la documentation de Vae Soli! :

<Island id="contents" active="yes" class="LSContents" lupdate="auto">
    <param name="paginate"><![CDATA[true]]></param>
    <param name="page"><![CDATA[0]]></param>
    <param name="toc"><![CDATA[true]]></param>
    <param name="storage"><![CDATA[%iles%/documentation/LSColors.doc.functions.php (* Fonctions Couleurs [*ref=colors*] *);
                                   %iles%/documentation/LSDate.doc.functions.php  (* Fonctions Date [*ref=dates*] *);
                                   %iles%/documentation/LSFiles.doc.functions.php (* Fonctions Fichiers [*ref=files*] *);
                                   %iles%/documentation/LSHtml.doc.functions.php (* Fonctions HTML [*ref=html*] *);
                                   %iles%/documentation/LSHttp.doc.functions.php (* Fonctions HTTP [*ref=http*] *);
                                   %iles%/documentation/LSStrings.doc.functions.php (* Fonctions Chaînes [*ref=strings*] *);
                                   %iles%/documentation/LSUrl.doc.functions.php (* Fonctions URL [*ref=url*] *)]]></param>
</Island>

Cette notation permet de générer une autre table des matières, une table des matières où les contenus seront maintenant identifiés grâce à des références en lieu et place d'un numéro de page. L'idée étant, bien évidemment de ne pas modifier les références pour que les moteurs de recherche s'y retrouvent dans vos multiples contenus. CQFD.

Nuage de mots : LSContentsTagCloud 2012-05-03

Depuis l'opus "5.0.0001"

Nous vous offrons une nouveau type d'île : les nuages de mots. Intégrer cette fonctionnalité à votre géorama est très simple :

<Island id="cloud" active="yes" class="LSContentsTagCloud">
    <param name="css"><![CDATA[width:500px;line-height:2em;
    margin:30px auto 10px auto;clear:both;position:relative;top:20px;]]></param>
    <param name="words"><![CDATA[Paradeigma=/resources/core/web-templates-paradeigma/;
        Models=/resources/core/web-templates-paradeigma/;
        Templates=/resources/core/web-templates-paradeigma/;
        Graphical Themes=/resources/core/web-templates-paradeigma/;
        UIKey=http://www.uikey.org;
        FastWrite=http://www.fastwrite.com;
        Helpy=http://www.fastwrite.com;
        Factures=/?showme=invoices;
        Clients=/?showme=customers;
        Fournisseurs=/?showme=suppliers;
        Utilisateurs=/?showme=users;
        Microniouzes=/?showme=micronews;
        Partenaires=/?showme=partners;
        Services=/?showme=products;
        Factures fournisseurs=/?showme=invoices-in;
        Promotions=/?showme=promos;
        Coupons=/?showme=coupons;
        Heures d'ouverture=/?showme=opening-hours;
        Périodes de vacance=/?showme=vacation-periods;
        Moyens de paiement=/?showme=payment-method;
        ]]></param>
</Island>

Tous les mots indiqués dans le paramètre words sont inclus en des tailles alléatoires (attention, les tailles ne sont PAS calculées en fonction du taux d'occurence du mot). A chaque mot il est possible de mentionner une URL à activer. Voici un exemple réel :

Après le nuage de mots, voici le nuage d'images : LSContentsImageGallery2012-05-03

Depuis l'opus "5.0.0001"

C'est une vieille île à laquelle nous avons donné un petit coup de polish sous la forme d'un paramètre de plus.

<Island id="ImageCloud" active="yes" class="LSContentsImageGallery" cacheTTL="7200">
    <role-mapping role="editor" groups="quitus" />
    <param name="storage"><![CDATA[/images/diaporama]]></param>
    <param name="img-per-row"><![CDATA[6]]></param>
    <param name="caption"><![CDATA[Essai de nuage d'images]]></param>
    <param name="cloud"><![CDATA[true]]></param>
    <param name="zoom"><![CDATA[75]]></param>
    <param name="left-offset-factor"><![CDATA[1.61]]></param>
    <param name="thumb-width"><![CDATA[125]]></param>
    <param name="thumb-height"><![CDATA[100]]></param>
    <param name="thumb-quality"><![CDATA[100]]></param>
    <param name="thumb-prefix"><![CDATA[-]]></param>
    <param name="thumb-suffix"><![CDATA[]]></param>
    <param name="mask"><![CDATA[*.jpg]]></param>
    <param name="make-thumbs"><![CDATA[true]]></param>
</Island>

HTTP headers 2012-04-18

Depuis l'opus "5.0.0001"

Pour ceux qui ont besoin de petits features surprenants, sachez qu'avec Vae Soli! 5.0.0001 vous pouvez désormais envoyer des headers HTTP dans la réponse de vos pages. C'est une fonctionnalité assez technique mais qui peut avoir de nombreux avantages lorsque vous souhaitez interpréter les réponses envoyées par le serveur sans devoir parser toute la page (par exemple). Commençons par examiner la syntaxe :

<Land id="/index.php"
      group="{main}"
      creationdate="20130223"
      lupdate="now"
      inherit="public"
      http-header="Quitus: activated;Paradeigma: Essentiel"
      href="%geo-path%/{land->id}.pdef.xml">
    <Sitemap priority="0.8" frequency="weekly" />
</Land>

Dans l'exemple qui précède on demande de positionner deux headers distincts :

1. Quitus: activated
2. Paradeigma: Essentiel

L'attribut est http-header. Cet attribut accepte le positionnement de plusieurs headers par tokenization de sa valeur.

Lorsqu'on consulte les headers HTTP renvoyés on constate l'existance des deux headers mentionnés :

Ce qui est possible sur une page est aussi possible sur un archipel ou sur une île. Pensez à ce feature lorsque vous devez savoir, après coup, par où vous êtes passé, ce que vous avez inclus dans une page, etc.

Tags <audio>…</audio> et <video>…</video> 2012-05-03

Depuis l'opus "5.0.0005"

<audio>…</audio> 2012-05-03

Nous avons terminé l'implémentation du tag <audio>…</audio>. Notre code supporte tous les mécanismes de fallback imaginés pour le HTML5. Il supporte également les attributs suivants :

• autoplay
• controls
• loop
• preload

Voici un exemple^[1]  :

$oTag               = new LSTag('audio');           // On crée un tag 'audio'
$oTag->aSrc[]       = '/islands/labounty.ogg';      // On lui donne une source
$oTag->aSrc[]       = '/islands/labounty.mp3';      // On lui ajoute une autre source
$oTag->szPreload    = 'auto';                       // On dit qu'il faut prébuffériser la source
$oTag->Autoplay     = true;                         // Dès qu'affichage ... jouer
$oTag->Loop         = true;                         // ... en boucle
$oTag->Controls     = true;                         // Avec des contrôles
echo $oTag->Render();                               // Rendu du HTML5

<audio controls autoplay loop preload="auto">
<source src="/islands/labounty.ogg" />
<source src="/islands/labounty.mp3" />
</audio>

Un petit mot sur les formats. Bien que ce soit le format MP3 qui se soit imposé de manière évidente, il se fait que ce format est protégé par brevet. L'industrie des navigateurs a dès lors préféré se tourner vers un autre type de format : le format .ogg. Vous trouverez ci-dessous une matrice de support, format / navigateur.

Format / Navigateur

Format	Opera	Chrome	Firefox	Safari	IE 9
.mp3	No	Yes	No	Yes	Yes
.ogg	Yes	Yes	Yes	No	No

Comme indiqué sur le site d'Opera, vous pouvez utiliser des convertisseurs gratuits pour passer au format .ogg comme par exemple Free Rip ou Audio MP3 converter pour Mac.

<video>…</video> 2012-05-03

Depuis l'opus "5.0.0005"

Le tag <video>…</video> se comporte quasiment de manière identique au tag <audio>…</audio>. En fait, dès le moment où notre code de génération pour le tag <audio>…</audio> était fait, celui du tag <video>…</video> était fait aussi : c'est le même !^[2]

Une recommandation de travail pour le géorama 2012-04-18

Vous savez qu'il est possible de définir une page dans un fichier externe au géorama. C'est une pratique que nous recommandons, surtout dans le cas de gros sites. En effet, cela permet de charger un géorama (beaucoup) léger et de ne charger la définition d'une page que s'il s'agit de la page à afficher. Il est donc d'usage d'avoir un géorama qui soit une collection de pages définies de la manière suivante :

<Land id="/complaints.php"
      group=""
      creationdate="20120312"
      lupdate="auto"
      inherit="public"
      href="%geo-path%/complaints.xml">
    <Sitemap priority="0.1" frequency="monthly" />
</Land>

… la page /complaints.php est elle-même définie dans le fichier XML complaints.xml.

Nous vous conseillons désormais de ne plus utiliser l'extension .xml pour définir vos pages mais plutôt d'utiliser l'extension .pdef.xml pour Page DEFinition comme le démontre l'exemple suivant :

<Land id="/complaints.php"
      group=""
      creationdate="20120312"
      lupdate="auto"
      inherit="public"
      href="%geo-path%/complaints.pdef.xml">
    <Sitemap priority="0.1" frequency="monthly" />
</Land>

Check de referer 2012-04-18

Depuis l'opus "5.0.0001"

Vae Soli! permet désormais de vérifier le referer d'une page. Finalement vous pouviez faire cela vous même en créant le code nécessaire mais ce que Vae Soli! propose en version 5.0.0001 c'est que le paramètre referer soit vérifié de manière automatique dans le cas d'une île, d'un archipel ou carrément d'une page.

Voici l'exemple d'une page complaints.php qui ne se montrera que si le visiteur provient de la page technsupp.php :

<Land id="/complaints.php"
      group=""
      creationdate="20120312"
      lupdate="auto"
      inherit="public"
      href="%geo-path%/complaints.pdef"
      referer="/techsupp.php">
    <Sitemap priority="0.1" frequency="monthly" />
</Land>

Dans le cas de l'utilisation du paramètre referer sur une page le mécanisme onfail est activé si la condition n'est pas satisfaite.

Le même paramètre peut être utilisé sur un archipel (l'archipel ne se montrera QUE si on vient de la page indiquée dans le paramètre referer) ou même, plus finement encore, sur une île.

HTML 5 2012-04-17

Depuis l'opus "5.0.0001"

Les contrôles (<input ... />)

Avec l'arrivée dans Vae Soli! des contrôles de type HTML 5, une nouvelle version majeure de notre framework a été mise à disposition de la communauté de développeurs, la version 5.0.0001. Voici donc quelques explications concernant ces nouveaux contrôles.

Les exemples qui vous sont fournis ici ne s'afficheront correctement QUE SI votre navigateur supporte le HTML 5. À ce jour (17/04/2012), le support du HTML 5 est très inégal dans beaucoup de navigateurs : certains supportent des fonctionnalités que d'autres ne supportent pas; des fonctionnalités disparaissent avec l'arrivé de nouvelles versions des browsers, d'autres font leur apparition. Nous faisons tout notre possible pour tracer ces différentes évolutions dès qu'elles apparaissent. Quand une fonctionnalité ne semble pas supportée par un navigateur, Vae Soli! essaye de retomber sur ses pattes en proposant une fonctionnalité proche ou alternative.
Un dernier mot pour vous dire que nous avons testé le support des fonctionnalités dans les différents navigateurs et que nous avons parfois préféré ne pas les fournir plutôt que d'en avoir un support incomplet ou inexact. Dès lors, il se pourrait que dans certains cas Vae Soli! dise que votre navigateur ne supporte pas une fonctionnalité alors qu'en fait il la supporte mais pas de manière complète.

LSInput('date')

Votre navigateur (CCBot/2.0 (https://commoncrawl.org/faq/)), identifié comme étant 'unknown' sur la plateforme 'unknown', ne supporte pas le type date !

LSInput('datetime')

Votre navigateur (CCBot/2.0 (https://commoncrawl.org/faq/)), identifié comme étant 'unknown' sur la plateforme 'unknown', ne supporte pas le type datetime !

LSInput('month')

Votre navigateur (CCBot/2.0 (https://commoncrawl.org/faq/)), identifié comme étant 'unknown' sur la plateforme 'unknown', ne supporte pas le type month !

LSInput('week')

Votre navigateur (CCBot/2.0 (https://commoncrawl.org/faq/)), identifié comme étant 'unknown' sur la plateforme 'unknown', ne supporte pas le type week !

LSInput('time')

Votre navigateur (CCBot/2.0 (https://commoncrawl.org/faq/)), identifié comme étant 'unknown' sur la plateforme 'unknown', ne supporte pas le type time !

LSInput('color')

aliceblueantiquewhiteaquaaquamarineazurebeigebisqueblackblanchedalmondbluebluevioletbrownburlywoodcadetbluechartreusechocolatecoralcornflowerbluecornsilkcrimsoncyandarkbluedarkcyandarkgoldenroddarkgraydarkgreydarkgreendarkkhakidarkmagentadarkolivegreendarkorangedarkorchiddarkreddarksalmondarkseagreendarkslatebluedarkslategraydarkslategreydarkturquoisedarkvioletdeeppinkdeepskybluedimgraydimgreydodgerbluefirebrickfloralwhiteforestgreenfuchsiagainsboroghostwhitegoldgoldenrodgraygreygreengreenyellowhoneydewhotpinkindianredindigoivorykhakilavenderlavenderblushlawngreenlemonchiffonlightbluelightcorallightcyanlightgoldenrodyellowlightgraylightgreylightgreenlightpinklightsalmonlightseagreenlightskybluelightslategraylightslategreylightsteelbluelightyellowlimelimegreenlinenmagentamaroonmediumaquamarinemediumbluemediumorchidmediumpurplemediumseagreenmediumslatebluemediumspringgreenmediumturquoisemediumvioletredmidnightbluemintcreammistyrosemoccasinnavajowhitenavyoldlaceoliveolivedraborangeorangeredorchidpalegoldenrodpalegreenpaleturquoisepalevioletredpapayawhippeachpuffperupinkplumpowderbluepurpleredrosybrownroyalbluesaddlebrownsalmonsandybrownseagreenseashellsiennasilverskyblueslateblueslategrayslategreysnowspringgreensteelbluetantealthistletomatoturquoisevioletwheatwhitewhitesmokeyellowyellowgreen

LSInput('tel')

Votre navigateur (CCBot/2.0 (https://commoncrawl.org/faq/)), identifié comme étant 'unknown' sur la plateforme 'unknown', ne supporte pas le type tel !

LSInput('url')

Votre navigateur (CCBot/2.0 (https://commoncrawl.org/faq/)), identifié comme étant 'unknown' sur la plateforme 'unknown', ne supporte pas le type url !

LSInput('number')

Votre navigateur (CCBot/2.0 (https://commoncrawl.org/faq/)), identifié comme étant 'unknown' sur la plateforme 'unknown', ne supporte pas le type number !

LSInput('integer')

Votre navigateur (CCBot/2.0 (https://commoncrawl.org/faq/)), identifié comme étant 'unknown' sur la plateforme 'unknown', ne supporte pas le type integer !

Le support de integer n'est pas bon dans Opera car la propriété maxlen n'est pas utilisée correctement.

LSInput('email')

Votre navigateur (CCBot/2.0 (https://commoncrawl.org/faq/)), identifié comme étant 'unknown' sur la plateforme 'unknown', ne supporte pas le type email !

Attribut autofocus

L'exemple doit encore être fourni

Attribut placeholder

L'exemple doit encore être fourni

Attribut pattern

L'exemple doit encore être fourni

Attribut required

Votre navigateur (CCBot/2.0 (https://commoncrawl.org/faq/)), identifié comme étant 'unknown' sur la plateforme 'unknown', ne supporte pas le type required !

Les nouvelles balises

Un ensemble de nouvelles balises ont fait leur apparition. Vae Soli! supporte un ensemble limité de ces nouvelles balises.

<datalist>...</datalist>

Cette balise était très attendue dans les formulaires. Elle vous permet de spécifier des valeurs attendues et de laisser l'utilisateur faire son choix parmi elles tout en ne limlitant pas son choix à ces seules valeurs.

Intégrer des RSS LSContentsRSS 2012-02-01

Depuis l'opus "4.5.0100"

Depuis longtemps, Vae Soli! permet l'intégration de nouvelles RSS, et ce, grâce à la classe LSContentsRSS.

Pour l'instant, seuls les types interne à Vae Soli! et RSS 2.0 sont supportés. En particulier, nous ne supportons pas ATOM ni RSS 1.1.

Voilà une île typique d'intégration de nouvelles RSS liées à la technologie.

Line 001: <Island id="rss-technology" active="yes" class="LSContentsRSS" cacheTTL="7200">
Line 002:     <param name="rss-type"><![CDATA[rss-2]]></param>
Line 003:     <param name="storage"><![CDATA[http://www.lemonde.fr/rss/tag/technologies.xml]]></param>
Line 004:     <param name="channel-heading"><![CDATA[h2]]></param>
Line 005:     <param name="item-heading"><![CDATA[h3]]></param>
Line 006:     <param name="display-channel-image"><![CDATA[false]]></param>
Line 007:     <param name="pubdate"><![CDATA[3 days ago]]></param>
Line 008: </Island>

En ligne 002, on spécifie quel type de RSS on souhaite intégrer. En ligne 003, on spécifie la source du flux RSS. Aux lignes 004 et 005 on indique le niveau de heading (<h1>, <h2>, <h3>, <h4>, <h5> ou <h6>) pour le canal et pour l'article dans le canal. En ligne 006, on indique s'il faut oui ou non afficher les images incluses dans le flux. La dernière ligne de l'exemple, la ligne 007, permet de mentionner quand le flux doit être affiché (date de publication).

Vous pouvez, dans un même rendu RSS, intégrer plusieurs flux. Il suffit de multiplier les sources RSS comme vous le montre l'exemple ci-dessous :

<Island id="rss-technology" active="yes" class="LSContentsRSS" cacheTTL="7200">
    <param name="rss-type"><![CDATA[rss-2]]></param>
    <param name="storage"><![CDATA[http://www.lemonde.fr/rss/tag/technologies.xml;
                                   http://www.lesoir.be/services/rss/la_vie_du_net/index.xml;
                                   http://www.journaldunet.com/rss/magazine/;
                                   http://rss.feedsportal.com/c/32458/f/477425/index.rss]]></param>
    <param name="channel-heading"><![CDATA[h2]]></param>
    <param name="item-heading"><![CDATA[h3]]></param>
    <param name="display-channel-image"><![CDATA[false]]></param>
    <param name="pubdate"><![CDATA[3 days ago]]></param>
</Island>

Changer la taille des polices (AAA): LSContentsFontSizer 2011-12-08

Depuis l'opus "4.5.0004"

La classe LSContentsFontSizer permet de gérer la taille des polices d'un site. Ce dont on parle, c'est d'une série de petits contrôles qui permettent d'agrandir ou rapetisser les polices comme le montre l'illustration suivante :

Pour disposer de ce type de contrôle il suffit de construire une île de la manière suivante :

<Archipelago id="font-sizer" active="yes" category="font-sizer">
    <Island id="fontsizer" active="yes" class="LSContentsFontSizer" />
</Archipelago>

Lorsque Vae Soli! rencontre ce genre d'île dans le géorama, le code HTML est généré. Ce code contient du Javascript :

<script type="text/javascript" defer="defer">
// <![CDATA[
oTheBody = document.getElementsByTagName('body')[0];
if ( ( szCookie = getcookie( 'ls-font-size' ) ) != null )
{
    oTheBody.style.fontSize = szCookie;
}
function LS_83438f2f76e89f8ecc66307ee16c7b11( n )
{
    if ( oTheBody.style.fontSize.length <= 0 || n == 0 )
    {
        oTheBody.style.fontSize = '1em';
    }
    else
    {
        oTheBody.style.fontSize = ( parseFloat( oTheBody.style.fontSize,10 ) + n ) + 'em';
    }
    setcookie( 'ls-font-size',oTheBody.style.fontSize,360,'/' );
}
//]]>
</script>

Comme vous le constatez, Vae Soli! utilise un cookie ('ls-font-size') pour sauver la taille choisie et la restituer plus tard.

Notes de bas de page

^[1] … Nous attendons l'autorisation de Bill Labounty pour vous donner à entendre, grâce à notre support du tag <audio>…</audio> l'un des morceaux emblématiques de la FM californienne.

^[2] … Dès que nous pouvons disposer d'une vidéo libre de droits à vous montrer nous nous ferons un plaisir de générer le code HTML5 correspondant au tag <video>…</video>. Pourquoi pas une vidéo de Bill Labounty?

Précédent Suivant