Christophe Le Bot

  • Navigation rapide
Pratique de la conception numérique

Derniers commentaires

  • Test d’interface : paiement d’amendes en ligne
    • Rovellotti Olivier | Ce site est un véritable cauchemar UX Excellent article http://www.natural-solutions.e u/
    • Julien | Pour info, mon e-numero etait sur le cote gauche, ecrit verticalement, sans aucun label.
  • Agence web ou SSII : que choisir ?
    • Rovellotti Olivier | La limite n’est plus aussi claire qu’avant effectivement et les différence de prix sont du l’ordre du *10. Généralement les équipes dans les agences sont plus...
  • Une excellente thèse sur Simile Exhibit
    • Olivier Rossel | Bonjour. Malgre les annees, avez vous toujours en memoire vos usages d’Exhibit? Je serais ravi d’en discuter avec vous. Cordialement, Olivier Rossel.
  • Utiliser le planificateur de tâches OVH (crontab) avec PHP
    • Max | Bonjour, comme faire pour appeler une version de PHP qui n’est plus proposée par défaut dans le manager ? J’essaie de lancer un cron avec php 5.3 mais le log affiche No such file...
 

Archives de la catégorie
Développement web

Soirée spéciale “PHP pour l’entreprise” le 14 mai 2007 à Paris

L’Association française des utilisateurs de PHP (AFUP) organise le 14 mai 2007 une soirée spéciale PHP pour l’entreprise. Andi Gutmans (co-architecte de PHP et co-fondateur de Zend) sera présent pour faire le point sur les évolutions d’un des langages les plus utilisés dans les applications web. Ce sera surtout l’occasion de montrer les atouts du Zend Framework dont la version 1.0 est attendue en septembre 2007.

La soirée est gratuite, mais l’inscription obligatoire.

» Voir le communiqué de presse

Javascript et ActionScript : le piège de parseInt()

Comme tous développeurs pressés, nous utilisons très souvent des fonctions de façon empirique, sans en comprendre le fonctionnement réel et les subtilités de paramétrage. Et parfois, on le paye cher en mal de crâne, suite à des comportements incompréhensibles… et pourtant normaux.

Prenons la fonction Javascript parseInt(). Elle permet de transformer une chaîne en nombre entier. Si on veut récupérer le département d’un code postal, le premier réflexe est de faire :

var departement = parseInt(codepostal.substring(0, 2));

En apparence tout fonctionne bien… sauf pour les départements 08 et 09 pour lesquels on obtient 0 ! Diable…

C’est oublier un peu vite le second paramètre radix qui définit la base numérique à utiliser. Il est vital car en son absence, la base numérique dépend du format de la chaîne. Dans notre cas, les codes postaux commençant par 0 sont convertis en entiers de base octale (ou base 8). Notre but est d’obtenir un entier en base décimale (ou base 10), on précise donc la valeur 10 au second paramètre de la fonction parseInt() :

var departement = parseInt(codepostal.substring(0, 2), 10);

Ouf ! Pour information, radix supporte les valeurs 0 (valeur par défaut, sélection d’une base hexadécimale, octale ou décimale selon le format de la chaîne) et de 2 à 36. Par exemple, si on souhaite un entier hexadécimal, radix sera égal à 16.

On ne m’y reprendra plus !

Behaviour, ou comment piloter Javascript par les sélecteurs CSS

En attendant que s’impose un langage web qui réconcilie les développeurs, les marketeurs et les visiteurs (à mon avis, on en est très loin…), on est bien obligé de faire avec le HTML. Donc d’accepter un joyeux mélange dans le code d’une page web : contenu textuel et visuel, méta-données, informations de mise en page et de styles, appels à des comportements interactifs, paramètres d’objets externes, etc. Même avec la meilleure volonté du monde (par exemple, un site « 100% XHTML, 100% accessible, 100% CSS2 »), il est impossible de séparer totalement le contenu, sa présentation et son comportement.

Après avoir critiqué cette situation absurde, Ben Dolan nous propose une solution simple et astucieuse pour la partie interaction, grâce à son script Behaviour. Son objectif : éliminer tous les appels aux comportements Javascript dans le code HTML et les déclencher grâce au DOM et aux sélecteurs CSS.

