Google Images recherche soleil

Le référencement des images

Quand on parle « Référencement« , on pense au référencement de nos produits, de nos actualités, … mais il ne faut pas oublier les images.
La recherche d’images par Google permet aux internautes de trouver des images en rapport avec le mot-clé choisi.

Maintenant, les internautes ont également la possibilité de filtrer leur recherche en fonction de la taille des photos ou de la couleur dominante de la photo.
Google Images recherche soleil
ici un exemple de recherche sur le mot-clé « soleil » (de saison) avec la couleur verte.

Ces outils sont mis en place par Google pour inciter les internautes à utiliser la recherche d’images.

Autant de raisons pour ne pas négliger le référencement de vos images !

Utilisez le web plus rapidement qu’avec Internet Explorer

Astuce : savez-vous que les applications web comme votre back office, google apps, votre crm en ligne, les sites en général, etc. s’exécutent beaucoup plus rapidement si vous utilisez un navigateur web moderne come  FirefoxSafari, ou Google Chrome? Vous découvrirez que certaines de vos appllications web tourneront souvent 15 fois plus vite qu’avec Internet Explorer.

La bonne nouvelle c’est qu’ils sont gratuits !

On peut voir sur ce bencmark de favBrowser que Google Chrome (mon favori au quotidien) et Safari permettent une consultation 13 ou 14 fois plus rapide.

NB. : un navigateur web est le logiciel (que vous êtes en train d’utiliser sans doute) qui vous permet de visiter les sites web.

doFollow

Le blog AppliBox passe en DoFollow

doFollow

Nous avons décidé de passer le blog en DoFollow pour encourager nos lecteurs à participer à la vie du blog. Nous remercions ainsi les commentateurs  en les remerciant par un backlink toujours utile car pris en compte par les moteurs de recherche.

Pour les non-initiés, les liens présents dans les commentaires (dans le corps du commentaire, ou dans le lien sur l’auteur du commentaire) sont en général accompagnés d’un code (rel= »nofollow ») qui indique aux moteurs de recherche qu’il faut ignorer ce lien (lien « noFollow »). Cette pratique est destinée à décourager les spammeurs qui ne commentent que pour obtenir un lien vers leur site (et donc augmenter leur popularité, qui est un critère de positionnement).

Attention ! Pour ne pas être spammés nous avons mis en place deux protections :

  1. Nous avons installé l’excellent plugin wordpress Askimet qui permet de filter automatiquement les spams les plus courants.
  2. Il faut avoir commenté au moins 3 fois sur le blog pour bénéficier de cette mesure. Après cela, tous vos liens passeront automatiquement en DoFollow. Cela nous évitera au moins en partie de beaux commentaires à propos de « rachats de crédits » ou de « viagra pills ».

Pour cette dernière fonctionnalité, nous avons utilisé le plugin « Link Love« .

Nouveau type d’attaque par phishing : le tabnagging !

Après notre espion paparazzi ;) voici un article pour vous présenter et vous prévenir qu’un nouveau type d’attaque à fait apparition sur internet ces dernières semaines s’intitulant le tabnagging.

Le tabnagging est en fait une technique de phishing (encore un terme suspect :) )

Pour rappel voici la définition du Phishing (Source Wikipedia) :
Phishing (ou hameçonnage, et parfois filoutage), est une technique utilisée par des fraudeurs pour obtenir des renseignements personnels dans le but de perpétrer une usurpation d’identité. La technique consiste à faire croire à la victime qu’elle s’adresse à un tiers de confiance — banque, administration, etc. — afin de lui soutirer des renseignements personnels : mot de passe, numéro de carte de crédit, date de naissance, etc.

Maintenant que vous êtes imbattable en sécurité informatique voici le principe de fonctionnement du tabnagging :

Vous êtes sur votre page web préférée et vous décidez d’ouvrir un nouvel onglet pour allez visiter une autre page. Jusqu’à là rien d’anormal, mais, pendant ce temps.. un script malicieux va modifier votre page préférée (la première que vous regardiez à l’instant) et va modifier son contenu pour afficher une page Gmail (fausse) et prête à vous demander vos identifiants. Si vous n’avez pas fait attention et que vous retournez sur votre premier onglet, vous allez saisir vos identifiants afin de consulter vos mails (comme d’habitude après tout ?). Sauf que le site n’est pas Gmail et vous venez d’être victime de tabnagging ! Pour le moment ce n’est pas parfait, mais avec le temps ce type d’attaques pourrait vite devenir un fléau.

