Avec Mosquito, on vient de livrer le nouveau site de la Fémis :

ARNO* ART LIBRE 16/12/2013

Avec Mosquito, on vient de livrer le nouveau site de la Fémis :
▻http://www.femis.fr

C’est du #SPIP_3, #responsive, #HTML5 (et du #shameless_autopromo évidemment).

Parmi les points originaux…

– Le menu de navigation principal avec son animation « gauche-droite » au survol. Le javascript est très simple, et l’animation est directement en transition CSS. Dans chaque menu, les colonnes des rubriques/sous-rubriques sont aussi équilibrées que possible, et c’est fait directement avec Masonry.

– Les images passent par mon plugin « image_responsive », ce qui permet de gérer différentes tailles, ainsi que le chargement d’images deux fois plus grandes pour les écrans haute définition.

– Il y a réellement très peu d’images pour réaliser l’interface graphique. C’est essentiellement des CSS avec des dégradés discrets, des ombres portées… Comme d’habitude, mon plugin « CSS imbriqués » est très utile pour faciliter le codage (CSS avec gestion des préfixes et des variantes de navigateurs, code hiérarchisé, inversion des #media_queries…).

– La moteur de recherche (c’est du pur SPIP/Fulltext) bénéficie de petites améliorations dans les squelettes. (C’est accessible via la loupe en haut à gauche de la page.) La première consiste à faire des suggestions lorsqu’on commence à taper un mot. Tu tapes « réali », et ça te déplie des suggestions : « réalisation, réalisateurs, réalisateur, réalisé, réaliser… » classées en fonction de la présence de ces mots dans le site. Une fois que tu as validé ta recherche, la page de résultats est classique, mais avec un détail : le texte « descriptif » de chaque article est calculé pour afficher le terme recherché, surligné dans son contexte (habituellement on affiche simplement le début du texte comme partout dans le site ; là il y a un calcul amusant).

– Une grosse partie du boulot a consisté à refondre la base de donnée des anciens élèves. D’abord créer des moulinettes pour réorganiser l’ancienne base de données dans ma nouvelle structure. Ensuite évidemment gérer l’affichage sur le site (avec SPIP, cette partie, c’est assez finger in ze noze). Et surtout : des formulaires pour que chaque ancien étudiant gère lui-même sa fiche, ses infos personnelles, sa filmographie, son CV structuré… Le tout en essayant de proposer des interfaces aussi intuitives que possible, ce qui est toujours une gageure quand on a des formulaires un peu complexes.

– Ça faisait carrément longtemps : on utilise les brèves de SPIP ! (Pour l’« Actualité des diplômés »).

– Comme à mon habitude, la page d’accueil et le footer sont construits avec une « rubrique technique » invisible, laquelle contient des sous-rubriques pour structurer, et il faut donc publier des « articles virtuels » qui redirigent vers ce qu’on veut. C’est un peu plus contraignant que d’autres techniques, mais c’est ce qui donne la plus grande souplesse (on peut « référencer » des articles, des rubriques, des pages distantes…, forcer le classement qu’on veut en page d’accueil, utiliser des titres et des descriptifs plus adaptés…).

ARNO* ART LIBRE

RastaPopoulos @rastapopoulos CC BY-NC 16/12/2013

Comme à mon habitude, la page d’accueil et le rooter sont construits avec une « rubrique technique » invisible, laquelle contient des sous-rubriques pour structurer, et il faut donc publier des « articles virtuels » qui redirigent vers ce qu’on veut. C’est un peu plus contraignant que d’autres techniques, mais c’est ce qui donne la plus grande souplesse (on peut « référencer » des articles, des rubriques, des pages distantes…, forcer le classement qu’on veut en page d’accueil, utiliser des titres et des descriptifs plus adaptés…).
Héhé, par deux fois déjà, j’ai opté pour exactement la même technique, afin de sélectionner les contenus listés dans un carrousel d’accueil. Cela permet d’avoir une image différente, pas forcément intégrée au contenu final qui est lié, pareil pour le titre et le descriptif, qui peuvent être propres à l’accroche, et ça permet effectivement aussi de rediriger vers un autre contenu externe.
Pour ne pas faire de bidouille, ça pourrait mériter un plugin dédié, du genre « Sélections de contenus », où on pourrait en créer autant qu’on veut, avec un identifiant textuel non lié à la base (ce qui permet de l’utiliser dans les squelettes génériquement), et qui permettrait alors de sortir :
<BOUCLE_news_accueil(SELECTIONS){identifiant=news_accueil}>
LOGO_SELECTION
TITRE
DESCRIPTIF
LIEN (celui ci pouvant gérer à la fois une URL classique, ou un identifiant de contenu SPIP du genre : « evenement1234 »)
</BOUCLE_news_accueil>
Avec une interface bien fichue pour les administrer. Ça sera plus facile et plus facilement compréhensible (car pas un détournement).

RastaPopoulos @rastapopoulos CC BY-NC
Fil @fil 16/12/2013

t’as oublié le favicon :)

Fil @fil
RastaPopoulos @rastapopoulos CC BY-NC 27/07/2014

Salut @arno,
j’ai enfin pris le temps de commencer ce plugin de sélections éditoriales.
Voici le premier commit :
▻http://zone.spip.org/trac/spip-zone/changeset/83884
Tu peux donc te faire une sélection « accueil », une autre « footer », etc. Et les récupérer facilement dans tes squelettes :
<BOUCLE_une(SELECTIONS){identifiant=accueil}> <BOUCLE_contenus(SELECTIONS_CONTENUS){id_selection}> <a href="#URL"> #LOGO_SELECTIONS_CONTENU #TITRE #DESCRIPTIF </a> </BOUCLE_contenus> </BOUCLE_une>
Et dans le champ « url », tu peux y mettre :
– soit un URL complet quelconque
– soit un objet SPIP sous la forme « article123 », « evenement456 », « rubrique789 ».
Dis moi ce que tu en penses.
(Et comme le dit le commit, viendra ensuite l’ajout de sélections en-dessous d’un objet SPIP. Lorsqu’on le veut.)

RastaPopoulos @rastapopoulos CC BY-NC
RastaPopoulos @rastapopoulos CC BY-NC 4/08/2014

Oublié de le dire :
1) j’ai ajouté la création d’une sélection sous un contenu SPIP (un article par exemple), et
2) j’ai modifié le formulaire d’ajout d’un contenu sélectionné pour le rendre plus pratique : seule l’URL est obligatoire, et si on ne met que ça, la magie va chercher le titre du contenu SPIP (si on a mis « article1234 » par exemple) ou le titre de la page HTML (si on a mis un URL http).

RastaPopoulos @rastapopoulos CC BY-NC

Écrire un commentaire