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)

La classe LSContentsBusinessCoordinates

Afficher une carte statique de Google Map : LSContentsBusinessCoordinates 2009-09-29

Depuis l'opus "2.3.0000"

La classe LSContentsBusinessCoordinates permet également d'afficher une carte statique de Google Map. Il suffit dès lors d'avoir eu UNE SEULE FOIS un accès à une carte Google, de la stocker, et d'y faire appel par la suite.

Un seul paramètre permet de gérer la chose, le paramètre google-map-storage :

<Island id="coordinates" active="yes" class="LSContentsBusinessCoordinates">
    <param name="business-name"          ><![CDATA[Ma société]]></param>
    <param name="business-legal-form"    ><![CDATA[s.a.]]></param>
    <param name="business-address"       ><![CDATA[Rue des fleurs, 18 1000 Bruxelles - Belgique]]></param>
    <param name="business-lat"           ><![CDATA[50.385195]]></param>
    <param name="business-lon"           ><![CDATA[4.660520]]></param>
    <param name="rdfa"                   ><![CDATA[true]]></param>
    <param name="google-map-api-key"     ><![CDATA[Ici ... votre clef Google]]></param>
    <param name="google-map-size"        ><![CDATA[600x300]]></param>
    <param name="google-map-zoom"        ><![CDATA[14]]></param>
    <param name="google-map-type"        ><![CDATA[roadmap]]></param>
    <param name="google-map-marker-color"><![CDATA[red]]></param>
    <param name="google-map-storage"     ><![CDATA[/images/route-satellite.gif]]></param>
    <param name="business-phones"        ><![CDATA[Tél.: +32 2 123 45 67]]></param>
</Island>

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

Depuis l'opus "2.3.0007"

Si vous souhaitez que Vae Soli! n'attache aucune importance aux paramètres particuliers mentionnés (e.g. business-name, business-legal-form, …) il suffit de spécifier le paramètre storage. Dans ce cas précis l'île se comportera comme si c'était une île de classe LSContents : 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="coordinates" active="yes" class="LSContentsBusinessCoordinates">
    <param name="storage"            ><![CDATA[/islands/business-coord.php]]></param>
    <param name="business-name"      ><![CDATA[Ma société]]></param>
    <param name="business-legal-form"><![CDATA[s.a.]]></param>
    <param name="business-address"   ><![CDATA[Rue des fleurs, 18 1000 Bruxelles - Belgique]]></param>
    <param name="business-lat"       ><![CDATA[50.385195]]></param>
    <param name="business-lon"       ><![CDATA[4.660520]]></param>
    <param name="rdfa"               ><![CDATA[true]]></param>
</Island>

Afficher une carte dynamique avec Google Map : LSContentsBusinessCoordinates 2010-03-22

Depuis l'opus "2.5.0017"

Pour bénéficier de l'affichage dynamique avec Google Maps, il suffit de mentionner le paramètre google-api comme l'indique l'exemple ci-dessous :

<Island id="coordinates" active="yes" class="LSContentsBusinessCoordinates">
    <param name="business-name"      ><![CDATA[Ma société]]></param>
    <param name="business-legal-form"><![CDATA[s.a.]]></param>
    <param name="business-address"   ><![CDATA[Rue des fleurs, 18 1000 Bruxelles - Belgique]]></param>
    <param name="business-lat"       ><![CDATA[50.385195]]></param>
    <param name="business-lon"       ><![CDATA[4.660520]]></param>
    <param name="rdfa"               ><![CDATA[true]]></param>
    <param name="google-map-size"    ><![CDATA[600x300]]></param>
    <param name="google-map-zoom"    ><![CDATA[14]]></param>
    <param name="google-map-type"    ><![CDATA[roadmap]]></param>
    <param name="business-phones"    ><![CDATA[Tél.: +32 2 123 45 67]]></param>
    <param name="google-api"         ><![CDATA[v3]]></param>
</Island>

Construire des coordonnées business pour plusieurs départements :
2010-03-27

Depuis l'opus "2.5.0018"

L'exemple est encore à construire sur base de Verbruggen

Rediriger des pages depuis le géorama 2010-03-17

Depuis l'opus "2.5.0017"

Vous pouvez rediriger une page vers une autre page grâce à l'attribut redirect de la page dans le géorama, directement.

<Land id="/index.php" active="yes" redirect="/my-other-page.php" >
    …
</Land>

Si vous avez besoin de davantage d'intelligence, vous pouvez également spécifier une expression dynamique comme dans l'exemple qui suit :

<Land id="/index.php" active="yes" redirect=".php= return RedirectTo();" >
    …
</Land>

Publier vos tweets avec LSTwitterPost 2010-02-05

Depuis l'opus "2.5.0000"

Grâce à la classe LSFormTweet il vous est possible d'envoyer des tweets sur un compte Twitter. En voici l'exemple le plus simple :

<Island id="tweet-now" active="yes" class="LSFormTweet">
    <param name="action"><![CDATA[self]]></param>
    <param name="rows"><![CDATA[3]]></param>
    <param name="cols"><![CDATA[50]]></param>
    <param name="user"><![CDATA[moncompte]]></param>
    <param name="pwd"><![CDATA[monmotdepasse]]></param>
</Island>

Gardez le contact avec vos abonnés Twitter grâce à la classe LSContentsTwitterFollowers 2010-02-23

Cette classe permet d'afficher vos abonnés de 2 manières différentes : soit avec un profil étendu, soit en mode "box" (n'apparaissent alors que les "avatars" de vos abonnés).

