Bonne lecture …

Ronan m’avait contacté pour introduire l’optimisation SEO les sites Drupal, dans le cadre d’une conférence sur l’optimisation des CMS OpenSource, à savoir Drupal, WordPress et Magento. En fin d’article, le pdf et les slides de ma présentation.
Un grand bravo à mes “co-présentateurs”, Daniel Roch de SEOMix pour WordPress, et Alexandre Filluzeau pour Magento. J’ai trouvé leur présentations riches et dynamiques.

On a aussi bien rigolé avec la présentation du SEO Black Hat par Paul Sanches et Kaddiern Sauvage. Bien ficelée, constructive et décalée. Parfait ! Après un temps d’échange, je n’ai pas pu assisté aux 2 présentations suivantes (Monétisation de site web par Thibault Vincent, et Rédaction web & Google News par Nicolas Robineau). La journée s’est terminée par la présentation de Ronan Himself, sur l’utilisation avancée de Google Analytics pour le référencement. Ronan publiera en décembre un livre sur ce sujet.

Au final, de chouettes orateurs présents. J’ai encore beaucoup à apprendre pour être aussi à l’aise avec un micro, devant un parterre de passionnés…

Si tout va bien, les présentations seront publiées en vidéo prochainement. Encore bravo et merci à l’équipe du SEO Camp. On trouve un très bon compte rendu du SEO Camp sur le site d’Aurélien Blériot.

—-

Ce module propose un nouveau type de condition pour le module Context. Très proche de la réaction “taxonomy” présente de base dans context, Context Vocabulary permet de déclencher la condition quand n’importe quel terme du vocabulaire séléctionné est attaché au node affiché. C’est assez pratique dans le cas d’un vocabulaire non figé.

Voila, c’est mon premier module sur drupal.org, et je dois bien avouer que j’en suis assez fier !

trickle -s -d 50 /usr/bin/firefox

le parametre -d permet ici de limiter le débit descendant (download) pour firefox à 50ko/s. On trouve aussi le parametre -u, pour le débit montant (upload). Trickle est disponible dans les dépots, donc vous pouvez l’installer facilement depuis la console avec:

sudo apt-get install trickle

C’est aussi simple que ca! Astuce trouvée sur Astuces Ubuntu : http://astuces-ubuntu.blogspot.com/2008/12/limiter-la-bande-passante-dun-programme.html

Première session animée par Maxime Topolov en crocs: Sites à haut trafic, systèmes de cache…

2 Types de sites (et de traffic):  Trafic anonyme vs Trafic connecté.

Un fort trafic anonyme permet l’utilisation de cache statique, comme Varnish. Pour ce dernier, pas besoin de module drupal. C’est un soft à installer sur son serveur; Il vient se placer sur le port 80, et intercepte les requêtes destinée à Apache pour servir une version caché, et donc beaucoup plus rapidement.
Pour Varnish, on peut utiliser le standard ESI, permettant de definir une durée de vie (TTL) par zone de la page. Par exemple, un header/footer avec une grande durée de vie, mais le bloc “derniers articles” avec une courte durée de vie. Le module ESI permet de mettre ca en place.
On peut également utiliser le module Boost, qui enregistre “physiquement” sur le serveur les pages HTML  pour les servir au visiteur. Boost est moins performant que varnish car, étant un module, il implemente necessairement le bootstrap drupal.

Memcache: Le module cache_router permet de déporter les tables de cache de drupal (cache_*) en mémoire vive, afin de décharger le serveur SQL. (Il s’utilise quel que soit le type de trafic.)

MongoDB: Base de donnée orientée document (clé|valeur), No SQL. Le module Drupal MongoDB existe, mais necessite du code custom. On peut, par exemple, stocker l’intégralité d’un node, avec ces champs, comme un document MongoDB. (ca reste assez flou pour moi;)

2 modules à tester pour cacher les pages avec un trafic connecté: authcache et easy_authcache

HTML5 & mobilité dans drupal

On retrouve l’initiative Drupal-HTML5 : http://groups.drupal.org/html5

Le problème fondamental est celui qu’on avait (ou qu’on a toujours) en desktop, soit les differences de rendu entre les differents navigateurs. Le web mobile est visible sur un encore plus grand nombre de terminaux. Lors de cette session, nous nous sommes mis d’accord pour ne parler ni de WAP/WML, ni d’appli native (iOS, Android), mais bien de web: HTML & CSS (et donc HTML5 & CSS3)

