Ce site est optimisé pour être consulté depuis un navigateur moderne dans lequel JavaScript est activé.

revoir l'esthétique du site

YannUbuntu

On va bientôt pouvoir remplacer le koala par le Père Noël 😉 :lol:

D'ailleurs d'après le planning proposé par sam, le koala ne servira qu'une semaine, et sera de suite remplacé par le lynx.
5 mois c'est long, j'espère qu'on arrivera à faire plus court.

@Mc Peter: pour info voici ce que j'obtiens actuellement :

Julientroploin

YannUbuntu a écrit@Mc Peter: pour info voici ce que j'obtiens actuellement :
[url]http://img687.imageshack.us/img687/9035/redisign.th.png[/url]

Exactement pareil, mais je pense que c'est normal :
on est dimanche : il bosse dessus pour nous montrer un truc sympa demain :p

sam7

YannUbuntu a écritOn va bientôt pouvoir remplacer le koala par le Père Noël 😉 :lol:

D'ailleurs d'après le planning proposé par sam, le koala ne servira qu'une semaine, et sera de suite remplacé par le lynx.
5 mois c'est long, j'espère qu'on arrivera à faire plus court.

@Mc Peter: pour info voici ce que j'obtiens actuellement :
[url]http://img687.imageshack.us/img687/9035/redisign.th.png[/url]

j'espère bien et je souhaite que le KOALA serve plus d'une semaine...
il ne tiens qu'à nous d'accélérer la cadence... mon planning prévisionnel étant au plus "lent"
et il est vrai qu'il va falloir également plancher sur le LINX suivant le même esprit...
j'ai mon idée sur le sujet...

je voulais dire par là qu'il ne faudra pas oublier l'emlacement de l'animal de la version en cours...

j'espère que McPeter est en train de nous concocter quelque chose de sympa...
mettez-moi tout celà de coté svp merci (au cas où)...

quel sera donc l'ordre du jour ?
codage accueil & mockups documentation ?

Poupoul2 sera t'il à nouveau présent ?
(il doit noux préparer quelque chose pour le Planet normalement...)

NB : je crois qu'il serait judicieux de prévoir un bandeau "annonces" comme il existe actuellement
sur accueil & forum ... mais à mettre plutôt sur nos mockups forum & Planet ?

sam7

Finalement, je suis là... mais nous ne sommes pas nombreux...
venez nous rejoindre sur IRC canal #ubuntu-fr-devweb

au programme ce soir : la documentation

on se base sur l'idée de départ (pour rappel)
http://doc.ubuntu-fr.org/utilisateurs/yannubuntu/proposition_accueil11
& sur http://forum.ubuntu-fr.org/viewtopic.php?id=235909&p=45 #1119
pour le contenu du bandeau latéral gauche

après réflexion : les rubans sur les tableaux proposés ici
http://lukdesigner.free.fr/Ubuntu/v4/docV4_Array.png
ne sont pas retenus... uniquement ceux de la table des matières

comme le dit julientroploin :

julientropoin a écritje pense que ce qui est icones divers (liens internets, liens apt, etc...) ainsi que les blocs de codes peuvent rester identiques...

& on prendra les boutons "éditer" du mochup ci dessus...
(ainsi que les éléments concoctés au printemps derniers)
avec une petite variante dans le fonctionnement :

julientroploin a écritlà, il est ouvert en bas, or c'est ce qui est au dessus qui est éditable. Donc je propose de l'ouvrir en haut (le retourner verticalement en fait)
comme un onglet en bas du bloc à éditer

reste les niveaux des titres à définir (en cours)

voici ce que nous avons retenus comme idées :
premier niveau : gros titre en gras (de la couleur du "-fr")
second niveau : avec ou sans bandeau + ruban ? ... comme l'on trouve ici : http://lukdesigner.free.fr/Ubuntu/v4/forumV4_connecte.png
ensuite : taille en dégradé, et en passant par les 3 couleurs du logo, avec un décallage (tabulation) ?
on reste sur 5 niveaux comme actuellement... avec donc 4 couleurs de titres + 1 ruban (pour le second niveau)

