SPIP-Contrib

SPIP-Contrib

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

288 Plugins, 197 contribs sur SPIP-Zone, 80 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 – commentaires

3 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

Répondre à cet article

Qui êtes-vous ?

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

  • Formidable, le générateur de formulaires

    23 janvier 2012 – 2294 commentaires

    Un générateur de formulaires facilement configurable pour les non-informaticiens et facilement extensible pour les développeurs. Introduction L’objectif était de créer un plugin permettant de générer des formulaires. Historiquement, 2 plugins (...)

  • SPIP 3, Agenda et FullCalendar

    6 août 2012 – 318 commentaires

    Depuis SPIP 3, l’affichage d’un agenda sous forme de calendrier par jour/semaine/mois à changé. Les filtres |agenda_memo et apparentés sont désormais obsolètes. Il en est de même pour les filtres agendafull_memo et apparentés du plugin Agenda. (...)

  • Mode portail Communiquant pour SoyezCréateurs

    29 septembre 2010 – 28 commentaires

    5e mode d’affichage de la page d’accueil, ce mode se distingue des autres par une animation proposant un fondu/enchaîné des logos des articles à la une. Zonage Configuration Bloc 1 : Zone d’entête Nom du site Slogan si plugin bandeau présent Zone (...)

  • Lecteur pdf javascript pdf.js

    20 février 2012 – 162 commentaires

    Ce plugin est basé sur le projet pdf.js qui permet une lecture en ligne des pdfs depuis le navigateur. Ce plugin est expérimental et les contributions sur la zone sont les bienvenues. Avantages Open source Ne requiert pas flash et donc (...)

  • GIS 4

    11 août 2012 – 1420 commentaires

    Présentation et nouveautés La version 4 de GIS abandonne la libraire Mapstraction au profit de Leaflet. Cette librairie permet de s’affranchir des librairies propriétaires tout en gardant les mêmes fonctionnalités, elle propose même de nouvelles (...)