Pour résumer la fonction à utiliser est :

function bindReady(handler){
  var called = false
  function ready() {
    if (called) return
    called = true
    handler()
  }
  if ( document.addEventListener ) { // native event
    document.addEventListener( "DOMContentLoaded", ready, false )
  } else if ( document.attachEvent ) {  // IE
    try { var isFrame = window.frameElement != null } catch(e) {}

    // IE, the document is not inside a frame
    if ( document.documentElement.doScroll && !isFrame ) {
      function tryScroll(){
        if (called) return
        try {
          document.documentElement.doScroll("left")
          ready()
        } catch(e) {
          setTimeout(tryScroll, 10)
        }
      }
      tryScroll()
    }

    // IE, the document is inside a frame
    document.attachEvent("onreadystatechange", function(){
      if ( document.readyState === "complete" ) {
        ready()
      }
    })
  }

  // Old browsers
  if (window.addEventListener)
    window.addEventListener('load', ready, false)
  else if (window.attachEvent)
    window.attachEvent('onload', ready)
  else {
    var fn = window.onload // very old browser, copy old onload
    window.onload = function() { // replace by new onload and call the old one
      fn && fn()
      ready()
    }
  }
}

A partir de là vous pouvez appeler votre fonction avec :

bindReady(function() {
  /* quelque chose qui doit se lancer après le chargement du DOM */
});

Dans le cas où vous voudriez appeler plusieurs fonctions, alors vous pouvez simplement faire quelque chose comme :

var fonctionsACharger=[];
bindReady(function() {
  for (var i=0; i<functionsACharger.length;i++) functionsACharger[i]();
});

/* on ajoute les fonctions à charger dans notre tableau */
fonctionsACharger.push(function() {
  /* première chose à faire */
});
fonctionsACharger.push(function() {
  alert("Toutes les fonctions sont maintenant chargées !");
});

<script type="text/javascript" src='<asp:Literal runat="server" Text="<% $SPUrl:~Site/customized.js %>"></asp:Literal>'>

C’est donc <asp:Literal runat="server" Text="<% $SPUrl:~Site/customized.js %>"></asp:Literal> qui fait tout le boulot. Et bien sûr vous pouvez utiliser asp:Literal pour d’autres appels de fichiers !

For your information, the image should 216px × 160px

« The security validation for this page is invalid. Click Back in your Web browser, refresh the page, and try your operation again. »

Si Sharepoint vous donne ce joli message d’erreur lorsque vous communiquez avec un de ses web services, alors il est possible que vous ayez oublié d’ajouter un header « SOAPAction » avec le nom du service associé.

Prenons l’exemple du web service lists.asmx et de l’action « UpdateListItems ». Si vous allez sur l’URL suivante http://votre_sharepoint/_vti_bin/lists.asmx?op=UpdateListItems vous verrez la SOAPAction qu’il faut définir (cliquez pour agrandir) :

Dans l’exemple ci-dessus il faut donc définir l’header « SOAPAction » avec la valeur « http://schemas.microsoft.com/sharepoint/soap/UpdateListItems ».
Si vous utilisez l’AJAX de jQuery cela donnera quelque chose comme ça :

jQuery.ajax({
        url: "http://your_sharepoint/_vti_bin/lists.asmx",
        type: "POST",
        dataType: "xml",
        data: soapEnv,
        beforeSend: function(xhr) { xhr.setRequestHeader('SOAPAction', 'http://schemas.microsoft.com/sharepoint/soap/UpdateListItems'); },
        contentType: "text/xml; charset=\"utf-8\""
    });

Si vous utilisez l’add-on Firefox Poster, alors utilisez l’onglet « Headers ».

Voici une fonction (qui mériterait quelques optimisations) qui va vous permettre de trouver tous les styles appliqués à un élément :

