Contenu | Rechercher | Menus

Annonce

Si vous avez des soucis pour rester connecté, déconnectez-vous puis reconnectez-vous depuis ce lien en cochant la case
Me connecter automatiquement lors de mes prochaines visites.

À propos de l'équipe du forum.

#851 Le 16/09/2009, à 06:37

Julientroploin

Re : revoir l'esthétique du site

C'est vrai qu'il est bien karmic ton koala, c'est sympa.

sam7 a écrit :

appel aux bonnes idées afin de résoudre ce méli-mélo...
comme ici par exemple : http://ubuntu-fr.evoconcept.net/86.png
d'avance merci

ah oui, pas terrible...
Au niveau du code, je n'y connais absoluement rien, mais c'est pas possible de faire un truc comme ça ?

si largeur page <1000px
alors chaque colonne = (largeur-50)/3 
et ne pas afficher "Par ou commencer ?" mais "Par où..."
                         "Documentation" mais Doc..."
                         "Lettre hebdomadaire" mais "Lettre hebdo..."
                         "Contribuer à l'association" mais "Contribuer à l'asso..."

Avec les "infobulles", ça ne serait pas trop gênant même pour un nouveau visiteur.

On peut peut-être aussi jouer sur l'espace entre les début de colonne et les icônes et entre les icônes et le texte : est il possible de donner leur largeur en fonction de la largeur de la page?
ex : espace bord/icône = largeur totale/30 (là j'ai pris une valeur au hasard, mais c'est à tester...)


Fixe : Core i5, 8GoRAM, NVidia 9800GT Silent => Ubuntu 22.04
Portable Compaq Presario2158 : AthlonXP-M2400+, 1GoRAM, ATI Radeon mobility320M => Primtux
https://launchpad.net/~julienmbpe

Hors ligne

#852 Le 16/09/2009, à 16:06

fabien961

Re : revoir l'esthétique du site

oulà !

si largeur page <1000px
alors chaque colonne = (largeur-50)/3

C'est un peu compliqué ça !
Par contre, cette idée là  ...

espace bord/icône = largeur totale/30

... est beaucoup mieux.
En CSS, ça donne un truc du genre

margin-left: 3%

au lieu d'une largeur fixe

margin-left: 10px

C'est dans cette direction que je comptais aller. En fait, l'idéal serait même de donner une largeur relative à chaque colonne, comme ici.
J'ai aussi d'autre pistes de réflexion, en prenant exemple sur des layouts de référence comme BlueRobot. Ça date un peu mais c'est toujours une bonne référence.

Hors ligne

#853 Le 16/09/2009, à 18:05

Julientroploin

Re : revoir l'esthétique du site

Oui, c'est ça qu'il nous faut, sauf qu'il ne faudrait pas que le contenu trop large aille à la ligne... sinon ça va f*** le b***.
Je parle des trois colonnes du bas là. Pour le reste il vaut mieux voir tout le contenu.


Fixe : Core i5, 8GoRAM, NVidia 9800GT Silent => Ubuntu 22.04
Portable Compaq Presario2158 : AthlonXP-M2400+, 1GoRAM, ATI Radeon mobility320M => Primtux
https://launchpad.net/~julienmbpe

Hors ligne

#854 Le 16/09/2009, à 18:20

Ner0lph

Re : revoir l'esthétique du site

Julientroploin a écrit :

sauf qu'il ne faudrait pas que le contenu trop large aille à la ligne... sinon ça va f*** le b***.

Au pire, rien n'empêche de mettre une largeur minimale et tant pis si ça fait apparaitre un ascenseur horizontal.

En outre, il me semble avoir lu et vu quelque part un exemple qui changeait dynamiquement la CSS en fonction des dimension de la fenêtre du navigateur. Cela nécessite Javascript bien sûr.

Hors ligne

#855 Le 16/09/2009, à 19:15

Julientroploin

Re : revoir l'esthétique du site

