[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

Aucune discussion

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