function getStyle(e) {
    var arr=(typeof window.getComputedStyle == "function" ? window.getComputedStyle(e) : e.currentStyle ); // IE will use the "currentStyle"
    var res=[];
    $.each(arr, function(k,v) { // ici j'utilise le "each" de jQuery simplement parce que c'est plus pratique/simple que le for-in
      if (typeof window.getComputedStyle == "undefined") {
        var kNoCamel=k.replace(/([A-Z])/g, "-$1").toLowerCase(); // sous IE on a des noms de propriétés au format camelCase
        k=v;
        v=kNoCamel;
      }
      if (v.charAt(0) != "-") {
        var vSlice = v.slice(0,7);
        // ici on va chercher à conserver que quelques propriétés CSS bien particulières
        var ok = (vSlice=="border-"||vSlice=="margin-"||vSlice=="padding");
        switch(v) {
          case "background-color":
          case "color":
          case "font-style":
          case "font-weight":
          case "font-size":
          case "font-family":
          case "width":
          case "height":
          case "vertical-align":
          case "text-align":
          case "text-decoration": ok=true;
        }
        if (ok) {
          if (typeof window.getComputedStyle == "function") {
            var vCamel=(v.search("-") != -1 ? v.replace(/(-)(.)/g,function(c) { return c[1].toUpperCase();}) : v); // pour trouver les valeurs associés aux propriétés on se change en camelCase
            res.push(v+":"+arr[vCamel]);
          } else {
            res.push(v+":"+k);
          }
      }
    }
  });
  return res.join(";");
};

alert(getStyle(document.getElementById('test')));
/* qui retournera par exemple:
background-color:transparent;border-bottom-color:rgb(128, 128, 128);
border-bottom-left-radius:0px;border-bottom-right-radius:0px;
border-bottom-style:none;border-bottom-width:0px;border-collapse:collapse;
border-left-color:rgb(128, 128, 128);border-left-style:none;
border-left-width:1px;border-right-color:rgb(128, 128, 128);
border-right-style:none;border-right-width:0px;border-spacing:2px 2px;
border-top-color:rgb(128, 128, 128);border-top-left-radius:0px;
border-top-right-radius:0px;border-top-style:none;border-top-width:1px;
color:rgb(0, 0, 0);font-family:verdana;font-size:16px;font-style:normal;
font-weight:400;height:3738px;margin-bottom:0px;margin-left:0px;margin-right:0px;
margin-top:0px;padding-bottom:0px;padding-left:0px;padding-right:0px;
padding-top:0px;text-align:start;text-decoration:none;vertical-align:baseline;width:1756px
*/

Edit: J’ai découvert qu’il existe un plugin pour jQuery qui fait un peu près la même chose (sauf qu’il retourne TOUTES les propriétés et qu’il est bien plus lent à l’exécution) : http://upshots.org/javascript/jquery-copy-style-copycss

Il a été démontré que le stockage de mot de passe n’est pas chose aisée, et que l’utilisation d’une méthode de hashage (MD5, SHA-1, etc) n’est pas parfaite, même avec l’utilisation d’un salt. D’après cette constatation plusieurs articles indiquent que la meilleure méthode reste l’utilisation de bcrypt, comme on peut le lire dans How to safely store a password.

L’utilisation de bcrypt est assez simple :
1) Télécharger phpass (fichier .tgz qui contient un fichier PasswordHash.php);
2) Appeler PasswordHash.php dans votre page :

<?php require('includes/PasswordHash.php'); ?>

3) Maintenant vous pouvez utiliser l’objet PasswordHash comme cela :

<?php
$password = $_POST["password"];
$hasher = new PasswordHash(8, FALSE);
$hash = $hasher->HashPassword($password);
?>

Et pour vérifier un mot de passe, vous devez utiliser ce petit bout de code :

<?php // vérification du mot de passe
$password = $_POST["password"];
$password_correct = "password qui vient de la base de données"; /* Le hash stocké précédemment */
$hasher = new PasswordHash(8, FALSE);
$check = $hasher->CheckPassword($password, $password_correct);

if ($check) {
 echo "Password correct!";
}
else {
 echo "Password incorrect...";
}
?>

