HTML5UP Spectral

Squelette adapté du thème Spectral de HTML5 UP ayant de nombreux effets “wahouuu” et un menu latéral droit en javascript en plus d’être en responsive design.

Choix Techniques

Philosophie générale : une page sommaire longue et complète, constituée de blocs colorés et contrastés.

Consulter le site Spectral de HTML5 UP permet de comprendre les choix techniques adoptés, choix imposés par l’adaptation du Template, pour en faire un squelette dynamique.

Site de démonstration

Ce squelette est initialement développé pour ce site web : https://nsi.xyz mais il sera développé pour être générique et réutilisable facilement, en proposant une double navigation : rubriques racines et mots clés.

Installation sur un site SPIP sans aucun contenu

Si vous installez ce template sur un site SPIP sans aucun article publié, vous verrez ceci :

Configuration optimale

Si vous souhaitez un rendu satisfaisant, il faudrait que votre site dispose de :

  • 1 à 5 rubrique(s) racines active (avec un article publié dans la rubrique)
  • Des logos attachés à ces rubriques, de préférence des logos en full HD
  • Des mots clés attachés aux articles, ces mots clés doivent avoir des logos avec une couche alpha.
  • Un article héro et un article majeur, ils se définissent depuis la page de configuration du squelette : /ecrire/?exec=configurer_html5up_spectral

L’image de fond utilise un document de la médiathèque de spip et se configure elle aussi depuis la page de configuration du squelette. Par défaut : un ciel étoilé.

Configuration

Ce squelette dispose de sa propre page de configuration.
Merci à jeanmarie de m’avoir mis le pied à l’étrier

Cette page est amené à évoluer et à s’enrichir progressivement.

Fonctionnalités / pages de SPIP codées

Les pages suivantes sont codées v 1.0.17 test

  • sommaire
  • article
  • plan
  • rubrique
  • mot
  • 404
  • login
  • auteur

Les pages suivantes seront codées au cours de l’année scolaire 2019-2020 :

Ou avant si vous souhaitez contribuer sur SPIP-ZONE

  • contact
  • recherche

Les pages suivantes ne sont pas codées pour l’instant :

Cette liste est basée sur les squelettes-dist

  • auteur
  • backend
  • backend-breves
  • breve
  • calendrier
  • contact
  • favicon.ico
  • forum
  • ical
  • identifiants
  • inc-rss-item
  • nouveautes
  • recherche
  • robots.txt
  • rss_xxx
  • site
  • sitemap.xml

Principales fonctionnalités utilisées

  • rubrique racines uniquement pour l’instant
  • mots clés
  • articles
  • logos sur mots clés, rubriques et auteurs uniquement.

la page sommaire.html

Elle utilise et gère :

  1. Le nom du site et son descriptif avec une image en plein écran.
  2. Un article héros (fond vert) ainsi des les logos associées à ses mots clés.
  3. La liste des rubriques racines avec leurs images (fond grisé).
  4. Pour finir un dernier article majeur avec un rappel de l’image principal.

L’article héros affichera les logos de ces mots clés (en lieu et place d’une astuce basée sur les CSS consistant à afficher des icônes d’un site tiers non libre) .

Le menu latéral droit

Le menu bouclera les rubriques racines dans un premier temps.
Il sera amené à évoluer au cours de l’année scolaire 2019-2020.

A faire :

-  Boucler les mots clés les plus populaires pour les faire apparaître dans le menu.
-  Rajouter un champs de recherche et coder la page html relative dans le menu.
-  Rajouter une méthode facultative pour mettre en avant les dernières publications.

Autres pages & développements ultérieur

1. Rendre paramétrable les couleurs

2. Travailler sur les icônes afin de les rendre “responsive”, deux plugins existent à étudier donc.

3. Nettoyer la css, repenser l’arborescence.

4. Coder avec des INCLURE, fusionner les deux header_menu.

5. Remplir le fichier de langue...

Remarques : Le menu SPIP administrateur a été déplacé légèrement vers le bas, il n’était pas cliquable a cause d’un conflit de CSS. Il fonctionne désormais.

Les autres squelettes HTML5 UP

Le site html5up.net propose de beaux thèmes dont certains ont été adaptés pour SPIP. La liste par ici...

Incompatibilités constatées

Pour l’instant, ce squelette n’est pas compatible avec le plugin Adaptive Images :
> il casse les images de la page d’accueil.

