Vu que j'ai ENFIN un site potable, et que tous le monde ne va pas dans le café pour voir mes tribulations en PHP, je vous demande votre avis.
 
http://www.suzaku.fr
 
Ha oui précision, je suis débutant en PHP et en réa de site.
 

• Le but

Un site en PHP, beau, sobre, froid, respectant les normes XHTML 1.0 Transitional, CSS, ayant la même apparence quelque soit le navigateur, avec une interface d'administration. Et accessoirement dans un premier temps, une démo de l'utilité du PNG 24bits.
 

• l'idée

Étant enfin "pro", mais fraîchement chômage, il me fallait un portfolio pour exposer mes compos. Contrairement à la plupart des sites que j'ai pu voir, les parties "créations" et avis de l'auteur sont souvent sous un ratios de 80/20, la belle part aux créations, off course. Mon optique était de mettre un peu plus en avant les humeurs, les idées, bref l'état d'esprit dans lequel je suis lorsque je travaille. Certes, le principe d'un commentaire sous l'image est là pour çà, mais je préférai laisser des commentaires sur l'état d'avancement, les humeurs bien que mises en avant sur le site sous formes de news se devant d'être détachées pour ne pas "entraver" le visionnage des galeries.
D'où cette tentative de "blog" en première page.
 

• l'approche artistique

Le but de l'apparence du site est simple: sobre, et volontairement froid.
 
Pourquoi froid. Parque j'ai cherché l'antinomie de mon Pseudo à son paroxysme. Les représentations du phoenix sont toujours des flammes partout, couleur rouge/feu, etc. alors que le phoenix, dont l'état "enflammé" n'est que lors de sa transition vie/mort, est plus proche du paon, avec des couleurs bleues, etc. J'ai donc chercher à me démarqué au maximum des flammes. Et puis disons le tout net, les flammes sur un site, ca fait un peu "Has-been" et très sur-vu.
 
Il fallait une couleur dominante neutre ne gênant pas la "lecture" des images: une couleur gris tinté mauve fut parfaite. Mais cela allait ternir le site. Pour soulever les textes, blanc pour continuer dans le froid, il fallait un fond bien plus sombre sans que cela viennent gêner le principe du fond gris. Ici intervient le dégradé sombre toujours dans une teinte mauve, couplé à des fond de cadres plus sombres eux aussi. Enfin, un liseret autour de ces cadres permet de délimiter le tout, et séparer les éléments pour forcer leur lecture.
 
L'idée à la base était de mettre en transparence le site, pour que celui-ci disparaisse quand on regarde les images. Parti sur cette idée de "glace", les premiers jets comporter des fonds de cadres "brouillés" comme des vitres de salle de bain. Hélas, cela gênait plus qu'autre chose, et l'image de fond ajoutée justement pour renforcer la transparence ne servait plus à rien. J'optais donc pour une image juste plus foncée, au même teinte que les cadres.
 
Enfin, bien que les titres se trouvait dans une partie plus sombre que le texte à lire grâce au dégradé, la lecture avec une police unilatéralement en blanc empêcher la bonne lecture du site: impossible de différencier le titre du contenu, de l'important et du détails. Après de nombreux teste, j'optais donc pour des titres en bleu ciel, ressortant bien sur le dégradé sombre, une couleur grise pour les accessoires, et enfin, le texte blanc, ressortant aussi bien sur du sombre que du gris, le dégradé aidant à baisser les yeux et aider la lecture.
 

• les logiciels utilisés:

Dreamweaver au début, vite lâché pour Notepad ++ (surtout pour le codage PHP). Topstyle Lite 3.0 pour le CSS.
 

• Notes diverses:

Les designs dans le milieu sont soit très flexible (XHTML, CSS + PHP) et donc d'une grande sobriété, soit très beau, mais peu flexible et surtout, bien souvent en Flash. Cherchant à avoir le plus grand panel de visionnage possible, je renonça à Flash, et opta pour un design exploitant au maximum le CSS, combinée à un site entièrement en PHP, avec une interface d'administration pour l'upload de fichiers pour la galerie, les news, etc. Pour cela, l'utilisation de PNG 24bits et d'astuces CSS me semblait alléchante...
 
Hélas, Internet Explorer 6, bien qu'étant majoritaire dans le monde des navigateurs, souffre de sa vieillesse, et ne gère pas le PNG 24bits, et mal le CSS. J'ai donc utilisé un "hack" appelé IE7 pour pouvoir palier au manque du "papy browser". Le résultat, bien que golabelement satisfaisant, comporte de nombre bug dont je ne saurait expliquer leur provenance (gestion étrange du margin, certain lien ne sont plus cliquables, etc.).
 
Une fois que la galerie sera remplie, je ferais une pause pour faire de nouvelles compos. Mais une mise à jour est prévue, notamment un selecteur CSS.
 
Site normalement XHTML 1.0 Transitional compliant et CSS compliant.
Affichage identique sous IE7 et FF. Des bugs sous IE6.
 
En dehors du système de template, tout à été codé de ma main.
 
Voilà si vous avez des questions, n'hésitez pas.
Je rajouterai pitête des détails dans le descriptif.
 
Modo, si j'ai oublié un truc, merci de me le dire.

prem's!
j'aime l'aspect blog, même si c'est une gallerie a la base. ça fait moins gallerie quoi
j'aime aussi l'utilisation de smileys from hfr, ça permet de rester dans l'ambiance
et puis, les travaux... du tarpay, ça défonce!

Très bon évidement, surtout que j'ai appris beaucoup de choses au fur et à mesure de ton avancement
j'aime beaucoup le site mais surtout le sens que tu lui donnes, une réflexion très poussée c'est très agréable et je le vois, du coup, différement
 
