Tout d’abord, il faut commencer par installer le module php5-xdebug à l’aide de cette commande :

$ sudo apt-get install php5-xdebug

Pour vérifier si le module est chargé, exécuter la ligne de commande suivante :

$ php - m

et vous devez trouver cette valeur à la fin :

.......
[Zend Modules]
Xdebug

Selon la version de votre ubuntu, ajouter les lignes qui n’ont pas les valeurs ci-dessous dans le fichier /etc/php5/conf.d/xdebug.ini :

xdebug.remote_enable=On
xdebug.remote_log=/var/log/xdebug.log
xdebug.remote_handler=dbgp
xdebug.remote_mode=req
xdebug.remote_host=localhost
xdebug.remote_port=9000

Pour connaître les valeurs de vos variables, exécuter la commande suivante :

$ php -i | grep xdebug.remote

xdebug.remote_autostart => Off => Off
xdebug.remote_connect_back => Off => Off
xdebug.remote_cookie_expire_time => 3600 => 3600
xdebug.remote_enable => On => On
xdebug.remote_handler => dbgp => dbgp
xdebug.remote_host => localhost => localhost
xdebug.remote_log => /var/log/xdebug.log => /var/log/xdebug.log
xdebug.remote_mode => req => req
xdebug.remote_port => 9000 => 9000

À chaque modification du fichier xdebug.ini, il faut redémarrer le serveur Apache :

 $ sudo /etc/init.d/apache2 restart

Dernier point, aller faire un tour dans votre fichier php.ini (/etc/php5/apache2/php.ini) et vérifier que les variables suivantes ont les bonnes valeurs :

display_errors=On
html_errors=On
error_reporting=E_ALL

À chaque modification du fichier php.ini, il faut redémarrer le serveur Apache :

 $ sudo /etc/init.d/apache2 restart

Maintenant vous êtes prêts à utiliser xdebug.

Cela faisait un petit bout que je n’avais pas chialer après Internet Explorer, mais voilà que j’ai eu besoin de rentrer dans du vieux code. Quand je parle de vieux code, c’est du code qui n’utilise pas de librairie telle que jQuery (Je suis vendu à cette librairie javascript ) ou on est obligé de tout faire à bras… donc la compatibilité inter-navigateur.

J’ai eu le plaisir de découvrir que la méthode indexOf pour les Array sous Internet Explorer 8 et précédent n’était pas implémenté tandis qu’elle est présente depuis la version 1.5 de Firefox.

Bon pour ceux qui aurait besoin d’une solution pour rendre compatible leur code, voici la solution:

if(!Array.indexOf){
   Array.prototype.indexOf = function(obj){
      for(var i=0; i<this.length; i++){
         if(this[i]==obj){
            return i;
         }
      }
      return -1;
   }
}

Bonne programmation à tous.

L’intégration CSS d’un site pour IE8 et – peut parfois devenir un vrai cauchemar. Il est donc utile de faire appel à des outils nous aidant dans cette tâche, et nous verrons ici une sympathique bibliothèque javascript répondant au nom de IE7.js. En fait, elle est livrée en 3 fichiers, un pour chaque version du navigateur (7, 8 et 9). Chaque fichier met à jour le DOM et le CSS pour qu’il soit le plus possible compatible avec le IE correspondant. Une page est disponible ici décrivant toutes les corrections apportées par le script. On pourra donc écrire opacity:0.5; sans avoir à créer une feuille de style supplémentaire pour  mettre le filtre css microsoft impossible à retenir. Bref plusieurs sélecteurs et propriétés seront maintenant supportés quelque soit la version du navigateur. Il gère même la transparence des images png pour IE6!

Voici l’exemple d’une page avant/après l’ajout du script :
Avant
Après

Le css:

.square {

position: relative;width: 80px;height: 80px;background-color: #9FF;top : 40px;right: 20px;
opacity: 0.5;
}

p:first-child { font-weight: bold; max-width: 400px; }

p:before{ content : ‘«’; }

p:after{ content : ‘»’; }

input[type='submit']{ width: 200px;}

header, section + section { color : #FFF; background: blue; padding : 20px; }

La bibliothèque est disponible en téléchargement sur Google Code:
http://code.google.com/p/ie7-js/

On sait que de nombreuses solutions existent en matière de développement web pour ne pas se limiter aux web safe fonts lorsqu’on veut styler du texte HTML. Une nouvelle a fait son apparition il y a quelques temps déjà : Google Font API.

Comment ça fonctionne ?

On choisit une police parmi celles de la bibliothèque disponible en ligne, qui s’enrichit régulièrement de nouveautés dans différents styles. Pour pouvoir l’utiliser, il faut insérer dans le <header> de son site web le lien vers cette police afin de la rendre disponible en CSS :

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com
/css?family=Tangerine">

On remarque que l’appel se fait via une variable passée dans l’URL. De cette façon, il va être possible d’insérer plusieurs polices en même temps, ou plusieurs versions de la même police. Par exemple :

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com
/css?family=Tangerine|Inconsolata|Droid+Sans">

permet d’insérer les polices Tangerine, Inconsolata et Droid Sans ;

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com
/css?family=Tangerine:bold,bolditalic">

permet de disposer de la police Tangerine en version Bold et Bold Italic. (Attention : la police par défaut, sans ses versions Bold, Italic, etc. ne pourra en effet pas s’afficher avec les effets CSS tels que font-weight. Si on souhaite appliquer des mises en forme, mieux vaut insérer la police voulue avec toutes ses variations)

Lire la suite

Suite à mon article sur l’utilisation du css conditionnel voici une petite mise à jour. Au passage à la version 5.3 de php la fonction split pose problème. Visuellement le plus souvent cela ne changera rien pour vous mais en affichant les notice et erreur de ce monde depuis le fichier de c-css on se rend compte que le css n’est pas chargé correctement.

C’est pourquoi je vous invite à remplacer les 2 fonctions split utilisées (ligne 910 et 943 pour ceux qui ne veulent vraiment pas chercher : vous n’avez plus d’excuse) par la fonction explode.

Et la Ho magie, plus d’erreur : un beau chargement sans erreur et notice comme on les aime chez Quibo !