pour être plus précis (par exemple) :
... en se basant sur une taille à "1" pour le texte en police "standard" (schématiquement)

Niveau 1 : couleur du -fr, en gras, taille 2.0em
Niveau 2 : bandeau ... (taille 1.8em ... ou plus petit si nécessaire)
Niveau 3 : une des 3 couleurs du logo, en gras souligné, taille 1.6em
Niveau 4 : une des 3 couleurs du logo, en gras, taille 1.4em
Niveau 5 : une des 3 couleurs du logo, en gras italique, taille 1.2em

(enfin, ça donne une idée du ratio / des proportions minimums entre les différentes tailles...
... quitte à réduire le tout de 80% si nécessaire pour coller à l'actuel)

qui peux donc nous mettre tout ceci en images (rapidement si possible) ? d'avance, merci

luk ? es-tu volontaire ?

merci aux contributeurs de ce soir...

------------
NB : rappel : ça se passe ici : http://doc.ubuntu-fr.org/utilisateurs/julientroploin/test_doc

Ner0lph

Pour les blocs de code, il faut mettre les fonds de couleur claire pour que la coloration syntaxique ne puisse pas rendre illisible le texte.

Julientroploin

@ Nerolph : clair comment? la couleur actuelle passe bien, non? Tu as un exemple ou ça pose problème pour qu'on se fasse une idée?

*********************************************************************************

Alors pour que LuK n'ait pas besoin d'aller voir à droite à gauche pour les mockups, je regroupe les éléments :

* La table des matière est conservée comme tu l'avais conçue
http://doc.ubuntu-fr.org/_media/projets/03082009_docv4_1.png

* Menu de gauche (pour un utilisateur connecté) : on garde évidement le style freezé pour le forum et le contenu doit être :

ACCUEIL

DOCUMENTATION

* Actions
- index
- Editer cette page
- anciennes révisons
- derniers changements
- liens vers cette page
- S'abonner à la page
- S'abonner à la catégorie

* Divers
- participer à la docmentation
- documentation hors ligne
- télécharger ubuntu
- partenaires

FORUM

PLANET

A noter : la rubrique "édition récentes" de ton précédent mockup_doc n'est pas retenue.

* Pour réfléchir aux composantes listées ici http://doc.ubuntu-fr.org/utilisateurs/julientroploin/test_doc on est parti de tes mockups du printemps.
Plusieurs choses seraient conservées :
notes importante => http://doc.ubuntu-fr.org/_detail/projets/030809_docv4_notes_1.png
notes aide => http://doc.ubuntu-fr.org/_detail/projets/030809_docv4_notes_2.png
citations => http://doc.ubuntu-fr.org/_media/projets/030809_docv4_quote.png

Manquent :
notes classiques
notes astuces
notes warning

avis personnel (non discuté hier soir, je n'avais pas l'idée en tête) : on a 5 types de notes dont la signification est assez différente. Actuellement elles ont des couleurs différentes, ce qui facilite leur identification. Je pense que tout mettre en brun nuirait à la lecture.
Des avis sur le sujet?

* Pour les tableaux, on a trouvé ça sur ton site : http://lukdesigner.free.fr/Ubuntu/v4/docV4_Array.png
ça convient à tout le monde à l'exception des rubans sur sur la 1ereligne ne sont pas retenus...

* les icones divers (liens internets, liens apt, etc...) ainsi que les blocs de codes peuvent rester identiques...
(sauf précision de Nerolph sur son post précédent)

* boutons "éditer" ta proposition visible ici http://lukdesigner.free.fr/Ubuntu/v4/docV4_Array.png
est concervée, avec une petite variante pour éviter les confusions :

là, il est ouvert en bas, or c'est ce qui est au dessus qui est éditable. Donc je proposais de l'ouvrir en haut (le retourner verticalement en fait) comme un onglet en bas du bloc à éditer

* titres :
voici ce que nous avons retenus comme idées en se basant sur une taille à "1" pour le texte en police "standard" (schématiquement) :
- premier niveau : gros titre en gras (de la couleur du "-fr") taille 2.0em

- second niveau : on voudrait voir ce que donnerait un bandeau brun sur 1 ligne avec un ruban à gauche, un peu comme dans le forum http://lukdesigner.free.fr/Ubuntu/v4/forumV4_connecte.png
(taille 1.8em ... ou plus petit si nécessaire)

-niveaux suivants : reprendraient chacuns une coueur du logo, avec une taille décroissante avec un décallage (tabulation?) vers la droite
donc :
Niveau 3 : une des 3 couleurs du logo, en gras souligné, taille 1.6em
Niveau 4 : une des 3 couleurs du logo, en gras, taille 1.4em
Niveau 5 : une des 3 couleurs du logo, en gras italique, taille 1.2em

(enfin, ça donne une idée du ratio / des proportions minimums entre les différentes tailles...
... quitte à réduire le tout de 80% si nécessaire pour coller à l'actuel)

YannUbuntu

Actuellement les titres niveau 5 se confondent avec le texte en gras. Et AMHA les titres niveaux 3 et 4, même rouges ne se remarquent pas suffisamment.

idée : pour rendre les titres niveaux 3, 4 et 5 plus visibles, on pourrait y accoler un mini-ruban ou bien un liserai de la couleur du titre :

TITRE NIVEAU 1
Titre niveau 2 ====================================== (bandeau brun)
Titre niveau 3 ======-----
Titre niveau 4 ===--
Titre niveau 5 ___

Pas trop grand pour éviter de confondre avec les titres niveau 2, et ne pas se retrouver avec des barres horizontales partout. Quelques cm a droite suffiraient. Ou bien seulement quelques cm de chaque coté par exemple.

TITRE NIVEAU 1
Titre niveau 2 ====================================== (bandeau brun)
---=====Titre niveau 3=====---
--==Titre niveau 4==--
__ Titre niveau 5 __

bien-sur sans les discontinuités. Je verrai bien un fin liserai comme la vague rouge au-dessus de "Présentation" de la nouvelle page d'accueil.

luK

Bonjour,

Je ne suis pas sur de pouvoir faire grand chose pendant les 2 semaines à venir
( période de partiels ).
Je vais faire du mieux que je peux.

Sur ce, bonne journée.

Julientroploin

luK a écritJe ne suis pas sur de pouvoir faire grand chose pendant les 2 semaines à venir

je ferais des ébauches ce WE alors, mais pas avant (vive les conseils de classe).

Ner0lph

@Julientroploin :
• Voici un exemple de code illisibles : http://doc.ubuntu-fr.org/tutoriel/script_shell
• Pour info, le niveau 1 actuel est déjà à 1.5em.
• On peut utiliser des images dégradées (puisqu'on ne peut pas connaitre à l'avance la largeur et la hauteur du texte du titre, surtout s'il est sur plusieurs lignes).
• D'autre part, je suis contre les soulignements (réservés uniquement aux liens hypertextes) mais pas contre les bordures.

@YannUbuntu : Oui, ça peut faire très joli. 🙂

Julientroploin

Ner0lph a écrit• Voici un exemple de code illisibles : http://doc.ubuntu-fr.org/tutoriel/script_shell

en effet, le bleu c'est pas top...

• Pour info, le niveau 1 actuel est déjà à 1.5em.

oui, on est parti de ce qui existait déjà.

• On peut utiliser des images dégradées (puisqu'on ne peut pas connaitre à l'avance la largeur et la hauteur du texte du titre, surtout s'il est sur plusieurs lignes).

j'avais pas pensé du tout à ça...

@YannUbuntu : Oui, ça peut faire très joli. 🙂

suis d'accord. faut essayer...

sam7

@ julientroploin :
je partage ton avis personnel sur les 5 types de notes...
@ yannubuntu :
j'aime bien ta première suggestion ... on pourrait mettre un début de bandeau en dégradé...
(je préfère tous les titres alignés à gauche...)

ou alors, on pourrait mettre l'ammorce du bandeau avec le ruban à gauche du titre, puis dégradé qui s'estompe très rapidement...

...il faut essayer ! bon courrage julientroploin, & merci

Julientroploin

Salut tout le monde!

j'ai repris les sources de LuK pour la doc et j'ai mis à jour le menu et fais :

- un mockup pour les notes et les citations :

- un mockup des titres en reprenant les couleurs du logo, bon c'est moche mais comme on en avais parlé, je vous le montre :

- un mockup des titres en reprenant la couleur du -fr pour les 3 premiers niveaux :

je n'ai repris les icones "livre" que sur les niveaux qui figureront dans la table des matières

- un mockup des tableaux :

des suggestions avant la réunion?

sam7

🙂 merci julientroploin pour ton travail :

j'aime bien le menu latéral (de tes 4 propositions) , c'est réussi !

j'aime bien la première http://pix.toile-libre.org/?img=1260135387.png

concernant la seconde http://pix.toile-libre.org/?img=1260134693.png
j'aime bien ce qui concerne la table des matières...
... mais pas les couleurs des titres dans les bandeaux, ça ne rends pas bien
... ni au final les bandeaux dégradés, ça ne rends pas bien
je crois qu'il faudrait essayer les couleurs, mais sans les bandeaux
en conservant le bandeau de niveau 2 avec un texte en noir ... de la bonne taille
(comme pour les bandeaux du forum... bien sûr http://lukdesigner.free.fr/Ubuntu/v4/forumV4_connecte.png
ça compensera le fait que pour le forum il y ait une double ligne et pas pour la doc... )

concernant la troisième http://pix.toile-libre.org/?img=1260134814.png
ça n'est pas génial non plus... et pourquoi un ruban sur le bandeau de niveau 3 au fait ?
il faudrait supprimer les bandeaux des niveaux 3 / 4 / 5 ...
...et y mettre les 3 couleurs du logo... par exemple pur la déclinaison "gnome" :
3 = rouge ... en fait, la même couleur que le "-fr" du niveau 1
4 = orange
5 = jaune

concernant la quatrième http://pix.toile-libre.org/?img=1260134890.png
c'est pas mal ... excepté le bandeau avec runban du niveau 3...
bien vu pour le titre sur 2 lignes ! à appliquer au bandeau du titre de niveau 2
c'est bon pour les tableaux ... mais
ne faudrait-il pas également proposer un exemple de tableau à double entrée ?

voilà pour mon humble avis sur la question avant la réunion de demain soir !

qu'en dites-vous ?

julientroploin, pourras-tu mettre en images mes suggestions/propositions ?
d'avance, merci

à demain soir sur IRC canal #ubuntu-fr-devweb vers 21h15 ... ou un peu avant 🙂

Julientroploin

sam7 a écritconcernant la troisième http://pix.toile-libre.org/?img=1260134814.png
ça n'est pas génial non plus... et pourquoi un ruban sur le bandeau de niveau 3 au fait ?

Cette proposition était inspirée de ce que suggérait YannUbuntu...
le ruban, c'était pour que les 2 niveaux qui apparaissent dans la table des matières (2 et 3) soient présentés pareils, les classeurs de l'icones rappelant la table des matières.

il faudrait supprimer les bandeaux des niveaux 3 / 4 / 5 ...
...et y mettre les 3 couleurs du logo... par exemple pur la déclinaison "gnome" :
3 = rouge ... en fait, la même couleur que le "-fr" du niveau 1
4 = orange
5 = jaune

comme ça?

ne faudrait-il pas également proposer un exemple de tableau à double entrée ?

c'est un tableau à double entrée.
pour un tableau à simple entrée, il suffit d'imaginer que la "Colonne 0" n'est pas là...

poupoul2

Salut à tous

J'ai (enfin) trouvé un peu de temps pour avancer sur le Planet. Il manque encore quelques éléments dans la page, mais l'essentiel est là

Les sources

Julientroploin

poupoul2 a écritIl manque encore quelques éléments dans la page, mais l'essentiel est là

quelques éléments ajoutés à la va vite à ton mockup, ça donne :

- bouton pour cacher le menu et étendre le Planet vers la gauche
- filtres des billets
- icones du menu latéral
- barre standard du bas de site
- curseurs mains montrant ce qui se passe au survol

si tu veux récupérer juste les éléments que j'ai ajouté pour les inclure à ton mockup, tout est là :
ftp://ubuntu-fr-secours.org/www/MOCKUP/mockups_xcf/poupoul_1260142297_modif.xcf
quelques remarques/détails/questions sur ton mockup :
- dans le planet, les textes sont "justifiés", pas sur ton mockup (enfin, ça n'a aucune importance à ce stade)
- dans le menu tu as mis un bouton autour de "Planet ubuntu-fr", c'est vraiment un bouton ou c'est ce qu'on voit au survol? dans ce cas, il faudrait homogénéiser avec ce qui se fait dans les autres sections (cf. mes sources ou celles de LuK)
- je verrais bien un "onglet" sur le à propos, comme sur "Action" et "Divers" du menu de la doc.
- qu'entends tu par "Navigation"?

Pour ceux qui voudraient les sources que j'ai adapté en xcf à partir du travail de LuK, c'est dans le même répertoire du ftp, les noms sont suffisamment explicites (normalement).

Mpok

Je n'ai pas le retour de votre réunion d'hier, mais c'est un avis général :
-> GO !!!
Allez-y, programmez, oubliez les détails sur les mockups....
Je n'ai qu'un avis "observateur" (et j'espère "testeur" prochainement) sur le projet, mais je le répète : vous en êtes désormais au point où le CODAGE devrait représenter 90% de vos préoccupations.
J'ai vu la première tentative, et même si "globalement" ça le fait, on est loin de l'exellence (et pourtant, je ne suis pas sur un navigateur/sytème exotique).

Du coup, je me permets de rappeler l'une des règles majeures du web-design :
"- au programmeur, point trop tu n'en demanderas."

Voyons déjà ce que cela donne avec les pages "freezées" (TOUS navigateurs, TOUS système), et ensuite on pourra faire des modifications..

YannUbuntu

Je rejoins Sam:
- sur les bandeaux marrons: les lettres rouges ne passent pas bien, préférer le noir.
- trop de bandeau tue le bandeau.
-> Parmi les différents mockups je préfère celui avec les titres niveau 3,4,5 de couleurs.

Avec les titres niveau 2 en noir, ca donnerait ca:

Or la majorité des pages de la Doc n'ont que des titres niveau 1,2,3. Par exemple:

Si on veut éviter de confondre les titres niveau 1 et 3, il faudrait :

- soit changer la couleur du niveau 1, par ex :

- soit changer la couleur du niveau 3, par ex :

(dans cet exemple, il suffirait de mettre le niveau 4 en jaune, et le niveau 5 en rouge, ou inversement)

Mes 2 yens.

Julientroploin

@Mpok : comme on l'a déjà répondu à ton message précédent, on n'a que 2 codeurs opérationnels pour le projet... ceux qui mettent leurs grains de sel dans les mockups ne savant pas coder donc on ne perd pas de temps.
Le codage se fait en parallèle mais forcément c'est plus long que de faire des rectangles sous gimp... donc autant qu'on peaufine les mockups en attendant.

Pour voir l'avancement des travaux, rejoint nous sur IRC, c'est là que se prennent les décisions...

@ YannUbuntu : tu as raison, le titre de niveau 2 est mieux bien sombre (je l'aurais peut-être mis en brun très foncé)
Par contre, je serais pour garder l'ordre des couleurs comme je l'avais mis précédemment pour les niveaux 3 4 et 5. Je trouve qu'on différencie suffisamment le 1 du 3, surtout que le 1 reste cantonné en haut de page.

RDV au maximum de monde tout à l'heure sur IRC pour la décision!

« Page précédente Page suivante »