Theming: 2 manières de faire ont été abordées, soit un changement de thème, en fonction du user-agent (mobile tools, ou themeKey), soit un theme adaptatif à base de @media-queries. A noter que mobile_tools s’integre à context, et permetterait de jouer sur les blocs en fonction du terminal de lecture. On pourrait aussi jouer sur les profiles image_cache (ou style d’image, en D7) afin d’envoyer au client des images d’un taille adaptée à son lecteur (mobile, tablette, desktop, wide-screen..)

Coté HTML5/CSS3, afin de savoir quelle propriété est disponible sur quel navigateur, on peut noter le site http://caniuse.com/

Reflexion interessante sur l’aspect business: Avant, on trouvait des agences web, et des agences mobiles. Ces dernières avaient une grande expertise pour le developpement d’application mobile, WAP ou natives. Maintenant que le web s’améliore de ce coté la, les agences web “traditionnelles” peuvent s’attaquer au marché mobile, en proposant des applications riches basées sur des languages web (HTML5/CSS3/JS)

Liens en vrac: jQuery mobile, titanium, bkml, le Financial Times abandonne les applications natives pour proposer une application HTML5,

Staging, Déployement

Eternel problème avec Drupal, on fait face à 2 problèmes: La migration de la configuration, et la migration des contenus.

Migration de configuration

Features, hook_update, backup_migrate, le tout avec drush, et des scripts bash.

Features (enfin en version stable!) permet de packager un ensemble fonctionnel sous la forme d’un module drupal (des types de contenus, de la taxonomie, des menus, des vues, des profiles imagecache …).
Les hook_updates permettent d’effectuer des actions en base de données qui n’ont pu être exportées avec une feature. En gros les “cases a cocher” dans l’interface d’admin de drupal.
Backup’n'migrate, avec des profils spécifiques, permet d’exporter uniquement quelques tables. C’est utile, par exemple, pour les tables de la traduction, ou pour la table des permissions. De l’avis général, on utilise backup_migrate en dernier recours.

Migration de contenu

Pour la migration de contenu d’une instance à une autre, on utilise les modules Feeds, Migrate, ou Deploy. Ces modules peuvent aussi être utilisé pour migrer d’un autre CMS à Drupal.

i18n, multilinguisme

Info sur le module translation_table, qui propose une meilleure UI pour l’interface de traduction de drupal6.

Drupal7 propose la traduction des nodes par champ (translatable fields), avec d’avoir un seul et unique nid par contenu multilingue. Intéressant car le body est devenu un field en D7; Reste le problème du titre, car $node->title n’est pas un champ.

Une bonne pratique à été conseillée: Toujours mettre l’anglais comme langue par défaut, même si on veut le français comme langue par défaut sur le front. En effet, avoir autre chose que l’anglais comme défaut posait des problème pour la traduction de certains éléments (label de champs, termes et vocabulaire, nom de menus…)

En vrac

• Un module de gestion des médias, utilisé par radio-france: Scald
• Des montages photos sensationnels : http://www.flickr.com/photos/julien-dubois/5849562651/in/photostream/
• La migration D6 -> D7 n’est pas si simple (citation), et c’est éventuellement le moment de faire une refonte fonctionelle du site, afin de n’avoir qu’une migration de contenu à faire.
• La défense, un samedi matin, quand il bruine, c’est triste !

Si j’ai raconté des conneries, ou s’il faut que je complète certaines infos, n’hesitez pas, les commentaires sont fait pour ça! (Egalement en cas de faute d’orthographe qui fait saigner les yeux)

C’est pourtant assez simple de mettre ca en place. Dans le fichier template.php de votre thème, dans un hook_preprocess_page, ajoutez le bout de code suivant:

if (isset($_GET['page']) && $_GET['page'] != '') {
  $head_title = explode(' | ', $variables['head_title']);
  $head_title[0] .= ', page '.($_GET['page'] + 1);
  $variables['head_title']        = implode(' | ', $head_title);
}

et voila, quick’n'dirty !

Un des widgets possible d’un champ nodereference est la liste déroulante (select list, ou combo-box), qui permet de choisir un node parmi plusieurs dans une liste. Cette liste déroulante nous affiche les titres des nodes référençables, mais cela manque parfois de détail et on aimerait pouvoir l’altérer afin d’y ajouter d’autres informations.
Notre exemple, volontairement très simple, consiste à ajouter le nid du node à coté de son titre.

Comme pour toute altération de formulaire, on utilise le hook_form_alter(). Le champ nodereference (ici ‘field_noderef’) est fourni par cck, et si on le regarde au moment du form_alter ($form['field_noderef']), on ne verra pas l’état final du champ. En effet, CCK s’occupe de ses champs après la construction du formulaire (le ‘build’). Pour les modifier, il faut passer après (‘after_build’)

