Développement du nouveau squelette pour la Marmite (Titre)
Exemple de mise en page, de gestion des différents éléments affichables (sous-titre)
Le Chapeau de l’article est ce qui sera proposé en priorité comme texte d’accroche dans les listes d’articles (page d’accueil, de rubrique, les newsletters, etc) et mis en valeur sous le titre et le sous-titre de l’article. On évite d’y mettre des images parce que ça déglingue pas mal la mise en page, mais au besoin on peut y mettre un document.
Ici débute le texte de l’article. Ci-dessous des exemples quelques notes et des exemples de mise en page.
Notes de développement
Un gros travail de tri et d’organisation des contenus est à envisager :
- Plan du site par rubrique https://dev.association-la-marmite.fr/spip.php?page=plan
- Utilisation de l’agenda ?
- Utilisation des mots clefs ?
- GROS BESOIN de navigabilité pour les utilisateurs qui n’y comprennent rien ou presque.
Que fait-on des mots clefs servant à la carte des auteurs ? https://dev.association-la-marmite.fr/ecrire/?exec=mots
Est-ce qu’on change de typo ?
exemple d’autres typos, il y en a des milliers :
https://fonts.google.com/share?selection.family=Alegreya:ital,wght@0,400..900 ;1,400..900
Refonte ou évolution des graphisme ?
Est-ce qu’on enrichi la palette de couleur du site ? Propositions avec Paletton un outil de composition de palette de couleurs assorties :
- https://paletton.com/#uid=70u1q0k++CwmW+AH4++ZmnOWR7v
- https://paletton.com/#uid=70f190kqq-JbDX2klPDsCm2BC8Z
Exemple de palette
Pictos de l’éclate
Une version avec les couleurs du dernier paletton de la liste ci-dessus :
Menu su site
Le menu est personnalisable.
Sinon j’aime beaucoup celui de ce site : https://www-actus.univ-ubs.fr/fr/index.html
Exemple de mise en page : Un intertitre
Du texte avec de l’italique et du gras ou un mélange des deux .
Un retour à la ligne avec un lien externe et un lien interne avec un titre automatique article 5306.
Faux texte standard gras ou italique : le fameux Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Avec une image à gauche
Avec une image à gauche autour de laquelle va s’enrouler le texte. Avec une image à gauche autour de laquelle va s’enrouler le texte.
Avec une image à gauche autour de laquelle va s’enrouler le texte. Avec une image à gauche autour de laquelle va s’enrouler le texte. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Avec une image à droite
Avec une image à droite autour de laquelle va s’enrouler le texte. Avec une image à droite autour de laquelle va s’enrouler le texte.
Avec une image à droite autour de laquelle va s’enrouler le texte. Avec une image à droite autour de laquelle va s’enrouler le texte. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Avec une image centrée
Avec une image centrée, mais je ne suis pas sûr que le résultat soit intéresssant. Avec une image centrée, mais je ne suis pas sûr que le résultat soit intéresssant.
Avec une image centrée, mais je ne suis pas sûr que le résultat soit intéresssant. Avec une image centrée, mais je ne suis pas sûr que le résultat soit intéresssant. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Un autre paragraphe avec [1] et un terme de glossaire.
- Une liste
- Une liste
- Sous élément de liste
- Une liste ordonnée
- Une liste ordonnée
- Sous élément de liste ordonnée
Un séparateur
Un tableau
| Lieu | Action |
|---|---|
| Les grottes | Spip Party |
| Toulouse | Spip en rose |
La définition d’une ancre avec un lien pour y aller #direct.
Une citation avec un titre dedans
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Insertion de toutes les images en "left"
Insertion de toutes les images en "doc"
Voir en ligne : La version en développement.
Publié le vendredi 4 septembre 2015, par .
[1] Une note en bas de page
Un message, un commentaire ?
Pour participer à ce forum, vous devez vous enregistrer au préalable. Merci d’indiquer ci-dessous l’identifiant personnel qui vous a été fourni. Si vous n’êtes pas enregistré, vous devez vous inscrire.