Une équipe de développement de plugins pour firefox suit ce phénomène et a apporté des correctifs à son extension pour vous protéger de cette attaque, voici le lien https://addons.mozilla.org/fr/firefox/addon/722/.
Une vidéo du script en action : http://vimeo.com/12003099

Soyez prudents !

L'équipe AppliBox

Qui se cache derrière AppliBox ?

Voici une question que beaucoup de personnes se posent et dont la réponse n’était jusqu’à maintenant disponible qu’à l’intérieur des locaux d’AppliBox.

Mais heureusement, grâce à mes talents d’espion, je suis fier de partager aujourd’hui LA photo de l’équipe d’AppliBox, celle qui révélera notre identité aux yeux de tous.

Voici donc, de gauche à droite, Véronique, Didier, Johann, Vanessa et Fabrice, sans oublier Velvet, notre mascotte :

Evidemment, nos bureaux sont ouverts et vous pouvez venir boire un café pour nous rencontrer en chair et en os pour parler de votre projet quand bon vous semble.

Magento : redirection des nouveautés & tri des produits groupés

Dans la continuité du développement d’un de nos sites e-commerce sous Magento, nous avons du répondre aux besoin suivants :

  • rediriger l’utilisateur lorsqu’il clique sur un produit affiché en tant que nouveauté sur la page d’accueil vers la catégorie parente de ce produit.
  • résoudre un bug de Magento qui change constamment l’ordre de la liste des produits simples contenus dans un produit groupé.

Redirection :

  • Comme vous le savez peut-être déjà, la gestion de nouveaux produits sur la page d’accueil se fait par le template /app/design/frontend/votre_interface/votre_theme/template/catalog/product/new.phtml
  • Ouvrez donc ce fichier et placez vous juste après la ligne suivante : <?php $i=0; foreach ($_products->getItems() as $_product): ?>
  • Ce code représente la boucle sur les nouveaux produits, ajoutez donc le code suivant :
    <?php
    /**
    * On récupère les catégories du produit sur lequel on est focalisé
    */
    $_categories = $_product->getCategoryIds();
    /**
    * Parmi ces catégories, on récupère la première
    */
    $_category = Mage::getModel('catalog/category')->load($_categories[0]);

    /**
    * Il nous faut ensuite trouver la catégorie parente
    */

    $parentCategory = Mage::getModel('catalog/category')->load($_category->getParentId());
    /**
    * Ainsi que l'id
    */

    $this_id = $_category->getId();
    /**
    * On crée ensuite l'url qui correspondra à URL_de_la_catégorie_parente.?cat=numéro_de_la_catégorie_du_produit
    */

    $url = $parentCategory->getUrl()."?cat=".$this_id;
    ?>
  • Si vous souhaitez que la redirection soit effectuée lorsque vous cliquez sur le titre du produit par exemple, il vous suffit de trouver le div ayant pour classes padtop10 et padbotlistinghome et de remplacer l’url du produit par : <a href="<?php echo $url ?>"
  • Vos produits en page d’accueil redirige désormais vos utilisateurs vers la catégorie parente du produit.

N.B. : Certains d’entre vous nous feront sûrement remarquer la possibilité d’utiliser simplement le code suivant :
$_category = Mage::getModel('catalog/category')->load($_categories[0]);
$url = $_category->getURL();

Seulement le problème est que, dans le cas de sous-sous-catégorie, cette URL nous fournit bien la liste des produits de la catégorie mais la page affichée ne contient pas le bloc « Filtrer par » qui permet la navigation entre les catégories, ce qui est assez embêtant et laisse un vide assez conséquent dans la page.

Résolution de bug :

Peut-être que vous avez déjà rencontrer le problème suivant : sous Magento, dans la page produit d’un produit groupé, les produits ne sont pas triés, c’est-à-dire que deux produits groupés totalement identiques (avec des sku et des noms différents) afficheront une liste de produits dans un ordre différent.

