Squelette Wellor

Adaptation du squelette drop-zone pour spip 1.4 avec relookage, toilettage intensif du code et rajout de fonctionnalités.

Nom du Squelette : sq-wellor

Version du squelette : 1.0

Auteur : Jead Wellor

Licence : Art Libre

Compatibilité SPIP : 1.9 / 1.9.1 / 1.9.2

Site exemple : Vision Humaine

Après de longues semaines de travail et d’expérimentation, le squelette « Wellor » est disponible en version 1.0, il s’inspire du squelette drop-zone-city (pour spip 1.4) dans le design néanmoins j’y ai rajouté de nombreuses fonction et j’ai revu le code de A à Z, pour se faire, je me suis notamment aidé de la version proposée sur le site du réseau Erasme pour leur version 1.8 modifiée. L’installation, très simple, ne diffère pas des autres squelettes, il suffit d’uploader les fichiers dans un dossier squelettes à la racine de votre spip ou dans squelette-test/sq-wellor si vous utilisez le switcher de squelettes. Je vais essayer de présenter les points importants pour son utilisation :

Compatibilité

Le squelette Wellor est compatible avec Firefox (navigateur utilisé lors de sa création), Opéra, et même Internet Explorer pour lequel un fichier css spécifique à été dédié afin de palier à ses bizarreries d’interprétation ;). D’après les tests que j’ai effectués, il tourne aussi bien sous Mac Os (j’ai testé sous un iMac 10.3.9) que sous Linux (testé sous Fedora Core 6) et Windows (testé avec un Windows media center). Bien que dans l’ensemble tout fonctionne et que tout soit parfaitement, il reste quelques petites différences, nottament sous IE Mac : le formulaire de recherche de la barre de menu qui se décale un peu vers le bas, sous Safari, le cadre autour des éléments du menu qui est plus « serré » que sous les autres navigateurs, etc...

tableau récapitulatif des compatibilités testées du squelette
Navigateur\Système Linux MacOs Windows
Firefox 2.0 oui oui oui
Opéra 9 oui oui oui
Internet Explorer - V 5.2 V 6/7
Netscape 7 - oui oui
Safari - oui -

D’autre part signalons que ce squelette est compatible avec les normes XHTML 1.0 transitional.

Les principales fonctionnalités

Entête

L’entête du squelette (fichier inc_entete) contient tout d’abord le nom de votre site ou son logo placé au dessus d’un fond gris argenté. Sur mon site, j’ai utilisé la police smudger taille 80, néanmoins, cette police n’étant pas un police normale du web, je ne peux la définir comme telle dans mon squelette, je vous conseille pour un plus beau design de créer un image avec le nom de votre site dans cette police (ou n’importe quelle autre) et de la définir comme le logo de votre site ou bien d’éditer l’image haut.jpg qui se trouve dans le répertoire IMG du squelette Wellor et de supprimer dans le fichier inc-entete les lignes suivantes :
#NOM_SITE_SPIP
et voila le tour est joué ! (normalement)
En dessous de ceci vient une petite phrase piochée au hasard (voir ci dessous dans la gestion des mots clés pour le paramétrage de ces phrases aléatoires).
Enfin vient une barre de menu avec un lien vers l’accueil, un vers la partie administrateur, vers le plan du site, le formulaire de contact et la page de lien.

Mots clés :

Le squelette est conçu pour fonctionner avec de nombreux mots clés :

pas_sommaire à un article ou à une brève permet de ne pas l’afficher dans la page d’accueil, mais aussi dans les pages plan et rubrique.

pas_menu appliqué à une rubrique permet de l’exclure de la liste des rubriques dans le menu en haut à droite, mais aussi de l’omettre dans le plan du site.

sommaire_edito définit l’éditorial du site (appliqué à un article) ce dernier apparaitra tout de la page sommaire en haut entouré d’un liserait bleu

sommaire_centre appliqué à un ou plusieurs articles permet de les mettre en valeur en les disposant en haut de la page de sommaire (juste en dessous de l’édito s’il existe)

sommaire_droite définit l’article qui sera placé juste en dessous du menu des rubriques dans la colonne de droite (il est entouré d’un liserait bleu)