Une idée toute bête, encore fallait-il y penser. Du coup, toutes les interactions peuvent être modifiées sans toucher au code HTML. Du pur bonheur !

Google, Yahoo et Microsoft à l’unisson autour de Sitemap

Sitemap

Google, Yahoo et Microsoft, frères ennemis ? Pas toujours ! Ils savent aussi travailler ensemble quand cela favorise leurs intérêts respectifs. Un exemple : le protocole Sitemap, initié par Google, fait maintenant l’objet d’un site dédié (sitemaps.org) et d’une licence Creative Commons pour favoriser son adoption. Autant dire de suite que Sitemap sera LE standard d’indexation du contenu des sites web.

Avec Sitemap, le webmaster reprend la main sur l’indexation de son site : il peut en décrire la hiérarchie, favoriser l’importance d’une page ou indiquer la régularité des mises à jour. Ces données sont stockées dans un ou plusieurs fichiers XML soumis directement aux moteurs d’indexation.

C’est toujours mieux que le simple fichier robots.txt, mais ce n’est pas encore la panacée. Sitemap est parfait quand la structure du site évolue peu. Par contre, lorsqu’à l’occasion d’une refonte, des contenus changent de rubriques, sont fusionnés ou éclatés, changent de domaine, Sitemap ne sait pas décrire ces changements. Certes, les codes de statut HTTP peuvent y remédier, notamment les 301, 302, 303 et 307, mais ils sont souvent mal exploités (quand ils le sont…) par les systèmes de gestion de contenu et sont plutôt destinés aux navigateurs web qu’aux moteurs d’indexation.

La bonne idée serait donc d’ajouter quelques balises dans les fichiers XML Sitemap pour indiquer les changements de structuration du contenu (suppression, déplacement, fusion, éclatement, pages liées, etc.). On pourrait alors se passer du fichiers robots.txt et de quelques balises META dans le code HTML de chaque page. On pourrait même imaginer se passer des codes de statut HTTP si le navigateur web savait exploiter les fichiers XML Sitemap. Il me reste à contacter les frères ennemis pour mettre tout cela en place !

FireBug, l’outil de développement et de test web ultime

Logo Firebug

Développée par Joe Hewitt, à qui l’on doit l’interface de Netscape et de Firefox ou encore la librairie Boxely d’AOL, FireBug est une extension Firefox pour faciliter le test et la correction d’applications web riches (HTML, CSS, Javascript, XML et Ajax).

Attendue depuis quelques mois comme le Graal du développeur web, je viens d’en tester la dernière version (v.0.4.1 du 13 octobre 2006). Bilan ? Il suffit de trente secondes pour comprendre que cet outil est indispensable ! Petite tour de ses atouts.

Après une installation automatique et sans histoire, FireBug est accessible par le menu principal de Firefox. Une icône apparaît également dans la barre d’état et indique si la page web en cours est valide (icône verte) ou si elle contient des erreurs (icône rouge avec le nombre d’erreurs). Un volet permet d’utiliser toutes les fonctions de FireBug directement sous la page web testée.

Inspection du code

FireBug possède un inspecteur contextuel très efficace pour parcourir le code d’une page web. Il suffit de placer le pointeur sur un objet de la page pour en voir le code HTML ou obtenir des données numériques (taille, position, marge, espacement…). Si des fichiers sont liés (styles, scripts), il suffit d’ouvrir la balise HTML correspondante pour voir le code du fichier lié. C’est simple et rapide ! L’inspecteur gère aussi les styles CSS. On peut contrôler leur définition sur n’importe quel objet et détecter rapidement des conflits d’attributs. Quant aux as du DOM (Document Object Model), ils seront ravis d’en consulter les propriétés de façon aussi simple.

FireBug - Inspection des objets HTML
Mise en surbrillance du code HTML d’un objet survolé.
FireBug - Inspection des styles CSS
Valeurs des attributs de style d’un objet survolé.
FireBug - Inspection du DOM
Inspection du DOM.

Affichage des erreurs

