Bidouilles sévères

Celà fait 10 jours qu’avec Damien, on prépare la refonte du site de la IAC Studio. Bien que l’existant est agréable a utiliser, il date d’il y a plus de 2 ans, il commence sérieusement à être dépassé par le nouveau Web 2.0

On a trois axes d’amélioration :

  • Look’n’Feel : le site va être beaucoup plus graphique que l’actuel monolithe. On va expérimenter un nouveau genre en le rendant un peu plus barge. On est parti de l’idée de la petite graine qui pousse. L’internaute pourra créer sa page de navigation : à chaque lien qu’il cliquera, le contenu s’ajoutera à la suite de la page courante.
  • Refaire la navigation : Elle ne va pas trop changée, on va juste déplacer 2 – 3 catégories pour le rendre plus convivial. On va développer la notion de blog.
  • Nouveaux services : On va ajouter de nouveaux services. On va commencer par agréger nos billets de nos blogs respectifs sur la Iac et il poser des mots clés Technorati. On va proposer du RSS 2.0.1 et quelques fantaisies en Javascript. Le site ne se transformera pas en usine à gaz, mais on espère rendre son utilisation agréable. Et il y aura une petite surprise pour les écrans larges.

Maintenant, vous pouvez imaginer dans quel état fébril on se trouve. Personnellement, je me retrouve assez bien dans la description de l’homme qui se couche avec son portable, publié dans cet article du NYT. Anne pourra témoigner, j’aime bidouiller sur mon MacBook.

Un nouveau monde pour un Punk nouveau

Je ferme donc le site de The Informers, mon groupe. Comme je l’annonçais quelques billets auparavant, on a splitté. Plus la motivation, plus l’envie de poursuivre. Chaque membre du groupe vaque à ses projets personnels (le mien étant de conquérir Google). Bien que je ne sois arrivé qu’à mi-parcours à 17 ans, je me suis forgé une identité avec ce groupe, appris à devenir le guitariste de vos rêves. Se fréquenter, se facher, rigoler, composer ensemble, jouer devant une audience… vivre ensemble fut un grand honneur. Il serait dommage d’oublier le groupe trop vite.

logo The Informers

The Informers, c’est Vlad et Béa qui se sont rencontrés avec une idée du Punk moderne. La musique qui en découle est trop anglaise pour les américains, trop américaine pour les anglais. Trop bien pour les frenchies. The Informers, c’est 8 tournées en Grande Bretagne, c’est une écriture politique intelligente sur une mélodie hargneuse et variée. Pas deux chansons se ressemblaient. Pas un seul thème abordé à déjà été traité par un autre groupe du genre. Je met à disposition l’histoire de ce groupe peu commun dans ce billet. Ultérieurement, je mettrai à disposition les photos.
D’autre part, on maintient toujours la distro RADICAL ROCKERS pour liquider les quelques enregistrements qu’il nous reste.

Continue reading

Si Lex l’avait su

Si Lex Luthor avait lu le blog d’Empyrée, il n’aurait pas fait tout un pataquesse pour obtenir de la Kryptonite. En effet, avec tout l’or qu’il a gagné de son héritage de Gertrude Vanderworth, il lui aurait fallu être un peu patient pour être l’heureux propriétaire d’une arme redoutable contre Superman.

Tabindex automatiques

Comme 5000 autres adhérents, je me suis déclaré sur Opquast. Ce site propose une grille d’évaluation de bonnes pratiques. Pour un site naissant, PriceMister s’en tire assez bien, j’ai validé la moitié des questions. Pourtant, je pêche sur la cinquième, qui dit que  » La navigation reste possible sur l’ensemble du site en utilisant exclusivement le clavier ». Soit sans manipuler la souris.

Il existe heureusement des attributs html qui permettent de naviguer avec la touche tabulation, ou des combinaisons de touches du type alt+lettre. C’est pourtant simple de passer cette 5me étape !

Oui et non

WordPress ne gère pas les tabindexs ni les accesskeys en php. Les coder en dur est une solution, mais bien que le PriceMister est épuré, il reste touffu en petits modules (formulaires & groupes de liens). Par exemple, sur certaines pages, Il peut y avoir :

  • le power search dans l’en-tête
  • les pages dans l’en-tête
  • la navigation dans la barre latérale
  • la gestion du compte dans la barre latérale
  • l’upload d’images et le formulaire de commentaires dans le corps de la page

Avec autant d’élément, il est difficile de coder en dur les attributs tabindex de chaque champ. De plus, il n’existe pas de plugin WordPress pour celà, c’est pourquoi je propose le mien. Il suffit d’insérer ce bout de code dans le fichier function.php de votre thème.

function tabindex($arg='') {
if(is_int($arg)) {
$_SESSION['$tabindex'] = $arg;
echo "tabindex='". $_SESSION['$tabindex'] ."'";
} else {
$_SESSION['$tabindex']++;
echo "tabindex='". $_SESSION['$tabindex'] ."'";
}
}
function tabindexStart() {
$_SESSION['$tabindex'] = 0;
}
add_action ('init','tabindexStart');

Une variable de session $_SESSION[‘$tabindex’] qui permet de garder une information persistante. C’est dans cette fonction que je stocke la dernière occurence de ma boucle.
Elle est réinitialisé lors du chargement de la page. Ensuite, à chaque appels de la fonction, elle s’incrémente d’une unité. Il suffit alors de l’intègrer dans mes fichiers de templates ainsi :



qui sera rendu ainsi :



Cette méthode fonctionne parfaitement pour les pages structurées logiquement. En cliquant sur la touche tabulation, le focus saute sur l’élément qui suit dans la page.

La fonction peut accepter comme argument un nombre entier, afin de mentionner l’ordre de recherche par tabulateur. En effet, en passant d’un élément à l’autre avec le tabulateur, c’est d’abord l’élément avec le plus petit chiffre tabindex qui sera trouvé, puis le deuxième…

Par exemple, ma page est structurée ainsi :

  1. en-tête : un power search, des pages annexes,
  2. corps de texte avec un formulaire de commentaires
  3. barre de navigation comporte la réelle navigation

Dans cet exemple, je souhaite que la navigation soit discontinue, donc j’applique ces fonctions dans le 1er éléments de chaque partie :

  1. power search > tabindex(« 1 »);
  2. navigation > tabindex(« 10 »);
  3. pages annexes > tabindex(« 100 »);
  4. formulaire de commentaire > tabindex(« 200 »);

Et là c’est magique !