Squelette Perso_Rico 1.1

Un squelette léger et complet de site personnel

Mise à jour du squelette Perso_Rico pour Spip 1.9.2

-  Nom du Squelette : Perso_Rico
-  Version du squelette : 1.1
-  Auteur : Éric SIBERT
-  Licence : GPL
-  Compatibilite SPIP : compatible SPIP 1.9.2
-  Site(s) exemple : site perso

Objectifs

Mes objectifs étaient et demeurent :
-  faire un squelette de site personnel (pas un blog) joli et léger;
-  qui s’adapte bien aux supports de rendu : écran de toute taille/résolution et imprimante;
-  facile à mettre en œuvre.

Pour ceci, je suis parti du constat que sur un site personnel comme le mien, il y a :
-  un seul auteur;
-  une seule langue;
-  pas d’intéractivité : absence de forum, de pétition mais aussi de brèves, de calendrier ...
-  articles simples : titre, sous-titre, descriptif, corps;
-  renouvellement lent du site;
-  pas de mots clés.

Les moyens

Voici les moyens utilisés et/ou requis :
-  Spip 1.9.2;
-  je suis parti du Squelette @-brest (et de Squelette Perso_rico 1.0);
-  XHTML 1.1 Strict qui j’espère permettra de s’adapter à un grand nombre de navigateurs;
-  les feuilles de style CSS utilisent des tailles relatives de police pour de meilleures mises à l’échelle (pour les vues basses);
-  un style d’impression qui maximise le texte de l’article au détriment des fioritures;
-  squelettes allégés (reste surtitre et chapeau dans article);
-  cache sur une semaine pour les articles, 24 h pour les rubriques;
-  pour le sommaire général et les rubriques, affichage des 6 derniers articles et des 6 articles les plus populaires;
-  pour le sommaire général et les rubriques, masquage dans les nouveautés des articles ayant le mot-clé invisible;
-  formulaire pour écrire à l’auteur sans montrer l’adresse email.

Nouveautés de la version 1.1

Pas de changements significatifs dans la partie visible du squelette par rapport à Squelette Perso_rico 1.0, juste le mot clé invisible. Ça attendra encore une version. Par contre, réécriture du code des squelettes pour une meilleure intégration dans Spip. De manière non exhaustive :
-  suppression des fichiers php3 et utilisation de #CACHE;
-  utilisation de INCLURE;
-  ajout d’un squelette inclus pour les entêtes xhtml;
-  en vrac, utilisation des balises : #URL_SITE_SPIP, #CHEMIN, #INSERT_HEAD, #URL_PAGE, #URL_AUTEUR;
-  suppression d’informations personnelles qui étaient codées en dur dans les squelettes;
-  amélioration la gestion des erreurs/page 404;
-  suppression du code php qui traînait dans les coins;
-  utilisation autant que possible des mots et expressions fournis en standards par Spip.

Aperçu et tests

Le sommaire
Le sommaire
Une rubrique
Une rubrique
Un article
Un article
Article formaté pour l'impression
Article formaté pour l’impression
Navigation avec Lynx
Navigation avec Lynx
PlateformeNavigateurVersionRésultat
Windows XP Firefox 2.0.0.3 Ok
Windows XP Internet Exploreur 6.0 SP 2 Ok
Windows Vista Internet Exploreur 7.0 Ok
Windows XP Mozilla 1.2.1 Des problèmes
Linux/Ubuntu FireFox 1.5.0.10 Ok
Linux/Ubuntu FireFox 1.0.7 Ok
Linux/Ubuntu Opera 9.10 Ok
Linux/Ubuntu Epiphany 2.14.3 Ok
Linux/Ubuntu Konqueror 3.5.2 Ok
Linux Lynx 2.8.5 Ok
Linux Dillo ? Ok
Linux/Debian Iceweasel 2.0.0.1 Ok
Linux/PLD Galeon 2.0.2 Ok
Mac OSX Safari 2.0.4 Ok
Mac OSX Firefox 2.0.0.1 Ok