A noter que si vous souhaitez le rendre compatible avec d’autres systèmes équivalents (comme BCrypt pour Java par exemple), alors il faudra vous assurer que votre machine a bien CRYPT_BLOWFISH d’installé (on peut le voir avec <?php echo CRYPT_BLOWFISH; ?>) afin d’avoir une bonne compatibilité des deux systèmes.

Il est possible d’effectuer une action sur la page avant que l’utilisateur ne quitte la page (en la fermant, la rechargeant, en navigant dans l’historique, ou en cliquant sur un lien). Pour cela utilisez la méthode ci-dessous (via MDN) :

window.onbeforeunload = function (e) {
  e = e || window.event;
  // For IE and Firefox prior to version 4
  if (e) e.returnValue = 'Any string';

  // For Safari
  return 'Any string';
};

Si vous ne voulez pas ce comportement pour un clic sur un lien, alors il faudra gérer une variable qui sera activée lors d’un clic sur un tag A (exemple avec jQuery) :

__okForClosing = false;
window.onbeforeunload = function (e) {
  if (!__okForClosing) {
    e = e || window.event;
    // For IE and Firefox prior to version 4
    if (e) e.returnValue = 'Any string';

    // For Safari
    return 'Any string';
  }
};
$('a').click(function() { __okForClosing=true; });

Si vous souhaitez créer un effet highlight sur un élément (en passant le background en jaune par exemple), voici comment il faut s’y prendre :

jQuery.prototype.highlight = function() {
  jQuery(this).css("background-color","yellow").fadeTo('slow', 0.1, function() {
    jQuery(this).fadeTo('slow', 1.0, function() {
      jQuery(this).css("background-color","white");
    });
  });
};

jQuery('#mon-element').highlight();

J’ai constaté que l’utilisation de la commande apt-get étant devenue lente, dû au fait qu’il essaie de se connecter en ipv6 au lieu d’ipv4.

Pour modifier ce comportement, et forcer votre Linux à résoudre en ipv4 de manière générale, il suffit de modifier le fichier /etc/gai.conf en enlevant le commentaire sur la ligne :
precedence ::ffff:0:0/96 100

(Cet article suppose que vous ayez des connaissances de base, comme comment lancer un exécutif en ligne de commande, dans le cas contraire vous pouvez vous référez à cet article qui propose deux autres solutions pour Windows)

Pour cela vous aurez besoin de mencoder (qui se trouve dans le répertoire de MPlayer disponible pour Windows, Linux et Mac à http://www.mplayerhq.hu/MPlayer/releases/). Vous devez ensuite lancer une console et taper la commande :
mencoder -ss 00:10:00 mon_fichier.avi -o mon_fichier_split.avi -oac copy -ovc copy
Pour couper les dix premières minutes de votre vidéo.

Si vous souhaitez couper la fin de la vidéo, il faudra faire :
mencoder -endpos 00:02:00 mon_fichier.avi -o mon_fichier_split.avi -oac copy -ovc copy
Pour couper les deux dernières minutes de votre vidéo.

Le format est sous la forme hh:mm:ss.

Difficile de trouver un titre correspondant à la problématique.
Il se trouve que lorsque vous tapez la commande suivante dans un shell, vous obtenez le résultat ci-dessous:

Comme on peut le constater, « test deux.txt » ayant un espace dans son nom, il est affiché sur deux lignes dans notre résultat au lieu d’une seule ligne.

Pour fixer ce problème, il suffit de modifier la variable IFS qui détermine le séparateur, puisque par défaut le séparateur va être un espace.
Pour se faire nous devons mettre notre commande dans un script :

Le résultat de l’exécution de notre script :

Plus d’informations sur http://tldp.org/LDP/abs/html/internalvariables.html#IFS

Il est possible d’incruster des sous-titres dans une vidéo grâce à VirtualDub et au filtre Subtitler, mais ici nous allons voir une autre solution en utilisant mencoder qui va permettre de faire la manipulation de façon automatique, plus rapidement (environ 20 minutes pour une vidéo d’une heure) et plus facilement.

J’ai pu réussir à obtenir ce que je vais vous expliquer grâce au tutorial du site Hyjoo.com où vous trouverez plus de détails (en particulier sur les options possibles). On notera que les fichiers indiqués dans ce tutorial sont plus aisés à trouver en se rendant à http://www.mplayerhq.hu/MPlayer/releases/.

Ayant eu de nombreuses difficultés à obtenir ce que je souhaitais, j’ai décidé de le partager sur mon blog que cela puisse servir à d’autres !

A l’origine de ma recherche concernant l’incrustation de sous-titres, c’est parce que j’utilise Orb pour me permettre de lire les vidéos de mon ordinateur sur d’autres ordinateurs via Internet. Malheureusement Orb ne supporte pas les fichiers de sous-titres lors de la lecture d’une vidéo; de fait aucune phrase n’apparait lors de la diffusion du film via Orb.

Pour vous permettre l’incrustation, rien de plus facile :
1) Téléchargez ce fichier ZIP (28Mo) qui contient déjà les bons programmes, c’est-à-dire MPlayer-1.0rc2 (récupéré sur le site officiel), ainsi que les codecs windows-all-20071007 (récupérés aussi sur le site officiel);
2) Dézippez le fichier et vous allez trouver un répertoire qui se nomme "to_convert";
3) Placez vos fichiers .avi ainsi que vos fichiers de sous-titres .srt (qui doivent avoir le même nom — par exemple film.avi et film.srt) dans ce répertoire "to_convert";
4) Cliquez sur le fichier "start.bat" qui va lancer l’incrustation automatiquement sur tous les fichiers;
5) Une fois terminé, les vidéos incrustées sont disponibles dans le répertoire "to_convert" avec le mot "_subbed" ajouté au nom d’origine.

