WEB QUOTE – blog
14oct/096

Microsoft SuperPreview

Microsoft vient de lancer ces derniers jours un nouvel outil (gratuit) permettant de comparer un site web sur Internet Explorer version 6, 7 et 8 !

Microsoft-Expression-Web-SuperPreview

A la différence de IEtester ou MultipleIE, celui-ci est censé afficher le site exactement comme s'il l'était dans la version choisie.

Seul Internet Explorer est supporté pour le moment, mais Firefox et Safari seront ajoutés.
Il devrait être possible d'accéder à des navigateurs par le réseau pour tester d'autres plate-formes (par exemple Mac).

Il est possible de comparer deux versions cote à cote ou même par transparence !

Microsoft SuperPreview est disponible en téléchargement ici.

Edit: Pour le moment il semblerait qu'on ne puisse pas vraiment naviguer via les liens (c'est pas comme si c'était une fonctionnalité primordiale sur un site web :D ) du coup ça devient un peu lourd de devoir saisir chaque URL une par une ! Le but est donc UNIQUEMENT de comparer l'affichage sur les différentes versions d'IE.

Remplis sous: utile 6 Commentaires
9oct/095

Alias Gmail : savoir reconnaitre les spammeurs

Aujourd'hui au menu : les alias Gmail.
Si comme beaucoup votre boite mail est sur gmail (sinon commencez à y réfléchir... c'est vraiment la meilleure !) il faut savoir que vous avez une infinité d'alias (un autre mail qui pointe dans la même boite).

En effet, lorsque vous vous inscrivez sur un site, on vous demande dans 99% des cas votre mail.
Seulement parfois ces sites collectent et revendent ces adresses mail et vous devenez très vite la cible de spammeurs.

L'astuce que je vous présente ici consiste à utiliser le système d'alias de Gmail pour connaitre le site qui a revendu votre email (ou sur lequel le spammeur à trouvé votre adresse).

Voici l'astuce  :
Lorsque vous saisissez votre adresse mail sur un site, il suffit d'ajouter le signe "+" après votre adresse, suivi de n'importe quoi (email+N_IMPORTE_QUOI@gmail.com)

Qui donnerait par exemple si votre mail est "jean@gmail.com" : jean+facebook@gmail.com
Vous recevrez donc tous les mails comme si vous aviez saisi votre adresse mail classique mais vous pourrez (en le suffixant par +nom_du_site) connaitre l'origine du mail (si vous recevez plus tard du spam envoyé à "jean+facebook@gmail.com", vous saurez donc tout de suite d'où ça vient !

NB: En utilisant cette astuce, vous pourrez aussi plus facilement créer des filtres/libellés selon la provenance des mails que vous recevrez.

Remplis sous: utile 5 Commentaires
1oct/092

Générateur de sprites

Qu'est-ce qu'un sprite ?

Un sprite est une image qui en contient plusieurs.
Comme un exemple vaux mieux qu'un long discours, voila une exemple de sprite :

sprite google

et un autre

sprite2

Le premier, comme vous l'aurez remarqué viens de google. C'est en fait l'une des seules images du site !

A quoi ça sert ?

L'intérêt principal des sprites est de minimiser les temps de chargement et d'affichage sur les pages d'un site.
En effet, l'image chargée par le navigateur puis mise en cache peut être utilisée n'importe où dans la page sans qu'il y ai besoin d'en télécharger une nouvelle.
Là où l'effet se fait le plus ressentir est sur les "rollover" (les boutons qui changent d'aspect au survol de la souris, voir 2eme exemple) car l'image qui remplace la première au survol de souris est déjà chargée ! (donc plus besoin de pré-charger les images des rollover comme nous le faisions il y a quelques années en javascript).

Comment ça fonctionne ?

C'est là qu'intervient le CSS.

a.lang {
  padding-right: 20px ;
  background-repeat: no-repeat ;
  background-image: url(drapeaux.png) ;
}
a.lang.fr { background-position:   0px 0px }
a.lang.de { background-position: -20px 0px }
a.lang.it { background-position: -40px 0px }
a.lang.es { background-position: -60px 0px }
a.lang.uk { background-position: -80px 0px }

Ici imaginez un sprite avec des drapeaux de pays... au lieux d'avoir une image par drapeau, vous n'en avez donc qu'une.
Il suffit alors dans le CSS de définir la position de chaque drapeau via "background-position" et le tour est joué.

Comment créer des sprites rapidement ?

Pour vous éviter de faire les sprites à la main, vous pouvez simplement utiliser quelques outils online qui vous allez le constater... sont bien pratique !

spritegen.website-performance.org vous propose un générateur de sprites :
Vous mettez toutes vos images dans un .zip, vous uploadez ce fichier zippé et spritegen vous génére de lui même le sprite en vous donnant même le code CSS avec les positions qui conviennent !

spriteme.org vous propose quant à lui un "plugin" javascript à ajouter à vos favoris qui analyse les images de n'importe quel site sur lequel vous surfez et vous propose de générer des sprites avec ces images.

Remplis sous: CSS, utile 2 Commentaires
Page 1 sur 11