le selecteur css sera pour quoi ? changer le style à la demande ?  
 
 ( et en plus tu as fait un topic exemplaire )

Oui. Le même principe que CSS Zengarden.
Il y aura le "IE6 compatible", le full 3D, 2D, etc...
Mais pas pour l'instant. L'architecture du site le permet, mais ce n'est pas encore codé.

j'aurais vu des couleurs plus chaudes avec le nom "suzaku"    
 
mais j'aime ce style sobre, ainsi que les "Humeur: Musique en tête: "des news    
 
tu ne mets pas un truc du genre copyright, en bas de page ?

 
Oui c'est bien sur fait exprès. Je vais le rajouter.
 
Pour le copyright, si tiends, j'ai prévu un footer dans se but en plus. Complètement zappé.

ah oui tiens je me demande toujours le texte qui va bien pour ça
" tous droits réservés " c'est suffisant ? ( surtout que c'est court )

Aucune idée.

ah ouais je viens de voir les changements possibles, c'est excellent

up je pensais avoir un peu plus d'avis.

Pour ma part, je trouve ça bien fait, mais un peu terne. Bon ça c'est voulu, donc pas touche je suppose même si de mon point de vue c'est pas génial.
L'autre truc qui me gène le plus, c'est qu'en première page il y a trop de texte, ça brouille vachement la lisibilité parce que ça part dans tout le sens je trouve.  
Le code me fait plaisir par contre ^^

Pour le coté terne de toute façon, on pourra choisir vi le selecteur CSS donc je suis en train de cogiter sur papier.
 
Que me conseillerai tu alors pour le texte?
 
Et qu'est-ce qui te plait dans mon code?

Mon avis :
- J'aime bien le fond
- j'aime bien la transparence des Blocs
- j'aime bien le choix des couleurs (sobre et propre)

Par contre, le texte est mal foutu, je trouve. Et ce pour plusieurs raisons : Il ne faut pas toujours justifier les paragraphes. Moi aussi je suis un grand fan du Jutify pour avoir des beaux blocs textes bien carrés mais des fois ça marche pas.
Essaie aligner à gauche ou centrer, ça peut être mieu je pense.

Baisser l'alpha des containers des blocs textes ok, mais pas les blocs textes en eux mêmes. Parce que le fond + dégradé des blocs ça bouffe carrément la lisibilité.

Idée pour la colonne de droite :
Pourquoi avoir une petite image et une petite crotte de texte coincé à côté ?
Pourquoi ne pas faire une vignette  qui prennent toute la largeur et une 50aine de pixels en hauteur ? Je sais, tu vas devoir retailler chaque vignette pour qu'elle fasse la bonne taille à moins que Php GD le fasse ? Comme ça tu fais un zoom sur une partie de ton image, tu en sors une vignettes genre 190x55. Au passage tu baisses d'1 ou 2 la taille du texte ...

Ce qui te donne

TON TITRE

ton texte

par exemple ...

 
Merci pour tes remarques.
 
Pour le texte justifié, tu fait référence aux colonnes de la galerie sur la droite? Oui ca fait çà sur des petits espaces. Peu de mots sur un petit espace et çà tire énormément. Ca c'est dans le CSS je ferai des tests.
 
Par contre je ne comprends pas pour les containers des blocs de textes et les blocs de textes en eux même.
 
Pour la colonne de droite, les miniatures sont crées en auto lorsque j'up an JPG (j'ai prévu de choisir d'envoyer à la mano les miniatures pour les autres formats) mais il ne s'agit que d'un resize en PHP de l'image d'origine ou de la miniature si celle-ci dépasse 100px de large.
J'avais pensé à ce ce système mais 3 points noirs:
 

• Celà siginifirait passer un temps monstre à préparer la miniature (le but étant d'automatiser un maximum l'envoi des fichiers) : Si techniquement le site est prévu pour (miniature à spécifier à chaque fois, la fonction d'uppload que j'ai développé est suffisamment flexible pour le faire), j'ai plus de 200 images à up, imagine le temps passé à créer de miniature!
• La miniature sert pour la galerie. Donc cela impliquerait un galerie avec uniquement des bandeaux,
• Impossible d'automatiser la chose, puisque même si en PHP je peux spécifier l'endroit du crop et la taille du resize, la zone ne sera pas la même entre 2 images. Ou alors il faut passer par une espèce d'appli web intégré à l'interface admin pour le recrop, là je sais pas faire...

Pour bien faire, il me faudrait: l'image (ou le lien) la miniature pour la galerie, et le bandeau pour l'accueil (qui pourrait me resservir ailleurs) etc. et là par contre j'ai pas mal de refonte pour le site (BDD, script d'upload et tout les formulaires d'ajout et d'edit des images).
 
A voir plus tard éventuellement.

C'est juste pour dire que quand on voit l'image de fond derrière le texte du milieu, ça le rend difficile à lire
 

 
Allez hop au boulot !
Je suis conscient que c'est moins facile que ce que tu as là. Mais à mon avis ça apporterait un gros plus à la présentation.
 
Sinon, c'est faisable en flash

 
Ok. Problème c'est que si je ternis encore le fond derrière le texte, on va mieux le voir, certes, mais on perd tout l'intérêt de la transparence.
 

Encore une fois, il faudrait que je fasse les miniatures à la main.
Je vais reflechir au truc.
 
Argh. Je pipe quedale à flash (vu qu'il n'y a qu'action script qui semble pouvoir sortir des trucs vraiment intéressant) et surtout j'ai été traumatisé par Flash 5...

Et si ça n'avait pas d'interêt ?    
Fait le juste pour le corps du texte. Pour les titres et le reste ça se vera toujours ...
 

Ah oui, ça a bien changé depuis