On notera qu’un certain nombre d’options peuvent être ajoutées/modifiées :
- taille des sous-titres;
- position des sous-titres;
- encodage de la vidéo;
- dimension de la vidéo;
- etc.
Les options de base sont détaillées dans le tutorial de Hyjoo.com, et les options complètes sont sur le site officiel.
On notera qu’il ne semble pas possible (pour le moment en tout cas) de modifier la couleur des sous-titres malgré les options -ass et -ass-font-color.

Pour tester la version mobile d’Internet Explorer il vous faut installer tout un attirail :
- Virtual PC 2007;
- Gestionnaire pour appareils Windows Mobile 6.1;
- 040C/Windows Mobile 6 Professional Images (FRA).msi (attention de bien prendre la version PROFESSIONAL).

Une fois tout cela installé, il faut procéder à plusieurs étapes :

1. Dans le menu Démarrer, choisissez Windows Mobile 6 SDK, puis Standalone Emulator Images, French et Professional; une fois lancé, cliquez sur File, Configure… puis Network et cochez la case « Enable NE2000 PCMCIA » et prenez votre connexion dans la liste déroulante.
2. Lancez maintenant Device Emulator Manager depuis le menu Démarrer de Windows; une fois lancé, dans l’arborescence, cliquez droit sur ce qui correspond à l’émulateur et prenez l’option « Cradle ».
3. Maintenant lancez le Gestionnaire pour appareil Windows Mobile depuis le menu Démarrer
4. Le gestionnaire devrait détecter votre émulateur et l’ajouter; de là vous pourrez configurer la connexion réseau en suivant cette image :
   
5. Maintenant vous devriez pouvoir lancer Internet Explorer sur votre émulateur et vous devriez avoir accès à Internet !

Il est possible de reproduire la fonction escape() de Javascript pour le langage Java. Cela permet par exemple de transformer « François » en « Fran%E7ois » ou encore « Maël » en « Ma%EBl ».

public String myEncodeURI(String str) {
  StringBuffer ostr = new StringBuffer();
    for(int i=0; i<str.length(); i++) {
      char ch = str.charAt(i);
      if ((ch >= 0x0020) && (ch <= 0x007e))
        ostr.append(ch); // Pas besoin de convertir
      else {
        // conversion en HEX
        String hex = Integer.toHexString(str.charAt(i) & 0xFFFF);
        ostr.append("%"+hex.toUpperCase());
      }
    }
    return (new String(ostr));
}