<Island id="followers" active="yes" class="LSContentsTwitterFollowers">
    <param name="user"><![CDATA[moncompte]]></param>
    <param name="pwd"><![CDATA[monmotdepasse]]></param>
    <param name="tweeple-id"><![CDATA[111853604]]></param> <!-- vaesoliorg -->
    <param name="type"><![CDATA[box]]></param>
</Island>

Pour faire bonne mesure, n'hésitez pas à ajouter un petit cache sur cette île afin de booster les performances de votre site :

<Island id="followers"   active="yes" class="LSContentsTwitterFollowers" cacheTTL="600">
    <param name="user"><![CDATA[moncompte]]></param>
    <param name="pwd"><![CDATA[monmotdepasse]]></param>
    <param name="tweeple-id"><![CDATA[111853604]]></param>
    <param name="type"><![CDATA[box]]></param>
</Island>

N'affichez vos abonnés Twitter que s'ils sont en nombre suffisant 2010-02-23

Grâce au paramètre min-followers vous pouvez "éviter le ridicule" … car effectivement montrer 3 abonnés sur votre site ne fait pas sérieux. Ce paramètre vous permet donc d'indiquer un minimum d'abonnés pour que l'île soit affichée.

<Island id="followers"   active="yes" class="LSContentsTwitterFollowers">
    <param name="user"><![CDATA[moncompte]]></param>
    <param name="pwd"><![CDATA[monmotdepasse]]></param>
    <param name="min-followers"><![CDATA[10]]></param>
    <param name="tweeple-id"><![CDATA[111853604]]></param>
    <param name="type"><![CDATA[box]]></param>
</Island>

Partager le contenu de votre site sur Facebook, Twitter, Linkedin, Digg, Delicious, etc. 2010-02-03

Depuis l'opus "2.5.0000"

C'est d'une simplicité enfantine de partager ses pages à l'intention des utilisateurs de Facebook, de Twitter, de Digg, de Delicious, de LinkedIn. Vraiment simple ! Voilà tout ce qu'il faut faire :

<Island id="share" active="yes" class="LSContentsShare">
    <param name="facebook"><![CDATA[true]]></param>
    <param name="twitter"><![CDATA[true]]></param>
    <param name="digg"><![CDATA[true]]></param>
    <param name="linkedin"><![CDATA[true]]></param>
    <param name="delicious"><![CDATA[true]]></param>
    <param name="google"><![CDATA[true]]></param>
</Island>

En l'espèce, Vae Soli! traite les paramètres dans un ordre prédéfini. Il vous est cependant loisible de traiter les paramètres dans l'ordre qui vous convient et de les filtrer si nécessaire :

<Island id="share" active="yes" class="LSContentsShare">
    <param name="facebook" type="icon"><![CDATA[true]]></param>
    <param name="linkedin"><![CDATA[true]]></param>
    <param name="twitter"><![CDATA[true]]></param>
    <param name="digg"><![CDATA[true]]></param>
    <param name="delicious"><![CDATA[true]]></param>
    <param name="google"><![CDATA[true]]></param>
    <param name="quitus"><![CDATA[false]]></param>
    <param name="targets"><![CDATA[delicious;digg;google;facebook]]></param>
</Island>

Dans le cas de l'île telle qu'elle est définie ci-avant, seuls les liens vers delicious, digg, google et facebook sont traités … et dans cet ordre.

Afficher un calendrier 2010-01-29

Vous souhaitez afficher un calendrier. Vous avez pris connaissance de l'existence de la classe LSContentsCalendar. Vous voulez maintenant comprendre sa mise en {{œ}uvre. Parfait ! Ce petit exemple est pour vous. Commençons par les aspects les plus simples.

Tout d'abord, il va falloir mentionner l'île en question dans votre fichier géorama. En voici un extrait minimal :

<Island id="calendar" active="yes" class="LSContentsCalendar">
</Island>

Cette seule définition va provoquer l'affichage d'un calendrier mensuel du mois correspondant à la date courante. Ce n'est déjà pas si mal et, vous en conviendrez, cela reste simple !

Une toute première mise au point est la suivante : nous ne nous intéressons pas immédiatement — nous aurons l'occasion d'y revenir plus tard — à la mise en page : le calendrier est affiché de manière un peu fruste.

Si vous êtes comme nous, vous souhaiteriez probablement mettre en avant certaines dates du calendrier, des dates auxquelles vous pouvez associer quelque chose. Tiens, pourquoi ne pas s'intéresser aux billets d'un blog ? Sur un blog, on ne fait pas nécessairement des billets tous les jours : seuls certains jours plus fastes que d'autres nous ont amenés à écrire quelque chose. Dans le cas d'espèce, on veut donc faire en sorte que seules les dates auxquelles des billets ont été écrits donnent lieu à des liens dans le calendrier.

Vae Soli!, étant donné sa nature de framework, doit s'accommoder d'un mécanisme général qui va permettre à tout le monde d'utiliser le candrier. Les uns chercheront peut-être des billets dans une base de données, les autres ce seront des nouvelles encodées dans des fichiers XML, les autres utiliseront peut-être de simples fichiers texte : si le fichier est présent (mais quel nom ? et où trouver le fichier ?) la date dans le calendrier devra proposer un lien. C'est sous la forme d'un mécanisme de callback que Vae Soli! va gérer cela.

<Island id="calendar" active="yes" class="LSContentsCalendar">
    <param name="callback"><![CDATA[DriveCalendar]]></param>
</Island>

En fait cette callback va être appelée à la construction du calendrier pour chaque lien potentiel :

  1. Mois précédent
  2. Mois suivant
  3. Chaque jour du calendrier

Mettons cela en œuvre si vous le voulez bien. Créons tout de suite un petit fichier .php dans laquelle nous allons coder la fonction DriveCalendar … qui ne fera strictment rien, du moins à ce stade.

