Labo

Le portfolio de Sylvain Faucherand, intégrateur web en Ile-de-France et Rhône-Alpes

Accueil→ Labo

Chargement de page auto-ajusté

20.12.2007 #

Lors des séances de veille je tombe assez souvent sur des blogs, notamment liés au graphisme, dont la hauteur de page est assez importante et dont les éléments graphiques qui y sont placés mettent un certain temps à apparaitre. Ce chargement fastidieux et surtout inutile (puisque déjà lu a priori dans ce cas) est assez desagréable.

L’application Google Reader utilise une solution élégante pour palier à ce type de comportement puisque lorsqu’on consulte ses flux, les billets se chargent au fur et à mesure que l’on descend dans la page.

Ce système permet un temps de chargement moins long, adapté à l’usager et constitue à mon avis une utilisation intelligente des pratiques Ajax, liées notamment à des échanges silencieux avec les serveurs.

Dans cette démo il convient de surveiller le paramètre de hauteur de page qui augmente au fur et à mesure que l’on effectue un scroll vers le bas. Une hauteur de plus de 3000px supprime ce comportement.

  • Javascript
  • AJAX
  • jQuery
  • Ergonomie

Remonter.

Arrières-plans vectoriels (2)

26.09.2007 #

Hedger Wang a complété avant que je n’en ai moi-même le temps certains problèmes inhérents à l’utilisation d’images vectorielles en arrière-plan, donc je reprends directement son travail : il s’agit ici d’appliquer des images vectorielles afin d’obtenir dec blocs div avec bords arrondis.

Il a en effet utilisé Javascript (et la librairie YUI) pour appliquer le format adéquat SVG ou VML selon le navigateur client (FF et Opera pour SVG, VML pour IE).

L’exemple suivant est directement repris du sien : grossièrement, avec javascript on récupère la couleur d’arrière-plan du bloc pour injecter dans ce même bloc un rectangle de cette même couleur aux bords arrondis, au format VML ou SVG selon l’identifiant navigateur. Ce remplissage s’adapte à la taille du bloc parent avec des instructions CSS. L’opération est répétée pour tous les blocs (identifiés par une classe).

Voir l’exemple.

Evidemment cela reste du bricolage mais les librairies javascript pourront vraisemblablement apporter des solutions simplifiées à l’avenir, évitant le souci du navigateur client.

  • Javascript
  • CSS
  • SVG
  • VML
  • YUI

Remonter.

Arrières-plans vectoriels dans une page web

12.08.2007 #

CSS2 permet d’appliquer des styles assez complexes sur les pages html seulement cela implique pas mal de bricolage et d’ajout de balises vides de sens dans le code. Des effets courants tels les bords arrondis ou les gradients ne sont pas des opérations naturelles avec CSS2 (en attendant ses prochaines versions) notamment lorsque l’on conçoit une page web extensible.

Voici donc quelques expérimentations d’arrières-plans vectoriels qui offrent l’avantage immense de garder leur forme lorsque la page est redimensionnées. Biensûr, la compatibilité du système suit la règle du IE vs tous les autres navigateurs donc évidemment le problème numéro 1 de tout développeur web reste entier :

  • IE utilise son format VML (voir l’exemple en utilisant IE),
  • FF Opera et d’autres utilisent la version normalisée W3C du format vectoriel, SVG (voir l’exemple en utilisant FF ou Opera).

D’un point de vue code, l’utilisation de SVG permet de facilement* de charger un fichier .svg depuis le fichier html, donc de séparer un peu encore le contenu de la présentation même si la présence d’une balise est tout de même nécessaire.

Via HedgerWow.

* : curieusement sur mon hébergement 1and1 le chargement de fichier .svg donne lieu à un comportement bizarre de FF... J’ai donc placé les fichiers sur Free. Encore beaucoup d’interrogations en suspens.

  • CSS
  • XML
  • SVG
  • VML

Remonter.

Menu syllab avec mootools

28.07.2007 #

Juste pour le fun : le menu de syllab est en flash mais reste accessible tout de même - regardez le code source ou désactivez javascript - seulement avec un peu de css, de javascript et quelques balises en plus dans le code html on peut facilement le reproduire :

Le code html est le suivant sur cet exemple.


<body>
<ul>
        <li>
                <a href="http://www.syllab.info/">
                        <b class="btn">Accueil</b>
                        <b class="shadow"></b>
                </a>
        </li>
        <li>
                <a href="http://www.syllab.info/-Journal-">
                        <b class="btn">Journal</b>
                        <b class="shadow"></b>
                </a>
        </li>
        <li>
                <a href="http://www.syllab.info/-Labo-">
                        <b class="btn">Labo</b>
                        <b class="shadow"></b>
                </a>
        </li>
        <li>
                <a href="http://www.syllab.info/-Objet-">
                        <b class="btn">A propos</b>
                        <b class="shadow"></b>
                </a>
        </li>
        <li>
                <a href="http://www.syllab.info/-Contact-">
                        <b class="btn">Contact</b>
                        <b class="shadow"></b>
                </a>
        </li>
</ul>