En cas d’erreurs dans une page (HTML, CSS, Javascript), FireBug en dresse la liste et le détail (objet, valeurs, numéro de ligne…). Comme l’accès au fichier incriminé est immédiat (lien vers le fichier, puis sélection de la ligne), la détection des erreurs est très efficace.

FireBug - Affichage des erreurs
Affichage des erreurs dans la console.

Debugger Javascript

FireBug ne se contente pas d’afficher les erreurs, il peut aussi servir de debugger en testant les scripts Javascript pas à pas. Bien sûr, beaucoup d’entre nous trouverons ses fonctions trop simples, mais il est suffisant dans 80% des cas. Et il y a une console Javascript en prime pour exécuter des commandes directement !

Contrôle des flux Ajax

Je garde le meilleur (à mon goût) pour la fin : l’Ajax Request Spy. Avec lui, le trafic Ajax entre le client et le serveur n’aura plus rien à cacher ! J’adore.

Conclusion

Même si Joe Hewitt est encore loin de la version 1.0, son travail est déjà remarquable et terriblement efficace. Pour ma part, je garde la version actuelle qui m’a déjà permis de faire le ménage dans plusieurs sites en… 20 minutes ! En ce moment-même, je constate que l’interface de gestion de WordPress (moteur de mon site) contient, elle aussi, des erreurs… C’est redoutable.

N’oubliez pas CRUD !

Cela peut sembler étonnant, mais je constate assez fréquemment l’absence ou la mauvaise implémentation de fonctions basiques et indispensables dans les applications web. Souvent, cette situation vient d’une conception architecturale bâclée (voire absente…) et de l’utilisation extrême et non contrôlée des méthodes agiles (« Ajoute cette fonction maintenant, le client vient de me la demander pour la démo de 14h ! »).

La détection de ces défections peut se faire à différentes étapes du projet :

  • pendant la conception de l’architecture ;
  • pendant l’écriture du code ;
  • pendant la phase de test des briques fonctionnelles ;
  • pendant la phase de finalisation de l’application (version alpha ou beta) ;
  • pendant l’utilisation du produit en production.

Autant dire qu’une détection précoce sera la bienvenue…

Parmi les oublis classiques, celui de la gestion des données est le plus fréquent. « Ah ben ça alors… Je peux créer un utilisateur, mais pas le supprimer ! » Quand c’est votre client qui le dit, votre réputation en prend un coup ! Pour éviter ce genre de surprise, n’oubliez pas CRUD (Create, Read, Update, Delete) ! Et posez-vous les bonnes questions :

  • Create
    Dans quelles circonstances créer la donnée ? Qui peut le faire ? Comment avertir l’utilisateur quand elle est créée automatiquement ? Comment le faire manuellement dans l’interface ? Comment gérer les erreurs de saisie ?
  • Read
    Comment récupérer la valeur ? Qui peut la lire ? Doit-on la transformer pour l’afficher ? Comment vérifier que la donnée retournée est bien la bonne ? Que faire si elle n’existe pas ?
  • Update
    Qui peut le faire ? Comment avertir l’utilisateur quand elle est créée automatiquement ? Comment le faire manuellement dans l’interface ? Comment gérer les erreurs de saisie ? Quelles sont les répercussions sur les autres données ? Comment vérifier le type et le format de la donnée modifiée ? Que faire si elle n’existe pas ?
  • Delete
    Dans quelles circonstances supprimer la donnée ? Qui peut le faire ? Que se passe-t-il quand je supprime la donnée ? Faut-il ajouter, modifier ou supprimer d’autres données ? Que faire si elle n’existe pas ?

Ces questions (et bien d’autres !) doivent bien sûr être posées et résolues pendant la phase de conception de l’architecture car elles définissent le socle fonctionnelle de l’application, sa stabilité, sa robustesse et son évolutivité.

CRUD, CRUD, CRUD…

TypeTester, l’assistant typographique rêvé des webdesigners

Typetester

L’idée est toute simple mais magistralement mise en pratique par Marko Dugonjic : TypeTester permet de comparer sur trois colonnes des blocs de textes en sélectionnant tous leurs attributs de styles : police, taille, couleur, interlignage, alignement, etc.

