Mot-clé - dev Design

Fil des billets - Fil des commentaires

site - avecunphotographe.fr

Après un peu plus de deux mois de travail en temps masqué et la plupart du temps le weekend, je pense que mon initiation à Wordpress s'est bien déroulée.

Les étapes de conception

Profitant de la mise en place d'un nouveau projet, j'ai tout d'abord vérifié que Worpress pouvait convenir. Puis j'ai patiemment expliqué point par point les avantages d'une telle solution. J'avais pris la précaution de préciser que je n'avais encore jamais fait l'intégration de ce programme auparavant. Le « client » était donc au courant que ça me prendrait un plus de temps, mais comme il n'était pas pressé, ça tombait bien.

J'ai commencé alors par définir les grandes lignes. Avec mon correspondant, nous avons validé une interface à partir d'une page html/css statique – pour le coup, j'ai eu de la chance d'avoir en face de moi une personne qui savait exactement ce qu'elle voulait –.

En parallèle, j'ai installé un site de développement sur un ordinateur portable. C'est là que j'ai commencé à faire mes premières armes sous Wordpress. Pendant ce temps, nous nous occupions de l'hébergement et derrière une belle page de construction, nous commencions à poser les premières briques du site que vous découvrirez un peu plus bas.

J'avais en tête quelques difficultés et c'est en définitive mon module de choix de catégories qui fut le plus long à mettre en place.

Vous vous en doutez, il ne m'a pas fallu longtemps pour avoir les mains dans le cambouis. Et c'est à coups de personnalisation de thème, de fonctions php et d'un soupçon de jquery que je suis arrivé à mes fins.

Le résultat

Alors voilà. Le site s'appelle avecunphotographe.fr. Il parle de photographie bien sûr. Plus précisément, il propose des stages d'initiation, de perfectionnement et des séjours photo. Le tout est accès sur des cas pratiques, mais aussi sur le post-traitement (outils numériques, impressions, etc.). Et vous savez quoi, la région où se déroulent la plupart des stages se situe dans le val de Loire, une région hautement recherchée pour les photographes de paysages.

Capture avecunphotographe.fr

Je vous laisse découvrir le côté technique du site. Pour ma part, j'ai une affection particulière pour le module de choix de stages – mais forcement, c'est celui qui m'a donné le plus de fil à retordre –. J'aime bien aussi la galerie, le calendrier, le pied de page... bref, c'est assez rare chez moi, mais je l'avoue, j'aime bien ce site... mais pour combien de temps encore, je n'en sais rien.

Conclusion

J'ai été surpris en bien par l'adaptabilité de ce Blog/CMS. L'installation est facile certes, mais la personnalisation, la documentation et surtout la communauté de développeurs en font un outil très simple d'accès.

Je suppose que vous ne m'avez pas attendu pour le connaitre, quoiqu'un en soit, je pense y retourner bientôt.

Le Carnet de Janusz

Carnet de Janusz

Depuis fin mars déjà, un nouveau projet a vu le jour. Il s'appelle le carnet de Janusz. Avant de le rendre officiellement public, j'ai voulu m'assurer qu'il tournait correctement, mais surtout, il fallait y ajouter un peu de contenu ; il n'est rien de plus énervant que de découvrir un site et de tomber sur des pages en cours de construction.

Voici donc encore un nouveau site. Il vient compléter celui que vous lisez en ce moment, mais il travaille sur un autre axe, plus pérenne dans le temps. Ce carnet se lira comme un livre en se feuilletant page par page. Sa construction avoisine d'ailleurs celle d'un exemplaire papier ou d'un ebook si l'on se veut plus moderne. Sous couvert de rassembler des notes, cet espace permettra de regrouper de nouvelles connaissances et d'étendre cette expérience à d'autres.

Pour l'instant, je travaille sur le carnet photo. Il retracera mon parcours photographique et synthétisera des notes et discussions que j'ai pu avoir avec d'autres photographes. Une part du contenu sera aussi dédiée aux notes de prises de vues, comme la composition de certaines scènes ou encore les réglages à utiliser.

Détails techniques :

  • Programmé et validé en HTML5/CSS3 ; nouvelles normes de programmation Internet. Encore en développement, il peut y avoir une différence de rendue en fonction du navigateur que vous utilisez.
  • Modification et réécriture d'une partie de dokuwiki pour un affichage correcte en HTML5.
  • Quelques touches de jquery (animation d'un système de signet automatique, agrandissement des illustrations).
  • Optimisation du référencement, notamment grâce à GTmetrix qui permet d'analyser puis de corriger les "lenteurs". En fonction des pages, obtention du grade A ou B (80-98%).

ledruide.net v8.1 en ligne

Et bien voilà, le site ledruide.net prend enfin ses nouvelles couleurs.

Lors de la préparation de la dernière version, je m'étais attaqué principalement sur l'intégration de différents modules (dotclear, dokuwiki, zenphoto). Le but était de travailler avec un seul thème commun à tous. J'avais dépensé pas mal d'énergie sur ce travail, ce qui fait que j'avais rapidement bidouillé une interface graphique, en attendant de mieux faire.

En cours de route, de nouveaux projets ont vu le jour et j'avais laissé tout ça de côté ; après tout, le site fonctionnait. Et puis, en commençant à mettre mon nez dans la programmation en jquery, j'ai eu envie de faire quelque chose de sexy. La seule difficulté a été de se décider sur le graphisme. Et c'est après avoir longuement cherché des idées ailleurs que j'ai fini par me décider à abandonner le fond marron qui caractérisait le site depuis ses débuts.

Alors, au sommaire des nouveautés :

javascript et jquery

  • Une animation de la page de contact.
  • Animation des nuages dans la bannière supérieure.
  • Intégration d'un module de tri dans des tableaux. (tablesorter)
  • Slideshow dans la rubrique photo. (jquery.slideShow)
  • la fenêtre en surcouche dans la galerie photo. (nyroModal)
  • Utilisation du mode noConflict de jquery pour l'interfaçage avec Dokuwiki.
  • [EDIT 27/11/2009] : Ajout un module d'affichage de boite transparent en CSS/javascript (Transparent custom corners and borders)
  • [EDIT 15/12/2009] : Pour éviter d'ajouter des lignes de javascript supplémentaires, les boites transparentes seront gérés par du simple code en CSS3. Ces boîtes améliorées ne se verront sous Internet Explorer que lorsqu'ils suivront les préconisations du W3C.

Bien entendu tout est valide HTML/CSS.

Coté design

Le design général est librement inspiré des sites suivants :

  • Ryan Taylor : Bandeau en partie supérieur et le drop_content (animation lorsque l'on sélectionne le lien contact dans le menu).
  • Brynn Shepherd : Design sympa. Utilisation du procédé de “sprite” pour le menu : une seule image que l'on déplace en CSS.
  • Evasion Loft : Très beau formulaire de contact ; simple et efficace.
  • Sunrise design : Animation du ciel qui bouge.

- page 1 de 2