[spip-dev] Nouvelle DIST

Dev
1

Pour éviter de trop peiner Nicolas et Ben (qui n'ont évidemment pas tord), voici une nouvelle dist, disponible en svn (donc à tester, critiquer, etc.) :

http://trac.rezo.net/trac/spip/changeset/10105

CSS PRATIQUE (VOIRE PEDAGOGIQUE)

-* Une feuille de style de moins de 300 lignes (au lieu des 421 + 92 lignes précédentes). Pourquoi faire compliqué quand on peut faire simple ?
-** nouvelle convention d'écriture, plus contemporaine et efficace, évitant les sauts de lignes, indentations superflues et fioritures de commentaires.

-* Les styles sont plus facilement surchargeables grâce à :
-** logique d'héritage plus strictement cohérente
-** tout est désormais "visible" (il n'y a plus, par défaut, d'éléments en display none) [10021]
-** code HTML globalement plus sémantique
-*** uniformisation des titres (h1,h2,h3), ce qui permet également de mieux les identifier comme tels visuellement
-** feuille de style unique : fini les surcharges qui foirent parce qu'on n'est jamais dans le bon fichier !
-** dimensions exprimées en % (et non plus en em, ce qui les faisaient varier en fonction des tailles de typo)

NOUVELLE STRUCTURE

-* Modification de la structure, désormais conforme aux modèles « Layout Gala » (cf.: http://blog.html.it/layoutgala ). Ceci pour deux raisons :
-** cette structure semble plus maniable, permettant plus de possibilités de mise en page ;
-** à terme, la dist devrait être surchargeable, de façon à permettre le choix d'un positionnement différent par un simple clic depuis l'espace privé.

<div id="page">
  <div id="top">Entête</div>
  <div id="conteneur">
    <div id="contenu">Contenu</div>
  </div>
  <div id="navigation">Navigation</div>
  <div id="extra">Extra stuff</div>
  <div id="pied">Pied de page</div>
</div>

-* Le contenu est d'un seul bloc : suppression de l'« encart » et de son pendant, le mal nommé « contre-encart ». C'est au webmestre de créer, s'il le souhaite, ce genre de blocs flottants.

COSMETIQUE

-* Révision de l'habillage des liens hypertextes : désormais on distingue visuellement les liens internes des liens externes, ces derniers étant signalés par une icône plus standard. Cf.: http://ergologique.com/conseils/conseils.php?id_tip=808

-* Nécessaire uniquement pour palier une défiance d'Internet Explorer, la class .format_png disparaît : le behavior passe en commentaire conditionnel pour IE.

-* Nouvelle harmonie reposant sur des couleurs traditionnelles de SPIP, et plus précisément :
-** le violet #8B6F92 du logo de SPIP 1.9 et de l'actuel squelette de spip.net
-** le orange #F57900 au survol des liens est celui historiquement utilisé sur spip.net
-** le vert amande #C5E41C est celui employé dans l'espace privé

RESTE A FAIRE :

-* ré-écrire le HTML des formulaires
-** ajouter les boutons manquant au champ de recherche et au select de langues
-** corriger le positionnement des input boutons
-** supprimer la barre typo en table, grrr !!
-** etc...
-* revoir les forums, peut-être rafraîchir leur look
-* définir une famille de police viable et l'employer de façon simple
-* reste un bug de positionnement de l'entête à corriger dans IE6/Win
-* ne pas supprimer le fichier spip_style.css, pour compatibilité ascendante
-* supprimer le répertoire /oo et sommaire_texte.html ??

Voir aussi mon « Memo de la maquette Web » :
http://romy.tetue.net/spip.php?article421

2

Pour éviter de trop peiner Nicolas et Ben (qui n'ont évidemment pas
tord), voici une nouvelle dist, disponible en svn (donc à tester,
critiquer, etc.) :

ya pas que nous 2 hein :wink:

voilà c'est visible sur le site de demo
http://demo.spip.org/svn/

(videz bien le cache du navigateur pour la css)

Ben.

3

Perso! J’adore!

Merci Romy pour cette nouvelle Dist!!!

  • seb -
4

* romy@rezo.net tapuscrivait, le 23/08/2007 15:34:

Pour éviter de trop peiner Nicolas et Ben (qui n'ont évidemment pas tord), voici une nouvelle dist, disponible en svn (donc à tester, critiquer, etc.) :

Je verrais volontiers pour habiller graphiquement ça un fond de page genre :
http://lespacedunmatin.info/blog/index.php?2007/01/25/718-liste-francophone-pour-jquery
ou
http://www.spip-blog.net/

En tout cas quelque chose qui fasse dire à l'installation : ouah, c'est beau.
(cf des discussion récentes sur la première impression).

5

J'aime beaucoup aussi, un petit hcard dans auteur.html et c'est parfait :slight_smile:

Perso! J'adore!

Merci Romy pour cette nouvelle Dist!!!

- seb -

6

Bravo pour tout ce boulot, c'est à la fois plus beau et plus digeste dans la présentation :wink:
Par contre juste un avis perso, les css sans sauts de lignes et indentations je trouve ça pas très lisibles.

Aurélien

7

D'abord, un mot : superbe :slight_smile: (pas comme l'espace privé quoi... gni gni)

ensuite quelques petites critiques :

* les notes sont de la même taille que le texte principal

* les intertitres jaunes-verts sont illisibles, et le souligné dans
toute la largeur, c'est joli quand c'est rare, mais je n'aime pas
l'idée que ce soit standard

* les blocs tout en majuscules ont deux défaut :
- 1) les majuscules (lourd)
- 2) le "blanc tournant" (enfin, violet) est pas bon, il manque sans
doute qq pixels de padding-left/right