Finalement, les marges relatives dont parlait fabien suffisent pour le menu du bas. Pas besoin d'autre chose.
Voilà ce que ça donnerait avec un cadre de 750px de large, sans modifier la taille de police, juste les écarts :
1253124368.png
Reste à calculer les espaces idéaux pour que ça rende bien quelle que soit la résolution...
Je suis un peu largué au niveau des résolutions des écrans modernes (chez moi le maxi, c'est 1024x768...)


Fixe : Core i5, 8GoRAM, NVidia 9800GT Silent => Ubuntu 22.04
Portable Compaq Presario2158 : AthlonXP-M2400+, 1GoRAM, ATI Radeon mobility320M => Primtux
https://launchpad.net/~julienmbpe

Hors ligne

#856 Le 16/09/2009, à 21:39

sam7

Re : revoir l'esthétique du site

je suis en train de préparer ma petite explication "en image" commentées
au vu de ce que j'ai expliqué hier soir sur IRC & de ce que vous avez écrit aujourd'hui...
je vous livre ça prigressivement au cours de la soirée...

pour commencer, prenez l'image suivante :

1253133389.jpg


décomposez-là en 15 morceaux comme suit :

1253133429.jpg


tout autour, vous avez un cadre, une bordure de 50 par exemple

... la suite dans les minutes qui viennent...


sam7 @ sweetux.org = "Faire connaître & promouvoir la culture libre"
& @ gafam.fr = "Faire connaître & promouvoir les alternatives aux GAFAMs"

Hors ligne

#857 Le 16/09/2009, à 21:45

Julientroploin

Re : revoir l'esthétique du site

lol:lol::lol::lol:
quel talent... j'adore ton tracé plein d'assurance et de finesse sur la 2e image wink

Je crois que je vois ou tu veux en venir avec ton découpage. Je lirais ça demain, là j'ai pas la force d'attendre la suite.


Fixe : Core i5, 8GoRAM, NVidia 9800GT Silent => Ubuntu 22.04
Portable Compaq Presario2158 : AthlonXP-M2400+, 1GoRAM, ATI Radeon mobility320M => Primtux
https://launchpad.net/~julienmbpe

Hors ligne

#858 Le 16/09/2009, à 22:04

sam7

Re : revoir l'esthétique du site

imaginez ensuite des "cadres" (cases) invisibles de dimensions variables...

sur la première ligne, vous avez  des cases d'une hauteur variable entre 100 & 300 par exemple
( 1 | 2 | 3 )

sur la seconde ligne, vous avez   des cases d'une hauteur variable entre 200 & 600 par exemple
( 4 | 5 | 6 )

sur la troisième ligne, vous avez   des cases d'une hauteur variable entre 200 & 600 par exemple
( 7 | 8 | 9 )

sur la quatrième ligne, vous avez   des cases d'une hauteur variable entre 250 & 600 par exemple
( 10 | 11 | 12 )

sur la cinquième ligne, vous avez   des cases d'une hauteur variable entre 50 & 150 par exemple
( 13 | 14 | 15 )

chacune des 3 colonnes a une largeur variable entre 300 & 600

le but étant d'éviter les ascenseurs horizontaux... afin de pouvoir tenir compte de la faible résolution d'écrans en largeur particulièrement... en hauteur, c'est moins gênant.

on doit donc pouvoir facilement passer de 3 colonnes, à 2 (pour les netbook par exemple), voire même à 1 (pour les smartphones)....

... les lignes qui vont suivre vont vous expliquer comment je vois celà ...


le "contenu" de chacune des cases doit pouvoir "tenir" dans la dimension minimale de chacune des cases
par exemple la (7) doit "tenir" dans une 300*300
la dimension de l'image d'un écran "4/3" devra donc être de 200 en largeur  et de 150 maxi en hauteur...
Bonus : ce qui serait bien, c'est que si l'on clique dessus, elle s'affiche en gros plan au centre de l'écran, en ombrant l'arrière plan (un peut le même effet que sur le site  pix.toile-libre) et que l'on puisse naviguer ainsi entre les images...

en fait, le contenu de chaque case doit pouvoir s'étirer par le fait de marges variables autour des textes & des images... éventuellement en changeant la taille des polices (en %)

petite particularité des cases (4 & 5)...

... la suite dans les minutes qui viennent...

Dernière modification par sam7 (Le 16/09/2009, à 22:31)


sam7 @ sweetux.org = "Faire connaître & promouvoir la culture libre"
& @ gafam.fr = "Faire connaître & promouvoir les alternatives aux GAFAMs"

Hors ligne

#859 Le 16/09/2009, à 22:17

sam7

Re : revoir l'esthétique du site

pour les faibles résolutions, la première des choses est de supprimer les bordures de 50, ça fera déjà gagner 100 tout autours...

les cases (4 & 5) forment un tout & ne doivent pas pouvoir théoriquement être inférieure à 600... elles sont composées des 4 onglets et d'une grande zone de texte...
pour l'équilibre de la page, il est souhaitable qu'il y ait 2, voire 3 onglets maximum sur la largeur d'une case... soit 100 ou 150 de largeur pour l'onglet... ce qui fait 2 ou 3 onglets pour la case (4) et 1 ou 2 onglets pour la case (5)
(avec ça on tiens sur un 800*600)

je verrais plutôt :
- le texte dans la 6 sous les onglets
- l'image dans la 9 et non dans la 6 (que ça soit le koala ou l'étoile)

