revoir l'esthétique du site

Ner0lph · Le 25/03/2009, à 19:11

Smon a écrit :

Hachtemelage en cours : http://baconnais.simon.free.fr/mockup/html/
J'ai pas la version d'Alex alors je fais du from scrach ...

Même punition :

Ner0lph a écrit :

Sinon, pour les effets au survol des images, il vaut mieux utiliser la technique des portes coulissantes, ça évitera un désagréable effet lors du premier survol d'une image non chargée.

100 % CSS : http://www.alsacreations.com/tuto/lire/574-Creer-des-menus-simples-en-CSS.html#portescoulissantes

Pour les onglets, tu devrais agrandir la boite du lien (a) afin qu'elle soit de la même taille que sa parente (li), voire mettre l'image de l'onglet dans ".tabs li a" et non dans "#presentation" pour un survol avec le :hover (et background-position).

Dernière modification par Ner0lph (Le 25/03/2009, à 19:22)

Smon · Le 25/03/2009, à 19:16

En général je précharge les images, là je ne l'ai pas encore fait, c'est juste le début, le peaufinage viendra après

AlexandreP · Le 26/03/2009, à 06:50

Smon a écrit :

à Alexandre P : Envoie moi une archive de ton mockup HTML, je m'occupe de le finir Si tu fais vite, je propose une pré-version pour 18h

AlexandreP a écrit :

J'ai même fait une 'tite archive pour récupérer le tout facilement !

Nanméoh !

Merci !

Ner0lph a écrit :

Il y a aussi l'utilisation de -moz-border-radius, mais ça ne marchera qu'avec Firefox (c'est ce qui est utilisé pour l'arrondi des notes dans la doc). Pour les autres, c'est -webkit-border-radius, -khtml-border-radius, -o-border-radius (de la propriété CSS border-radius, non finalisée).

Y'a toujours le problème que ça passe pas sous IE (7 et ultérieur), non ?

Ner0lph a écrit :

Sinon, pour les effets au survol des images, il vaut mieux utiliser la technique des portes coulissantes, ça évitera un désagréable effet lors du premier survol d'une image non chargée.

Les "portes coulissantes", c'est pratique pour un élément ayant une taille fixe. Dans l'exemple de Smon, ce serait probablement possible à utiliser, puisqu'il assigne une image d'arrière-plan différente à chacun des onglets. Dans mon exemple, ce n'est pas possible parce que j'utilise une même image pour l'ensemble des onglets :

			<div id="tabs-content" class="tabs">
				<ul>
					<li class="active"><a href="#presentation">À propos d'Ubuntu</a></li>
					<li><a href="#site">À propos du site</a>
					<li><a href="#soutien">Soutien</a>
				</ul>

			</div>

			<div id="tabs-sidebar" class="tabs">
				<ul>
					<li class="active"><a href="#events"><span>En ce moment</span></a></li>
					<li><a href="#news"><span>Activités récentes</span></a>
				</ul>
			</div>

.tabs {
	float: left;
	background:  url('images/tabs-left.png') no-repeat top left;
	padding-left: 10px;
	padding-bottom: 3em;
	min-height: 35px;
}
	.tabs ul {
		padding: 0;
		padding-right: 10px;
		margin: 0;
		background: url('images/tabs-right.png') no-repeat top right;
		min-height: 35px;
	}
		.tabs ul li {
			float: left;
			list-style: none;
			background: url('images/tabs.png') repeat-x top left;
			padding: 1em;
		}
		.tabs ul li:hover, .tabs ul li.active {background: url('images/tabs-hover.png') repeat-x top left;}

andso · Le 26/03/2009, à 23:31

le sreen de incoming, j' adore,
simplissime et les zanimaux en backreview ça le fait!
et pas ça:
http://gnome-look.org/CONTENT/content-pre1/101442-1.jpg

édit: je me relis par hazard, et je me demande , je me demande...
et je comprend le commentaire.

Dernière modification par andso (Le 07/04/2009, à 17:20)

