Erwan Tanguy - WebDev, CMS, Réseaux sociaux, TIC, SEO & Création

SPIP : Un peu de code pour supprimer les numéros

Erwan Tanguy — 2011-05-23T20:28:29Z

Souvent sous SPIP, on utilise les numéros pour obtenir un classement (un tri) supplémentaire. Pour faire disparaître ses numéros, soit on le fait à la main via le filtre |supprimer_numero, ce qui est fastidieux, soit via un plugin comme le couteau suisse. Il existe une solution beaucoup plus simple et qui ne nécessite pas la lourdeur d'un plugin :
Dans "/squelettes/" (et non dans "/config/") vous créez un fichier "mes_options.php" qui contient ces quelques lignes PHP :

 
 $table_des_traitements['TITRE'][]= 'typo(supprimer_numero(%s))';
 
 ?>

Des colonnes en css3

Erwan Tanguy — 2011-02-21T13:24:20Z

Voici un autre exemple de ce que pourrait être le css3 : des fonctions qui permettent de gérer les colonnes dans un block.

Sur ce site vous pourrez voir des exemples concrets qui ne fonctionnent pour le moment que sur certains navigateurs (mozilla et webkit).

.multiplecolumns 
 {
 -moz-column-width: 130px; //largeur de la colonne
 -webkit-column-width: 130px; //largeur de la colonne
 -moz-column-gap: 20px; //marge entre les colonnes
 -webkit-column-gap: 20px; //marge entre les colonnes
 -moz-column-rule: 1px solid #ddccb5; //bordure de séparation
 -webkit-column-rule: 1px solid #ddccb5; //bordure de séparation
 }

Cette option a l'avantage d'être très souple à manier et j'espère qu'elle finira par être implantée dans tous les navigateurs. Après, comme toujours avec ce genre de css, il ne faut pas en abuser.

Vous pouvez allez sur ma page de mentions pour en voir un autre exemple.

Voir en ligne : Introduction css3 aux multiples colonnes

Un hack pour Chrome !

Erwan Tanguy — 2011-02-20T16:02:50Z

Me voilà confronté à un curieux problème : j'ai une différence d'un pixel sur une position entre Chrome et Firefox.

Je ne suis pas là pour dire lequel est fautif, le fait est que cette erreur d'interprétation a une répercussion assez désastreuse, vous vous en doutez. Il existe heureusement un hack pour Chrome - il y en a un sans doute aussi pour Firefox mais étant le navigateur de travail via l'outil Firebug, je préfère taper sur Chrome.

Voici le hack pour Chrome et Safari :

@media screen and (-webkit-min-device-pixel-ratio:0) {
 #nomDeLaId {
 top: __px;
 }
 }

Évidemment, si tout votre site qui fonctionne bien sous Firefox, ne donne rien sous Chrome, ce n'est pas la solution. Ce hack est à éviter au maximum, comme tous les hacks, car nous devons tenter l'écriture d'un code interprété par tous de la même manière.

The Nigth Is Ours version Traversées

Erwan Tanguy — 2011-02-20T14:33:53Z

The Night Is Ours est un texte destiné à un projet radiophonique. L'extrait ici correspond à la fin du texte.

Présentation

Erwan Tanguy — 2011-02-20T14:14:57Z

Pour créer vos sites avec des solutions simples et efficaces
Pour diffuser et référencer vos contenus

Pour éditer des contenus variés :

Vidéos ;
Audios ;
Textes ;
Photographies ;
Animations Flash ;
Widgets ou Gadgets
Sites statiques ;
CMS (SPIP)
Formation & Maintenance sur les sites

Travail préparatoire au CCNRB

Erwan Tanguy — 2011-02-20T13:45:45Z

Dans le cadre d'un travail préparatoire autour du texte "Embrasser à nouveau", Erwan Tanguy a travaillé avec un danseur, Fabrice Dasse, et un musicien, Morgan Daguenet, au CCNRB et au Garage à Rennes.

Diaporama simple en jQuery

Erwan Tanguy — 2011-02-20T12:56:30Z

Your browser does not support iframes.

Voici un diaporama assez simple, qui nécessiterait un travail supplémentaire pour rendre les effets plus subtiles, mais qui a l'avantage d'être très léger avec quelques lignes de css et de jQuery. Pour voir la totalité du code il suffit d'afficher le code source de la page, tout est accessible.

