SPIP-Contrib

SPIP-Contrib

عربي | Deutsch | English | Español | français | italiano | Nederlands

286 Plugins, 197 contribs sur SPIP-Zone, 204 visiteurs en ce moment

Accueil > Squelettes > Outils pour squelettes > Zpip > Zpip, blocs de page et Ajax

Zpip, blocs de page et Ajax

15 juin 2010 – par Cerdic – 16 commentaires

16 votes

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

Le squelette Zpip n’est plus maintenu, il est remplacé par SPIPr-dist qui en reprends les mécanismes comme celui décrit ici.

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 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_options.php, 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 :

  1. // ajouter un bloc more/ qui contient les forums
  2. $GLOBALS['z_blocs'] =
  3. array('contenu', 'navigation', 'extra', 'head', 'more');

Télécharger

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 :

  1. <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 :

  1. <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 :

  1. // activer le chargement parallele sur les blocs contenu et more
  2. define('_Z_AJAX_PARALLEL_LOAD','contenu,more');

Télécharger

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.

Dernière modification de cette page le 21 novembre 2014

Retour en haut de la page

Vos commentaires

  • Le 30 mai 2014 à 18:06, par acatonne En réponse à : Zpip, blocs de page et Ajax

    vraissemblablement il faut que mes_options.php soit dans le dossier /config , et non dans /squeletes pour que la definition des blocs prennent par défaut le squelette dist.html

    Répondre à ce message

  • 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 touti 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 "&lt;"
             * 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 "&lt;"
             * 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 "&lt;"
             * 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 :

    1. <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>

    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 2e 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 Cerdic 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

    Répondre à ce message

Répondre à cet article

Qui êtes-vous ?

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici Les choses à faire avant de poser une question (Prolégomènes aux rapports de bugs. )
Ajouter un document

Retour en haut de la page

Ça discute par ici

  • Acces Restreint 3.0

    11 décembre 2008 – 784 commentaires

    Le plugin accès restreint permet de définir et de gérer des zones de l’espace public en accès restreint. Cette version du plugin a été redévelopée et optimisée tout spécialement pour SPIP 2.0. Il en découle une amélioration des performances sur les gros (...)

  • Champs Extras 3

    16 janvier 2012 – 538 commentaires

    Ce plugin permet de créer et/ou de gérer des champs supplémentaires dans les objets éditoriaux de SPIP. Il permet donc de prendre en compte et d’afficher de nouveaux éléments dans n’importe quel objet éditorial de SPIP. Screencast Vous n’aimez pas (...)

  • Réservation d’événements

    16 mars 2015 – 190 commentaires

    Ce plugin permet d’offrir aux visiteurs de s’inscrire pour un évènement du plugin Agenda et de gérer les réservations enregistrées. Installation Le plugin s’installe comme n’importe quel plugin. il nécessite : Agenda API de vérification (...)

  • Les crayons

    23 avril 2008 – 815 commentaires

    Ce plugin permet d’éditer les contenus sur les pages publiques du site, sans passer par l’espace privé de SPIP.

  • LESS pour SPIP : Less-CSS (anciennement LESSpip)

    5 novembre 2010 – 43 commentaires

    Less-CSS (Anciennement LESSpip) est un plugin intégrant facilement le logiciel LESS dans SPIP. LESS est une extension de CSS ajoutant les variables, les classes, les opérations, les imbrications au langage. Facilitant ainsi l’écriture de (...)

Ça spipe par là