[MàJ] HTML5UP Strongly Typed

Html5up Strongly Typed est un jeu de squelettes, dont l’habillage peut convenir à tout type de site web : blog, webzine, etc.....

Il vient en « surcharge » des squelettes de la Distribution SPIP. Voir à ce sujet « Où placer les fichiers de squelettes ? »

Voir le site de démo. Le jeu de squelettes est tiré des travaux du développeur aj, visible sur le site html5up.net. Il est distribué sous licence Creative Commons. Il est fonctionnel (voir site Brindefolie.com).

Il est possible de télécharger les sources des fichiers du site de démo.

[Mise à Jour]

Ce plugin a été revisité en novembre 2020. il est garantie « produit pendant le second confinement ». Il est compatible avec la dernière version de SPIP. Il fonctionne actuellement avec la version Version 3.2.8 [24473].
Il nécessite pour afficher la galerie dans le squelette article le plugin Galleria : https://contrib.spip.net/Galleria.

Les modifications suivantes ont été apportées :

-  affichage des icônes,
-  affichage dans Contenu (situé dans partie haute) des dossiers et sous-dossiers
-  fonctionnement des commentaires écriture/lecture autant pour les pages articles que brèves,
-  affichage des photos avec le plug-in Galleria

Les modifications et réparations des squelettes, préparation du plug-in et versement de ce dernier dans la zone, a été assuré par Reda A.

Testez-le

Site de démo Html5up Strongly Typed

Téléchargement

Installation et dépendances

Le squelette se présente sous la forme de plugin et s’installe donc comme tous les plugins.

Il nécessite les plugins suivants :

-  nuage,
-  dépublie,
-  galleria.

Il utilise le plugin twitter.

Pour s’assurer le bon fonctionnement du jeu de squelette ainsi que des plugins, on pensera à vider le cache après installation.

Les squelettes et les inclusions

Le graphisme des squelettes ne reprend pas exactement l’interface graphique tel que proposé par le développeur aj. Ainsi dans la page sommaire.html, la partie documentée sous l’appellation <!-- Banner --> a été enlevée.
Il en est de même pour la page article.html tirée de la page d’origine no-sidebar.html dont l’image en dessous du titre n’apparait pas. Les pages left-sidebar.html et right-sidebar.html, n’ont pas été intégrées dans le plugin.

De manière générale, les squelettes du premier niveau contiennent tous la commande <INCLURE> vers des fichiers de deuxième et troisième niveau. Ainsi tous les squelettes du premier niveau contiennent une inclusion du squelette footer.html, lui-même ayant une inclusion du squelette retour_haut.html. Seul le fichier du deuxième niveau (partie_droite_sommaire_1.html) contient un include pour le fichier flash_infos.html (Voir à ce sujet, le chapitre « Le fichier flash_info.html et utilisation du plugin Dépublie »).
Pour une bonne compréhension, vous pouvez visualiser le contenu du plugin sur le dépôt de la zone.

Même si ce plugin est encore en développement, dans la mesure du possible Tous les squelettes sont documentés permettant de connaître chaque partie du code html. Ex : <!-- Partie haute du site -->.
Trois feuilles de styles sont situées dans le dossier assets/css. Celles-ci n’ont pas été modifiées et ne sont pas documentées.

Modification des icônes

Il est possible de modifier les icônes suivant vos besoins en passant par le site http://fontawesome.io/icons/. Sélectionner l’un d’eux, cliquer dessus et copier l’information entre guillemets juste après le sélecteur CSS class, soit utiliser le moteur de recherche du site. Coller l’information, donnant par exemple <h2 class="icon fa-file-text-o">.

La partie haute des squelettes