<?php
function DriveCalendar()
/*--------------------*/
{
    return ( null );
}
?>

Si vous testiez la page dans laquelle le calendrier apparaît, vous ne constateriez aucun changement. C'est tout à fait normal car votre fonction DriveCalendar() ne fait rien ! Cependant, celle-ci est néanmoins appelée chaque fois qu'un lien potentiel apparaît … ce que vous pourriez tester avec une fonction du genre …

<?php
function DriveCalendar()
/*--------------------*/
{
    echo '.';
    return ( null );
}
?>

Quand Vae Soli! passe le contrôle à votre fonction de callback, Vae Soli! lui envoit une série de paramètres. Chaque paramètre a un objectif. En voilà la liste :

  1. $szType : le type d'opération
  2. $szKeyword : un mot clef qui vous est propre
  3. $szLang : la langue dans laquelle le calendrier doit être construit
  4. $szCell : la cellule telle que Vae Soli! l'a construite par défaut
  5. $iYear : l'année du calendrier
  6. $iMonth : le mois du calendrier
  7. $iDay : le jour du calendrier
  8. $iDayCount : le nombre de jours que compte le mois
  9. $iTodayYear : l'année courante
  10. $iTodayMonth : le mois courant
  11. $iTodayDay : le jour courant
  12. $iIndex : index de cellule
  13. $iIterationDay : itération
  14. $iPrevMonth : mois précédent le mois courant
  15. $iPrevYear : année précédente l'année courante
  16. $iNextMonth : mois suivant le mois courant
  17. $iNextYear : année suivante l'année courante

Tous les paramètres doivent vous être compréhensibles, excepté, peut-être les paramètres $szType, $szKeyword, $iIndex et $iIterationDay.

Le paramètre $szType peut prendre trois valeurs :

  1. PREVIOUS
  2. NEXT
  3. CALENDAR

Ce paramètre indique le type de lien potentiel qu'on est en train de tester :

  1. PREVIOUS : Mois précédent
  2. NEXT : Mois suivant
  3. CALENDAR : Jour du calendrier

Le paramètre $szKeyword est un mot-clef qui vous est propre. Si vous imaginez par exemple traiter plusieurs types de calendriers, un pour les billets, un pour les événements, un pour les nouvelles, etc. il se pourrait que vous souhaitiez utiliser à chaque fois la même fonction DriveCalendar() … mais dès lors comment distinguer un calendrier de l'autre dans la même fonction de callback ? Réponse ? Par le biais du mot-clef !

Les paramètres $iIndex et $iIterationDay sont plus techniques. En réalité, quand Vae Soli! construit le calendrier il construit un tableau de 6 x 7 jours, soit 42 jours au total. Comment ? vous direz-nous, il n'y a qu'au maximum 31 jours en un mois ! Certes, vous avez raison mais 31 jours peuvent bel et bien être étalés sur 6 semaines au maximum et cela justifie donc bien qu'on construise, en interne, un tableau de 42 cellules. $iIndex est le n° de la cellule !

Quant à $iIterationDay, ce paramètre est le jour affiché dans la cellule[$iIndex]. Il démarre toujours à 1 (puisque le premier du mois est toujours le 1) mais il peut terminer à plus que 31 … ce qui est somme toute normal puisque nous avons jusqu'à 42 cellules.

Faites l'exercice vous-même avec une fonction DriveCalendar() similaire) à la nôtre :

<?php
    function DriveCalendar( $szType,$szKeyword,$szLang,$szCell,
                            $iYear,$iMonth,$iDay,$iDayCount,
                            $iTodayYear,$iTodayMonth,$iTodayDay,
                            $iIndex,$iIterationDay,
                            $iPrevMonth,$iPrevYear,$iNextMonth,$iNextYear )
    /*--------------------------------------------------------------------*/
    {
        echo "<p>{$iIndex} - {$iIterationDay}</p>";
        return ( null );
    }
?>

Sans plus attendre, continuons sur notre lancée. Cette fois-ci, nous vous proposons de faire en sorte que la fonction DriveCalendar() modifie le calendrier sans vraiment le modifier :

<?php
    function DriveCalendar( $szType,$szKeyword,$szLang,$szCell,
                            $iYear,$iMonth,$iDay,$iDayCount,
                            $iTodayYear,$iTodayMonth,$iTodayDay,
                            $iIndex,$iIterationDay,
                            $iPrevMonth,$iPrevYear,$iNextMonth,$iNextYear )
    /*--------------------------------------------------------------------*/
    {
        return ( $szCell );
    }
?>

Dans ce cas précis, la fonction de callback ne fait que retourner ce qu'elle a reçu : le calendrier n'est PAS modifié. Cependant, vous l'aurez compris, un retour légèrement différent et le calendrier serait considérablement altéré !

Donnons maintenant un mot-clef bien spécifique à notre fonction de callback ! Cela se fait en passant un paramètre dans l'île comme le démontre l'exemple ci-dessous :

<Island id="calendar" active="yes" class="LSContentsCalendar">
    <param name="callback"><![CDATA[DriveCalendar]]></param>
    <param name="keyword"><![CDATA[BLOG]]></param>
</Island>

… et voyons comment en tirer parti dans notre fonction de callback tout en commençant également à modifier les cellules de notre calendrier en fonction de la présence d'un billet à une date précise :

function DriveCalendar( $szType,$szKeyword,$szLang,$szCell,
                        $iYear,$iMonth,$iDay,$iDayCount,
                        $iTodayYear,$iTodayMonth,$iTodayDay,
                        $iIndex,$iIterationDay,
                        $iPrevMonth,$iPrevYear,$iNextMonth,$iNextYear )
