Webetab-Light

Webetab-Light est un squelette simple pour établissements scolaires ou associations.

Introduction

Webetab-Light est un squelette pour SPIP développé par le lycée Savary de Mauléon des Sables d’Olonne.

Il a été conçu pour être simple d’utilisation et facile à relooker et est destiné aux établissements scolaires, associations, ...

Fonctionnalités :

  • une page d’accueil avec éditorial, brèves et liste des derniers articles publiés.
  • un menu latéral déroulant présentant l’arborescence du site en rubriques, sous-rubriques (...) et articles.
  • une page pour afficher les résultats des recherches.

Vous pouvez le voir en démonstration sur le site du BTS informatique des Sables d’Olonne (remarque : ce site est privé : le contenu des articles n’est pas accessible).

Remarque : par défaut avec ce squelette, l’accès au contenu n’est possible qu’aux utilisateurs authentifiés. Pour que le site devienne public, il suffit de supprimer (ou de commenter) la première ligne du fichier article.html du squelette.

Installation

Extraire l’archive et placer les fichiers dans le dossier squelettes de spip (à créer). La documentation présente dans l’archive (fichier documentation_webetab-light.odt) explique ensuite la procédure à suivre pour configurer le squelette (en 5 minutes) et créer les pages d’accueil et de mentions légales.

Relookage

Pour relooker, il suffit d’éditer le fichier couleurs.css (cf documentation) et de changer l’image de la bannière (images/bandeau.jpg) et du pied de page (images/pied.jpg). Les logos peuvent êtres changés ou supprimés (en éditant pied.html).

Licence

Webetab-Light est distribué sous licence CECILL-2 (logiciel libre).
frank (point) endres (chez) ac (tiret) nantes (point) fr

Téléchargement

La version 1.8.0 (du 30/10/2009) ajoute la possibilité de s’authentifier sans passer par l’espace privé.

  • webetab-light-1.8.0-md.zip
  • wl-1.7.2-to-1.8.0.patch

La version 1.7.2 (du 08/05/2009) corrige un problème d’affichage des titres d’articles avec IE (cf messages du forum) et rétablit la validation XHTML 1.1.

  • webetab-light-1.7.2-md.zip
  • wl-1.7.1-to-1.7.2.patch

La version 1.7.1 (du 26/03/2009) corrige le problème d’impression (seule la première page était imprimée) et un défaut d’affichage pour les tableaux (ces deux problèmes sont liés à la propriété « overflow : hidden » nouvellement appliquée à la zone « contenu »).

La version 1.7.0 (du 23/03/2009) corrige le problème d’affichage avec IE7 et ajoute la possibilité de commenter les articles (si les forums sont actifs).

Un petit plugin facultatif ajoutant quelques raccourcis typographiques est également disponible :

  • permet plusieurs niveaux d’inter-titres : '{2{...}2}', '{3{...}3}' et '{4{...}4}',
  • et les acronymes : BTS.
    wl-typo-1.2.zip

Discussion

