[WIP] Refection des murs et de la peinture...

Habillage de sites web et de forums : réalisation graphique et technique.

Modérateur : Ze Techos

Avatar de l’utilisateur
Flamme
Super mécano
Messages : 6624
Inscription : mar. avr. 20, 2004 11:33 pm
Localisation : Vincennes, France
Contact :

[WIP] Refection des murs et de la peinture...

Message par Flamme » ven. janv. 25, 2008 11:00 am

Je maintiens un site qui est censé changer de tête tous les ans. Du moins de couleur. Cette année, les membres de l'asso n'ont rien trouvé de mieux que de choisir une charte "Nuit d'orage"... Noir et bleu foncé...

Voici de quoi je pars :
http://lesamisdemissrachel.org/

Ras le bol intégral, je vais tout refaire en XHTML/CSS et PHP tout propre ! ;) J'ai commencé le nouveau design sous forme de maquette image, en attendant de le poster (ce soir...) voici le nouveau cahier des charges :

Code
- abandon de la mise en forme par tableau et de l'Iframe (ou de tout ce qui y ressemble ;) ;
- gestion en XHTML (transitionnel, il ne faut pas pousser...) ;
- introduction des "include" pour la mise à jour des différentes parties du site et d'un style switcher pour permettre une alternative plus légère.