Quand vous avez trouvé le style adéquat pour votre site, TypeTester vous en donne le code CSS ! Et en plus, l’interface est tellement belle…

FavIcon Generator : en voilà une bonne idée !

DynamicDrive nous propose un outil en ligne très pratique : FavIcon Generator, un générateur d’icônes de favoris (les fameux fichiers favicon.ico). « Et à quoi ça sert ? ». Simplement à ajouter une image dans la barre d’adresse du navigateur et dans la liste des favoris (« Marque-pages » sous Firefox).

FeedValidator valide vos flux Atom et RSS

Un petit outil bien pratique pour vérifier la syntaxe de vos flux de syndication : FeedValidator. Le complément idéal des outils de validation déjà bien connus :

Récupérer le dernier auto-incrément MySQL avec PHP

Quand un script ajoute un enregistrement dans une table MySQL, il est parfois utile d’en mettre d’autres à jour. Et pour cela, on peut avoir besoin de récupérer le dernier identifiant d’auto-increment. La fonction PHP mysql_insert_id() le fera très bien… sous certaines conditions.

Petit rappel sur les connexions MySQL

Avant de faire l’opération, voici un petit rappel du comportement des connexions MySQL ouvertes par PHP.

La plupart du temps, la connexion avec MySQL est établie par la fonction PHP mysql_connect(). Si un deuxième appel est fait avec les mêmes arguments, la première connexion sera à nouveau utilisée. Le paramètre new_link modifie ce comportement et permet à mysql_connect() d’ouvrir à chaque fois une nouvelle connexion, même si mysql_connect() a été appelée avec les mêmes paramètres.

Lorsque le script utilise une connexion persistante (par la fonction PHP mysql_pconnect()), le comportement est le même, à deux différences (importantes !) près :

  • Lors de la connexion, la fonction essaie de trouver une connexion persistante déjà ouverte, avec le même nom d’utilisateur et le même mot de passe. Dans ce cas, son identifiant est retourné sans ouvrir de nouvelle connexion.
  • La connexion au serveur MySQL n’est pas coupée à la fin du script. Le lien est conservé pour un prochain accès, même si on utilise la fonction mysql_close().

Au passage, notez que les connexions persitantes ne fonctionnent qu’avec PHP en version module.

Et l’auto-increment dans tout ça ?

L’auto-increment sera retourné par la fonction PHP mysql_insert_id(), mais il y a des risques de ne pas récupérer celui que vous attendez !

mysql_insert_id() retourne le dernier identifiant généré par un champ de type AUTO_INCREMENT, sur la connexion MySQL courante ou sur la connexion spécifiée par le paramètre link_identifier. Mais les surprises sont nombreuses :

  • Si votre colonne AUTO_INCREMENT est une colonne de type BIGINT, la valeur retournée par mysql_insert_id() sera incorrecte. À la place, il faut utiliser la fonction MySQL LAST_INSERT_ID() directement dans une requête SQL.
  • mysql_insert_id() ne fonctionne pas avec un REPLACE.
  • Si vous utilisez dans votre requête SQL un INSERT IGNORE en précisant un identifiant existant dans la table, l’enregistrement ne sera pas créé, ce qui est normal puisqu’il ne peut y avoir deux identifiants égaux. Par contre, mysql_insert_id() vous retournera l’auto-increment suivant, comme si l’enregistrement avait été ajouté !
  • Si vous faites des insertions multiples (par exemple, INSERT INTO table1 (champ1, champs2) SELECT champ1, champs2 FROM table2 WHERE champ1=2), mysql_insert_id() retournera l’identifiant du premier enregistrement ajouté !

J’arrête là le massacre car il y a bien d’autres cas. Pour s’en sortir, il faut privilégier la fonction MySQL LAST_INSERT_ID() (placée directement dans une requête SQL) et verrouiller la table :

mysql_query("LOCK TABLES table_exemple WRITE");
mysql_query("SET AUTOCOMMIT = 0");
mysql_query("INSERT INTO table_exemple (champ1, champ2) VALUES  ('toto1','toto2')");
$mysql_id = mysql_query("SELECT LAST_INSERT_ID()");
mysql_query("COMMIT");
mysql_query("UNLOCK TABLES");