Si vous avez l’antivirus AntiVir, vous avez remarqué qu’une fenêtre publicitaire apparaît régulièrement. Voilà un effet bien gênant et désagréable. Pour éviter ce phénomène, voici la manipulation à faire (testée sur Windows Seven Ultimate et ça fonctionne) :
1) Dans le menu Démarrer, exécuter la commande « secpol.msc »
2) « Stratégie de restriction logicielle »
3) « Règles Supplémentaires »
4) Clic droit dans la partie de droite, puis « Nouvelle règle de chemin d’accès »
5) Parcourir jusqu’au fichier nommé « avnotify.exe » (dans C:\Program Files\Avira\AntiVir Desktop)
6) Niveau de Sécurité en « Non autorisé »

Et voilà !

Si vous n’avez pas « secpol.msc », voici une autre astuce :
1) Trouvez le fichier « avnotify.exe » (dans C:\Program Files\Avira\AntiVir Desktop)
2) Clic droit puis « Propriétés »
3) Dans l’onglet « Sécurité », sélectionnez « System » pour l’utilisateur puis « Modifier »
4) Cliquez dans la colonne « Refuser » sur « Lire et Exécuter »
5) Faites « OK »

Je ne l’ai pas testé mais plusieurs sites proposent cette solution.

Si vous utilisez une Debian ainsi que PHP, vous voulez certainement pouvoir envoyer des emails grâce à la fonction mail() qu’offre le langage. Pour cela, on va utiliser exim4 qui est en général déjà installé sur votre Debian toute fraiche (normalement vous avez également /usr/sbin/sendmail qui redirige sur /usr/sbin/exim4). Si vous n’avez pas exim d’installé, je vous invite à aller lire ce billet de Paperblog.

Par défaut exim4 est configuré pour n’envoyer les emails qu’aux utilisateurs locaux. Pour modifier ce comportement, vous devez modifier le fichier /etc/exim4/update-exim4.conf.conf en mettant :

Redémarrer exim4 et vous devriez maintenant pouvoir envoyer des emails au monde entier. Attention cependant de bien bloquer le port 25 de votre machine au monde extérieur (mais pas en local) afin d’éviter que quiconque puisse utiliser votre serveur SMTP.

Il est possible de connaître la version d’Internet Explorer en Javascript en utilisant le User Agent. Cependant, IE8, lorsqu’il est en mode compatibilité, va retourner IE7 quand on l’interroge. Cela peut poser problème. Il existe une solution qui permet de détecter IE8 même dans ce mode spécial, et sans utiliser les commentaires conditionnels :

// retourne un entier (5, 6, 7 ou 8), ou false si ce n'est pas IE
function getIEVersion() {
  if (!!(window.attachEvent && navigator.userAgent.indexOf('Opera') === -1)) {
    var ver = navigator.userAgent.match(/MSIE ([0-9.]+);/);
    if (ver != null && ver[1] != undefined) {
      ver = parseInt(ver[1]);
      if (ver == 7) {
        if (typeof (window.external.AddToFavoritesBar) != "undefined" ||
            typeof (window.external.AddService) != "undefined" ||
            typeof (window.external.AddService) != "undefined") return 8;
      }
      return ver;
    }
  }
  return false;
}

Dans certains cas on aimerait pouvoir rediriger les personnes en provenance d’un certain site vers une page en particulier. Par exemple, vous voulez que les personnes venant de Facebook soient redirigées vers une page dédiée, vous devez inscrire cela dans votre fichier .htaccess :

RewriteEngine On
RewriteCond %{http_referer} ^http://([^.]+\.)*(facebook)\.com
RewriteRule ^$ /facebook.php [R=302,L]

A noter que le mod_rewrite d’Apache aura dû être installé.

Lorsqu’on crée des CSS, il arrive qu’on s’y perde un peu entre les px bien pratiques, et les em tout aussi pratiques mais bien moins parlant….

Le site http://pxtoem.com/ propose de convertir des pixels en em.

