jeudi 2 avril 2009

L'Antre de Svargt IV : Intégration xhtml/css

Sommaire :


Bon, ici, j'espère faire un billet avec peu de texte et beaucoup d'images !

Calcul du positionnement des éléments

Mise en place en xhtml et css

On vérifie !

Je commence par définir toutes mes zones, calcul en pixel à l'appui, ça sera utile ensuite en css. Ensuite on intègre tout ça grâce à un petit peu de xhtml et de css. Puis on vérifie si ça colle. Tout vas bien !

20-au_boulot.jpg

21-ca_avance.jpg

22-mieux.jpg

Une fois cette première page réalisée, je décide de passer aux choses sérieuses et installe Dotclear. Si je me souviens bien, je suis parti du thème Aorakit 1A (merci Koz' !). Bon avec du boulot, ça avance, ça avance !

Premier résultat qui ressemble à quelque chose

Après pas mal de travail, voici le premier résultat qui ressemble à peu près à quelque chose !

Nouvel essai de couleurs

Cependant les couleurs ne me plaisent pas vraiment.... C'est trop fade, trop terne, trop triste.

Voici donc un nouvel essai de couleurs (à droite). Pour moi, c'est déjà beaucoup mieux, plus attrayant.

Bon, j'ai mes couleurs qui me plaisent, ça devrait allé maintenant, on approche du but ? Et ben non ! Le fond ne me plait plus du tout ! Lui aussi je le trouve fade, terne et triste ! Il faut faire quelque chose ! Vite on fouille dans les archives, et on attaque !

Tout d'abord on commence par une réinstallation du blog en local (avec le thème à modifier). Sur la seconde image, j'ai déjà pas mal retouché l'image, plus à mon goût, plus comme je la voyais, en accord avec les couleurs choisies pour le texte ! Il y a cependant un petit problème d'alignement !!! ...Qui sera immédiatement corrigé dans la troisième image. Pas encore top les bords de l'image, non ? Et l'image quatre, en progrès non (application de texture + travail au pinceau) ? Image suivante, on continue. Ça sent la fin hein ?

50-reinstall.jpg

51-mhh-little-problem.jpg

52-looks-better-yeah-plus-que-lincrustation-des-bords.jpg

53-looks-better-yeah-plus-que-lincrustation-des-bords.jpg

54-on-continue-on-texturise.jpg

55-un-eu-plus-de-textures-et-une-correction-des-couleurs.jpg


Épilogue :

Après une longue période de gestation au sein de localhost (aka 127.0.0.1), je suis vraiment très content de sortir ce nouveau svargt.net ! C'est un projet qui m'a tenu à cœur pendant un petit moment tout de même, et je compte bien continuer de le faire vivre encore longtemps en ligne ! En espèrant qu'il vous plaise tout autant qu'à moi !

mercredi 1 avril 2009

L'Antre de Svargt III : Prise de vue et post-production

Sommaire :


Pour la prise de vue, j'ai monté l'appareil sur un trépied, car tout d'abord, cela permet de cadrer tranquillement, de faire pleins d'essais à la suite et de garder le même cadrage. L'appareil était relié à mon ordinateur portable, ce qui permet de le contrôler à distance et ainsi éviter tout flou de bouger, tout changement malheureux dans le cadrage (on verra plus loin pourquoi c'est important), et d'enregistrer les prises de vue directement sur le disque dur, ce qui offre une visualisation rapide du cliché. Voici quelques photos du dispositif :

DSCF0916.jpg

DSCF0912.jpg

DSCF0908.jpg

DSCF0901.jpg

