Zpip est structuré en blocs de contenu organisés entre eux par un squelette ossature, body.html. 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 :
- // ajouter un bloc more/ qui contient les forums
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 habituellement dans le squelette :
- <a href="[(#URL_PAGE{login}|parametre_url{url,#SELF})]">Se connecter</a>
Ce lien fonctionne dans tous les cas. Le paramètre url permet d’indiquer de revenir sur la même page après l’identification.
On peut ensuite enrichir ce lien d’une directive javascript, pour ne charger que le formulaire de connexion, dans une popin :
- <a href="#URL_PAGE{login}" onclick="jQuery.modalbox('[(#URL_PAGE{login}|parametre_url{url,#SELF}|parametre_url{var_zajax,contenu})]');return false;" >Se connecter</a>
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 met 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 :
- // activer le chargement parallele sur les blocs contenu et more
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.
Vos commentaires
# Le 5 février 2011 à 11:17, par Got
En réponse à : Zpip, blocs de page et Ajax
J’utilise cette fonctionnalité pour afficher un formulaire d’edition d’article depuis l’espace public.
J’utilise aussi le plugin Ckeditor.
Le problème que je rencontre, c’est que lorsque le popin s’affiche, j’ai bien le formulaire mais Ckeditor n’apparait pas.
Par contre quand je me rend sur la page du formulaire, Ckeditor est bien présent.
Je suppose que le problème vient du chargement qui ne s’effectue uniquement sur le contenu.
Y’a t’il une solution pour pouvoir charger en même temps Ckeditor ??
Merci
Répondre à ce message
# Le 11 janvier 2011 à 09:54, par Stéphane Santon
En réponse à : Zpip, blocs de page et Ajax
// ajouter un bloc more/ qui contient les forums$GLOBALS['z_blocs']=array('contenu','navigation','extra','head','more');
Ce code est-il nécessaire pour la gestion des INCLURE de ZPIP ou bien seulement pour que ZAJAX fonctionne ?
Autrement dit, si je n’utilise pas ZAJAX, faut-il vraiment déclarer les nouveaux blocs ? Il semble que ça marche sans, mais y aura-t-il un problème par ailleurs ?
Répondre à ce message
# Le 16 décembre 2010 à 12:51, par echo
En réponse à : Zpip, blocs de page et Ajax
Bonjour,
Très intéressante fonctionnalité.
Je voudrais savoir si dans un lien de type
[(#URL_ARTICLE|parametre_url{var_zajax,contenu})] class="boxIframe boxWidth-800px boxHeight-600px"Il serait possible de profiter de la fonctionnalité JQuery de load, qui permet de ne charger que le div demandé.
$('#result').load('ajax/test.html #container');On pourrait ainsi avoir
[(#URL_ARTICLE|parametre_url{var_zajax,contenu}||parametre_url{fragment,contenu-principal}
)]
Ce serait carrèment bien
merci
Répondre à ce message
# Le 4 décembre 2010 à 15:05, par Jean-Noël
En réponse à : Zpip, blocs de page et Ajax
Bonjour,
Quelques soucis avec parallele loading. (sur les colonnes ’navigation’ et ’extra’ du site en dev
Lorsque je l’active, autocomplete du plugin messagerie ne fonctionne pas.
Lorsque je le désactive, le dependent_select de recherche avancée ne fonctionne plus et grosse surprise.... je n’ai plus de bloc « extra » dans la page « mon atelier » - tout est dans le bloc « navigation » !?
# Le 4 décembre 2010 à 15:21, par Jean-Noël
En réponse à : Zpip, blocs de page et Ajax
Je me réponds,
J’avais une balise javascript mal fermée.
Toujours un souci avec le dependent_select, mais la solution ne doit pas être loin....
Répondre à ce message
# Le 2 novembre 2010 à 23:01, par julien
En réponse à : Zpip, blocs de page et Ajax
Bonjour,
j’ai un petit problème avec le parallèle load.
Lorsque celui-ci est activé, j’ai des erreurs HTML.
C’est pareil chez vous ?
Cordialement
ju
Mon rapport :
1. Warning Line 145, Column 49: character "&" is the first character of a delimiter but occurred as data
myurl = myurl[0] + ((myurl[0].indexOf("?")>0)?"&":"?") + "var_zajax=contenu";
✉
This message may appear in several cases:
* You tried to include the "<" character in your page: you should escape it as "<"
* You used an unescaped ampersand "&": this may be valid in some contexts, but it is recommended to use "&", which is always safe.
* Another possibility is that you forgot to close quotes in a previous tag.
2. Warning Line 150, Column 10: character "&" is the first character of a delimiter but occurred as data
if (h && jQuery("<div></div>").html(data).find(h).length>0) jQuery(h).positi…
✉
This message may appear in several cases:
* You tried to include the "<" character in your page: you should escape it as "<"
* You used an unescaped ampersand "&": this may be valid in some contexts, but it is recommended to use "&", which is always safe.
* Another possibility is that you forgot to close quotes in a previous tag.
3. Warning Line 150, Column 11: character "&" is the first character of a delimiter but occurred as data
if (h && jQuery("<div></div>").html(data).find(h).length>0) jQuery(h).positi…
✉
This message may appear in several cases:
* You tried to include the "<" character in your page: you should escape it as "<"
* You used an unescaped ampersand "&": this may be valid in some contexts, but it is recommended to use "&", which is always safe.
* Another possibility is that you forgot to close quotes in a previous tag.
4. Error Line 150, Column 25: document type does not allow element "div" here
if (h && jQuery("<div></div>").html(data).find(h).length>0) jQuery(h).positi…
✉
The element named above was found in a context where it is not allowed. This could mean that you have incorrectly nested elements -- such as a "style" element in the "body" section instead of inside "head" -- or two elements that overlap (which is not allowed).
One common cause for this error is the use of XHTML syntax in HTML documents. Due to HTML's rules of implicitly closed elements, this error can create cascading effects. For instance, using XHTML's "self-closing" tags for "meta" and "link" in the "head" section of a HTML document may cause the parser to infer the end of the "head" section and the beginning of the "body" section (where "link" and "meta" are not allowed; hence the reported error).
5. Error Line 155, Column 80: document type does not allow element "meta" here
<meta http-equiv="refresh" content="2;url=spip.php?rubrique3&var_zapl=non">
✉
The element named above was found in a context where it is not allowed. This could mean that you have incorrectly nested elements -- such as a "style" element in the "body" section instead of inside "head" -- or two elements that overlap (which is not allowed).
One common cause for this error is the use of XHTML syntax in HTML documents. Due to HTML's rules of implicitly closed elements, this error can create cascading effects. For instance, using XHTML's "self-closing" tags for "meta" and "link" in the "head" section of a HTML document may cause the parser to infer the end of the "head" section and the beginning of the "body" section (where "link" and "meta" are not allowed; hence the reported error).
6. Error Line 155, Column 81: end tag for "meta" omitted, but OMITTAG NO was specified
<meta http-equiv="refresh" content="2;url=spip.php?rubrique3&var_zapl=non">
✉
You may have neglected to close an element, or perhaps you meant to "self-close" an element, that is, ending it with "/>" instead of ">".
7. Info Line 155, Column 2: start tag was here
<meta http-equiv="refresh" content="2;url=spip.php?rubrique3&var_zapl=non">
# Le 11 novembre 2010 à 17:48, par Julien
En réponse à : Zpip, blocs de page et Ajax
Suis-je le seul à avoir un code invalide à cause de cette option ?
Répondre à ce message
# Le 15 septembre 2010 à 11:29, par didier
En réponse à : Zpip, blocs de page et Ajax
Bonjour,
j’utilise le code suivant :
mais j’aimerais contrôler les dimensions de la fenêtre ?
merçi par avance
Répondre à ce message
# Le 24 juillet 2010 à 12:35, par Shnoulle
En réponse à : Zpip, blocs de page et Ajax
Concernant le nouveau/futur modèle de box, est ce que ca veut dire qu’il faut que les thèmes prennent en compte ce modèle ?
En regardant dans la source de la page d’exemple, on trouve 2 nouveaux lien css, donc pour le thème : 2 choix : soit création de 2 fichiers box.css et box_skin.css remplaçant les css par défaut, soit surcharge dans habillage.css .
Dans le 2ème cas, on ajoute 2 nouveaux fichiers inutile, c’est dommage (déjà que pour certain style.css est inutile) Serait il possible d’avoir une option dans les thèmes pour ne pas ajouter les 2 css ? Envisage tu une autre solution ?
Merci
# Le 24 juillet 2010 à 12:39, par Cedric Morin
En réponse à : Zpip, blocs de page et Ajax
ce genre de question qui concerne un développement en cours est plutôt à poser sur la liste spip-zone@rezo.net
# Le 24 juillet 2010 à 12:52, par Shnoulle
En réponse à : Zpip, blocs de page et Ajax
Oups :)
Désolé, je fais un retour via spip-zone, mais comme la doc est à jour sur les box ici. :rougedehonte :
Répondre à ce message
# Le 11 juillet 2010 à 19:29, par Maïeul
En réponse à : Zpip, blocs de page et Ajax
A l’adresse http://files.spip.org/spip-zone/ où l’APL est installé.
Lorsque je clique sur la lettre B dans la liste des liens en haut à gauche, je devrais tomber sur http://files.spip.org/spip-zone/#balise_session.
Au lieu de quoi, de temps en temps (j’ai l’impression que c’est si tu charge deux fois la page mais pas sûr) je tombe sur http://files.spip.org/#balise_session.
En désactivant JS, pas de souci.
Répondre à ce message
# Le 16 juin 2010 à 02:22, par DD
En réponse à : Zpip, blocs de page et Ajax
Bonjour,
Je teste ce varzajax sur une page article ou s’affichent les titres de ses évènements.
Le but est de cliquer sur le titre de l’évènement et d’en voir les détails dans une popin
Je ne sais pas si c’est possible ou alors si c’est moi qui merdouille mais la popin s’ouvre toute noire et la roue tourne inexorablement.
Dans l’article j’ai :
(je coupe les lignes exprès)
<a href="[(#URL_PAGE{agenda,id_evenement=#ID_EVENEMENT,id_article=#ID_ARTICLE})]"[ title="(#TITRE|attribut_html|couper{80})"] onclick="jQuery.modalbox('[(#URL_PAGE{agenda,id_evenement=#ID_EVENEMENT,
id_article=#ID_ARTICLEl{var_zajax,contenu})]');return false;" >#TITRE</a>
J’ai une page page-agenda dans /contenu
qui contient seulement un appel au modèle
#MODELE{evenement_vevent}si j’ai bien compris je n’ai pas besoin de redéclarer de bloc puisque page-agenda existe ?
merci
dd
# Le 2 juillet 2010 à 23:34, par DD
En réponse à : Zpip, blocs de page et Ajax
J’ai trouvé : je n’avais pas mis le
|parametre_urlRépondre à ce message