Après avoir essayé différentes solutions (comme gExodus, MailRedirect et Google Mail Loader), c’est finalement toGMail qui s’est imposé comme le meilleur outil pour migrer mes emails depuis Thunderbird vers mon compte GMail.

Le très léger programme va utiliser les fonctions IMAP de GMail pour y déposer les messages tels qu’ils sont à l’origine, avec les en-têtes intactes. Le procédé est rapide et efficace, et on peut même indiquer un libellé pour les messages importés.

Si vous utilisez Outlook, il vous faudra d’abord convertir vos boîtes mail au format de Thunderbird.

Attention: Thunderbird conserve les emails effacés dans vos mailbox (qui se trouvent dans le profil utilisateur/AppData/Roaming/Thunderbird/Profiles/…) — vous devrez donc, dans Thunderbird, faire un clic droit sur les mailbox que vous souhaitez importer, puis sélectionner « Compacter ». Dès lors Thunderbird va enlever tous les emails qui ne devraient plus s’y trouver !

Firefox souligne les mots incorrectement orthographiés en rouge. Un clic droit sur le mot permet de choisir une des propositions, et une option « Ajouter au dictionnaire » offre la possibilité de faire en sorte que Firefox se souvienne du mot. Vous aimeriez accéder à cette liste ? Pour cela, il suffit d’ouvrir le fichier persdict.dat que vous trouverez ici :

Dans ce fichier vous verrez tous les mots ajoutés dans le dictionnaire intégré de Firefox.

