Exemples

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)

Glossaire: LSGlossary

As of opus "6.0.0008"

Depuis plusieurs releases Vae Soli! s'est doté d'une classe spécifique qui permet de gérer un glossaire, dont le fameux glossaire inclus dans Vae Soli! même.

Cette classe, la classe LSGlossary, n'était pourtant pas documentée. C'est à présent chose faite : documentation de la classe.

La documentation fournit une profusion d'exemples. En voici un choisi qui vous aidera à appréhender rapidement les éléments essentiels de la classe:

$oGlossary = new LSGlossary( 'Vae Soli! Glossary',
    FIL_ResolveRoot( '/vaesoli/resources/XML/glossary.xml' ) );

if ( $oGlossary->FindFirst( 'AAA' ) )
{
    var_dump( $aEntry = $oGlossary->GetEntry() );
    $i = 0;
    while ( $oGlossary->FindNext() && $i++ < 3 )
    {
        var_dump( $aEntry = $oGlossary->GetEntry() );
    }
}

C'est grâce à cette nouvelle classe et avec un peu de configuration Apache que Lato Sensu Management a mis au point un service RESTful d'accès au glossaire. Voici un exemple d'appel via ledit service RESTful: http://www.latosensu.be/glossary/Vae Soli!?xml

JavaScript object: LSVFile

As of opus "5.7.0000"

Opus 5.7.0000 comes with a first implementation of a file object … in JavaScript ! So far, only 1 method exists that permits to split a file apart into its natural components : Split() which kind of mimic the behavior of the pathinfo() function of PHP (similar but NOT identical). Here's an example :

<script>
    var oFile = new LSVFile( "http://www.vaesoli.org/css/LSVSwipe.20131122.a.b.c.css" );

    alert( oFile.szName + " (1):" + oFile.Split( 1 ) );
    alert( oFile.szName + " (1,0):" + oFile.Split( 1,0 ) );
    alert( oFile.szName + " (1,1):" + oFile.Split( 1,1 ) );
    alert( oFile.szName + " (1,2):" + oFile.Split( 1,2 ) );
    alert( oFile.szName + " (1,3):" + oFile.Split( 1,3 ) );
    alert( oFile.szName + " (2):" + oFile.Split( 2 ) );
    alert( oFile.szName + " (3):" + oFile.Split( 3 ) );
    alert( oFile.szName + " (4):" + oFile.Split( 4 ) );
</script>

And here's the first code of our JavaScript file object :

/*  File name               :   LSVFiles.js
    Version                 :   5.7.0000
    Author                  :   Patrick Boens
    Creation date           :   27/11/2013 - 06:15
    Last modification date  :   auto
    Last modified by        :   Patrick Boens
    Copyrights              :   (c) Lato Sensu Management
    Purpose                 :   File functions
*/
"use strict";

