Il est souvent fastidieux de tester un site sur les différents navigateurs existants. C’est particulièrement le cas avec la gamme Microsoft… J’utilisais Multiple IE pour tester un site sur Internet Explorer 6. Mais depuis l’installation de la version 8 de ce même navigateur, la version 6  « standalone » est devenue bancale et ne fonctionne plus très bien.

Microsoft a récemment sorti Expression Web SuperPreview, disponible gratuitement en téléchargement. Ce logiciel permet de tester dans la même fenêtre l’affichage d’un site sur les différentes versions d’Internet Explorer. Plusieurs modes d’affichages sont disponibles. Le chargement de la prévisualisation est un peu long à mon goût, mais il fait très bien ce que l’on lui demande, sans fioritures.

Du coup, plus besoin d’ouvrir le moindre Internet explorer, tout se passe dans le même logiciel¹ et c’est assez pratique après quelques essais. Le bémol, c’est qu’il n’est bien sûr pas disponible sur Mac ou Linux…

Et vous, quelles sont vos méthodes pour tester un site sur les différentes versions d’Internet Explorer ?

1. Attention tout de même, IE8 doit être installé sur votre ordinateur pour utiliser la prévisualisation de cette version.

Il y a des fois, même quand on n’a pas le temps, où il est important de poster son désespoire face à ce dinosaure de navigateur encore imposé et utilisé par beaucoup de personnes / agences… Je ne sais pas trop quelle part de marché il peut encore avoir à travers le monde, mais pitié, que ça cesse, c’est une perte d’énergie et de temps incroyable! Je fais donc suivre l’excellent article de Jeremy à ce sujet : Mais arrêtez avec IE6!.

CSS Toolbox, un éditeur assez complet pour vos feuilles de styles CSS avec quelques avantages intéressants :

• Formatage et optimisation du code
• Validateur et correcteur de CSS
• Compression du code

J’ai testé l’outil, si vous avez besoin d’un logiciel simple et léger, CSS Toolbox est fait pour vous.

Voici un nouveau type de billet sur ce blog, des petites astuces CSS que les intégrateurs confirmés connaitront sûrement déjà mais qui plairont je l’espère aux débutants.

La première astuce consiste à changer la couleur du soulignement d’un lien par rapport au texte avec l’attribut border ou insérer une image avec l’attribut background.

Le code html du lien

<div id="exemple">La <a href="#">couleur</a> de mon lien souligné</div>

Le css correspondant au lien

a {
color:#3300FF; /* Couleur du lien */
text-decoration:none; /* Suppression du soulignement par défaut */
border-bottom:1px dotted #CC0000; /* Couleur pour le nouveau soulignement avec l'attribut border */
}

Résultat pour cet exemple

On peut aussi si on le souhaite modifier les valeurs pour l’attribut a:hover, a:visited, etc. Pour par exemple changer la couleur du survol ou la taille du border, son style : solid, dotted, dashed, etc¹.

a:hover {
color:#3300FF; /* Couleur du lien au survol */
border-bottom:2px dotted #CC0000; /* Couleur du soulignement au survol avec une taille de 2px */
}

Et avec l’attribut background ?

Un peu plus original, vous pouvez aussi mettre une image pour souligner vos liens. Exemple ci-dessous :

a {
background: url(fond-lien.jpg) bottom no-repeat; /* Bottom pour que l'image soit en dessous du lien */
color:#CC0000; /* Couleur du lien */
text-decoration:none; /* Suppression du soulignement par défaut */
padding-bottom:3px; /* Un padding pour espacer l'image du lien, ne marche pas sur IE */
}

Conclusion pour cette astuce

Une astuce CSS très simple à mettre en place, avec des possibilités intéressantes pour apporter un peu d’originalité à son design / intégration non ? Qu’en pensez-vous ?

1. Vous pouvez voir les différents styles de l’attribut border sur ce lien.

A voir sur webdesignerwall.com, un très bon tutoriel pour décorer vos images / photos à l’aide du CSS sans avoir besoin d’éditer la source. Le principe est assez simple, il suffit d’ajouter une balise span avant l’image et de lui appliquer en background l’élément graphique que vous souhaitez en CSS¹. Les avantages sont nombreux en terme de flexibilité, rapidité et productivité, comme par exemple de pouvoir appliquer le même effet sur une galerie de photos.

Une page de démonstration est disponible ainsi qu’une archive à télécharger contenant l’ensemble des exemples.

1. L’exemple ci-dessous est peut-être plus parlant…

Dans un précédent billet j’avais publié une liste de quelques solutions lightbox. PlanerOzh a fait beaucoup mieux et nous propose un excellent outil sous forme de tableau pour comparer les différents scripts lightbox. Très bien conçu, il est possible de trier et d’afficher uniquement les scripts par framework ou selon ce qu’ils proposent, images, vidéos, flash, etc. A bookmarker d’urgence! Génial non ?

