Nous travaillons en ce moment sur le référencement d’un site, dont le client nous a soumis une demande très particulière. Son site, un réseau social spécialisé, compte des nombreuses images des membres. Or, comme la litanie de les télécharger sur son poste, les éditer et les remettre en ligne lui prend trop de temps, il souhaite pouvoir faire toutes les manipulations d’édition en ligne.

Pas de problème, nous nous sommes dit,  il y a des nombreux scripts sur le web avec les fonctionnalités nécessaires pour une édition de base: recadrage, redimensionnements, flou, … Ok, mais avec la possibilité de créer une zone floue sur une image (et non toute l’image)?…

C’est donc cette demande atypique qui nous à permis de trouver Pixastic, une librairie JavaScript expérimentale d’édition d’images.

Canvas? un peu, rien, à la folie!

Développée en JavaScript, cette librairie tire partie du nouvel élément HTML5 canvas. Cet élément offre tant de possibilités aux développeurs que des épais libres sont déjà disponibles. Canvas n’est pas supporté par tus les navigateurs, mais dans notre cas cela ne pose pas de problème car il suffit que notre client utilise Firefox ou Opera. Canvas définie une zone dans la page qui peut être modifiée avec JavaScript au niveau du pixel, ce qui permet des nombreux effets:

• Blend
• Blur
• BlurFast
• Brightness/Contrast
• ColorAdjust
• ColorHistogram
• Crop
• Desaturate
• Edge Detection
• Edge Detection 2
• EmbossFlip
• HorizontallyFlip
• VerticallyGlow
• Histogram
• Hue/Saturation/Lightness
• InvertLaplace
• Edge Detection
• Lighten
• Mosaic
• Noise
• Pointillize
• Posterize
• Remove Noise
• Sepia
• Sharpen
• Solarize
• Unsharp Mask

Du moment qu’on a accès au pixel on peu lui appliquer toutes sortes d’algorithmes, et obtenir une variété énorme de filtres…, bref de quoi se fabriquer un navigateur-photoshop!

Un petit test rapide pour vérifier que tout cela est bien vraie

Pour nous simplifier les choses, il y a des nombreuses demos de chacun de ces effets sur le site, un éditeur en ligne très complet, et cerise sur le gâteau, pour les adeptes de JQuery, la possibilité d’utiliser Pixastic en tant que plugin de ce framework.

Nous allons tester l’éditeur en ligne, pour savoir si la demande de notre client (rendre floue une zone d’une image) peut être honorée avec cette librairie:

Nous chargeons une image:

Ensuite nous sélectionnons le parasol…

…parés pour appliquer le filtre….

Oui!, ça marche! notre client peut être tranquille, le parasol et ses inavouables secrets resteront à l’abri des regards indiscrets. Maintenant il « suffit » d’adapter cette librairie à son site.

Pixastic a été développé par Jacob Seidelin, avec la licence Mozilla Public License (MPL).

A bientôt.

Finis les anciennes versions de PHP et MySQL, WordPress 3.2 demande au moins PHP 5.2.4, et MySQL 5.0.15.

WordPress 3.2 est très rapide. Avec le passage aux dernières versions de PHP et MySQL, les développeurs en ont profité pour réécrire et optimiser le code pour trouver une vitesse impressionnante.

Il y a désormais un meilleur support des navigateurs modernes, ce qu’implique l ‘abandon d’Internet Explorer 6 et le commencement de la fin du cycle d’Internet Explorer 7. Dans l’administration,  WordPress nous a accueilli avec un message pour nous signaler que notre navigateur est dépassé (FF3).

L’interface de l’administration a été refaite avec plus de liens dans la barre de menu…

Nous aimions l’ancienne interface, mais la nouvelle est très épurée, surtout le nouveau mode plein écran, conçu pour que rien ne puisse perturber votre concentration lors de la rédaction de vos billets:

