Mes réalisations web

Le site de Tech-énergies a été l'occasion de revenir à quelque chose que je ne fais plus très souvent, à savoir... un site sans interface d'administration... et un logo.

Le site présente tout simplement l'activité de la société Tech-énergies, qui est spécialisée dans le génie climatique. Il propose également un formulaire de contact (un plan du site, une page d'erreur 404 et 403 sont également disponibles).

Même s'il n'y a pas d'interface d'administration, le site n'est pas exempt de PHP (pour la gestion du bandeau, de la page courante, du formulaire de contact, etc...), et combiné à XHTML/CSS, on a au final un contenu plutôt simple à gérer.

Le graphisme du logo et du site (mosaïque d'images, éléments de navigation, titres, etc...) a été fait avec Photoshop, les rollovers ont été mis en place sans utilisation de Javascript, juste en utilisant la technique des portes coulissantes en CSS (pas de préchargement nécessaire, ni de Javascript pour l'image survolée).
Seuls certains choix de couleurs et d'images ont été effectués par le client (charte graphique), pour le reste, j'étais en totale autonomie.

Bien évidemment, le site est pleinement valide XHTML/CSS, est-il besoin de le préciser !

Ci-contre, voici 2 captures d'écran, la page d'accueil et la page de contact (cliquez sur les images pour agrandir).

Katrépices est né de l'idée de Stéphanie et de Jeoffrey, le concept est simple : proposer des cours de cuisine à Genève, dans un cadre somptueux et dans une ambiance sympathique, d'où le nom du concept "Katrépices, the Cosy Cooking Factory".

Le site en lui-même bien sûr présente l'activité, la boutique... mais surtout permet de gérer l'agenda des cours et les inscriptions.
L'occasion m'a été donnée de tester de nouvelles mises en page via XHTML/CSS, et PHP couplé à MySQL permet de gérer le côté dynamique des pages, les cours, les recettes, certains contenus.
Le graphisme a été fait via Photoshop, et Flash s'occupe des quelques animations. Il est également possible de payer son cours directement en ligne, avec un paiement via Paypal.

A titre personnel, je prends le pari que ce projet prendra vite son essort... si j'en juge par le succès du démarrage et toutes les bonnes idées que Stéphanie et Jeoffrey ont eues pour rendre cet endroit charmant !

Le Chantier Naval Jacquot-Descombes, également appelé CNJD a été l'occasion de revenir à quelque chose que je n'avais pas fait depuis très longtemps, à savoir... un site sans interface d'administration.

Le site présente tout simplement l'activité du chantier naval, et propose un formulaire de contact (un plan du site, une page d'erreur 404 et 403 sont également disponibles).

Même s'il n'y a pas d'interface d'administration, le site n'est pas exempt de PHP (pour la gestion du bandeau, de la page courante, du formulaire de contact, etc...), et combiné à XHTML/CSS, on a au final un contenu plutôt simple à gérer (le client peut le mettre à jour tout seul en éditant directement les fichiers .php).

Le concept de séparation structure/présentation des standards prend tout son intérêt dans ce cas !

