[niveau: expert]
Je vous ai déjà expliqué comment tester votre site sur IE6, IE7 et IE8, et maintenant je vous propose un émulateur pour voir le rendu de votre site sur Opera Mini. Pour cela il suffit d’aller sur http://www.opera.com/mini/demo/ qui offre une applet Java pour tester la version mobile du navigateur.
A noter que je n’ai réussi à voir l’émulateur qu’avec le navigateur Opera…
[niveau: débutant]
LifeHacker propose différents moyens pour retrouver les mots de passe perdus pour Windows et pour Mac OS X, et en l’occurrence:
– les mots de passe de session Windows
– les mots de passe de vos logiciels (quand le password est déjà défini et caché derrière des ‘*’)
– les mots de passe de vos applications réseaux (pop, smtp, ftp, …)
– les mots de passe des sites web
– les mots de passe par défaut des routeurs
– etc.
Je vous invite à aller lire leur billet (qui est en anglais).
[niveau: expert]
OpenWeb propose un excellent article nommé « Compatibilité multi-navigateurs des polices de caractères » où ils y expliquent les unités et les valeurs à utiliser pour dimensionner la taille des caractères de façon homogène sur le plus grand nombre possible de navigateurs Web.
Pour résumer, il est conseillé de ne pas utiliser une unité absolue (comme le ‘px’, le ‘pt’, le ‘cm’, etc). Evitez donc de noter dans votre style CSS quelque chose comme:
body { font-size: 15px; } /* défini la taille par défaut de tout le texte */A cela, préférez des unités relatives, et en l'occurrence l'utilisation de 'em' et de '%'.
Il suffit de définir la taille du texte par défaut en '%' au niveau du body, et d'utiliser 'em' au niveau du reste de vos conteneurs.
Mais comment savoir l'équivalent entre le % et le 'px' ? Pour cela OpenWeb nous propose un tableau d'équivalence :
| Valeurs en % | Valeurs équivalentes en 'px' |
|---|---|
| 57 | 9 |
| 65 | 10 |
| 71 | 11 |
| 77 | 12 |
| 82 | 13 |
| 88 | 14 |
| 96 | 15 |
| 103 | 16 |
| 109 | 17 |
| 115 | 18 |
| 121 | 19 |
Ainsi, notre CSS donnera :
body { font-size: 96%; } /* équivaut à 15px */Grâce à cette méthode, votre texte s'adaptera très bien quelque soit le navigateur et la taille de l'écran de vos lecteurs.
[niveau: intermédiaire]
Savez-vous que Firefox est hautement configurable ? Pour cela il suffit de taper about:config dans la barre d’adresse (sans les http:// !), et il vous révèle alors ses entrailles. Mozillazine nous propose une page entièrement dédiée aux variables de sous le capot de Firefox. La plupart du temps vous n’aurez pas à modifier un de ces champs, mais parfois cela peut s’avérer utile.
Par exemple, si vous utilisez Firefox à votre travail sur un intranet dans un domaine Windows, vous avez dû remarquer que votre login/mot de passe vous sont sans arrêt demandés. Ce phénomène est dû au système d’authentification NTLM. Pour éviter de retaper nos informations, il suffit d’aller dans about:config puis de modifier la bonne variable :
network.automatic-ntlm-auth.trusted-uris
Un simple double-clique permet de changer sa valeur. Vous aurez à inscrire, séparés par des virgules, les domaines de votre entreprise (par exemple .monintranetdentreprise.com, ou encore le nom d’un serveur à la résolution locale c’est-à-dire sans extension TLD comme monserveurintranet). Dorénavant lorsque vous accèderez à un de ces domaines, Firefox ne vous demandera plus vos informations.
Tux-Planet propose 10 astuces pour configurer et améliorer Firefox grâce à about:config. Par contre, concernant l’accélération de Firefox, je recommande ici la plus grande prudence. J’ai moi-même tenté quelques changements, sans remarquer un effet visible, et même parfois un comportement bizarre…
Dernier exemple ; il est possible de désactiver le scan de l’antivirus des fichiers que vous venez de télécharger. Quel intérêt ? Il se trouve dans le fait que l’antivirus peut prendre plusieurs secondes à vérifier un fichier nouvellement téléchargé, et même quand il fait une taille minuscule…
[niveau: expert]
Je vous invite à lire ce billet consacré à « comment réaliser un bon formulaire HTML » qui donne de vrais bons conseils sur cet exercice plus compliqué qu’il n’y parait.
(via Alsacréations)
[niveau: débutant]
Il y a de nombreuses occasions où une copie d’écran peut être pratique. Pour des raisons légitimes (par exemple montrer à quelqu’un une erreur qui apparaît à l’écran), ou moins légitime (comme récupérer une image qu’un site « bloque » en interdisant le clic droit par exemple).
Beaucoup ne le savent pas, mais les claviers possèdent une touche qui permet de copier l’intégralité de l’écran dans le presse-papier. C’est la touche « impr. écran » qui se trouve en général vers le clavier numérique:
Après, il suffit d’ouvrir un logiciel de traitement d’image comme Paint qui se trouve dans Démarrer > Programmes > Accessoires puis de coller (CTRL V ou Edition > Coller), et l’image de votre écran apparaît.
Si cette solution est simple, elle implique pas mal de manipulations, surtout si on cherche à récupérer juste une petite zone, ou à envoyer le fichier par email, etc.
Pour régler ce problème, il existe un logiciel déjà installé sur Vista (pour les autres versions vous pouvez utiliser un logiciel tiers, comme Snippy) qui se nomme « Snipping Tool » (en Anglais) et « Outil Capture » (en Français). Il se situe dans Démarrer > Programmes > Accessoires.
Si vous ne le voyez pas, il suffit de l’activer en allant dans: Démarrer > Paramètres > Panneau de Configuration > Programmes et Fonctionnalités > Activer ou désactiver des programmes Windows (volet de gauche) puis dans la liste cochez « Composants facultatifs pour tablet PC ». Et voilà !
Cet outil de capture est très facile à utiliser, permet de sélectionner une zone précise de l’écran, permet de surligner un élément, permet d’envoyer en un clic l’image par email, permet de l’enregistrer, de la copier, etc.
Un programme léger, fonctionnel et très pratique.
[niveau: débutant]
EDIT: d’autres symboles sont disponibles sur http://www.simbolostwitter.com/
CopyPasteCharacter est un site qui propose plus de 120 caractères spéciaux, allant de la simple lettre accentuée, aux symboles qu’on ne savait même pas qu’on pouvait les faire !
Il suffit de cliquer sur un caractère pour que le site se charge de le copier directement, vous n’avez donc plus qu’à le coller où vous voulez, comme ce bonhomme de neige ☃ ou cette note de musique ♫ !
Il propose le caractère en texte normal ou en code HTML.
Edit: à noter que sous Windows il est possible de trouver une table très complète des caractères spéciaux en allant dans :
menu Démarrer > Programmes > Accessoires > Outils Système > Table des caractères
[niveau: intermédiaire-expert]
Quand on crée un site Internet, il faut toujours s’assurer que le rendu est correct. L’exercice devient complexe lorsque l’on souhaite que tout fonctionne pour les différentes versions d’Internet Explorer. Vous n’êtes pas sans censés savoir que, en particulier IE6, les Internet Explorer sont une catastrophe et qu’il faut utiliser des astuces pour rendre ses sites web d’aussi bonne facture sur les autres navigateurs que sur les IE!
Comme il n’est pas possible d’installer plusieurs IE sur une même machine (ou alors en faisant preuves d’astuces plus ou moins réussies), il existe une solution beaucoup plus simple : installer des machines virtuelles faites exprès par Microsoft et qui embarquent différentes versions d’IE !
Pour cela, il suffit d’installer Virtual PC (gratuit). Ensuite, il faut se rendre sur cette page dédiée où on vous propose :
– Windows XP SP3 avec IE6
– Windows XP SP3 avec IE7
– Windows XP SP3 avec IE8
– Windows Vista avec IE7
Vous remarquez que ces images de Windows ont une durée de vie. Une fois la date expirée, vous devrez retourner sur le site pour télécharger une nouvelle image.
Pour installer une machine virtuelle, c’est rapide et simple. Lancez le .exe de l’image Windows téléchargée, et choisissez où vous désirez extraire votre disque dur virtuel. Puis lancez Virtual PC. Une console apparait alors dans laquelle vous cliquez sur « Nouveau ».
Un assistant s’ouvre. Sélectionnez la première option (« Créer un ordinateur virtuel »). Donnez un nom à l’ordinateur (par exemple « IE6 XPSP3 »). Ensuite choisissez une configuration par défaut (ici « Windows XP »). A l’étape suivante vous pouvez modifier la quantité de mémoire (pour XP je mets 256Mo au lieu des 128Mo proposés).
Enfin, à l’étape suivante, utilisez un disque existant, et en l’occurrence celui que vous avez extrait du fichier téléchargé précédemment (dans mon exemple « XP SP3 with IE6 2008-Dec.vhd »).
Et voilà !
La console de Virtual PC vous offre alors Windows XP avec IE6. Cliquez sur Démarrer, et Windows va se lancer dans une nouvelle fenêtre. Vous n’aurez plus qu’à ouvrir IE6 et à vous balader sur votre site web pour considérer votre rendu.
[nieau: intermédiaire]
Je vais vous présenter une petite application Windows qui va se loger près de votre horloge et vous apporter des fonctionnalités en plus pour chaque fenêtre/application ; c’est Process Manager.
Comme vous le voyez, quatre options supplémentaires apparaissent lorsque vous faites un clique droit sur une fenêtre:
– Transparency : permet de régler la transparence d’une fenêtre (d’une totale opacité, à une fenêtre quasi-totalement transparente);
– Minimize to tray : va réduire la fenêtre (et donc le logiciel) en une icône systray qui va venir se placer à côté des autres près de l’horloge;
– Always on top : encore une option explicite, qui offre la possibilité de laisser un logiciel toujours sur le devant, même si on clique sur d’autres fenêtres;
– Kill : va tuer l’application, comme il est déjà possible de le faire avec le Gestionnaire des Tâches de Windows (mais cela évite de l’ouvrir, puis de chercher l’application, etc)
Simple. Efficace. Je l’utilise depuis plusieurs semaines et j’apprécie ces options supplémentaires 🙂
[niveau: expert]
Sur l’excellent blog Ajaxian je viens de découvrir qu’il existe un plugin au module Firebug (dont je parlais justement hier) qui permet de déboguer du PHP en console ! Cette petite merveille se nomme FirePHP et m’a l’air prometteur au vue des images:
Je ne code actuellement pas en PHP, mais je dois bientôt retravailler sur un projet avec ce langage, je pourrai alors vous en dire un peu plus !
A noter qu’il existe d’autres moyens de débugguer, comme PHP Quick Profiler (en).