function monmodule_form_alter(&$form, &$form_state, $form_id) {
  // assurons nous d'être dans le formulaire correspondant à notre type de contenu
  if ($form_id == 'mycontenttype_node_form') {

    // ajoutons une fonction d' #after_build à notre champ nodereference
    $form['field_noderef']['#after_build'][] = 'customnoderef_select';
  }
}

Il nous reste à écrire notre fonction:

function customnoderef_select($form_element, &$form_state) {

  // #columns contient le type de clé du champ nodereference: nid (node), ou uid (user)
  $column = $form_element['#columns'][0];

  // Récupération des options par defaut
  $default_options = $form_element[$column][$column]['#options'];

  /** Alteration
   * La clé du tableau ($k) représente le nid
   * La valeur ($v) représente le titre
   */
  foreach($default_options as $k => $v) {
    $default_options[$k] = '[' . $k . '] '. $v;
  }

  // Ecriture des options altérées
  $form_element[$column][$column]['#options'] = $default_options;

  // renvoi de l'élément du formulaire
  return $form_element;
}

Et voila, il a suffit de ces 2 hooks pour altérer le widget d’un champ nodereference. La stratégie est la même pour modifier les autres types de champs CCK (En anglais, l’altération d’un champ filefield)

Notre altération reste très simple, le but de l’article étant de montrer le principe de base. En réalité, on cherchera généralement à afficher d’autres informations sur le node, comme son type, sa date de création… Dans ces cas, il faut passer par une étape de récupération d’information (Requête sur la base de données).

Sources:
http://drupal.org/node/935088
http://ossolutions.org/article/alter-cck-filefield-elements

Comme d’habitude, je suis preneur d’autres techniques, d’alternatives, de critiques constructives, de correction de typo…

Par défault, drupal ne propose pas cette option. Ce comportement est géré par la variable interne user_mail_register_no_approval_required_notify.

Il suffit donc d’ajouter cette variable comme élément du formulaire “Paramètres des utilisateurs”. J’ai choisi d’ajouter mon element à coté du champ d’edition de l’email qu’on ne souhaite pas envoyer. C’est le fieldset “Paramètres du courriel utilisateurs” > “Bienvenue, pas d’approbation requise”.

Voila le code de mon form_alter:

function MYMODULE_form_user_admin_settings_alter(&$form, &$form_state) {
  // allow admin to choose if a notification mail is sent to user (who register without approval)
  $form['email']['no_approval_required']['user_mail_register_no_approval_required_notify'] = array(
    '#type' => 'checkbox',
    '#title' => t('Send'),
    '#default_value' => variable_get('user_mail_register_no_approval_required_notify', true),
  );
}

Avec ca, on dispose d’une case a cocher “Envoyer”, qui permet d’activer/desactiver l’envoi de ces emails.

Comme d’hab, correction/remarques/insultes/bisous dans les commentaires…

En plus de pouvoir me servir dans certains de mes projets, le but avoué de ce script est pour moi l’apprentissage des bonnes pratiques de codage jQuery, sous forme de plugin, avec gestion de parametres.

Vous pouvez trouver ce script sur sa page dédiée : http://opisimpleslideshow.532px.com, et sur son dépot gitHub : http://github.com/opi/opiSimpleSlideshow.

Je ne me prétends pas expert jQuery, ni expert codeur, ni expert tout court, alors n’hesitez pas à laisser des remarques dans les commentaires de cet article, ainsi que dans la section “issues” du dépot gitHub.

Voila, en plus d’etre une bonne journée pour tout le monde, c’est une bonne journée pour moi! J’espere sortir bien d’autres petits plugins jQuery… a suivre.

Voila comment procéder avec jQuery :

$('a').bind('click', function(e){
    if (e.shiftKey) {
       e.preventDefault(); 
       //  mon action 
   }
});

Les événements utilisables sont  “shiftKey”, “altKey” et “ctrlKey”.
e.preventDefault() permet d’empecher le comportement classique lors du click sur le lien.

On peut meme utiliser des combinaisons, comme ctrl+shift+click,  ctrl+alt+click…  en utilisant l’event   “e.modifiers”. Pour plus d’info sur cet événement, voir cette page.

Comme mon cas d’utilisation était pour une interface d’admin (utilisée par des gens “compétents”), j’ai testé le bon fonctionnement uniquement dans Firefox & Chrome/Chromium. Merci de laisser un commentaire si vous constatez que ca fonctionne aussi avec ce cher IE5.5

N’hésitez pas à laisser en commentaires des exemples d’utilisations, et toutes vos remarques.