Encoder son site en UTF-8… entièrement!

31 03 2010

Si j’ai encore passé presque 2 jours à me prendre la tête, cette fois-ci ça n’est pas à cause d’un bug. Non, tout allait très bien jusqu’à ce que je tombe par hasard sur un article parlant d’encoding UTF-8 avec MySQL. Et là, j’y ai découvert le chaînon manquant : l’instruction permettant de spécifier que les communications avec MySQL se font en UTF-8.

Car il ne suffit pas d’encoder sa base en UTF-8 en spécifiant l’interclassement des tables (utf8_general_ci par exemple), il faut aussi préciser que les échanges doivent s’effectuer dans tel encoding en jouant la requête suivante en début de connexion : SET NAMES "utf8"

En effet, j’avais bien remarqué qu’il y avait un souci à ce niveau là, mais j’avais contourné ça à coup de utf8_encode() / utf8_decode() et de html_entities() / html_entity_decode(). Du coup, mon site est devenu un champ de é ou de �, le temps que je reprenne tout y compris une reprise des données stockées en base. C’était laborieux mais je pense que ça valait le coup, maintenant je sais, je crois, que c’est propre!

Voilà 2 sites qui résument tout ce qu’il faut faire pour gérer entièrement un site en UTF-8.

http://j-willette.developpez.com/tutoriels/web/encoder-son-site-en-utf8/

http://electron-libre.fassnet.net/utf8.php

Faire suivre cet article :
  • Facebook
  • Twitter
  • Google Bookmarks
  • Yahoo! Buzz
  • Wikio FR
  • LinkedIn
  • Viadeo
  • del.icio.us
  • Digg
  • MySpace
  • Netvibes
  • Technorati
Commentaires : 1 Commentaire »
Catégories : Technique

IE6 ou l’éternel combat

17 03 2010

L’autre jour, après quelques modifications sur mon site, je fais un petit test avec Internet Explorer 6, pour m’assurer que tout va bien. “Et là, c’est le drame…” Une fois de plus, la mise en page en  a pris un sérieux coup : margin non respectées, positionnements aléatoires, … La page n’est même plus centrée alors que j’avais réglé ces problèmes il y a quelques temps déjà.

Je cherche donc des infos sur le centrage de éléments sous IE6 et tombe sur un article chez Alsacreations : Centrer les éléments ou un site web en CSS. Je n’y apprends pas grand chose de plus que ce que je n’ai déjà fait, jusqu’à un encadré à la fin de l’article :

N’oubliez pas le Doctype !
Attention à ne pas oublier le doctype du document (lire “DTD : comment choisir”), sinon votre page sera en mode Quirks.
Dans ce mode, Internet Explorer se comporte comme les versions antérieures à IE6, c’est à dire qu’il n’interprète pas les dimensions et les marges comme il le faudrait. Dans ce cas précis, il n’appliquerait pas le centrage à l’aide des marges automatiques.

Le mode Quirks?!

En effet, pour m’aider à débugguer un minimum, j’ai installé la DebugBar (une sorte de FireBug pour IE), et j’ai aperçu cette mention : “mode Quirks”. Mon site s’affiche donc sous IE6 comme sous IE5! Comme si ça n’était pas assez minable avec IE6!

Et tout ça serait dû à un problème de Doctype? Ma déclaration est pourtant correcte :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Sauf qu’avant cette déclaration, j’avais ajouté la déclaration XML suivante :

<?xml version="1.0" encoding="UTF-8"?>

Et cela suffisait à faire sauter le DOCTYPE. J’ai supprimé cette ligne peu utile et tout est rentré dans l’ordre dans le monde vicieux d’IE6.

Faire suivre cet article :
  • Facebook
  • Twitter
  • Google Bookmarks
  • Yahoo! Buzz
  • Wikio FR
  • LinkedIn
  • Viadeo
  • del.icio.us
  • Digg
  • MySpace
  • Netvibes
  • Technorati
Commentaires : 3 Commentaires »
Catégories : Erreur de débutant, Technique

Script de mise en prod : gestion des magic quotes chez 1and1

8 03 2010

Il me restait encore un dernier point à aborder concernant mon petit script de mise en prod. Celui-ci est spécifique aux hébergements mutualisés chez 1and1, puisqu’il s’agit de la gestion des magic quotes qui sont activées par défaut chez cet hébergeur. Cette partie du script vise donc à les désactiver.

Vu qu’il s’agit d’un hébergement mutualisé, il n’est pas possible de modifier directement la configuration serveur de Php. Il est possible de faire la modification dans le code des pages Php, mais je préfère  différencier les aspects métiers du code et la configuration. La dernière solution est de faire la modification dans un fichier php.ini.

