SPIP-Contrib

SPIP-Contrib

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

288 Plugins, 197 contribs sur SPIP-Zone, 183 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

  • Réservation d’événements

    16 mars 2015 – 330 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 (...)

  • Objets virtuels

    15 mai – commentaires

    Ce plugin permet de gérer sur la plupart des objets éditoriaux déclarés à SPIP un lien de redirection (comme l’on peut déjà avoir sur les articles). Cette redirection, si elle est renseignée, est appliquée lorsqu’on va sur cet objet dans l’espace public. (...)

  • Module de paiement Paypal Express Checkout

    12 juin 2015 – commentaires

    Ce mode de paiement par Paypal Express Checkout est sécurisé et peut-être utilisé en toute confiance. Il permet également, dans le cadre de certaines boutiques, d’optimiser le workflow de paiement en sautant l’étape de création de compte et en (...)

  • Le plugin ZotSpip

    28 mai 2012 – 138 commentaires

    Synchronise Spip avec une bibliothèque (personnelle ou partagée) de références bibliographiques Zotero. Utilisez Zotero pour gérer / importer / rédiger vos références bibliographiques, puis incorporez vos références bibliographiques dans votre Spip avec (...)

  • ScolaSPIP 4

    19 janvier 2016 – 213 commentaires

    ScolaSPIP est plugin-squelette responsive personnalisable pour sites Web d’établissements scolaires basé sur SPIPr Présentation de ScolaSPIP Ce plugin pour SPIP 3 est développé par la Dane de l’académie de Versailles pour les webmestres de cette (...)

Ça spipe par là