Un bug qui paraît anodin mais qui, peut parfois devenir déconcertant pour un client : imaginez une boutique de vente en ligne de CD sous la forme de produit groupé contenant un CD physique et un CD téléchargeable. Un utilisateur qui n’acheterait que des CD téléchargeables souhaiterait pouvoir savoir où se trouvent le produit téléchargeable dans la liste et toujours choisir le 1er ou le 2ème produit de la liste sans avoir à vérifier à chaque achat !

Pour résoudre ce bug, rien de plus simple :

  • Copiez le fichier app/code/core/Mage/Catalog/Model/Product/Type/Grouped.php
  • Créez l’arborescence suivante : app/code/local/Mage/Catalog/Model/Product/Type et copiez y votre fichier Grouped.php
  • Ouvrez le et trouvez les lignes suivantes dans la fonction getAssociatedProducts vers la ligne 117 du fichier:
    $collection = $this->getAssociatedProductCollection($product)
    ->addAttributeToSelect('*')
    ->addFilterByRequiredOptions()
    ->setPositionOrder()
    ->addStoreFilter($this->getStoreFilter($product))
    ->addAttributeToFilter('status', array('in' => $this->getStatusFilters($product)));
  • Ces lignes représentent l’ensemble des produits associés à un produit groupé, afin de trier ces produits (par nom, par prix, etc…), il vous suffit de modifier ces lignes de la façon suivante (pour le tri par nom de produit dans notre cas ) :
    $collection = $this->getAssociatedProductCollection($product)
    ->addAttributeToSort('name')
    ->addAttributeToSelect('*')
    ->addFilterByRequiredOptions()
    ->setPositionOrder()
    ->addStoreFilter($this->getStoreFilter($product))
    ->addAttributeToFilter('status', array('in' => $this->getStatusFilters($product)));
  • Le tri sera désormais activé sur tous vos produits groupés.

C’est terminé pour aujourd’hui, j’espère qu’AppliBox vous aura aidé à améliorer l’ergonomie de votre site.

screenshot_003

Ajout de boutons « Précédent » et « Suivant » sur la fiche produit Magento

