HTML5UP Spectral

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.

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.

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.

Il y a aussi d’autres petits bugs à résoudre (...) à lire sur le forum sous l’article