rubrique_edito permet quand à lui de désigner l’article qui servira d’éditorial à la rubrique qui le contient (il est entouré d’un liserait bleu)
enfin vous pouvez définir un mot clé correspondant au nom d’un auteur pour définir l’article qui servira d’éditorial à sa page (par exemple si votre auteur s’appelle Winston Smith, il vous suffira de créer le mot clé Winston Smith (sans tiret) et de l’appliquer à l’article voulu !

citations Le mot clé citations doit être appliqué à l’article qui contient les phraes destinées à apparaitre alétoirement dans l’entête (voir ci-dessus). Les phrases que vous souhaitez voir apparaitre doivent être séparées par un \n. Dans le cas ou il n’existe pas d’artcle de citations, cet espace restera vide.

Répondre

La fonction répondre à un article ou à une brève à été rajouté par rapport au squelette drop-zone-city, d’autre part sur les pages articles, un lien à été rajouté dirigeant l’utilisateur vers une page ou il peut signaler une faute d’orthographe.

Recommandation

Un petit formulaire permettant au webnaute de recommander votre site à ses connaissances est disponible bas de page, si vous n’en voulez pas ou si vous trouvez qu’il prend trop de place, vous pouvez le remplacer par un simple lien vers spip.php ?page=recommandation

Formulaire de contact

Outre le signalement de fautes d’orthographes, un visiteur peut contacter les auteurs par deux autres moyens : le formulaire de contact présent sur la page de chaque auteur (dans la colonne de droite) ou la page « contact » qui reproduit tout simplement le formulaire de contact de l’auteur n)1, qui est logiquement le créateur du site.

Liens

Tous les liens de votre site (sites syndiqués, articles syndiqués) sont rassemblés dans une page « Liens » accessible via la barre de menu.

Personnalisation du squelette

Bien que tout soit fait pour rendre l’utilisation du squelette Wellor la plus simple possible, certaines personnalisations sont vivement conseillées

-  Les pages de contact (contact, auteur, recommandation) permettant d’envoyer des messages aux auteurs du site n’ont pas besoin d’être modifiées, il est tout de même conseillé d’effectuer des vérifications.

-  L’entête (voir plus haut)

-  les petites phrases piochées au hasard et qui apparaissent juste au dessus de la barre de menu doivent être modifiée dans le fichier phrases.txt

-  Vous pouvez personnaliser le bas de votre page (en dessous du script de personnalisation, remplacer les liens vers le squelette par un lien vers ce que vous voulez, par exemple comme sur mon site par un lien vers article de votre site...)