Pour commencer, avant de parler de la bête, un peu d’historique… Il y a longtemps que je cherchais le CMS idéal pour gérer la création et la maintenance d’un site Internet. Graphiste et Intégrateur XHTML / CSS avec assez peu de notions en développement, il me fallait un outil de gestion de contenu simple, intuitif, accessible, avec le maximum de possibilités et de fonctionnalités, etc. Très exigeant, je rêvais du Saint Graal, l’outil ultime, la perle rare :) …

Après une longue veille sur les différentes plateformes existantes. Allant du plus connu, Joomla, qui malgré une très grosse communauté et des centaines de plugins, n’a été qu’une énorme déception à court terme. Je ne rentrerai pas dans les détails, je risquerai d’être sévère et méchant…¹ Ou d’autres outils comme CMS Made Simple, Textpattern, MODx, Drupal, sNews, etc. Chacun avec des bonnes idées, des avantages comme des inconvénients, sans jamais trouver LE CMS idéal.

Puis, par hasard, sur un forum je suis tombé sur un message sans réponse qui vantait les mérites d’un CMS soit disant parfait. Par curiosité, j’ai donc découvert… C’est maintenant que je balance le nom de l’élu, roulement de tambour, le suspens est à son comble… L’heureux vainqueur est : Typolight. Ce nom vous dit sûrement rien² et pour cause, Typolight est pratiquement inconnu en France. Développé par Leo Feyer, un Allemand, ce magnifique outil ne peut rester inconnu…

L’interface et les fonctionnalités de Typolight

Ce qui m’a frappé en premier, c’est cette interface très simple, épurée et accessible! Typolight est de loin le CMS le mieux pensé, le plus intuitif et agréable à utiliser que j’ai pu tester. Tout est dans le détail et c’est un véritable plaisir pour l’utilisateur!

Du côté des fonctionnalités, la liste est longue, très longue… En natif, Typolight permet de faire tout ce qui est nécessaire pour la plus part des sites Internet et il le fait très bien, sans non plus devenir une usine à gaz. Voici une liste non exhaustive :

• Mise à jour automatique
• Code source de sortie accessible et en XHTML strict
• En accord avec les recommandations W3C/WAI
• Gestion des versions et des rétablissements
• Support multilingue (emploi du charset UTF-8)
• Framework CSS cross-browser
• Open Source (LGPL)
• Etc.

• Editeur de texte incorporé (TinyMCE)
• Différents éléments de contenu et modules
• Gestion des actualités/news
• Commentaires/Guestbook
• Bulletin d’information/Newsletter
• Calendrier/Evènements
• Explorateur de fichiers
• Galerie de photos (Lightbox)
• Générateur de formulaire
• Moteur de recherche
• Etc.

C’est juste les grandes lignes de ce qu’il est possible de faire avec Typolight, je vous invite fortement à lire toutes les caractéristiques (en français) disponibles et à tester l’outil!

Conclusion sur Typolight

Vous aurez compris tout le bien que je pense de ce CMS. Après 8 mois d’utilisation et plusieurs projets réalisés avec, je considère Typolight comme un gestionnaire de contenu quasiment parfait! Ceux qui me connaissent savent à quel point je peux être exigeant… Mettez votre Joomla³ à la poubelle et ne passez pas à côté de cette petite merveille!

• Le portail officiel
• Le site français (captures d’écran, documentations, tutoriels, etc.)
• La démonstration en ligne

Pour ceux qui prendront le temps de tester l’outil, n’hésitez pas si vous avez des questions à me laisser un commentaire! Et une dernière fois, ne passez pas à côté de ce merveilleux outil!⁴

Et vous, utilisez-vous Joomla ou un autre CMS pour vos sites ? Que recherchez-vous en priorité dans ce genre d’outil ?

Edit : Typolight.fr a ouvert un forum : http://www.typolight.fr/forums/

1. Même si il est vrai que moi aussi j’ai été conquis quelques temps par Joomla, avant de vite déchanter…
2. Si ce n’est le possible rapprochement avec Typo3 où il y a effectivemement un lien avec l’auteur.
3. Un petit private joke pour ma petite Joséphine, non ce n’est pas Site Kite CMS mon outil utlime, mais bien Typolight ;). Tu sais ce qu’il te reste à faire!
4. Je savais bien que j’allais en faire 3 tonnes dans ce billet et pourtant il n’est pas sponsorisé ;).

Ci-dessous une liste non exhaustive des différentes solutions de Lightbox pour vos images, photos, vidéos, html, etc. Et quelques plugins existants pour WordPress et Dotclear. Pour ceux qui ne connaissent pas ou qui ne voient pas ce que c’est, euh… je les invite à regarder la page Wikipédia.

Edit du 21.01.2009 : Il y a maintenant 15 clones Lightbox de listés sur cette page.

Les classiques orientés images et photos

• Lightbox 2 : Peut-être le plus célèbre de tous, à base de Scriptaculous et prototype.