Portfolio

updated on 7 December 2019

Discussion

9 discussions

  • 1

    Bonjour,
    J’avais un problème avec ce plugin (toutes versions) : la boite multimedia et la barre typographique des crayons ne fonctionnaient pas dans la partie publique.
    En supprimant plugins/auto/html5up_spectral/v1.0.20/assets/js/jquery.min.js
    cela va beaucoup mieux.
    Il me reste juste une erreur javascript :

    JQMIGRATE: Migrate is installed, version 3.0.1
    jquery-migrate-3.0.1.js:54:2
    ReferenceError: breakpoints is not defined[En savoir plus]
    main.js:16:3

    Une fois tous mes tests terminés je pourrais partager un lien et mes squelettes pour les intéressés car j’ai modifié/ajouté pas mal de choses (baslises edit pour les crayons, portfolio, menu multi-niveaux, newsletters,..)

    Voilà

    • Bonjour,
      Ce qui casse les images lorsque le plugin https://contrib.spip.net/Adaptive-Images-4458 est activé c’est :

      .spotlight .image img {width: 100%;}
      dans main.css

      et une fois cela fait il y a un effet/conflit très moche qui floute les images au hover :
      img.adapt-img.blur {filter: blur(5px);

      Bref je crois que c’est pas gagné.

      dd

    Reply to this message

  • 6

    bonsoir,
    un petit bug me semble-t-il sous spip3.1 : l’écran de configuration de spectral contient 2 formulaires indépendants, un pour le document de fond, l’autre pour les articles “hero” etc.
    Lorsque je modifie un paramètre d’un des 2 formulaires, les éléments de l’autre formulaire s’effacent, et on perd les enregistrements meta correspondants.
    Si je change l’article “hero”, je n’ai plus d’image de fond, et réciproquement, si je remets une image, je perds les articles hero...
    De mon côté, j’ai résolu le problème en ne faisant qu’un seul form dans configurer_html5up_spectral.html , mais je ne suis pas sûr que ça ne pose pas d’autre problème.

    • Hello,
      je viens d’avoir le même problème que j’ai résolu en “régressant” de v1.0.19 à v1.0.18 de ce plugin.

    • Par ailleurs plugins/auto/html5up_spectral/v1.0.18/spip_admin_perso.css empêche le mini bando de fonctionner

    • Je prend note des ces bugs et je m’y pencherait le plus tôt possible. Si vous avez à spip zone n’hésitez pas à y commit vos solutions.

    • Bonjour,

      Bravo pour ce travail sur cet élégant squelette.

      Pour compléter les posts, quand on paramètre un article en pied de page on perd aussi les paramétrages de la page d’accueil... Il faut choisir ;-)

      Gildart

    • Essayez de mettre à jour en v.1.0.20 dans quelques heures et tenez moi au courant.

    • super, ça fonctionne.
      Merci !

    Reply to this message

  • Je n’ai pas accès à la zone (mais ce serait sans doute plus utile) donc je note ici une modification du squelette sommaire.html :
    Dans la boucle
    <BOUCLE_hero(ARTICLES){id_article IN #CONFIG{html5up_spectral/hero}|picker_selected{article}}>
    remplacer
    <a href="#URL_ARTICLE" class="button primary"><:html5up_spectral:lire_la_suite|attribut_html:></a>

    par

    <a href="#URL_ARTICLE" class="button primary">[(#CONFIG{html5up_spectral/titre_lien_hero}|sinon{Lire})]</a>

    Reply to this message

  • 3

    Hello,
    Est-ce qu’un utilisateur de ce plugin a la barre typographique fonctionnelle dans les pages publiques ? Lorsque j’active Spectral la barre n’est pas visible et je ne vois pas pourquoi.
    Merci

    • Qu’appelles tu par la «barre typographique» sur les pages publiques ? Est-elle liée à un plugin tiers ? Pour l’instant il y à apparement de nombreux conflits de css, à résoudre donc.

    • Bonsoir, je voulais parler de la barre de raccourcis typographiques qui apparaît (de base sans le plugin Spectral activé) lorsque l’on édite un champ avec le plugin crayons.

    • Il semblerait que ce soit

      1. <script src="(#CHEMIN{assets/js/jquery.min.js})"></script>

      appelé dans /plugins/auto/html5up_spectral/v1.0.19/inclure/script.html

      qui pose problème avec la barre typo (je suis ignare en javascript).

    Reply to this message

  • 6

    Bonjour,
    très sympa ce squelette.
    J’ai quelque problèmes avec les outils du Couteau suisse.
    Les découpes en onglets et en blocs ne fonctionnent pas.
    Si vous avez une idée ?
    Merci

    • Après vérification (par @tcharlss), il manque la balise #INSERT_HEAD dans le HEAD des squelettes : https://zone.spip.net/trac/spip-zone/browser/spip-zone/_squelettes_/html5up_spectral/inclure/head.html
      C’est une balise obligatoire.
      Mais ça ne règle pas le problème pour le Couteau suisse ni pour le fonctionnement du plugin SkelEditor 3.1.0. Il y a des problème Javascript et JQuery
      La console de Chrome affiche ce message :

      jquery.js?1568257534:3860 jQuery.Deferred exception: jQuery(...).parents(...).formulaire_dyn_ajax is not a function TypeError: jQuery(...).parents(...).formulaire_dyn_ajax is not a function
      at HTMLDocument. (http://monsite.com/prive/javascript/ajaxCallback.js?1568257534:1033:3)
      at mightThrow (http://monsite.com/prive/javascript/jquery.js?1568257534:3583:29)
      at process (http://monsite.com/prive/javascript/jquery.js?1568257534:3651:12) undefined
      jQuery.Deferred.exceptionHook @ jquery.js?1568257534:3860
      jquery.js?1568257534:3860 jQuery.Deferred exception: jQuery(...).not(...).attr(...).colorbox is not a function TypeError: jQuery(...).not(...).attr(...).colorbox is not a function
      at HTMLDocument.mediaboxInit (http://monsite.com/plugins-dist/mediabox/javascript/spip.mediabox.js?1568257552:27:4)
      at mightThrow (http://monsite.com/prive/javascript/jquery.js?1568257534:3583:29)
      at process (http://monsite.com/prive/javascript/jquery.js?1568257534:3651:12) undefined
      jQuery.Deferred.exceptionHook @ jquery.js?1568257534:3860
      jquery.js?1568257534:3860 jQuery.Deferred exception: jQuery(...).cs_todo is not a function TypeError: jQuery(...).cs_todo is not a function
      at HTMLDocument.blocs_init (http://monsite.com/local/couteau-suisse/header.js:77:31)
      at HTMLDocument.cs_init (http://monsite.com/local/couteau-suisse/header.js:242:13)
      at HTMLDocument. (http://monsite.com/local/couteau-suisse/header.js:251:10)
      at mightThrow (http://monsite.com/prive/javascript/jquery.js?1568257534:3583:29)
      at process (http://monsite.com/prive/javascript/jquery.js?1568257534:3651:12) undefined
      jQuery.Deferred.exceptionHook @ jquery.js?1568257534:3860
      jquery.js?1568257534:3869 Uncaught TypeError: jQuery(...).parents(...).formulaire_dyn_ajax is not a function
      at HTMLDocument. (ajaxCallback.js?1568257534:1033)
      at mightThrow (jquery.js?1568257534:3583)
      at process (jquery.js?1568257534:3651)
      jquery.js?1568257534:3869 Uncaught TypeError: jQuery(...).not(...).attr(...).colorbox is not a function
      at HTMLDocument.mediaboxInit (spip.mediabox.js?1568257552:27)
      at mightThrow (jquery.js?1568257534:3583)
      at process (jquery.js?1568257534:3651)
      jquery.js?1568257534:3869 Uncaught TypeError: jQuery(...).cs_todo is not a function
      at HTMLDocument.blocs_init (header.js:77)
      at HTMLDocument.cs_init (header.js:242)
      at HTMLDocument. (header.js:251)
      at mightThrow (jquery.js?1568257534:3583)
      at process (jquery.js?1568257534:3651)
      close.svg:1 Failed to load resource: the server responded with a status of 404 (Not Found)+)

    • Merci pour tes recherches. Je ne peux absolument rien modifier avant les vacances de la Toussaint 2019, mais j’en prend bonne note. N’hésite pas à publier toute autre information que tu jugerais utile. J’imagine qu’il y a des conflits entre le jQuery de SPIP et celui du site HTML5UP mais pour l’instant je ne peux pas m’y pencher dessus. Cordialement.

    • Bonjour Cent20,
      les vacances de la Toussaint ot commencé le 19 octobre... c’est donc avec une certaine “avidité” que je reviens vers vous...
      Pensez-vous pouvoir résoudre ce problème de conflit entre le jQuery de SPIP et celui du site HTML5UP ?
      J’ai absolument besoin des “blocs dépilants” du Couteau Suisse ou à défaut d’un équivalent.
      Je pense aussi que le plugin Adaptive Images de Arno souffre du même problème...
      Cordialement

    • Bonjour,

      J’ai rajouté la balise manquante version 1.0.18 mais comme vous l’aviez testé cela ne résoudra pas le conflit. J’ai aussi un conflit avec le plugin adaptative image que je voulais utiliser, je l’ai testé il y a 1 mois environ.

      Malheureusement vacances ou pas je ne dispose pas de la dizaine d’heure nécessaire pour chercher l’origine des ces bugs. Je n’ai même pas le temps de commit les quelques améliorations des pages rubriques que j’ai dans les tiroirs... #reformedulycee #devoirdereserve

      Si vous trouvez la solution, je l’intégrerais avec plaisir, mais celle ci ne doit pas casser le coté adaptatif du site.

    • Bonjour,
      Pour les images j’ai retenu une solution qui utilise le plugin “images responsive”.
      Pour jQuery de HTML5UP, je ne sais pas à quel endroit vous le chargez... Je sais pas non plus si son seul usage est dans le sommaire (si c’est le cas on pourrait éviter de la l’utiliser ailleurs...)
      C’est très dommage de ne pas rentre compatible ce beau squelette avec les principaux outils de SPIP et en particulier le Couteau Suisse.
      Cordialement

    • Bonjour,

      je n’ai pas dit que ce squelette ne serait jamais compatible avec les plugins mentionnés, juste que je n’ai pour l’instant absolument pas le temps de m’y pencher. Les conflits de CSS c’est toujours horrible à débogguer.

      Le jquery de html5 est chargé dans le head a priori.
      et comme le sommaire est sur toutes les pages, tout comme divers effets, je ne suis pas certain qu’il n’est utilisé que sur la page sommaire.

    Reply to this message

  • 2

    Salut Vincent,
    Vraiment merci pour le travail d’adaptation effectué : ce squelette est facile à appréhender et renvoie immédiatement un résultat « whaouh ».
    Une remarque : je l’ai installé sur une installation toute neuve de SPIP. Par défaut, les rubriques n’affichent pas la partie « Description » mais seulement la partie « Texte ». C’est en regardant tes squelettes que j’ai compris pourquoi ce dernier ne s’affichait pas. Je te suggère de mettre à jour la doc pour faire apparaître cette remarque.
    Encore merci pour le boulot effectué.

    • Bonjour Manu,

      Ta remarque est pertinente, je n’ai en fait d’ailleurs pas tranché s’il faut mieux afficher le descriptif ou le texte.

      Ne pas afficher les deux permet d’utiliser le deuxième en interne sur la partie privée,
      Ne pas l’indiquer dans la doc permet de changer discrètement l’affectation...

      A priori je suis d’accord avec toi, utiliser le descriptif serait plus approprié. Je le ferais dans la prochaine version.

      Tu testes justement ou tu as un site en production et si c’est le cas quel est son adresse ?

    • Ta remarque est pertinente, je n’ai en fait d’ailleurs pas tranché s’il faut mieux afficher le descriptif ou le texte.

      ca se choisit dans https://loiseau2nuit.net/ecrire/?exec=configurer_contenu
      Si je coche “afficher un truc” et que je vois pas le truc sur mes squelettes, même précisé dans la doc, c’est pas logique ...
      pour moi il faudrait idéalement que le squelette prévoient les 2 si le WM le demande.

    Reply to this message

  • Très sympa ce thème ! Merci ! Et ravi de voir que tu reprends du service, l’ami ! :-D

    Reply to this message

  • 1

    Bonjour, merci pour ce plugin.
    Y a t il une raison pour laquelle l’insertion d’un modele de carte`du plugin gis ne fonctionnerait pas ?
    Voir site
    Merci de votre aide

    • Bonjour, à part un conflit de feuille de style je ne sais pas, Avez vous testé un autre squelettes html5up et sur celui ci l’insertion du modèle fonctionne t’il ?

    Reply to this message

  • bravo c’est tres reussi et ca rapproche spip des problematiques moderne de construction de site rapide et joli !

    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