Harmoniak.com : réalisation

Ce billet date de plusieurs années, ses informations peuvent être devenues obsolètes.

Et hop voici le billet spécial dans lequel je vais vous donner les secrets de la réalisation du site Harmoniak.com. Je suis content et fier de ce site car sa maintenance sera très facile.

Au niveau de l'interface graphique, pas grand chose à dire, sinon que la couleur est un choix personnel qui colle à l'ambiance underground qu'on voulait dégager. Ca change en même temps des sites aux couleurs claires de mon portfolio. L'aspect brûlé et ancien des blocs est réalisé dans Photoshop en distillant des coups de pincaux sur des masques appliqués à des formes rectangulaires. J'ai utilisé des formes de pincaux spéciales mises à disposition généreusement.

Ensuite on s'est posé la question de savoir quelle technologie utiliser pour faire écouter les productions sonores de nos soon to be famous artistes ;-) Finalement on a opté pour Flash qui est le plug-in certes propriétaire mais disponible sur un grand nombre de systèmes différents et de surcroît pas super facile à hacker pour les non-spécialistes. J'ai donc réalisé un player mp3 en Flash pour la partie Productions qui fonctionne avec des mp3 externes et un fichier XML. Avantage, mise à jour facilitée à outrance. Si vous souhaitez faire de même, un super tutorial (comme on aimerait en voir davantage) est disponible sur Gurusnetwork.com.

Ensuite, comme d'habitude j'ai intégré le fabuleux Dotclear 1.2 que j'ai un tout petit peu allégé pour gérer la partie News. J'ai récupéré le contenu de la base de donnée de mon ancien site Kemar.net pour tout migrer sur la nouvelle base de donnée.

Pour gérer la partie Photos, j'ai utilisé Photodir parce que j'en avais marre de la maintenance manuelle casse-bonbons d'une galerie d'images. Pas de base de donnée, rien à faire sinon ajouter un dossier contenant les images sur le serveur et le script se charge du reste. J'en avais entendu parler dans les commentaires d'un post de Maurice. J'ai fait quelques modifs dans le code pour intégrer le graphisme du site et rendre le code valide XHTML.

Il me fallait encore une méthode pour incorporer du Flash dans du code XHTML valide sans obtenir d'erreurs à la validation. Ca vaut ce que ça vaut mais j'ai utilisé une méthode trouvée sur deconcept.

Le diaporama est réalisé en Flash grâce au Flash slide show source de Whatdoiknow.org.

Le reste, comme toujours : mise en page avec CSS sans tableaux (sauf pour les images de la galerie photo) et XHTML 1.0 Strict.

Comme nul n'est parfait, qu'il faut bien s'ouvrir à la critique, qu'il y a peut-être des bugs, les commentaires sont ouverts.

#1 Malibu_lime

24/11/2004 12:21

Bon, moi j'ai un commentaire Marco ! Je trouve ça inadmissible que tu utilises encore Dotclear, pour un programmeur PHP/MySQL de ta renomé j'aurais bien aimé voir intégrer le système de news que tu as créé pendant ton stage ... En fait je me rend compte que tu ne fais que de l'intégration de programme existant sur le web bouuuuuu Sinon le site est très bien réalisé, ergonomique, et très jolie ! félicitations !

Malibu_lime :: Warcraft3 proGammer

#2 Marco

24/11/2004 12:32

Hihi Malibu, tu as raison, j'ai fait beaucoup d'intégration :-) Mais j'étais pressé par le temps. Pour les news, j'aurai pu prendre le module que j'ai développé mais franchement Dotclear est bien plus complet et je n'ai pas encore le niveau pour développer un système de cette qualité. Par contre j'ai développé le script de contact tout seul ! :-)

#3 Malibu_lime

24/11/2004 18:39

ok, ok, donc je cherche les bugs sur le module de contact et c pas dure à trouver :) 1) quand tu rentres un nom (exemple:"m"), puis un mail (exemple:"m"), puis que tu cliques sur envoyer, bah t'as bien le message d'erreur en rouge, mais ce message décale ton formulaire ce qui fait que tes en dehors du cadre ! 2) le choix du destinataire ne reste pas cocher après un message d'erreur. Essaye d'utiliser une variable de session pour garder ce choix en mémoire.

Sinon ça va, mais pourquoi faire des contrôle javascript et php ? pourquoi ne pas faire tout en javascript ou tout en php pour les contrôles ... fin tu fais comme tu veux :) et moi j'aime bien quand le message d'erreur apparait à côté de la cellule en faute exemple http://olivier.toscano.free.fr/contact/ voili, voilou, j'espère que je t'aurais aidé ;)

++ Olivier alias : Malibu_lime :: Warcraft3 proGammer

#4 Marco

24/11/2004 21:47

Ouais ok Olivier, je vois les trucs à améliorer ! Le contrôle Javascript sert à éviter une requête inutile au serveur. Le contrôle php c'est au cas ou l'utilisateur est un power user et désactive Javascript.

Marco :: Street Fighter 2 proGammer

#5 mauriz

25/11/2004 09:33

Wow, sujet intéressant, site très réussi graphiquement, usage de bonnes pratiques techniquement, que du bon :D

#6 ElMoustiko

25/11/2004 17:44

Alors moi j'ai envoyé un mail via le formulaire de contact que je me garderais bien de copier ici, parceque bien trop élogieux (mais honnete :)) pour le mettre en public, après, ça va faire anflage de chevilles :D

J'avais pas tilté kemar => marc en verlant, je suis à la ramasse moi ! En tout cas c'est vraiment bien foutu et la musique est vraiment chouette, et je dis ça alors que je déteste tout ce qui est rap, hip hop, ça doit donc être de qualité :D

Bravo et vivement le prochain (site).

@++

#7 Marco

25/11/2004 18:17

Merci pour vos commentaires :-)

Avant Harmoniak.com Après Harmoniak.com sur Stylegala

Tag Kemar Joint