• Slimbox : Un clone du populaire Lightbox 2. Connu pour sa légèreté, pas plus de 7kb à base de Mootools.

• PopBox : L’effet d’apparition change des traditionnels lightbox, avec pas mal d’options disponibles.

• GreyBox : Permet de mettre du contenu, un site web ou des images dans un effet lightbox.

• FancyZoom : Du même genre que PopBox dans l’effet d’apparition, avec moins d’options.

• MooSlideBox : L’original du groupe avec un effet complètement à l’opposé des autres lightbox cités ci-dessus.

Les multitâches orientés images et contenus

• Highslide JS : Affichage des images avec différentes possibilités. HTML content, ajax, iframe, flash.

• Mediabox : Effet lightbox de base pour des vidéos mov ou wmv, Youtube, Dailymotion, etc. Flash (swf et flv).

• Shadowbox : Des options assez avancées pour les images (image maps, draggable, etc.). Tout type de vidéos et contenus.

• ThickBox : En jQuery, simple image ou galerie. Contenus en inline, iframed et ajax.

• Multibox : Pour les vidéos flv, mov, real et wmv. Player mp3. Page HTML ou site internet.

• Lightview : A base de Scriptaculous et prototype. Galerie d’images avec diaporama! Autres médias : Quicktime, ajax, swf, etc.

• Videbox : Lightbox spécialisé dans l’affichage des vidéos, Youtube, Metacafe, Google Video, etc.

• Sexy Lightbox 2 : A base de mootools, capable d’afficher une simple image comme une galerie, du contenus ou de la vidéo.

• Facebox : A base de jQuery, dans un look plus ou moins similaire à Facebook, images, divs, ajaxes, etc.

Les lightbox pour WordPress et Dotclear

• Simple jQuery : Une version en jQuery pour WordPress.

• Slimbox : La version de slimbox pour WordPress.

• WP-Lightbox 2 : La version de Lightbox 2 pour WordPress.

• WP-GreyBox : La version de greybox pour WordPress.

• Picasa Lightbox : Un lighbox pour insérer vos albums picasa.

• dcjQueryLightBox : un clone compact de Lightbox JS pour Dotclear 2.

• DcLightbox : Intégration de Lightbox à Dotclear 2.

• Lite Box : Un visionneur d’images léger pour Dotclear 2.

• Slimbox : Un clone ultra compact pour Dotclear 2.

Conclusion et préférences

Mes préférés pour l’affichage d’images ou des photos sont Slimbox pour sa simplicité, légèreté et FancyZoom pour son originalité. Du côté des multitâches, Shadowbox est très complet avec des options pour les images vraiment intéressantes et Lightview pour la fonction diaporama ainsi que son aspect visuel.

Ce genre d’effet typiquement web 2.0 c’est fortement démocratisé depuis un moment, j’espère que vous trouverez votre bonheur avec cette liste. J’imagine qu’il en existe d’autres, mais il y a déjà de quoi faire non ? Bien sûr, si vous en connaissez qui ne sont pas dans cette liste, laissez moi un commentaire.

Edit : Une autre liste à découvrir avec 49 scripts.
Edit du 12-11-2008 : Ajout du lightbox Sexy Lightbox 2.
Edit du 21-01-2009 : Ajout du lightbox Facebox.

Un nouveau player flash très complet pour vos vidéos et mp3 qui gère les formats suivants : FLV, SWF, MP3, MP4, H.264 video, JPG and PNG. Pas mal d’options sont disponibles comme le choix des couleurs, la gestion d’une playlist, la possibilité de choisir les boutons de contrôle pour la vidéo, etc.

De ce que j’ai testé, il est hautement configurable, avec beaucoup de variables et peut répondre à beaucoup d’attentes. Le site est plutôt bien fait avec une documentation détaillée pour l’installation et la configuration du player. Si vous souhaitez avoir un rapide aperçu, une page screenshots est disponible

Encore un lightbox vous allez me dire ? C’est vrai, il existe énormément de scripts pour afficher des galeries avec ce style si particulier. Mais à la différence des autres, multibox supporte une multitude de choses :

• Les formats de vidéos suivants : flv, mov, wmv, real
• La lecture d’un mp3
• Bien sûr, l’affichage d’images / photos
• Et l’affichage de page html / ajax

Ce script tourne sous mootools v1.11. Compatible avec les navigateurs Firefox 2, IE 7 , IE 6, et Safari. Quelques options sont disponibles comme par exemple le choix de la couleur du fond, la semi-transparence de celui-ci, description, etc. Dommage, il manque peut-être la possibilité de lancer un slideshow / diaporama, mais c’est déjà pas mal non ?

• La page avec le téléchargement et les exemples

Edit : Ce que j’ai oublié de préciser, multibox n’est pas le seul script disponible sur phatfusion. Slideshow, rounded corners, page loader, validate, etc. sont à découvrir sur la page d’accueil.