Il faisait plutôt sombre (et c'était pas plus mal), malgré mon super néon. Je ne pouvais allumer le néon du plafond car il reflétait dans l'écran et ça n'allait pas du tout. J'avais donc des temps de poses plutôt long, au delà de la seconde (d'où le trépied) !

Image résultante du procédé HRDI

Je voulais aussi utiliser la technique du HDRI pour avoir un rendu sympathique, bien à moi, comme j'aime faire dans mon logiciel. Mais qu'est-ce donc que le HDRI (je pense faire un billet complet dessus, si ça intéresse) ? C'est un procédé qui vise à superposer plusieurs images (3 dans mon cas) afin de tirer la meilleure exposition possible du fichier finale en se basant sur les fichiers sources. Les fichiers sources ont donc chacun une exposition différente (un sur-exposé, un "normal", un sous-exposé). De plus le programme (Photomatix) fourni plein d'autres option qui m'ont aidé à avoir le rendu désiré

Après retouche dans Photoshop, voilà ce que j'ai obtenu, tout à fait ce que je voulais :

La première version !

Il ne reste plus qu'à intégrer tout ceci en xhtml et de css ! La suite dans l'épisode IV (non, ce n'est pas Le Retour du Jedi) !

mardi 31 mars 2009

L'Antre de Svargt II : Installation

Sommaire :


Au début j'avais dans l'idée de prendre en photos un écran dans ma chambre, comme vu précédemment, puis par la suite travailler le fond avec Photoshop. Peu pratique.

Nous nous étions donc arrêtés au moment ou je décortiquais ce malheureux écran. Première réaction : C'est beau ! Deuxième : Fichtre que c'est lourd ! Troisième : Et maintenant ?

C'est bien mais j'en fais quoi ? Je n'ai toujours pas trouvé de fond intéressant. Ni une ni deux : Phase de recherche. Ce fut pas très long. La cave semblait des plus accueillante (étrange, je sais...). Vous savez, ce beau mur brut, cette vieille planche de bois... Ah que c'est beau ! Oui soit, il fallait un peu d'imagination, car éclairé sous un néon ça rend pas vraiment. Ma décision fut prise : ce sera ici, on verra les détails plus tard. Descendre 2 étages avec l'écran ne fut pas de tout repos.

L'écran sur l'étagère

Au début j'ai tenté de poser l'écran sur une étagère, laissant de la place pour un menu ou que sais-je. Ça n'a pas vraiment marché, en plus avec le reflet du chauffe-eaux, du néon, des objets de la pièce, j'avais un peu de mal.

Installation bi-écran

C'était en effet bien mieux posé là, sur cette planche poussiéreuse. Je cherche d'autre accessoires pour agrémenter la scène. Claviers, souris, câbles. J'étais toujours dans mon idée d'avoir deux écrans, le second servant à afficher le menu. Le principal, lui ne servant qu'à l'affichage du contenu du site.

L'idée me plait, ainsi que le clavier en dessous et le pavé numérique en guise de menu. Mais il y a un problème : Tout ça, ça prend de la place. La zone d'affichage de l'écran principal était de fait, bien trop réduite. L'idée n'était donc guère utilisable sur tout un site, vraiment peu ergonomique.

Si je me souviens bien, il y a eu une pause entre ce qui précède et ce qui va suivre.

DSCF0915.jpg

J'abandonne donc l'idée du second écran et du pavé numérique et pars en quête d'un nouveau menu. C'est ainsi que j'ai tenté de recréer une sorte de décor, avec différents éléments, qui seraient cliquables et mèneraient vers les différentes sections du site. Vous voyez, le nouveau design, il se précise mine de rien, il commence drôlement à ressembler à ce que vous voyez actuellement !

Dans le prochain épisode nous verrons la technique de la prise de vue !

lundi 30 mars 2009

L'Antre de Svargt I : Prémices

Sommaire :


Comme je le disais précédemment, cette nouvelle mouture de mon petit svargt.net était un projet de longue date, qui, aux premiers abords me paraissait un brin compliqué. Comment faire quelque chose de très graphique tout en gardant une navigation agréable ? À savoir qu'une majorité de personne dispose encore d'écran de petite taille (moi compris) : comment faire rentrer tout ça dedans ? Bon, rien n'est impossible, hein ?

Premier croquis

Suivirent donc les premiers croquis (je scanne ça et j'édite ce billet !), les premiers essais. Peu concluant. La lumière n'allait pas du tout dans ma chambre.

Montage présentant les différentes pistes de recherche

Prendre en photo sont PC portable avec le 2nd écran à côté, mauvaise idée. Mauvaise idée aussi la vielle télévision. Tout comme mon second moniteur seul.

Comme vous pouvez le voir sur les différents pistes de recherche, j'avais tout d'abord dans l'idée de réaliser une navigation grâce à un pavé numérique. J'avais testé rapidement la faisabilité (voir ici, la touche 1), en codant une page à partir d'une des images test. Finalement, l'idée ne fut pas retenu.

L'idée resta en suspend un petit (long ?) moment.

Je reprend mes recherches, l'idée se précise, tout comme le style. Fructueuses recherches car je tombe sur un moniteur que je trouve assez esthétique.

Moniteur CRT plutôt joli !

Je sais à présent que je veux "un truc dans le genre". Par chance, on m'avait donné (merci Christophe !) un vieux 17" CRT qui avait explosé.

C'est ce bord blanc tout autour de l'écran, vous voyez ? C'est lui que je trouvais disgracieux au plus haut point. Un seul remède : démonter l'écran (à faire avec de grandes précautions...). À l'attaque ! Il fut un peu récalcitrant, mais j'ai tout de même fini par gagner...

La suite au prochaine épisode, L'Antre de Svargt II : Installation

dimanche 29 mars 2009

Svargt.net : nouvelle version !

C'est non sans soulagement, et sans une certaine fierté que je met enfin en ligne cette nouvelle version ! C'est une idée de design qui me trottait dans la tête depuis un moment déjà, et que j'avais très envie de réaliser. Tout d'abord, elle me paraissait cependant difficilement réalisable. M'enfin, impossible n'est pas français, non ?

Suivra bientôt une suite de billets relatant l'histoire de la refonte de svargt.net

Vos critiques sur le design sont évidement les bienvenues !

vendredi 20 février 2009

Festival des Nuits de la Roulotte 2009 : Photos !

Affiche du festival des Nuits de la Roulotte 2009

Entre le 27 janvier et le 7 février, ce sont plus de 20 groupes qui se sont succédés à Chambéry (Savoie) et dans les alentours, à l'occasion du festival de musique tsigane Les Nuits de la Roulotte. Bien que je ne présenterai ici que des photos prises lors des concerts, notons que ce festival est un évènement mêlant donc musique mais aussi animations, expositions, cinéma ou encore conférences.

Kopanitza

C'est en photographe tout a fait amateur et tout a fait novice dans la photographie de concert (ce fut donc l'occasion d'apprendre !) que je me suis rendu à plusieurs concerts. Une fois cette 7ème édition terminé, c'est non sans une certaine mélancolie que j'ai trié plusieurs centaines de clichés pour ne retenir que les meilleurs (hum !).

Divano Dromensa

Rien que pour le fun, j'ai aussi pris le temps de créer un mini-site pour y exposer facilement mes photos. Mais pas uniquement les miennes. Il y a aussi des clichés de Théo et Alain Epeche (la photo, une histoire de famille).