Archives mensuelles :

décembre 2009

Tester un site dans plusieurs navigateurs (mais surtout dans IE6 avec Vista)

Tester ses pages web dans les différents navigateurs présents sur le marché est souvent source de frustration. Même lorsqu’on utilise un système Windows, on rencontre des difficultés pour tester les sites dans IE6, IE7 et IE8 en même temps. Opera, Firefox, Google Chrome ou Safari ne posent pas de problème particulier. Selon votre configuration, il existe plusieurs techniques permettant d’assurer un affichage homogène sur la majorité des navigateurs : virtualisation, logiciels, services en ligne ou pourquoi pas un deuxième ordinateur dédié comme un NetBook ?

Hightcharts — une bibliothèque Javascript pour des «camemberts» à point

Hightcharts est une bibliothèque Javascript spécialisée dans la création de diagrammes, graphiques et autres camemberts pour illustrer vos données brutes. Hightcharts fonctionne dans tout les navigateurs modernes, dont l’iPhone et Internet Explorer à partir de la version 6 !  Les navigateurs standarts utilisent l’élément canvas, dans certains cas, SVG est utilisé. Quant à Internet Explorer, c’est VML qui sollicité. Voir la page de démonstration.

jQuery Before/After — Comparer deux états d’une photo

jQuery Before/After est un plugin étonnant qui plaira à tous ceux qui veulent proposer la comparaison de deux états d’une photo. Chacun des deux états apparait de part et d’autre d’une ligne médiane où un grip vous attend pour faire glisser un slider qui dévoilera l’autre partie de l’image. Le script pèse 7 ko et nécessite jQuery UI en plus de jQuery pour fonctionner. Je vous laisse avec une démonstration parfois surprenante 😉

[Résolu] Problème de duplication et décalage des widgets dans WordPress

Je fais un usage assez intensif des zones de Widgets dans WordPress. Pour m’y retrouver, j’utilise des intitulés aussi simples que génériques (séparation de la forme et du fond quand tu nous tiens ) tels que header-1, header-2 ainsi que sidebar-1 et sidebar-2. Jusque-là, rien d’anormal me direz-vous ? Attendez la suite. Depuis le changement de mon thème WordPress, je rencontre des problèmes de décalage et de duplication lorsque je clique dans Apparence -> Widgets : les Widgets présents dans sidebar-1 et sidebar-2 se dupliquent dans les zones header-1 et header-2 vides à l’origine.

jQSlickWrap habille les images de formes irrégulières avec du texte

jQSlickWrap est un plugin jQuery qui permet d’habiller une image de forme irrégulière avec le texte autour. Ce script fonctionne sur les navigateurs compatibles avec la balise canvas prévue par HTML5. Pour résumer, le script crée une balise canvas, la remplie avec l’arrière-plan de l’image en fonction des informations de la couleur du pixel du coin supérieur gauche et redessine l’image pixel par pixel. Mais jugez plutôt !

Cette technique est une adaptation de la solution CSS et PHP proposée par Rob Swan sur A List Apart en 2006.

TinySlider — un diaporama léger en Javascript

TinySlider est un diaporama Javascript autonome très léger de 1,5 ko facilement personnalisable via les CSS. On peut intégrer autre chose que des images et la gracieuse dégradation est assurée en l’absence de Javascript sur l’agent utilisateur du visiteur. Le script possède des options pratiques comme vous pouvez le voir sur l’exemple d’appel au script :

var slideshow=new TINY.slider.slide('slideshow',{
    id:'slider', // ID of the parent slideshow div
    auto:3, // Seconds to auto-advance, defaults to disabled
    resume:true, // Resume auto after interrupted, defaults to false
    vertical:false, // Direction, defaults to false
    navid:'pagination', // Optional ID of direct navigation UL
    activeclass:'current', // Class to set on the current LI
    position:0 // Initial slide position, defaulting to index 0
});

Voir la démonstration.

Métiers du web — Je suis « enveloppeur web » moi monsieur ;)

Nous disposons de nombreux vocables pour désigner les métiers de l’internet qui tournent autour de la création de sites web : intégrateur web, intégrateur HTML & CSS, développeur web, webdesigner, designer web, etc. Pour affiner la définition de mon profil de poste, j’ai décidé de créer le métier d’enveloppeur web en piochant dans les différentes familles disponibles sur Le portail des métiers de l’internet correspondants aux domaines que je pratique régulièrement ou que j’ai eu l’occasion d’explorer. D’une manière générale, je trouve que les intitulés de poste sont réducteurs, mais en piochant dans plusieurs disciplines, il est possible de s’approcher de la réalité du terrain.

Menus déroulants et autres fantaisies avec :hover :focus :active :target pour IE6

Menu déroulant Suckerfish — réécriture du très populaire Suckerfish Dropdown pour implémenter des menus déroulants sur plusieurs niveaux. Ce script de 12 lignes crée une classe sfHover sur un élément li pour émuler la pseudo-classe :hover pour Internet Explorer qui ne l’applique que sur les ancres a, notamment. Ce script est léger, accessible, basé sur les feuilles de styles et non-intrusif (à part dans la feuille de style puisqu’il faut doubler le sélecteur li:hover avec la classeli.sfHover).