les cases ( 10 | 11 | 12 ) étant "identiques" (ou presque), elles doivent "tenir" chacune dans du 300*300 ce qui fait 50 par hauteur de ligne ... en ressérant les logos aux textes si nécessaire

passons maintenant au puzzle ...

... la suite dans les minutes qui viennent...

Dernière modification par sam7 (Le 16/09/2009, à 22:33)


sam7 @ sweetux.org = "Faire connaître & promouvoir la culture libre"
& @ gafam.fr = "Faire connaître & promouvoir les alternatives aux GAFAMs"

Hors ligne

#860 Le 16/09/2009, à 22:45

sam7

Re : revoir l'esthétique du site

sur un écran de résolution "normale" (disons supérieure à   1000 * 900 ), nous avons sans aucun ascenseurs :

( 1 | 2 | 3 )
( 4 | 5 | 6 )
( 7 | 8 | 9 )
( 10 | 11 | 12 )
( 13 | 14 | 15 )
c'est à dire l'écran complet sans déformation...
... et plus l'écran est grand, meilleure est l'image, et plus elle est aérée...


pour les netbook du genre 800 * 600, nous aurons donc

( 1 | 3 )
( 4 | 5 )
( 7 | 8 )
( 6 | 9 )
( 10 | 11
( 12 | 13-15 )

où (2) est écrasé par (3) & où (14) disparaît
où (13) & (15) se superposent dans la dernière case en 300*300
avec juste un ascenseur vertical...


pour les smartphones, je propose pareil avec ascenseurs horizontaux et verticaux, ou alors...
(1)
(3)
(4+5) retrituré avec des onglets sur 2 lignes et la hauteur de la case doublée...
(6)
(9)
(7)
(8)
(9)
(10)
(11)
(12)
(13)
(15)

si vous les voulez en image...
... ça sera pour demain soir !
uniquement à la demande...

en cas de besoin d'explications complémentaires, n'hésitez-pas...
merci


sam7 @ sweetux.org = "Faire connaître & promouvoir la culture libre"
& @ gafam.fr = "Faire connaître & promouvoir les alternatives aux GAFAMs"

Hors ligne

#861 Le 16/09/2009, à 23:05

Mpok

Re : revoir l'esthétique du site

Bon, je vois que ça avance bien... wink

Deux remarques (personnelles) :

1) le principe de vouloir "s'adapter" aux différentes résolutions est EXCELLENT, et je ne peux que plussoir.
La méthode de "découpage" de sam7 semble assez compliquée au départ (et assez originale), mais c'est probablement celle qui donnera les meilleurs résultats. Au prix d'un CSS plus long, plus compliqué, et EVENTUELLEMENT plus difficile à maintenir et à faire évoluer (pensez à ça : le risque d'un CSS "en case" comme celui-ci, c'est que lorsque vous voudrez modifier une case, ça pourrait être une galère...).

2) en revanche, je suis franchement plus réservé quant au débat sur vos "effets de survol"...
Même en utilisant l'excellente ressource from Eric Meyer (donc pas de javascript, pur css). Cette ressource commence à dater un peu. Ca ne veut pas dire que ce n'est plus d'actualité, mais il faut bien reconnaître que c'est quand même de moins en moins utilisé.
D'autre part, j'ai un doute sur les infos réellement apportées par vos "info-bulles" : sont-elles VRAIMENT nécessaires ?
Et si oui, pourquoi ne pas utiliser tout simplement les "vraies" info-bulles (propriété title des liens) ?
Les tests présentés dans les pages précédentes ne m'ont vraiment pas convaincu, j'ai au contraire l'impression que ces info-bulles rectangulaires "cassent" un design général plutôt bien au départ...