* la couleur étrange (un peu moirée) de certains aplats rend difficile
la lecture : c'est le cas dans les formulaires (inscription) et dans
le thead des tableaux

* il y a un chevauchement pas joli ici sous FF/Mac :
http://demo.spip.org/svn/spip.php?site5

-** supprimer la barre typo en table, grrr !!

je dirais supprimer la barre typo, tout court (c'est vraiment un truc
de plugin, cette barre).

-- Fil

8

* romy@rezo.net tapuscrivait, le 23/08/2007 15:34:

Pour éviter de trop peiner Nicolas et Ben (qui n'ont évidemment pas
tord), voici une nouvelle dist, disponible en svn (donc à tester,
critiquer, etc.) :

Je verrais volontiers pour habiller graphiquement ça un fond de page genre :
Site en construction
ou
http://www.spip-blog.net/

En tout cas quelque chose qui fasse dire à l'installation : ouah, c'est
beau.

oui, c'est beau : c'est ce qu'on voit partout ! :slight_smile: (moi y compris) c'est un peu Spip rentre dans le rang mais au moins on n'aura plus "tous les spips se ressemblent" mais "tous les cms/blog se ressemblent"

Claude

9

Hello,

Je trouve sympa la nouvelle dist.

Toutefois quelques remarques (Safari 2.0.4, Mac OSX 10.4.10, définition écran: 1680x1050):
- j'aurais espacé un peu chaque bloc article les uns des autres pour laisser respirer un peu la page et permettre une "pause visuelle". De ce fait, augmenter un peu plus l'espace (marge) entre "derniers articles", "dernières brèves", etc.;
- mettre un fond un peu comme lorsqu'on va sur la page login. Cela renforcera le contenu de la page;
- mettre un peu plus de padding dans le pied de page;
- pour la liste de rubrique sur la droite, décaler de 5px max (c'est pas beaucoup mais ça a son effet)vers la gauche les titres des rubriques;
- la couleur de l'intertitre h3 class="spip" n'aide pas à la lisibilité du texte... Il faut une couleur avec un peu plus de contraste, mais garder une couleur qui tranche, qui change du mauve/violet générale. Il faut une couleur tonique avec la couleur dominante donc.
- pourquoi une différenciation entre h3 et h3.spip? Le nouvel utilisateur pourrais s'y perdre non?
- pour le bloc <quote>, je mettrai bien les guillemets en fond (cf. http://www.digital-web.com/)
- pour le forum, mon goût serait dans ce genre pour "répondre à cet article": http://www.alistapart.com/articles/stayingmotivated
- l'affichage des forums, dans ce genre: http://www.alistapart.com/comments/stayingmotivated/ (ces deux derniers points sont peut-être "les goûts et les couleurs [...]")
- toujours pour l'affichage, alterner un fond (un blanc, un "gris", un blanc, un "gris", etc.);
- ben, c'est déjà pas mal tout ce que j'ai dit, non? Ce n'est pas "grand chose" mais du travail quand même...

Teddy Payet.

10

* les intertitres jaunes-verts sont illisibles, et le souligné dans
toute la largeur, c'est joli quand c'est rare, mais je n'aime pas
l'idée que ce soit standard

J'ai remarqué que les utilisateurs ont tendance à utiliser le raccourci {{{intertitre}}} pour obtenir un effet visuel de gras centré, et génèrent donc du h3 à tord et à travers.

J'ai donc voulu redonner son sens au h3 et à ce raccourci SPIP en l'accentuant visuellement : pour l'instant je n'ai trouvé que le souligné pour bien signifier que c'est un intertitre, c'est-à-dire que ça marque le passage à une idée suivante, à une autre section du document.

(Rq : les intertitres du Web n'ont rien à voir avec ceux de la presse papier : les premiers devant être porteurs de sens, quand les autres peuvent être simple accroche visuelle)

- la couleur de l'intertitre h3 class="spip" n'aide pas à la
lisibilité du texte... Il faut une couleur avec un peu plus de
contraste, mais garder une couleur qui tranche, qui change du mauve/
violet générale. Il faut une couleur tonique avec la couleur
dominante donc.

Vip, on essaye mieux : http://trac.rezo.net/trac/spip/changeset/10108

- pourquoi une différenciation entre h3 et h3.spip? Le nouvel
utilisateur pourrais s'y perdre non?

Euh... ça a toujours été comme ça :wink:
Cf.:

http://trac.rezo.net/trac/spip/browser/spip/dist/spip_style.css

11

(Rq : les intertitres du Web n'ont rien à voir avec ceux de la presse
papier : les premiers devant être porteurs de sens, quand les autres
peuvent être simple accroche visuelle)

Là on revient à des discussions d'il y a 5 ans... Dans SPIP justement
l'idée de {{{xx}}} c'est d'avoir l'équivalent des "intertitres de la
presse papier" ; un truc simple pour faire des trucs gras et centrés.
Le fait que ça ait été transformé en h3 est un choix historique
arbitraire... et secondaire.

Si les gens veulent effectivement bien distinguer la structure de leur
document, ils peuvent taper les "raccourcis" <h2>, <h3> etc eux-mêmes
(ou avec une barre typo avancée extralucide).

Que fais-tu de ce que, personnellement, j'utilise très souvent pour
créer une respiration dans un texte : {{{* * *}}}

Le HTML ne manque pas de structure, il manque plutôt de souplesse.

-- Fil

12

Bonjour,

Pour ma part, c'est ce que j'aime avec SPIP, son background éditoriale
presse papier. Travaillant moi-même en édition print, c'est agréable
de voir un CMS qui respecte les règles de typographie et de mise en
page digne de ce nom. (boh, ok il y a toujours des choses à améliorer
mais c'est du beau travail déjà!) Et n'est pas là que pour faire
je-m'as-tu-vu tape à l'oeil en ne respectant pas les "règles"...

Il me semblait avoir lu que dans SPIP 2.0, nous abandonnerions les
class="spip"... Quand est-il? Faut-il garder cette
classification/différenciation des intertitres? Ne serait-il pas mieux
de faire pour ces intertitres une class="intertitre"? Ainsi, cela ne
pose pas de problème pour les autres h3 des squelettes et les
intertitres et garde cette séparation visuelle que vous avez mis en
place. Je trouve, perso, que le border-bottom est une très bonne
chose, agréable à la lecture.

Par contre mettre en centré (text-align: center), ben pas trop
"chaud"... Ou sinon, pourquoi ne pas permettre au rédacteur ou
webmaster de sélectionner l'alignement droite, centre, gauche... Un
peu comme les doc...

13

(Rq : les intertitres du Web n'ont rien à voir avec ceux de la presse
papier : les premiers devant être porteurs de sens, quand les autres
peuvent être simple accroche visuelle)

Là on revient à des discussions d'il y a 5 ans... Dans SPIP justement
l'idée de {{{xx}}} c'est d'avoir l'équivalent des "intertitres de la
presse papier"

C'est une super idée « d'avoir l'équivalent des "intertitres de la presse papier" », parce que ça manque, oui. Mais lorsque cela m'a manqué, je n'ai jamais pensé à utiliser le raccourci {{{toto}}} pour ce faire !!

Car ce n'est pas une bonne idée d'employer pour cela un truc déjà doté d'un rôle différent.
Ça contrarie la hierarchie des titres sur l'ensemble du site (cf.: http://fraichdist.online.fr/spip.php?article265#forum109 ), et ce n'est pas pédagogique de perpétuer cet usage détourné du HTML (qui, n'est que structure psychorigide oui).

Plutôt que de détourner la structure du Web, SPIP pourrait introduire la souplesse qui lui fait défaut en proposant l'équivalent des "intertitres de la presse papier", qui pourraient être ainsi structurés sans dommage :
<p class="spip_inter">Ici mon texte</p>

Libre au webmestre d'un faire un traditionnel gras centré ou zouli encart aligné droite :wink:

Que fais-tu de ce que, personnellement, j'utilise très souvent pour
créer une respiration dans un texte : {{{* * *}}}

Une respiration dans le texte ? c'est du hr !
Et ça peut aisément ressembler aux trois traditionnels astérisques, voir :

http://romy.tetue.net/spip.php?article239

14

> Que fais-tu de ce que, personnellement, j'utilise très souvent pour
> créer une respiration dans un texte : {{{* * *}}}

Une respiration dans le texte ? c'est du hr !
Et ça peut aisément ressembler aux trois traditionnels
astérisques, voir :
Styling <hr> with CSS
http://romy.tetue.net/spip.php?article239

Trois atérisques appelées aussi astérisme.

15

C'est une super idée « d'avoir l'équivalent des "intertitres de la
presse papier" », parce que ça manque, oui. Mais lorsque cela m'a
manqué, je n'ai jamais pensé à utiliser le raccourci {{{toto}}} pour
ce faire !!

c'est étonnant car ça s'appelle "raccourci intertitre", pas "raccourci
titre de niveau 3".

Car ce n'est pas une bonne idée d'employer pour cela un truc déjà
doté d'un rôle différent.

Oui, c'est ce qu'on appelle un compromis, qui marche généralement pas
mal, et qu'on peut modifier si on est un w3c-guru. C'est peut-être
faux, mais c'est pas comme si c'était pas longuement réfléchi.

Plutôt que de détourner la structure du Web, SPIP pourrait introduire
la souplesse qui lui fait défaut en proposant l'équivalent des
"intertitres de la presse papier", qui pourraient être ainsi
structurés sans dommage :
<p class="spip_inter">Ici mon texte</p>

Ben le défaut de cette approche c'est que tu perds pour les
navigateurs texte (lynx etc). Qui entraient en ligne de compte dans le
compromis d'il y a 5 ans.

Libre au webmestre d'un faire un traditionnel gras centré ou zouli
encart aligné droite :wink:

Ca de toutes façons, avec les variables de personnalisation, les
barres typo etc, le webmestre fait vraiment ce qu'il veut ; ce dont on
discute c'est vraiment du truc "de base".

> Que fais-tu de ce que, personnellement, j'utilise très souvent pour
> créer une respiration dans un texte : {{{* * *}}}

Une respiration dans le texte ? c'est du hr !
Et ça peut aisément ressembler aux trois traditionnels astérisques,
voir :
Styling <hr> with CSS
http://romy.tetue.net/spip.php?article239

Sympa, mais je trouve plus pratique d'avoir la possibilité de faire
{{{*}}} puis {{{***}}} etc.
Cela dit le raccourci ----- est vraiment pas terrible :slight_smile:

Par ailleurs je trouve dommage de tout mettre sur le tapis en même
temps, car chaque élément de la discussion mérite du temps. Là on va
vite s'épuiser (en tous cas, moi), à refaire tous les trolls des 8
années de développement de SPIP.

-- Fil

16

c'est étonnant car ça s'appelle "raccourci intertitre", pas "raccourci
titre de niveau 3".

Depuis que j'utilise SPIP, j'ai toujours considéré ces intertitres comme des débuts de section, donc des éléments de structure sémantique. Il me semble que nous sommes nombreux dans ce cas, d'où les plugins/contrib qui génèrent des sommaires à partir d'eux, ou qui ajoutent d'autres niveaux.

Plutôt que de détourner la structure du Web, SPIP pourrait introduire
la souplesse qui lui fait défaut en proposant l'équivalent des
"intertitres de la presse papier", qui pourraient être ainsi
structurés sans dommage :
<p class="spip_inter">Ici mon texte</p>

Ben le défaut de cette approche c'est que tu perds pour les
navigateurs texte (lynx etc). Qui entraient en ligne de compte dans le
compromis d'il y a 5 ans.

Le HTML étant si peu structuré, ce serait quand même dommage de perdre le peu qu'on a sous prétexte que visuellement ça se comporte de manière sympathique dans certains clients, non ?

Est-ce que le besoin correspond à ce qu'on trouve dans l'édition (je ne connais que très peu ce monde), des extraits du texte qui sont mis en exergue dans un bloc flottant ?

Dans ce cas, ce sont des citations particulières, qui mériteraient sans doute un raccourci spécifique, non ?

Par ailleurs je trouve dommage de tout mettre sur le tapis en même
temps, car chaque élément de la discussion mérite du temps. Là on va
vite s'épuiser (en tous cas, moi), à refaire tous les trolls des 8
années de développement de SPIP.

C'est clair que ces dernières semaines, beaucoup de choses sont changées relativement brutalement, sans discussion préalable sur les mailing-lists les plus générales (spip-dev en tête), alors qu'on étaient sans doute plusieurs à penser qu'une 1.9.3 pourrait arriver à maturité rapidement, sans changement majeur.

-Nicolas

17

Depuis que j'utilise SPIP, j'ai toujours considéré ces intertitres
comme des débuts de section, donc des éléments de structure
sémantique.

Oui mais tu es un informaticien spécialiste du Web :slight_smile:

Il me semble que nous sommes nombreux dans ce cas, d'où
les plugins/contrib qui génèrent des sommaires à partir d'eux, ou qui
ajoutent d'autres niveaux.

Sans doute, mais ce n'est pas le profil le plus courant ni l'objectif
"standard" de SPIP.

Le HTML étant si peu structuré, ce serait quand même dommage de
perdre le peu qu'on a sous prétexte que visuellement ça se comporte
de manière sympathique dans certains clients, non ?

qui parle de perdre quoi que ce soit ?

Est-ce que le besoin correspond à ce qu'on trouve dans l'édition (je
ne connais que très peu ce monde), des extraits du texte qui sont mis
en exergue dans un bloc flottant ?

Non, une exergue c'est autre chose qu'un intertitre (et SPIP ne
propose pas de méthode standard pour l'exergue, ce qui est d'ailleurs
dommage).

-- Fil

18

Nan, je suis pas d'accord là :
« intertitre » ça veut dire ce que ça veut dire : titre intermédiaire.

C'est parce que j'ai suivi un cursus journalistique que j'ai découvert que dans ce contexte, le terme désignait improprement un bout de texte mis en avant pour rythmer la mise en page et/ou accrocher le lecteur, en tout cas maintenir son attention dans sa lecture.

Quand j'ai débuté avec SPIP, je n'étais pas du tout familière du web, et derrière le terme « intertitre » je n'ai rien compris d'autre que « titre intermédiaire ».

Quand, plus tard, sans doute influencée par ma formation journalo-littéreuse, j'ai eu envie de coller des zoulies accroches textuelles dans mes mises en pages Web, j'ai inventé une autre astuce, mais je n'ai pas songé un seul instant à employer {{{intertitre}}} pour ce faire. Bin non.

19

Depuis que j'utilise SPIP, j'ai toujours considéré ces intertitres
comme des débuts de section, donc des éléments de structure
sémantique.

Oui mais tu es un informaticien spécialiste du Web :slight_smile:

Zut, je suis démasqué ! :wink:

Il me semble que nous sommes nombreux dans ce cas, d'où
les plugins/contrib qui génèrent des sommaires à partir d'eux, ou qui
ajoutent d'autres niveaux.

Sans doute, mais ce n'est pas le profil le plus courant ni l'objectif
"standard" de SPIP.

Dans la section « Raccourcis typographiques » de l'aide en ligne de SPIP, depuis toujours me semble-t-il, il est indiqué ceci :

« Les intertitres sont des titres à l’intérieur d’un texte permettant d’en indiquer la structure. »

Donc structure, ou pas ?

Le HTML étant si peu structuré, ce serait quand même dommage de
perdre le peu qu'on a sous prétexte que visuellement ça se comporte
de manière sympathique dans certains clients, non ?

qui parle de perdre quoi que ce soit ?

Si on change la documentation pour dire que les <h3> générés par {{{ }}} ne sont plus des éléments de structure, cela va à l'encontre de la sémantisation croissante du web, à base de <hx> en attendant mieux...

Est-ce que le besoin correspond à ce qu'on trouve dans l'édition (je
ne connais que très peu ce monde), des extraits du texte qui sont mis
en exergue dans un bloc flottant ?

Non, une exergue c'est autre chose qu'un intertitre

OK

(et SPIP ne propose pas de méthode standard pour l'exergue, ce qui est d'ailleurs
dommage).

Il y avait un modèle, non ? Sinon, il ne doit pas être bien compliqué à faire.

-Nicolas

20

Pour respecter spip d’un coté et la sémantique de l’autre (et aussi les histoires d’accessibilité qui demande à avoir une structure hiérarchisé d’une page) on ne pourrait pas avoir d’un coté intertire {{{ }}}
qui genère un span ou div de classe intertitre et de l’autre des raccourcis qui génère des niveau de titre sémantique ? l’inconvénient c’est l’existant qui faudrait reprendre … ou une option pour intégrer les intertitre dans la structure comme on l’a par exemple avec le plugin joli puce qui transforme les puces historiques de spip en puces html.
Les enluminures proposent déjà les raccourcis {2{ {3’ … donc tout est presque là.
C’est essentiellement un problème de traduction de cet intertitre en html différent selon les usages de chacun.

a+