Wiki source for Blog20110108ConcoursCSSlinuxFr


Show raw source

Bon je vais essayer de me trouver quelques critères pour la CSS principale de LinuxFr

D'abord ceux annoncés en début de concours permettant de guider les réalisations et certains plus personnels permettant de faire évoluer les CSS (suggestions, à prendre en compte au besoin par la suite) et me permettant de départager.

===Quelques critères supplémentaires pour le choix de CSS par défaut pour LinuxFr===
~- Bonne visualisation sur EeePC 901 (contrainte perf + largeur navigateur réduite)
~- impressions, suggestions, points notables, points gênants (assez subjectif, à trier)
~- Bonnes performances, essayer avec Firefox 3.6.13 et peut-être chromium ou epiphany
~- compléter liste de tests de non régression (pages à visualiser/rendu, fonctionnalités commentaires/rédaction journal ou dépêche et autres, visualisation nouveaux commentaires, rendu des tribunes)
~- participation, remarques, entraide, remontées de bugs voire de patchs
~- finalisation, utilisabilité, volonté de faire évoluer / décliner

===Petits soucis généraux liés à l'alpha===
À remonter sur github pour prise en compte (compléter/préciser le contexte)
~- obligation d'être loggué pour changer de css
~~- comment fais-je sur mon mobile pour bénéficier d'une CSS adaptée ?
~~- comment faire pour passer à la validation de CSS http://jigsaw.w3.org/css-validator/ ?
~- le titre de page "Liste des journaux", "Dépêches" pourrait être enlevé des pages (a priori, ce n'est pas aux css de le faire ?)
~- manque la prévisu sur la tribune, le alt sur toute la ligne (avec le user-agent) est un peu gênant ++et les [:totoz]++ si si, ya \o/
~- "écrire un commentaire"
~~- ne met pas la page à hauteur de la zone de saisie (sur eeepc oblige à scroller si le commentaire est long)
~~- ne réaffiche pas le contenu
~~- le bouton (lien en l'occurence) n'est que tout en bas de la page ?
~- en modération, édition de dépêche rajouter une anti-sèche sur le Markdown
~~- s'assurer que la visualisation est la même que la prévisualisation avant soumission (manque du sommaire ?)
~~- lors édition d'un paragraphe, il ne réapparaît pas après édition (appui sur bouton OK), faudrait un bouton annuler ?
~- le lien #top manquant dans la toolbox me manque vraiment :/

===Vérif' et évaluation des css===
Conditions de tests : sur EeePC 901 / powersave - Firefox 3.6.13 / Mandriva Linux 2010.2
https://alpha.linuxfr.org/stylesheet/modifier
Voici une idée a priori des critères de sélection des gagnants, par ordre de priorité :
1. Choix du design par le jury. Une évolution dans la continuité sera privilégiée ;
2. Contributions les plus complètes et utilisables immédiatement (exemple : un package avec css/js/jpeg/svg/etc. par rapport à une simple proposition en image mais qu’il faut implémenter derrière) ;
3. Plusieurs déclinaisons proposées : desktop, impression, mobile, etc. ;
4. Facilement déclinable sur d'autres supports (Posters, chandails, autocollants, etc.).

Points supplémentaires à vérifier :
~- logos drapeaux pour liens des dépêches
~- critères du concours

~- black-bling


~- blue-smooth
première impression, ça rappelle un peu [[http://en.wikipedia.org/wiki/Étoilé le window manager]] Étoilé en couleurs bleues/violettes, un peu de perte de place en largeur (marge autour des journaux)
un peu de perte de place avec le "lire la suite..." sur 3 lignes
impression d'une css réactive quand on scrolle (pas d'artefact),
tribune modo : ~ok un peu trop d'espace entre deux paragraphes
le texte des dépêches n'est pas justifié, cela rendrait mieux àmha, ainsi que des titres moins gros (ou moins gras)
liste à puce : ok le 2ème niveau est géré
titres : nickel avec le trait, très littéraire
toolbox en bas comme sur DLFP, ça le fait (en bas __quasiment__ sur toute la longueur)
nouveau commentaire : pas très visible ? Est-ce normal la largeur réduite des commentaires et la place "perdue" sur la droite ? (marge trop importante ?)
écrire un commentaire : ok, cela tient dans la page, couleurs adaptées (ça plaît ou pas)
la barre de titre ne prend pas une couleur différente pour la section en cours
les tableaux (de bord, suivi) rendent bien, les marges gauche et droite pourraient être plus petites

~- cascade
la barre de titre passe à la ligne quand la largeur n'est pas suffisante, idem pour barre de recherche, c'est un peu pénalisant sur un EeePC et le grisé autour du logo LinuxFr fait bizarre
semble réactive
ah on ne voit pas les liens sur https://alpha.linuxfr.org/board pour en popup, en ligne ou en chauve (il faut passer dessus pour les rendre visible), oubli ? (et avec largeur réduite, les nicks trop long décalent l'alignement gauche de la tribune, essayer avec un peu plus de largeur)
tribune modo : pas besoin de marge gauche, serait-il possible de l'enlever (sinon la taille des caractères est ok)
liste à puce : ok le 2ème niveau est géré
titres bordeaux ou grenats, ça va (l'égoût et les couleuvres toussa)
toolbox en bas sur toute la largeur, je ne l'avais pas vue au début o_O
nouveau commentaire : ok en grisé plus foncé, ça se voit
écrire un commentaire : ok, cela tient dans la page, couleurs cohérentes
les tableaux (de bord, suivi) rendent __très__ bien, les marges sont optimisées

~- colors
un peu grand l'en-tête de liste des sections, la section en cours est de couleur (novateur :D), des efforts de recherche d'icônes (le "remonter en haut de page", le bouton recherche)
cela fait 6 lignes en-dessous de chaque commentaire avec répondre, pertinent, ou, inutile chacun sur sa ligne
revérifier avec écran plus large : j'ai systématiquement un ascenseur horizontal et la tribune modo est cachée sur la droite, il ne faudrait pas de taille minimale
ah, tiens le pied de page n'est pas de la couleur de l'en-tête de la section en cours ?
tribune modo : sur la droite, interligne un peu grand, la justification du texte sur des colonnes étroites ne rend pas toujours bien (réduire la police ?)
liste à puce : ok, un peu trop d'interligne ?
titres à agrandir pour les différencier du gras
toolbox : elle a disparu ? /o\
nouveau commentaire : ils sont en gras ? pas très visible j'ai l'impression :/
écrire un commentaire : ok, le bouton prévisualiser pourrait être en dessous de la zone de saisie ?
les tableaux (de bord, suivi) rendent correctement (manque peut-être des lignes de séparation et centrer note / nb de réponse sur suivi

~- edition_papier
peut-être bien sur un mobile (à tester)
mêmes défauts que la css opensuse (conso cpu)
titres conservés alors que inutiles

~- grayscale
des bords arrondis avec des traits de coupe, des commentaires les uns dans les autres , un petit bug avec pertinent / inutile qui recouvre "tagguer", les sondages prennent un peu de place en hauteur
tribune modo : ok, pour la modération d'un article apparaît à droite en grisé (pas forcément super lisible)
liste à puce : ok
titres : ok
toolbox : ok apparaît quand la souris est mise en bas
nouveau commentaire : hmmm je n'ai pas vu de différence o_O
écrire un commentaire : ok
la barre de titre est ok, possibilité de virer le "liste de" pour dépêches, journaux et forum
les tableaux (de bord, suivi) rendent correctement

~- grayscale-mobile
pas trop testée : manque le lien Plan pour retrouver un lien pour changer de CSS (ou avoir gardé la page) puisque l'on n'a plus sa boîte utilisateur...

~- ice
taille minimale en largeur ? trop large sur mon EeePC => pas trop regardé
puis bon, le choix tout centré, non, juste non.

~- kaiska-new
ressemble beaucoup à l'existant, les dépêches sont justifiées et occupent toute la largeur. La tribune est pas mal.
tribune modo : ~ok, sinon il y a un souci avec la tribune d'édition d'un article, elle apparaît en dessous et non sur le côté :/
liste à puce : ok
titres : ok
toolbox : ok en bas, sur le côté gauche au lieu d'à droite (pas trop gênant)
nouveau commentaire : ok cadre rouge, manque icône [!] mais bon
écrire un commentaire : ok
la barre de titre : ok, la section en cours est d'une couleur différente
les tableaux (de bord, suivi) : nickel

~- kaiska-short
ressemble beaucoup à l'existant, les dépêches sont justifiées mais semblent calées sur la gauche (ça fait un peu bizarre). La tribune est pas mal.
tribune modo : ~ok, sinon il y a un souci avec la tribune d'édition d'un article, elle apparaît en dessous et non sur le côté :/
liste à puce : ok
titres : ok
toolbox : ok en bas, sur le côté gauche au lieu d'à droite (pas trop gênant)
nouveau commentaire : ok cadre rouge, manque icône [!] mais bon
écrire un commentaire : ok
la barre de titre : ok
les tableaux (de bord, suivi) : nickel

~- kitch
hmmm non, pas pour la CSS par défaut, rose orange, non
tribune centrée, non ce n'est pas très pratique

~- minimaliste
ah tiens, les images n'apparaissent plus ? on ne voit plus les screenshots des différents styles
la ligne de sections est mangée par la boîte de recherche (je n'ai pas beaucoup de largeur d'écran), de même la tribune modo mord sur le texte à sa droite
globalement, c'est un peu grisé tout cela :-)
tribune modo : les paragraphes centrés ne sont pas très heureux :/ et interligne un peu trop grand
liste à puces : ok, géré le tiret rend bien
les titres ne sont pas trop en évidence (les agrandir de quelques pixels pour éviter de confondre avec du gras ?)
toolbox sur 4 lignes en bas à droite, elle mord sur le texte qui passe dessous (est-elle prioritaire si il y a un lien en dessous ?)
nouveau commentaire : il y a un cadre autour pour le mettre en évidence, le cadre grisé autour des thread fait un peu bizarre et on dirait que la page doit avoir une largeur minimal vu que j'ai un ascenseur horizontal (pas pratique avec le touchpad de l'EeePC) ou alors c'est dû au fait que j'ai la tribune modo sur toutes les pages
écrire un commentaire : non terminé, les "boutons de mise en forme" ne sont que des liens
les tableaux (de bord, suivi) ne rendent pas très bien (tout centré) et perte de place à cause de marges droite et gauche

~- nightgrey
tribune modo :
liste à puce :
titres :
toolbox
nouveau commentaire :
écrire un commentaire :
la barre de titre
les tableaux (de bord, suivi)

~- opensuse
à réserver à une sortie de distribution
effectivement des lenteurs quand on scrolle sur une page
tribune modo : pas besoin de marge, serait-il possible de l'enlever (sinon la taille des caractères est ok)
liste à puce : ok le 2ème niveau est géré, pourrait être plus en retrait
titres : en vert, mais bon les goûts et les couleurs ;-)
toolbox en bas sur la gauche : elle tient sur 3 lignes
nouveau commentaire : en gris plus foncé, pas vraiment très visible pourrait l'être plus
écrire un commentaire : ok, cela tient dans la page
la barre de titre ne prend pas une couleur différente pour la section en cours, sinon le noir est assez joli
les tableaux (de bord, suivi) rendent correctement, la police pourrait être plus petite

~- petite_css
oui, mais non, souci de couleurs et de polices (peut-être pour daltonien ?)
bug sur longueur journal lié à tribune sur le côté gauche :/
tribune modo : police un peu trop grande, ajoute ascenseur horizontal :/
liste à puce :
titres : en vert o_O un peu trop grands ?
toolbox : moui
nouveau commentaire : bleu sur bleu, pas très visible
écrire un commentaire : textarea trop courte en largeur
la barre de titre : rien
les tableaux (de bord, suivi) sans mise en forme...

~- retro

~- ""RonRonnement""

~- sky

~- modèle sélection css
tribune modo :
liste à puce :
titres :
toolbox
nouveau commentaire :
écrire un commentaire :
la barre de titre
les tableaux (de bord, suivi)


~- ""RonRonnement-Turquoise""
consommation CPU élevée à affichage de la page des journaux (explication donnée quelquepart à retrouver, lié au dégradé, je crois)
artefact sur mon login, quand je quitte la page, mon login n'apparaît pas tourné de 90° sur la gauche, mais les lettres en dessus des autres
belle apparence, un peu de perte de place avec la note sur le côté droit en haut des journaux (enlever marge de droite ?)
tribune modo : ok, nickel
liste à puce : ok le 2ème niveau est géré
titres : ok
toolbox en bas comme sur DLFP, ça le fait (en bas __quasiment__ sur toute la longueur)
nouveau commentaire : avec liseré vert, ça le fait
écrire un commentaire : ok, joli, on peut agrandrir en hauteur la zone de saisie Markdown (mais pas en largeur ? un peu trop large en l'occurence)
liens : ah différenciation lien interne wiki ou lien wikipedia, pas mal
la barre de titre ne change pas de couleur selon section, le dégradé apparaît après coup sur l'EeePC mais blanc puis gris on va dire que ça passe
les tableaux (de bord, suivi) ~ok un peu trop de marge à droite, police ok


===Contributions des participants outre la CSS===
aer - colors - fourniture de patch, explication de la conception et des choix de fonctionnalités
Octabrain - création de page de test comme https://alpha.linuxfr.org/forums/generaltest/posts/test-css (test des titres principalement)
suizokan - proposition d'images http://linuxfr.indefero.net/p/concours-suizokukan/source/tree/master/
Yggdras - création de page de test comme https://alpha.linuxfr.org/wiki/Test-Syntaxe-Wiki

style supplémentaire http://www.schyzo.fr/dlfp.css (ah elle gère bien les nouveaux commentaires avec le [!] \o/)
et http://souffles.eu/dlfp.css ? (par Sygne)

===Liste des liens regardés===
https://alpha.linuxfr.org/stylesheet/modifier pour changer de css
https://alpha.linuxfr.org/tableau-de-bord et https://alpha.linuxfr.org/suivi pour le rendu des tableaux
https://alpha.linuxfr.org/board à comparer à l'ancienne https://linuxfr.org/board/
https://alpha.linuxfr.org/wiki/Test-Syntaxe-Wiki test syntaxe dont liste à puces (2 niveaux)
https://alpha.linuxfr.org/nodes/83391/comments/1179554/answer écrire un commentaire (et vérif' visualisation)
https://alpha.linuxfr.org/moderation/news/soir%C3%A9e-git-et-d%C3%A9veloppement-efficace-%C3%A0-lalpes-jug-grenoble vérifier la modération d'une dépêche (position tribune notamment)
https://alpha.linuxfr.org/redaction/news/r%C3%A9trospective-2010 rédaction collaborative de dépêche, fait apparaître une tribune aussi

----
CategoryLinuxFr
Valid XHTML :: Valid CSS: :: Powered by WikkaWiki