Webetab-Light

Publié le : 5 octobre 2008 – Dernière modification le 2 octobre 2019 – par Frank Endres – 32 commentaires

1
2
3
4
5
3 votes
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

5 ans 1 an 3 mois Sans limite
par date
Filtrer

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

  • Nina

    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

  • Frank Endres

    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

  • cy_altern

    La doc de ce plugin mentionne que la page article.html débute par ce code :

    <?php if (!isset($auteur_session['statut'])) header('Location: ecrire');  ?>

    vu qu’il n’est ni souhaitable ni conseillé de mettre du php dans les fichiers de squelettes, tu pourrais remplacer ce test d’authentification du lecteur en cours par :

    [(#SESSION{id_auteur}|?{'',' '})[(#HTTP_HEADER{Location: [(#EVAL{_DIR_RESTREINT_ABS}|url_absolue)]})]]

    qui fait exactement la même chose en SPIP 2.0 (pour SPIP 1.9.2 il faut que le plugin balise SESSION soit installé).

    Répondre à ce message

  • Pourriez vous me mettre un lien vers votre site et me joindre votre version de Webetab-Light pour que je puisse mieux comprendre le problème et tenter de le résoudre ?

    Frank Endres

    Répondre à ce message

  • Bonjour,

    J’aurais un petit problème d’affichage sous IE 7, léger, mais c’est tout de même dérangeant...
    En fait la fonction Round ne fonctionne pas sur le titre (définit par < h1 >)

    En fait les arrondis s’insèrent bien, mais la barre me parait trop grosse, car il y a deux bouts qui dépassent des arrondis.
    On pourrait croire à un effet de style, mais ce n’en est pas un :).

    Conclusion : La fonction js fonctionne mais la barre est trop grosse (je pense). Ce qui est étrange c’est que ça fonctionne très bien sur FF 3.0.
    La question est : Ou peut-on modifier les paramètres de cette barre, ou alors des arrondis ? Et surtout comment le faire uniquement sous IE ?
    Je vous fournis le type de problème avec l’image en pj.

    Merci pour vos réponses.

    PS : Sur l’image on peut voir aussi un autre petit problème étrange, lorsque l’on sélectionne le texte du titre, on sélectionne les images (je suppose) qui se trouve derrière..

    Répondre à ce message

  • J’ai toujours ce même problème concernant l’ajout de commentaire, le bouton agit, puisqu’il y a mouvement de la fenêtre d’ajout de commentaire, mais finalement, elle reste affichée... Je travaille sous FF 3.0.8 et IE 7.
    Je ne sais pas d’où cela peut venir, j’ai fait quelques modifications sur les fichiers webetab avant la dernière update, mais rien sur les fontions js, donc il n’y a pas de raison que cela ai modifié ce genre de fonctionnalité...
    J’ai essayé de plancher sur les fonctions js, et je n’est pas l’impression que ça vienne de là... Coincé...

    Répondre à ce message

  • Sylvain

    Merci beaucoup de votre aide.

    A présent je sais par où je dois commencer pour faire ce que je souhaite.

    Je reviendrai vers vous pour vous montrer le résultat...

    Bonne continuation pour le développement de votre excellent squelette.

    Répondre à ce message

  • Il est possible d’afficher la liste des articles dans la zone centrale et uniquement les rubriques et sous rubriques dans le menu (un peu comme ça - ancienne version de Webetab-Light - cf fichier joint). Il faut (en gros) retirer les lignes 24 à 26 du fichier « menu.html » et les placer dans le fichier « rubrique.html » dans une boucle « rubrique » (cf documentation de SPIP).

    Répondre à ce message

  • Sylvain

    Bonjour,

    Tout d’abord merci pour votre squelette qui correspond tout à fait à ce que je recherchais pour mon lycée.

    Je voudrais savoir s’il était possible de faire afficher dans le menu vertical uniquement les rubriques et sous rubriques. Les articles étant affichés dans la page centrale.

    Par ou dois-je commencer (je suis novice avec Spip...) ?

    Merci par avance de votre aide.

    Cordialement,

    Répondre à ce message

  • J’aurais également un petit problème avec la nouvelle fonction de commentaires, dont le bouton afficher/caché saisie message ne fonctionne pas -> ???
    Si ça marche (vérifié avec Internet Explorer 7, Firefox 3 et Safari 3), il faut juste recalculer la page pour que le commentaire apparaisse.

    Les suggestions sont les bienvenues (et les contributions pour améliorer le squelette aussi).

    Frank Endres

    Répondre à ce message

  • J’aurais également un petit problème avec la nouvelle fonction de commentaires, dont le bouton afficher/caché saisie message ne fonctionne pas...
    Au niveau ergonomique, ça reste également génant.
    Peut-être qu’une interface un peu plus simpliste serait préférable (c’est juste une suggestion).
    Ceci dit le reste du squelette est satisfaisant dans l’ensemble, merci pour ce travail remarquable !

    Répondre à ce message

  • Frank Endres

    J’ai une solution pour le problème d’affichage du menu avec IE7 qui présente un très léger défaut d’affichage (le pied est sous l’article - c’est à dire trop haut si l’article est court) : j’utilise simplement un positionnement relatif au lieu d’absolu pour la zone « pied ».

    Répondre à ce message

  • J’ai commencé un site avec WL mais dans IE7 (et le problème existe aussi pour le site du BTS informatique des Sables d’Olonne), le pied de page se superpose au menu losqu’on le déplie. De plus, si l’éditorial ne comporte pas beaucoup de lignes, le pied de page se place au milieu de l’écran. Sur FireFox, tout marche bien.
    J’ai vu dans positionnement.css la ligne :
    #pied bottom : 10px ; left : 9px ; /* padding-left(corps) */ height : 50px ; width : 780px ; /* (inherit) pour IE */
    La réponse à mon problème est peut-etre là, mais que faire du commentaire /* (inherit) pour IE */ ?

    merci d’avance

    Répondre à ce message

  • 1

    Je souhaite utiliser le plugin Forms & tables avec ce squelette mais, malheureusement, lorsque j’affiche l’article contenant le formulaire, j’arrive sur une page blanche.
    Etant novice en la matière, je ne sais pas résoudre ce problème.
    Y-a-t-il quelqu’un qui pourrait me donner les modifications nécessaires à faire au squelette pour intégrer le plugin en question ?
    Je vous serai excessivement reconnaissant et ne manquerai pas de vous faire ensuite partager mon projet,qui, je pense, pourra faire plaisir au concepteur de ce squelette. En effet, je souhaite utiliser Webetab-Light pour mettre en avant une zone de police belge qui ne possède pas encore de site internet. Ce template correspond exactement, à mes attentes (simplicité et clarté)
    Merci

    • Finalement cela fonctionne...
      Mais lorsqu’on appelle une entrée « Date » : L’icône ne s’affiche pas et l’info bulle non-plus. J’imagine que c’est une question de javascript...

    Répondre à ce message

  • Frank Endres

    C’est vrai que le squelette impose par défaut l’authentification ; c’est un détail que j’avais oublié (le site du lycée était public avant la sortie de Webetab-Light 1.5)...
    Pour le rendre public, il suffit d’effacer la première ligne du fichier article.html :
    <?php if (!isset($auteur_session['statut'])) header('Location: ecrire'); ?>

    Répondre à ce message

  • Je constate que ce squelette nécessite obligatoirement que l’utilisateur s’enregistre sur le site. En effet, les articles ne sont pas accessibles sans authentification. Y-a-t-il moyen de rendre le site public sans passer par un enregistrement ?

    Répondre à ce message

  • Simplement extraire l’archive et placer les fichiers dans le dossier « squelettes » de spip (à créer). La documentation explique qu’il faut ensuite créer une rubrique éditoriale contenant deux articles : le premier pour la page d’accueil, le second pour les mentions légales.

    Répondre à ce message

  • patheo

    Salut ! merci et félicitations pour ce plugin. mais je voudrais savoir comment l’installer. Merci

    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