sam7 · Le 27/03/2009, à 23:21

bien avancé à ce que je vois...

j'aime bien cet arrangement du haut http://baconnais.simon.free.fr/mockup/html/
ainsi que cet arrangement du bas http://dev.ubuntu-fr-secours.org/alexandrep/ufr-mockup/
ça y est la carte fera son retours...

sinon, je le trouve original moi ce thème... http://gnome-look.org/CONTENT/content-pre1/101442-1.jpg... "je veux le même ou je pleure" (lol)

Dernière modification par sam7 (Le 27/03/2009, à 23:21)

AlexandreP · Le 27/03/2009, à 23:53

sam7 a écrit :

ça y est la carte fera son retours...

Nan : c'était juste pour meubler le trou qui causait un déséquilibre.

sam7 · Le 28/03/2009, à 11:31

c'est un bon "meublage... et je pense que la place est bonne... quand la carte sera à nouveau fonctionnelle...
autant laisser le lien qui pointera en attendant vers une page annonçant le retours prochain de celle ci...

Ner0lph · Le 30/03/2009, à 13:23

luK a écrit :

Des news:
- modification du menu ( forum )
Aperçus:
http://lukdesigner.free.fr/Ubuntu/v4/forumV4_1.png
Voilà, dites moi ce que vous en pensez

Tiens, j'ai zappé ça. C'est mieux.

Vu que les éléments du menu sont des liens, ne faudrait-il pas les souligner au moins au survol ?

sam7 · Le 04/04/2009, à 13:51

Alors ? quelles sont les nouvelles ?
aucun Freeze Forum ou Doc réalisée contrairement à ce qui était prévu initialement ?

où en sont les travaux de Luk / Smo / AlexandreP ... ?

luK · Le 07/04/2009, à 10:08

Des news: ( sur le forum )
- modification du menu ( ajout de séparateurs )
- modification de l'annonce du gagnant Linux Pratique

Aperçus:
http://lukdesigner.free.fr/Ubuntu/v4/forumV4_1.png

Je m'excuse pour les délais. Je pense travailler prochainement sur les "vaguelettes" et encore sur le menu.
Qu'en pensez vous?

brizou · Le 07/04/2009, à 10:56

le truc c'est que linux pratique il n'a pas été gagné depuis longtemps

huats · Le 07/04/2009, à 11:00

Effectivement, mais c'est uniquement notre faute... car pour en avoir reparlé avec eux, les personnes de linux pratique sont toujours d'accord pour ces dons d'abonnement...

Ner0lph · Le 07/04/2009, à 14:45

luK a écrit :

- modification du menu ( ajout de séparateurs )

Tu peux essayer de souligner les liens au survol, pour voir ?

luK a écrit :

- modification de l'annonce du gagnant Linux Pratique

C'est très chouette ! J'ai juste un doute sur le fait d'écrire « Linux Pratique » dans le bandeau, en penché : il faudra modifier l'image au cas où on change de magazine (ou bien utiliser les rotations CSS (cf. billets chez clochix et chez ljouanneau) non encore définitives). Ou bien simplement écrire « Concours permanent » ou quelque chose du même acabit.

huats a écrit :

les personnes de linux pratique sont toujours d'accord pour ces dons d'abonnement...

Forcément, ils ne perdent rien actuellement...

-- Modification : liens

Dernière modification par Ner0lph (Le 07/04/2009, à 14:52)

luK · Le 08/04/2009, à 12:52

Des news:
- ajout d'une flèche lors du survol d'un lien ( menu )
- diverses finitions
- déclinaisons d'une nouvelle version des en-têtes des catégories de forums
( voir forumV4_1.png )

Aperçus:
- ( en-têtes non retouchés ): http://lukdesigner.free.fr/Ubuntu/v4/forumV4.png
- ( en-têtes retouchés ): http://lukdesigner.free.fr/Ubuntu/v4/forumV4_1.png