26 discussions

  • 2

    Pour le problème d’affichage du menu, je pense qu’il peut s’agir des propriétés « list-style-position », « padding » ou « margin ». Vérifier ces propriétés pour les balises « ul », « li » et la zone « menu ».

    • Merci, malheureusement j’ai déjà vérifié ces propriétés... Le fichier Positionnement.css est scrupuleusement identique pour les balises ul li et la zone menu etc... au modèle de base, hors j’ai vérifié, le bug n’est pas présent sur le site-exemple...

    • Bon j’ai trouvé, le bug était orchestré par le fait qu’il y avait un espace de trop à la première ligne du fichier positionnement.css :
      /* ---------- proprietes communes ---------- */
      * margin : 0 px ; padding : 0 px ;

      qu’il faut remplacer par :
      * margin : 0px ; padding : 0px ;

      Cet espace devait être présent dans les anciennes versions, et fait apparement bugger IE...

    Répondre à ce message

  • 1

    Bonjour !

    Effectivement, vous avez beaucoup personnalisé le squelette ! Il est prévu pour être facilement modifiable, et j’espère qu’il vous a satisfait sur ce point. Vous utilisez certaines fonctionnalités qui ne me sont pas utiles pour l’instant,mais je suis intéressé par les changements d’aspects / couleurs que vous avez effectué. Peut être pourriez vous m’envoyer un correctif / patch (« diff -Naur original modification ») ou le lien vers votre site ? Je vous en remercie d’avance.

    Frank Endres

    • Absolument, je vous enverrais l’url dès que le site sera en ligne (c’est également un site d’établissement scolaire, mais publique pour ma part).
      Je viens de remarquer que vous avez résolu le problème des tableaux également (qui n’était pas totalement affichés sous IE ou FF je ne me souviens plus). J’avais résolu le problème également même si ce n’était pas de la même manière en modifiant directement le apparence.css (en positionnant le width de table sur 99% au lieu de 100).

      J’ai cependant un petit problème, je viens a peine de découvrir qu’un petit problème d’affichage survient sous IE (encore ces problèmes de compatibilité) je travaille sur FF 3.0 et j’ai le mauvais reflex de ne pas aller régulièrement regarder les effets sous IE 7.

      Malheureusement, mauvaise surprise aujourd’hui en testant sous IE, j’ai un décallage de presque tout le texte sur la droite (et qui n’est pas présent sur FF 3.0) : dans le menu, dans la partie ’Focus’, ainsi que les ’derniers articles’.
      Auriez vous idée d’où cela peut-il venir ? Je suppose que ça a un rapport avec un quelconque padding, mais je ne me rappelle pas en avoir modifié, ou très peu...

      Merci pour vos réponses.

    Répondre à ce message

  • Tout d’abord bonjour,

    Je voudrais féliciter votre travail qui m’a largement satisfait dans son ensemble. Personnellement, j’ai effectué quelques changements, que je vous liste ici pour que vous puissiez éventuellement piocher dans ce qui pourrait vous intéresser (en vrac avec certainement un certain nombre d’oublis malheureusement, je n’ai pas listé les modifications au fur et à mesure) :

    -  Ajout : de la date de publication et de l’auteur à la fin d’un article.

    -  Ajout : des derniers articles écris par cet auteur à la fin d’un article

    -  Ajout : d’une page de présentation de l’auteur avec :
    * Sa biographie (si renseignée) ;
    * Son logo (éventuellement une photo, si renseigné) ;
    * La totalité des articles écrits par cet auteur ;

    -  Modification : De la gestion des liens hypertextes inter-site en ajoutant un soulignement ainsi qu’un changement de couleur, afin d’être en phase avec les normes communes.

    -  Modification : Classification des articles par dates de publication (si aucun numéro n’est précisé) et non par numéro d’id.

    -  Modification : de différentes couleurs/aspects avec entre autres :
    * La couleur de mise en évidence (désormais violet clair) ;
    * Suppression du soulignement du titre des brèves (pour ne pas confondre avec un lien hypertexte, puisque non cliquables) ;
    * Suppression des boutons grisés au clic (on se retrouve vite avec un menu gris) ;

    -  Ajout : d’une présentation succinte du tout dernier article en présentant sa description (si renseignée) ou les 200 premiers caractères, pour les utilisateurs réguliers.

    -  Ajout : d’une bannière permettant une aération du site.

    Tout n’est certainement pas bon à prendre, et ces modifications ne présentent aucune prétention quant à votre travail. Je pense simplement qu’il peut être intéressant d’échanger les avis sur l’ergonomie globale et les fonctionnalités du site, si jamais cela peut vous servir.

    Répondre à ce message

  • La colonne centrale peut prendre la largeur de toute la page : il « suffit » de modifier le fichier « pied.html » pour que le div menu soit placé à l’intérieur du div contenu (simplement inverser les deux premières lignes) ;
    ensuite, il faut éditer le fichier « positionnement.css » pour définir une largeur de 100% pour le div contenu et retirer pour cet élément la propriété « float:right » : (« #contenu width : 100% ;  »)

    Cordialement,
    Frank Endres

    Répondre à ce message

  • Bonjour,

    Je tiens d’abord a vous féliciter pour ce squelette, qui est assez bien fait. Maintenant j’ai quelques désagrément avec l’affichage, car la colonne de centre est assez grande et celles de gauche et droite sont un peu vides, comment remedier a cela ? y a-t-il une possibilité que la colonne centrale prenne la largeur de toute la page une fois toutes les rubriques affichées ?

    Cordialement, Nina.

    Répondre à ce message

  • 1

    Effectivement le squelette ne gère pas les notes de bas de page. Il ne prends en compte que le titre, le sous-titre et le contenu de l’article, mais l’édition du fichier « article.html » devrait vous permettre de rajouter la balise nécessaire à l’affichage de ces notes : un « #NOTES » après la balise « <p>#TEXTE</p> » devrait faire l’affaire.

    • Oui effectivement j’aurais pu me creuser un peu la tête en cherchant si il existait une balise #NOTES...
      Je n’ai actuellement pas le temps de tester mais cette solution fonctionne certainement, merci et bonne continuation !

    Répondre à ce message

  • Bonjour,

    J’ai un problème concernant les notes de bas de page, qui n’ont pas l’air de fonctionner.
    Je ne sais pas vraiment si cela est dû au squelette ou si le plugin qui gère la note bas de page est défaillant, mais je pense que c’est plutôt un problème de squelette, j’explique pourquoi :
    Les notes de bas de pages marchent bien en mode prévisualisation, ainsi qu’après avoir validé l’article, mais elles ne fonctionnent pas lorsque l’on visite l’article sur le site. Le chiffre de la note s’affiche, est cliquable, et change l’url après clic, mais rien ne se passe (d’ailleurs la note n’est pas affichée en bas de la page).

    Un autre petit problème également, lorsque l’on classe les articles avec les numéros (01. 02. 03. ...), les numéros ne s’affichent pas directement dans le menu, mais ils s’affichent par contre dans la bulle d’aide si l’on laisse la souris sur l’article, comment faire pour supprimer également les numéros dans la bulle d’aide (voir supprimer la bulle d’aide si la première solution est impossible) ?

    Merci d’avance pour vos réponses

    Répondre à ce message

  • 1

    Pour le problème d’arrondi avec IE, je pense qu’il suffit dans le fichier positionnement.css de remplacer la ligne :
    h1 { margin-left: 0px; /* pour IE */ padding-top: 0.4em; padding-bottom: 0.4em; }
    par : h1 { margin-left: 0px; /* pour IE */ line-height: 1.8em; }

    Pourriez vous me confirmer le bon fonctionnement (frank point endres chez ac-nantes point fr) pour que j’intègre cette solution dans la prochaine version ?

    • Effectivement, cette solution fonctionne parfaitement, sous IE 7 comme sous FF 3.0.

      Merci pour votre aide.

    Répondre à ce message

  • Bonjour, tout d’abord, merci cy_altern pour ta proposition d’amélioration. Je l’intègrerait dès que possible dans la nouvelle version (révision / correctif) de Webetab-Light avec d’autres petites corrections.

    Pour ce qui est de l’authentification et de la restriction d’accès à certaines rubriques seulement, j’ai moi aussi utilisé le plugin d’accès restreint avec WL, mais je l’ai abandonné car avec une centaine d’utilisateurs (et beaucoup d’autorisations relativement complexes), le site était considérablement ralenti ; peut être la nouvelle version aura t-elle de meilleures performances, mais - si mes souvenirs sont bons - ce plugin fonctionne très bien avec une trentaine d’utilisateurs (pour l’utiliser, enlever la première ligne du fichier article.html).

    Répondre à ce message

  • Sylvain

    Bonjour,

    Pour rester dans le sujet...

    La demande d’authentification de l’utilisateur pour afficher les pages est trés intéressante.

    Par contre est-il possible de ne demander l’authentification que pour certaines rubriques (les autres étant publiques) ?

    Je ne maitrise pas encore les balises spip pour faire ce travail.

    J’utilise donc pour le moment le plugin « Accès restreint » qui fonctionne très bien avec ce squelette.

    A bientot...

    Répondre à ce message

Ajouter un commentaire

Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparaît.

Merci d’avance pour les personnes qui vous aideront !

Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.

Qui êtes-vous ?
[Se connecter]

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