En italique, les configurations testées par sites webs interposés (http://www.scapture.com/, http://www.browsrcamp.com/ et http://browsershots.org/).

updated on 2 October 2019

Discussion

7 discussions

  • Nouveau bug avec les versions de Spip supérieures 2.1.0. La syntaxe relatives aux documents attachés n’est plus valable dans le fichier des articles.

    Contournement :
    dans le fichier article.html du squelette, modifiez la 68ème ligne comme suit :

          [(#LOGO_DOCUMENT{#URL_DOCUMENT}<br/>]

    Un jour, je ferai une nouvelle version de mon squelette...

    Quoi? Je l’ai déjà dit dans le message précédent???

    Reply to this message

  • Je viens de découvrir un nouveau bug dans mon squelette avec les versions de Spip supérieures ou égale à 2.0.0. L’entête des fichiers générés ne pointe plus sur le bon répertoire pour chercher le fichier de style spip_style.css. Il ne faut plus aller dans dist/ mais dans prive/. Sur mon site perso, ayant fait des mises à jours successives depuis les versions <2.0,>

    Un jour, je ferai une nouvelle version de mon squelette...

    Reply to this message

  • Je viens de constater un problème avec le formulaire pour envoyer un message à l’auteur du site quand on utilise mon squelette Perso_Rico 1.1. Le bouton Envoyer un message n’apparaît pas, ce qui fait que les visiteurs ne peuvent plus envoyer de message. Je pense que ça vient d’une incompatibilité avec les versions récentes de Spip (>2.0 ?).

    La méthode pour contourner ce problème est de ne pas installer le fichier ecrire_auteur.html de mon squelette. Ce fichier se trouve normalement dans le sous-dossier formulaires de mon squelette.

    Reply to this message

  • 1

    Bonjour,
    Je débute réellement avec spip et je trouve votre site sobre et efficace. Toutefois, je souhaiterai ne pas voir apparaitre “les nouveautés” en pleine page mais plutôt les intégrer dans un petit encart latéral. J’ai tenté de faire les modifications moi-même mais en vain. Pouvez-vous me donner quelques pistes ?
    Merci

    • Bonjour,

      En fait, ce n’est pas trop un problème de Spip mais plutôt de mise à page classique (X)HTML/CSS. Vous prenez la page d’accueil générée par mon squelette. C’est du XHTML. Vous regardez le code source dans votre navigateur préféré. Vous l’enregistrez (il faut aussi aller récupérer les 3 CSS qui sont indiquées dans l’entête du fichier XHTML). Vous modifiez le code XHTML et le CSS jusqu’à ce que ça ressemble à ce que vous voulez (il y a des commentaires dedans pour retrouver ses petits). Et là, on revient à Spip, c’est-à-dire qu’on applique dans le fichier de squelette ce qu’on a fait au fichier XHTML. Seule cette dernière étape est spécifique à Spip.

    Reply to this message

  • 4

    Je me suis permis d’utilser ton squelette : je fais actuellement une maquette (avant mise en ligne au bon endroit) de la nouvelle mouture du site de mon club de plongée. Ton squelette est celui qui ressemble le plus à ce que je cherchais, puisque je ne me sens pas assez au jus pour en créer un. Un petit ennui toutefois par rapport à ce que je voulais : j’avais créé dans la première version de mon site, celle qui utilisait le squelette par défaut, des sous-rubriques dans ma rubrique “encadrement”; Puis je les faire apparaître, et si possible par dépliage du menu horizontal ?
    ma maquette est là :
    http://phil.kdo.free.fr
    Merci pour le squelette en tout cas, pour une réponse future ensuite
    Philippe

    • Les premiers développement de ce squelette ont d’ailleurs aussi été faits pour des sites de clubs sportifs...

      Pour revenir à ton problème, en fait, je ne sais pas comment on fait des menus déroulants, même en html de base. D’où une difficulté à l’intégrer dans un squelette. Mais si tu avais le code dans le premier squelette que tu utilisais et que tu le mettais ici, peut-être que je pourrais l’intégrer à mon squelette. En tout cas, c’est une idée pour la version 2.0 de Perso_Rico.

    • Je ne sais pas non plus; j’avais essayé de faire qch en utilisant le plugin “menu déroulant” mais je n’ai jamais réussi, en particulier parce que je ne sais pas “placer une noisette”. Le seul site que j’ai trouvé où on explique ce qu’est “placer une noisette” est HS pour l’instant. Je vais rééssayer sans cette foutu noisette mais j’ai peur de tout mettre en l’air
      Philippe

    • Une rapide recherche avec «Menu déroulant» donne pas mal de réponse sur spip-contrib. Comme quoi, ça pose des questions à pas mal de monde. Reste à faire le tri des réponses maintenant.

      Je ne me suis pas non plus penché sur les noisettes mais ça doit être une sorte de brique élémentaire qu’on peut intégrer dans son squelette. Par exemple, un menu déroulant fait par un autre gars à intégrer dans mon squelette.

      À suivre...

    • Après une rapide étude, j’ai donc retenu un menu déroulant s’installant en tant que plugin (là où tu as déjà posé des questions). J’ai installé le plugin suivant les instructions de l’article et celle de l’article général sur les plugin. Enfin, je suis allé modifier le fichier inc_entete.html de mon squelette qui ressemble maintenant à:

      <div id="banniere">
              #NOM_SITE_SPIP
      </div>
      
      <div id="menuheader">
      
               <INCLURE{fond=inc-menu-deroulant}{lang}>
      
      
      </div>

      Et ça marche, j’ai un menu déroulant même si l’intégration graphique n’est pas top. Mais on peut peut-être l’améliorer avec les options de mise en page du plugin (ou en modifiant la feuille de style du plugin?).

    Reply to this message

  • 3

    Bonjour,

    J’ai crée une bannière qui est plus large que celle existante, quelle sont les codes à modifier afin que celle-ci apparaisse en entier?
    Cordialement,
    pti

    • Je pense que vous prenez un peu le problème à l’envers. La bannière est une image de fond qui fait une certaine largeur. La zone pour l’afficher fait une autre largeur qu’on ne connaît pas. Elle peut d’ailleurs être assez variable entre un écran de PC de 1900 pixels de largeur et l’écran d’un PDA en 600 pixels. Donc, la même bannière sera, suivant les cas, trop large ou trop étroite. C’est le cas quand je regarde mon site chez moi sur un écran de 1280 pixels de large. Dans l’exemple de mon site, la bannière est cyclique et le bout gauche rejoint le bout droit qui fait qu’on ne voit pas le raccord. La seule astuce de la feuille de style consiste justement à dire de répéter la bannière. Dans votre cas particulier, je ne saurais que vous suggérer de réduire la largeur de votre bannière pour qu’elle s’adapte à la majorité des conditions de navigations que vous visez. Si la répétition vous gêne pour les affichages plus larges que prévus, vous pouvez la supprimer dans la feuille de style commun.css, à la ligne 41 :

      background: transparent url(../icones/bandeau.jpg) top center;

      Et si la couleur des bords de votre bannière est uniforme, vous pouvez rajouter cette couleur au fond de la zone ce qui fait qu’il n’y aura pas de coupure de part et d’autre de la bannière, toujours pour les affichages trop larges :

      background: red transparent url(../icones/bandeau.jpg) top center;

      (pour une bannière à fond rouge).

    • Merci pour vos conseils, mais je me suis mal exprimé, il s’agit de la hauteur de la bannière que je souhaite modifier, en fait je créer une bannière de la taille suivante : 800X100 mais celle ci n’apparait pas en entier dans le sens de la hauteur (100) elle reste coupée, quel code dois-je modifier ?
      Cordialement,
      Pti,

    • Bonjour,

      Ah oui, la hauteur!!! Ben, en fait, sur mon site aussi la bannière est coupée en hauteur. Si vous prenez la fenêtre du navigateur et que vous réduisez sa largeur, au bout d’un moment, le titre du site va se mettre sur deux lignes et vous allez voir le bas de la bannière. D’où deux voies possibles :
      -  vous augmentez la taille de la police du titre
      -  vous augmentez les marges autour du titre.

      Dans les deux cas, ça se fait dans la feuille de style. Je ne peux pas faire d’essais maintenant mais je dirais que c’est le paramètre padding du style banniere qu’il faut augmenter.

    Reply to this message

  • 2

    Bonjour,

    Je ne parviens pas à visionner les images que j’intègre aux articles du site.
    Comment faire?

    Merci pour votre réponse

    • Est-ce que vous arrivez à voir les images avec le squelette par défaut de Spip? Avez-vous essayé de désactiver mon squelette?

    • Merci de m’avoir répondu,
      Si je désactive votre squelette, je ne parviens pas non plus à visionner les images que j’ai intégrées aux articles, je travaille en local pour l’instant, ya-t-il un rapport ? Me manque -t- il un fichier?
      Je vous remercie pour les réponses que vous m’apporterez,

    Reply to this message

Comment on this article

Who are you?
  • [Log in]

To show your avatar with your message, register it first on gravatar.com (free et painless) and don’t forget to indicate your Email addresse here.

Enter your comment here

This form accepts SPIP shortcuts {{bold}} {italic} -*list [text->url] <quote> <code> and HTML code <q> <del> <ins>. To create paragraphs, just leave empty lines.

Add a document

Follow the comments: RSS 2.0 | Atom