WordPress 3.2 incorpore un nouveau thème par défaut: Twenty Eleven. Très simple et passe-partout, il possède un bandeau d’images qui changent de façon aléatoire.

La version bêta est disponible pour les test: wordpress3.2, bon courage et bon blog!

Ce critère de la « vitesse » a gagné une place dans les algorithmes de ces moteurs, donc on a tout intérêt, si l’on veut avoir un bon référencement, à que notre site soit présenté aux navigateurs dans les meilleurs délais. Pour cela il a beaucoup de facteurs que l’on peut optimiser, dont le plus simple est peut-être la taille des fichiers qui sont envoyés au navigateur. On a vu dans ce sens des outils pour réduire la taille des feuilles de style, ou des scripts JavaScript. Maintenant on a aussi un outil pour réduire la taille des fichiers HTML.

HTML minifier

Il s’agit d’un outil pour compresser le HTML, et réduire sa taille, donc le temps de téléchargement. Pour l’instant il s’agit d’un outil en version de développement. Voici les options qu’il propose:

• Supprimer les commentaires HTML, CSS, JavaScript.
• Supprimer les sections CDATA.
• Réduire les espaces en blanc
• Compresser les attributs si possible : par exemple

  selected='selected'>
  devient
  selected>

• Enlever les guillemets des attributs
• Supprimer les attributs redondants (a id= »… » name= »… »)
• Utiliser un Doctype court.
• Supprimer les attributs vides.
• Supprimer les tags optionnels.
• Supprimer les éléments vides.
• Valider avec HTML lint

Nous avons ici un outil très prometteur. Nous attendons la première version RC que l’on puisse l’utiliser en production!

Plus que de garder en tête les chiffres, qui varient énormément d’un site à un autre, il faut retenir que d’une étape vers la suivante, on « perd » des visiteurs. L’art de l’optimisation des sites pour les ventes, consiste donc à faire en sorte que de plus en plus de visiteurs passent les étapes successives vers l’achat final.

M King, élabore toute une liste de théories et principes pour passer en revue tous les éléments d’un site de commerce électronique et l’optimiser. On a là une bonne guide de référence pour tester des variations sur notre site Internet. Oui, je dis une guide car le bon sens nous dit que ce qu’il marche pour un site ne marche pas pour un autre. On ne peut pas recopier les recettes, il faut les adapter en permanence. Étant totalement empirique, l’optimisation de site repose sur les tests. Testez tout ce que vous pouvez modifier, les phrases de présentation, l’emplacement des boutons, la disposition des images, la quantité de contenu de présentation les effets d’appel à l’action, la navigation, la crédibilité du design….

Pour faire certains de ces test, vous avez sur Internet des outils de type « test A/B », qui vous permettent d’envoyer à l’hasard deux variantes de votre site, et d’en récupérer les statistiques. Aussi il existent des outils de tracking qui possèdent la possibilité de créer un rapport de processus d’achat.

Avantages d’Ajax

La principale avantage de l’utilisation d’Ajax, est l’amélioration de l’expérience utilisateur par , entre autres, le gain de vitesse et de réactivité du site. Ce gain n’est pas dû pas à la vitesse de l’échange (qui reste la même) mais au fait que dans l’échange on ne transmet que une partie de la page et pas la page en entier. On peut faire valider des formulaires avec un script qui réside dans le serveur, ce qui permet de voir les erreurs de saisie avant de l’envoyer, charger des photos d’une galerie d’images au fur et mesure qu’elles sont appelées, …

Désavantages d’Ajax

Ajax n’est pas très bien adapté au référencement, car du moment que les informations sont récupérées via Javascript, elles sont à priori invisibles pour les moteurs de recherche. Il existent néanmoins des techniques pour faire SEo et Ajax compatibles.

En effet, il est de notoriété de trouver tout et n’importe quoi sur le web. L’installation d’un script d’origine non certifiée et dont on ne maitrise pas totalement le fonctionnement peut constituer un réel danger pour le site utilisateur.