J'ai retouché les "vaguelettes" car elles étaient sujet à désaccord.
De plus, je trouvai quelques s'intégraient de moins en moins au reste du mockup.
Enfin, ceci permet un design plus "fin", "propre" et mieux intégré aux diverses déclinaisons
des distributions ( Kubuntu, Xubuntu,... )

Sur ce, bonne journée

PS: sources à jour: http://lukdesigner.free.fr/Ubuntu/v4/Sources/

Dernière modification par luK (Le 08/04/2009, à 12:52)

Julientroploin · Le 08/04/2009, à 13:38

Bonjour messieurs (dames?), juste un petit message pour vous dire que j'aime beaucoup le travail que vous avez fait, j'espère que votre projet de relooking ira au bout...

Juste une question (j'ai pas eu le courage de tout lire, juste les 1ers et derniers posts....) : c'est un projet "officiel"? Si oui, vous vous êtes fixé une date pour la mise en place?
Ou bien c'est juste pour voir ce qui est faisable et le soumettre plus tard?

le "notre" utilisé par huats me laisse pensé que c'est plus la 1ere solution mais bon...

Dernière modification par Julientroploin (Le 08/04/2009, à 13:39)

huats · Le 08/04/2009, à 13:46

Bonjour !

Effectivement c'est un projet officiel

2F · Le 08/04/2009, à 13:53

Bonjour,
une deuxième question alors après vous avoir encourager pour ce projet en espérant aussi qu'il aille à terme :
Pourquoi faire autant de "macOs like" ? juqu'à reprendre l'icône de spotlight. On crois tomber sur safari
avec en plus le filtre anti publicité désactivé (ie le magazine si bien foutu linux pratique contre lequel je n'ai rien non plus).
Attention la critique est positive et je sais ce qu'un projet comme cela représente. c'est juste, que pour du libre..(presque),
pourquoi copier autant même si c'est beau. Moi perso ça me gêne.
Bon courage.

Dernière modification par 2F (Le 08/04/2009, à 13:59)

syubuntu2 · Le 08/04/2009, à 21:38

salut,

Pour les vaguelettes (http://lukdesigner.free.fr/Ubuntu/v4/forumV4.png), pourquoi ne pas les mettre en fin de ligne plutot que sous l'ecriture.
(la ça n'a rien a voir c'est une image d'un theme pour kopete, mais c'est juste pour l'idée)

luK · Le 09/04/2009, à 11:46

@2F: Tous les icones sont tirés des thèmes Human et Gnome. Certes la barre de recherche ressemble à celle que l'on trouve sur Safari mais ce n'est qu'un élément dans l'ensemble du mockup. Pour moi ce dernier n'a rien à voir avec le style Mac.

Pour ce qui est de Linux Pratique, cette annonce doit accrocher un minimum l'oeil car c'est un évènement du site. Après on peut certes discuter du bandeau rouge "Linux Pratique" et le renommer par un autre intitulé moins publicitaire. Si c'est le cas, faites des propositions, je sèche un peu là .

@syubuntu2: Pour les vaguelettes, la question actuelle est plutot:
est ce qu'on les gardes? ( voir la nouvelle proposition forumV4_1.png )
Si oui, est ce qu'on travaille sur la nouvelle proposition ou non?

2F · Le 09/04/2009, à 11:53

Re,
c'est la barre de recherche + le côté "métal brossé" typique du finder actuel qui me font penser à la pomme.
après, si je suis le seul que ca gêne, je me plie.
Pour les propositions, pour pas me faire taper, euh.. je proposerais tout simplement de suivre le thème gnome,
donc un gris plat. Sinon je me répète je trouve cela beau mais trop proche d'un certain Os lui aussi proprio.

edit : et pour le linux pratique c'est pas l'évènement qui me gêne c'est le côté "pub",
le nom du magazine est cité 2 fois en page d'accueil. Mais c'est a force d'avoir adblock que j'ai peut etre plus l'habitude d'en voir. Gagnant du concours du mois pour l'abbonement au magazine suffirait peut etre en accueil avec du détail en clicquant.
bon app

Dernière modification par 2F (Le 09/04/2009, à 11:58)

huats · Le 09/04/2009, à 11:57

2F: en même temps pour Linux Pratique c'est un peu le but de leur faire de la pub, vu qu'ils ont la gentillesse d'offir des abonnements...

2F · Le 09/04/2009, à 12:00

Vrai ! mais quitte à revoir l'aspect du site je dis ce que je pense et les sponsors quelqu'il soit me froisse en général.
Même si je les aime bien (je suis abonné). C'est mon avis, je comprends totalement la démarche commerciale mais, est-on la pour faire du commerce ou du libre?

Dernière modification par 2F (Le 09/04/2009, à 12:01)

huats · Le 09/04/2009, à 12:12

2F: on est clairement là pour faire du libre
Mais après on ne peut que se réjouir de l'aide et du soutien que peut nous apporter ce genre de sponsors. D'ailleurs tu remarqueras que le site n'a aucune publicité...
Dans le cas de Linux Pratique, il faut savoir qu'ils nous donnent donc ces abonnements, mais également nous envoient des numéro à donner pour toutes les party que l'on fait. Bref c'est un juste retour d'ascenceur je trouve...

Mais dans tous les cas sache que nous sommes clairement attachés à notre indépendance... Et que nous avons déjà refusé beaucoup d'offres que nous trouvions pas 'justes'...

AlexandreP · Le 09/04/2009, à 14:58

2F a écrit :

C'est mon avis, je comprends totalement la démarche commerciale mais, est-on la pour faire du commerce ou du libre?

Ah, parce que les deux options sont mutuellement exclusives ?

2F · Le 09/04/2009, à 16:14

@ AlexandreP : si bien défini, je dirais non

Ubuntu-fr

Navigation

Liens de recherche

Annonce

#501 Le 25/03/2009, à 19:11

Re : revoir l'esthétique du site

#502 Le 25/03/2009, à 19:16

Re : revoir l'esthétique du site

#503 Le 26/03/2009, à 06:50

Re : revoir l'esthétique du site

#504 Le 26/03/2009, à 23:31

Re : revoir l'esthétique du site

#505 Le 27/03/2009, à 23:21

Re : revoir l'esthétique du site

#506 Le 27/03/2009, à 23:53

Re : revoir l'esthétique du site

#507 Le 28/03/2009, à 11:31

Re : revoir l'esthétique du site

#508 Le 30/03/2009, à 13:23

Re : revoir l'esthétique du site

#509 Le 04/04/2009, à 13:51

Re : revoir l'esthétique du site

#510 Le 07/04/2009, à 10:08

Re : revoir l'esthétique du site

#511 Le 07/04/2009, à 10:56

Re : revoir l'esthétique du site

#512 Le 07/04/2009, à 11:00

Re : revoir l'esthétique du site

#513 Le 07/04/2009, à 14:45

Re : revoir l'esthétique du site

#514 Le 08/04/2009, à 12:52

Re : revoir l'esthétique du site

#515 Le 08/04/2009, à 13:38

Re : revoir l'esthétique du site

#516 Le 08/04/2009, à 13:46

Re : revoir l'esthétique du site

#517 Le 08/04/2009, à 13:53

Re : revoir l'esthétique du site

#518 Le 08/04/2009, à 21:38

Re : revoir l'esthétique du site

#519 Le 09/04/2009, à 11:46

Re : revoir l'esthétique du site

#520 Le 09/04/2009, à 11:53

Re : revoir l'esthétique du site

#521 Le 09/04/2009, à 11:57

Re : revoir l'esthétique du site

#522 Le 09/04/2009, à 12:00

Re : revoir l'esthétique du site

#523 Le 09/04/2009, à 12:12

Re : revoir l'esthétique du site

#524 Le 09/04/2009, à 14:58

Re : revoir l'esthétique du site

#525 Le 09/04/2009, à 16:14

Re : revoir l'esthétique du site

Pied de page des forums