SPIP-Contrib

SPIP-Contrib

عربي | Deutsch | English | Español | français | italiano | Nederlands

289 Plugins, 197 contribs sur SPIP-Zone, 126 visiteurs en ce moment

Accueil > Squelettes > Squelettes généralistes > Html5up Strongly Typed > Html5up Strongly Typed

Html5up Strongly Typed

1er décembre 2017 – par nostromo – 14 commentaires

7 votes

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 ? »

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 en phase de développement mais en grande partie fonctionnelle (voir site Brindefolie.com).

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

Site de démo Html5up Strongly Typed

Téléchargement

Strongly Typed

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.

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.

Ce qui manque / à développer

Même si le plugin est opérationnel, il lui manque un certain nombre de squelettes.
De plus la balise #FORMULAIRE_FORUM n’affiche pas le forum, mais affiche à la place l’ensemble des interventions dans les forums et validés pour publication, elle a donc été enlevé,
La balise [(#PLUGIN{socialtags}|oui)[(#INCLURE{fond=noisettes/socialtags}{id_article})]] n’affiche rien quand à présent.
Malgré de nombreux essais, il nous a pas été possible d’afficher les images comme le propose le squelette ARTICLE de la Distribution.
La barre de navigation haute par la biais d’un plugin devrait permettre une automatisation de l’affichage des rubriques/sous rubriques.
Une documentation des fichiers css devrait permettre d’apporter des modifications aussi bien par exemple dans la couleur des liens, qu’un changement de la police utilisée pour le titre du site.

Conclusion

Ce plugin est en grande partie opérationnel même si divers « modules » lui font défaut. Nous pensons entre autre à la balise #FORMULAIRE_FORUM.

Mais 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.

Dernière modification de cette page le 1er décembre 2017

Retour en haut de la page

Vos commentaires

  • Le 21 février à 21:58, par Ludo En réponse à : Html5up Strongly Typed

    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

    • Le 22 février à 12:15, par Laurent En réponse à : Html5up Strongly Typed

      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

    • Le 22 février à 19:26, par Ludo En réponse à : Html5up Strongly Typed

      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

    • Le 17 mars à 01:46, par DD En réponse à : Html5up Strongly Typed

      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

    • Le 17 mars à 09:46, par Ludo En réponse à : Html5up Strongly Typed

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

    Répondre à ce message

  • Le 8 mars à 17:50, par HirisBen En réponse à : Html5up Strongly Typed

    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.

    • Le 8 mars à 18:39, par HirisBen En réponse à : Html5up Strongly Typed

      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...

    • Le 9 mars à 08:39, par b_b En réponse à : Html5up Strongly Typed

      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.

    • Le 9 mars à 10:47, par HirisBen En réponse à : Html5up Strongly Typed

      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 !

    Répondre à ce message

  • Le 27 février à 19:13, par Philippe En réponse à : Html5up Strongly Typed

    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

  • Le 2 décembre 2017 à 00:01, par Didier En réponse à : Html5up Strongly Typed

    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

    • Le 22 février à 12:09, par Laurent En réponse à : Html5up Strongly Typed

      Bonjour.

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

      Laurent

    Répondre à ce message

  • Le 1er décembre 2017 à 10:10, par Valéry En réponse à : Html5up Strongly Typed

    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

Répondre à cet article

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 Les choses à faire avant de poser une question (Prolégomènes aux rapports de bugs. )
Ajouter un document

Retour en haut de la page

Ça discute par ici

  • Albums 3

    8 août 2014 – 275 commentaires

    Le plugin « Albums » évolue dans une version 3 pour SPIP 3. Avant d’effectuer une mise à jour depuis la version 1 ou 2, consultez les notes sur la rétro-compatibilité. Les modèles, notamment, on reçut quelques changements pour la bonne cause. En (...)

  • ScolaSPIP 4

    19 janvier 2016 – 324 commentaires

    ScolaSPIP est plugin-squelette responsive personnalisable pour sites Web d’établissements scolaires basé sur SPIPr Présentation de ScolaSPIP Ce plugin pour SPIP 3 est développé par la Dane de l’académie de Versailles pour les webmestres de cette (...)

  • Newsletters

    16 janvier 2013 – 461 commentaires

    Ce plugin permet de composer des Info-lettres. Par info-lettre, on désigne ici le contenu éditorial qui va être composé et envoyé par courriel à une liste d’inscrits. Le plugin permet de composer une info-lettre à partir d’un modèle pré-composé, (...)

  • Mailsubscribers

    16 janvier 2013 – 396 commentaires

    Ce plugin permet de gérer les inscriptions (ou abonnements) à la diffusion de contenu par email. Mailsubscribers permet de gérer les inscriptions par Opt-in simple ou double et la désinscription par URL. Ce plugin gère également plusieurs listes de (...)

  • ORR v2

    21 mai 2013 – 101 commentaires

    ORR, le plugin d’Organisation des Réservations et des Ressources passe en version 2, avec quelques nouveautés attendues. Je ne reprendrai pas les explications données dans la version 1. Les nouveautés : 1. Gestion des autorisations Le principe (...)