-  Le fichier inc-head et se meta tags :
Le fichier inc-head contient les Meta tag, c’est à dire les informations d’indexation pour les moteurs de recherche (google and compagnie) vous pouvez personnaliser (et rajouter) tout ce qui se trouve entre [(#REM) meta tags] et [(#REM) Fièrement fabrique avec SPIP ], mais surtout évitez de tripatouiller le reste qui est crucial pour le bon fonctionnement du site

A faire

Il reste encore pas mal de boulot à faire pour donner un bon squelette, quels sont les objectifs des versions suivantes ?

-  Passage aux normes XHTML 1.0 Strict (actuellement le squelette est aux normes XHTML 1.0 Transitionnal).

-  Une simplification de l’entête.

-  Fixage de tous les bugs que vous m’aurez signalés et rajout de ce que vous m’aurez suggéré.

-  Transformer les formulaires « signaler un faute d’orthographe » et « recommandation » qui sont actuellement en php dans le squelette par des formulaires spip que je ne sais pas encore faire.

-  Proposition de quelques pages personnalisées en harmonie avec le squelette pour les plugins (par exemple celui permettant de publier un article en étant simple visiteur nécessite deux pages, lesquelles bien sûr le design reste à faire).

Discussion

17 discussions

  • 2
    Hada de la Luna

    Bonsoir et encore félicitation de votre travail sur le Squelette Wellor :o))

    cela fait qq temps que je tente d’utiliser le système de pagination de SPIP dans la page « rubrique », et qd je tente de l’introduire le mode debug s’enclenche et me signale que la boucle article est récursive et qu’il n’aime pas... d’ailleurs il n’y a pas de pagination...

    mais en sortant de la boucle article, il n’aime pas non plus car alors il se dit « hors boucle »...

    Merci d’avance de vos idées et suggestions :o)

    • jead wellor

      Tout se joue dans rubrique.html, la première chose à faire, c’est de repérer cette balise qui traine dans un coin (l. 92)

      <BOUCLE_principale(RUBRIQUES){id_rubrique}{tout}>

      et de la mettre tout en haut (avant #CACHE)

      puis de repérer la fermeture (l. 134)

      </BOUCLE_principale>

      et de la mettre tout à la fin (après la fermeture du html)

      On en profite ligne 6/7/8 pour enlever ce qui est inutile :

      <BOUCLE_secteurs(RUBRIQUES){id_rubrique}{doublons}>
       <meta name="description" content="[(#DESCRIPTIF)]" /></BOUCLE_secteurs>
      <INCLURE{fond=inc-head}>

      devient

       <meta name="description" content="[(#DESCRIPTIF)]" />
      <INCLURE{fond=inc-head}>

      Passons maintenant aux choses sérieuses...
      ligne 95, on va travailler la boucle article en lui ajoutant un hors boucle afin de mettre la pagination. On oubliera pas (je pense que c’était la cause principale de votre problème) de mettre le tag pagination dans la boucle article :

      on remplace donc

       <BOUCLE_articles(ARTICLES){id_rubrique}{par date}{inverse}{doublons}>
                           <br /> <i>[(#DATE|nom_jour)] [(#DATE|jour)] [(#DATE|nom_mois|majuscules)] 
                            [(#DATE|annee|majuscules)]</i> <br />
                            [(#SURTITRE)<br />
                            ] <a href="#URL_ARTICLE">#TITRE</a> [<br />
                            (#SOUSTITRE)] 
                            
                            
                            <b>
                            [ <:par_auteur:> (#LESAUTEURS)]
                            </b> 
                           
                            [<br />
                            (#DESCRIPTIF)] 
                           
                              </BOUCLE_articles>

      par

                      <B_articles>
                      #ANCRE_PAGINATION
                            <BOUCLE_articles(ARTICLES){id_rubrique}{par date}{inverse}{doublons}{pagination}>
                                             [(#SURTITRE)<br />] 
                                      <b><a href="#URL_ARTICLE">#TITRE</a></b>  
                                      [<br />(#SOUSTITRE)] 
                                      <br /> 
                                      <i>[(#DATE|nom_jour)] [(#DATE|jour)] [(#DATE|nom_mois)] [(#DATE|annee|majuscules)]</i> 
                                      <br />
                                       [ <:par_auteur:> (#LESAUTEURS)]
                                             [<br /> (#DESCRIPTIF)]                      
                              </BOUCLE_articles>
                              [<p>(#PAGINATION)</p>]
                              </B_articles>

      Et le tour est joué !

    • Hada de la Luna

      Merci ! :o)

    Répondre à ce message

  • 1

    Bonjour,
    j’ai un nouveau soucis et là, je n’ai pas trouvé de solution. Avec le plugin Diapo, l’affichage s’effectue mal dans la partie front office. Les icones du plugin ne sont pas visibles et les images "sortent du Bloc article et mordent sur les blocs du Menu latéral. Y a-t’il à redéfinir le

     ? Ou tout simplement, comment intégrer les visuels du Diapo dans ce
     ? Merci.
    • Jead Wellor

      Le problème c’est que je ne connais pas du tout le plugin Diapo, je penses qu’il vaudrait mieux poser la question sur le forum associé au plugin, mais si tu ne trouves vraiment pas, je peux essayer...

    Répondre à ce message

  • 1

    Bonsoir,
    c’est encore moi, toujours en test de ce squelette ! Je ne trouve pas la balise #INSERT_HEAD qui doit me permettre d’utiliser le plugin diapo. Est-ce une erreur ma part ou y-a-t’il une façon de remédier à ça ?
    Merci beaucoup.

    • Oups ! Désolé. Je viens de le trouver dans le fichier « inc-head.html ». Par contre, je ne comprends toujours pas comment utiliser le Plugin Diapo. Je ne comprends pas où inscrire le raccourci clavier. Chez moi, rien ne se passe. Les images téléchargées ne s’affichent pas du tout.
      Merci encore.

    Répondre à ce message

  • 2

    En test local, je trouve ce squelette intéressant.
    Cependant, est-il possible d’avoir le texte de l’article limité à un certain nombre de caractères (ou de lignes) dans la page sommaire ? Pour l’instant, seul le titre s’affiche avec, au mieux le descriptif de ce dernier. Toutefois, tous mes articles ne disposent pas d’un descriptif, et je voudrais que le lecteurs aient une vision du contenu de chaque article.
    Merci d’avance.

    • Jead Wellor

      A priori ça serait possible,
      Essaie de remplacer, dans sommaire.html, à la ligne 101 :

      [(#DESCRIPTIF|justifier)]

      Par

      [(#DESCRIPTIF|sinon{[(#TEXTE|couper{300})]}|justifier)]

      Si ça marche ça devrait afficher le descriptifs si il existe ou dans le cas contraire les 300 premiers caractères de l’article.

      Le seul truc c’est que je suis pas certain qu’on puisse mettre une balie avec des atribust dans un « sinon ».

      N’hésite pas à me dire ce que ça donne,
      Jead Wellor

    • Super ! ça marche de façon parfaite. Merci de cette extrême réactivité et de cette réponse technique pertinente.

    Répondre à ce message

  • 2

    Bonjour Jead,

    Merci déjà pour ce magnifique travail.

    J’ai une question concernant les langues. Quels fichiers de Wellor dois-je paramétrer pour que les architectures soient exclusivement dans les langues choisies (je les ai séparés en secteur pour le français, l’anglais, l’allemand et le portugais) ?

    Merci,
    Liu Wei

    • Jead wellor

      Pour l’instant ce squelette n’est pas internationalisé, tous les mots qui apparaissent (ou presque) sont directement dans les fichiers .html... Je ne m’y connais pas trop en mutualisation, mais je crois que pour les squelette le mieux est de créer des fichiers local_fr.php local_en.php etc... qui assignent un mot ou un groupe de mot à un code. Voici la syntaxe :

      <?php
      $GLOBALS[$GLOBALS['idx_lang']] = array(
              'autre_articles' => 'Autres articles',
      );
      ?>

      ça c’était pour le français, à côté dans le local_en.php en mettrait

      <?php
      $GLOBALS[$GLOBALS['idx_lang']] = array(
              'autre_articles' => 'Other articles',
      );
      ?>

      ainsi on mettra dans les fichiers.html du squelette le code <:autre_article:> et il apparaître Autres articles si on est français, Others article si on est en anglais.

      Je vous préviens juste qu’il faut bien faire attention à ne pas laisser d’espace avant et après les balises php dans les fichiers locaux sinon ça part en cacahuète ;)

    • Cool Jead, merci.

      J’essaye cette méthode.

    Répondre à ce message

  • 1
    Hada de la Luna

    Bonjour, :o)

    je souhaite ajouter une balise meta keywords aux pages sur le principe des citations dans l’entête...

    j’ai donc repris le même principe que j’ai tenté d’adapter :

    <meta name="keywords" content="<BOUCLE_motsclefsreferencement(ARTICLES) {titre_mot=mcreferencement} {doublons}>
    <?php
    $BDDArraymc = '[(#TEXTE|textebrut)]';// Lecture de l'article et donc des mots clefs de referencement
    echo $BDDArraymc // affichage mots clefs de referencement
     ?>
    
    </BOUCLE_motsclefsreferencement>" />

    Mais ça plante lamentablement...

    Si vous aviez des idées cela serait tout simplement merveilleux...

    Merci d’avance de vos réponses et suggestions. :o)

    • Hada de la Luna

      Chuis confuse, c’est tout bête, pas la peine de reprendre du php :

              <BOUCLE_motsclefsreferencement(ARTICLES) {titre_mot=mcreferencement} {doublons}>
              [<meta name="keywords" content="(#TEXTE|textebrut)" />]
              </BOUCLE_motsclefsreferencement>

      Voili voilou :o)

    Répondre à ce message

  • Jead wellor

    Bonjour,
    je voulais juste signaler que chez moi quand j’utilise un switcher de squelette genre Skthemes ou Habillages : tout le site est décalé à droite, je sais pas trop d’où ça vient. Si quelqu’un trouve, qu’il me le dise.

    En attendant, faut mettre les mains dans le cambouilli pour tripatouiller un peu tout ça afin de donner quelque chose d’un peu présentable. ;)

    On commence par ouvrir habillage.css

    Dans body {} on remplace la margin par un padding de même valeur (apparement ya une grève des margin), on enlève margin-left et margin-right ainsi que la width.

    Dans #entête {} on rajoute margin:auto ; de même dans .tab_menu{} on rajoute margin:auto ;

    et voilà le tour est joué ya plus qu’à recommencer dans ie.css

    Apparement ça pose pas de problème si on utilise pas de switcher de squelette donc c’est peut-être une modification à garder durablement

    Répondre à ce message

  • 2
    Hada de la Luna

    Bonsoir  ;o)

    Encore mes félicitations pour votre travail avec Wellor :o)

    L’utilisation d’articles éditos pour les rubriques étant d’ailleurs des plus sympathiques, je les utilise comme « slogan »... Mais du coup, il serait souhaitable de faire disparaître le lien vers les dits articles (de fait réduits au seul titre) du menu « Dans la même rubrique » de la page article...

    J’ai bestialement tenté d’introduire le critère sur le titre_mot dans la boucle existante... Sans grand succès car soit on affiche plus rien, soit on n’affiche que cela...

    Aussi, merci d’avance de vos suggestions :o))

    • Jead Wellor

      Bonjour,
      En fait l’idée avec les mots clés, ce n’est pas d’intégrer le critère correspondant dans la boucle ou on ne veut pas qu’ils apparaissent mais plutôt de les appeler dans une boucle qui n’affiche rien à l’utilisateur puis de dire aux autres boucles de ne pas appeler les articles déjà appeler. dans notre cas concrètement on va rajouter

                      <BOUCLE_meme_rubrique(ARTICLES){id_rubrique}{titre_mot=rubrique_edito} {doublons}>
                          </BOUCLE_meme_rubrique>

      n’importe où dans la page article au dessus de la boucle en question.
      Pour des questions de clarté, je vous conseille de la mettre soit au tout début du code soit juste avant la boucle en question.
      J’avoue que je serais assez curieux de découvrir vos sites...

    • Hada de la Luna

      Merci infiniment de votre réponse :o)

      Pour les sites, dès qu’ils seront visibles en ligne, je les enregistrerais sur spip.net et puis je vous enverrais les adresses à partir du formulaire de contact :o)...

      Ceci dit, au moins pour un (le premier qui sera en ligne dans quelques jours), la charte graphique est la même à 99% son aspect ayant immédiatement séduit la personne pour qui je le fais... (donc non ce ne sont pas ma photo ni mon numéro de téléphone sur le site, ce sont les siens :oD)

      En effet, les couleurs sont exactement ce qu’elle veux et le haut met très bien en valeur son logo...

      Je peux vous donner l’adresse provisoire via le formulaire de contact si vous y tenez mais cela me parait peu utile puisque dans qq jours les dns seront changés et le monde éblouï verra la version définitive en production (et surtout ne verra pas grande différence avec le Wellor d’origine)

      Cependant au niveau code, il y a eu pas mal de changements que j’expliquerais dans une page de ce site, conformément à l’esprit des Logiciels Libres.

      Pour le second, je reprendrais le Wellor modifié mais avec quelques simplifications et un changement de charte graphique ; les couleurs du logo et de la communication étant totalement différentes (c’est plutôt dans le blanc et vert !!!)  ;o))

      Je n’ai sûrement pas fini avec les questions à vous poser... Néanmoins encore merci de votre précieuse aide et de votre travail sur Wellor :o)

    Répondre à ce message

  • 4
    Hada de la Luna

    Me r’voilà... :o))

    Encore une question « de folie »...

    lorsqu’on fait des listes à puces imbriquées :

    -* un truc 1
    -** sous truc 1.1
    -** sous truc 1.2
    -** sous truc 1.3
    -** sous truc 1.4
    -* truc 2
    -* truc 3

    et bien la puce de « truc 1 » s’affiche avec Firefox à peu près au milieu de la sous liste à puces (vers sous« truc 1.2 »)... Et de fait les puces semblent s’afficher systématiquement au milieu de la « ligne » concernée plutôt que au début...

    Bref qd la « ligne » (au sens logique html d’une liste) est longue et tient sur 3 ou 4 lignes (au sens visuel du terme) et bien la puce n’est pas au niveau de la première mais vers la 2e ou 3e... Et j’aimerais qu’elle apparaisse comme sous IE au niveau de la 1re... Surtout qd il y a des sous listes...

    On fait comment M’sieur ?

    Merci d’avance de vos réponses  ;o))

    • jead wellor

      Mmmm c’est une pure question html/css ou mon squelette rentre en jeux ?
      En tout cas je me suis moi même déjà posé la question, vous utilisez une puce normale ou une image comme puce ?
      Si c’est le cas, on ne peut pas la placer facilement avec la propriété list-style-image, il vaut mieux utiliser background avec un code dans ce genre là :

      li {
      list-style-type: none;
      background-image: url(puce.png);
      background-repeat: no-repeat;
      background-position: left top; // et là c'est pour bien placer, on peut aussi mettre 0% 0% et ajuster...
      padding-left: 15px;  //ça c'est le retrait à gauche
      }

      Voilà toute ma science

    • Hada de la Luna

      C’est un souci que j’ai sur Wellor uniquement... Je ne me permettrais pas de poser une question ne le concernant pas ici...

      Je n’utilise rien de particulier n’ayant rien changé à cela sur votre squelette (est ce une puce faite avec une image ?)

      la puce en question se présente comme sur votre site, par exemple dans le pavé « Dernières discussions » devant « On a signé un bail de 5 ans, combiens en prime ? » non pas en face de la première ligne mais entre les deux... Du coup quant c long, voire avec une sous liste l’affichage n’est pas terrible et fait très « bug »

      Merci d’avance de votre retour sur la question  ;o)

    • Jead Wellor

      ah oui, exacte, c’est vraiment tout bête ;)

      dans habillage.css
      il faut remplacer

      li {
       background-image: url(IMG/002/puce_fleche.png);
       background-repeat: no-repeat;
       background-position: left center;
       list-style-type: none;
      padding-left: 10px
       }

      par

      li {
       background-image: url(IMG/002/puce_fleche.png);
       background-repeat: no-repeat;
       background-position: left top;
       list-style-type: none;
      padding-left: 10px
       }

      On met tout simplement un top à la place du center dans le background-position.

    • Hada de la Luna

      Merci :o)) ça fonctionne tout à fait bien !

    Répondre à ce message

  • 2
    Hada de la Luna

    Bonjour  ;o)

    Toujours en train de travailler sur Wellor, il semble que les caractères dans les tableaux s’affichent en beaucoup plus petit que le texte hors des tableaux...

    Or j’ai besoin qu’ils soient aussi lisibles que le reste du texte... Où cela se trouve t’il dans le CSS et que faut il changer ?

    Merci d’avance de vos réponses :o)

    • Jead Wellor

      Oula...
      Je n’ai absolument pas touché aux tableaux, c’est donc la configuration par défaut de SPIP qui, si je ne m’abuse, se trouve rangée quelque part dans Dist.
      C’est tout ce que je sais, désolé :(

    • Hada de la Luna

      j’ai trouvé... :o)

      dans « habillage.css » comme dans « ie.css »

      vers la ligne 744, il faut placer

      font-size: 1.27em;

      dans

      TABLE.spip {
      }

      d’où :

      TABLE.spip {
      font-size: 1.27em;
      }

      1.27 étant la taille souhaitée de caractères...  ;o))

    Répondre à ce message

Ajouter un commentaire

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

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom

Dernière modification de cette page le 30 mars 2007