Si VRAIMENT vous estimez que vous avez BESOIN (bien réfléchir sur le sens de ce dernier terme..) d'informations supplémentaires sur les liens ET que les simples info-bulles des navigateurs ne vous suffisent pas, alors il vaudrait mieux IMO rajouter une "ligne d'état" en bas de votre liste de liens qui afficherait ces infos. Avantage : vous n'êtes plus limité en taille, toute la ligne est disponible, et "ça fait beau" (pas comme actuellement). Inconvénient : nécessite javascript, donc sans javascript on n'aura pas ces infos supplémentaires.

Hors ligne

#862 Le 16/09/2009, à 23:28

gentil_philou

Re : revoir l'esthétique du site

bonjour, bonsoir et salut,

super content de tous les services que le site m'a rendu, je trouve quand même que le côté graphique, devrait être un peu revu (où sont les effets glossy, la transparence, les couleurs (le brun, ca commence à nous gaver) etc,...) fin bref à côté d'autres distrib, je trouve que le site est un peu vieillot... fin ça n'engage que moi

je me permet de rappeler le sujet d'origine.

faudrait, peut-être arrêter le délire de raleurs moyens !

positif attitude, les gars !

il vous faut quoi ? des arc-en-ciel, des taga-tzointzoins, des pouêt-pouêts, des chapeaux pointus, des guirlandes, des girls en petite tenue pour les mecs et des mâles dominants option " tablette-de-chocolat " pour les filles ?

arreter le délire ! s'il vous plait

le fond et la forme, travailler la-dessus, s'il vous plait

ici, c'est peut-etre un peu " austère " mais ça as le mérite d'exister et d'être efficace,

dites-moi si je me trompes . . .

la solidarité de ce forum est un bonheur, non ? alors ne gachait pas tout en superficiel, s'il vous plait

merci d'avance


________________________
Configuration matérielle : MSI VR700 - 1,73 Ghz - 1 Go - 120 Go Ubuntu 10.04. et HP pvillon g6 - 2,6 Ghz - 4 Go - 500 GO
Mes logiciels courants : OOo 3 - BlueFish 2 - The GIMP 2.6 - FireFox 3.0.10
Mon nouveau moteur de recherche préféré : http://www.ethicle.com/fr/

Hors ligne

#863 Le 17/09/2009, à 21:35

sam7

Re : revoir l'esthétique du site

@ Mpok
... merci de ton soutien...


sam7 @ sweetux.org = "Faire connaître & promouvoir la culture libre"
& @ gafam.fr = "Faire connaître & promouvoir les alternatives aux GAFAMs"

Hors ligne

#864 Le 18/09/2009, à 06:45

YannUbuntu

Re : revoir l'esthétique du site

Bravo à tous pour votre travail smile

@Julientroploin: il est sympa ton koala! (pas moyen de lui donner un air plus "gentil"? lol )

je trouve que le "point d'interrogation" pixellise un peu... peux-tu stp me (nous) l'envoyer pour qu'on essaye de l'améliorer ?

Autre remarque: je crois que ca a deja été dit, mais le titre "SUPPORT" en rouge ne se distingue pas bien du fond marron. Idées: entourer les lettres d'un liseret blanc, éclaircir le fond juste sous le titre, etc...

mes 2 cents


à consulter/améliorer: Guide du Débutant, Logiciels, Ecole, Travail, Maison

Hors ligne

#865 Le 19/09/2009, à 00:01

R@ND@LL

Re : revoir l'esthétique du site

Bon alors je débarque sur le sujet... Juste une seule question: ces idées sont avalisées par l'équipe Ubuntu-fr, ou c'est juste des design (super sympas au demeurant) balancés en l'air?