/*-------------------------------------------------------------------*/
{
    switch( $szType )
    {
        case 'PREVIOUS':
        case 'NEXT'    :
            break;
        case 'CALENDAR':
            if ( (int) $iIterationDay <= $iDayCount )
            {
                 switch ( $szKeyword )
                 {
                     case 'BLOG'  :
                        if ( IsBlog( $iYear,$iMonth,$iIterationDay ) )
                        {
                            /* Alors ... on modifie la cellule pour créer un lien
                               vers le billet du jour */
                            $szCell  = "<td class=\"active\">"                                  .
                                          "<a href=\"/blog.php?year={$iYear}&amp;"              .
                                                              "month={$iMonth}&amp;"            .
                                                              "day={$iIterationDay}\" "         .
                                              "title=\"Un billet a été détecté à cette date\">" .
                                       "{$iIterationDay}</a></td>";
                        }
                        break;
                     case 'NEWS'  :
                     case 'EVENTS':
                        break;
                 }
            }   /* if ( $iIterationDay <= $iDayCount ) */
    }   /* switch( $szType ) */
    return ( $szCell );
}

En vert et bleu vous pouvez voir l'usage différent que l'on peut faire avec le mot-clef. Dans le cas du vert, nous allons essayer de détecter la présence d'un billet à la date concernée dans le calendrier et cela par le biais d'une fonction dont la logique vous est propre : soit que vous cherchiez la présence d'un billet dans une base de donnée, soit que ce soit la présence d'un fichier sur le serveur, …

Imaginons que nous ayons placé des fichiers sur le serveur et que ceux-ci soient stockés dans un répertoire 'billets', lui-même organisé en années, chaque année divisée en mois, et chaque mois en jours comme dans l'exemple suivant : /billets/2010/01/29/ pour être le répertoire destinés aux billets du 29 janvier 2010. Voilà dès lors comment nous pourrions programmer la fonction IsBlog() :

function IsBlog( $iYear,$iMonth,$iDay )
/*-----------------------------------*/
{
    $szYear  = sprintf( "%04d",$iYear  );
    $szMonth = sprintf( "%02d",$iMonth );
    $szDay   = sprintf( "%02d",$iDay   );

    $szFile  = "/billets/{$szYear}/{$szMonth}/{$szDay}/index.html";
    $szFile  = FIL_ResolveRoot( $szFile,$GLOBALS['oApp']->oPage->szRoot );

    return ( is_file( $szFile ) );
}

Voilà d'ailleurs une manière quasi complète de présenter la fonction de callback DriveCalendar() :

function DriveCalendar( $szType,$szKeyword,$szLang,$szCell,
                        $iYear,$iMonth,$iDay,$iDayCount,
                        $iTodayYear,$iTodayMonth,$iTodayDay,
                        $iIndex,$iIterationDay,
                        $iPrevMonth,$iPrevYear,$iNextMonth,$iNextYear )
/*-------------------------------------------------------------------*/
{
    switch( $szType )
    {
        case 'PREVIOUS':
            $szCell = "<a href=\"/blog.php?year={$iPrevYear}&amp;" .
                                          "month={$iPrevMonth}\" " .
                                          "title=\"Mois précédent\">&lt;</a>";
            break;
        case 'NEXT'    :
            $szCell = "<a href=\"/blog.php?year={$iNextYear}&amp;" .
                                          "month={$iNextMonth}\" " .
                                          "title=\"Mois suivant\">&gt;</a>";
            break;
        case 'CALENDAR':
            if ( (int) $iIterationDay <= $iDayCount )
            {
                 switch ( $szKeyword )
                 {
                     case 'BLOG'  :
                         if ( IsBlog( $iYear,$iMonth,$iIterationDay ) )
                         {
                             $szCell  = "<td class=\"active\">"                                  .
                                           "<a href=\"/blog.php?year={$iYear}&amp;"              .
                                                               "month={$iMonth}&amp;"            .
                                                               "day={$iIterationDay}\" "         .
                                               "title=\"Un billet a été détecté à cette date\">" .
                                        "{$iIterationDay}</a></td>";
                         }
                         break;
                     case 'NEWS'  :
                     case 'EVENTS':
                         break;
                 }
            }   /* if ( $iIterationDay <= $iDayCount ) */
    }
    return ( $szCell );
}

A continuer !!!

LSContentsContactForm sans homepage 2011-10-10

Depuis l'opus "4.0.0018"

Vous utilisez avec bonheur le formulaire de contact mais vous ne souhaitez pas faire en sorte que l'utilisateur puisse spécifier sa page d'accueil et décrire son projet. Comment faire pour vous passer de cette possibilité ?