function LSVFile( szName,iPart )
/*----------------------------*/
{
    this.szName =   null;
    this.iPart  =   3;

    if ( undefined !== szName )
        this.szName = szName;

    if ( undefined !== iPart )
        this.iPart = iPart;

    this.Split  =
        function( iPart,iSubPart )
        {
            var szRetVal = null;

            if ( undefined === iPart )
                iPart = this.iPart;

            if ( this.szName !== null && iPart !== null )
            {
                switch ( iPart )
                {
                    case 1: 
                            var myregexp = /\b(https?|ftp):\/\/([\-A-Z0-9.]+)(\/[\-A-Z0-9+&@#\/%=~_|!:,.;]*)?(\?[A-Z0-9+&@#\/%=~_|!:,.;]*)?/i;
                            var match = myregexp.exec( this.szName );

                            if ( undefined === iSubPart || iSubPart < 0 || iSubPart >= match.length )
                                iSubPart = 2; 

                            if ( match != null )
                            {
                                szRetVal = match[iSubPart];
                            }
                            else
                            {
                                szRetVal = "";
                            }
                            break;
                    case 2: szRetVal   = this.szName.replace( /\\/g, '/' ).replace( /\/[^\/]*\/?$/,'' );
                            break;
                    case 3: szRetVal   = this.szName.replace( /^.*[\/\\]/g,'' );
                            break;
                    case 4: szRetVal   = this.szName.replace( /^.*[\/\\]/g,'' ).replace(/[\s\S]*\./ig,'' );
                            break;
                }
            }

            return ( szRetVal );
        };
}

var DEFINE_LSVFiles_js = 1;

Non Blocking CSS 2013-11-17

As of opus "5.7.0000"

With Vae Soli! opus 5.7.0000 it is possible to mention the CSS that must be used WITHOUT mentioning them in your template (or paradeigma) and have them included in a non-blocking fashion instead. The secret to that optimization is the <LSCSSNonBlocking>…</LSCSSNonBlocking> parameter of defaults.xml :

<LSCSSNonBlocking><![CDATA[
        /vaesoli/css/vaesoli-business-hours.css;
        /vaesoli/css/vaesoli-share.css;
        /vaesoli/css/vaesoli-pageframe.css;
        /vaesoli/css/vaesoli-navigation-aid.css;
        /css/vaesoli-the-site.css]]></LSCSSNonBlocking>

This does not only make pages faster to load but it also makes sure that CSS can be loaded without blocking the execution of the entire page.

Non Blocking JavaScripts 2013-11-17

As of opus "5.7.0000"

With Vae Soli! opus 5.7.0000 it is possible to mention the JS that must be used WITHOUT mentioning them in your template (or paradeigma) and have them included in a non-blocking fashion instead. This is pretty much the same sort of feature as for CSS. The secret to that optimization is the <LSJSSNonBlockings>…</LSJSSNonBlockings> parameter of defaults.xml :

<LSJSNonBlocking><![CDATA[/vaesoli/css/vaesoli-business-hours.css;
                            /vaesoli/css/vaesoli-share.css;
                            /vaesoli/css/vaesoli-pageframe.css;
                            /vaesoli/css/vaesoli-navigation-aid.css;
                            /css/vaesoli-the-site.css]]></LSJSNonBlocking>

This does not only make pages faster to load but it also makes sure that CSS can be loaded without blocking the execution of the entire page.

Page Rendering Delay 2013-11-17

As of opus "5.7.0000"

There may be circumstances in which you would like to delay the execution before sending the result back. Such circumstances are seldom but there may be needed (to simulate the interaction with a backend for example).

This is the very reason why we have introduced a configurable execution delay in the parameterization of Vae Soli! : <LSDelay>…</LSDelay>. What follows is an example of a 2 sec delay (new parameter in defaults.xml :

<LSDelay>2000000</LSDelay>

The potential delay is NOT taken into consideration for pure performance calculations.

Content Pageframe (multi-tabs) 2013-11-03

As of opus "5.7.0000"

The LSContentsPageframe class is now back in Vae Soli! 5.7.0000.

Originally, this class is available since 06/05/2008. It was parked later on because it needed some adjustments and refinements and because it was completely underused. These fine-tunings did take place in opus 5.7.0000 and therefore, we present this class now along with its full documentation.

The LSContentsPageframe class performs inner calls to the LSPageframe class. Actually, LSPageframe does all the dirty work there.

For full sway, the classes needed .js and .css additions. These are now programmed too. And because the .js routines needed high-level services, they have been complemented by a revised version of LSVaeSoli.js. In short, LSContentsPageframe.class.php needs LSPageframe.class.php that needs vaesoli-pageframe.css and LSSimplePageframe.js. LSSimplePageframe.js in turn needs LSVaeSoli.js.

The LSPageframe.class.php embarks LSSimplePageframe.js and LSVaeSoli.js : you do not need to do anything for these 2 scripts being inserted. What's more LSPageframe.class.php makes use of the brand new MISC_RequireJS() function : this routine calls scripts in a non-blocking mode (see CHAPTER 4 of Web Performance Daybook, Volume 2, The Art and Craft of the Async Snippet, Stoyan Stefanov for more information about this subject).

Here's how you create a pageframe island :

<Island id="my-tabs" active="yes" class="LSContentsPageframe">
    <param name="storage"><![CDATA[/islands/pageframe.xml]]></param>
</Island>

The storage parameter refers to an XML file whose purpose is to describe the content of the pageframe. Let's see such a conetent structure :

<?xml version="1.0" encoding="iso-8859-15"?>
<Pageframe tabs="yes" id="HELLO-TABS">
  <Tab id="tab-1" title="General" tooltip="First tab">
    <![CDATA[
    <p>
      Atque hoc loco, qui propter animi voluptates coli dicunt ea
      studia, quae dixi, non intellegunt idcirco esse ea propter
      se expetenda, quod nulla utilitate obiecta delectentur animi
      atque ipsa scientia,
      etiamsi incommodatura sit, gaudeant.
    </p>
    ]]>
  </Tab>
  <Tab id="tab-2" title="Private" tooltip="Second tab">
    <![CDATA[
    <p>
      Quid igitur est? inquit; audire enim cupio, quid non probes.
      Principio, inquam, in physicis, quibus maxime gloriatur, primum
      totus est alienus. Democritea dicit perpauca mutans, sed ita,
      ut ea, quae corrigere vult, mihi quidem depravare videatur.
      Ille atomos quas appellat, id est corpora individua propter
      soliditatem, censet in infinito inani, in quo nihil nec
      summum nec infimum nec medium nec ultimum nec extremum sit,
      ita ferri, ut concursionibus inter se cohaerescant, ex quo
      efficiantur ea, quae sint quaeque cernantur, omnia, eumque
      motum atomorum nullo a principio, sed ex aeterno tempore
      intellegi convenire.
    </p>
    ]]>
  </Tab>
  <Tab id="tab-3" title="Professional" tooltip="Third tab">
    <![CDATA[
    <p>
      Ita, quae mutat, ea corrumpit, quae sequitur sunt tota Democriti,
      atomi, inane, imagines, quae eidola nominant, quorum incursione
      non solum videamus, sed etiam cogitemus; infinitio ipsa, quam
      apeirian vocant, tota ab illo est, tum innumerabiles mundi, qui
      et oriantur et intereant cotidie. Quae etsi mihi nullo modo
      probantur, tamen Democritum laudatum a ceteris ab hoc, qui eum
      unum secutus esset, nollem vituperatum.
    </p>

    <p style="text-align:center;margin-top:2em;">
      <img src="/images/combobox001.png"
           width="385" height="341" />
    </p>
    ]]>
  </Tab>
</Pageframe>

"use strict";

function LSVSwipe()
/*---------------*/
{
  this.oObj     = null;
  this.fnProcess  = null;

  this.Reset = function( event )
    {
      this.iFingerCount     = 0;
      this.startX           = 0;
      this.startY           = 0;
      this.curX             = 0;
      this.curY             = 0;
      this.iStartTime       = null;
      this.iSwipeDuration   = null
      this.iSwipeLength     = 0;
      this.iMinSwipeLength  = 70;
      this.iMinSwipeTime    = 70;
      this.iMaxSwipeTime    = 200;
      this.iSwipeAngle      = null;
      this.iSwipeDir        = 0;
    };

  this.Reset();

  this.Start = function( event,oObj )
    {
      this.oObj = oObj;
      this.iStartTime = new Date().getTime();

      if ( ( this.iFingerCount = event.touches.length ) == 1 )
      {
        this.startX = event.touches[0].pageX;
        this.startY = event.touches[0].pageY;
      }
      else
      {
        this.Reset( event );
      }
    };
  this.End = function( event )
    {
      this.iSwipeDuration = new Date().getTime() - this.iStartTime;

      if ( this.iFingerCount   == 1 &&
           this.startX != 0         &&
           this.iSwipeDuration >= this.iMinSwipeTime  &&
           this.iSwipeDuration <= this.iMaxSwipeTime
         )
      {
        // hypotenuse
        this.iSwipeLength = Math.round(
                Math.sqrt( Math.pow( this.curX - this.startX,2 ) +
                           Math.pow( this.curY - this.startY,2 ) ) );

        if ( this.iSwipeLength >= this.iMinSwipeLength )
        {
          this.Angle();
          this.Direction();

          if ( this.fnProcess )
            this.fnProcess( this );

          this.Reset( event );
        }
        else
        {
          this.Reset( event );
        }
      }
      else
      {
        this.Reset( event );
      }
    };
  this.Move = function( event )
    {
      event.preventDefault();

      if ( event.touches.length == 1 )
      {
        this.curX = event.touches[0].pageX;
        this.curY = event.touches[0].pageY;
      }
      else
      {
        this.Reset( event );
      }
    };
  this.Angle = function( event )
    {
      var X = this.startX - this.curX;
      var Y = this.curY   - this.startY;
      var Z = Math.round( Math.sqrt( Math.pow( X,2 ) +
                                     Math.pow( Y,2 )
                                   ) );
      var r = Math.atan2( Y,X );

      this.iSwipeAngle = Math.round( r * 180 / Math.PI );

      if ( this.iSwipeAngle < 0 )
        this.iSwipeAngle =  360 - Math.abs( this.iSwipeAngle );
    };
  this.Direction = function( event )
    {
      /* 1 = right; 2 = down; 3 = left; 4 = up */

      if ( ( this.iSwipeAngle <= 45 ) &&
         ( this.iSwipeAngle >= 0  )
         )
      {
        this.iSwipeDir = 3;
      }
      else if ( ( this.iSwipeAngle <= 360 ) &&
            ( this.iSwipeAngle >= 315 ) )
      {
        this.iSwipeDir = 3;
      }
      else if ( ( this.iSwipeAngle >= 135 ) &&
            ( this.iSwipeAngle <= 225 )
          )
      {
        this.iSwipeDir = 1;
      }
      else if ( ( this.iSwipeAngle > 45 ) &&
            ( this.iSwipeAngle < 135 )
          )
      {
        this.iSwipeDir = 2;
      }
      else
      {
        this.iSwipeDir = 4;
      }
    };
}   /* End of LSVSwipe object */

var DEFINE_LSVSwipe_js = 1;

Caching Pages for bots, crawlers, … 2013-10-24

As of opus "5.6.0004"

With the latest opus, 5.6.0004, it is possible to ask to cache pages for bots, which is a pretty good strategy knowing that the average web site gets approximately 20% of its requests coming from bots or assimilated.

This strategy respects good web practices : the content isn't changed; only the information is a little bit older, which remains in the limits of good practices. How much older ? Not too much ! Only 1 day !

That is that all crawlers of some sort get served with 1-day old cache. All of them being served the same cache.

But you're in control ! Vae Soli! won't do anything unless you inform Vae Soli! to do so. How ? You need to set a configuration variable :

<LSCacheBots>yes</LSCacheBots>

… and here you go ! This conforms to backward compatibility law as you rest assured that the previous bahavior of Vae Soli! remains the unchanged. Turning the feature on will only improve your site performance.

Page Template in Function of a Pattern 2013-10-15

As of opus "5.6.0003"

Vae Soli! has introduced the possibility to specify page templates in function of a pattern in the URL. The inner working of the template mechanism is compatible with the old way of doing.

Different Templates

<LSTemplate><![CDATA[
    code-source\.php = /template/vaesoli2.html;
    .*\.php = /template/vaesoli.html
]]></LSTemplate>

Two different templates are possible. The first one, /template/vaesoli2.html, is applied for all URLs that match the code-source\.php regex. The second one, /template/vaesoli.html will be selected for all URLs that match the .*\.php regex.

The multiple template strategy is followed when Vae Soli! detects the presence of a regex = template pattern.

Please remember that Vae Soli! can also retrieve the value of the template to be selected via cookies or URL parameters. This somehow defeats the multiple template strategy. For the multiple strategy to be taken into consideration, the LSTemplateQueryURLOrCookie> configuration setting must be used as in the following example :

<LSTemplate><![CDATA[
    code-source\.php = /template/vaesoli2.html;
    .*\.php = /template/vaesoli.html
]]></LSTemplate>
<LSTemplateQueryURLOrCookie>no</LSTemplateQueryURLOrCookie>

Suivant