Si l'amour est aveugle, il faut palper.
Pourquoi remettre à deux mains ce qu'on peut faire à une seule?
(J'en ai plein des comme ça, si vous voulez passer pour un abruti en société...)

Hors ligne

#866 Le 19/09/2009, à 09:43

poupoul2

Re : revoir l'esthétique du site

R@ND@LL a écrit :

Bon alors je débarque sur le sujet... Juste une seule question: ces idées sont avalisées par l'équipe Ubuntu-fr, ou c'est juste des design (super sympas au demeurant) balancés en l'air?

Il s'agit bien d'un projet officiel smile

#867 Le 19/09/2009, à 11:30

R@ND@LL

Re : revoir l'esthétique du site

Ok, plutôt sympa, tout ça...

Faut bien avouer que lors de la création du sujet, le design était déjà vieillot... et qu'il n'a pas changé d'un pouce depuis big_smile

Bref, mes compétences ne me permettent pas d'apporter trop d'aide au projet (comme graphiste, je suis naze, et mes compétences HTML et CSS se limitent à utiliser les balises "marquee" ;-) ), mais je serais ravi de le voir implanté pour la sortie de Karmic, histoire de lancer cette nouvelle version en grande pompe!


Si l'amour est aveugle, il faut palper.
Pourquoi remettre à deux mains ce qu'on peut faire à une seule?
(J'en ai plein des comme ça, si vous voulez passer pour un abruti en société...)

Hors ligne

#868 Le 19/09/2009, à 22:50

sam7

Re : revoir l'esthétique du site

c'est bien ce que nous espérons pouvoir faire !

si tu le souhaite, tu peux te joindre à nous sur IRC Freenode canal #ubuntu-fr-devweb le mardi soir à compter de 21h...
(& comme d'hab' je serais "en retard" d'une bonne demi-heure, n'étant pas dispo' plus tôt)

d'ici là :
- j'espère que le koala de Julientroploin sera terminé, comme celà, on pourra valider le koala retenu...
- j'espère que fabien961 aura également avancé sur le "casse tête" que je lui ai proposé ...


sam7 @ sweetux.org = "Faire connaître & promouvoir la culture libre"
& @ gafam.fr = "Faire connaître & promouvoir les alternatives aux GAFAMs"

Hors ligne

#869 Le 21/09/2009, à 08:41

Julientroploin

Re : revoir l'esthétique du site

sam7 a écrit :

- j'espère que le koala de Julientroploin sera terminé, comme celà, on pourra valider le koala retenu...

Avec mon niveau de maitrise d'Inkscape, je ne pourrais pas faire mieux... et puis il me plait déjà bien. Si quelqu'un veut reprendre le boulot, un message et je transmets les sources (*svg avec un calque dessin + un calque photo modifiée par toi)


Fixe : Core i5, 8GoRAM, NVidia 9800GT Silent => Ubuntu 22.04
Portable Compaq Presario2158 : AthlonXP-M2400+, 1GoRAM, ATI Radeon mobility320M => Primtux
https://launchpad.net/~julienmbpe

Hors ligne

#870 Le 21/09/2009, à 23:05

sam7

Re : revoir l'esthétique du site

en fait, je le trouve bien ton koala...

et de mes 2 propositions, je préfère ma première...
mais semble t'il, ça "ne colle pas", car il faudrait plus "dessin"...

les "votants" trancherons dans moins de 24h, sauf s'il y a des volontaires pour faire "mieux" d'ici là...

mon "vote" serait : mon premier, le tien, mon second...

et vous qu'en dites-vous ?

***NB: les mockups de poupoul2 sur la boutique avancent bien !
Les dernières versions :
* Page d'accueil
> http://pouvoir-choisir.org/logiciel-libre/public/mockups/mockup.png
* Page ubuntu-fr
> http://pouvoir-choisir.org/logiciel-libre/public/mockups/mockup_ubuntu.png

***(fin de l'apparté)


sam7 @ sweetux.org = "Faire connaître & promouvoir la culture libre"
& @ gafam.fr = "Faire connaître & promouvoir les alternatives aux GAFAMs"

Hors ligne

#871 Le 22/09/2009, à 08:33

Julientroploin

Re : revoir l'esthétique du site

sam7 a écrit :

***NB: les mockups de poupoul2 sur la boutique avancent bien !
Les dernières versions :
* Page d'accueil
> http://pouvoir-choisir.org/logiciel-libre/public/mockups/mockup.png
* Page ubuntu-fr
> http://pouvoir-choisir.org/logiciel-libre/public/mockups/mockup_ubuntu.png

***(fin de l'apparté)

J'aime beaucoup, par contre, la partie au dessus des onglets n'est pas censée changer si on respecte la logique des onglets non? Après techniquement c'est peut être plus compliqué de changer le bas mais pas le haut...


Fixe : Core i5, 8GoRAM, NVidia 9800GT Silent => Ubuntu 22.04
Portable Compaq Presario2158 : AthlonXP-M2400+, 1GoRAM, ATI Radeon mobility320M => Primtux
https://launchpad.net/~julienmbpe

Hors ligne

#872 Le 22/09/2009, à 10:18

fabien961

Re : revoir l'esthétique du site

sam7 a écrit :

- j'espère que fabien961 aura également avancé sur le "casse tête" que je lui ai proposé ...

J'aime bien les casses-tête comme celui-là, mais ton approche de la solution est encore plus compliquée que le problème lui-même.
Je suis assez d'accord sur ce point avec Mpok

Mpok a écrit :

1) le principe de vouloir "s'adapter" aux différentes résolutions est EXCELLENT, et je ne peux que plussoir.
La méthode de "découpage" de sam7 semble assez compliquée au départ (et assez originale), mais c'est probablement celle qui donnera les meilleurs résultats. Au prix d'un CSS plus long, plus compliqué, et EVENTUELLEMENT plus difficile à maintenir et à faire évoluer (pensez à ça : le risque d'un CSS "en case" comme celui-ci, c'est que lorsque vous voudrez modifier une case, ça pourrait être une galère...).

En retravaillant un peu les dimensions et en ajoutant quelques pourcentages par-ci, par-là, j'obtiens  : ça. En 800x600, ça passe bien, en en dessous seuls quelques éléments des menus du haut se placent en dessous, ce qui n'est pas trop moche. Est-ce que ça vous convient ?

J'ai aussi modifié les barres rouges sur le menu pour qu'il n'y en ai plus qu'un actif en même temps (merci jQuery).

Concernant les "info-bulles", je vous laisse juger :
version 1 : on n'en met pas
version 2 : texte à côté des liens, en CSS
version 3 : info bulles classique (title="")
version 4 : à la manière de Eric A. Meyer, avec zone dédiée

Pour le koala, moi je vote pour celui de julientropploin.
1253051262.png
Il faudrait juste le retourner, comme l'a fait sam7.
Désolé sam7, le tien est vraiment trop triste. Peut-être avec quelques couleurs ... ?

Je ne serai pas là à la réunion IRC ce soir. Je vous charge de montrer les nouvelles versions de la page d'accueil ?

Hors ligne

#874 Le 22/09/2009, à 17:20

Julientroploin

Re : revoir l'esthétique du site

fabien961 a écrit :

Concernant les "info-bulles", je vous laisse juger :
version 1 : on n'en met pas
version 2 : texte à côté des liens, en CSS
version 3 : info bulles classique (title="")
version 4 : à la manière de Eric A. Meyer, avec zone dédiée

Pour moi :
Version 3> Ver.4>Ver.2>Ver.1
Je trouve la 4 super "classe", mais il m'a fallut y regarder à 2 fois pour voir que quelque chose s'affichait... (avec une autre couleur, peut être... là c'est trop blanc / beige clair)


fabien961 a écrit :

Pour le koala, moi je vote pour celui de julientropploin.
Il faudrait juste le retourner, comme l'a fait sam7.

ça je peux faire :
1253636415.png


Fixe : Core i5, 8GoRAM, NVidia 9800GT Silent => Ubuntu 22.04
Portable Compaq Presario2158 : AthlonXP-M2400+, 1GoRAM, ATI Radeon mobility320M => Primtux
https://launchpad.net/~julienmbpe

Hors ligne

#875 Le 22/09/2009, à 22:56

sam7

Re : revoir l'esthétique du site

il est mieux comme celà ton koala !

sinon, je n'aime pas la 2
la 3 est sympa
& j'adore la 4
extra !


sam7 @ sweetux.org = "Faire connaître & promouvoir la culture libre"
& @ gafam.fr = "Faire connaître & promouvoir les alternatives aux GAFAMs"

Hors ligne