La partie haute de toutes les pages du plugin fait appel au fichier partie_haute_site.html. Il est appelé via <INCLURE{fond=inclure/partie_haute_site,self=#SELF} />. Pour la barre de navigation dans les rubriques/sous-rubriques avec indication de son nom et de son url, il n’a pas été fait appel à un quelconque plugin comme peut le proposer Spip Contrib. Il s’agit donc d’inscrire « à la main » les informations permettant une navigation dans les rubriques/sous-rubriques.
Pour la modification des icônes voir le chapitre « Modification des icônes ».

Le fichier flash_info.html et utilisation du plugin Dépublie

Un exemple de l’utilisation du fichier flash_infos.html


Afin de donner du « mouvement » aux informations, il nous a semblé nécessaire d’utiliser le plugin Dépublie conjointement avec le fichier flash_infos.html.
Pour son utilisation, créer tout d’abord une rubrique à la racine. Relever son numéro et portez le dans la bouche suivante à id_secteur en enlevant les deux x :
<BOUCLE_article(ARTICLES){id_secteur=xx}{id_rubrique}{par date}{inverse}{0,1}{doublons}> du fichier flash_infos.html. Pour plus d’informations voir l’article La boucle ARTICLES.

Il vous suffira ensuite de mettre en ligne un article contenu dans la rubrique crée. Concernant le fichier image il est extrait soit du #LOGO_ARTICLE ou éventuellement du #LOGO_RUBRIQUE. La taille de l’image n’est pas indiqué volontairement dans la boucle <a href="#URL_SITE">[(#LOGO_ARTICLE|sinon {#LOGO_RUBRIQUE})]</a> , mais celle-ci ne doit pas dépasser 300 px. Lors de la rédaction de l’article, il faudra documenter l’URL_SITE si vous voulez un renvoi en cliquant sur le fichier image. Avec le plugin Dépublie, il ne vous reste plus qu’a indiquer une date de fin de mise en ligne.

Les fichiers brèves et articles

La structure générale de la page sommaire.html mettant en valeur principalement les articles, le texte introductif des brèves, dont l’affichage est ici au nombre de deux, est positionné sur la droite par le biais des fichiers partie_droite_sommaire_2.html, partie_droite_rubrique_2.html.

L’ordonnancement du fichier breve.html comme du fichier article.html est identique. Seuls les boucles sont différentes avec en commun une partie haute, une partie centrale et une partie basse. Ce sont quant à présent, les deux seuls fichiers ne faisant pas appel à d’autres fichiers pour un affichage latéral.

Changement de l’image de la Quadrature du Net

Cet emplacement « publicitaire » pour le site de La Quadrature du Net, fait appel à un fichier via une url. Vous trouverez si vous le désirez dans le dossier IMG, le même fichier portant le nom quadrature.png.

Fichier 404.html

Le fichier 404.html fait appel à un fichier image dans le dossier IMG et intitulé 1959_a.png.

Conclusion

Par la structure même de son interface graphique il permet un affichage rapide adapté aussi bien pour des grands écrans que ceux des smartphones et tablettes.

Bonne utilisation.

Discussion

8 discussions

  • 1

    Le plugin est certainement compatible SPIP 4.0 puisque le site de démo brindefolie.com est en SPIP 4.0.9

    • Par contre il y a une dizaine d’appels au filtre |justifier, qui n’existe plus depuis SPIP4.0
      Serait il possible de mettre à jour le repo avec la nouvelle version compatible spip 4 ?

    Répondre à ce message

  • 1

    liens sociaux

    bjr
    j’utilise ce squelette, tb par ailleurs. Quand je mets les adresses fb et tweeter cela n’apparait pas sur le site , il y a juste le mail, pourquoi ?
    merci pour une réponse

    Répondre à ce message

  • 6

    Bonjour,
    Je ne pige pas, ce plugin est pourtant simple à installer, pourtant lorsque je l’installe dans l’interface des plugins je trouve « version incompatible » est-ce à cause que je suis en spip 3.2.7 ?

    • Effectivement le plugin n’est pas marqué compatible 3.2. A priori cependant, il doit l’être. Peut tu essayer en modifiant la borne de compatiblité dans paquet.xml ? si cela marche bien, on changera la version diffusée sur la zone.

    • Bin... Entre temps j’ai tenté de mettre :compatibilite=« [3.0.0 ;3.1.* ;3.2.*] ».... Ca ne fait rien.
      Merci !

    • ce sont des bornes, pas des listes de compatiblité.

      Donc

      [3.0.0 ;3.2.*]
    • Vouaaaaais !!
      C’est top :
      Strongly types par HTML5UP 1.0.0 - dev
      Du Html5 à haute dose dans tous les formats
      Et moi strongly content !
      Merci et bonne soirée à toi !
      Yves

    • Bon,

      si cela marche, alors je le marque comme compatible, pour le futur.

    • Pour le moment, je dirais qu’il est compatible, le hic, c’est le résultat... Je ne sais pas si l’affichage public est normal avec un site vide (une rubrique - un article)
      https://www.yves-elie.org/site-spip-ye
      Je vais tester en testant l’import des sources.

    Répondre à ce message

  • 5
    HirisBen

    Bonjour,
    Pour le menu horizontal tout en haut, comment ça marche ? J’ai exactement la même présentation que Ludo. Il doit y avoir un plugin pour gérer le menu déroulant ?
    Merci de votre aide.

    • HirisBen

      Je cherche depuis un moment et je remarque qu’il n’existe aucun fichier « head » dans le dossier « inclure » et pourtant ce fichier est bien appelé dans Sommaire.html...

    • Salut, comme indiqué en intro de l’article, ce squelette vient en « surcharge » des squelettes de la Distribution SPIP. Le fichier inclure/head est donc fourni par défaut avec SPIP dans le dossier squelettes-dist à la racine de ton site.

    • HirisBen

      C’est évident ! Désolée pour ce « bruit »...
      J’en profite pour clore mon post le problème étant résolu : c’était tout simplement dû au chemin de la feuille de styles qui ne fonctionnait pas en local...
      Merci de votre aide !

    • Bonjour, j’ai aussi ce problème sur une install en local. Même rendu que Ludo, même constat que Hirisben. Et donc comment restaurer le chemin vers les css ? Merci d’avance pour votre aide !

    • HirisBen

      Bonjour,
      Je ne me souviens plus de ce que j’ai fait exactement, mais je te conseille d’utiliser les outils de développement (si tu ne le fais pas déjà) pour vérifier si ta feuille CSS se charge correctement. Si tu vois que ce n’est pas le cas, il suffira de corriger le chemin dans la Dist inclure/head.
      Espérant t’avoir été utile. Bon courage.

    Répondre à ce message

  • 4

    Bonjour

    je viens de découvrir le site de démo qui correspond à la présentation que j’aimerais avoir.
    mais à l’installation des 5 plugins (bonux, nuage, twitter, dépublié et html5up), je n’ai pas la même présentation.
    Faut-il d’autres plugins ou est-ce lié à la page sommaire.html dans laquelle je ne comprend pas le changement à effectuer.

    merci pour votre retour

    • Bonjour

      Qu’est-ce que vous entendez par « pas la même présentation » ?
      S’il s’agit uniquement des plug-in, il faut aller dans les fichiers html correspondant et indiquer si je me souviens bien des infos que vous avez de votre côté : compte twitter, etc....
      En tout état de cause, l’installation est standart comme expliqué plus haut.

      Laurent

    • déjà merci pour votre retour
      je joins une copie écran du haut du site, juste après activation des 5 plugins, ce qui diffère du vôtre en terme de présentation (j’ai juste 2 rubriques de test et 1 article par rubrique en test).
      Cordialement

    • J’essaie de comprendre si j’ai bien installé ce squelette mais j’ai un doute. Je n’ai pas du tout la même apparence que brindefolie. J’ai tout sur une seule colonne pleine largeur et pas le « strongly typed ».
      Est-ce que le fait que l’élément « banner » n’a pas été repris implique que l’on n’a donc pas le titre du site en « strongly typed » ni les éléments de nav du haut « titre du site / Archives
      Plan du site », etc ?
      merci

    • J’ai arrêté mes tests j’étais comme toi, du coup je suis parti sur Japibas

    Répondre à ce message

  • bonsoir

    s’il est valide pour spip 3.2 il faut donc modifier le fichier descriptif du plugin pour qu’il soit activable dans l’interface de spip.

    merci pour ce travail.

    Répondre à ce message

  • 1

    Sur brindefolie il est écrit en bas de page fonctionne avec Spip 3.2 et là et sur https://plugins.spip.net/html5up_strongly_types.html on parle de Spip 3.0 et 3.1

    • Bonjour.

      Effectivement il fonctionne avec SPIP 3.2, donc ne pas tenir compte de l’info plus haut.

      Laurent

    Répondre à ce message

  • 1

    Bonjour ! Merci pour cette adaptation. Existe-t-il des exemples de sites SPIP visibles en ligne utilisant ces squelettes s’il te plaît ?

    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