Dans le jQuery, nous écrivons trois actions.

La première action est celle du survol des vignettes :

$('#diaporama #vignette img').hover(function() {
 $(this).stop().animate({ "opacity": 1 });
 }, function() {
 $(this).stop().animate({ "opacity": .5 });
 });

L'opacité de la vignette survolée est ainsi à 100% lorsque la souris est sur l'image et reviens à 50% ensuite. Il faut bien entendu spécifier dans le css une opacité à 50% au départ.

La deuxième action est celle du clic sur la vignette pour faire apparaître dans le diaporama l'image correspondant.

Les vignettes et les images ont la même classe, sous cette forme "ix" ou x correspond en px à la distance entre l'image et le bord de la balise contenant toutes les images. Les images ici ont toutes une largeur de 400px, les classes sont donc par ordre "i0", "i400", "i800", "i1200"...

$('#diaporama #vignette p img').click(function(){
 var img = $(this).attr('class');
 var width = img.slice(1);
 $('#diaporama p#image').css('left', '-' + width + 'px');
 });

Avec jQuery, nous récupérons dans la variable img la valeur de la classe. Dans la variable width, nous ne gardons de la variable img que le chiffre, on retire le "i" avec slice. Et enfin il suffit d'attribuer une nouvelle valeur en négatif au left pour déplacer nos images. Pour ne pas voir ce qui dépasse du cadre, c'est-à-dire toutes les autres images qui sont présentes, il est indispensable d'utiliser un "overflow : hidden" et pour que la valeur de left soit active il faut définir la balise avec une position.

La troisième action concerne les flèches à gauche et à droite des vignettes, pour se déplacer dans la liste des vignettes.

$('#diaporama #vignette>img').click(function(){
 var vignette = $('#diaporama #vignette p#defile').css('left');
 var justTheNumber = parseFloat(vignette);
 var uom = vignette.slice(-2);
 if (this.id == 'previous') {
 justTheNumber += 100;
 } else {
 justTheNumber -= 100;
 };
 $('#diaporama #vignette p#defile').css('left', justTheNumber + uom);
 });

Pour déplacer la balise contenant les vignettes, il est nécessaire de récupérer la valeur du left au moment du clic pour pouvoir ensuite la modifier. On récupère ensuite avec parseFloat unique le chiffre et avec slice uniquement le px. Ensuite on ajoute ou enlève du left la largeur d'une vignette.
Il faudrait, pour bien cadrer cela, limiter ce déplacement une fois arrivé au bord gauche ou droit de la balise contenant les vignettes. Là je n'ai pas eu le temps de le faire.

Erwan Tanguy | réalisation pour formation jQuery

Voir en ligne : http://www.erwantanguy.fr/diaporama.html

Widget des Champs Libres

Erwan Tanguy — 2011-02-19T21:39:44Z

Travail préparatoire sur les différentes plate-formes (nevibes, igoogle) pour la création du widget.
Réalisation d'une console d'administration avec CakePHP pour la production des flux XML qui alimentent le widget réalisé par le Studio Kerozen.

Le widget des Champs Libres est régulièrement mis à jour au rythme de la programmation des expositions, et permet de visionner la vidéo présentant l'expo en cours, des infos pratiques et un agenda dynamique.

Voir en ligne : Widget des Champs Libres

Entrée du sampan aux Champs Libres

Erwan Tanguy — 2011-02-19T18:40:44Z

Réalisation en stop motion de l'arrivée du sampan pour l'exposition "Boat people, bateaux de l'exil" aux Champs Libres à Rennes.

Mon nouveau site enfin en ligne

Erwan Tanguy — 2011-02-19T18:26:27Z

Il était temps que je m'y mette à finaliser ce site. Le PSD préparé par Nolwenn Blouin attendait depuis plus de deux ans sur mon disque dur.

La situation d'alors était aussi très différente puisque je me retrouve maintenant en fin de contrat avec les Champs Libres et donc dans des perspectives tout à fait différente.

Il reste encore des détails à finir, des choix à faire entre l'ajax par défaut proposé par Spip et du jQuery plus maniable mais c'est fonctionnel.