Contenu du fichier php.ini :
magic_quotes_gpc = Off
magic_quotes_runtime = Off
magic_quotes_sybase = Off

Un fichier?

Oui et non : un fichier php.ini par répertoire contenant des fichiers Php.

Ce qui est un peu lourd et c’est là qu’intervient le script de mise en prod. C’est lui qui va se charger de recopier le fichier php.ini dans tous les répertoires concernés dans l’archive à distribuer. Pour faire cette opération on utilise l’instruction d’itération for. Elle n’est pas par défaut dans Ant, il faut ajouter la librairie ant-contrib (pour ma part, la version 1.0beta3 ne fonctionne pas, j’ai gardé la 0.6). Et il n’y a plus qu’à boucler sur les dossiers en excluant ceux qui n’en n’ont pas besoin comme les répertoires d’images, de css, …
<for param="folder">
 <path>
  <dirset dir="${DIST_DIR}">
   <include name="**" />
   <exclude name="*/css/**" />
   <exclude name="*/images/**" />
   <exclude name="*/js/**" />
  </dirset>
 </path>
 <sequential>
  <copy file="./php.ini" todir="@{folder}" />
 </sequential>
</for>
Plus d’infos sur le comportement des magic quotes chez PhpFrance.

Faire suivre cet article :
  • Facebook
  • Twitter
  • Google Bookmarks
  • Yahoo! Buzz
  • Wikio FR
  • LinkedIn
  • Viadeo
  • del.icio.us
  • Digg
  • MySpace
  • Netvibes
  • Technorati
Commentaires : Pas de Commentaires »
Catégories : Technique

Récupérer un nom de domaine

6 03 2010

Je racontais au lancement de ce blog, mon choix du nom de domaine, comme quoi je n’avais pas eu le choix en ce qui concerne l’extension, car le domaine monproprepatron.com était occupé. J’avais donc choisi monproprepatron.fr.

Par curiosité, j’avais tout de même noté sur mon agenda la date d’expiration de monproprepatron.com qui était début décembre 2009, en me disant “on sait jamais”. Et voilà que le lendemain de la date d’échéance, je vois que le statut est passé de Registered à Renewal hold. Très bien, c’est que le propriétaire laisse le domaine. Ceci dit, pendant cette période de Renewal Hold, l’ancien propriétaire peut racheter le domaine, mais pour un tarif bien plus cher. Du coup, tout les jours, j’ai vérifié si le domaine n’était pas disponible à l’achat. J’ai fini par me lasser un peu, quand finalement un jour vers la mi-janvier : le domaine est passé au statut Redemption period. Ce qui ne changeait rien pour moi. Et c’était reparti pour encore un mois, jusqu’à ce que… le statut passe à Pending Delete… Soupir!

Et finalement une semaine plus tard, alors que je vérifiai le statut de façon routinière, j’ai vu qu’il était Available! Je n’y croyais plus, après 2 mois et demi!!! Il m’a ensuite fallu 2 minutes pour l’acheter. Tout ça pour ça!

D’ailleurs pendant les derniers jours (la période de Pending Delete) j’ai reçu plusieurs fois le même mail en tant que propriétaire d’un domaine similaire. Provenant d’un certain John Timmers de la société InTrust Domains, il pensait que j’étais intéressé (c’était pas faux) par ce domaine qui allait bientôt être disponible et me proposait de passer par eux pour le racheter. J’ai pas trop creusé, mais j’imagine qu’il y avait une bonne commission pour eux dans l’affaire. Et je trouve ça un peu intrusif comme méthode. En tout cas, ça n’a pas été nécessaire!

Faire suivre cet article :
  • Facebook
  • Twitter
  • Google Bookmarks
  • Yahoo! Buzz
  • Wikio FR
  • LinkedIn
  • Viadeo
  • del.icio.us
  • Digg
  • MySpace
  • Netvibes
  • Technorati
Commentaires : 2 Commentaires »
Catégories : Technique

1 jour, 1 bug…

15 02 2010

C’est pas le premier bug que je rencontre et certainement pas le dernier. Mais celui-ci était plutôt mesquin car assez discret mais aux conséquences assez radicales : pas d’indexation dans Google!