Le graphisme a été fait avec Photoshop, les rollovers ont été mis en place sans utilisation de Javascript, juste en utilisant la technique des portes coulissantes en CSS (pas de préchargement nécessaire, ni de Javascript pour l'image survolée).

L'occasion a également été donnée d'améliorer mon classique formulaire de contact, notamment via une utilisation un peu plus "avancée" de Javascript : si un champ n'est pas valide, le Javascript détecte le champ problématique, encadre en rouge ledit champ, et remet le curseur (focus) sur ce champ.

Bien évidemment, le site est pleinement valide XHTML/CSS, est-il besoin de le préciser !

Ci-contre, voici 2 captures d'écran, la page d'accueil et la page "Logistique" (cliquez sur les images pour agrandir).

Voilà ma seconde boutique en ligne, dans un style très différent de la première !

JKreation est une société spécialisée dans la bijouterie et l'artisanat d'Afrique de qualité.

De très nombreux produits sont disponibles, tout l'art du site a d'ailleurs été de les "catégoriser", et de faire un système pratique sur le site public pour permettre à l'internaute de facilement s'orienter dans l'offre disponible.

Le site est realisé entièrement en PHP/XHTML/CSS, la principale idée était d'offrir un moteur robuste et facilement évolutif, afin de pouvoir gérer au mieux toute l'activité de la boutique.

L'intégration d'un paiement en ligne via Paypal, la gestion des produits, la création du moteur du site, l'intégration d'une procédure complète de paiement, etc... ont rendu ce projet particulièrement intéressant.

Le graphisme a été fait sous Photoshop, et l'intégration via XHTML/CSS a permis de proposer un site assez léger et agréable à consulter.

Gageons que JKreation continuera sa belle lancée, en tout cas sa créatrice Kate Neequaye ne manque pas d'énerge ni d'idées pour la faire grandir !

Sophie Basso est une avocate passionnée par la photographie. Elle a décidé de se consacrer entièrement à sa passion depuis Août 2005.

Le moins qu'on puisse dire, c'est que son style de photographie est assez éclectique : courses automobiles, requins, business, portraits...

Le site est realisé entièrement en PHP/XHTML/CSS, la principale idée était de faire un site très léger, avec peu de fioritures graphiques.

Bien sûr, l'utilisation des CSS a permis de réduire le poids des pages au strict minimum, afin d'avoir un site très rapide à l'affichage.
A noter, le site est disponible en anglais et en français.

J'en profite pour la saluer au passage, c'est une personne débordant d'énergie et très sympathique !

Voici tout simplement ma première boutique en ligne complète !
La société Lamarque est une jeune entreprise suisse spécialisée dans les cosmétiques dont l'idée première est assez forte : appliquer le principe de précaution en matière de cosmétiques. Autrement dit, d'enlever tous les produits suspectés ou avérés d'avoir un risque cancérigène, allergène, etc... même si la loi les autorise. Louable démarche !

Ce projet est un des plus importants que j'ai eu à gérer, que ce soit par :

• la complexité du site (4 styles CSS alternatifs : un pour chaque catégorie de produits (femme, homme, enfant) et un pour la page d'accueil),
• l'inclusion de deux paiements en ligne (CHF et Euros),
• la gestion multi-langue (français, anglais et allemand pour l'instant),
• et la création d'une procédure complète de paiement/traitement des commandes.

Au final, on a l'habituel couple XHTML/CSS, pour le contenu et sa présentation, généré via du PHP pour tous les aspects dynamiques du site.
Même les factures sont gérées via des CSS destinées à l'impression !
Les différents graphismes m'ont été fournis, j'ai juste dû les retravailler pour les adapter au site.

Quoi qu'il en soit, je souhaite une bonne chance à cette société, leur démarche de qualité dans leurs produits mérite un grand bravo et devrait faire office d'exemple pour beaucoup de domaines !

Le projet Brands2com a été imaginé par Jeff Turner, l'idée est partie d'un constat : la recherche de l'existant à propos des marques est souvent difficile, fastidieuse et compliquée, il faut avoir plusieurs linguistes afin de savoir la signification de la marque dans plusieurs langues, il faut des juristes afin de connaître dans quels pays telle ou telle marque est déposée/protégée, l'information est très dispersée, etc...

L'idée a donc été de centraliser toutes ces informations sur un site, et de permettre à quelques "grands comptes" (de grandes sociétés qui ont beaucoup de marques déposées) de s'acheter/vendre plus aisément des marques entre elles.

Côté technique, nous utilisons du XHTML/CSS pour la mise en page, PHP pour manipuler la base de données, et une forte dose de Javascript/DOM vient soulager le moteur du site afin de ne pas trop solliciter le serveur. Le graphisme a été fait sous Photoshop ainsi que les différents logos.

Le site bien que parfaitement fonctionnel n'est pas encore disponible en ligne, mais gageons qu'il le sera très prochainement !

Suite à l'envie du boss de changer le site de Yem informatique, une refonte a été lancée.
Cette refonte a été encore une fois atypique : comme j'étais très pris sur d'autres projets au moment de cette refonte, décision a été prise de confier le site à quelqu'un d'autre.

Une fois de plus, le code résultant d'un célèbre logiciel WYSIWYG et de gros problèmes de pérennité (code effroyable, mises à jours difficiles, problèmes sous divers navigateurs) absolument inacceptables m'ont incité à le refaire moi-même à la main proprement en XHTML/CSS, avec un petit peu de PHP pour accélérer encore les futures mises à jour.

Même si cette refonte n'est pas tombée au moment le plus agréable (beaucoup de boulot), cette nouvelle version m'a permis de m'amuser quelque peu avec les CSS pour tester diverses techniques de positionnement et autres joyeusetés que seul un maniaque des CSS saurait apprécier ! ;-)

Au final, je devais intervenir en tant que simple "consultant", et je me suis retrouvé à tout refaire moi-même...

La moralité de cette histoire : ne confiez pas à un d'autre quelque chose que vous pouvez mieux faire vous-même... vous perdrez moins de temps !

Go-File est un projet existant depuis plusieurs années, le principe est simple : faciliter les transferts de fichiers volumineux (bref, Go-File est fait pour transférer rapidement des fichiers que la boîte mail refuse, et pour lesquels il est dommage de graver un CD).
Un ancien site avait été fait, mais l'accessibilité et les standards n'avaient pas été pris en compte, et divers bugs de fonctionnement gênaient (bref, une bonne idée un peu baclée). La refonte a donné l'occasion :

• De débugger le moteur ainsi que le fonctionnement du site,
• de faire une refonte graphique plus au goût du jour,
• et au passage de moderniser le code du site (XHTML/CSS) et de prendre en compte l'accessibilité et l'ergonomie !

Go-File utilise de l'ASP pour sa partie dynamique, les transferts sont sécurisés via SSL (HTTPS), et seul le destinataire a la possibilité de télécharger le fichier (ce dernier est renommé aléatoirement au moment du stockage).
Le projet est encore en cours d'amélioration (notamment la partie d'administration du site), diverses fonctionnalités vont être ajoutées pour les clients.

Au final, après une refonte de tous les dangers car très étalée au niveau du temps, ce site reste une des intégrations CSS les plus intéressantes que j'ai fait, le joli graphisme allié à l'utilisation des standards donnent un site plutôt réussi ! (le site est bilingue)

Le Club-DVD est un site de location de DVD. L'ancienne version du site avait le mérite d'être très efficace (en 3 clics on pouvait louer un DVD), toutefois le graphisme laissait un peu à désirer, et le site en lui-même était quelque peu "vieux" (frames, éléments d'accessibilité inexistants, etc...).
Il fallait remettre tout le système au goût du jour, la seule contrainte était de repartir de la base de données existante. Pour information, le site utilise une base de données Access, et utilise donc l'ASP en guise de langage de web "dynamique".
Tout le but du jeu a donc été de reprendre l'"efficacité" de l'ancien site, tout en le parant d'un graphisme plus moderne, et d'une structure plus agréable à la navigation.

Au final, le site est l'une de mes meilleures réalisations actuelles, que ce soit :

• d'un point de vue technique (en XHTML/CSS valide généré via de l'ASP, avec des éléments en Flash, une base de données derrière, et le tout parfaitement accessible, que l'on ait un plugin Flash ou non),
• d'un point de vue graphisme (Photoshop 7 et Flash MX, avec un design s'adaptant à la résolution du navigateur),
• du côté ergonomique (le site est très accessible, en 2 langues changeables en un clic de souris, où que l'on soit sur le site, on peut toujours louer un film en 3 clics),
• et tout simplement de l'utilisation : le site est en production depuis 3 ans, et fonctionne à merveille depuis !

Le S.O.C project est né d'un constat simple : je devais manipuler des formulaires de plus en plus importants (jusqu'à 50 champs pour certains !), et c'était de plus en plus long de les créer et de les traiter, et les sources d'erreurs étaient de plus en plus nombreuses (nul n'est infaillible). Comme c'est une tâche plus ou moins répétitive, je me suis posé la question : pourquoi ne pas créer UN formulaire qui me génère DES formulaires ?
(que ce soit clair, c'est un outil dont le but est de générer du code, destiné aux développeurs web et non à des personnes débutantes)

Après plusieurs essais, je suis enfin arrivé à quelque chose d'intéressant : le plus gros du travail est fait automatiquement (code des formulaires et génération des requêtes SQL), le tout sans aucune limitation en nombre.
(ça peut gérer des formulaires de 5, 100 ou 2000 champs si besoin est !)
A titre d'info, le projet fonctionne en PHP, et tout est généré "à la volée" (dynamiquement), ce qui me permet d'avoir une source assez légère.

Ce projet m'a permis de considérablement accélérer le temps de développement d'une interface d'administration. Néanmoins bien qu'il soit déjà bien fonctionnel, il n'est pas encore complet, et j'ai d'autres idées en tête pour le perfectionner.
Toutefois, il gère déjà bien les formulaires (en prenant en compte l'accessibilité de ces derniers), les requêtes SQL pour faire intéragir ces formulaires avec des bases de données, le tout dans deux langages (PHP et ASP).

Je me permets de bien insister sur un point : le SOC Project est une version démo d'un projet en cours, qui va fortement évoluer. (le but est qu'il génère quasiment tout seul le code d'une interface d'administration de site). Pour info, une Foire Aux Questions est disponible, et bien sûr de nombreuses améliorations sont prévues. La version en cours est la 0.90, donc on n'est plus très loin de la version "finale" !

Ci-contre, voici 2 captures d'écran, avec un exemple à 2 champs (cliquez sur les images pour agrandir).

Comme on n'est jamais aussi bien servi que par soi-même, présentons quelques aspects de ce site personnel.
La précédente version incluait déjà (comme quoi l'idée n'est vraiment pas neuve) un système pour skinner le site. Seul problème : le système que j'avais mis en place était extrêmement contraignant pour le graphisme, et loin de refléter ce que j'ai appris point de vue CSS depuis un an.
De plus, le site utilisait des cadres (frames) et des tableaux à profusion, et bien que valide XHTML 1.0, son code était loin d'être un modèle de propreté...

Cette nouvelle version tient toutes ses promesses : elle me permet de garder l'option "skinnage", via l'utilisation massive des CSS, le code XHTML est beaucoup plus "propre", le site est beaucoup plus évolutif, etc.
A titre d'exemple, le site supporte pas moins de 4 médias (screen, print, projection, handheld), et a plus d'une quinzaine de présentations alternatives différentes.

Si vous essayez de changer de skin, vous vous apercevrez que (presque) rien ne change dans le code, toute la mise en page est gérée grâce aux CSS, ce qui permet une meilleure séparation contenu/mise en page, une meilleure accessibilité, etc...

Je peux sans trop m'avancer dire que ce site est un succès pour moi : le nombre de visites est assez important, c'est une bonne vitrine de ce que je peux faire, et c'est tout simplement plaisant de s'en occuper !