Accueil > Réalisations > Projets Libres > Zpip, blocs de page et Ajax

Zpip, blocs de page et Ajax

mardi 15 juin 2010, par Cedric Morin

SPIP-Contrib.net"> Voir l'article original

L’organisation de Zpip facilite le chargement ajax de morceaux de pages.

Zpip est structuré en blocs de contenu organisés entre eux par un squelette ossature. Cette architecture peut être étendue et mise à profit pour mettre en place des fonctionnalités avancées.

Définir ses propres blocs

Le squelette Zpip-dist propose un découpage par défaut en 6 blocs de contenu : 3 blocs communs (en-tête, barre de navigation, pied) et 3 blocs déclinés par page (contenu, navigation, extra). A cela s’ajoute le head qui est partiellement décliné par page. Cette ossature commune qui fait partie du référentiel utilisé pour la construction des thèmes a été pensée pour couvrir la plupart des besoins. Néanmoins, dans certains projets, il peut être nécessaire de mettre en place un autre découpage logique des blocs dans la page. Zpip permet cela au moyen de la déclaration d’une variable globale. Dans votre fichier mes_fonctions, il suffit de lister les blocs que vous voulez utiliser sur votre projet. Par exemple, pour ajouter un bloc fonctionnel appelé « more » qui présentera des informations complémentaires, il suffit d’écrire :

On retrouve les 4 blocs par défaut ayant une déclinaison par page dans Zpip, et le bloc more ajouté dans notre cas. La seule obligation sur l’ordre de figuration des blocs est de placer en premier celui qui affiche le contenu principal (ici contenu) et qui sera utilisé comme bloc maître. Les squelettes de chaque bloc sont rangés dans un dossier de même nom (on aura dans notre cas un dossier more/ dans le dossier squelettes). A l’exception du bloc de contenu principal, tous les autres blocs doivent proposer un squelette dist.html qui affiche le contenu par défaut pour les pages n’ayant rien défini pour ces blocs.

var_zajax

Le découpage existant de la page en blocs logiques permet de faciliter le chargement partiel de page en ajax. Ainsi, Zpip permet, sans aucune modification des squelettes, de ne charger qu’un morceau de page. Pour cela, il suffit d’ajouter le paramètre var_zajax=nomdubloc à l’url de la page concernée. Par exemple, pour ne charger que le contenu de la page de login, il suffira d’écrire l’url spip.php?page=login&var_zajax=contenu Cette facilité peut être mise à profit pour réaliser des popin qui se dégradent proprement en l’absence d’ajax. Par exemple, si l’on veut ajouter un lien vers la page de login, pour s’identifier, on écrira dans le squelette :

Ce lien fonctionne dans tous les cas. Le paramètre url permet d’indiquer de revenir sur la même page après identification. On peut ensuite enrichir ce lien d’une directive javascript, pour ne charger que le formulaire de connexion, dans une popin :

Dans ce cas, si on dispose de javascript, seul le contenu de la page de login sera affiché dans une boite modale, sans quitter la page en cours. Mais si on ne dispose pas de javascript, le lien se comportera normalement, en nous envoyant sur la page de login complète. Le point fort de cette technique est qu’on ne mets en place et maintient qu’une seule page de login. Si on vient à faire une modification sur le contenu de cette page, les deux scenarii seront automatiquement mis à jour. On peut donc très facilement et rapidement enrichir l’expérience utilisateur à l’aide de javascript et d’ajax sans devoir compliquer la charge de développement !

Ajax Parallel Loading

Le chargement parallèle de blocs de contenu en ajax est une technique proposée pour améliorer le ressenti utilisateur. Elle consiste à construite la page dans des processus parallèles au lieu d’un seul bloc. La technique est détaillée dans cet article sur le blog. Pour activer le chargement séparés de certains blocs, il suffit de les déclarer dans un define dans votre fichier mes_options :

Aucune autre modification du squelette n’est nécessaire. Pour les blocs ajoutés à Zpip (comme ici le bloc more) il est simplement nécessaire de placer dans le dossier correspondant (ici more/) le squelette z_apl.html recopié depuis le dossier contenu/ de Zpip (sans aucune autre modification). Lors de la construction des pages, Zpip envoie à la place de ces blocs un morceau de javascript qui va déclencher le chargement ajax du bloc et le charger dans la page du navigateur. Comme le basculement entre chargement ajax parallèle et chargement complet peut se faire dynamiquement, Zpip peut prendre en charge

  • les robots d’indexation en leur servant la page complète,
  • les utilisateurs sans javascript, qui sont détectés au premier coup par une redirection dans un <noscript>, et ensuite repérés par un cookie pour recevoir toujours la page complète.

Ainsi, APL ne dégrade pas le référencement du site, et n’est pas une barrière à l’accessibilité aux utilisateurs dépourvus de javascript ! La mise en œuvre simple et rapide de cette fonctionnalité innovante, dans le respect de tous les utilisateurs, montre comment l’architecture et l’organisation de Zpip et son découpage des pages en blocs fonctionnels est pertinent. Par la rationalisation qu’il amène, il ouvre la porte vers de nouvelles possibilités plus compliquées à mettre en place auparavant.

SPIP-Contrib.net"> Commenter l'article original