La partie à éliminer est la partie droite du formulaire (votre page d'accueil) : Formulaire de contact

En fait, la construction d'une île de ce genre se fait comme suit :

Line 001: <Island id="contact-form" active="yes" class="LSContentsContactForm">
Line 002:     <param name="submit"   ><![CDATA[/contact.php]]></param>
Line 003: </Island>

La réalité, c'est que Vae Soli! se base, sauf mention expresse, de paramètres mis à des valeurs par défaut positives. Voyons effectivement le même formulaire avec certaines valeurs de paramètres positionnées :

Line 001: <Island id="contact-form" active="yes" class="LSContentsContactForm">
Line 002:     <param name="submit"   ><![CDATA[/contact.php]]></param>
Line 003:     <param name="company"  ><![CDATA[true]]></param>
Line 004:     <param name="firstname"><![CDATA[true]]></param>
Line 005:     <param name="birthdate"><![CDATA[true]]></param>
Line 006:     <param name="address"  ><![CDATA[true]]></param>
Line 007:     <param name="phone"    ><![CDATA[true]]></param>
Line 008:     <param name="homepage" ><![CDATA[true]]></param>
Line 009: </Island>

Eviter de voir s'afficher des données dont on ne veut pas se fait par l'adaptation des paramètres. A titre d'exemple, voici comment se débarrasser de la date de naissance et de la partie "Votre page d'accueil" (ligne 005 et ligne 008) :

Line 001: <Island id="contact-form" active="yes" class="LSContentsContactForm">
Line 002:     <param name="submit"   ><![CDATA[/contact.php]]></param>
Line 003:     <param name="company"  ><![CDATA[true]]></param>
Line 004:     <param name="firstname"><![CDATA[true]]></param>
Line 005:     <param name="birthdate"><![CDATA[false]]></param>
Line 006:     <param name="address"  ><![CDATA[true]]></param>
Line 007:     <param name="phone"    ><![CDATA[true]]></param>
Line 008:     <param name="homepage" ><![CDATA[false]]></param>
Line 009: </Island>

Donner une cote à une page : review avec les classes LSReview et LSContentsReview 2010-01-03

Vous connaissez cette fonctionnalité ! Elle vous permet de préciser si une page vous a donné satisfaction, si l'information que vous y avez trouvée vous a été utile.

Au demeurant, il s'agit de coter quelque chose, qu'il s'agisse d'une page, une information, un service, un produit, une société, … un individu, et finalement tout ce que vous voudrez.

ICI, CONTINUER LE TEXTE

Mentionnez les droits actifs sur vos pages 2010-01-18

Vae Soli! vous donne la possibilité de mentionner les droits dont sont pourvus les pages de votre site web.

ICI, CONTINUER LE TEXTE

<Description title="Mon site - ma page" h1="Ma page">
    <ExtendedDesc><![CDATA[Description étendue de ce que
                           la page propose]]></ExtendedDesc>
    <Keywords><![CDATA[Mots-clefs associés à cette page]]></Keywords>
    <Rights><![CDATA[© 2009-{year()} Tous droits réservés sur toutes
                    les pages de notre site web]]></Rights>
</Description>

Les promotions 2010-01-03

Depuis l'opus "2.4.0500"

Dans la foulée des offres d'emploi, nous avons remis en chantier la partie de Vae Soli! qui était relative aux promotions (Special Offers or Special Deals). Cette partie est effectivement essentielle pour composer des sites web pour entreprises. Nous poursuivons donc notre stratégie en la matière.

Une fois n'est pas coutume, les promotions sont stockées dans un fichier XML. Certains de nos utilisateurs se plaignent parfois de ce format qui ne leur semble pas optimal pour des questions de performance et de traitement en batch des informations (par exemple lorsqu'elles proviennent de systèmes ERP). Si nous acquiesçons sur la remarque générale, le format XML représente selon nous la manière la plus simple – et de loin ! – de stocker les informations. Au demeurant, n'importe quelle île (et donc les offres d'emploi, les questions fréquentes, les références, les témoignages, et … les promotions) peut faire l'objet d'un caching ce qui améliore grandement les performances et d'autre part, l'architecture de Vae Soli! permet aisément de surclasser les classes de base du framework ce qui permet dès lors de concevoir sa propre manière de réaliser les choses. Par exemple, pourquoi ne pas extraire les infos d'une table MySQL et les stocker sous forme XML au format natif de Vae Soli!, laisser Vae Soli! traiter l'affichage des promotions et puis cacher le résultat pour un accès immédiat dès le deuxième appel ? De cette manière vous avez le meilleur des deux mondes.

Ainsi donc, les promotions sont stockées au format XML. Dans son expression la plus simple, voici un fichier XML affichant deux promotions élémentaires :

Ici ... mettre DEUX promos SIMPLES

Ici ... continuer le texte

Il nous reste à gérer la pagination des promotions pour qu'elles soient opérationnelles à une plus grande échelle … comme par exemple sur un site qui ne gère QUE des promotions! Pour l'instant, même sans pagination, les promotions restent parfaitement opérationnelles pour le site d'une société qui ne gère que ses propres promotions.

URL canoniques 2009-04-29

L'URL canonique indique aux moteurs de recherche quelle est la page maître qu'il faut considérer lorsque la même page peut être accédée au départ d'URLs différentes. Pour les moteurs de recherche, cela leur évite de référencer plusieurs URLs alors qu'une seule devrait l'être. Pour vous, cela signifie que vous ne dispersez pas vos rankings sur plusieurs pages mais que vous les concentrez sur une seule : l'URL canonique.

L'implémentation est simple : il suffit de renseigner l'URL canonique dans les paramètres de la page (dans le fichier de définition de la page ou directement dans le géorama) comme l'exemple ci-dessus l'illustre :