Cet exemple fonctionne très bien sous IE, Firefox et Opera mais il est possible d’aller encore plus loin avec les deux derniers navigateurs cités puisque leur compréhension du DOM est plus avancée (ou ma connaissance de javascript trop rudimentaire). En effet le code html peut se résumer à l’essentiel pour obtenir le même effet : (voir l’exemple)


<ul>
        <li><a href="http://www.syllab.info/">Accueil</a></li>
        <li><a href="http://www.syllab.info/-Journal-">Journal</a></li>
        <li><a href="http://www.syllab.info/-Labo-">Labo</a></li>
        <li><a href="http://www.syllab.info/-Objet-">A propos</a></li>
        <li><a href="http://www.syllab.info/-Contact-">Contact</a></li>
</ul>

Rq : les sources sont annotées si le processus utilisé vous intéresse : (clic droit > enregistrer sous)

Evidemment javascript n’offre pas assez d’effets visuels d’une part, et d’autre part la compatibilité avec tous les navigateurs est trop incertaine. Je pense donc garder mon bon vieux menu en flash jusqu’à la prochaine charte graphique de ce site...

  • Javascript
  • Mootools

Remonter.

Nuage de mots-clés en javascript

12.07.2007 #

Puisque je suis dans le développement d’un nouveau site utilisant mootools j’ai l’occasion de créer de petites fonctions qui simplifient la vie et que dans ma grande sollicitude je tiens à partager : par exemple, le bon vieux tag cloud dont la principale difficulté réside dans le calcul de la taille de police du tag.

démo

Voici donc un petit script rapide permettant sa mise en place sans calculs savants :

tagcloud.js

Le html :


<ul id="tag-cloud">
   <li><a href="#">aventure(<span>9</span>)</a></li>
   <li><a href="#">culture(<span>2</span>)</a></li>
   <li><a href="#">désert(<span>10</span>)</a></li>
   <li><a href="#">farniente(<span>1</span>)</a></li>
   <li><a href="#">golf(<span>3</span>)</a></li>
   <li><a href="#">îles(<span>8</span>)</a></li>
   <li><a href="#">montagne(<span>2</span>)</a></li>
   <li><a href="#">nature(<span>6</span>)</a></li>
   <li><a href="#">pêche(<span>3</span>)</a></li>
   <li><a href="#">plage(<span>6</span>)</a></li>
   <li><a href="#">sensations fortes(<span>5</span>)</a></li>
   <li><a href="#">soins(<span>12</span>)</a></li>
   <li><a href="#">soleil(<span>20</span>)</a></li>
   <li><a href="#">Spas(<span>10</span>)</a></li>
</ul>

Le css :


ul#tag-cloud {text-align: justify;}
ul#tag-cloud li {display: inline; list-style-type: none; padding: 0 5px;}

Le javascript : récupère la valeur située dans la balise span de chaque tag et applique un style à celui-ci.


window.addEvent('domready', function() {
        var indices = $('tag-cloud').getElements('span');
        var tags = $('tag-cloud').getElements('li');
        total = 0;
        // calcule la somme des indices
        indices.each(function(el){
                total += parseInt(el.innerHTML);
        });
        for (i=0; i<=indices.length-1; i++){
                var value = parseInt(indices[i].innerHTML);
                tags[i].setStyle('font-size', valueToDomain(value, total));
        };
});
function valueToDomain(value, total){
        var domain="";
        var normalizedValue = value/total;
        if (normalizedValue < 0.01) {domain = "10px";}
        else if (normalizedValue >= 0.01 && normalizedValue < 0.02) {domain = "11px";}
        else if (normalizedValue >= 0.02 && normalizedValue < 0.03) {domain = "12px";}
        else if (normalizedValue >= 0.03 && normalizedValue < 0.04) {domain = "13px";}
        else if (normalizedValue >= 0.04 && normalizedValue < 0.05) {domain = "14px";}
        else if (normalizedValue >= 0.05 && normalizedValue < 0.06) {domain = "15px";}
        else if (normalizedValue >= 0.06 && normalizedValue < 0.08) {domain = "16px";}
        else if (normalizedValue >= 0.08 && normalizedValue < 0.10) {domain = "17px";}
        else if (normalizedValue >= 0.10 && normalizedValue < 0.13) {domain = "18px";}
        else if (normalizedValue >= 0.13 && normalizedValue < 0.16) {domain = "19px";}
        else if (normalizedValue >= 0.16 && normalizedValue < 0.20) {domain = "20px";}
        else {domain = "21px";};
        return domain;
};

Voilà ! Bon, je vous le concède, la dernière fonction ci-dessus n’est pas très jojo... la flemme que voulez-vous, mais après tout c’est à vous de choisir vos propres valeurs (justification ok).

Rappel : mootools est nécessaire pour que ce script fonctionne.

  • Javascript
  • Mootools

Remonter.

Sylvain Faucherand © Copyright 2006-7, droits réservés, Syllab.info, valide XHTML 1.1 et CSS 2, flux RSS, Skype, CV, Profil Viadeo, View Sylvain Faucherand's LinkedIn profile