Une fonctionnalité très utile mais qui manque à la version Community de Magento est la possibilité d’ajouter des boutons de navigation « Précédent » et « Suivant » entre les produits d’une même catégorie.
Il existe évidemment des extensions qui permettent d’implémenter cette possibilité mais elles sont payantes, c’est pourquoi voici une méthode simple et surtout gratuite pour mettre en place ce système.

  1. En premier lieu, ouvrez le fichier ./app/design/frontend/votre_interface/votre_theme/template/catalog/product/view.phtml
  2. Ajoutez le code suivant juste après les commentaires Magento :
    <?php
    $_helper = $this->helper('catalog/output');
    $_product = $this->getProduct();
    /**
    * Determine les liens précédents/suivants et le lien vers la categorie parente
    */
    $_ccats = $this->helper('catalog/data')->getProduct()->getCategoryIds();
    $_ccat = Mage::getModel('catalog/category')->load($_ccats[0]);
    $ppos = $_ccat->getProductsPosition();
    arsort($ppos);
    $current_pid  = $this->helper('catalog/data')->getProduct()->getId();
    // Déclaration d'un tableau contenant les positions
    $plist = array();
    foreach ($ppos as $pid => $pos) {
    $plist[] = $pid;
    }
    sort($plist);
    $curpos   = array_search($current_pid, $plist);
    // Obtenir le lien du produit suivant
    $previd   = isset($plist[$curpos+1])? $plist[$curpos+1] : $current_pid;
    $product  = Mage::getModel('catalog/product')->load($previd);
    $prevpos  = $curpos;
    while (!$product->isVisibleInSiteVisibility()) {
    $prevpos += 1;
    $nextid   = isset($plist[$prevpos])? $plist[$prevpos] : $current_pid;
    $product  = Mage::getModel('catalog/product')->load($nextid);
    }
    $next_url = $product->getProductUrl();
    // Obtenir le lien du produit précédent
    $nextid   = isset($plist[$curpos-1])? $plist[$curpos-1] : $current_pid;
    $product  = Mage::getModel('catalog/product')->load($nextid);
    $nextpos  = $curpos;
    while (!$product->isVisibleInSiteVisibility()) {
    $nextpos -= 1;
    $nextid   = isset($plist[$nextpos])? $plist[$nextpos] : $current_pid;
    $product  = Mage::getModel('catalog/product')->load($nextid);
    }
    $prev_url = $product->getProductUrl();
    // Obtenir le lien de la catégorie
    $more_url = $_ccat->getUrl();
    ?>
  3. Une fois ce code ajouté, trouvez les lignes suivants :
    <div>
    <input type="hidden" name="product" value="<?php echo $_product->getId() ?>" />
    <input type="hidden" name="related_product" id="related-products-field" value="" />
    </div>

    Et ajoutez le code suivant en dessous de celles-ci :
    <div>
    <table cellspacing="0" border="0" width="100%">
    <tr>
    <td style="text-align:left;"> <a href="<?= $prev_url; ?>"><?php if ("http://".$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'] <> $prev_url) echo $this->__('←  Précedent') ?></a></td>
    <td style="text-align:center;"> <a href="<?= $more_url; ?>"><?php echo $this->__('Catégorie') ?></a></td>
    <td style="text-align:right;"> <a href="<?= $next_url; ?>"><?php if ("http://".$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'] <> $next_url) echo $this->__('Suivant →') ?></a></td>
    </tr>
    </table>
    </div>
  4. Vous disposez désormais de trois liens vous permettant de naviguer à travers les produits d’une même catégorie.

Voici un petit exemple du résultat obtenu sur le site e-commerce Magento Médias Aviron (NB : le lien vers la catégorie parente a été désactivée sur ce site) :

  • Si vous vous trouvez au premier (dernier) produit d’une catégorie, le lien « Précédent » (« Suivant ») n’apparaît pas :
  • Sinon, les deux apparaissent :

En espérant que ce petit tutoriel vous servira pour améliorer votre site e-commerce Magento.

Analyser les performances de son site internet

Comme tout internaute étant équipé d’une connexion internet correcte, vous n’aimez pas attendre des heures qu’une page web s’affiche, et c’est bien normal !

Pour lutter contre ces lenteurs il existe plusieurs solutions que nous nous efforçons de mettre en place sur nos sites  :

  • alléger les contenus
  • optimiser votre serveur
  • optimisation du code
  • utilisation de framework css
  • utilisation de système de cache..
  • ..

Il existe aussi beaucoup d’outils permettant de mesurer les performances d’un site internet. Ces outils reprennent en général les points détaillés ci-dessus et donne une note de performance pour le site en question.

Voici une petite liste de ceux que nous utilisons le plus souvent chez Applibox :

Plugins pour Firefox :

Site internet :

  • Woozweb : Ce site vous permet de surveiller votre site sur du long terme et vous envoie des alertes par mail quand le temps de réponse de votre site dépasse un temps défini.
  • Google Webmaster Tools : Les outils pour webmaster made in google.
  • Site-perf.com : Site en anglais avec la possibilité de paramétrer le lieu du test, le type de navigateur..

Il y en a bien-sûr plein d’autres. Et-vous, quels sont vos outils favoris ?

append

Zend Form : Ajouter du code Html avant ou après un élement du formulaire

Petit tips pour ajouter du code HTML avant ou après un élément d’un formulaire :

Créer une classe (décorateur) qui hérite de la classe Zend_Form_Decorator_Abstract :

class lib_Abx_Form_Decorator_Html extends Zend_Form_Decorator_Abstract
{
 public function render($content) {
 $placement = $this->getPlacement();
 switch ($placement) {
 case self::APPEND:
 return $content . $this->_options['html'];
 break;
 case self::PREPEND:
 return $this->_options['html'] . $content;
 break;
 }
 }
}

Maintenant on désire ajouter un lien à la suite d’un champ Texte.

$name = new Zend_Form_Element_Text('name');
$name->addPrefixPath ( 'lib_Abx_Form_Decorator', 'lib/Abx/Form/Decorator', 'decorator' ) //chemin vers décorateur
     ->setDecorators(array(
      'ViewHelper',
     array(array('suffix' => 'Html'),
     array('html' => '<a href="http://www.google.fr">aaa</a>', 'placement' => 'append')),
 // On peut remplacer par 'prepend' si on désire le mettre avant le champs
      ));
$form->addElement($name);

Voici le rendu visuel :