(Source: http://labnol.blogspot.com/2006/11/firefox-2-spelling-dictionary-hacks.html)

Linux est un système d’exploitation qui était réservé au geek, mais depuis plusieurs années les distributeurs font en sorte que cet OS soit plus facile à installer et à utiliser. Linux apparaît d’ailleurs de plus en plus comme une alternative à Windows.

Il y a donc plusieurs raisons qui pourraient vous pousser à installer Linux:
- tester pour voir à quoi ça ressemble
- regarder les applications disponibles
- comprendre comment il est configurable
- tester les navigateurs pour vos sites web

Pour entrer dans le monde merveilleux du Pingouin (qui en est la mascotte), vous avez principalement trois solutions:

1. l’installation pure et dure du système en parallèle de Windows, c’est-à-dire que vous choisissez l’un ou l’autre au démarrage de la machine
2. l’utilisation d’un LiveCD qui offre la possibilité de démarrer sur un CD (ou une clé USB) qui contient Linux et ainsi de le tester sans rien installer sur l’ordinateur
3. virtualiser Linux (à l’instar de ce que je vous ai montré l’autre fois pour tester les IE)

Je vais ici vous expliquer le dernier cas. En effet, je connais déjà bien Linux, et l’intérêt majeur pour moi de l’installer est de pouvoir tester Firefox, Epiphany, et autres navigateurs afin de m’assurer du design d’un site web.

Virtualiser Linux dans Windows est simple. Si la dernière fois nous avons utilisé VirtualPC c’est parce que Microsoft fournissait des images déjà prêtes pour leur logiciel. Mais cette fois-ci, nous allons plutôt utiliser VirtualBox. Pourquoi ? Parce que si vous installez Linux (et ici ce sera Ubuntu) dans VirtualPC, alors vous allez avoir une résolution d’écran de 800×600, ce qui n’est pas franchement pratique. Les démarches pour passer en une résolution supérieure sont compliquées et risquées, alors qu’avec VirtualBox il suffit de quelques commandes !

La première chose à faire est donc de télécharger VirtualBox (j’utilise dans cet exemple la version « VirtualBox 2.2.2 for Windows hosts »). Ensuite, il vous faut télécharger une distribution Linux. Il en existe des centaines de versions… Plusieurs sites essaient de vous guider, comme Comment ça marche. Pour notre cas pratique nous prendrons Ubuntu qui est l’une des plus utilisées.
Il vous faut récupérer l’image ISO d’Ubuntu (à l’heure où j’écris ces lignes le fichier est ftp://ftp.crihan.fr/releases/9.04/ubuntu-9.04-desktop-i386.iso).

Une fois téléchargé, ouvrez VirtualBox (que vous aurez déjà installé). Cliquez sur « Nouveau » :

Pour le nom inscrivez « Ubuntu », et pour système d’exploitation prenez « Linux » et la version « Ubuntu » :

Continuez avec les options par défaut.

Une fois fini vous devriez avoir cela :

Maintenant cliquez sur « Lancer » afin d’activer l’assistant de premier lancement. Celui-ci vous demande ce que vous voulez installer. Choisissez « Disque Optique » et « Fichier Image » en sélectionnant le fichier iso que vous avez téléchargé précédemment (« ubuntu-9.04-desktop-i386.iso ») ;

L’écran d’installation d’Ubuntu va démarrer. Vous n’avez plus qu’à choisir « Français » (avec les flèches) puis de prendre « Installer Ubuntu » :

Laissez les options par défaut proposées. Après plusieurs clics et quelques minutes vous vous retrouvez sous Ubuntu ! Malheureusement vous remarquez que vous êtes en résolution 800×600… Voilà un problème de résolution d’écran qui est simple à régler.

Tout d’abord, vérifiez que vous n’avez aucune image CD chargée. Pour cela, votre bureau Ubuntu doit être vide de toute icône. Si vous voyez une icône en forme de CD avec un nom qui commence par Ubuntu, alors faites un clic droit dessus puis « Ejecter ». Une fois fait, sortez de la machine virtuelle (en appuyant sur la touche « Ctrl » de votre clavier, mais celle qui se trouve à droite), puis aller dans Périphériques > Installer les Additions invité… :

Devrait alors apparaitre une icône avec un CD sur le bureau :

(si ce n’est pas le cas, allez dans Machine > Redémarrage pour redémarrer la machine virtuelle)

Maintenant, dans Ubuntu, allez dans Applications > Accessoires > Terminal. Une fenêtre au fond blanc s’ouvre. Vous allez y taper les commandes suivants :
sudo su
/* entrez votre password défini durant l'installation */
cd /media/cdrom0
./VBoxLinuxAdditions-x86.run
Après quoi le système vous indique qu’il doit redémarrer. Ce qui doit donner :

Pour redémarrer, allez dans Machine > Redémarrage. Une fois le boot terminé, vous verrez Ubuntu avec une résolution d’écran équivalente à la vôtre !

Vous n’avez plus qu’à lancer Firefox pour découvrir le rendu de votre site, et vous pouvez installer d’autres navigateurs pour les tester.

Si vous n’êtes pas un webdesigner professionnel, vous vous demandez sans doute quelles polices de caractères sont utilisables sur le Web. Peut-on utiliser une fonte personnalisée? Quelles sont les principales familles de fontes génériques?

C’est ainsi qu’est introduit le billet d’Alsacreation qui vous explique parfaitement les polices disponibles pour la plupart des navigateurs.

Dans cet excellent billet, l’auteur nous propose plusieurs polices de caractères:

/* Polices à empattements (serif) */
font-family: Times, "Times New Roman", "Liberation Serif", FreeSerif, serif;
font-family: Georgia, "DejaVu Serif", Norasi, serif;

/* Polices sans empattements (sans-serif) */
font-family: Arial, Helvetica, "Liberation Sans", FreeSans, sans-serif;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-family: "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", "Luxi Sans", sans-serif;
font-family: Tahoma, Geneva, Kalimati, sans-serif;
font-family: Verdana, "DejaVu Sans", "Bitstream Vera Sans", Geneva, sans-serif;
font-family: Impact, "Arial Black", sans-serif;

/* Polices à chasse fixe (monospace) */
font-family: Courier, "Courier New", FreeMono, "Liberation Mono", monospace;
font-family: Monaco, "DejaVu Sans Mono", "Lucida Console", "Andale Mono", monospace;

Enfin vous pouvez retrouver un tableau très bien fait chez Dustin sur « Web safe and common fonts ».

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…

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.

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