All posts in CSS

Un bookmarklet pour avoir un aperçu rapide de ses sites responsive

Responsive design bookmarklet
Benjamin Keen a créé un petit générateur de bookmarklet qui permet d’afficher un site dans plusieurs iframes sur une seule page, pour prévisualiser le rendu d’un site sur différentes tailles d’écran (smartphone, tablette, écran, …). Sur son site, on peut choisir les tailles des différents iframes que l’on souhaite avoir. Ce bookmarklet est très pratique, mais la navigation entre les différents iframes n’est pas très pratique (il faut faire défiler la page horizontalement, et le scoll de la page entre souvent en conflit avec les scrolls des iframes). J’ai donc modifié sont bookmarklet pour générer automatiquement des boutons permettant de sauter d’un iframe à l’autre.

Vous pouvez installer ma version du bookmarklet, en attendant que Benjamin intègre mes modifications à son générateur (ce qui est peut être déjà fait à l’heure ou vous lisez ces lignes, sinon dans quelques jours).

IE 6 doit mourrir, aidons le un peu

A l’heure ou les sites web sont de plus en plus compliqués, aussi bien au niveau graphique qu’au niveau du code, assurer la compatibilité des sites que l’on développe avec IE 6 est devenu un véritable calvaire. Support des css médiocre (comparé à Safari ou Firefox), performances faiblardes en javascript, … Bref, les développeur web se réjouirons lorsque IE 6 passera sous la barre des 5 % d’utilisation, ou moins.

Pour accélérer un peu le declin d’IE 6, je me suis décidé à afficher un message aux visiteurs de tous les sites que je gère, leur indiquant que le navigateur qu’ils utilisent est obsolète et qu’ils devraient le mettre à jour. Avant de développer quelque chose, je me suis dis que je n’étais surement pas le premier à avoir cette idée et qu’une solution existait peut être déjà. Mon ami Google m’a trouvé l’outils parfait : ie6update.

Il s’agit en fait d’un javascript à placer sur son site, et qui affiche un message si le visiteur utilise IE 6, en prenant l’apparence d’une véritable notification d’IE :

ie6update

Pour l’installer, rien de plus simple. Téléchargez le script, puis placez ce bout de code dans votre page :

<!--[if IE 6]>
	<script type="text/javascript">
		/*Load jQuery if not already loaded*/ if(typeof jQuery == 'undefined'){ document.write("<script type=\"text/javascript\"   src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js\"></"+"script>"); var __noconflict = true; }
		var IE6UPDATE_OPTIONS = {
			icons_path: "http://static.ie6update.com/hosted/ie6update/images/",
			message: "Votre navigateur n'est pas &agrave; jour, cela repr&eacute;sente un risque, cliquez ici pour le mettre &agrave; jour",
			url: "http://www.microsoft.com/france/windows/internet-explorer/default.aspx"
		}
	</script>
	<script type="text/javascript" src="ie6update/ie6update.js"></script>
<![endif]-->

Le script inclut la librairie Jquery si elle n’est pas présente, puis initialise le script en passant 3 paramètres :

icons_path : le chemin vers les images utilisées par le script (elles peuvent se trouver en local, ou utiliser celles se trouvant sur le serveur d’ie6update)
message : le message à afficher
url : le lien ou sera redirigé le visiteur s’il clique sur le message

Simple et efficace.

Par simplicité, je redirige vers la page de téléchargement d’IE 8. Une meilleure approche consisterait à rediriger vers une page listant les différents navigateur (Firefox, Safari, Chrome, …).

J’ai mis en place ce script sur un site ayant un traffic mensuel d’environ 24 000 visiteurs uniques. IE 6 représente environ 14 % des visites.

ie6stats

Rendez-vous dans quelques mois pour voir si la descente s’accélère. En attendant, je vais l’ajouter sur le maximum de site possible. Et vous ?

YASC (Yet Another Sprite Creator)

Yasc est un petit projet personnel qui permet de générer le code css pour les sprites d’une image.
Ce script est inspiré de Sprite Creator, et a été réalisé à l’aide de jquery et du plugin imgAreaSelect.


YASC (Yet Another Sprite Creator) screencast from Francis Thomas on Vimeo.

Testez le et faites moi part de vos commentaires.

Comparateur de fichier (diff tool) sur mac

Changes vous permet de comparer vos fichiers et vos dossiers pour trouver rapidement les différences. L’interface est très intuitive, et l’application peut être intégrée sous forme de plug-in dans la plupart des éditeurs de texte (Textmate, Coda, BBEdit, Espresso, …). Il permet de travailler sur des fichiers locaux, ainsi qu’avec les système de versionning (Subversion, CVS, Git, …).

J’ai découvert ce soft via Daring Fireball, qui propose un coupon de réduction de 10 $ pour le logiciel, jusqu’au 15 avril.

[ad#posts]

Internet Explorer 8, disponible aujourd’hui

C’est aujourd’hui que sort IE 8 !

Pour tout les détails sur les nouveautés, lisez la présentation détaillée de Dew sur Alsacréation.

[ad#posts]

Découvrir les nouvelles possibilités de Safari 4

Si vous avez installé la beta de Safari 4, voici quelques liens pour tester les nouvelles possibilités d’animations CSS et de Canvas :

Animations CSS :
Falling Leaves, Bouncing Box, Pulse

3D avec Canvas :
JS Cloth

Un slideshow animé sans flash grâce à Canvas


Jérôme Wax expérimente avec l’objet canvas, il a créé un diaporama animé entièrement propulsé en javascript et utilisant l’objet canvas. Encore une raison de moins d’utiliser Flash pour réaliser de petites animations sur un site.

Dans un autre style, l’équipe de développement de Safari présente une technique d’animation en CSS, à tester avec une version de développement de Safari ou avec Safari sur votre Iphone.

[ad#posts]

script.aculo.us Reflector, reflet d’image

scriptaculous reflector
La génération de reflet sous les images d’une page web (façon iWeb) est toujours à la mode. Après le script reflection.js, Thomas Fuchs ajoute Reflector à sa bibliothèque d’effet javascript Scriptaculous.

Scriptaculous Reflector >>
L’article sur Ajaxian >>

L’objet canvas pour Internet Explorer

J’ai déjà parlé de l’objet canvas qui permet de générer des images en javascript, utilisé notamment par Apple pour ses widgets, ou bien encore pour générer dynamiquement des effets de réflexion d’image. Jusque ici, l’objet canvas ne fonctionnait qu’avec Safari, Firefox et Opéra 9. Grâce au développeurs de Google, on peut désormais utiliser l’objet canvas avec IE, en incluant simplement un fichier javascript.

Téléchargez le fichier (+ exemples) >>

Concours Wrigley, gagnez un tour du monde

Concours Wrigley
Je n’ai encore jamais parlé d’un de mes sites sur ce blog, ni d’ailleurs de mon activité, mais ce site peut vous permettre de gagner un tour du monde, alors je fais un peu de pub. J’ai réalisé ce site au mois de février pour la société Wrigley (vous savez, Freedent, Airwaves, …). Il était prévu que l’on puisse jouer directement sur internet, mais pour diverses raisons, seule la solution audiotel a été retenue. Le site présente donc les lots à gagner (un tour du monde, des coffrets sensation), les produits Freedent et Airwaves, et permet de télécharger les dernières pub de la société. Le tout est réalisé en xhtml / css, avec un peu de Flash pour la présentation des lots.