Mon site est à présent en ligne depuis vendredi, mais on va dire en version alpha. Pour l’instant je m’assure que tout va bien. Et tout avait l’air de bien aller : le site s’affichait correctement et se comportait comme en local sur ma machine. En voulant passer ma page d’accueil au validateur W3C, je m’aperçois qu’il ne scanne pas ma page, mais une page d’erreur… ? J’essaye aussi de faire un partage de lien sur la fan page Facebook associée au site : il associe une page d’erreur! J’ai l’impression que la lecture de mon site par des robots ne fonctionne pas et je fais le lien avec l’impossibilité d’ajouter dans Google Reader les flux RSS que je génère alors que le XML m’apparaissait comme il fallait. Mais surtout, je me suis rendu compte en utilisant Google Webmaster Tools,  que le robot de Google ne voyait aussi qu’une page d’erreur! En effet, dans Webmaster Tools, il est possible de demander une analyse tel que Googlebot le fait. En utilisant ça, j’ai débuggué petit à petit à coup d’affichage.

Lire la suite »

Faire suivre cet article :
  • Facebook
  • Twitter
  • Google Bookmarks
  • Yahoo! Buzz
  • Wikio FR
  • LinkedIn
  • Viadeo
  • del.icio.us
  • Digg
  • MySpace
  • Netvibes
  • Technorati
Commentaires : 3 Commentaires »
Catégories : Technique

Script de mise en prod : tag de sources dans CVS

11 02 2010

Complément important de mon script de mise en production, le tag des sources dans le repository CVS. CVS est un gestionnaire de sources, qui permet de stocker les différentes versions du code source. Il est donc intéressant de temps en temps, de placer des repères sur toutes ces sources, en particulier, lors d’une mise en prod. Cela permettra de récupérer l’ensemble des sources telles qu’elles étaient lors d’une mise en ligne donnée.

Rien de bien compliqué avec Ant, on va juste ajouter quelques instructions à la target deploy_end, qui rétablit l’accès au site une fois la mise à jour de la base (manuelle…) effectuée.

<tstamp>
  <format property="tag_date" pattern="yyyy-MM-dd" />
</tstamp>
<echo message="Tag des repository CVS : prod_${tag_date}" />
<cvspass cvsroot="${CVSROOT}" password="${CVS_PWD}" passfile="./.cvspass" />
<cvs cvsRoot="${CVSROOT}"
  command="rtag -R prod_${tag_date} ${CVS_MODULE}"
  failonerror="false" quiet="true" reallyquiet="true" />
<cvs cvsRoot="${CVSROOT}"
  command="rtag -R prod_${tag_date} ${CVS_MODULE_ENV}"
  failonerror="false" quiet="true" reallyquiet="true" />

La directive tstamp permet d’obtenir la date courante au format spécifié par l’attribut pattern et la placer dans une propriété tag_date utilisable ensuite, comme ici pour le nom du tag.

La directive cvs exécute la “command” spécifié : rtag -R prod_${tag_date} ${CVS_MODULE}. Ce qui veut dire en français : place le tag prod_2010-02-10 sur le projet nommé par la propriété CVS_MODULE. Il y aura donc autant de commande cvs que de projets à tagguer.

Faire suivre cet article :
  • Facebook
  • Twitter
  • Google Bookmarks
  • Yahoo! Buzz
  • Wikio FR
  • LinkedIn
  • Viadeo
  • del.icio.us
  • Digg
  • MySpace
  • Netvibes
  • Technorati
Commentaires : Pas de Commentaires »
Catégories : Technique

Script de mise en production sur serveur mutualisé

2 02 2010

Mon projet étant bientôt prêt, j’ai préparé la semaine dernière un script de mise en production du site, afin d’automatiser au maximum cette procédure pour la rendre plus simple, mais aussi plus sûre. N’ayant qu’un hébergement mutualisé chez 1and1, je ne dispose pas de connexion SSH, ce qui limite un peu les actions disponibles.

J’ai choisi de faire ce script avec Ant, tout simplement parce que je le connais pour l’avoir utilisé dans mes jobs précédents et qu’il me convient parfaitement. Il s’intègre de plus très bien dans Eclipse, que j’utilise pour développer, à condition d’avoir installé le plugin adéquat, soit l’environnement JDT (Java Development Tools), si on a choisi comme moi, une installation Eclipse PDT (Php Development Tools) qui n’inclue pas d’utilitaires pour Java. Car Ant tourne à l’aide de Java.

Que fait ce script?

Avec ce script, j’ai voulu automatiser 3 opérations : la sauvegarde, la construction du projet à déployer et le déploiement.

Lire la suite »

Faire suivre cet article :
  • Facebook
  • Twitter
  • Google Bookmarks
  • Yahoo! Buzz
  • Wikio FR
  • LinkedIn
  • Viadeo
  • del.icio.us
  • Digg
  • MySpace
  • Netvibes
  • Technorati
Commentaires : 2 Commentaires »
Catégories : Technique

CSS : bien utiliser la propriété display