Ce type de script n’est pas, loin s’en faut, exempt de failles de sécurité qui peuvent avoir de graves conséquences sur le fonctionnement mais également pour la sécurité des données du sites (base de données, etc.).

Comment repérer un script potentiellement dangereux ? Le bon sens serait déjà de regarder ce que la communauté du web pense du script en lui même et si des failles sont déjà connues. Pour ce faire une simple recherche sur Google avec le nom du script + des termes comme exploit ou hack permet d’avoir une rapide idée de la réputation du script. Ceci n’étant pas suffisant, il faut également plonger dans le code et vérifier que toutes les entrées (les formulaires principalement ainsi que tous les données enregistrées en base de données) soient totalement sécurisée.

Un professionnel fera toujours passer la prudence avant la facilité.

Bon développement.

Le Captcha comme solution anti-spam

Captcha vient de l’anglais « Completely Automated Public Turing test to Tell Computers and Humans Apart », soit « test de Turing complètement automatique et public qui différencie les humains et les ordinateurs ».

La forme la plus courante est celle d’une image avec des lettres déformées qu’il faut saisir dans un champ d’un formulaire. Étant donné que les logiciels de spam ont du mal à interpréter ce genre d’images, il seront incapables (en théorie) de le remplir correctement. De toute façon le comportement des logiciels de spam est remplir tous les champs qu’ils trouvent avec du contenu pré-établi, donc il ne vont pas chercher à interpréter l’image.

Le Captcha et l’accessibilité

Pour les personnes malvoyantes il existent des solutions qui permettent d’avoir une version audio de l’image déformée, comme le ReCaptcha de Google.

Problèmes du Captcha et autres solutions

Dans le monde réel le Captcha freine les spams, mais aussi beaucoup de commentaires potentiels. Pour cette raison certains utilisent des champs cachées vides. Les logiciels de spam remplissent normalement tous les champs qu’ils trouvent, et certains ne font pas la différence entre champs cachés ou non. Si l’on trouve un champ caché avec le contenu par défaut modifié, cela voudrait dire que le commentaire a été créé par une machine.

Il s’agit d’un site de présentation d’une société de charpente et couverture basée à La Verne. Il se caractérise surtout par une présentation visuelle des réalisations de la société. A ce fin on a mis en place des galeries « Lightbox ». Nous avons réalisé la conception graphique ainsi au le développement XHTML.

Référencement de sites en MVC, par exemple boutiques e-commerce Magento

Oui d’accord, mais quel rapport a le MVC avec le référencement?  Le référencement n’a aucun problème avec cette architecture, mais plutôt avec le framework qui normalement est utilisé pour l’implementer. Comme le signale l’inventeur de PHP, Rasmus Lerdorf, les performances du code procédural seront toujours supérieures au code orienté objet des frameworks MVC. Sachant que le temps de réponse du serveur est l’un des nombreux éléments pris en compte par les algorithmes des moteurs de recherche, il est de notre intérêt que le pages soient servis dans les moindres délais.

De ce point de vue, le mieux pour le référencement reste faire des pages en XHTML sans code dynamique, et les sites réalisés avec des frameworks lourds  sont visiblement plus lents  que le code procédural. Il suffit de visiter une magnifique boutique Magento (qui tourne avec Zend Framework) pour le constater. Certes, si vous avez un niveau de compétences élevé dans ces frameworks, vous pouvez toujours les optimiser pour améliorer ses performances, mais si l’objectif visé est de faire des sites de moyenne ou petite taille, il vaut mieux pour le référencement de créer son propre mini-framework optimisé, ou d’utiliser une solution « legère » comme CodeIgniter ou Kohana.

Finalement, reste aussi à reglèr le problème qui peuvent representer l’accès au même contenu via différentes url. Les sites réalisés en MVC fournissent normalement le même contenu dans des adresses su type http://www.monsite.com/index.php?cat=2&id=12 et  http://www.monsite.com/chemises/chemisse-blanche/.