Design
- abandon du "trois colonnes" et de la fenêtre déroulante au profit d'un combinaison barre menu en haut et menu latéral. Mise en page sur une base de 800 px de large ;
- menus textuels ;
- Les menus seront réorganisés comme suit :
- menu haut : accueil / association / calendrier / contacts /forum
- menu latéral : bibliothèque/ conseils / album / liens (grenier et site ne seront visibles que lorsqu'ils seront - enfin ! - finalisés)
- nouvelle charte plus épurée dans des dominantes bleues et noir. Le graphisme des anciens boutons sera conservé à titre d'illustration ou dans les titres des différentes parties - à voir.

Je mettrais au fur et à mesure de la progression les images ou les liens correspondants...
Dernière modification par Flamme le sam. janv. 26, 2008 12:06 pm, modifié 1 fois.
[b][color=indigo]Fondatrice / administratrice de GA[/color][/b]

Site Gimp Attitude : découvrez nos [url=http://www.gimp-attitude.org/ressources.php]ressources[/url] !

[b]Webmistress[/b] de :

[url=http://www.gimp-attitude.org][img]http://www.gimp-attitude.org/stock/02_ga.gif[/img][/url] [url=http://monde-des-forts.org/][img]http://www.gimp-attitude.org/stock/05_guerredesforts.gif[/img][/url] [url=http://monde-des-forts.org/missrachel/][img]http://lesamisdemissrachel.org/bans/miss-rachel.gif[/img][/url] [url=http://www.lignes-en-jeu.org][img]http://www.lignes-en-jeu.org/bans/lejmini.gif[/img][/url] [url=http://milathea.hautetfort.com/][img]http://milathea.hautetfort.com/media/02/01/a533d0d6f71f6420b6eed5dac6e771b1.gif[/img][/url]

Avatar de l’utilisateur
Papy the lolo
Maître pisteur
Messages : 2731
Inscription : sam. déc. 03, 2005 7:09 pm
Localisation : Montargis
Contact :

Message par Papy the lolo » ven. janv. 25, 2008 1:22 pm

C'est un vrai chantier que tu commences, mais tu as l'habitude :) . je sens que tes brosses vintage vont faire fureur :l0l:
[color=indigo][b]Administrateur de GA[/b][/color]
Site Gimp Attitude : [url=http://www.gimp-attitude.org/ressources.php]découvrez nos ressources ![/url]
[url=http://tsovorp.org/histoire/index.html][img]http://images.imagehotel.net/4e397efd0d.png[/img][/url] [url=http://radiologie.tsovorp.org/index.html][img]http://images.imagehotel.net/2602f51d28.png[/img][/url][url=http://gimpfractal.tsovorp.org/][img]http://img75.imageshack.us/img75/2733/gimfrqd4.png[/img][/url]

Avatar de l’utilisateur
Flamme
Super mécano
Messages : 6624
Inscription : mar. avr. 20, 2004 11:33 pm
Localisation : Vincennes, France
Contact :

Message par Flamme » ven. janv. 25, 2008 5:58 pm

En fait, je me suis dit que ça pouvait être pas mal de limiter les éléments graphiques différents... Enfin, vous verrez bien ! :l0l:
[b][color=indigo]Fondatrice / administratrice de GA[/color][/b]

Site Gimp Attitude : découvrez nos [url=http://www.gimp-attitude.org/ressources.php]ressources[/url] !

[b]Webmistress[/b] de :

[url=http://www.gimp-attitude.org][img]http://www.gimp-attitude.org/stock/02_ga.gif[/img][/url] [url=http://monde-des-forts.org/][img]http://www.gimp-attitude.org/stock/05_guerredesforts.gif[/img][/url] [url=http://monde-des-forts.org/missrachel/][img]http://lesamisdemissrachel.org/bans/miss-rachel.gif[/img][/url] [url=http://www.lignes-en-jeu.org][img]http://www.lignes-en-jeu.org/bans/lejmini.gif[/img][/url] [url=http://milathea.hautetfort.com/][img]http://milathea.hautetfort.com/media/02/01/a533d0d6f71f6420b6eed5dac6e771b1.gif[/img][/url]

Avatar de l’utilisateur
Flamme
Super mécano
Messages : 6624
Inscription : mar. avr. 20, 2004 11:33 pm
Localisation : Vincennes, France
Contact :

Message par Flamme » sam. janv. 26, 2008 12:28 am

Donc voici pour un début, juste la maquette (le mock-up", comme dit Bellette ;)).

Image

Je suppose que l'on voit tout de suite que le parti est un chouilla différent... ;)
[b][color=indigo]Fondatrice / administratrice de GA[/color][/b]

Site Gimp Attitude : découvrez nos [url=http://www.gimp-attitude.org/ressources.php]ressources[/url] !

[b]Webmistress[/b] de :

[url=http://www.gimp-attitude.org][img]http://www.gimp-attitude.org/stock/02_ga.gif[/img][/url] [url=http://monde-des-forts.org/][img]http://www.gimp-attitude.org/stock/05_guerredesforts.gif[/img][/url] [url=http://monde-des-forts.org/missrachel/][img]http://lesamisdemissrachel.org/bans/miss-rachel.gif[/img][/url] [url=http://www.lignes-en-jeu.org][img]http://www.lignes-en-jeu.org/bans/lejmini.gif[/img][/url] [url=http://milathea.hautetfort.com/][img]http://milathea.hautetfort.com/media/02/01/a533d0d6f71f6420b6eed5dac6e771b1.gif[/img][/url]

Avatar de l’utilisateur
Nim
Chef de meute
Messages : 36
Inscription : mer. avr. 21, 2004 1:20 pm
Localisation : A Nelson, Nouvelle-Zélande
Contact :

Message par Nim » sam. janv. 26, 2008 7:50 am

Très classe ! Cela dit, je n'ai absolument rien compris à ton premier post sur les détails techniques de la refonte, mais ce n'est pas grave. :l0l:

L'ancienne version était de toi également ? Elle avait un aspect bucolique assez charmant. ;)

Avatar de l’utilisateur
Flamme
Super mécano
Messages : 6624
Inscription : mar. avr. 20, 2004 11:33 pm
Localisation : Vincennes, France
Contact :

Message par Flamme » sam. janv. 26, 2008 8:22 am

Un peu trop kitch, je trouve qu'on finissait par s'en lasser : le même design qui passe par le bleu, l'orange puis le vert... :?

Celui-ci sera plus facile à changer et je pourrais laisser un style-switcher pour avoir accès aux style successifs.
[b][color=indigo]Fondatrice / administratrice de GA[/color][/b]

Site Gimp Attitude : découvrez nos [url=http://www.gimp-attitude.org/ressources.php]ressources[/url] !

[b]Webmistress[/b] de :

[url=http://www.gimp-attitude.org][img]http://www.gimp-attitude.org/stock/02_ga.gif[/img][/url] [url=http://monde-des-forts.org/][img]http://www.gimp-attitude.org/stock/05_guerredesforts.gif[/img][/url] [url=http://monde-des-forts.org/missrachel/][img]http://lesamisdemissrachel.org/bans/miss-rachel.gif[/img][/url] [url=http://www.lignes-en-jeu.org][img]http://www.lignes-en-jeu.org/bans/lejmini.gif[/img][/url] [url=http://milathea.hautetfort.com/][img]http://milathea.hautetfort.com/media/02/01/a533d0d6f71f6420b6eed5dac6e771b1.gif[/img][/url]

Avatar de l’utilisateur
Nim
Chef de meute
Messages : 36
Inscription : mer. avr. 21, 2004 1:20 pm
Localisation : A Nelson, Nouvelle-Zélande
Contact :

Message par Nim » sam. janv. 26, 2008 8:27 am

Hm. Qu'est-ce qu'un style-switcher, ma chère ? :?

Avatar de l’utilisateur
Flamme
Super mécano
Messages : 6624
Inscription : mar. avr. 20, 2004 11:33 pm
Localisation : Vincennes, France
Contact :

Message par Flamme » sam. janv. 26, 2008 8:31 am

C'est simple... Va sur le site GA, et regarde en bas de la colonne de gauche...
[b][color=indigo]Fondatrice / administratrice de GA[/color][/b]

Site Gimp Attitude : découvrez nos [url=http://www.gimp-attitude.org/ressources.php]ressources[/url] !

[b]Webmistress[/b] de :

[url=http://www.gimp-attitude.org][img]http://www.gimp-attitude.org/stock/02_ga.gif[/img][/url] [url=http://monde-des-forts.org/][img]http://www.gimp-attitude.org/stock/05_guerredesforts.gif[/img][/url] [url=http://monde-des-forts.org/missrachel/][img]http://lesamisdemissrachel.org/bans/miss-rachel.gif[/img][/url] [url=http://www.lignes-en-jeu.org][img]http://www.lignes-en-jeu.org/bans/lejmini.gif[/img][/url] [url=http://milathea.hautetfort.com/][img]http://milathea.hautetfort.com/media/02/01/a533d0d6f71f6420b6eed5dac6e771b1.gif[/img][/url]

Avatar de l’utilisateur
Nim
Chef de meute
Messages : 36
Inscription : mer. avr. 21, 2004 1:20 pm
Localisation : A Nelson, Nouvelle-Zélande
Contact :

Message par Nim » sam. janv. 26, 2008 8:34 am

Ah ! Le bidule pour choisir un style différent, donc. :D

Merci pour l'explication. ;)

Avatar de l’utilisateur
Flamme
Super mécano
Messages : 6624
Inscription : mar. avr. 20, 2004 11:33 pm
Localisation : Vincennes, France
Contact :

Message par Flamme » sam. janv. 26, 2008 11:01 am

Petit détail : la police de caractère est à titre de test, je vais en choisir une appropriée : une calligraphique "anglaise", comme de bien entendu ! ;)
[b][color=indigo]Fondatrice / administratrice de GA[/color][/b]

Site Gimp Attitude : découvrez nos [url=http://www.gimp-attitude.org/ressources.php]ressources[/url] !

[b]Webmistress[/b] de :

[url=http://www.gimp-attitude.org][img]http://www.gimp-attitude.org/stock/02_ga.gif[/img][/url] [url=http://monde-des-forts.org/][img]http://www.gimp-attitude.org/stock/05_guerredesforts.gif[/img][/url] [url=http://monde-des-forts.org/missrachel/][img]http://lesamisdemissrachel.org/bans/miss-rachel.gif[/img][/url] [url=http://www.lignes-en-jeu.org][img]http://www.lignes-en-jeu.org/bans/lejmini.gif[/img][/url] [url=http://milathea.hautetfort.com/][img]http://milathea.hautetfort.com/media/02/01/a533d0d6f71f6420b6eed5dac6e771b1.gif[/img][/url]

Avatar de l’utilisateur
cuak
Maître pisteur
Messages : 1338
Inscription : ven. nov. 03, 2006 8:21 pm
Contact :

Message par cuak » sam. janv. 26, 2008 11:56 pm

Qu'en je pense que j'ai passer des heure a créer un systeme d'hebergement sur GA-Tuto et que meme toi, Flamme, tu ne l'utilise pas .... :(
[url=http://gatuto.free.fr][img]http://cuak.free.fr/logo/01.png[/img][/url]

Avatar de l’utilisateur
Flamme
Super mécano
Messages : 6624
Inscription : mar. avr. 20, 2004 11:33 pm
Localisation : Vincennes, France
Contact :

Message par Flamme » dim. janv. 27, 2008 12:22 am

Oups, désolée, c'est une solution provisoire que j'utilse avant de stocker mes images sur mon propre espace (le fameux www.gimp-attitude.org/stock)...

Mais le sujet existe pour parler du webdesign, pas de l'hébergement... :?
[b][color=indigo]Fondatrice / administratrice de GA[/color][/b]

Site Gimp Attitude : découvrez nos [url=http://www.gimp-attitude.org/ressources.php]ressources[/url] !

[b]Webmistress[/b] de :

[url=http://www.gimp-attitude.org][img]http://www.gimp-attitude.org/stock/02_ga.gif[/img][/url] [url=http://monde-des-forts.org/][img]http://www.gimp-attitude.org/stock/05_guerredesforts.gif[/img][/url] [url=http://monde-des-forts.org/missrachel/][img]http://lesamisdemissrachel.org/bans/miss-rachel.gif[/img][/url] [url=http://www.lignes-en-jeu.org][img]http://www.lignes-en-jeu.org/bans/lejmini.gif[/img][/url] [url=http://milathea.hautetfort.com/][img]http://milathea.hautetfort.com/media/02/01/a533d0d6f71f6420b6eed5dac6e771b1.gif[/img][/url]

Avatar de l’utilisateur
Flamme
Super mécano
Messages : 6624
Inscription : mar. avr. 20, 2004 11:33 pm
Localisation : Vincennes, France
Contact :

Message par Flamme » dim. janv. 27, 2008 5:49 pm

Donc voici la suite, à ce stade, la mise en place a commencé. Il n'y a pas encore de menu du haut ni de menu latéral.

Image

(désolée Cuak, mais j'avoue que la fonction de vignette de IH est tout de même bien pratique... :oops: Déjà que pas grand monde ne reagrde, alors s'il y a juste un lien... )

J'ai laissé les onglets pour que vous puissiez voir la favicone...
[b][color=indigo]Fondatrice / administratrice de GA[/color][/b]

Site Gimp Attitude : découvrez nos [url=http://www.gimp-attitude.org/ressources.php]ressources[/url] !

[b]Webmistress[/b] de :

[url=http://www.gimp-attitude.org][img]http://www.gimp-attitude.org/stock/02_ga.gif[/img][/url] [url=http://monde-des-forts.org/][img]http://www.gimp-attitude.org/stock/05_guerredesforts.gif[/img][/url] [url=http://monde-des-forts.org/missrachel/][img]http://lesamisdemissrachel.org/bans/miss-rachel.gif[/img][/url] [url=http://www.lignes-en-jeu.org][img]http://www.lignes-en-jeu.org/bans/lejmini.gif[/img][/url] [url=http://milathea.hautetfort.com/][img]http://milathea.hautetfort.com/media/02/01/a533d0d6f71f6420b6eed5dac6e771b1.gif[/img][/url]

Avatar de l’utilisateur
cuak
Maître pisteur
Messages : 1338
Inscription : ven. nov. 03, 2006 8:21 pm
Contact :

Message par cuak » lun. janv. 28, 2008 1:27 pm

J'agonise sous les assauts du rire! Sur GA-Tuto il y a egalement cette fonction :S
[url=http://gatuto.free.fr][img]http://cuak.free.fr/logo/01.png[/img][/url]

Avatar de l’utilisateur
Flamme
Super mécano
Messages : 6624
Inscription : mar. avr. 20, 2004 11:33 pm
Localisation : Vincennes, France
Contact :

Message par Flamme » lun. janv. 28, 2008 3:22 pm

Voilà la version finale :

Image

Etn en plus, un petit style plus "léger" pour petite connexion :

Image

Alors ? ;)
[b][color=indigo]Fondatrice / administratrice de GA[/color][/b]

Site Gimp Attitude : découvrez nos [url=http://www.gimp-attitude.org/ressources.php]ressources[/url] !

[b]Webmistress[/b] de :

[url=http://www.gimp-attitude.org][img]http://www.gimp-attitude.org/stock/02_ga.gif[/img][/url] [url=http://monde-des-forts.org/][img]http://www.gimp-attitude.org/stock/05_guerredesforts.gif[/img][/url] [url=http://monde-des-forts.org/missrachel/][img]http://lesamisdemissrachel.org/bans/miss-rachel.gif[/img][/url] [url=http://www.lignes-en-jeu.org][img]http://www.lignes-en-jeu.org/bans/lejmini.gif[/img][/url] [url=http://milathea.hautetfort.com/][img]http://milathea.hautetfort.com/media/02/01/a533d0d6f71f6420b6eed5dac6e771b1.gif[/img][/url]

PascalL
Maître pisteur
Messages : 1644
Inscription : ven. mai 07, 2004 7:53 am
Localisation : Suisse romande
Contact :

Message par PascalL » lun. janv. 28, 2008 10:46 pm

J'aime beaucoup! Je trouve le "light" plus équilibré! :)

Salut!

Pascal

Avatar de l’utilisateur
Nim
Chef de meute
Messages : 36
Inscription : mer. avr. 21, 2004 1:20 pm
Localisation : A Nelson, Nouvelle-Zélande
Contact :

Message par Nim » mar. janv. 29, 2008 7:53 am

Très prout-prout !
Et ça sent les intrigues à plein nez ! ;)
Attention.
Un kiwi en short peut en cacher un autre.

Avatar de l’utilisateur
pop
Maître du Recyclage
Messages : 1367
Inscription : dim. févr. 13, 2005 7:03 pm
Localisation : Brest (tout près)

Message par pop » mar. janv. 29, 2008 9:19 am

Très "classe", Flamme. Je ne saurais choisir entre les deux. Le plus "léger" me paraît plus lisible, mais un des intérêt des feuilles de style est que le créateur n'est plus obligé de choisir. Il peut proposer et c'est le client qui choisit.
[url=http://www.imagehotel.net/?from=c0e3d0ae13.gif][img]http://images.imagehotel.net/c0e3d0ae13.gif[/img][/url]
Animateur GA

Avatar de l’utilisateur
Papy the lolo
Maître pisteur
Messages : 2731
Inscription : sam. déc. 03, 2005 7:09 pm
Localisation : Montargis
Contact :

Message par Papy the lolo » mar. janv. 29, 2008 10:29 am

J'aime le premier, bien que le rappel du titre dans le médaillon, me géne, on ne voit de ce fait plus le "camé".
pour le second, pourquoi laisser bleu le médaillon central alors que le reste est sable? mais comme dit Pop, les feuilles de style c'est fait pour que l'on choisisse :D
beau boulot !
[color=indigo][b]Administrateur de GA[/b][/color]
Site Gimp Attitude : [url=http://www.gimp-attitude.org/ressources.php]découvrez nos ressources ![/url]
[url=http://tsovorp.org/histoire/index.html][img]http://images.imagehotel.net/4e397efd0d.png[/img][/url] [url=http://radiologie.tsovorp.org/index.html][img]http://images.imagehotel.net/2602f51d28.png[/img][/url][url=http://gimpfractal.tsovorp.org/][img]http://img75.imageshack.us/img75/2733/gimfrqd4.png[/img][/url]

Avatar de l’utilisateur
Flamme
Super mécano
Messages : 6624
Inscription : mar. avr. 20, 2004 11:33 pm
Localisation : Vincennes, France
Contact :

Message par Flamme » mar. janv. 29, 2008 11:07 am

Papy the lolo a écrit :J'aime le premier, bien que le rappel du titre dans le médaillon, me géne, on ne voit de ce fait plus le "camé".
pour le second, pourquoi laisser bleu le médaillon central alors que le reste est sable? mais comme dit Pop, les feuilles de style c'est fait pour que l'on choisisse :D
beau boulot !
En fait, pour cela, je n'ai pas le choix : c'est le logo officiel de l'association. Cette page n'est d'ailleurs que la "couverture" du site, car bien entendu dans les autres pages, le logo n'est plus présent...

Pour la couleur du logo, ce n'est absolument pas négociable du fait que le logo change de couleur chaque année sur décision officille du bureau. Il a été bleu pâle, puis oarngé, puis vert... Cette années il est bleu foncé et noir. Le thème par défaut suit donc cette charte. Le second site n'est qu'un habillage plus léger pour les petites connexions ou ceux pour qui le thème princiaple serait trop sombre.

Le fait qu'il soit bleu ne me semble pas particulièrement choquant, d'ailleurs, du fait que le tour est bleu aussi, cela fait un rappel.
Dernière modification par Flamme le jeu. janv. 31, 2008 11:04 pm, modifié 1 fois.
[b][color=indigo]Fondatrice / administratrice de GA[/color][/b]

Site Gimp Attitude : découvrez nos [url=http://www.gimp-attitude.org/ressources.php]ressources[/url] !

[b]Webmistress[/b] de :

[url=http://www.gimp-attitude.org][img]http://www.gimp-attitude.org/stock/02_ga.gif[/img][/url] [url=http://monde-des-forts.org/][img]http://www.gimp-attitude.org/stock/05_guerredesforts.gif[/img][/url] [url=http://monde-des-forts.org/missrachel/][img]http://lesamisdemissrachel.org/bans/miss-rachel.gif[/img][/url] [url=http://www.lignes-en-jeu.org][img]http://www.lignes-en-jeu.org/bans/lejmini.gif[/img][/url] [url=http://milathea.hautetfort.com/][img]http://milathea.hautetfort.com/media/02/01/a533d0d6f71f6420b6eed5dac6e771b1.gif[/img][/url]

Répondre