13 01 2010

Ce matin, en refaisant un menu fait à base de listes (ul et li), j’ai eu besoin d’utiliser la propriété CSS display. Et plus particulièrement, je voulais lui affecter la valeur inline-block.

Ayant un doute quant à la compatibilité de cette valeur sur tous les navigateurs (i.e. IE (c marrant ça)), je suis tombé sur le site suivant qui présente très bien les différentes valeurs de display, par des exemples, et indique également la prise en charge par les différents navigateurs. Du coup, j’ai conservé la valeur block : moins pratique, mais qui marchera partout!

Le site à voir : www.quirksmode.org/css/display.html

Faire suivre cet article :
  • Facebook
  • Twitter
  • Google Bookmarks
  • Yahoo! Buzz
  • Wikio FR
  • LinkedIn
  • Viadeo
  • del.icio.us
  • Digg
  • MySpace
  • Netvibes
  • Technorati
Commentaires : Pas de Commentaires »
Catégories : IHM

Une cuillère de Google Maps + une pincée de jQuery

14 09 2009

Ma problématique de ce WE était d’offrir le moyen aux utilisateurs d’associer des informations à des évènements. Ces informations peuvent être du texte ou une carte Google Maps. La saisie de texte, c’est basique : <textarea></textarea>. Mais pour une carte Google Maps, c’est un peu plus subtil.

Je ne peux pas proposer de saisir les coordonnées à la main. Non, il faut que les utilisateurs déplacent eux-mêmes la Google Map et qu’ensuite je récupère les paramètres de cette carte, qui sont dans mon cas la latitude et la longitude du centre de la carte et le niveau de zoom, pour les sauvegarder. Et avec l’API Google Maps, c’est finalement assez simple.

La map se place dans un div, suivi dans champ input hidden, qui contient les paramètres :

<div class="map" id="map_'.$i.'"></div>
<input id="content-'.$i.'" name="content-'.$i.'" type="hidden" value="" />

Puis, j’initialise chaque map de la page par la méthode suivante :

function newMap(rowId, lat, lng, zoom) {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_"+rowId));
map.setCenter(new GLatLng(lat, lng), zoom);
// Ajout des contrôles ou autres paramètres
GEvent.addListener(map, "moveend", function() {
$("#content-"+rowId).val(map.getCenter().lat()+"|"+map.getCenter().lng()+"|"+map.getZoom());
});
}
}

Le listener associé à la map se déclenche en fin de déplacement (‘moveend‘), et récupère alors les paramètres (map.getCenter().lat()) pour les placer dans le champ hidden associé ($(‘#content-’+rowId).val(…)).

Avec un poil de jQuery (qui me séduit de plus en plus), c’est vraiment simple de faire des choses sympas. La preuve.

Faire suivre cet article :
  • Facebook
  • Twitter
  • Google Bookmarks
  • Yahoo! Buzz
  • Wikio FR
  • LinkedIn
  • Viadeo
  • del.icio.us
  • Digg
  • MySpace
  • Netvibes
  • Technorati
Commentaires : Pas de Commentaires »
Catégories : Technique, Technologies

Besoin d’un éditeur de texte riche

7 09 2009

Dans le cadre de mon projet, j’ai besoin de permettre aux “usagers” (je fais comme à la SNCF, en fait j’espère que ce seront de bons clients qui paient cher!) d’éditer eux-mêmes du texte. Mais comme je veux ce qu’il y’a de mieux pour mes cli… utilisateurs, il faut qu’ils puissent faire un peu de mise en forme sur ces textes et -surtout- qu’ils puissent intégrer facilement des images. Et quand je parle d’images, j’entends des fichiers stockés sur leur disque dur. Et de mon côté j’ai besoin de récupérer ce texte en HTML pour pouvoir le réafficher par la suite.

Il me faut donc un composant de formulaire plus évolué qu’un basique élément textarea, soit un éditeur de texte riche. Après une recherche sur Google de scripts implémentant ce besoin, j’ai éliminé les composants moches, ceux n’étant plus mis à jour depuis trop longtemps et ceux qui ne géraient pas l’upload d’image mais seulement un lien vers une image déjà présent sur le réseau et j’ai retenu une liste de 4 composants :

Lire la suite »

Faire suivre cet article :
  • Facebook
  • Twitter
  • Google Bookmarks
  • Yahoo! Buzz
  • Wikio FR
  • LinkedIn
  • Viadeo
  • del.icio.us
  • Digg
  • MySpace
  • Netvibes
  • Technorati
Commentaires : Pas de Commentaires »
Catégories : IHM, Technologies

« Entrées Précédentes