<Defaults>
    <Settings>
        <!-- Overwrites the default settings of a page -->
        <LSGuid><![CDATA[LS-3fd977d4-1511-4fb0-aec5-3c836beb6404]]></LSGuid>
        <LSKeyword><![CDATA[homepage]]></LSKeyword>
        <LSExpirationHeader><![CDATA[none]]></LSExpirationHeader>
        <LSCanonical><![CDATA[http://www.latosensu.be/index.php]]></LSCanonical>
    </Settings>
</Defaults>

La page est alors connue sous la forme d'une seule URL quelle ques soient les variations d'aliases. Voilà un exemple de code généré pour la page d'accueil de Lato Sensu qui peut être connue comme /index.html, /index.php, /accueil.php, /welcome.php ou /welkom.php :



<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr-BE">
    <head profile="http://microformats.org/profile/hcard">
    <link rel="canonical" href="http://www.latosensu.be/index.php" />
    <title>Web/Internet Expertise - Project Management - Change Management</title>

    <!-- (1) Start generic link definitions -->
    <link rel="stylesheet" type="text/css" media="screen,projection,print" href="http://res.ls.poc/css/homepage.css"/>
    <link rel="stylesheet" type="text/css" media="screen,projection,print" href="http://res.ls.poc/css/nofollow/nofollow.css"/>
...
</html>

Options de paiement 2010-01-18

Depuis l'opus "2.4.0500"

Vous réalisez un site pour commerçant ? Vous devez mentionner les moyens de paiement que ce commerçant accepte ? Rien de plus simple avec la classe LSPaymentOptions à moins que vous ne souhaitiez utiliser l'île LSContentsPaymentOptions !

Considérez l'exemple disponible ci-dessous et voyez ensuite le code PHP qu'il nous a fallu concevoir pour afficher les options en question.

  1. American Express
  2. Proton
  3. Bancontact
<?php $oOptions = new LSPaymentOptions( array( array( 'amex'      ,null ),
                                               array( 'proton'    ,null ),
                                               array( 'bancontact',null )
                                             ) );
      $szHTML = $oOptions->Render();
      $this->EchoOB( "<div style=\"margin-left:20px;\">{$szHTML}</div>" );
?>

Dans le cas illustré ci-dessus, trois options de paiement ont été retenues. A vrai dire, Vae Soli! reconnaît jusqu'à 10 options de paiement par carte, qu'il s'agisse de cartes de crédit ou de cartes de paiement. Envoyez-nous un petit email ou laissez vos coordonnées sur ce site si d'autres options vous paraissaient utiles. Voici la liste des options reconnues à ce jour (le 19 Janv 2010) :

  1. American Express
  2. Bancontact
  3. Delta
  4. Diners Club
  5. Discover Network
  6. Maestro
  7. Mastercard
  8. Proton
  9. Visa
  10. Visa Electron

Toujours dans le cas qui nous est présenté, aucune icône n'a été mentionnée pour aucune des cartes proposées (trois, pour rappel). Pour mentionner des icônes, il faut préciser un deuxième argument comme le montre l'exemple qui suit :

<?php $oOptions = new LSPaymentOptions( array(
                                         array('amex'      ,'/icons/amex.png'      ),
                                         array('proton'    ,'/icons/proton.png'    ),
                                         array('bancontact','/icons/bancontact.png')
                                              ) );
      $szHTML = $oOptions->Render();
      $this->EchoOB( "<div style=\"margin-left:20px;\">{$szHTML}</div>" );
?>

Options de paiement sous forme d'île 2010-01-18

Comme indiqué ci-dessus il est totalement envisageable de générer le même type de résultat avec une île paramétrée dans le géorama :

<Island id="payment" active="yes" class="LSContentsPaymentOptions">
    <param name="title"><![CDATA[Options de paiement]]></param>
    <param name="text"><![CDATA[<p>Chez nous vous pouvez payer grâce à:</p>]]></param>
    <param name="amex"><![CDATA[true]]></param>
    <param name="bancontact"><![CDATA[true]]></param>
    <param name="delta"><![CDATA[true]]></param>
    <param name="diners"><![CDATA[true]]></param>
    <param name="discover"><![CDATA[true]]></param>
    <param name="maestro"><![CDATA[true]]></param>
    <param name="mastercard"><![CDATA[true]]></param>
    <param name="proton"><![CDATA[true]]></param>
    <param name="visa"><![CDATA[true]]></param>
    <param name="visaelectron"><![CDATA[true]]></param>
</Island>

… et cette île provoquera l'affichage suivant :

Illustration des options de paiement

Ultime question : puisqu'aucune icône n'a été mentionnée dans l'île (e.g. amex-icon, bancontact-icon, etc.) comment se fait-il que des icônes soient néanmoins affichées dans l'exemple ci-dessus ? Réponse : parce que nous avons résolu ce problème grâce à des CSS. Voici notre définition de CSS qui pourra vous aider :

li.credit-card,
li.payment-card
                {
                    list-style-type :   none;
                    line-height     :   26px;
                    vertical-align  :   middle;
                }

li.amex
                {   list-style-image:   url(/vaesoli/resources/images/amex-small.png);
                }
li.bancontact
                {   list-style-image:   url(/vaesoli/resources/images/bancontact-small.png);
                }
li.delta
                {   list-style-image:   url(/vaesoli/resources/images/delta-small.png);
                }
li.diners
                {   list-style-image:   url(/vaesoli/resources/images/diners-small.png);
                }
li.discover
                {   list-style-image:   url(/vaesoli/resources/images/discover-small.png);
                }
li.mastercard
                {   list-style-image:   url(/vaesoli/resources/images/mastercard-small.png);
                }
li.maestro
                {   list-style-image:   url(/vaesoli/resources/images/maestro-small.png);
                }
li.proton
                {   list-style-image:   url(/vaesoli/resources/images/proton-small.png);
                }
li.visa
                {   list-style-image:   url(/vaesoli/resources/images/visa-small.png);
                }

li.visaelectron
                {   list-style-image:   url(/vaesoli/resources/images/visa-electron-small.png);
                }

Options de paiement avec Card Stop 2010-01-19

L'île de type LSContentsPaymentOptions permet aussi de donner une petite aide aux utilisateurs qui se sont fait subtiliser leur carte : c'est l'objet du Card Stop … et cela peut s'avérer très utile sur les sites de vos clients.

Que faut-il faire pour activer le Card Stop ? Simplement spécifier un paramètre supplémentaire comme le démontre le code ci-dessous :

<Island id="payment" active="yes" class="LSContentsPaymentOptions">
    <param name="title"><![CDATA[Options de paiement]]></param>
    <param name="text"><![CDATA[<p>Chez nous vous pouvez payer grâce à:</p>]]></param>
    <param name="amex"><![CDATA[true]]></param>
    <param name="bancontact"><![CDATA[true]]></param>
    <param name="delta"><![CDATA[true]]></param>
    <param name="diners"><![CDATA[true]]></param>
    <param name="discover"><![CDATA[true]]></param>
    <param name="maestro"><![CDATA[true]]></param>
    <param name="mastercard"><![CDATA[true]]></param>
    <param name="proton"><![CDATA[true]]></param>
    <param name="visa"><![CDATA[true]]></param>
    <param name="visaelectron"><![CDATA[true]]></param>
    <param name="cardstop"><![CDATA[true]]></param>
</Island>

Une fois de plus, l'affichage est laissé aux soins de CSS. Voici une définition que vous pourriez en donner :

li.cardstop   { list-style-type :   none;
                line-height     :   26px;
                vertical-align  :   middle;
              }
li.cardstop   { list-style-image:   url( /vaesoli/resources/images/cardstop-small.png);
              }
li.cardstop a { text-decoration :   none;
                color           :   inherit;
              }

Notez que nous prévoyons directement un lien vers le site de Bank Card Company (Atos) en français ou en néerlandais.

Les offres d'emploi 2010-01-03

Depuis l'opus "2.4.0500"

Les offres d'emploi sont LA fonctionnalité de la version 2.4.0500.

D'un point de vue technique, les offres d'emploi sont stockées dans un fichier XML. Chaque offre d'emploi a des caractéristiques propres. La génération du code XHTML dépend de ces caractéristiques tandis que la présentation est entièrement laissée aux soins de CSS.

Voici un exemple de fichier XML avec une seule offre :

<?xml version="1.0" encoding="iso-8859-1"?>
<Jobs xmlns:xi="http://www.w3.org/2001/XInclude">
    <Job id="070198a6-be06-4150-8592-f7fb67296680" ref="93147bd8-4014" active="yes">
        <Title><![CDATA[BNP Parisbas : Test Coordinator]]></Title>
        <Position><![CDATA[Test Manager]]></Position>
        <PubDate><![CDATA[20091224180000]]></PubDate>
        <Expiry><![CDATA[20100131235959]]></Expiry>
        <Creation><![CDATA[20091207170000]]></Creation>
        <StartDate><![CDATA[20100104]]></StartDate>
        <EndDate><![CDATA[]]></EndDate>
        <MissionLength><![CDATA[180]]></MissionLength>
        <RequiredLanguages><![CDATA[fr,nl,en]]></RequiredLanguages>
        <RequiredGender><![CDATA[m]]></RequiredGender>
        <Description><![CDATA[<p>Ista similia non sunt, Cato,
                              in quibus quamvis multum processeris
                              tamen illud in eadem causa est, a quo
                              abesse velis, donec evaseris;
                              nec enim ille respirat, ante quam
                              emersit, et catuli aeque caeci,
                              prius quam dispexerunt, ac si ita
                              futuri semper essent.</p><p>Illa sunt
                              similia: hebes acies est cuipiam
                              oculorum, corpore alius senescit;
                              hi curatione adhibita levantur in dies,
                              valet alter plus cotidie, alter
                              videt.</p><p>His similes sunt omnes,
                              qui virtuti student levantur
                              vitiis, levantur erroribus, nisi forte
                              censes Ti.</p><p>Gracchum patrem non
                              beatiorem fuisse quam fillum, cum alter
                              stabilire rem publicam
                              studuerit, alter evertere.</p>
                              <p><strong>Nec tamen</strong> ille erat
                              sapiens - quis enim hoc aut quando aut
                              ubi aut unde? -; sed quia studebat laudi et
                              dignitati, multum in virtute
                              processerat.]]></Description>
        <Sector><![CDATA[Automobile]]></Sector>
        <Place><![CDATA[Paris]]></Place>
        <JobType><![CDATA[Contract]]></JobType>
        <Travel><![CDATA[N/A]]></Travel>
        <Salary><![CDATA[600 &euro;/day]]></Salary>
        <ProposedBy><![CDATA[The Raid Agency]]></ProposedBy>
        <Contact>
            <Name><![CDATA[Ann Petitjean]]></Name>
            <Email><![CDATA[ann@raidagency.be]]></Email>
            <Tel><![CDATA[+32 123 456 78]]></Tel>
        </Contact>
    </Job>
</Jobs>

Une fois les CSS spécifiés, l'offre est présentée de la manière suivante :

Illustration d'une offre d'emploi

Voilà les CSS mis en œuvre :

div.LS_VAESOLI_ALL_JOBS
                    {   margin      :   10px 0;
                    }

div.LS_VAESOLI_JOB_EVEN,
div.LS_VAESOLI_JOB_ODD
                    {   border      :   1px solid #aaa;
                        font-size   :   0.8em;
                        margin      :   10px 0;
                        padding     :   5px;
                    }

div.LS_VAESOLI_JOB_EVEN h3,
div.LS_VAESOLI_JOB_ODD h3
                    {   background  :   #4a668c url(/images/footer.png) repeat-x;
                        color       :   #fff;
                        padding     :   4px 10px;
                    }

div.LS_VAESOLI_JOB_ODD
                    {   border      :   none;
                        background  :   #fff;
                    }

div.LS_VAESOLI_JOB_PROPERTIES
                    {   width       :   300px;
                        float       :   left;
                    }

div.LS_VAESOLI_JOB_LONG_DESCRIPTION
                    {   width       :   550px;
                        float       :   right;
                    }

div.LS_VAESOLI_JOB_CONTACT
                    {   width       :   100%;
                        clear       :   both;
                    }

div.LS_VAESOLI_JOB_PICTURES
                    {   width       :   100%;
                        clear       :   both;
                        border      :   1px solid #ddd;
                        height      :   128px;
                        margin      :   5px 0 0 0;
                    }

div.LS_VAESOLI_JOB_PICTURES img.LS_VAESOLI_JOB_PICTURE
                    {   padding     :   4px;
                    }

div.LS_VAESOLI_JOB_PROPERTIES p
                    {   margin      :   2px 0 0 0;
                    }

div.LS_VAESOLI_JOB_PROPERTIES p span
                    {   font-weight :   bold;
                        display     :   inline-block;
                        width       :   135px;
                        background  :   #ddd;
                    }

Lien vers une offre d'emploi précise 2010-08-15

Depuis l'opus "3.0.0001"

Si vous souhaitez faire référence à une offre d'emploi précise, créer un lien vers cette offre d'emploi, rien n'est plus simple. Il suffit en effet de faire précéder l'id de l'offre par joboffer- et le tour est joué.

Ainsi, si une offre d'emploi est affublée de l'id 070198a6-be06-4150-8592-f7fb67296680, alors l'ancre suivante fournira le lien vers l'offre d'emploi:

<a href="#joboffer-070198a6-be06-4150-8592-f7fb67296680">BNP Parisbas : Test Coordinator</a>

Une nouvelle île de diaporama 2010-01-03

Créer un diaporama sur base d'une liste d'images est d'une simplicité déconcertante. Vous construisez une île de classe LSContentsImageTransition, vous lui assignez les quelques propriétés fondamentales et le tour est joué. Voyez l'exemple qui suit :

<Island id="dia" active="yes" class="LSContentsImageTransition">
    <param name="diaporama"><![CDATA[/islands/diaporama-vitrine.xml]]></param>
    <param name="transition"><![CDATA[2000]]></param>
<param name="increment"><![CDATA[0]]></param>
</Island>

Et voilà le résultat :

Illustration d'un diaporama

Le diaporama est une application plus simple des transitions d'images comme nous l'avons décrit plus loin : Transition d'images.

La paramètre diaporama pointe vers un fichier XML. Ce fichier xml a une structure bien précise que nous allons décrire plus loin. En un mot comme en cent, ce fichier se contente de préciser les images qui doivent être enchaînées dans le diaporama.

Le paramètre transition permet de préciser le délai de transition entre deux images. Ce délai est exprimé en millisecondes.

Le paramètre increment DOIT être mis à zéro. Si vous en décidiez autrement, nous ne pouvons pas vous garantir le fonctionnement de votre diaporama, du moins à ce stade.

Structure du fichier xml du diaporama 2010-01-03

Une fois encore, le fichier est très simple à coder. Il peut prendre plusieurs formes qui alternent dans la simplicité. Voyons cela dans le détail.

Diaporama avec masque 2010-01-03

Un diaporama avec masque est le diaporama le plus simple à créer. Il s'agit simplement de mentionner le répertoire où se trouvent les images à faire défiler et de mentionner une forme de joker pour les images : *.jpg. Voici la définition de l'île et, dans la foulée, le fichier xml :

<Island id="diapo" active="yes" class="LSContentsImageTransition">
    <param name="diaporama"><![CDATA[/islands/paris.xml]]></param>
    <param name="transition"><![CDATA[2000]]></param>
    <param name="increment"><![CDATA[0]]></param>
</Island>
Fichier /islands/paris.xml
--------------------------
<?xml version="1.0" encoding="utf-8"?>
<Diaporama>
    <Base><![CDATA[/images/paris/]]></Base>
    <Mask><![CDATA[*.jpg]]></Mask>
</Diaporama>

Diaporama avec liste de fichiers 2010-01-03

Un diaporama avec une liste de fichiers n'est guère plus compliqué : au lieu de mentionner un masque, on spécifie chaque fichier composant le diaporama comme l'indique le fichier xml que voici …

Fichier /islands/paris.xml
--------------------------
<?xml version="1.0" encoding="utf-8"?>
<Diaporama>
    <Base><![CDATA[/images/paris/]]></Base>
    <Pict>
        <File><![CDATA[001.jpg]]></File>
    </Pict>
    <Pict>
        <File><![CDATA[002-bis.jpg]]></File>
    </Pict>
    <Pict>
        <File><![CDATA[les-halles.jpg]]></File>
    </Pict>
</Diaporama>

Dans le cas où chaque fichier est spécifié, il est également possible de mentionner les liens qui sont activés lorsqu'on clique sur une image. En voici un exemple :

Fichier /islands/paris.xml
--------------------------
<?xml version="1.0" encoding="utf-8"?>
<Diaporama>
    <Base><![CDATA[/images/paris/]]></Base>
    <Pict>
        <File><![CDATA[001.jpg]]></File>
        <Link><![CDATA[/mylink01.html]]></Link>
    </Pict>
    <Pict>
        <File><![CDATA[002-bis.jpg]]></File>
    </Pict>
    <Pict>
        <File><![CDATA[les-halles.jpg]]></File>
    </Pict>
</Diaporama>

Chaque image peut avoir son lien ou ne pas en avoir.

Diaporama avec titre et description 2010-01-03

Vous pouvez également mentionner un titre et une description directement dans le fichier du diaporama.

ICI LA SUITE DU TEXTE.

Notes de bas de page

Précédent Suivant