Mes réalisations web
Le but de cette rubrique est de détailler quelque peu, avec captures d'écrans à l'appui, certaines de mes
réalisations. La raison en est simple, il est difficile de montrer tout le travail accompli sur un site en
trois lignes sur un
CV !
Je n'en détaillerai ici que les réalisations majeures, si vous voulez toutes les voir, vous pouvez aller voir
mes liens, à la rubrique "mes réalisations".
Comme cette page a tendance à s'allonger, j'ai mis
mes réalisations plus "anciennes" sur une seconde page.
Tech-énergiesNouveau !
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, the Cosy Cooking FactoryNouveau !
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é à My
SQL 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 !
Cette interface d'admin permet de gérer de nombreuses choses, notamment les recettes, les cours, les contenus... Toutefois, elle améliore encore les
précédentes, notamment par une gestion très optimisée utilisant force Javascript pour permettre par exemple de programmer des cours le plus rapidement
possible.
La gestion des calendriers a également été revue pour être plus
user-friendly.
L'occasion a été donnée d'ouvrir cet outil de "pilotage" du site à d'autres possibilités, par exemple, les version imprimables des recettes au format A5 sont
directement générées depuis le site... et sont projetées sur les écrans qui permettent aux participants de suivre la recette.
Ci contre, vous avez un exemple de calendrier pour gérer l'ajout d'un cours, il est possible de sélectionner plusieurs recettes pour créer un cours "menu" par exemple.
A noter, cette interface d'administration est entièrement valide
XHTML 1 Strict, et les
CSS sont également valides !
Le Chantier Naval Jacquot-Descombes
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).
JKreation Nouveau !
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 !
Cette interface d'administration est un excellent melting-pot des précédentes interfaces d'administration que j'ai eu à créer, avec de petites
nouveautés qui font leur apparition, notamment une gestion des frais de port assez complète et complexe.
Le contenu de certaines pages, les commandes, les produits, les catégories desdits produits, etc... sont tous pilotables.
Je vous laisse jeter un oeil à la première capture, histoire que vous vous fassiez votre propre idée !
Le système de gestion des catégories des produits est inspiré de celui de
Sophie Basso, mais poussé
encore plus loin ! La 2
ème capture montre ce système (3 niveaux de catégories/sous-catégories, toutes ordonnables et pilotables à souhait).
A noter, cette interface d'administration est entièrement valide
XHTML 1 Strict, et les
CSS sont également valides !
Sophie's Art
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 !
Cette interface d'administration est l'une des plus intéressantes que j'ai eues à programmer, les textes de quasiment toutes les pages sont pilotables,
ainsi que chaque rubrique... le tout en deux langues !
Je suis particulièrement content du système de gestion des galeries et des sous-galeries, Sophie peut les ordonner à sa guise, en créer autant qu'elle le désire,
la 2
ème capture montre ce système.
Ensuite chaque galerie ou sous-galerie peut recevoir des photographies à loisir !
Comme toujours, cette interface d'administration est faite à grands renforts de
CSS, histoire
d'avoir un système très léger et rapide.
Je vous laisse jeter un oeil à la première capture, histoire que vous vous fassiez votre propre idée !
A noter, cette interface d'administration est entièrement valide
XHTML 1 Strict, et les
CSS sont également valides !
Lamarque Mis à jour !
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 !
Plus que jamais, il fallait que la société Lamarque puisse piloter le site et son activité : l'achat en ligne, la création des factures, le contenu
du site (gammes, produits, etc...), le calcul des frais de port, la gestion du stock etc...). Nous avons au final une interface d'administration
assez complète, et plutôt cossue ! ;-)
A noter, cette interface d'administration est entièrement valide
XHTML 1 Strict, et les
CSS sont également valides !
Brands2com
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 !
Afin de faire face à l'importante quantité de données et à la relative complexité du projet (par exemple, les descriptions standards des produits/services pour décrire
les marques sont au nombre de... 15 000 classées dans 50 catégories !), l'accent a été mis sur l'allègement de la charge serveur via du
Javascript/
DOM, ce qui a permis au passage d'améliorer les fonctionnalités et l'usabilité du moteur (listes
qui interagissent entre elles, etc...).
D'autres fonctionnalités ont été ajoutées, notamment la gestion d'accès à plusieurs niveaux (site et administration), la possibilité de piloter
d'autres parties, etc... font de cette interface d'administration une des plus intéressantes que j'ai eu à programmer.
A noter, cette interface d'administration est entièrement valide
XHTML 1 Strict, et les
CSS sont également valides !
Yem.ch, nouvelle version !
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
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)
Club-DVD.ch
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 !
Comme toujours, il était indispensable de pouvoir gérer le site de manière aisée. Tout le site est donc pilotable à partir de cette interface d'administration.
Je ne vais pas détailler toutes les rubriques, jetez un oeil à cette capture d'écran (cliquez sur l'image pour l'agrandir) pour vous faire une idée.
The S.O.C Project !
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 !
Etant complètement partisan de "Bien travailler pour moins travailler", je me suis fait aussi ma propre interface
d'administration pour mon site, qui me permet de tenir à jour plus rapidement ce site, sans trop mettre les
mains dans le cambouis (le code) ! Depuis le changement d'hébergement, l'administration est sécurisée en plus via
SSL (
HTTPS).
Ce site est la propriété d'Hoffmann Nicolas. Tous droits de reproduction interdits.